@threadlabs/looma 0.16.2 → 0.16.3

package/vue/components.css

@@ -679,7 +679,11 @@ to {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-button"][data-v-3f3120c8] {
+@property --ui-button-white-space {
+  syntax: "*";
+  inherits: false;
+}
+[data-component~="ui-button"][data-v-2d967790] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -698,15 +702,15 @@ to {
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-2d967790] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-2d967790] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-v-2d967790] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -718,6 +722,8 @@ to {
   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: var(--ui-raised-highlight);
@@ -730,21 +736,21 @@ to {
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   margin: 0;
 }
-.pending-spinner[data-v-3f3120c8] {
+.pending-spinner[data-v-2d967790] {
   margin-inline-end: var(--ui-space-2);
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-v-2d967790] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-2d967790] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-2d967790] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
@@ -752,29 +758,29 @@ to {
 
 /* 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. */
-[data-component~="ui-button"][data-v-3f3120c8]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-2d967790]: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%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"][data-v-3f3120c8]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-2d967790]: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);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-3f3120c8],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-2d967790],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-2d967790] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-3f3120c8], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-3f3120c8]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-2d967790], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-2d967790]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-3f3120c8], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-3f3120c8]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-2d967790], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-2d967790]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -783,43 +789,43 @@ to {
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-2d967790] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-3f3120c8],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-2d967790],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-2d967790] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-2d967790] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-2d967790] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-2d967790] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-2d967790] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -827,24 +833,24 @@ to {
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-3f3120c8]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-2d967790]: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;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-3f3120c8]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-2d967790]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
   box-shadow: var(--ui-pressed);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-[data-component~="ui-button"][data-v-3f3120c8]:focus-visible {
+[data-component~="ui-button"][data-v-2d967790]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-3f3120c8]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-2d967790]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -855,14 +861,14 @@ to {
    fill, border, and text together (--ui-disabled-filter), and the theme decides which way is
    toward the page. The highlight and shadow go, because nothing that cannot be pressed should
    look raised. */
-[data-component~="ui-button"][data-v-3f3120c8]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-2d967790]:is(:disabled, [aria-disabled="true"]) {
   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;
 }
-[data-component~="ui-button"][data-ui-button-state~="pending"][data-v-3f3120c8]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="pending"][data-v-2d967790]:focus-visible {
   box-shadow: var(--ui-focus-halo);
 }
 
@@ -870,14 +876,14 @@ to {
    it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
    the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
    hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-3f3120c8]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-2d967790]:is(:disabled, [aria-disabled="true"]) {
   background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
 
 /* The size states outrank :host, so sm is named too, or a small button would stay small. */
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-3f3120c8], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-v-2d967790], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-2d967790] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -887,11 +893,11 @@ to {
    a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
    area. Only the link needs it: a hit area on every button would reach over its neighbours. */
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-3f3120c8] {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-2d967790] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-3f3120c8]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-2d967790]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -902,7 +908,7 @@ html[data-ui-input-modality="touch"]
 
 /* 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. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-3f3120c8] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-2d967790] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -920,21 +926,21 @@ html[data-ui-input-modality="touch"]
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-3f3120c8]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-2d967790]: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;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-3f3120c8]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-2d967790]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-3f3120c8]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-2d967790]:is(:disabled, [aria-disabled="true"]) {
   background: none;
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-3f3120c8]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-2d967790]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: 2px solid var(--ui-focus-ring);
@@ -942,7 +948,7 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-3f3120c8] {
+[data-component~="ui-button"][hidden][data-v-2d967790] {
   display: none;
 }
 
@@ -3900,73 +3906,97 @@ svg[data-v-70304a1a-s] {
   syntax: "*";
   inherits: false;
 }
+@property --ui-form-field-help-font-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-form-field-help-min-block-size {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-form-field"][data-v-453329c8] {
+@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;
+}
+[data-component~="ui-form-field"][data-v-60c91d56] {
   /* 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: 0;
+  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[data-v-453329c8],
-.help[data-v-453329c8],
-.error[data-v-453329c8] {
+.label[data-v-60c91d56],
+.help[data-v-60c91d56],
+.error[data-v-60c91d56] {
   display: contents;
 }
-.label[data-v-453329c8] {
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
+.label[data-v-60c91d56] {
+  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[data-v-453329c8]:has(> .label-action > *) {
+.label[data-v-60c91d56]:has(> .label-action > *) {
   display: flex;
   align-items: start;
   gap: var(--ui-space-1);
 }
-.label-action[data-v-453329c8] {
+.label-action[data-v-60c91d56] {
   display: flex;
   align-items: unsafe center;
   block-size: 1lh;
 }
-.label-action[data-v-453329c8]:not(:has(> *)) {
+.label-action[data-v-60c91d56]:not(:has(> *)) {
   display: none;
 }
-.help[data-v-453329c8] {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
+.help[data-v-60c91d56] {
+  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);
 }
-.help > [data-v-453329c8-s] {
+.help > [data-v-60c91d56-s] {
   min-block-size: var(--_ui-form-field-help-min-block-size, 0);
 }
-.error[data-v-453329c8] {
+.error[data-v-60c91d56] {
   display: none;
 }
-[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error[data-v-453329c8] {
+[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error[data-v-60c91d56] {
   display: contents;
 }
 
 /* An error reads in the danger colour, the one the invalid control's border takes. */
