@threadlabs/looma 0.29.9 → 0.29.10

package/vue/components.css

@@ -10971,6 +10971,2584 @@ html[data-ui-input-modality="touch"]
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
 }
 @supports (-moz-appearance: none) {
+[data-component~="ui-button"] { --html-next-scope-owner: "ui-button" !important; }
+}
+@scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-button-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-disabled-filter {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-disabled-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-ghost-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-ghost-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-ghost-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-hover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-link-hover-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-link-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-solid-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-button-white-space {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-button"]) {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      --_hue: var(--ui-accent);
+      --_hue-hover: var(--ui-accent-hover);
+      --_hue-active: var(--ui-accent-active);
+      --_hue-text: var(--ui-accent-active);
+      --_on-hue: var(--ui-on-accent);
+
+      --_tone: var(--_hue);
+      --_tone-hover: var(--_hue-hover);
+      --_tone-active: var(--_hue-active);
+      --_tone-text: var(--_hue-text);
+      --_on-tone: var(--_on-hue);
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      column-gap: var(--ui-space-2);
+      vertical-align: middle;
+      color: var(--_tone-text);
+    }
+
+    :scope:where([data-component~="ui-button"]):dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="align=start"] {
+      justify-content: flex-start;
+      text-align: start;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="stretch"] {
+      display: flex;
+      inline-size: 100%;
+    }
+
+    :scope:where([data-component~="ui-button"]) {
+      appearance: none;
+      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+      border-style: solid;
+      border-width: var(--ui-border-width);
+      border-color: var(--ui-button-border, var(--_tone));
+      border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
+      background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+      color: var(--ui-button-text, var(--_tone-text));
+      font: inherit;
+      font-weight: var(--ui-font-medium);
+      text-decoration: none;
+      /* Unset, a button wraps as its container does. */
+      white-space: var(--ui-button-white-space, inherit);
+      line-height: var(--ui-line-height-tight);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      background-image: none;
+      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease);
+      margin: 0;
+    }
+
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+    :scope:where([data-component~="ui-button"]):is(a) {
+      text-decoration: none;
+    }
+
+    .spinner-wrap {
+      display: inline-flex;
+      flex: none;
+      vertical-align: middle;
+    }
+
+    /* A count is an adornment, not another line of label text. Keep the standard control height
+       with enough inset for a 24px mark; large content can still grow the button naturally. */
+    :scope:where([data-component~="ui-button"]):not([variant="link"]):has(.badge:not(:empty)) {
+      padding-block: var(--ui-space-0-5);
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+    }
+
+    .badge:empty {
+      display: none;
+    }
+
+    @supports (text-box-trim: trim-both) {
+      :scope:where([data-component~="ui-button"]) {
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
+      min-block-size: 1.5rem;
+      padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="shape=pill"] {
+      border-radius: var(--ui-button-radius, var(--ui-radius-round));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
+      min-block-size: var(--ui-control-size-sm);
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=lg"] {
+      min-block-size: var(--ui-control-size-lg);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
+    }
+
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"] {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-content: center;
+      align-items: start;
+      gap: var(--ui-space-3);
+      inline-size: 100%;
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+      text-align: start;
+      white-space: normal;
+      box-shadow: none;
+      background-image: none;
+    }
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+    }
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .card-icon {
+      display: flex;
+      align-items: flex-start;
+    }
+    .card-icon:empty {
+      display: none;
+    }
+    .card-content {
+      min-inline-size: 0;
+    }
+    .card-action {
+      display: flex;
+      align-items: center;
+      align-self: center;
+    }
+
+    /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+       is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+    :scope:where([data-component~="ui-button"]):hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--_tone-hover));
+      background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
+    }
+
+    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+      border-color: var(--ui-button-border, var(--ui-border));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-border-strong));
+    }
+
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
+    :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+      border-color: var(--_tone);
+      background-color: var(--_tone);
+      color: var(--_on-tone);
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--_tone-hover);
+      border-color: var(--_tone-hover);
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--_tone-active);
+      border-color: var(--_tone-active);
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=neutral"] {
+      --_hue: var(--ui-text);
+      --_hue-hover: var(--ui-text);
+      --_hue-active: var(--ui-text);
+      --_hue-text: var(--ui-text);
+      --_on-hue: var(--ui-surface);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=danger"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+      --_hue: var(--ui-danger);
+      --_hue-hover: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-hover);
+      --_hue-text: var(--ui-danger-hover);
+      --_on-hue: var(--ui-on-danger);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=success"] {
+      --_hue: var(--ui-success);
+      --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
+      --_on-hue: var(--ui-surface);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=warning"] {
+      --_hue: var(--ui-warning);
+      --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
+      --_on-hue: var(--ui-surface);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=info"] {
+      --_hue: var(--ui-info);
+      --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
+      --_on-hue: var(--ui-surface);
+    }
+
+    /* A value picker is a field, with Select's quiet edge and resting lift. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"] {
+      --_ui-field-shadow: var(--ui-shadow-sm);
+      border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
+      border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
+      background-color: var(--ui-button-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-text, var(--ui-text-primary));
+      font-weight: var(--ui-font-normal);
+      box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
+      background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+      --_ui-field-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-button-shadow, var(--_ui-field-shadow)),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"] {
+      border-color: transparent;
+      background: transparent;
+      box-shadow: none;
+      color: var(--ui-button-ghost-text, var(--_tone-text));
+    }
+
+    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
+      border-color: transparent;
+    }
+
+    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
+       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
+      border-color: transparent;
+      box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
+    }
+
+    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+    :scope:where([data-component~="ui-button"]):focus-visible {
+      outline: none;
+      box-shadow:
+        var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"]:focus-visible {
+      box-shadow:
+        var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]):focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    /* A loading action stays visually active; only an explicitly disabled action takes the
+       neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
+    :scope:where([data-component~="ui-button"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
+      opacity: var(--ui-button-disabled-opacity, 1);
+      cursor: not-allowed;
+      background-image: none;
+      box-shadow: none;
+    }
+
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="loading"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="pending"]):focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      background-color: var(--ui-disabled-surface);
+      border-color: transparent;
+    }
+
+    /* The size states outrank :host, so sm is named too, or a small button would stay small. */
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-button"]), :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
+    /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
+       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
+       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+       Only these need it: a hit area on every button would reach over its neighbours. */
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"],
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]::after, 
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"]::after {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size));
+      block-size: max(100%, var(--ui-control-min-block-size));
+      transform: translate(-50%, -50%);
+      content: "";
+    }
+
+    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"] {
+      display: inline;
+      min-block-size: 0;
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-sm);
+      background: none;
+      box-shadow: none;
+      font: inherit;
+      color: var(--ui-button-link-text, var(--ui-text-secondary));
+      text-decoration-line: underline;
+      text-decoration-thickness: 1px;
+      text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+      text-underline-offset: 0.2em;
+      transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
+      color: var(--ui-button-link-hover-text, var(--ui-text-primary));
+      text-decoration-color: currentColor;
+      background: none;
+      transform: none;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
+      background: none;
+      transform: none;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      background: none;
+      border-color: transparent;
+    }
+
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:focus-visible {
+      box-shadow: none;
+      /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-button"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-button"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+
+    /* A count is an adornment, not another line of label text. Keep the standard control height
+       with enough inset for a 24px mark; large content can still grow the button naturally. */
+
+    @supports (text-box-trim: trim-both) {
+    }
+
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+
+    /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+       is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+
+    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
+
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
+
+    /* A value picker is a field, with Select's quiet edge and resting lift. */
+
+    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+
+    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
+       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
+
+    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+
+    /* A loading action stays visually active; only an explicitly disabled action takes the
+       neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
+
+    /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
+
+    /* The size states outrank :host, so sm is named too, or a small button would stay small. */
+    @media (pointer: coarse) {
+    }
+
+    /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
+       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
+       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+       Only these need it: a hit area on every button would reach over its neighbours. */
+
+    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.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. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-cluster"] { --html-next-scope-owner: "ui-cluster" !important; }
+}
+@scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-cluster-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-cluster"]) {
+      --_layout-gap: var(--ui-space-3);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-cluster-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="fixed"] {
+      flex: none;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=s"] {
+      padding: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=m"] {
+      padding: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=l"] {
+      padding: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=s"] {
+      padding-inline-end: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=m"] {
+      padding-inline-end: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=l"] {
+      padding-inline-end: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=xl"] {
+      padding-inline-end: calc(var(--ui-space-4) * 4);
+    }
+
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=xs"] {
+      --_layout-gap: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=s"] {
+      --_layout-gap: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=m"] {
+      --_layout-gap: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=l"] {
+      --_layout-gap: var(--ui-space-5);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=xl"] {
+      --_layout-gap: var(--ui-space-6);
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=end"] {
+      align-items: flex-end;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=baseline"] {
+      align-items: baseline;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=stretch"] {
+      align-items: stretch;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=center"] {
+      justify-content: center;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=end"] {
+      justify-content: flex-end;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=between"] {
+      justify-content: space-between;
+    }
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="wrap=nowrap"] {
+      flex-wrap: nowrap;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-cluster"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-cluster"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.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-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.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-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-min-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-form-field"]) {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-form-field-danger: var(--ui-form-field-danger);
+      --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+      --_ui-form-field-label-text: var(--ui-form-field-label-text);
+      --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+      --_ui-form-field-help-text: var(--ui-form-field-help-text);
+      --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
+
+      display: grid;
+      gap: var(--ui-space-2);
+      min-inline-size: var(--ui-form-field-min-inline-size, 0);
+      align-content: start;
+      color: var(--ui-text-primary);
+    }
+
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+    .label,
+    .help,
+    .error {
+      display: contents;
+    }
+
+    .label {
+      color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+      font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
+    }
+
+    /* A label action, such as a small help button, sits after the label text in a box one line
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+    .label:has(> .label-action > *) {
+      display: flex;
+      align-items: start;
+      gap: var(--ui-space-1);
+    }
+
+    .label-action {
+      display: flex;
+      align-items: unsafe center;
+      block-size: 1lh;
+    }
+
+    .label-action:not(:has(> *)) {
+      display: none;
+    }
+
+    .help {
+      color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+      font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
+      line-height: var(--ui-line-height-md);
+    }
+
+    .error {
+      display: none;
+    }
+
+    :scope:where([data-component~="ui-form-field"])[data-ui-form-field-state~="invalid"] .error {
+      display: contents;
+    }
+
+    /* An error reads in the danger colour, the one the invalid control's border takes. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-form-field"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-form-field"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+
+    /* A label action, such as a small help button, sits after the label text in a box one line
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+
+    .help > :where([data-slotted], [data-slotted] *):is(*) {
+      min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+    }
+
+    /* An error reads in the danger colour, the one the invalid control's border takes. */
+    .error,
+    :where([data-slotted], [data-slotted] *):is([role="alert"]) {
+      color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+      font-size: var(--ui-font-size-sm);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.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-icon"] { --html-next-scope-owner: "ui-icon" !important; }
+}
+@scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-icon"]) {
+      /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
+         sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
+      --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
+
+      display: inline-flex;
+      flex: none;
+      inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+      block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+    }
+
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+      stroke-width: var(--_ui-icon-stroke-width, 2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-icon"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-icon"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.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-icon-button"] { --html-next-scope-owner: "ui-icon-button" !important; }
+}
+@scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-button-active-scale {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-disabled-filter {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-disabled-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-outline-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-outline-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-surface {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-icon-button"]) {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
+      --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
+
+      display: inline-flex;
+      color: var(--ui-text-secondary);
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=accent"] {
+      --_icon-button-border: var(--ui-accent-solid);
+      --_icon-button-hover-border: var(--ui-accent-hover);
+      --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+      --_icon-button-outline-surface: color-mix(in srgb, var(--ui-accent-solid) 5%, var(--ui-surface-default));
+      color: var(--_icon-button-text);
+    }
+
+    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=neutral"] {
+      --_icon-button-solid-surface: var(--ui-text-primary);
+      --_icon-button-solid-hover-surface: var(--ui-text-primary);
+      --_icon-button-solid-text: var(--ui-surface-default);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] {
+      position: relative;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]::before {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      z-index: 1;
+      inline-size: var(--ui-affordance-guide-size);
+      block-size: var(--ui-affordance-guide-size);
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+      pointer-events: none;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
+      inline-size: 2px;
+      block-size: 20px;
+      background: var(--ui-border-strong);
+      opacity: 1;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:disabled::before {
+      opacity: 0;
+    }
+
+    /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+       proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] .content {
+      opacity: 1;
+      transform: scale(1);
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease), transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+        border-color: transparent;
+        background-color: transparent;
+        box-shadow: none;
+      }
+
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+        .content {
+        opacity: 0;
+        transform: scale(0.65);
+        transition-duration: var(--ui-motion-fast);
+      }
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+      opacity: 0;
+    }
+
+    :scope:where([data-component~="ui-icon-button"]) {
+      /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+      --_size: 2rem;
+      appearance: none;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
+      padding: 0;
+      margin: 0;
+      border: var(--ui-border-width) solid transparent;
+      border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
+      background-color: var(--ui-icon-button-surface, transparent);
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease),
+        scale var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]::before {
+        opacity: 0;
+      }
+    }
+
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-icon-button"]) {
+        position: relative;
+      }
+
+      :scope:where([data-component~="ui-icon-button"])::after {
+        content: "";
+        position: absolute;
+        inset: 50% auto auto 50%;
+        inline-size: max(100%, var(--ui-control-min-block-size));
+        block-size: max(100%, var(--ui-control-min-block-size));
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-icon-button"]) {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-icon-button"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size));
+      block-size: max(100%, var(--ui-control-min-block-size));
+      transform: translate(-50%, -50%);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=sm"] {
+      --_size: 1.75rem;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=lg"] {
+      --_size: 2.5rem;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
+    }
+
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"] {
+      --_size: var(--ui-control-size-md);
+      block-size: auto;
+      align-self: stretch;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"] {
+      --_size: var(--ui-control-size-sm);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"] {
+      --_size: var(--ui-control-size-lg);
+    }
+
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"] {
+        inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+      }
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="round"] {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"] {
+      border-color: var(--ui-icon-button-border, var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong))));
+      background-color: var(--ui-icon-button-outline-surface, var(--_icon-button-outline-surface, var(--ui-surface-default)));
+      background-image: none;
+      color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
+      box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"] {
+      background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
+      background-image: none;
+      color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
+      box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):hover:enabled:not([aria-disabled="true"]) {
+      /* Derived from the text colour so the ghost hover shows on any background. */
+      background-color: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
+      border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
+      color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
+      color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+      box-shadow: var(--ui-pressed);
+    }
+
+    /* Native toggle state persists after pointer release, including during loading. */
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+      background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 12%, var(--ui-surface-default)));
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):active:enabled:not([aria-disabled="true"]) {
+      scale: var(--ui-icon-button-active-scale, 0.96);
+    }
+
+    :is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) {
+      cursor: progress;
+    }
+
+    .content {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) .content {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] .content {
+        transition: none;
+      }
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:focus-visible {
+      box-shadow:
+        var(--ui-action-shadow, var(--_ui-action-shadow)),
+        var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:focus-visible {
+      box-shadow:
+        var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :scope:where([data-component~="ui-icon-button"]):is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+      box-shadow:
+        var(--ui-pressed),
+        var(--ui-focus-halo);
+    }
+
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-2 * var(--ui-focus-width));
+      }
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+        outline-offset: var(--ui-focus-width);
+      }
+    }
+
+    /* Disabled is a flat neutral control, independent of the active variant's tone. */
+    :scope:where([data-component~="ui-icon-button"]):disabled {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
+      opacity: var(--ui-icon-button-disabled-opacity, 1);
+      cursor: not-allowed;
+      box-shadow: none;
+      background-image: none;
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"]:disabled {
+      border-color: transparent;
+    }
+
+    :scope:where([data-component~="ui-icon-button"]) {
+      --_icon-button-icon-default: var(--ui-icon-size-md);
+      /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+         defaults, which its own --ui-icon-* hooks still override. */
+      --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=sm"] {
+      --_icon-button-icon-default: var(--ui-icon-size-sm);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=lg"] {
+      --_icon-button-icon-default: var(--ui-icon-size-lg);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-icon-button"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-icon-button"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+
+    /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+       proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+
+    @media (hover: hover) and (pointer: fine) {
+    }
+
+    @media (hover: none), (pointer: coarse) {
+    }
+
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+    }
+
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+
+    @media (pointer: coarse) {
+    }
+
+    /* Native toggle state persists after pointer release, including during loading. */
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
+    /* Disabled is a flat neutral control, independent of the active variant's tone. */
+
+    :where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      flex-shrink: 0;
+      stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.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-input"] { --html-next-scope-owner: "ui-input" !important; }
+}
+@scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. An Input
+       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+    @property --ui-input-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-border-hover {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-outline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-surface {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-input"]) {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: var(--ui-input-inline-size, 100%);
+      min-inline-size: 0;
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-md)));
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      appearance: none;
+      padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
+      border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
+        var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
+      border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));
+      background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      color: var(--ui-text-primary);
+      font: inherit;
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+    :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-sm)));
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-lg)));
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
+    }
+
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-input"]) {
+        min-block-size: var(
+          --ui-input-min-block-size,
+          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-md), var(--ui-control-min-block-size)))
+        );
+      }
+
+      :scope:where([data-component~="ui-input"]),
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"],
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
+        font-size: var(--ui-font-size-md);
+      }
+
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
+        min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
+      }
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+    :scope:where([data-component~="ui-input"])::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+
+    :scope:where([data-component~="ui-input"])::placeholder {
+      color: var(--ui-control-placeholder, var(--ui-text-secondary));
+      opacity: 1;
+    }
+
+    :scope:where([data-component~="ui-input"]):hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
+      border-color: var(--ui-input-border-hover, var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
+    }
+
+    :scope:where([data-component~="ui-input"]):focus-visible {
+      border-color: var(--ui-input-focus-border, var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid))));
+      outline: none;
+      box-shadow: var(--ui-input-focus-shadow, var(--_ui-default-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow)));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :scope:where([data-component~="ui-input"])[aria-invalid="true"],
+    :scope:where([data-component~="ui-input"]):is(:user-invalid, [data-user-invalid]) {
+      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))));
+    }
+
+    :scope:where([data-component~="ui-input"]):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+      box-shadow: var(
+        --ui-input-invalid-focus-shadow,
+        var(
+          --_ui-default-input-invalid-focus-shadow,
+          var(--ui-control-inset),
+          0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+            in srgb,
+            var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+            transparent
+          )
+        )
+      );
+    }
+
+    :scope:where([data-component~="ui-input"]):disabled {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-disabled-text);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    /* Forced colors drop box shadows, so the focus ring becomes an outline. */
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-input"]):focus-visible {
+        outline: var(--ui-input-focus-outline, var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight));
+        outline-offset: var(--ui-border-width);
+      }
+    }
+
+    /* No text-box-trim here: trimming a native input's line box below its line height lets the text
+     * scroll vertically inside the field. Native inputs already center their single line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-input"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-input"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. An Input
+       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+
+    /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    @media (pointer: coarse) {
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+
+    /* Forced colors drop box shadows, so the focus ring becomes an outline. */
+    @media (forced-colors: active) {
+    }
+
+    /* No text-box-trim here: trimming a native input's line box below its line height lets the text
+     * scroll vertically inside the field. Native inputs already center their single line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.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-popover"] { --html-next-scope-owner: "ui-popover" !important; }
+}
+@scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-popover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-offset {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-padding {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-popover"]) {
+      --_ui-popover-surface: var(--ui-popover-surface);
+      --_ui-popover-border: var(--ui-popover-border);
+      --_ui-popover-radius: var(--ui-popover-radius);
+      --_ui-popover-shadow: var(--ui-popover-shadow);
+      --_ui-popover-padding: var(--ui-popover-padding);
+      box-sizing: border-box;
+      max-inline-size: min(
+        20rem,
+        calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
+      );
+      max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
+      overflow: visible;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .surface {
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      max-block-size: inherit;
+      overflow: auto;
+      padding: var(--_ui-popover-padding, var(--ui-space-3));
+      background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: var(--ui-border-width) solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
+    }
+
+    :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
+      display: none;
+    }
+
+    :scope:where([data-component~="ui-popover"])[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    :scope:where([data-component~="ui-popover"])[popover]:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      :scope:where([data-component~="ui-popover"])[popover]:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=sm"] {
+      inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=md"] {
+      inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=lg"] {
+      inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+
+    :scope:where([data-component~="ui-popover"])[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-popover"])[popover] {
+        transition: none;
+      }
+    }
+}
+@scope ([data-component~="ui-popover"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    @starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+}
+/* Generated by HTML Next 1.0.0-alpha.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-stack"] { --html-next-scope-owner: "ui-stack" !important; }
+}
+@scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-stack-height {
+      syntax: "*";
+      inherits: false;
+    }
+
+    @property --ui-stack-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-stack"]) {
+      --_layout-gap: var(--ui-space-4);
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--ui-stack-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="fill"] {
+      flex: 1;
+      min-block-size: 0;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="height"] {
+      block-size: calc(var(--ui-stack-height, 0) * 1px);
+      min-block-size: 0;
+    }
+
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=none"] {
+      --_layout-gap: 0px;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=xs"] {
+      --_layout-gap: var(--ui-space-2);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=s"] {
+      --_layout-gap: var(--ui-space-3);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=m"] {
+      --_layout-gap: var(--ui-space-4);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=l"] {
+      --_layout-gap: var(--ui-space-5);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=xl"] {
+      --_layout-gap: var(--ui-space-6);
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=center"] {
+      align-items: center;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=end"] {
+      align-items: flex-end;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=center"] {
+      justify-content: center;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=end"] {
+      justify-content: flex-end;
+    }
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=between"] {
+      justify-content: space-between;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-stack"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-stack"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.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-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.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-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.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-separator"] { --html-next-scope-owner: "ui-separator" !important; }
 }
 @scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {