@threadlabs/looma 0.29.9 → 0.29.11

package/vue/components.css

@@ -939,12 +939,12 @@ ol:where([data-hn-ui-breadcrumbs]) {
 }
 
 /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
-@keyframes ui-spinner-rotate-7acb6679 {
+@keyframes ui-spinner-rotate-e50f176a {
 100% {
     transform: rotate(1turn);
 }
 }
-@keyframes ui-spinner-dash-7acb6679 {
+@keyframes ui-spinner-dash-e50f176a {
 0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
@@ -980,7 +980,7 @@ svg {
     display: block;
     inline-size: 100%;
     block-size: 100%;
-    animation: ui-spinner-rotate-7acb6679 2s linear infinite;
+    animation: ui-spinner-rotate-e50f176a 2s linear infinite;
 }
 circle {
     stroke-width: 3;
@@ -993,7 +993,7 @@ circle {
     stroke: currentColor;
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
-    animation: ui-spinner-dash-7acb6679 1.5s ease-in-out infinite;
+    animation: ui-spinner-dash-e50f176a 1.5s ease-in-out infinite;
 }
 @media (prefers-reduced-motion: reduce) {
 svg,.arc {
@@ -1777,7 +1777,7 @@ 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-fe145372 {
+@keyframes ui-checkbox-check-ec105bae {
 from {
     opacity: 0;
     transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
@@ -1872,7 +1872,7 @@ input:checked:where([data-hn-ui-checkbox])::after {
     border-width: 0 0.125rem 0.125rem 0;
     opacity: 1;
     transform: translateY(-0.09rem) rotate(45deg);
-    animation: ui-checkbox-check-fe145372 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
+    animation: ui-checkbox-check-ec105bae 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
       both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
@@ -3036,13 +3036,13 @@ dd:where([data-hn-ui-description-item]) {
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-539eaebb {
+@keyframes ui-dialog-enter-c6c839fc {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-539eaebb {
+@keyframes ui-dialog-backdrop-enter-c6c839fc {
 from {
     background-color: transparent;
 }
@@ -3090,7 +3090,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-539eaebb var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-c6c839fc var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -3208,7 +3208,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-539eaebb var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-c6c839fc var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -9432,7 +9432,7 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-@keyframes ui-toast-enter-f573d590 {
+@keyframes ui-toast-enter-ae90d81c {
 from {
     opacity: 0;
     transform: translateY(-1rem);
@@ -9442,7 +9442,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-f573d590 {
+@keyframes ui-toast-exit-ae90d81c {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9452,7 +9452,7 @@ to {
     transform: translateY(0.75rem);
 }
 }
-@keyframes ui-toast-enter-bottom-f573d590 {
+@keyframes ui-toast-enter-bottom-ae90d81c {
 from {
     opacity: 0;
     transform: translateY(1rem);
@@ -9462,7 +9462,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-bottom-f573d590 {
+@keyframes ui-toast-exit-bottom-ae90d81c {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9553,7 +9553,7 @@ to {
       --_ui-toast-region-shadow,
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
-    animation: ui-toast-enter-f573d590 var(--_ui-toast-region-enter-duration, 0.32s)
+    animation: ui-toast-enter-ae90d81c var(--_ui-toast-region-enter-duration, 0.32s)
       var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 .toast[data-tone="info"]:where([data-hn-ui-toast-region]) {
@@ -9573,17 +9573,17 @@ to {
     --_ui-toast-region-tone-surface: var(--ui-danger-soft);
 }
 .toast.closing:where([data-hn-ui-toast-region]) {
-    animation: ui-toast-exit-f573d590 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
+    animation: ui-toast-exit-ae90d81c var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
       both;
     pointer-events: none;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-enter-bottom-f573d590;
+    animation-name: ui-toast-enter-bottom-ae90d81c;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast.closing:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-exit-bottom-f573d590;
+    animation-name: ui-toast-exit-bottom-ae90d81c;
 }
 @media (prefers-reduced-motion: reduce) {
 .toast:where([data-hn-ui-toast-region]),.toast.closing:where([data-hn-ui-toast-region]) {
@@ -9784,7 +9784,7 @@ to {
    slides, the label reaches back under the icon (the controller measures how far) with its text
    where it was, and fades out across the gap before the icon, fully gone where the icon begins
    to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
-@keyframes ui-tree-item-marquee-fb8daa44 {
+@keyframes ui-tree-item-marquee-9af20e85 {
 from {
     transform: translateX(0);
 }
@@ -10040,7 +10040,7 @@ to {
 .row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item]) {
     /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
        long enough to read rather than sliding back and forth. */
-    animation: ui-tree-item-marquee-fb8daa44 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+    animation: ui-tree-item-marquee-9af20e85 var(--_marquee-duration) linear 0.5s 1 normal forwards;
     will-change: transform;
 }
 .row[data-ui-marquee] > .label:where([data-hn-ui-tree-item]) {
@@ -10965,7 +10965,3042 @@ html[data-ui-input-modality="touch"]
   width: 3px;
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
 }
-/* Generated by HTML Next 1.0.0-alpha.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-button"] { --html-next-scope-owner: "ui-button" !important; }
+}
+@scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-button-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-disabled-filter {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-disabled-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-ghost-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-ghost-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-ghost-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-hover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-link-hover-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-link-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-solid-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-white-space {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-button"]) {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      --_hue: var(--ui-accent);
+      --_hue-hover: var(--ui-accent-hover);
+      --_hue-active: var(--ui-accent-active);
+      --_hue-text: var(--ui-accent-active);
+      --_on-hue: var(--ui-on-accent);
+
+      --_tone: var(--_hue);
+      --_tone-hover: var(--_hue-hover);
+      --_tone-active: var(--_hue-active);
+      --_tone-text: var(--_hue-text);
+      --_on-tone: var(--_on-hue);
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      column-gap: var(--ui-space-2);
+      vertical-align: middle;
+      color: var(--_tone-text);
+    }
+
+    :scope:where([data-component~="ui-button"]):dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="align=start"] {
+      justify-content: flex-start;
+      text-align: start;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="stretch"] {
+      display: flex;
+      inline-size: 100%;
+    }
+
+    :scope:where([data-component~="ui-button"]) {
+      appearance: none;
+      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+      border-style: solid;
+      border-width: var(--ui-border-width);
+      border-color: var(--ui-button-border, var(--_tone));
+      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;
+      font-weight: var(--ui-font-medium);
+      text-decoration: none;
+      /* Unset, a button wraps as its container does. */
+      white-space: var(--ui-button-white-space, inherit);
+      line-height: var(--ui-line-height-tight);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      background-image: none;
+      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease);
+      margin: 0;
+    }
+
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+    :scope:where([data-component~="ui-button"]):is(a) {
+      text-decoration: none;
+    }
+
+    .spinner-wrap {
+      display: inline-flex;
+      flex: none;
+      vertical-align: middle;
+    }
+
+    /* 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. */
+    :scope:where([data-component~="ui-button"]):not([variant="link"]):has(.badge:not(:empty)) {
+      padding-block: var(--ui-space-0-5);
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+    }
+
+    .badge:empty {
+      display: none;
+    }
+
+    @supports (text-box-trim: trim-both) {
+      :scope:where([data-component~="ui-button"]) {
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
+      min-block-size: 1.5rem;
+      padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="shape=pill"] {
+      border-radius: var(--ui-button-radius, var(--ui-radius-round));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
+      min-block-size: var(--ui-control-size-sm);
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=lg"] {
+      min-block-size: var(--ui-control-size-lg);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
+    }
+
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"] {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-content: center;
+      align-items: start;
+      gap: var(--ui-space-3);
+      inline-size: 100%;
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+      text-align: start;
+      white-space: normal;
+      box-shadow: none;
+      background-image: none;
+    }
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+    }
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .card-icon {
+      display: flex;
+      align-items: flex-start;
+    }
+    .card-icon:empty {
+      display: none;
+    }
+    .card-content {
+      min-inline-size: 0;
+    }
+    .card-action {
+      display: flex;
+      align-items: center;
+      align-self: center;
+    }
+
+    /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+       is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+    :scope:where([data-component~="ui-button"]):hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--_tone-hover));
+      background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
+    }
+
+    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+      border-color: var(--ui-button-border, var(--ui-border));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-border-strong));
+    }
+
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
+    :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+      border-color: var(--_tone);
+      background-color: var(--_tone);
+      color: var(--_on-tone);
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--_tone-hover);
+      border-color: var(--_tone-hover);
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--_tone-active);
+      border-color: var(--_tone-active);
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=neutral"] {
+      --_hue: var(--ui-text);
+      --_hue-hover: var(--ui-text);
+      --_hue-active: var(--ui-text);
+      --_hue-text: var(--ui-text);
+      --_on-hue: var(--ui-surface);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=danger"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+      --_hue: var(--ui-danger);
+      --_hue-hover: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-hover);
+      --_hue-text: var(--ui-danger-hover);
+      --_on-hue: var(--ui-on-danger);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=success"] {
+      --_hue: var(--ui-success);
+      --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
+      --_on-hue: var(--ui-surface);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=warning"] {
+      --_hue: var(--ui-warning);
+      --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
+      --_on-hue: var(--ui-surface);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=info"] {
+      --_hue: var(--ui-info);
+      --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
+      --_on-hue: var(--ui-surface);
+    }
+
+    /* A value picker is a field, with Select's quiet edge and resting lift. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"] {
+      --_ui-field-shadow: var(--ui-shadow-sm);
+      border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
+      border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
+      background-color: var(--ui-button-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-text, var(--ui-text-primary));
+      font-weight: var(--ui-font-normal);
+      box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
+      background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+      --_ui-field-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-button-shadow, var(--_ui-field-shadow)),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"] {
+      border-color: transparent;
+      background: transparent;
+      box-shadow: none;
+      color: var(--ui-button-ghost-text, var(--_tone-text));
+    }
+
+    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
+      border-color: transparent;
+    }
+
+    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
+       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
+      border-color: transparent;
+      box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
+    }
+
+    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+    :scope:where([data-component~="ui-button"]):focus-visible {
+      outline: none;
+      box-shadow:
+        var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"]:focus-visible {
+      box-shadow:
+        var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]):focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    /* A loading action stays visually active; only an explicitly disabled action takes the
+       neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
+    :scope:where([data-component~="ui-button"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
+      opacity: var(--ui-button-disabled-opacity, 1);
+      cursor: not-allowed;
+      background-image: none;
+      box-shadow: none;
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="loading"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="pending"]):focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      background-color: var(--ui-disabled-surface);
+      border-color: transparent;
+    }
+
+    /* The size states outrank :host, so sm is named too, or a small button would stay small. */
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-button"]), :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
+    /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
+       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
+       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+       Only these need it: a hit area on every button would reach over its neighbours. */
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"],
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]::after, 
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"]::after {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size));
+      block-size: max(100%, var(--ui-control-min-block-size));
+      transform: translate(-50%, -50%);
+      content: "";
+    }
+
+    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"] {
+      display: inline;
+      min-block-size: 0;
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-sm);
+      background: none;
+      box-shadow: none;
+      font: inherit;
+      color: var(--ui-button-link-text, var(--ui-text-secondary));
+      text-decoration-line: underline;
+      text-decoration-thickness: 1px;
+      text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+      text-underline-offset: 0.2em;
+      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-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
+      color: var(--ui-button-link-hover-text, var(--ui-text-primary));
+      text-decoration-color: currentColor;
+      background: none;
+      transform: none;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
+      background: none;
+      transform: none;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      background: none;
+      border-color: transparent;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:focus-visible {
+      box-shadow: none;
+      /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-button"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-button"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+
+    /* 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. */
+
+    @supports (text-box-trim: trim-both) {
+    }
+
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+
+    /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+       is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+
+    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
+
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
+
+    /* A value picker is a field, with Select's quiet edge and resting lift. */
+
+    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+
+    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
+       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
+
+    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+
+    /* A loading action stays visually active; only an explicitly disabled action takes the
+       neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
+
+    /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
+
+    /* The size states outrank :host, so sm is named too, or a small button would stay small. */
+    @media (pointer: coarse) {
+    }
+
+    /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
+       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
+       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+       Only these need it: a hit area on every button would reach over its neighbours. */
+
+    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-cluster"] { --html-next-scope-owner: "ui-cluster" !important; }
+}
+@scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-cluster-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-cluster"]) {
+      --_layout-gap: var(--ui-space-3);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-cluster-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="fixed"] {
+      flex: none;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=s"] {
+      padding: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=m"] {
+      padding: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=l"] {
+      padding: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=s"] {
+      padding-inline-end: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=m"] {
+      padding-inline-end: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=l"] {
+      padding-inline-end: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=xl"] {
+      padding-inline-end: calc(var(--ui-space-4) * 4);
+    }
+
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=xs"] {
+      --_layout-gap: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=s"] {
+      --_layout-gap: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=m"] {
+      --_layout-gap: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=l"] {
+      --_layout-gap: var(--ui-space-5);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=xl"] {
+      --_layout-gap: var(--ui-space-6);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=end"] {
+      align-items: flex-end;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=baseline"] {
+      align-items: baseline;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=stretch"] {
+      align-items: stretch;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=center"] {
+      justify-content: center;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=end"] {
+      justify-content: flex-end;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=between"] {
+      justify-content: space-between;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="wrap=nowrap"] {
+      flex-wrap: nowrap;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-cluster"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-cluster"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-form-field"] { --html-next-scope-owner: "ui-form-field" !important; }
+}
+@scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-form-field-danger {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-help-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-help-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-help-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-label-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-label-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-min-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-form-field"]) {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-form-field-danger: var(--ui-form-field-danger);
+      --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+      --_ui-form-field-label-text: var(--ui-form-field-label-text);
+      --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+      --_ui-form-field-help-text: var(--ui-form-field-help-text);
+      --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
+
+      display: grid;
+      gap: var(--ui-space-2);
+      min-inline-size: var(--ui-form-field-min-inline-size, 0);
+      align-content: start;
+      color: var(--ui-text-primary);
+    }
+
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+    .label,
+    .help,
+    .error {
+      display: contents;
+    }
+
+    .label {
+      color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+      font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
+    }
+
+    /* A label action, such as a small help button, sits after the label text in a box one line
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+    .label:has(> .label-action > *) {
+      display: flex;
+      align-items: start;
+      gap: var(--ui-space-1);
+    }
+
+    .label-action {
+      display: flex;
+      align-items: unsafe center;
+      block-size: 1lh;
+    }
+
+    .label-action:not(:has(> *)) {
+      display: none;
+    }
+
+    .help {
+      color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+      font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
+      line-height: var(--ui-line-height-md);
+    }
+
+    .error {
+      display: none;
+    }
+
+    :scope:where([data-component~="ui-form-field"])[data-ui-form-field-state~="invalid"] .error {
+      display: contents;
+    }
+
+    /* An error reads in the danger colour, the one the invalid control's border takes. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-form-field"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-form-field"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+
+    /* A label action, such as a small help button, sits after the label text in a box one line
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+
+    .help > :where([data-slotted], [data-slotted] *):is(*) {
+      min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+    }
+
+    /* An error reads in the danger colour, the one the invalid control's border takes. */
+    .error,
+    :where([data-slotted], [data-slotted] *):is([role="alert"]) {
+      color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+      font-size: var(--ui-font-size-sm);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-icon"] { --html-next-scope-owner: "ui-icon" !important; }
+}
+@scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-icon"]) {
+      /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
+         sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
+      --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
+
+      display: inline-flex;
+      flex: none;
+      inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+      block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+    }
+
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+      stroke-width: var(--_ui-icon-stroke-width, 2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-icon"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-icon"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-icon-button"] { --html-next-scope-owner: "ui-icon-button" !important; }
+}
+@scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-button-active-scale {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-disabled-filter {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-disabled-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-outline-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-outline-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-surface {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-icon-button"]) {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
+      --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
+
+      display: inline-flex;
+      color: var(--ui-text-secondary);
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=accent"] {
+      --_icon-button-border: var(--ui-accent-solid);
+      --_icon-button-hover-border: var(--ui-accent-hover);
+      --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+      --_icon-button-outline-surface: color-mix(in srgb, var(--ui-accent-solid) 5%, var(--ui-surface-default));
+      color: var(--_icon-button-text);
+    }
+
+    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=neutral"] {
+      --_icon-button-solid-surface: var(--ui-text-primary);
+      --_icon-button-solid-hover-surface: var(--ui-text-primary);
+      --_icon-button-solid-text: var(--ui-surface-default);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] {
+      position: relative;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]::before {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      z-index: 1;
+      inline-size: var(--ui-affordance-guide-size);
+      block-size: var(--ui-affordance-guide-size);
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+      pointer-events: none;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
+      inline-size: 2px;
+      block-size: 20px;
+      background: var(--ui-border-strong);
+      opacity: 1;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:disabled::before {
+      opacity: 0;
+    }
+
+    /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+       proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] .content {
+      opacity: 1;
+      transform: scale(1);
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease), transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+        border-color: transparent;
+        background-color: transparent;
+        box-shadow: none;
+      }
+
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+        .content {
+        opacity: 0;
+        transform: scale(0.65);
+        transition-duration: var(--ui-motion-fast);
+      }
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+      opacity: 0;
+    }
+
+    :scope:where([data-component~="ui-icon-button"]) {
+      /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+      --_size: 2rem;
+      appearance: none;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
+      padding: 0;
+      margin: 0;
+      border: var(--ui-border-width) solid transparent;
+      border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
+      background-color: var(--ui-icon-button-surface, transparent);
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease),
+        scale var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]::before {
+        opacity: 0;
+      }
+    }
+
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-icon-button"]) {
+        position: relative;
+      }
+
+      :scope:where([data-component~="ui-icon-button"])::after {
+        content: "";
+        position: absolute;
+        inset: 50% auto auto 50%;
+        inline-size: max(100%, var(--ui-control-min-block-size));
+        block-size: max(100%, var(--ui-control-min-block-size));
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-icon-button"]) {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-icon-button"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size));
+      block-size: max(100%, var(--ui-control-min-block-size));
+      transform: translate(-50%, -50%);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=sm"] {
+      --_size: 1.75rem;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=lg"] {
+      --_size: 2.5rem;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
+    }
+
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"] {
+      --_size: var(--ui-control-size-md);
+      block-size: auto;
+      align-self: stretch;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"] {
+      --_size: var(--ui-control-size-sm);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"] {
+      --_size: var(--ui-control-size-lg);
+    }
+
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"] {
+        inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+      }
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="round"] {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"] {
+      border-color: var(--ui-icon-button-border, var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong))));
+      background-color: var(--ui-icon-button-outline-surface, var(--_icon-button-outline-surface, var(--ui-surface-default)));
+      background-image: none;
+      color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
+      box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"] {
+      background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
+      background-image: none;
+      color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
+      box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):hover:enabled:not([aria-disabled="true"]) {
+      /* Derived from the text colour so the ghost hover shows on any background. */
+      background-color: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
+      border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
+      color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
+      color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+      box-shadow: var(--ui-pressed);
+    }
+
+    /* Native toggle state persists after pointer release, including during loading. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+      background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 12%, var(--ui-surface-default)));
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):active:enabled:not([aria-disabled="true"]) {
+      scale: var(--ui-icon-button-active-scale, 0.96);
+    }
+
+    :is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) {
+      cursor: progress;
+    }
+
+    .content {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) .content {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] .content {
+        transition: none;
+      }
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:focus-visible {
+      box-shadow:
+        var(--ui-action-shadow, var(--_ui-action-shadow)),
+        var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:focus-visible {
+      box-shadow:
+        var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+      box-shadow:
+        var(--ui-pressed),
+        var(--ui-focus-halo);
+    }
+
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-2 * var(--ui-focus-width));
+      }
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+        outline-offset: var(--ui-focus-width);
+      }
+    }
+
+    /* Disabled is a flat neutral control, independent of the active variant's tone. */
+    :scope:where([data-component~="ui-icon-button"]):disabled {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
+      opacity: var(--ui-icon-button-disabled-opacity, 1);
+      cursor: not-allowed;
+      box-shadow: none;
+      background-image: none;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"]:disabled {
+      border-color: transparent;
+    }
+
+    :scope:where([data-component~="ui-icon-button"]) {
+      --_icon-button-icon-default: var(--ui-icon-size-md);
+      /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+         defaults, which its own --ui-icon-* hooks still override. */
+      --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=sm"] {
+      --_icon-button-icon-default: var(--ui-icon-size-sm);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=lg"] {
+      --_icon-button-icon-default: var(--ui-icon-size-lg);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-icon-button"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-icon-button"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+
+    /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+       proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+
+    @media (hover: hover) and (pointer: fine) {
+    }
+
+    @media (hover: none), (pointer: coarse) {
+    }
+
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+    }
+
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+
+    @media (pointer: coarse) {
+    }
+
+    /* Native toggle state persists after pointer release, including during loading. */
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
+    /* Disabled is a flat neutral control, independent of the active variant's tone. */
+
+    :where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      flex-shrink: 0;
+      stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-list"] { --html-next-scope-owner: "ui-list" !important; }
+}
+@scope ([data-component~="ui-list"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-list-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-list-min-item-width {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+    :scope:where([data-component~="ui-list"]) {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-1));
+      --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
+      display: flex;
+      flex-direction: column;
+      inline-size: 100%;
+      gap: var(--_list-gap);
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"],
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="markers=disc"] {
+      padding-inline-start: var(--ui-space-5);
+    }
+
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"] {
+      list-style: decimal;
+    }
+
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="markers=disc"] {
+      list-style: disc;
+    }
+
+    /* Compact passes its size to the items through private properties, which cross into each item. */
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="density=compact"] {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-2));
+      --_ui-list-item-min-size: 0;
+      --_ui-list-item-padding-block: 0;
+      --_ui-list-item-padding-inline: 0;
+      --_ui-list-item-title-weight: var(--ui-font-normal);
+      --_ui-list-native-padding-block: 0;
+      --_ui-list-native-padding-inline: 0;
+    }
+
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="layout=grid"] {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-3));
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-list"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-list"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+
+    :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(li) {
+      box-sizing: border-box;
+      min-inline-size: 0;
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      list-style: inherit;
+    }
+
+    :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(li.card) {
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4));
+      border: var(--ui-border-width) solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+      list-style: none;
+    }
+
+    /* Compact passes its size to the items through private properties, which cross into each item. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-menu"] { --html-next-scope-owner: "ui-menu" !important; }
+}
+@scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-menu-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
+       still win. */
+    :scope:where([data-component~="ui-menu"])[data-ui-menu-state~="density=compact"] {
+      --_ui-default-menu-item-padding-block: var(--ui-space-1);
+      --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+      --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
+      --_ui-default-menu-item-radius: var(--ui-radius-sm);
+      padding: var(--ui-space-1);
+      gap: 0;
+    }
+
+    /* Small follows its trigger down: an item's own hooks still win. */
+    :scope:where([data-component~="ui-menu"])[data-ui-menu-state~="size=sm"] {
+      --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
+      --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+      --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
+      --_ui-default-menu-item-radius: var(--ui-radius-sm);
+      --_ui-default-menu-item-min-block-size: 1.5rem;
+      --_ui-default-menu-indicator-size: 0.75rem;
+      min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+      padding: var(--ui-space-1);
+      gap: 0;
+    }
+
+    :scope:where([data-component~="ui-menu"])[data-ui-menu-state~="icons"] {
+      --_ui-default-menu-icon-display: inline-flex;
+    }
+
+    :scope:where([data-component~="ui-menu"]) {
+      --_ui-menu-surface: var(--ui-menu-surface);
+      --_ui-menu-border: var(--ui-menu-border);
+      --_ui-menu-radius: var(--ui-menu-radius);
+      --_ui-menu-shadow: var(--ui-menu-shadow);
+      /* A menu nested in a compact one starts again from its own density. */
+      --_ui-default-menu-item-padding-block: initial;
+      --_ui-default-menu-item-padding-inline: initial;
+      --_ui-default-menu-item-font-size: initial;
+      --_ui-default-menu-item-radius: initial;
+      --_ui-default-menu-item-min-block-size: initial;
+      --_ui-default-menu-indicator-size: initial;
+      --_ui-default-menu-icon-display: none;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      inline-size: max-content;
+      min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+      max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      overflow: visible;
+    }
+
+    .surface {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      padding: var(--ui-space-1);
+      background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: var(--ui-border-width) solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
+      max-block-size: inherit;
+      overflow: auto;
+    }
+
+    .surface hr {
+      align-self: stretch;
+      block-size: 0;
+      margin: var(--ui-space-1) 0;
+      border: 0;
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+    }
+
+    :scope:where([data-component~="ui-menu"]):not([data-ui-menu-state~="internalOpen"]):not(:scope:where([data-component~="ui-menu"])[data-ui-menu-state~="inline"]) {
+      display: none;
+    }
+
+    :scope:where([data-component~="ui-menu"])[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      overflow: visible;
+      max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    :scope:where([data-component~="ui-menu"])[popover]:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      :scope:where([data-component~="ui-menu"])[popover]:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    :scope:where([data-component~="ui-menu"])[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-menu"])[popover] {
+        transition: none;
+      }
+    }
+}
+@scope ([data-component~="ui-menu"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
+       still win. */
+
+    /* Small follows its trigger down: an item's own hooks still win. */
+
+    @starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-menu-item"] { --html-next-scope-owner: "ui-menu-item" !important; }
+}
+@scope ([data-component~="ui-menu-item"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-menu-item-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-radius {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-menu-item"]) {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      box-sizing: border-box;
+      width: 100%;
+      padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
+        var(--ui-menu-item-padding-inline, var(--_ui-default-menu-item-padding-inline, var(--ui-space-3)));
+      text-align: left;
+      border-radius: var(--ui-menu-item-radius, var(--_ui-default-menu-item-radius, var(--ui-selection-radius)));
+      color: var(--ui-text-primary);
+      font-size: var(--ui-menu-item-font-size, var(--_ui-default-menu-item-font-size, var(--ui-font-size-md)));
+      font-weight: var(--ui-font-medium);
+      text-decoration: none;
+      cursor: pointer;
+      outline: none;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+    .icon {
+      display: var(--_ui-default-menu-icon-display, none);
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
+    .icon:not(:empty) {
+      display: inline-flex;
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="tone=danger"] {
+      color: var(--ui-danger);
+    }
+
+    .label {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      box-sizing: border-box;
+      inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
+      block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
+      border: var(--ui-border-width) solid var(--ui-control-border);
+      border-radius: var(--ui-radius-sm);
+      color: var(--ui-surface);
+      --_ui-default-icon-size: 0.75rem;
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=action"] .indicator {
+      display: none;
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
+      border-color: var(--ui-accent);
+      background: var(--ui-accent);
+    }
+
+    /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
+       as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=radio"] .indicator {
+      border-color: transparent;
+      color: var(--ui-text-secondary);
+    }
+
+    .shortcut {
+      margin-inline-start: auto;
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+    }
+
+    .shortcut:empty {
+      display: none;
+    }
+
+    /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
+
+    /* Keep the text row at the shared control height where cap trimming is available. */
+    @supports (text-box-trim: trim-both) {
+      :scope:where([data-component~="ui-menu-item"]) {
+        min-block-size: var(--ui-menu-item-min-block-size, var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem)));
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
+    :scope:where([data-component~="ui-menu-item"]):is(:hover, :focus-visible):not([aria-disabled="true"]) {
+      background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+    }
+
+    :scope:where([data-component~="ui-menu-item"]):focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[aria-disabled="true"] {
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[aria-disabled="true"] .indicator {
+      border-color: var(--ui-disabled-border);
+      background: transparent;
+      color: var(--ui-disabled-text);
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[aria-disabled="true"] .indicator:where(:not([data-component], [data-slotted]))::after {
+      background: var(--ui-disabled-text);
+    }
+
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-menu-item"]):focus-visible {
+        outline-color: Highlight;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-menu-item"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-menu-item"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+
+    .icon :where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
+       as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
+
+    /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
+    .shortcut :where([data-slotted], [data-slotted] *):is(kbd) {
+      font: inherit;
+    }
+
+    /* Keep the text row at the shared control height where cap trimming is available. */
+    @supports (text-box-trim: trim-both) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-popover"] { --html-next-scope-owner: "ui-popover" !important; }
+}
+@scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-popover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-offset {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-padding {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-popover"]) {
+      --_ui-popover-surface: var(--ui-popover-surface);
+      --_ui-popover-border: var(--ui-popover-border);
+      --_ui-popover-radius: var(--ui-popover-radius);
+      --_ui-popover-shadow: var(--ui-popover-shadow);
+      --_ui-popover-padding: var(--ui-popover-padding);
+      box-sizing: border-box;
+      max-inline-size: min(
+        20rem,
+        calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
+      );
+      max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
+      overflow: visible;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .surface {
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      max-block-size: inherit;
+      overflow: auto;
+      padding: var(--_ui-popover-padding, var(--ui-space-3));
+      background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: var(--ui-border-width) solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
+    }
+
+    :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
+      display: none;
+    }
+
+    :scope:where([data-component~="ui-popover"])[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    :scope:where([data-component~="ui-popover"])[popover]:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      :scope:where([data-component~="ui-popover"])[popover]:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=sm"] {
+      inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=md"] {
+      inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=lg"] {
+      inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+
+    :scope:where([data-component~="ui-popover"])[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-popover"])[popover] {
+        transition: none;
+      }
+    }
+}
+@scope ([data-component~="ui-popover"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    @starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-stack"] { --html-next-scope-owner: "ui-stack" !important; }
+}
+@scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-stack-height {
+      syntax: "*";
+      inherits: false;
+    }
+
+    @property --ui-stack-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-stack"]) {
+      --_layout-gap: var(--ui-space-4);
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--ui-stack-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="fill"] {
+      flex: 1;
+      min-block-size: 0;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="height"] {
+      block-size: calc(var(--ui-stack-height, 0) * 1px);
+      min-block-size: 0;
+    }
+
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=none"] {
+      --_layout-gap: 0px;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=xs"] {
+      --_layout-gap: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=s"] {
+      --_layout-gap: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=m"] {
+      --_layout-gap: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=l"] {
+      --_layout-gap: var(--ui-space-5);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=xl"] {
+      --_layout-gap: var(--ui-space-6);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=center"] {
+      align-items: center;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=end"] {
+      align-items: flex-end;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=center"] {
+      justify-content: center;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=end"] {
+      justify-content: flex-end;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=between"] {
+      justify-content: space-between;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-stack"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-stack"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-text"] { --html-next-scope-owner: "ui-text" !important; }
+}
+@scope ([data-component~="ui-text"]) to ([data-component], [data-slotted]) {
+/* Running text, set on the type scale and in a tone that says what it is, so a view never styles
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
+       heading. */
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="grow"] {
+      flex: 1;
+    }
+
+    :scope:where([data-component~="ui-text"]) {
+      margin: 0;
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      text-align: start;
+    }
+
+    /* A heading drops the browser's heading size and weight, so size and weight set it as they set
+       any text, and inherit keeps the text around it. */
+    :scope:where([data-component~="ui-text"]):is(h2, h3, h4, h5, h6) {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=xs"] {
+      font-size: var(--ui-font-size-xs);
+      line-height: var(--ui-line-height);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=sm"] {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=md"] {
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=lg"] {
+      font-size: var(--ui-font-size-lg);
+      line-height: var(--ui-line-height-relaxed);
+    }
+
+    /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="trim"] {
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+    }
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=secondary"] {
+      color: var(--ui-text-secondary);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=muted"] {
+      color: var(--ui-text-muted);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=accent"] {
+      color: var(--ui-accent-active);
+    }
+    /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+       in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=danger"] {
+      color: var(--ui-danger-subtle-text);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=success"] {
+      color: var(--ui-success-subtle-text);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=info"] {
+      color: var(--ui-info-subtle-text);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=warning"] {
+      color: var(--ui-warning-subtle-text);
+    }
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="weight=normal"] {
+      font-weight: var(--ui-font-normal);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="weight=medium"] {
+      font-weight: var(--ui-font-medium);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="weight=semibold"] {
+      font-weight: var(--ui-font-semibold);
+    }
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=eyebrow"] {
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=code"] {
+      font-family: var(--ui-font-family-mono);
+    }
+
+    /* A link in running text is underlined, so it stands apart from the words around it by more than
+       colour. */
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="truncate"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="trim"][data-ui-text-state~="truncate"] {
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="align=center"] {
+      text-align: center;
+    }
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="font=sans"] {
+      font-family: var(--ui-font-family-sans, sans-serif);
+    }
+
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="wrap=anywhere"] {
+      overflow-wrap: anywhere;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-text"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-text"]) to ([data-component]) {
+/* Running text, set on the type scale and in a tone that says what it is, so a view never styles
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
+       heading. */
+
+    /* A heading drops the browser's heading size and weight, so size and weight set it as they set
+       any text, and inherit keeps the text around it. */
+
+    /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
+    /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+       in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
+
+    /* A link in running text is underlined, so it stands apart from the words around it by more than
+       colour. */
+    :scope:where([data-component~="ui-text"]) :where([data-slotted], [data-slotted] *):is(a) {
+      color: var(--ui-accent-active);
+      text-decoration: underline;
+      text-decoration-thickness: 0.06em;
+      text-underline-offset: 0.18em;
+    }
+
+    /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-tooltip"] { --html-next-scope-owner: "ui-tooltip" !important; }
+}
+@scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-tooltip-arrow-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-inverse-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-inverse-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-max-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-offset {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tooltip-text {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-tooltip"]) {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-tooltip-border: var(--ui-tooltip-border);
+      --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
+      --_ui-tooltip-radius: var(--ui-tooltip-radius);
+      --_ui-tooltip-surface: var(--ui-tooltip-surface);
+      --_ui-tooltip-text: var(--ui-tooltip-text);
+      --_ui-tooltip-shadow: var(--ui-tooltip-shadow);
+      --_ui-tooltip-inverse-surface: var(--ui-tooltip-inverse-surface);
+      --_ui-tooltip-inverse-text: var(--ui-tooltip-inverse-text);
+      --_ui-tooltip-arrow-size: var(--ui-tooltip-arrow-size);
+
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      display: inline-block;
+      box-sizing: border-box;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      /* The UA popover default (overflow: auto) would clip the arrow. */
+      overflow: visible;
+      opacity: 0;
+      transform: translateY(4px);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
+    .surface {
+      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      position: relative;
+      display: flex;
+      align-items: baseline;
+      gap: var(--ui-space-2);
+      box-sizing: border-box;
+      max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
+      border: var(--ui-border-width) solid var(--_tooltip-line);
+      border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
+      background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      color: var(--_ui-tooltip-text, var(--ui-text-primary));
+      padding: var(--ui-space-2) var(--ui-space-3);
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
+    }
+
+    /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+       it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+    .shortcut {
+      display: inline-flex;
+      align-items: center;
+      padding-inline-start: var(--ui-space-2);
+      border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+      color: color-mix(in oklab, currentColor 72%, transparent);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-normal);
+      white-space: nowrap;
+      vertical-align: baseline;
+    }
+
+    .shortcut:empty {
+      display: none;
+    }
+
+    /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-tooltip-state~="inverse"] .surface {
+      --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+      background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+      color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
+    }
+
+    /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
+     * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
+    .surface:where(:not([data-component], [data-slotted]))::after {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      inset-inline-start: var(--ui-space-3);
+      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+      inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
+      block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
+      box-sizing: border-box;
+      background: inherit;
+      border: 0 solid var(--_tooltip-line);
+      border-inline-end-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
+      border-end-end-radius: var(--ui-border-width);
+      transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="bottom"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+      inset-block-end: auto;
+      border-inline-end-width: 0;
+      border-block-end-width: 0;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
+      border-end-end-radius: 0;
+      border-start-start-radius: var(--ui-border-width);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-align="center"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-align="end"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-inline-start: auto;
+      inset-inline-end: var(--ui-space-3);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"] .surface:where(:not([data-component], [data-slotted]))::after, 
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
+      inset-block-end: auto;
+      border: 0 solid var(--_tooltip-line);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-inline-start: auto;
+      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+      border-inline-end-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+      inset-inline-end: auto;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface:where(:not([data-component], [data-slotted]))::after, 
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"][data-ui-actual-align="start"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-block-start: var(--ui-space-3);
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"][data-ui-actual-align="end"] .surface:where(:not([data-component], [data-slotted]))::after, 
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"][data-ui-actual-align="end"] .surface:where(:not([data-component], [data-slotted]))::after {
+      inset-block-start: auto;
+      inset-block-end: var(--ui-space-3);
+    }
+
+    :scope:where([data-component~="ui-tooltip"]):popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      :scope:where([data-component~="ui-tooltip"]):popover-open {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+    }
+
+    :scope:where([data-component~="ui-tooltip"])[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-tooltip"]) {
+        transition: none;
+      }
+    }
+}
+@scope ([data-component~="ui-tooltip"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
+
+    /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+       it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+
+    /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
+    .shortcut :where([data-slotted], [data-slotted] *):is(kbd) {
+      font: inherit;
+    }
+
+    /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
+     * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
+
+    @starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-checkbox"] { --html-next-scope-owner: "ui-checkbox" !important; }
+}
+@scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-checkbox-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-checkbox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-checkbox-size {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-checkbox"]) {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-checkbox-size: var(--ui-checkbox-size);
+      --_ui-checkbox-invalid-border: var(--ui-checkbox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
+
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--ui-checkbox-gap, var(--ui-space-2));
+      max-inline-size: 100%;
+      color: var(--ui-text-primary);
+      cursor: pointer;
+    }
+
+    /* The label, and under it an optional line saying what the choice means. */
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    .label {
+      min-inline-size: 0;
+      line-height: var(--ui-line-height-md);
+    }
+
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    .description:empty {
+      display: none;
+    }
+
+    input {
+      appearance: none;
+      -webkit-appearance: none;
+      position: relative;
+      flex: 0 0 auto;
+      inline-size: var(--_ui-checkbox-size, 1.125rem);
+      block-size: var(--_ui-checkbox-size, 1.125rem);
+      margin: 0.125em 0 0;
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-radius-sm);
+      background: var(--ui-control-surface, var(--ui-surface-default));
+      box-shadow: var(--ui-control-inset);
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    input:where(:not([data-component], [data-slotted]))::after {
+      content: "";
+      position: absolute;
+      opacity: 0;
+      transition: opacity 120ms var(--ui-motion-ease);
+    }
+
+    input:checked,
+    input:indeterminate {
+      border-color: var(--ui-accent-solid);
+      background: var(--ui-accent-solid);
+      box-shadow: var(--ui-control-inset);
+    }
+
+    /* Centre the tick's box and lift it slightly for the rotated check shape. */
+    input:checked:where(:not([data-component], [data-slotted]))::after {
+      inset: 0;
+      margin: auto;
+      inline-size: 0.28rem;
+      block-size: 0.5rem;
+      /* 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 0.125rem 0.125rem 0;
+      opacity: 1;
+      transform: translateY(-0.09rem) rotate(45deg);
+      animation: ui-checkbox-check 180ms 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% 0.23rem auto;
+      block-size: 0.125rem;
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-text-on-accent);
+      opacity: 1;
+      transform: translateY(-50%);
+    }
+
+    @keyframes ui-checkbox-check {
+      from {
+        opacity: 0;
+        transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
+      }
+      65% {
+        opacity: 1;
+        transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(-0.09rem) rotate(45deg) scale(1);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      input:where(:not([data-component], [data-slotted]))::after {
+        transition: none;
+        animation: none;
+      }
+    }
+
+    input:hover:enabled {
+      border-color: var(--ui-accent-solid);
+    }
+
+    input:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
+    }
+
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="invalid"] input {
+      border-color: var(--_ui-checkbox-invalid-border);
+    }
+
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="disabled"] {
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
+    }
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="disabled"] .description {
+      color: var(--ui-disabled-text);
+    }
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="disabled"] input {
+      border-color: var(--ui-disabled-border);
+      background: var(--ui-disabled-surface);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    /* 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. */
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] {
+      --_font: var(--ui-font-size-sm);
+      --_row: var(--ui-control-size-sm);
+    }
+
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=lg"] {
+      --_font: var(--ui-font-size-md);
+      --_row: var(--ui-control-size-lg);
+    }
+
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"],
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=lg"] {
+      --_line: calc(var(--_font) * var(--ui-line-height-md));
+      font-size: var(--_font);
+      padding-block: calc((var(--_row) - var(--_line)) / 2);
+    }
+
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] input,
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=lg"] input {
+      margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
+    }
+
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] {
+        --_row: var(--ui-control-min-block-size);
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-checkbox"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-checkbox"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* 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. */
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* 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. */
+
+    @media (pointer: coarse) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-disclosure"] { --html-next-scope-owner: "ui-disclosure" !important; }
+}
+@scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-disclosure-trigger-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-disclosure-trigger-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-disclosure-trigger-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* Density resolves into the summary row's own values; the public tokens still override them. */
+    :scope:where([data-component~="ui-disclosure"]) {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
+      --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
+      --_ui-disclosure-trigger-padding-inline: var(--ui-disclosure-trigger-padding-inline);
+
+      --_trigger-min-block-size: var(--ui-control-size);
+      --_trigger-padding-block: var(--ui-space-2);
+      --_trigger-padding-inline: var(--ui-space-3);
+    }
+
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="density=compact"] {
+      --_trigger-min-block-size: var(--ui-control-size-sm);
+      --_trigger-padding-block: var(--ui-space-1);
+      --_trigger-padding-inline: var(--ui-space-2);
+    }
+
+    /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+     * select or combobox. Stacked disclosures share their dividers. */
+    :scope:where([data-component~="ui-disclosure"]) {
+      display: block;
+      inline-size: 100%;
+      overflow: clip;
+      border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
+      color: var(--ui-text-primary);
+    }
+
+    .trigger {
+      display: flex;
+      gap: var(--ui-space-3);
+      align-items: center;
+      inline-size: 100%;
+      min-block-size: var(--_ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+      padding: var(--_ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+        var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-weight: var(--ui-font-semibold);
+      text-align: start;
+      cursor: pointer;
+      border-radius: var(--ui-radius-sm);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: color-mix(in srgb, currentColor 6%, transparent);
+    }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    }
+    .trigger:disabled {
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
+    }
+
+    .summary {
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .leading,
+    .indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+    }
+    .leading:empty {
+      display: none;
+    }
+    .indicator {
+      transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .indicator {
+      transform: rotate(180deg);
+    }
+
+    .chevron {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-inline-end: 2px solid currentColor;
+      border-block-end: 2px solid currentColor;
+      transform: rotate(45deg) translate(-1px, -1px);
+    }
+
+    .panel {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease), content-visibility var(--ui-motion-reveal) allow-discrete;
+    }
+
+    .panel-inner {
+      min-block-size: 0;
+      overflow: hidden;
+      padding-inline: var(--ui-space-3);
+    }
+
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .panel {
+      grid-template-rows: 1fr;
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .panel-inner {
+      padding-block: 0 var(--ui-space-3);
+    }
+
+    /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
+     * normal content-sized layout and its animation remain unchanged when fill is omitted. */
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] {
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
+      min-block-size: calc(var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width));
+      transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
+      border-block-end: 0;
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"] {
+      flex-grow: 1;
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .heading {
+      flex: none;
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .trigger {
+      border-radius: 0;
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .panel {
+      flex: 1;
+      min-block-size: 0;
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .panel-inner {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-block-size: 0;
+      padding: 0;
+    }
+
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"] .trigger {
+      gap: var(--ui-nav-gap);
+      padding-inline: var(--ui-nav-padding-inline);
+      min-block-size: var(--ui-nav-min-block-size);
+      padding-block: var(--ui-nav-padding-block);
+      border-radius: var(--ui-selection-radius);
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-normal);
+      color: var(--ui-text-secondary);
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
+      padding-inline: var(--ui-nav-compact-padding-inline);
+      padding-block: var(--ui-nav-compact-padding-block);
+      min-block-size: var(--ui-nav-compact-min-block-size);
+      font-size: var(--ui-font-size-sm);
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"] .trigger:hover:not(:disabled) {
+      background: var(--ui-nav-hover-surface);
+      color: var(--ui-text-primary);
+    }
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"] :is(.leading, .indicator) {
+      inline-size: var(--ui-nav-icon-size);
+      font-size: var(--ui-nav-icon-size);
+    }
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"],
+      .panel,
+      .indicator {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-disclosure"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-disclosure"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Density resolves into the summary row's own values; the public tokens still override them. */
+
+    /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+     * select or combobox. Stacked disclosures share their dividers. */
+
+    /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
+     * normal content-sized layout and its animation remain unchanged when fill is omitted. */
+    @media (pointer: coarse) {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-input"] { --html-next-scope-owner: "ui-input" !important; }
+}
+@scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
+/* 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. */
+    @property --ui-input-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-border-hover {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-outline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-surface {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-input"]) {
+      box-sizing: border-box;
+      display: inline-block;
+      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;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      appearance: none;
+      padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
+      border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
+        var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
+      border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));
+      background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      color: var(--ui-text-primary);
+      font: inherit;
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* 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"] {
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-sm)));
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-lg)));
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
+    }
+
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-input"]) {
+        min-block-size: var(
+          --ui-input-min-block-size,
+          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-md), var(--ui-control-min-block-size)))
+        );
+      }
+
+      :scope:where([data-component~="ui-input"]),
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"],
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
+        font-size: var(--ui-font-size-md);
+      }
+
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
+        min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
+      }
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+    :scope:where([data-component~="ui-input"])::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+
+    :scope:where([data-component~="ui-input"])::placeholder {
+      color: var(--ui-control-placeholder, var(--ui-text-secondary));
+      opacity: 1;
+    }
+
+    :scope:where([data-component~="ui-input"]):hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
+      border-color: var(--ui-input-border-hover, var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
+    }
+
+    :scope:where([data-component~="ui-input"]):focus-visible {
+      border-color: var(--ui-input-focus-border, var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid))));
+      outline: none;
+      box-shadow: var(--ui-input-focus-shadow, var(--_ui-default-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow)));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :scope:where([data-component~="ui-input"])[aria-invalid="true"],
+    :scope:where([data-component~="ui-input"]):is(:user-invalid, [data-user-invalid]) {
+      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))));
+    }
+
+    :scope:where([data-component~="ui-input"]):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+      box-shadow: var(
+        --ui-input-invalid-focus-shadow,
+        var(
+          --_ui-default-input-invalid-focus-shadow,
+          var(--ui-control-inset),
+          0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+            in srgb,
+            var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+            transparent
+          )
+        )
+      );
+    }
+
+    :scope:where([data-component~="ui-input"]):disabled {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-disabled-text);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    /* Forced colors drop box shadows, so the focus ring becomes an outline. */
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-input"]):focus-visible {
+        outline: var(--ui-input-focus-outline, var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight));
+        outline-offset: var(--ui-border-width);
+      }
+    }
+
+    /* No text-box-trim here: trimming a native input's line box below its line height lets the text
+     * scroll vertically inside the field. Native inputs already center their single line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-input"])[hidden] {
+      display: none;
+    }
+}
+@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. */
+
+    /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+
+    /* Forced colors drop box shadows, so the focus ring becomes an outline. */
+    @media (forced-colors: active) {
+    }
+
+    /* No text-box-trim here: trimming a native input's line box below its line height lets the text
+     * scroll vertically inside the field. Native inputs already center their single line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -11020,7 +14055,7 @@ html[data-ui-input-modality="touch"]
 
     /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
 }
-/* Generated by HTML Next 1.0.0-alpha.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.56. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }