@threadlabs/looma 0.11.6 → 0.12.0

package/vue/components.css

@@ -368,7 +368,7 @@ ol[data-v-0d86d58e] {
   display: none;
 }
 
-[data-component~="ui-button"][data-v-97872575] {
+[data-component~="ui-button"][data-v-75541d8a] {
   --_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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-75541d8a] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-75541d8a] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-97872575] {
+[data-component~="ui-button"][data-v-75541d8a] {
   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-97872575] {
+[data-component~="ui-button"][data-v-75541d8a] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-75541d8a] {
   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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-75541d8a] {
   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-97872575]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-75541d8a]: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-97872575]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-75541d8a]: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-97872575],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-75541d8a],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-75541d8a] {
   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-97872575], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-97872575]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-75541d8a], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-75541d8a]):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-97872575], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-97872575]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-75541d8a], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-75541d8a]):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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-75541d8a] {
   --_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-97872575],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-75541d8a],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-75541d8a] {
   --_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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-75541d8a] {
   --_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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-75541d8a] {
   --_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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-75541d8a] {
   --_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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-75541d8a] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -513,64 +513,52 @@ 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-97872575]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-75541d8a]: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-97872575]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-75541d8a]: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-97872575]:focus-visible {
+[data-component~="ui-button"][data-v-75541d8a]: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-97872575]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-75541d8a]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
-/* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
-   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-97872575]: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. */
-  --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
-  --_tone-hover: var(--_tone);
-  --_tone-active: var(--_tone);
-  --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
-  --_on-tone: var(--_tone-text);
-
+/* Disabled keeps the shape and washes out the rest: every variant keeps its own structure, so a
+   disabled outline is still an outline and a disabled ghost still has no edge. One filter fades
+   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-75541d8a]: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;
 }
 
-/* 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-97872575], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-97872575]):is(:disabled, [aria-disabled="true"]) {
-  --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
-}
-
 /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
    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-97872575]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-75541d8a]: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-97872575] {
+[data-component~="ui-button"][data-v-75541d8a] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -580,11 +568,11 @@ ol[data-v-0d86d58e] {
    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-97872575] {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-75541d8a] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-97872575]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-75541d8a]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -595,7 +583,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-97872575] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-75541d8a] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -613,22 +601,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-97872575]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-75541d8a]: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-97872575]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-75541d8a]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-97872575]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-75541d8a]: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-97872575]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-75541d8a]: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);
@@ -636,7 +623,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-97872575] {
+[data-component~="ui-button"][hidden][data-v-75541d8a] {
   display: none;
 }
 
@@ -752,7 +739,7 @@ html[data-ui-input-modality="touch"]
   display: none;
 }
 
-[data-component~="ui-checkbox"][data-v-9c9d1eaa] {
+[data-component~="ui-checkbox"][data-v-4d65c3b0] {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-checkbox-gap, var(--ui-space-2));
@@ -760,11 +747,27 @@ html[data-ui-input-modality="touch"]
   color: var(--ui-text-primary);
   cursor: pointer;
 }
-.label[data-v-9c9d1eaa] {
+
+/* The label, and under it an optional line saying what the choice means. */
+.text[data-v-4d65c3b0] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+.label[data-v-4d65c3b0] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-input[data-v-9c9d1eaa] {
+.description[data-v-4d65c3b0] {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+.description[data-v-4d65c3b0]:empty {
+  display: none;
+}
+input[data-v-4d65c3b0] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -782,20 +785,20 @@ input[data-v-9c9d1eaa] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-9c9d1eaa]::after {
+input[data-v-4d65c3b0]::after {
   content: "";
   position: absolute;
   opacity: 0;
 }
-input[data-v-9c9d1eaa]:checked,
-input[data-v-9c9d1eaa]:indeterminate {
+input[data-v-4d65c3b0]:checked,
+input[data-v-4d65c3b0]:indeterminate {
   border-color: var(--ui-accent-solid);
   background: var(--ui-accent-solid);
   box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
 }
 
 /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
-input[data-v-9c9d1eaa]:checked::after {
+input[data-v-4d65c3b0]:checked::after {
   inset: 0;
   margin: auto;
   inline-size: 0.32rem;
@@ -808,7 +811,7 @@ input[data-v-9c9d1eaa]:checked::after {
   opacity: 1;
   transform: translateY(-0.11rem) rotate(45deg);
 }
-input[data-v-9c9d1eaa]:indeterminate::after {
+input[data-v-4d65c3b0]:indeterminate::after {
   inset: 50% 0.23rem auto;
   block-size: 0.125rem;
   border-radius: var(--ui-radius-round);
@@ -816,25 +819,25 @@ input[data-v-9c9d1eaa]:indeterminate::after {
   opacity: 1;
   transform: translateY(-50%);
 }
-input[data-v-9c9d1eaa]:hover:enabled {
+input[data-v-4d65c3b0]:hover:enabled {
   border-color: var(--ui-accent-solid);
 }
-input[data-v-9c9d1eaa]:focus-visible {
+input[data-v-4d65c3b0]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-9c9d1eaa] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-4d65c3b0] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-9c9d1eaa] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-4d65c3b0] {
   border-color: var(--ui-border-default);
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-checkbox"][hidden][data-v-9c9d1eaa] {
+[data-component~="ui-checkbox"][hidden][data-v-4d65c3b0] {
   display: none;
 }
 
@@ -2972,14 +2975,14 @@ svg[data-v-dc9b5621-s] {
   display: none;
 }
 
-[data-component~="ui-icon-button"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-v-c322b7ed] {
   display: inline-flex;
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-c322b7ed] {
   position: relative;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-bcedd63e]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-c322b7ed]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -2998,17 +3001,17 @@ svg[data-v-dc9b5621-s] {
  * surface and icon. The root is the native button, so hiding it outright would hide the dot
  * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
 @media (hover: hover) and (pointer: fine) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-bcedd63e]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-c322b7ed]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     color: transparent;
 }
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-bcedd63e]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-c322b7ed]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
   opacity: 0;
 }
