@threadlabs/looma 0.29.10 → 0.29.12

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-39d314ea {
 100% {
     transform: rotate(1turn);
 }
 }
-@keyframes ui-spinner-dash-7acb6679 {
+@keyframes ui-spinner-dash-39d314ea {
 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-39d314ea 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-39d314ea 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-6e1c7414 {
 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-6e1c7414 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-c6e7c0af {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-539eaebb {
+@keyframes ui-dialog-backdrop-enter-c6e7c0af {
 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-c6e7c0af 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-c6e7c0af 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-4af986cc {
 from {
     opacity: 0;
     transform: translateY(-1rem);
@@ -9442,7 +9442,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-f573d590 {
+@keyframes ui-toast-exit-4af986cc {
 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-4af986cc {
 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-4af986cc {
 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-4af986cc 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-4af986cc 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-4af986cc;
 }
 :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-4af986cc;
 }
 @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-94992850 {
 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-94992850 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,7 @@ 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.57. 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; }
@@ -11514,228 +11514,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.55. 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.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
@@ -11836,259 +11615,35 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
+[data-component~="ui-form-field"] { --html-next-scope-owner: "ui-form-field" !important; }
 }
-@scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
+@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-disclosure-trigger-min-block-size {
+    @property --ui-form-field-danger {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-disclosure-trigger-padding-block {
+    @property --ui-form-field-help-font-size {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-disclosure-trigger-padding-inline {
+    @property --ui-form-field-help-min-block-size {
       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);
+    @property --ui-form-field-help-text {
+      syntax: "*";
+      inherits: false;
     }
-
-    :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.55. 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-font-size {
+      syntax: "*";
+      inherits: false;
     }
     @property --ui-form-field-label-text {
       syntax: "*";
@@ -12191,7 +11746,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
@@ -12237,7 +11792,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
@@ -12713,297 +12268,223 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
+[data-component~="ui-list"] { --html-next-scope-owner: "ui-list" !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 {
+@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-input-border-hover {
+    @property --ui-list-min-item-width {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-input-border-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;
     }
-    @property --ui-input-focus-border {
-      syntax: "*";
-      inherits: false;
+
+    :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);
     }
-    @property --ui-input-focus-outline {
-      syntax: "*";
-      inherits: false;
+
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"] {
+      list-style: decimal;
     }
-    @property --ui-input-focus-shadow {
-      syntax: "*";
-      inherits: false;
+
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="markers=disc"] {
+      list-style: disc;
     }
-    @property --ui-input-inline-size {
-      syntax: "*";
-      inherits: false;
+
+    /* 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;
     }
-    @property --ui-input-invalid-border {
-      syntax: "*";
-      inherits: false;
+
+    :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));
     }
-    @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;
+
+    /* 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. */
 
-    :scope:where([data-component~="ui-input"]) {
+    /* 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;
-      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))));
+      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);
-      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) {
+      list-style: inherit;
     }
 
-    /* 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) {
+    :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;
     }
 
-    /* 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. */
+    /* 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.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
+[data-component~="ui-menu"] { --html-next-scope-owner: "ui-menu" !important; }
 }
-@scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
+@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-popover-surface {
-      syntax: "*";
-      inherits: false;
-    }
-    @property --ui-popover-border {
-      syntax: "*";
-      inherits: false;
-    }
-    @property --ui-popover-radius {
+    @property --ui-menu-surface {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-popover-shadow {
+    @property --ui-menu-border {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-popover-viewport-gap {
+    @property --ui-menu-radius {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-popover-offset {
+    @property --ui-menu-shadow {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-popover-padding {
+    @property --ui-menu-viewport-gap {
       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);
+    /* 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;
-      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;
+      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;
-      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"]) {
+    .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-popover"])[popover] {
+    :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:
@@ -13013,368 +12494,319 @@ html[data-ui-input-modality="touch"]
         overlay var(--ui-motion-fast) allow-discrete;
     }
 
-    :scope:where([data-component~="ui-popover"])[popover]:popover-open {
+    :scope:where([data-component~="ui-menu"])[popover]:popover-open {
       opacity: 1;
       transform: translateY(0) scale(1);
     }
 
     @starting-style {
-      :scope:where([data-component~="ui-popover"])[popover]:popover-open {
+      :scope:where([data-component~="ui-menu"])[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] {
+    :scope:where([data-component~="ui-menu"])[hidden] {
       display: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope:where([data-component~="ui-popover"])[popover] {
+      :scope:where([data-component~="ui-menu"])[popover] {
         transition: none;
       }
     }
 }
-@scope ([data-component~="ui-popover"]) to ([data-component]) {
+@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.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
+[data-component~="ui-menu-item"] { --html-next-scope-owner: "ui-menu-item" !important; }
 }
-@scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
+@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-stack-height {
+    @property --ui-menu-item-font-size {
       syntax: "*";
       inherits: false;
     }
-
-    @property --ui-stack-gap {
+    @property --ui-menu-item-hover-surface {
       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;
+    @property --ui-menu-item-min-block-size {
+      syntax: "*";
+      inherits: false;
     }
-    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="height"] {
-      block-size: calc(var(--ui-stack-height, 0) * 1px);
-      min-block-size: 0;
+    @property --ui-menu-item-padding-block {
+      syntax: "*";
+      inherits: false;
     }
-
-    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=none"] {
-      --_layout-gap: 0px;
+    @property --ui-menu-item-padding-inline {
+      syntax: "*";
+      inherits: false;
     }
-    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=xs"] {
-      --_layout-gap: var(--ui-space-2);
+    @property --ui-menu-item-radius {
+      syntax: "*";
+      inherits: false;
     }
-    :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"] {
+
+    :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);
     }
-    :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"] {
+
+    /* 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;
-    }
-    :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;
+      flex: none;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
     }
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope:where([data-component~="ui-stack"])[hidden] {
-      display: none;
+    .icon:not(:empty) {
+      display: inline-flex;
     }
-}
-@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.55. 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-menu-item"])[data-ui-menu-item-state~="tone=danger"] {
+      color: var(--ui-danger);
     }
 
-    :scope:where([data-component~="ui-text"]) {
-      margin: 0;
+    .label {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      flex: 1;
       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;
+    .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-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);
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=action"] .indicator {
+      display: none;
     }
 
-    /* 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-menu-item"])[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
+      border-color: var(--ui-accent);
+      background: var(--ui-accent);
     }
 
-    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=secondary"] {
+    /* 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);
     }
-    :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"] {
+    .shortcut {
+      margin-inline-start: auto;
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
       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;
+    .shortcut:empty {
+      display: none;
     }
-    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=code"] {
-      font-family: var(--ui-font-family-mono);
+
+    /* 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;
+      }
     }
 
-    /* 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-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-text"])[data-ui-text-state~="truncate"] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    :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));
     }
 
-    /* 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-menu-item"])[aria-disabled="true"] {
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
     }
 
-    :scope:where([data-component~="ui-text"])[data-ui-text-state~="align=center"] {
-      text-align: center;
+    :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-text"])[data-ui-text-state~="font=sans"] {
-      font-family: var(--ui-font-family-sans, sans-serif);
+    :scope:where([data-component~="ui-menu-item"])[aria-disabled="true"] .indicator:where(:not([data-component], [data-slotted]))::after {
+      background: var(--ui-disabled-text);
     }
 
-    :scope:where([data-component~="ui-text"])[data-ui-text-state~="wrap=anywhere"] {
-      overflow-wrap: anywhere;
+    @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-text"])[hidden] {
+    :scope:where([data-component~="ui-menu-item"])[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. */
+@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 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. */
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
 
-    /* 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. */
+    .icon :where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
 
-    /* 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;
+    /* 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;
     }
 
-    /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+    /* 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.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
+[data-component~="ui-popover"] { --html-next-scope-owner: "ui-popover" !important; }
 }
-@scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
+@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-tooltip-arrow-size {
-      syntax: "*";
-      inherits: false;
-    }
-    @property --ui-tooltip-border {
-      syntax: "*";
-      inherits: false;
-    }
-    @property --ui-tooltip-inverse-surface {
+    @property --ui-popover-surface {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-tooltip-inverse-text {
+    @property --ui-popover-border {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-tooltip-max-inline-size {
+    @property --ui-popover-radius {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-tooltip-offset {
+    @property --ui-popover-shadow {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-tooltip-radius {
+    @property --ui-popover-viewport-gap {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-tooltip-shadow {
+    @property --ui-popover-offset {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-tooltip-surface {
+    @property --ui-popover-padding {
       syntax: "*";
       inherits: false;
     }
-    @property --ui-tooltip-text {
-      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;
     }
 
-    :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);
+    .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;
-      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);
+      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),
@@ -13382,168 +12814,1193 @@ html[data-ui-input-modality="touch"]
         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;
+    :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.57. 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;
-      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))));
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--ui-stack-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
     }
 
-    /* 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;
+    :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;
-      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;
+    }
+    :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;
     }
 
-    .shortcut:empty {
+    /* 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.57. 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.57. 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.57. 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.57. 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.57. 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);
+    }
 
-    /* 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));
+    /* 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);
     }
 
-    /* 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-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);
     }
 
-    :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);
-    }
+    /* 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-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-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)));
+      }
     }
 
-    :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);
+    /* 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-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-input"])::placeholder {
+      color: var(--ui-control-placeholder, var(--ui-text-secondary));
+      opacity: 1;
     }
 
-    :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-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-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-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)));
     }
 
-    :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);
+    /* 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-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-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-tooltip"]):popover-open {
-      opacity: 1;
-      transform: translateY(0);
+    :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;
     }
 
-    @starting-style {
-      :scope:where([data-component~="ui-tooltip"]):popover-open {
-        opacity: 0;
-        transform: translateY(4px);
+    /* 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);
       }
     }
 
-    :scope:where([data-component~="ui-tooltip"])[hidden] {
-      display: none;
-    }
+    /* 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. */
 
-    @media (prefers-reduced-motion: reduce) {
-      :scope:where([data-component~="ui-tooltip"]) {
-        transition: none;
-      }
+    /* 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-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. */
+@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. */
 
-    /* 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. */
+    /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
 
-    /* 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;
+    /* 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) {
     }
 
-    /* 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. */
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
 
-    @starting-style {
-    }
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
-    @media (prefers-reduced-motion: reduce) {
+    /* 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.55. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.57. 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; }
@@ -13598,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.57. 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; }
@@ -13778,4 +14235,164 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
+/* Generated by HTML Next 1.0.0-alpha.57. 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-image"] { --html-next-scope-owner: "ui-image" !important; }
+}
+@scope ([data-component~="ui-image"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-image"]) {
+      display: flex;
+      justify-content: flex-start;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      margin: 0;
+      padding: var(--ui-space-3) 0;
+    }
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=center"] {
+      justify-content: center;
+    }
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"] {
+      float: left;
+      padding-inline-end: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"] {
+      float: right;
+      padding-inline-start: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) {
+      inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+    }
+    :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .frame {
+      inline-size: 100%;
+    }
+    .frame {
+      position: relative;
+      flex: 0 1 auto;
+      inline-size: var(--_ui-image-width, fit-content);
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      align-self: flex-start;
+      border-radius: var(--ui-radius-md);
+    }
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="selected"] .frame {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-border-width);
+    }
+    .handle {
+      position: absolute;
+      z-index: 1;
+      inline-size: 24px;
+      block-size: 24px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      touch-action: none;
+    }
+    .handle:where(:not([data-component], [data-slotted]))::after {
+      content: "";
+      position: absolute;
+      inset: 8px;
+      background: var(--ui-surface);
+      border: var(--ui-border-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle[data-corner="top-left"] {
+      top: -12px;
+      left: -12px;
+      cursor: nwse-resize;
+    }
+    .handle[data-corner="top-right"] {
+      top: -12px;
+      right: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-left"] {
+      bottom: -12px;
+      left: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-right"] {
+      bottom: -12px;
+      right: -12px;
+      cursor: nwse-resize;
+    }
+    .handles[hidden], :scope:where([data-component~="ui-image"])[hidden] {
+      display: none;
+    }
+    @media (max-width: 767px) {
+      :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) {
+        float: none;
+        inline-size: 100%;
+        padding-inline: 0;
+      }
+      :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .handles {
+        display: none;
+      }
+    }
+    @media (pointer: coarse) {
+      .handle {
+        inline-size: 44px;
+        block-size: 44px;
+      }
+      .handle:where(:not([data-component], [data-slotted]))::after {
+        inset: 18px;
+      }
+      .handle[data-corner="top-left"] {
+        top: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="top-right"] {
+        top: -22px;
+        right: -22px;
+      }
+      .handle[data-corner="bottom-left"] {
+        bottom: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="bottom-right"] {
+        bottom: -22px;
+        right: -22px;
+      }
+    }
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-image"])[data-ui-image-state~="selected"] .frame, .handle:focus-visible {
+        outline-color: Highlight;
+      }
+      .handle:where(:not([data-component], [data-slotted]))::after {
+        border-color: Highlight;
+        background: Canvas;
+      }
+    }
+}
+@scope ([data-component~="ui-image"]) to ([data-component]) {
+:scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .frame img,
+    :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .frame :where([data-slotted], [data-slotted] *):is(img) {
+      inline-size: 100%;
+    }
+    .frame img, .frame :where([data-slotted], [data-slotted] *):is(img) {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+      margin: 0;
+      border-radius: inherit;
+    }
+    :scope:where([data-component~="ui-image"])[data-resizing] .frame img, :scope:where([data-component~="ui-image"])[data-resizing] .frame :where([data-slotted], [data-slotted] *):is(img) {
+      inline-size: 100%;
+    }
+    @media (max-width: 767px) {
+    }
+    @media (pointer: coarse) {
+    }
+    @media (forced-colors: active) {
+    }
+}
 /*$vite$:1*/