@threadlabs/looma 0.18.0 → 0.18.1

package/vue/components.css

@@ -729,7 +729,7 @@ svg[data-v-7dbd4f40],
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-button"][data-v-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -748,15 +748,15 @@ svg[data-v-7dbd4f40],
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-720dbd9f] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-720dbd9f] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -784,27 +784,27 @@ svg[data-v-7dbd4f40],
 }
 
 /* An anchor keeps the boxed button look even when an app styles ordinary links. */
-[data-component~="ui-button"][data-v-a89a1895]:is(a) {
+[data-component~="ui-button"][data-v-720dbd9f]:is(a) {
   text-decoration: none;
 }
-.spinner-wrap[data-v-a89a1895] {
+.spinner-wrap[data-v-720dbd9f] {
   display: inline-flex;
   flex: none;
   margin-inline-end: var(--ui-space-2);
   vertical-align: middle;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-720dbd9f] {
   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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-720dbd9f] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
@@ -812,29 +812,29 @@ svg[data-v-7dbd4f40],
 
 /* 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-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-720dbd9f]: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-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-720dbd9f]: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-a89a1895],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f] {
   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-a89a1895], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f]):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-a89a1895], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -843,43 +843,43 @@ svg[data-v-7dbd4f40],
 
 /* 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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-720dbd9f] {
   --_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-a89a1895],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-720dbd9f],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -887,24 +887,24 @@ svg[data-v-7dbd4f40],
 }
 
 /* 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-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f]: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-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f]:is(:active, [aria-expanded="true"]):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-a89a1895]:focus-visible {
+[data-component~="ui-button"][data-v-720dbd9f]: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-a89a1895]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -912,7 +912,7 @@ svg[data-v-7dbd4f40],
 
 /* A loading action stays visually active; only an explicitly disabled action takes the
    neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
-[data-component~="ui-button"][data-v-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-v-720dbd9f]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   border-color: var(--ui-disabled-border);
   background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
@@ -922,19 +922,19 @@ svg[data-v-7dbd4f40],
   background-image: none;
   box-shadow: none;
 }
-:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-a89a1895], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-a89a1895]):focus-visible {
+:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-720dbd9f]):focus-visible {
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background-color: var(--ui-disabled-surface);
   border-color: transparent;
 }
 
 /* The size states outrank :host, so sm is named too, or a small button would stay small. */
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-a89a1895], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-720dbd9f] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -944,11 +944,11 @@ svg[data-v-7dbd4f40],
    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-a89a1895] {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -959,7 +959,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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -977,21 +977,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-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]: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-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background: none;
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]: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);
@@ -999,7 +999,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-a89a1895] {
+[data-component~="ui-button"][hidden][data-v-720dbd9f] {
   display: none;
 }
 
@@ -4147,6 +4147,10 @@ svg[data-v-610f67a7-s] {
   syntax: "*";
   inherits: false;
 }
+@property --ui-icon-button-active-surface {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-icon-button-border {
   syntax: "*";
   inherits: false;
@@ -4215,7 +4219,7 @@ svg[data-v-610f67a7-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
   --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
@@ -4223,10 +4227,10 @@ svg[data-v-610f67a7-s] {
   display: inline-flex;
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81] {
   position: relative;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -4240,13 +4244,13 @@ svg[data-v-610f67a7-s] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]:disabled::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]:disabled::before {
   opacity: 0;
 }
 
 /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
    proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-9828be81] {
   opacity: 1;
   transform: scale(1);
   transition:
@@ -4254,22 +4258,22 @@ svg[data-v-610f67a7-s] {
     transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
 }
 @media (hover: hover) and (pointer: fine) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
     background-color: transparent;
     box-shadow: none;
 }
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
-    .content[data-v-ae1ec9d2] {
+    .content[data-v-9828be81] {
     opacity: 0;
     transform: scale(0.65);
     transition-duration: var(--ui-motion-fast);
 }
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]: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-9828be81]: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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
   /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
   --_size: 2rem;
   appearance: none;
@@ -4295,7 +4299,7 @@ svg[data-v-610f67a7-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-ae1ec9d2]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]::before {
     opacity: 0;
 }
 }
@@ -4303,10 +4307,10 @@ svg[data-v-610f67a7-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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
     position: relative;
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]::after {
+[data-component~="ui-icon-button"][data-v-9828be81]::after {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -4315,10 +4319,10 @@ svg[data-v-610f67a7-s] {
     transform: translate(-50%, -50%);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ae1ec9d2] {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-9828be81] {
   position: relative;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ae1ec9d2]::after {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-9828be81]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -4326,31 +4330,31 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
   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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-9828be81] {
   --_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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-9828be81] {
   --_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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-9828be81] {
   border-radius: var(--ui-radius-round);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-9828be81] {
   border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
   background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
   background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
   box-shadow: var(--ui-raised);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-9828be81] {
   background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
   background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
@@ -4359,7 +4363,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
   );
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-v-9828be81]:hover:enabled:not([aria-disabled="true"]) {
   /* Derived from the text colour so the ghost hover shows on any background. */
   background-color: var(
     --ui-icon-button-hover-surface,
@@ -4367,42 +4371,50 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
   );
   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-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-9828be81]:hover:enabled:not([aria-disabled="true"]) {
   border-color: var(
     --ui-icon-button-hover-border,
     var(--ui-control-border-hover, var(--ui-control-border))
   );
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-9828be81]:hover:enabled:not([aria-disabled="true"]) {
   background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]:active:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"][data-v-9828be81]:enabled:not([aria-disabled="true"]) {
+  background-color: var(
+    --ui-icon-button-active-surface,
+    color-mix(in srgb, currentColor 16%, transparent)
+  );
+  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  box-shadow: var(--ui-pressed);
+}
+[data-component~="ui-icon-button"][data-v-9828be81]:active:enabled:not([aria-disabled="true"]) {
   transform: scale(var(--ui-icon-button-active-scale, 0.96));
 }
-:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"][data-v-ae1ec9d2], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-ae1ec9d2]) {
+:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"][data-v-9828be81], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-9828be81]) {
   cursor: progress;
 }
-.content[data-v-ae1ec9d2] {
+.content[data-v-9828be81] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 :is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"])
-  .content[data-v-ae1ec9d2] {
+  .content[data-v-9828be81] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-9828be81] {
     transition: none;
 }
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]:focus-visible {
+[data-component~="ui-icon-button"][data-v-9828be81]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Disabled is a flat neutral control, independent of the active variant's tone. */
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]:disabled {
+[data-component~="ui-icon-button"][data-v-9828be81]:disabled {
   border-color: var(--ui-disabled-border);
   background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
@@ -4412,23 +4424,23 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
   box-shadow: none;
   background-image: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-ae1ec9d2]:disabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-9828be81]:disabled {
   border-color: transparent;
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
   --_icon-button-icon-default: var(--ui-icon-size-md);
   /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
      defaults, which its own --ui-icon-* hooks still override. */
   --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-9828be81] {
   --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-9828be81] {
   --_icon-button-icon-default: var(--ui-icon-size-lg);
 }
-svg[data-v-ae1ec9d2-s] {
+svg[data-v-9828be81-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;
@@ -4436,7 +4448,7 @@ svg[data-v-ae1ec9d2-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][hidden][data-v-9828be81] {
   display: none;
 }
 
@@ -5237,7 +5249,7 @@ svg[data-v-ae1ec9d2-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-menu-item"][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-v-6d5ac848] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -5269,11 +5281,14 @@ svg[data-v-ae1ec9d2-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.label[data-v-6b7f9bed] {
+.label[data-v-6d5ac848] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
   flex: 1;
   min-inline-size: 0;
 }
-.indicator[data-v-6b7f9bed] {
+.indicator[data-v-6d5ac848] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5286,75 +5301,75 @@ svg[data-v-ae1ec9d2-s] {
   color: var(--ui-surface);
   --_ui-default-icon-size: 0.75rem;
 }
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-6d5ac848] {
   display: none;
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
-  .indicator[data-v-6b7f9bed] {
+  .indicator[data-v-6d5ac848] {
   border-color: var(--ui-accent);
   background: var(--ui-accent);
 }
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-6d5ac848] {
   border-radius: var(--ui-radius-round);
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"][aria-checked="true"]
-  .indicator[data-v-6b7f9bed] {
+  .indicator[data-v-6d5ac848] {
   border-color: var(--ui-accent);
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"][aria-checked="true"]
-  .indicator[data-v-6b7f9bed]::after {
+  .indicator[data-v-6d5ac848]::after {
   content: "";
   inline-size: 0.375rem;
   block-size: 0.375rem;
   border-radius: var(--ui-radius-round);
   background: var(--ui-accent);
 }
-.shortcut[data-v-6b7f9bed] {
+.shortcut[data-v-6d5ac848] {
   margin-inline-start: auto;
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-normal);
 }
-.shortcut[data-v-6b7f9bed]:empty {
+.shortcut[data-v-6d5ac848]:empty {
   display: none;
 }
 
 /* Keep the text row at the shared control height where cap trimming is available. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-menu-item"][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-v-6d5ac848] {
     min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-menu-item"][data-v-6b7f9bed]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+[data-component~="ui-menu-item"][data-v-6d5ac848]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
-[data-component~="ui-menu-item"][data-v-6b7f9bed]:focus-visible {
+[data-component~="ui-menu-item"][data-v-6d5ac848]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: -2px;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][aria-disabled="true"][data-v-6d5ac848] {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6d5ac848] {
   border-color: var(--ui-disabled-border);
   background: transparent;
   color: var(--ui-disabled-text);
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6b7f9bed]::after {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6d5ac848]::after {
   background: var(--ui-disabled-text);
 }
 @media (forced-colors: active) {
-[data-component~="ui-menu-item"][data-v-6b7f9bed]:focus-visible {
+[data-component~="ui-menu-item"][data-v-6d5ac848]:focus-visible {
     outline-color: Highlight;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-menu-item"][hidden][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][hidden][data-v-6d5ac848] {
   display: none;
 }