-[data-component~="ui-icon-button"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-v-c322b7ed] {
   /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
   --_size: 2rem;
   appearance: none;
@@ -3034,7 +3037,7 @@ svg[data-v-dc9b5621-s] {
     transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 @media (hover: none), (pointer: coarse) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-bcedd63e]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-c322b7ed]::before {
     opacity: 0;
 }
 }
@@ -3042,10 +3045,10 @@ svg[data-v-dc9b5621-s] {
 /* 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) {
-[data-component~="ui-icon-button"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-v-c322b7ed] {
     position: relative;
 }
-[data-component~="ui-icon-button"][data-v-bcedd63e]::after {
+[data-component~="ui-icon-button"][data-v-c322b7ed]::after {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -3054,10 +3057,10 @@ svg[data-v-dc9b5621-s] {
     transform: translate(-50%, -50%);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-bcedd63e] {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-c322b7ed] {
   position: relative;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-bcedd63e]::after {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-c322b7ed]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -3065,29 +3068,29 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-b
   block-size: max(100%, var(--ui-control-min-block-size));
   transform: translate(-50%, -50%);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-c322b7ed] {
   --_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));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-c322b7ed] {
   --_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));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-c322b7ed] {
   border-radius: var(--ui-radius-round);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-c322b7ed] {
   border-color: var(--ui-icon-button-border, var(--ui-border-default));
   background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
   color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-c322b7ed] {
   background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
   color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
   box-shadow: var(
@@ -3095,51 +3098,43 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-b
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
   );
 }
-[data-component~="ui-icon-button"][data-v-bcedd63e]:hover:enabled {
+[data-component~="ui-icon-button"][data-v-c322b7ed]:hover:enabled {
   /* Derived from the text colour so the ghost hover shows on any background. */
   background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
   color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-bcedd63e]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-c322b7ed]:hover:enabled {
   border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-bcedd63e]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-c322b7ed]:hover:enabled {
   background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
-[data-component~="ui-icon-button"][data-v-bcedd63e]:active:enabled {
+[data-component~="ui-icon-button"][data-v-c322b7ed]:active:enabled {
   transform: scale(var(--ui-icon-button-active-scale, 0.96));
 }
-[data-component~="ui-icon-button"][data-v-bcedd63e]:focus-visible {
+[data-component~="ui-icon-button"][data-v-c322b7ed]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
-[data-component~="ui-icon-button"][data-v-bcedd63e]:disabled {
+/* Disabled washes the button out the way Button does: the same shape, one filter. */
+[data-component~="ui-icon-button"][data-v-c322b7ed]:disabled {
+  filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-icon-button-disabled-opacity, 1);
-  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
   cursor: not-allowed;
+  box-shadow: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-bcedd63e]:disabled {
-  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
-}
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-bcedd63e]:disabled {
-  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
-}
-[data-component~="ui-icon-button"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-v-c322b7ed] {
   --_icon-button-icon-default: var(--ui-icon-size-md);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-c322b7ed] {
   --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-c322b7ed] {
   --_icon-button-icon-default: var(--ui-icon-size-lg);
 }
-svg[data-v-bcedd63e-s] {
+svg[data-v-c322b7ed-s] {
   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;
@@ -3147,7 +3142,7 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden][data-v-bcedd63e] {
+[data-component~="ui-icon-button"][hidden][data-v-c322b7ed] {
   display: none;
 }
 
@@ -3699,7 +3694,7 @@ svg[data-v-bcedd63e-s] {
 }
 }
 
-[data-component~="ui-radio"][data-v-e31949a7] {
+[data-component~="ui-radio"][data-v-f9c61d50] {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-radio-gap, var(--ui-space-2));
@@ -3707,11 +3702,27 @@ svg[data-v-bcedd63e-s] {
   color: var(--ui-text-primary);
   cursor: pointer;
 }
-.label[data-v-e31949a7] {
+
+/* The label, and under it an optional line saying what the choice means. */
+.text[data-v-f9c61d50] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+.label[data-v-f9c61d50] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-input[data-v-e31949a7] {
+.description[data-v-f9c61d50] {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+.description[data-v-f9c61d50]:empty {
+  display: none;
+}
+input[data-v-f9c61d50] {
   flex: 0 0 auto;
   inline-size: var(--ui-radio-size, 1.125rem);
   block-size: var(--ui-radio-size, 1.125rem);
@@ -3719,20 +3730,20 @@ input[data-v-e31949a7] {
   accent-color: var(--ui-accent-solid);
   cursor: pointer;
 }
-input[data-v-e31949a7]:focus-visible {
+input[data-v-f9c61d50]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-radio"][data-ui-radio-state~="disabled"][data-v-e31949a7] {
+[data-component~="ui-radio"][data-ui-radio-state~="disabled"][data-v-f9c61d50] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-e31949a7] {
+[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-f9c61d50] {
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-radio"][hidden][data-v-e31949a7] {
+[data-component~="ui-radio"][hidden][data-v-f9c61d50] {
   display: none;
 }
 
@@ -4569,7 +4580,7 @@ to {
   display: none;
 }
 
-[data-component~="ui-switch"][data-v-26ab3add] {
+[data-component~="ui-switch"][data-v-85cb3260] {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-switch-gap, var(--ui-space-2));
@@ -4577,11 +4588,27 @@ to {
   color: var(--ui-text-primary);
   cursor: pointer;
 }
-.label[data-v-26ab3add] {
+
+/* The label, and under it an optional line saying what the choice means. */
+.text[data-v-85cb3260] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+.label[data-v-85cb3260] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-input[data-v-26ab3add] {
+.description[data-v-85cb3260] {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+.description[data-v-85cb3260]:empty {
+  display: none;
+}
+input[data-v-85cb3260] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -4599,7 +4626,7 @@ input[data-v-26ab3add] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
   margin: 0;
 }
-input[data-v-26ab3add]::after {
+input[data-v-85cb3260]::after {
   content: "";
   position: absolute;
   top: 3px;
@@ -4611,35 +4638,35 @@ input[data-v-26ab3add]::after {
   box-shadow: var(--ui-shadow-xs);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-26ab3add]:checked {
+input[data-v-85cb3260]:checked {
   background: var(--ui-accent-solid);
   border-color: var(--ui-accent-solid);
 }
-input[data-v-26ab3add]:checked::after {
+input[data-v-85cb3260]:checked::after {
   transform: translateX(1rem);
   background: var(--ui-text-on-accent);
 }
-input[data-v-26ab3add]:focus-visible {
+input[data-v-85cb3260]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-switch"][data-ui-switch-state~="disabled"][data-v-26ab3add] {
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"][data-v-85cb3260] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-26ab3add] {
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-85cb3260] {
   border-color: var(--ui-border-default);
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   cursor: not-allowed;
 }
 @media (prefers-reduced-motion: reduce) {
-input[data-v-26ab3add], input[data-v-26ab3add]::after {
+input[data-v-85cb3260], input[data-v-85cb3260]::after {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-switch"][hidden][data-v-26ab3add] {
+[data-component~="ui-switch"][hidden][data-v-85cb3260] {
   display: none;
 }