@threadlabs/looma 0.11.3 → 0.11.5

package/vue/components.css

@@ -368,7 +368,7 @@ ol[data-v-0d86d58e] {
   display: none;
 }
 
-[data-component~="ui-button"][data-v-0c121308] {
+[data-component~="ui-button"][data-v-6c8750a9] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -387,15 +387,15 @@ ol[data-v-0d86d58e] {
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-6c8750a9] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-6c8750a9] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-0c121308] {
+[data-component~="ui-button"][data-v-6c8750a9] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -420,17 +420,17 @@ ol[data-v-0d86d58e] {
   margin: 0;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-0c121308] {
+[data-component~="ui-button"][data-v-6c8750a9] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-6c8750a9] {
   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-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-6c8750a9] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
@@ -438,29 +438,29 @@ ol[data-v-0d86d58e] {
 
 /* 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-0c121308]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-6c8750a9]: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-0c121308]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-6c8750a9]: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-0c121308],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-6c8750a9],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-6c8750a9] {
   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-0c121308], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-0c121308]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-6c8750a9], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-6c8750a9]):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-0c121308], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-0c121308]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-6c8750a9], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-6c8750a9]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -469,43 +469,43 @@ ol[data-v-0d86d58e] {
 
 /* 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-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-6c8750a9] {
   --_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-0c121308],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-6c8750a9],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-6c8750a9] {
   --_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-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-6c8750a9] {
   --_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-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-6c8750a9] {
   --_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-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-6c8750a9] {
   --_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-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-6c8750a9] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -513,24 +513,24 @@ ol[data-v-0d86d58e] {
 }
 
 /* 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-0c121308]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-6c8750a9]: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-0c121308]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-6c8750a9]: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-0c121308]:focus-visible {
+[data-component~="ui-button"][data-v-6c8750a9]: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-0c121308]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-6c8750a9]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -540,7 +540,7 @@ ol[data-v-0d86d58e] {
    disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
    unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
    highlight and shadow, because nothing that cannot be pressed should look raised. */
-[data-component~="ui-button"][data-v-0c121308]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-6c8750a9]:is(:disabled, [aria-disabled="true"]) {
   /* Derived from the tone itself, not from a separate disabled palette: faded toward the
      page, which desaturates it at the same time. Toward the page rather than toward white,
      so a dark theme dims where a light one lightens — the same rule, both schemes. */
@@ -557,7 +557,7 @@ ol[data-v-0d86d58e] {
 }
 
 /* A filled button keeps its fill, faded further so its text stays legible on it. */
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-0c121308], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-0c121308]):is(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-6c8750a9], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-6c8750a9]):is(:disabled, [aria-disabled="true"]) {
   --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
 
@@ -565,19 +565,34 @@ ol[data-v-0d86d58e] {
    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-0c121308]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-6c8750a9]:is(:disabled, [aria-disabled="true"]) {
   background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-0c121308] {
+[data-component~="ui-button"][data-v-6c8750a9] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
+/* Under touch, every button's press lands within the control minimum: an invisible hit area,
+   centred on it, like IconButton's. A standalone link-style button (a "See all" beside a
+   heading) is a target of its own, not text, so it gets one too. */
+html[data-ui-input-modality="touch"] [data-component~="ui-button"][data-v-6c8750a9] {
+  position: relative;
+}
+html[data-ui-input-modality="touch"] [data-component~="ui-button"][data-v-6c8750a9]::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. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-0c121308] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-6c8750a9] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -595,22 +610,22 @@ ol[data-v-0d86d58e] {
     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-0c121308]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-6c8750a9]: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-0c121308]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-6c8750a9]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-0c121308]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-6c8750a9]:is(:disabled, [aria-disabled="true"]) {
   background: none;
   border-color: transparent;
   color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-0c121308]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-6c8750a9]: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);
@@ -618,11 +633,11 @@ ol[data-v-0d86d58e] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-0c121308] {
+[data-component~="ui-button"][hidden][data-v-6c8750a9] {
   display: none;
 }
 
-[data-component~="ui-callout"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-info-soft);
   --_callout-border: var(--ui-info-solid);
   --_callout-icon: var(--ui-info-solid);
@@ -648,43 +663,51 @@ ol[data-v-0d86d58e] {
 }
 
 /* One line box tall, so the icon centres on the first line of text. */
-.icon[data-v-2fd6ab30] {
+.icon[data-v-36fb7e55] {
   display: grid;
   place-items: center;
   inline-size: var(--ui-callout-icon-column, 1.125rem);
   block-size: 1lh;
   color: var(--ui-callout-icon, var(--_callout-icon));
 }
-.icon svg[data-v-2fd6ab30] {
+.icon svg[data-v-36fb7e55] {
   inline-size: var(--ui-callout-icon-size, 1.125rem);
   block-size: var(--ui-callout-icon-size, 1.125rem);
 }
-.content[data-v-2fd6ab30] {
+.content[data-v-36fb7e55] {
   min-inline-size: 0;
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-surface-muted);
   --_callout-border: var(--ui-border-strong);
   --_callout-icon: var(--ui-text-secondary);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-warning-soft);
   --_callout-border: var(--ui-warning-solid);
   --_callout-icon: var(--ui-warning-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-success-soft);
   --_callout-border: var(--ui-success-solid);
   --_callout-icon: var(--ui-success-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-danger-soft);
   --_callout-border: var(--ui-danger-solid);
   --_callout-icon: var(--ui-danger-solid);
 }
 
+/* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+.content a[data-v-36fb7e55-s] {
+  color: var(--ui-accent-active);
+  text-decoration: underline;
+  text-decoration-thickness: 0.06em;
+  text-underline-offset: 0.18em;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-callout"][hidden][data-v-2fd6ab30] {
+[data-component~="ui-callout"][hidden][data-v-36fb7e55] {
   display: none;
 }
 
@@ -2869,7 +2892,7 @@ svg[data-v-dc9b5621-s] {
   display: none;
 }
 
-[data-component~="ui-form-field"][data-v-eba1e76b] {
+[data-component~="ui-form-field"][data-v-4df6c2a6] {
   display: grid;
   gap: var(--ui-space-2);
   min-inline-size: 0;
@@ -2879,30 +2902,32 @@ svg[data-v-dc9b5621-s] {
 
 /* 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-eba1e76b],
-.help[data-v-eba1e76b],
-.error[data-v-eba1e76b] {
+.label[data-v-4df6c2a6],
+.help[data-v-4df6c2a6],
+.error[data-v-4df6c2a6] {
   display: contents;
 }
-.label[data-v-eba1e76b] {
+.label[data-v-4df6c2a6] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
 }
-.help[data-v-eba1e76b] {
+.help[data-v-4df6c2a6] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.help > [data-v-eba1e76b-s] {
+.help > [data-v-4df6c2a6-s] {
   min-block-size: var(--ui-form-field-help-min-block-size, 0);
 }
-.error[data-v-eba1e76b],[role="alert"][data-v-eba1e76b-s] {
-  color: var(--ui-accent-active);
+
+/* An error reads in the danger colour, the one the invalid control's border takes. */
+.error[data-v-4df6c2a6],[role="alert"][data-v-4df6c2a6-s] {
+  color: 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-eba1e76b] {
+[data-component~="ui-form-field"][hidden][data-v-4df6c2a6] {
   display: none;
 }
 
@@ -3123,7 +3148,7 @@ svg[data-v-bcedd63e-s] {
   display: none;
 }
 
-[data-component~="ui-input"][data-v-12ffae5a] {
+[data-component~="ui-input"][data-v-c19f8322] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -3146,21 +3171,21 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-input"][data-v-12ffae5a]::selection {
+[data-component~="ui-input"][data-v-c19f8322]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-input"][data-v-12ffae5a]::placeholder {
+[data-component~="ui-input"][data-v-c19f8322]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-input"][data-v-12ffae5a]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-input"][data-v-c19f8322]:hover:not(:focus):not(:disabled) {
   border-color: var(
     --ui-input-border-hover,
     var(--ui-control-border-hover, var(--ui-text-secondary))
   );
 }
-[data-component~="ui-input"][data-v-12ffae5a]:focus-visible {
+[data-component~="ui-input"][data-v-c19f8322]:focus-visible {
   border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
@@ -3171,16 +3196,18 @@ svg[data-v-bcedd63e-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-12ffae5a],
-[data-component~="ui-input"][data-v-12ffae5a]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-danger-solid);
+[data-component~="ui-input"][aria-invalid="true"][data-v-c19f8322],
+[data-component~="ui-input"][data-v-c19f8322]:is(:user-invalid, [data-user-invalid]) {
+  border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
 }
-[data-component~="ui-input"][data-v-12ffae5a]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow:
+[data-component~="ui-input"][data-v-c19f8322]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+  box-shadow: var(
+    --ui-input-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+  );
 }
-[data-component~="ui-input"][data-v-12ffae5a]:disabled {
+[data-component~="ui-input"][data-v-c19f8322]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-text-muted);
   box-shadow: none;
@@ -3191,7 +3218,7 @@ svg[data-v-bcedd63e-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-12ffae5a] {
+[data-component~="ui-input"][hidden][data-v-c19f8322] {
   display: none;
 }
 
@@ -3201,10 +3228,12 @@ svg[data-v-bcedd63e-s] {
        its custom properties, so it is still the one ui-input, with its form behaviour intact. The
        affixes are plain text beside the input, so name the input with a label that says what the
        whole value is. */
-[data-component~="ui-input-group"][data-v-0a135fc1] {
+[data-component~="ui-input-group"][data-v-42ff173c] {
   --ui-input-border: transparent;
   --ui-input-border-hover: transparent;
   --ui-input-focus-border: transparent;
+  --ui-input-invalid-border: transparent;
+  --ui-input-invalid-focus-shadow: none;
   --ui-input-shadow: none;
   --ui-input-focus-shadow: none;
   --ui-input-radius: 0;
@@ -3225,28 +3254,28 @@ svg[data-v-bcedd63e-s] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-input-group"][data-v-0a135fc1]:hover:not(:focus-within) {
+[data-component~="ui-input-group"][data-v-42ff173c]:hover:not(:focus-within) {
   border-color: var(--ui-text-secondary);
 }
-[data-component~="ui-input-group"][data-v-0a135fc1]:focus-within {
+[data-component~="ui-input-group"][data-v-42ff173c]:focus-within {
   border-color: var(--ui-accent-solid);
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-[data-component~="ui-input-group"][data-v-0a135fc1]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+[data-component~="ui-input-group"][data-v-42ff173c]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-0a135fc1] {
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-42ff173c] {
   background: var(--ui-surface-muted);
   box-shadow: none;
 }
-.field[data-v-0a135fc1] {
+.field[data-v-42ff173c] {
   display: flex;
   flex: 1;
   min-inline-size: 0;
 }
-.affix[data-v-0a135fc1] {
+.affix[data-v-42ff173c] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -3256,12 +3285,12 @@ svg[data-v-bcedd63e-s] {
   font-size: var(--ui-font-size-sm);
   white-space: nowrap;
 }
-.affix[data-v-0a135fc1]:empty {
+.affix[data-v-42ff173c]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input-group"][hidden][data-v-0a135fc1] {
+[data-component~="ui-input-group"][hidden][data-v-42ff173c] {
   display: none;
 }
 
@@ -4788,72 +4817,81 @@ input[data-v-26ab3add], input[data-v-26ab3add]::after {
 
 /* 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-70a75450] {
+[data-component~="ui-text"][data-v-b83a3ab9] {
   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-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-b83a3ab9] {
   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-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-b83a3ab9] {
   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-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-b83a3ab9] {
   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-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-b83a3ab9] {
   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-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-b83a3ab9] {
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-b83a3ab9] {
   color: var(--ui-text-muted);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-b83a3ab9] {
   color: var(--ui-accent-active);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-b83a3ab9] {
   color: var(--ui-danger);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-b83a3ab9] {
   color: var(--ui-success);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-b83a3ab9] {
   font-weight: var(--ui-font-normal);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-b83a3ab9] {
   font-weight: var(--ui-font-medium);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-b83a3ab9] {
   font-weight: var(--ui-font-semibold);
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-b83a3ab9] {
   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-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-b83a3ab9] {
   font-family: var(--ui-font-family-mono);
 }
-[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-70a75450] {
+
+/* 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-b83a3ab9-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-b83a3ab9] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-b83a3ab9] {
   text-align: center;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden][data-v-70a75450] {
+[data-component~="ui-text"][hidden][data-v-b83a3ab9] {
   display: none;
 }