-.error[data-v-453329c8],[role="alert"][data-v-453329c8-s] {
+.error[data-v-60c91d56],[role="alert"][data-v-60c91d56-s] {
   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. */
-[data-component~="ui-form-field"][hidden][data-v-453329c8] {
+[data-component~="ui-form-field"][hidden][data-v-60c91d56] {
   display: none;
 }
 
@@ -4322,6 +4352,10 @@ svg[data-v-c62d95c3-s] {
   syntax: "*";
   inherits: false;
 }
+@property --ui-input-inline-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-input-invalid-border {
   syntax: "*";
   inherits: false;
@@ -4346,10 +4380,10 @@ svg[data-v-c62d95c3-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-input"][data-v-35d265bd] {
+[data-component~="ui-input"][data-v-aa3c35f4] {
   box-sizing: border-box;
   display: inline-block;
-  inline-size: 100%;
+  inline-size: var(--ui-input-inline-size, 100%);
   min-inline-size: 0;
   min-block-size: var(
     --ui-input-min-block-size,
@@ -4382,7 +4416,7 @@ svg[data-v-c62d95c3-s] {
 }
 
 /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
-[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-35d265bd] {
+[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-aa3c35f4] {
   min-block-size: var(
     --ui-input-min-block-size,
     var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
@@ -4390,7 +4424,7 @@ svg[data-v-c62d95c3-s] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-35d265bd] {
+[data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-aa3c35f4] {
   min-block-size: var(
     --ui-input-min-block-size,
     var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
@@ -4402,7 +4436,7 @@ svg[data-v-c62d95c3-s] {
 /* 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) {
-[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-35d265bd] {
+[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-aa3c35f4] {
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
@@ -4412,21 +4446,21 @@ svg[data-v-c62d95c3-s] {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-input"][data-v-35d265bd]::selection {
+[data-component~="ui-input"][data-v-aa3c35f4]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-input"][data-v-35d265bd]::placeholder {
+[data-component~="ui-input"][data-v-aa3c35f4]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-input"][data-v-35d265bd]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-input"][data-v-aa3c35f4]:hover:not(:focus):not(:disabled) {
   border-color: var(
     --ui-input-border-hover,
     var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)))
   );
 }
-[data-component~="ui-input"][data-v-35d265bd]:focus-visible {
+[data-component~="ui-input"][data-v-aa3c35f4]:focus-visible {
   border-color: var(
     --ui-input-focus-border,
     var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
@@ -4443,14 +4477,14 @@ svg[data-v-c62d95c3-s] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-input"][aria-invalid="true"][data-v-35d265bd],
-[data-component~="ui-input"][data-v-35d265bd]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-input"][aria-invalid="true"][data-v-aa3c35f4],
+[data-component~="ui-input"][data-v-aa3c35f4]: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)))
   );
 }
-[data-component~="ui-input"][data-v-35d265bd]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-input"][data-v-aa3c35f4]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-input-invalid-focus-shadow,
     var(
@@ -4464,7 +4498,7 @@ svg[data-v-c62d95c3-s] {
     )
   );
 }
-[data-component~="ui-input"][data-v-35d265bd]:disabled {
+[data-component~="ui-input"][data-v-aa3c35f4]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
@@ -4473,7 +4507,7 @@ svg[data-v-c62d95c3-s] {
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input"][data-v-35d265bd]:focus-visible {
+[data-component~="ui-input"][data-v-aa3c35f4]:focus-visible {
     outline: var(
       --ui-input-focus-outline,
       var(--_ui-default-input-focus-outline, 2px solid Highlight)
@@ -4486,7 +4520,7 @@ svg[data-v-c62d95c3-s] {
  * 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. */
-[data-component~="ui-input"][hidden][data-v-35d265bd] {
+[data-component~="ui-input"][hidden][data-v-aa3c35f4] {
   display: none;
 }
 
@@ -5266,12 +5300,16 @@ svg[data-v-c62d95c3-s] {
   syntax: "*";
   inherits: false;
 }
+@property --ui-nav-item-inline-size {
+  syntax: "*";
+  inherits: false;
+}
 
 /* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
    default slot), and an optional line under it (description), such as the record a section
    belongs to. Label and description are one line each and end in an ellipsis, so every item in a
    navigation has the same height and the rail never grows sideways. */
-[data-component~="ui-nav-item"][data-v-369595b1] {
+[data-component~="ui-nav-item"][data-v-7f1c22fc] {
   --_indicator-width: var(--ui-nav-item-indicator-width, 3px);
   --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
   position: relative;
@@ -5279,7 +5317,7 @@ svg[data-v-c62d95c3-s] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
-  inline-size: 100%;
+  inline-size: var(--ui-nav-item-inline-size, 100%);
   min-inline-size: 0;
   min-block-size: var(--ui-control-size, 2.5rem);
   margin: 0;
@@ -5299,18 +5337,18 @@ svg[data-v-c62d95c3-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-nav-item"][data-v-369595b1]:hover:not([aria-current]) {
+[data-component~="ui-nav-item"][data-v-7f1c22fc]:hover:not([aria-current]) {
   background: var(--ui-surface-hover);
   color: var(--ui-text-primary);
 }
 
 /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
    box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
-[data-component~="ui-nav-item"][data-v-369595b1]:focus-visible {
+[data-component~="ui-nav-item"][data-v-7f1c22fc]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: -2px;
 }
-[data-component~="ui-nav-item"][aria-current][data-v-369595b1] {
+[data-component~="ui-nav-item"][aria-current][data-v-7f1c22fc] {
   background: var(--ui-nav-item-current-surface, var(--ui-accent-soft));
   color: var(--ui-accent-subtle-text, var(--ui-text-primary));
   font-weight: var(--ui-font-semibold);
@@ -5319,7 +5357,7 @@ svg[data-v-c62d95c3-s] {
 /* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
    border, so the current item stays marked in high contrast. Logical edges mirror it in a
    right-to-left page. */
-.indicator[data-v-369595b1] {
+.indicator[data-v-7f1c22fc] {
   position: absolute;
   inset-block: var(--ui-space-2);
   inset-inline-start: 0;
@@ -5327,41 +5365,41 @@ svg[data-v-c62d95c3-s] {
   border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
   border-radius: var(--ui-radius-round);
 }
-[data-component~="ui-nav-item"][aria-current] .indicator[data-v-369595b1] {
+[data-component~="ui-nav-item"][aria-current] .indicator[data-v-7f1c22fc] {
   display: block;
 }
 @media (forced-colors: active) {
-.indicator[data-v-369595b1] {
+.indicator[data-v-7f1c22fc] {
     border-inline-start-color: Highlight;
 }
 }
-.leading[data-v-369595b1] {
+.leading[data-v-7f1c22fc] {
   display: inline-flex;
   flex: none;
   align-items: center;
   color: inherit;
   font-size: var(--ui-font-size-lg);
 }
-.content[data-v-369595b1] {
+.content[data-v-7f1c22fc] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.label[data-v-369595b1],
-.description[data-v-369595b1] {
+.label[data-v-7f1c22fc],
+.description[data-v-7f1c22fc] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.label[data-v-369595b1] {
+.label[data-v-7f1c22fc] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-369595b1] {
+.description[data-v-7f1c22fc] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-normal);
@@ -5369,13 +5407,13 @@ svg[data-v-c62d95c3-s] {
 }
 
 /* An unused region takes no space. */
-.leading[data-v-369595b1]:empty,
-.description[data-v-369595b1]:empty {
+.leading[data-v-7f1c22fc]:empty,
+.description[data-v-7f1c22fc]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-nav-item"][hidden][data-v-369595b1] {
+[data-component~="ui-nav-item"][hidden][data-v-7f1c22fc] {
   display: none;
 }
 
@@ -6201,10 +6239,26 @@ dialog[data-v-20a7b8e3] {
 }
 
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-select-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-border-hover {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-focus-border {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-select-focus-shadow {
   syntax: "*";
   inherits: false;
 }
+@property --ui-select-inline-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-select-invalid-border {
   syntax: "*";
   inherits: false;
@@ -6221,17 +6275,21 @@ dialog[data-v-20a7b8e3] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-select"][data-v-981584d4] {
+@property --ui-select-surface {
+  syntax: "*";
+  inherits: false;
+}
+[data-component~="ui-select"][data-v-3f68a24f] {
   box-sizing: border-box;
   display: inline-block;
-  inline-size: 100%;
+  inline-size: var(--ui-select-inline-size, 100%);
   min-inline-size: 0;
   min-block-size: var(--ui-control-size-md);
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: 1px solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
   border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+  background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
   color: var(--ui-text-primary);
   color-scheme: light dark;
   font: inherit;
@@ -6245,7 +6303,7 @@ dialog[data-v-20a7b8e3] {
 
 /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
  * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-[data-component~="ui-select"][data-v-981584d4] {
+[data-component~="ui-select"][data-v-3f68a24f] {
   appearance: none;
   padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
   background-image: var(
@@ -6256,11 +6314,14 @@ dialog[data-v-20a7b8e3] {
   background-position: right var(--ui-space-3) center;
   background-size: 1.125rem 1.125rem;
 }
-[data-component~="ui-select"][data-v-981584d4]:hover:not(:focus):not(:disabled) {
-  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+[data-component~="ui-select"][data-v-3f68a24f]:hover:not(:focus):not(:disabled) {
+  border-color: var(
+    --ui-select-border-hover,
+    var(--ui-control-border-hover, var(--ui-text-secondary))
+  );
 }
-[data-component~="ui-select"][data-v-981584d4]:focus-visible {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+[data-component~="ui-select"][data-v-3f68a24f]:focus-visible {
+  border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
     --ui-select-focus-shadow,
@@ -6270,11 +6331,11 @@ dialog[data-v-20a7b8e3] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-select"][aria-invalid="true"][data-v-981584d4],
-[data-component~="ui-select"][data-v-981584d4]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-select"][aria-invalid="true"][data-v-3f68a24f],
+[data-component~="ui-select"][data-v-3f68a24f]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 }
-[data-component~="ui-select"][data-v-981584d4]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-select"][data-v-3f68a24f]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-select-invalid-focus-shadow,
     var(--ui-control-inset),
@@ -6285,13 +6346,13 @@ dialog[data-v-20a7b8e3] {
     )
   );
 }
-[data-component~="ui-select"][data-v-981584d4]:disabled {
+[data-component~="ui-select"][data-v-3f68a24f]:disabled {
   background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
-[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-981584d4] {
+[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-3f68a24f] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
@@ -6299,7 +6360,7 @@ dialog[data-v-20a7b8e3] {
   background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-select"][data-ui-select-state~="size=lg"][data-v-981584d4] {
+[data-component~="ui-select"][data-ui-select-state~="size=lg"][data-v-3f68a24f] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
@@ -6310,14 +6371,14 @@ dialog[data-v-20a7b8e3] {
 /* 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) {
-[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-981584d4] {
+[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-3f68a24f] {
     min-block-size: var(--ui-control-min-block-size);
     font-size: inherit;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-select"][hidden][data-v-981584d4] {
+[data-component~="ui-select"][hidden][data-v-3f68a24f] {
   display: none;
 }
 
@@ -7090,90 +7151,98 @@ tbody tr[data-v-9980d203-s]:last-child > * {
 }
 
 /* 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, or label. */
-[data-component~="ui-text"][data-v-f6cb02e5] {
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
+       heading. */
+[data-component~="ui-text"][data-v-80b3e712] {
   margin: 0;
   min-inline-size: 0;
   color: var(--ui-text-primary);
   text-align: start;
 }
-[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-f6cb02e5] {
+
+/* 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. */
+[data-component~="ui-text"][data-v-80b3e712]:is(h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-80b3e712] {
   font-size: var(--ui-font-size-xs);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-80b3e712] {
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-80b3e712] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-80b3e712] {
   font-size: var(--ui-font-size-lg);
   line-height: var(--ui-line-height-relaxed);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-80b3e712] {
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-80b3e712] {
   color: var(--ui-text-muted);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-80b3e712] {
   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. */
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-80b3e712] {
   color: var(--ui-danger-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-80b3e712] {
   color: var(--ui-success-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-80b3e712] {
   color: var(--ui-info-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-80b3e712] {
   color: var(--ui-warning-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-80b3e712] {
   font-weight: var(--ui-font-normal);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-80b3e712] {
   font-weight: var(--ui-font-medium);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-80b3e712] {
   font-weight: var(--ui-font-semibold);
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-80b3e712] {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-80b3e712] {
   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. */
-[data-component~="ui-text"] a[data-v-f6cb02e5-s] {
+[data-component~="ui-text"] a[data-v-80b3e712-s] {
   color: var(--ui-accent-active);
   text-decoration: underline;
   text-decoration-thickness: 0.06em;
   text-underline-offset: 0.18em;
 }
-[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-80b3e712] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-f6cb02e5] {
+[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-80b3e712] {
   text-align: center;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden][data-v-f6cb02e5] {
+[data-component~="ui-text"][hidden][data-v-80b3e712] {
   display: none;
 }