@threadlabs/looma 0.12.5 → 0.12.7

package/vue/components.css

@@ -68,7 +68,7 @@
   display: none;
 }
 
-[data-component~="ui-avatar"][data-v-ebb1bbbb] {
+[data-component~="ui-avatar"][data-v-a5e0e48e] {
   display: inline-grid;
   place-items: center;
   overflow: hidden;
@@ -83,13 +83,25 @@
   font-weight: 600;
   text-transform: uppercase;
 }
-.image[data-v-ebb1bbbb],img[data-v-ebb1bbbb-s] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-a5e0e48e] {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  font-size: var(--ui-font-size-xs);
+}
+
+/* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
+   outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
+[data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-a5e0e48e] {
+  outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+  outline-offset: 1px;
+}
+.image[data-v-a5e0e48e],img[data-v-a5e0e48e-s] {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
-.fallback[data-v-ebb1bbbb] {
+.fallback[data-v-a5e0e48e] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -102,7 +114,7 @@
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
  * Trimming applies to block containers, so the box is a block with centred content. */
 @supports (text-box-trim: trim-both) {
-.fallback[data-v-ebb1bbbb] {
+.fallback[data-v-a5e0e48e] {
     display: block;
     text-align: center;
     align-content: center;
@@ -110,12 +122,12 @@
     text-box-edge: cap alphabetic;
 }
 }
-[hidden][data-v-ebb1bbbb] {
+[hidden][data-v-a5e0e48e] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden][data-v-ebb1bbbb] {
+[data-component~="ui-avatar"][hidden][data-v-a5e0e48e] {
   display: none;
 }
 
@@ -740,7 +752,7 @@ html[data-ui-input-modality="touch"]
   display: none;
 }
 
-[data-component~="ui-checkbox"][data-v-4d65c3b0] {
+[data-component~="ui-checkbox"][data-v-cc7306ec] {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-checkbox-gap, var(--ui-space-2));
@@ -750,25 +762,25 @@ html[data-ui-input-modality="touch"]
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-4d65c3b0] {
+.text[data-v-cc7306ec] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-4d65c3b0] {
+.label[data-v-cc7306ec] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-4d65c3b0] {
+.description[data-v-cc7306ec] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-4d65c3b0]:empty {
+.description[data-v-cc7306ec]:empty {
   display: none;
 }
-input[data-v-4d65c3b0] {
+input[data-v-cc7306ec] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -786,20 +798,20 @@ input[data-v-4d65c3b0] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-4d65c3b0]::after {
+input[data-v-cc7306ec]::after {
   content: "";
   position: absolute;
   opacity: 0;
 }
-input[data-v-4d65c3b0]:checked,
-input[data-v-4d65c3b0]:indeterminate {
+input[data-v-cc7306ec]:checked,
+input[data-v-cc7306ec]: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-4d65c3b0]:checked::after {
+input[data-v-cc7306ec]:checked::after {
   inset: 0;
   margin: auto;
   inline-size: 0.32rem;
@@ -812,7 +824,7 @@ input[data-v-4d65c3b0]:checked::after {
   opacity: 1;
   transform: translateY(-0.11rem) rotate(45deg);
 }
-input[data-v-4d65c3b0]:indeterminate::after {
+input[data-v-cc7306ec]:indeterminate::after {
   inset: 50% 0.23rem auto;
   block-size: 0.125rem;
   border-radius: var(--ui-radius-round);
@@ -820,25 +832,25 @@ input[data-v-4d65c3b0]:indeterminate::after {
   opacity: 1;
   transform: translateY(-50%);
 }
-input[data-v-4d65c3b0]:hover:enabled {
+input[data-v-cc7306ec]:hover:enabled {
   border-color: var(--ui-accent-solid);
 }
-input[data-v-4d65c3b0]:focus-visible {
+input[data-v-cc7306ec]: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-4d65c3b0] {
-  color: var(--ui-text-muted);
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-cc7306ec] {
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-4d65c3b0] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-cc7306ec] {
   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-4d65c3b0] {
+[data-component~="ui-checkbox"][hidden][data-v-cc7306ec] {
   display: none;
 }
 
@@ -977,27 +989,27 @@ input[data-v-4d65c3b0]:focus-visible {
 }
 }
 
-[data-component~="ui-combobox"][data-v-0bd7ecc4] {
+[data-component~="ui-combobox"][data-v-b3cdd263] {
   display: grid;
   gap: var(--ui-space-1);
   min-inline-size: 0;
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-0bd7ecc4] {
+label[data-v-b3cdd263] {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-0bd7ecc4] {
+.control[data-v-b3cdd263] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-0bd7ecc4] {
+.field[data-v-b3cdd263] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -1009,14 +1021,14 @@ label[data-v-0bd7ecc4] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-0bd7ecc4]:focus-within {
+.field[data-v-b3cdd263]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-0bd7ecc4] {
+.help[data-v-b3cdd263] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1033,28 +1045,28 @@ label[data-v-0bd7ecc4] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-0bd7ecc4]:hover:enabled,
-.help[aria-expanded="true"][data-v-0bd7ecc4] {
+.help[data-v-b3cdd263]:hover:enabled,
+.help[aria-expanded="true"][data-v-b3cdd263] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-0bd7ecc4]:focus-visible {
+.help[data-v-b3cdd263]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-0bd7ecc4]:disabled {
+.help[data-v-b3cdd263]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-0bd7ecc4] {
+.help-icon[data-v-b3cdd263] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-0bd7ecc4]::selection {
+input[data-v-b3cdd263]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-0bd7ecc4] {
+input[data-v-b3cdd263] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -1070,11 +1082,11 @@ input[data-v-0bd7ecc4] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-0bd7ecc4] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-b3cdd263] {
   min-block-size: calc(var(--ui-control-size-sm) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
 }
-button[data-v-0bd7ecc4] {
+button[data-v-b3cdd263] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -1089,31 +1101,31 @@ button[data-v-0bd7ecc4] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-0bd7ecc4] {
+.affordance-icon[data-v-b3cdd263] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-0bd7ecc4]:hover:enabled {
+button[data-v-b3cdd263]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-0bd7ecc4]:focus-visible {
+button[data-v-b3cdd263]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-0bd7ecc4]:disabled, button[data-v-0bd7ecc4]:disabled {
-  color: var(--ui-text-muted);
+input[data-v-b3cdd263]:disabled, button[data-v-b3cdd263]:disabled {
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-0bd7ecc4]:has(input:disabled) {
+.field[data-v-b3cdd263]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-0bd7ecc4] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-b3cdd263] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-0bd7ecc4] {
+.popup[data-v-b3cdd263] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -1127,40 +1139,40 @@ input[data-v-0bd7ecc4]:disabled, button[data-v-0bd7ecc4]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-0bd7ecc4] {
+[hidden][data-v-b3cdd263] {
   display: none;
 }
-.option[data-v-0bd7ecc4] {
+.option[data-v-b3cdd263] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-0bd7ecc4]:hover, .option.active[data-v-0bd7ecc4] {
+.option[data-v-b3cdd263]:hover, .option.active[data-v-b3cdd263] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-0bd7ecc4] {
-  color: var(--ui-text-muted);
+.option[aria-disabled="true"][data-v-b3cdd263] {
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.primary[data-v-0bd7ecc4] {
+.primary[data-v-b3cdd263] {
   display: block;
   color: var(--ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-0bd7ecc4], .group[data-v-0bd7ecc4] {
+.message[data-v-b3cdd263], .group[data-v-b3cdd263] {
   color: var(--ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-0bd7ecc4], .popup .message[data-v-0bd7ecc4] {
+.group[data-v-b3cdd263], .popup .message[data-v-b3cdd263] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-0bd7ecc4] {
+.sr-only[data-v-b3cdd263] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -1169,16 +1181,16 @@ input[data-v-0bd7ecc4]:disabled, button[data-v-0bd7ecc4]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-0bd7ecc4] {
+button[data-v-b3cdd263] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-0bd7ecc4], .popup[data-v-0bd7ecc4] {
+.field[data-v-b3cdd263], .popup[data-v-b3cdd263] {
     border-color: CanvasText;
 }
-.option.active[data-v-0bd7ecc4] {
+.option.active[data-v-b3cdd263] {
     outline-color: Highlight;
 }
 }
@@ -1186,12 +1198,12 @@ button[data-v-0bd7ecc4] {
 /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
    before anything is picked. aria-selected is the state; this draws it.
    Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-0bd7ecc4] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-b3cdd263] {
   display: flex;
   gap: var(--ui-space-2);
   align-items: center;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-0bd7ecc4]::before {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-b3cdd263]::before {
   content: "";
   flex: none;
   inline-size: 1.125rem;
@@ -1206,7 +1218,7 @@ button[data-v-0bd7ecc4] {
   background-size: 0.7rem;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"][data-v-0bd7ecc4]::before {
+  .option[aria-selected="true"][data-v-b3cdd263]::before {
   border-color: var(--ui-accent-solid);
   background-color: var(--ui-accent-solid);
   background-image: var(
@@ -1216,20 +1228,20 @@ button[data-v-0bd7ecc4] {
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-0bd7ecc4] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-b3cdd263] {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
   min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-0bd7ecc4] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-b3cdd263] {
   flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
 }
-.item[data-v-0bd7ecc4] {
+.item[data-v-b3cdd263] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -1243,16 +1255,16 @@ button[data-v-0bd7ecc4] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-0bd7ecc4]:focus-visible {
+.item[data-v-b3cdd263]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-0bd7ecc4]:disabled {
+.item[data-v-b3cdd263]:disabled {
   opacity: 0.6;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-0bd7ecc4] {
+[data-component~="ui-combobox"][hidden][data-v-b3cdd263] {
   display: none;
 }
 
@@ -1603,12 +1615,12 @@ from {
 }
 
 /* Density resolves into the summary row's own values; the public tokens still override them. */
-[data-component~="ui-disclosure"][data-v-54a22a7e] {
+[data-component~="ui-disclosure"][data-v-af289043] {
   --_trigger-min-block-size: var(--ui-control-size);
   --_trigger-padding-block: var(--ui-space-2);
   --_trigger-padding-inline: var(--ui-space-3);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"][data-v-54a22a7e] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"][data-v-af289043] {
   --_trigger-min-block-size: var(--ui-control-size-sm);
   --_trigger-padding-block: var(--ui-space-1);
   --_trigger-padding-inline: var(--ui-space-2);
@@ -1616,14 +1628,14 @@ from {
 
 /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
  * select or combobox. Stacked disclosures share their dividers. */
-[data-component~="ui-disclosure"][data-v-54a22a7e] {
+[data-component~="ui-disclosure"][data-v-af289043] {
   display: block;
   inline-size: 100%;
   overflow: clip;
   border-block-end: 1px solid var(--ui-border-default);
   color: var(--ui-text-primary);
 }
-.trigger[data-v-54a22a7e] {
+.trigger[data-v-af289043] {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--ui-space-3);
@@ -1642,18 +1654,18 @@ from {
   border-radius: var(--ui-radius-sm);
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.trigger[data-v-54a22a7e]:hover:not(:disabled) {
+.trigger[data-v-af289043]:hover:not(:disabled) {
   background: var(--ui-surface-muted);
 }
-.trigger[data-v-54a22a7e]:focus-visible {
+.trigger[data-v-af289043]:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-.trigger[data-v-54a22a7e]:disabled {
-  color: var(--ui-text-muted);
+.trigger[data-v-af289043]:disabled {
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.chevron[data-v-54a22a7e] {
+.chevron[data-v-af289043] {
   inline-size: 0.5rem;
   block-size: 0.5rem;
   border-inline-end: 2px solid currentColor;
@@ -1661,39 +1673,39 @@ from {
   transform: rotate(45deg) translate(-1px, -1px);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.panel[data-v-54a22a7e] {
+.panel[data-v-af289043] {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--ui-motion-fast)
     var(--ui-motion-ease-out, var(--ui-motion-ease));
 }
-.panel-inner[data-v-54a22a7e] {
+.panel-inner[data-v-af289043] {
   min-block-size: 0;
   overflow: hidden;
   padding-inline: var(--ui-space-3);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-54a22a7e] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-af289043] {
   grid-template-rows: 1fr;
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-54a22a7e] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-af289043] {
   padding-block: 0 var(--ui-space-3);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron[data-v-54a22a7e] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron[data-v-af289043] {
   transform: rotate(225deg) translate(-1px, -1px);
 }
 @media (prefers-reduced-motion: reduce) {
-.panel[data-v-54a22a7e],
-  .chevron[data-v-54a22a7e] {
+.panel[data-v-af289043],
+  .chevron[data-v-af289043] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-disclosure"][hidden][data-v-54a22a7e] {
+[data-component~="ui-disclosure"][hidden][data-v-af289043] {
   display: none;
 }
 
-[data-component~="ui-editable"][data-v-8fe1c571] {
+[data-component~="ui-editable"][data-v-3b785d66] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -1704,13 +1716,13 @@ from {
 
 /* The value and the input share one grid cell with identical box metrics, so switching between
  * display and edit never changes the control's size or moves the text. */
-.field[data-v-8fe1c571] {
+.field[data-v-3b785d66] {
   display: inline-grid;
   min-inline-size: 8rem;
   max-inline-size: 100%;
 }
-.preview[data-v-8fe1c571],
-.input[data-v-8fe1c571] {
+.preview[data-v-3b785d66],
+.input[data-v-3b785d66] {
   grid-area: 1 / 1;
   box-sizing: border-box;
   min-block-size: var(--ui-control-size-sm);
@@ -1726,7 +1738,7 @@ from {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.preview[data-v-8fe1c571] {
+.preview[data-v-3b785d66] {
   display: inline-flex;
   gap: var(--ui-space-2);
   align-items: center;
@@ -1734,50 +1746,50 @@ from {
   text-align: start;
   cursor: pointer;
 }
-.preview[data-v-8fe1c571]:hover:not(:disabled) {
+.preview[data-v-3b785d66]:hover:not(:disabled) {
   background: var(--ui-surface-muted);
 }
-.preview[data-v-8fe1c571]:focus-visible {
+.preview[data-v-3b785d66]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.hint[data-v-8fe1c571] {
+.hint[data-v-3b785d66] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
 }
 
 /* Contained so it takes the value's width instead of its own default input width. */
-.input[data-v-8fe1c571] {
+.input[data-v-3b785d66] {
   contain: inline-size;
   inline-size: 100%;
   min-inline-size: 0;
   visibility: hidden;
   background: var(--ui-control-surface, var(--ui-surface-elevated));
 }
-.input[data-v-8fe1c571]:focus {
+.input[data-v-3b785d66]:focus {
   outline: none;
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-.input[data-v-8fe1c571]::selection {
+.input[data-v-3b785d66]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
 }
-[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview[data-v-8fe1c571] {
+[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview[data-v-3b785d66] {
   visibility: hidden;
 }
-[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input[data-v-8fe1c571] {
+[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input[data-v-3b785d66] {
   visibility: visible;
 }
-.actions[data-v-8fe1c571] {
+.actions[data-v-3b785d66] {
   display: none;
   gap: var(--ui-space-1);
 }
-[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions[data-v-8fe1c571] {
+[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions[data-v-3b785d66] {
   display: inline-flex;
 }
-.actions button[data-v-8fe1c571] {
+.actions button[data-v-3b785d66] {
   min-block-size: var(--ui-control-size-sm);
   padding: 0 var(--ui-space-3);
   border: 1px solid var(--ui-border-strong);
@@ -1790,22 +1802,22 @@ from {
   font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
-.actions .save[data-v-8fe1c571] {
+.actions .save[data-v-3b785d66] {
   border-color: var(--ui-accent-solid);
   background: var(--ui-accent-solid);
   color: var(--ui-text-on-accent);
 }
-.actions button[data-v-8fe1c571]:focus-visible {
+.actions button[data-v-3b785d66]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview[data-v-8fe1c571] {
-  color: var(--ui-text-muted);
+[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview[data-v-3b785d66] {
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-editable"][hidden][data-v-8fe1c571] {
+[data-component~="ui-editable"][hidden][data-v-3b785d66] {
   display: none;
 }
 
@@ -3147,7 +3159,7 @@ svg[data-v-c322b7ed-s] {
   display: none;
 }
 
-[data-component~="ui-input"][data-v-e7c851a2] {
+[data-component~="ui-input"][data-v-08811f22] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -3171,21 +3183,21 @@ svg[data-v-c322b7ed-s] {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-input"][data-v-e7c851a2]::selection {
+[data-component~="ui-input"][data-v-08811f22]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-input"][data-v-e7c851a2]::placeholder {
+[data-component~="ui-input"][data-v-08811f22]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-input"][data-v-e7c851a2]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-input"][data-v-08811f22]: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-e7c851a2]:focus-visible {
+[data-component~="ui-input"][data-v-08811f22]:focus-visible {
   border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
@@ -3196,27 +3208,27 @@ svg[data-v-c322b7ed-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-e7c851a2],
-[data-component~="ui-input"][data-v-e7c851a2]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-input"][aria-invalid="true"][data-v-08811f22],
+[data-component~="ui-input"][data-v-08811f22]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
 }
-[data-component~="ui-input"][data-v-e7c851a2]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-input"][data-v-08811f22]: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)
   );
 }
-[data-component~="ui-input"][data-v-e7c851a2]:disabled {
+[data-component~="ui-input"][data-v-08811f22]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input"][data-v-e7c851a2]:focus-visible {
+[data-component~="ui-input"][data-v-08811f22]:focus-visible {
     outline: var(--ui-input-focus-outline, 2px solid Highlight);
     outline-offset: 1px;
 }
@@ -3226,7 +3238,7 @@ svg[data-v-c322b7ed-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-e7c851a2] {
+[data-component~="ui-input"][hidden][data-v-08811f22] {
   display: none;
 }
 
@@ -3853,7 +3865,7 @@ svg[data-v-c322b7ed-s] {
 }
 }
 
-[data-component~="ui-radio"][data-v-f9c61d50] {
+[data-component~="ui-radio"][data-v-c4f88d99] {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-radio-gap, var(--ui-space-2));
@@ -3863,25 +3875,25 @@ svg[data-v-c322b7ed-s] {
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-f9c61d50] {
+.text[data-v-c4f88d99] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-f9c61d50] {
+.label[data-v-c4f88d99] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-f9c61d50] {
+.description[data-v-c4f88d99] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-f9c61d50]:empty {
+.description[data-v-c4f88d99]:empty {
   display: none;
 }
-input[data-v-f9c61d50] {
+input[data-v-c4f88d99] {
   flex: 0 0 auto;
   inline-size: var(--ui-radio-size, 1.125rem);
   block-size: var(--ui-radio-size, 1.125rem);
@@ -3889,20 +3901,20 @@ input[data-v-f9c61d50] {
   accent-color: var(--ui-accent-solid);
   cursor: pointer;
 }
-input[data-v-f9c61d50]:focus-visible {
+input[data-v-c4f88d99]: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-f9c61d50] {
-  color: var(--ui-text-muted);
+[data-component~="ui-radio"][data-ui-radio-state~="disabled"][data-v-c4f88d99] {
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-f9c61d50] {
+[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-c4f88d99] {
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-radio"][hidden][data-v-f9c61d50] {
+[data-component~="ui-radio"][hidden][data-v-c4f88d99] {
   display: none;
 }
 
@@ -4356,7 +4368,7 @@ dialog[data-v-2ba71171] {
   display: none;
 }
 
-[data-component~="ui-select"][data-v-f9be4ab9] {
+[data-component~="ui-select"][data-v-e15c964d] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -4380,7 +4392,7 @@ dialog[data-v-2ba71171] {
 
 /* 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-f9be4ab9] {
+[data-component~="ui-select"][data-v-e15c964d] {
   appearance: none;
   padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
   background-image: var(
@@ -4391,10 +4403,10 @@ dialog[data-v-2ba71171] {
   background-position: right var(--ui-space-3) center;
   background-size: 1.125rem 1.125rem;
 }
-[data-component~="ui-select"][data-v-f9be4ab9]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-select"][data-v-e15c964d]:hover:not(:focus):not(:disabled) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-[data-component~="ui-select"][data-v-f9be4ab9]:focus-visible {
+[data-component~="ui-select"][data-v-e15c964d]:focus-visible {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   outline: none;
   box-shadow: var(
@@ -4405,28 +4417,28 @@ dialog[data-v-2ba71171] {
 }
 
 /* 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-f9be4ab9],
-[data-component~="ui-select"][data-v-f9be4ab9]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-select"][aria-invalid="true"][data-v-e15c964d],
+[data-component~="ui-select"][data-v-e15c964d]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-select"][data-v-f9be4ab9]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-select"][data-v-e15c964d]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow:
     var(--ui-control-inset),
     0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
 }
-[data-component~="ui-select"][data-v-f9be4ab9]:disabled {
+[data-component~="ui-select"][data-v-e15c964d]:disabled {
   background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
-[data-component~="ui-select"][size][data-v-f9be4ab9]:not([size="1"]) {
+[data-component~="ui-select"][size][data-v-e15c964d]:not([size="1"]) {
   min-block-size: 7rem;
   padding: var(--ui-space-2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-select"][hidden][data-v-f9be4ab9] {
+[data-component~="ui-select"][hidden][data-v-e15c964d] {
   display: none;
 }
 
@@ -4739,7 +4751,7 @@ to {
   display: none;
 }
 
-[data-component~="ui-switch"][data-v-85cb3260] {
+[data-component~="ui-switch"][data-v-afb9ea1d] {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-switch-gap, var(--ui-space-2));
@@ -4749,25 +4761,25 @@ to {
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-85cb3260] {
+.text[data-v-afb9ea1d] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-85cb3260] {
+.label[data-v-afb9ea1d] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-85cb3260] {
+.description[data-v-afb9ea1d] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-85cb3260]:empty {
+.description[data-v-afb9ea1d]:empty {
   display: none;
 }
-input[data-v-85cb3260] {
+input[data-v-afb9ea1d] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -4785,7 +4797,7 @@ input[data-v-85cb3260] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
   margin: 0;
 }
-input[data-v-85cb3260]::after {
+input[data-v-afb9ea1d]::after {
   content: "";
   position: absolute;
   top: 3px;
@@ -4797,35 +4809,35 @@ input[data-v-85cb3260]::after {
   box-shadow: var(--ui-shadow-xs);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-85cb3260]:checked {
+input[data-v-afb9ea1d]:checked {
   background: var(--ui-accent-solid);
   border-color: var(--ui-accent-solid);
 }
-input[data-v-85cb3260]:checked::after {
+input[data-v-afb9ea1d]:checked::after {
   transform: translateX(1rem);
   background: var(--ui-text-on-accent);
 }
-input[data-v-85cb3260]:focus-visible {
+input[data-v-afb9ea1d]: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-85cb3260] {
-  color: var(--ui-text-muted);
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"][data-v-afb9ea1d] {
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-85cb3260] {
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-afb9ea1d] {
   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-85cb3260], input[data-v-85cb3260]::after {
+input[data-v-afb9ea1d], input[data-v-afb9ea1d]::after {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-switch"][hidden][data-v-85cb3260] {
+[data-component~="ui-switch"][hidden][data-v-afb9ea1d] {
   display: none;
 }
 
@@ -5084,7 +5096,7 @@ input[data-v-85cb3260], input[data-v-85cb3260]::after {
   display: none;
 }
 
-[data-component~="ui-textarea"][data-v-0352d397] {
+[data-component~="ui-textarea"][data-v-860b69d7] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -5108,18 +5120,18 @@ input[data-v-85cb3260], input[data-v-85cb3260]::after {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-textarea"][data-v-0352d397]::selection {
+[data-component~="ui-textarea"][data-v-860b69d7]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-textarea"][data-v-0352d397]::placeholder {
+[data-component~="ui-textarea"][data-v-860b69d7]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-textarea"][data-v-0352d397]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-textarea"][data-v-860b69d7]:hover:not(:focus):not(:disabled) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-[data-component~="ui-textarea"][data-v-0352d397]:focus-visible {
+[data-component~="ui-textarea"][data-v-860b69d7]:focus-visible {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   outline: none;
   box-shadow: var(
@@ -5130,24 +5142,24 @@ input[data-v-85cb3260], input[data-v-85cb3260]::after {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-textarea"][aria-invalid="true"][data-v-0352d397],
-[data-component~="ui-textarea"][data-v-0352d397]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-textarea"][aria-invalid="true"][data-v-860b69d7],
+[data-component~="ui-textarea"][data-v-860b69d7]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-textarea"][data-v-0352d397]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-textarea"][data-v-860b69d7]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow:
     var(--ui-control-inset),
     0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
 }
-[data-component~="ui-textarea"][data-v-0352d397]:disabled {
+[data-component~="ui-textarea"][data-v-860b69d7]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-textarea"][hidden][data-v-0352d397] {
+[data-component~="ui-textarea"][hidden][data-v-860b69d7] {
   display: none;
 }