@threadlabs/looma 0.6.1 → 0.6.2

package/vue/components.css

@@ -12,7 +12,7 @@
   display: none;
 }
 
-[data-component~="ui-avatar"][data-v-038b6eb1] {
+[data-component~="ui-avatar"][data-v-3a27ff1d] {
   display: inline-grid;
   place-items: center;
   overflow: hidden;
@@ -27,13 +27,13 @@
   font-weight: 600;
   text-transform: uppercase;
 }
-.image[data-v-038b6eb1],img[data-v-038b6eb1-s] {
+.image[data-v-3a27ff1d],img[data-v-3a27ff1d-s] {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
-.fallback[data-v-038b6eb1] {
+.fallback[data-v-3a27ff1d] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -41,16 +41,34 @@
   inline-size: 100%;
   block-size: 100%;
 }
-[hidden][data-v-038b6eb1] {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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-3a27ff1d] {
+    display: block;
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[hidden][data-v-3a27ff1d] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden][data-v-038b6eb1] {
+[data-component~="ui-avatar"][hidden][data-v-3a27ff1d] {
   display: none;
 }
 
-[data-component~="ui-avatar-group"][data-v-6029679e] {
+[data-component~="ui-avatar-group"][data-v-2ad5d86f] {
+  /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
+   * diffuse elevation overlays use. */
+  --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
+  --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -59,15 +77,15 @@
 
 /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
  * component roots outside this style scope. */
-[data-v-6029679e-s] {
+[data-v-2ad5d86f-s] {
   margin-inline-start: -0.625rem;
   flex-shrink: 0;
   border-radius: 999px;
 }
-[data-v-6029679e-s]:first-child {
+[data-v-2ad5d86f-s]:first-child {
   margin-inline-start: 0;
 }
-.overflow[data-v-6029679e] {
+.overflow[data-v-2ad5d86f] {
   margin-inline-start: -0.625rem;
   display: inline-flex;
   align-items: center;
@@ -79,23 +97,23 @@
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow:
-    var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)),
-    0 0 0 1px rgb(0 0 0 / 0.06);
+    var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
+    var(--ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
   font-size: 0.75rem;
   font-weight: 600;
   flex-shrink: 0;
 }
-.overflow[hidden][data-v-6029679e] {
+.overflow[hidden][data-v-2ad5d86f] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar-group"][hidden][data-v-6029679e] {
+[data-component~="ui-avatar-group"][hidden][data-v-2ad5d86f] {
   display: none;
 }
 
-[data-component~="ui-badge"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);
   --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
@@ -116,59 +134,73 @@
   line-height: var(--ui-badge-line-height, var(--ui-line-height-tight));
   white-space: nowrap;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-43aa138f] {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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) {
+[data-component~="ui-badge"][data-v-7e9b5784] {
+    display: block;
+    min-block-size: var(--ui-badge-min-block-size, 1.5rem);
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-accent-soft);
   --_badge-border: var(--ui-accent-soft);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-danger-soft);
   --_badge-border: var(--ui-danger-soft);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-success-soft);
   --_badge-border: var(--ui-success-soft);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-warning-soft);
   --_badge-border: var(--ui-warning-soft);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-info-soft);
   --_badge-border: var(--ui-info-soft);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-43aa138f] {
+[data-component~="ui-badge"][hidden][data-v-7e9b5784] {
   display: none;
 }
 
@@ -596,7 +628,7 @@ input[data-v-acf71232]:focus-visible {
   display: none;
 }
 
-[data-component~="ui-tooltip"][data-v-3099b119] {
+[data-component~="ui-tooltip"][data-v-3af2132e] {
   position: fixed;
   inset: auto;
   margin: 0;
@@ -617,7 +649,7 @@ input[data-v-acf71232]:focus-visible {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-.surface[data-v-3099b119] {
+.surface[data-v-3af2132e] {
   --_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
   position: relative;
   box-sizing: border-box;
@@ -632,7 +664,7 @@ input[data-v-acf71232]:focus-visible {
   line-height: var(--ui-line-height-tight);
   box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
 }
-[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-3099b119] {
+[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-3af2132e] {
   --_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
   background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
   color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
@@ -640,7 +672,7 @@ input[data-v-acf71232]:focus-visible {
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-.surface[data-v-3099b119]::after {
+.surface[data-v-3af2132e]::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -657,7 +689,7 @@ input[data-v-acf71232]:focus-visible {
   transform: rotate(45deg);
 }
 :is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-start"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface[data-v-3099b119]::after {
+  .surface[data-v-3af2132e]::after {
   inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -668,42 +700,51 @@ input[data-v-acf71232]:focus-visible {
   border-start-start-radius: 1px;
 }
 :is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=top-end"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface[data-v-3099b119]::after {
+  .surface[data-v-3af2132e]::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-v-3099b119]:popover-open {
+[data-component~="ui-tooltip"][data-v-3af2132e]:popover-open {
   opacity: 1;
   transform: translateY(0);
 }
 @starting-style {
-[data-component~="ui-tooltip"][data-v-3099b119]:popover-open {
+[data-component~="ui-tooltip"][data-v-3af2132e]:popover-open {
     opacity: 0;
     transform: translateY(4px);
 }
 }
-[data-component~="ui-tooltip"][hidden][data-v-3099b119] {
+[data-component~="ui-tooltip"][hidden][data-v-3af2132e] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-tooltip"][data-v-3099b119] {
+[data-component~="ui-tooltip"][data-v-3af2132e] {
     transition: none;
 }
 }
 
-[data-component~="ui-combobox"][data-v-147b231f] {
+[data-component~="ui-combobox"][data-v-f1d9bb8a] {
   display: grid;
   gap: var(--ui-space-1);
   min-inline-size: 0;
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-147b231f] {
+label[data-v-f1d9bb8a] {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--ui-combobox-label-font-size, 0.875rem);
   font-weight: 500;
 }
-.field[data-v-147b231f] {
+/* 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-f1d9bb8a] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+}
+.field[data-v-f1d9bb8a] {
+  flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
   border: 1px solid var(--ui-control-border, var(--ui-border-default));
@@ -714,17 +755,52 @@ label[data-v-147b231f] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-147b231f]:focus-within {
+.field[data-v-f1d9bb8a]:focus-within {
   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-147b231f]::selection {
+/* A ghost icon button: the affordance is the mark, not a box around it. */
+.help[data-v-f1d9bb8a] {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ui-control-size-sm);
+  block-size: var(--ui-control-size-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-round);
+  background: transparent;
+  color: var(--ui-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.help[data-v-f1d9bb8a]:hover:enabled,
+.help[aria-expanded="true"][data-v-f1d9bb8a] {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  color: var(--ui-text-primary);
+}
+.help[data-v-f1d9bb8a]:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
+.help[data-v-f1d9bb8a]:disabled {
+  color: var(--ui-disabled-text);
+  cursor: not-allowed;
+}
+.help-icon[data-v-f1d9bb8a] {
+  inline-size: var(--ui-icon-size-sm);
+  block-size: var(--ui-icon-size-sm);
+}
+input[data-v-f1d9bb8a]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-147b231f] {
+input[data-v-f1d9bb8a] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -740,11 +816,11 @@ input[data-v-147b231f] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-f1d9bb8a] {
   min-block-size: calc(var(--ui-control-size-sm) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
 }
-button[data-v-147b231f] {
+button[data-v-f1d9bb8a] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -759,31 +835,31 @@ button[data-v-147b231f] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-147b231f] {
+.affordance-icon[data-v-f1d9bb8a] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-147b231f]:hover:enabled {
+button[data-v-f1d9bb8a]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-147b231f]:focus-visible {
+button[data-v-f1d9bb8a]: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-147b231f]:disabled, button[data-v-147b231f]:disabled {
+input[data-v-f1d9bb8a]:disabled, button[data-v-f1d9bb8a]:disabled {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.field[data-v-147b231f]:has(input:disabled) {
+.field[data-v-f1d9bb8a]: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-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-f1d9bb8a] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-147b231f] {
+.popup[data-v-f1d9bb8a] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -797,40 +873,40 @@ input[data-v-147b231f]:disabled, button[data-v-147b231f]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-147b231f] {
+[hidden][data-v-f1d9bb8a] {
   display: none;
 }
-.option[data-v-147b231f] {
+.option[data-v-f1d9bb8a] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-147b231f]:hover, .option.active[data-v-147b231f] {
+.option[data-v-f1d9bb8a]:hover, .option.active[data-v-f1d9bb8a] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-147b231f] {
+.option[aria-disabled="true"][data-v-f1d9bb8a] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.primary[data-v-147b231f] {
+.primary[data-v-f1d9bb8a] {
   display: block;
   color: var(--ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-147b231f], .group[data-v-147b231f] {
+.message[data-v-f1d9bb8a], .group[data-v-f1d9bb8a] {
   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-147b231f], .popup .message[data-v-147b231f] {
+.group[data-v-f1d9bb8a], .popup .message[data-v-f1d9bb8a] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-147b231f] {
+.sr-only[data-v-f1d9bb8a] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -839,35 +915,35 @@ input[data-v-147b231f]:disabled, button[data-v-147b231f]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-147b231f] {
+button[data-v-f1d9bb8a] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-147b231f], .popup[data-v-147b231f] {
+.field[data-v-f1d9bb8a], .popup[data-v-f1d9bb8a] {
     border-color: CanvasText;
 }
-.option.active[data-v-147b231f] {
+.option.active[data-v-f1d9bb8a] {
     outline-color: Highlight;
 }
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-f1d9bb8a] {
   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-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-f1d9bb8a] {
   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-147b231f] {
+.item[data-v-f1d9bb8a] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -881,16 +957,16 @@ button[data-v-147b231f] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-147b231f]:focus-visible {
+.item[data-v-f1d9bb8a]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-147b231f]:disabled {
+.item[data-v-f1d9bb8a]: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-147b231f] {
+[data-component~="ui-combobox"][hidden][data-v-f1d9bb8a] {
   display: none;
 }
 
@@ -2763,7 +2839,7 @@ svg[data-v-80722d12-s] {
 }
 }
 
-[data-component~="ui-menu-item"][data-v-deb5a674] {
+[data-component~="ui-menu-item"][data-v-69407da9] {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -2780,16 +2856,29 @@ svg[data-v-80722d12-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-menu-item"][data-v-deb5a674]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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) {
+[data-component~="ui-menu-item"][data-v-69407da9] {
+    display: block;
+    min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[data-component~="ui-menu-item"][data-v-69407da9]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
-[data-component~="ui-menu-item"][aria-disabled="true"][data-v-deb5a674] {
+[data-component~="ui-menu-item"][aria-disabled="true"][data-v-69407da9] {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-menu-item"][hidden][data-v-deb5a674] {
+[data-component~="ui-menu-item"][hidden][data-v-69407da9] {
   display: none;
 }
 
@@ -3574,22 +3663,22 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
 }
 
 /* Density resolves into the tab row's own values; the public tokens still override them. */
-[data-component~="ui-tabs"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-v-3e89baea] {
   --_tab-min-block-size: var(--ui-control-size);
   --_tab-padding-block: var(--ui-space-2);
   --_tab-padding-inline: var(--ui-space-3);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-3e89baea] {
   --_tab-min-block-size: var(--ui-control-size-sm);
   --_tab-padding-block: var(--ui-space-1);
   --_tab-padding-inline: var(--ui-space-2);
 }
-[data-component~="ui-tabs"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-v-3e89baea] {
   display: grid;
   inline-size: 100%;
   min-inline-size: 0;
 }
-.list[data-v-b9e876c6] {
+.list[data-v-3e89baea] {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
@@ -3605,7 +3694,7 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   scrollbar-width: thin;
   border-block-end: 1px solid var(--ui-border-default);
 }
-.list button[data-v-b9e876c6] {
+.list button[data-v-3e89baea] {
   min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
   margin: 0 0 -1px;
   padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block))
@@ -3623,43 +3712,56 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-b9e876c6] {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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) {
+.list button[data-v-3e89baea] {
+    display: block;
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-3e89baea] {
   grid-auto-columns: minmax(max-content, 1fr);
 }
-.list button[data-v-b9e876c6] {
+.list button[data-v-3e89baea] {
   white-space: nowrap;
 }
-.list button[data-v-b9e876c6]:hover {
+.list button[data-v-3e89baea]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-.list button[aria-selected="true"][data-v-b9e876c6] {
+.list button[aria-selected="true"][data-v-3e89baea] {
   color: var(--ui-accent-solid);
   border-block-end-color: var(--ui-accent-solid);
 }
-.list button[data-v-b9e876c6]:focus-visible {
+.list button[data-v-3e89baea]:focus-visible {
   position: relative;
   outline: none;
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
   border-radius: var(--ui-radius-sm);
 }
-.panels[data-v-b9e876c6] {
+.panels[data-v-3e89baea] {
   min-inline-size: 0;
 }
-[data-v-b9e876c6-s] {
+[data-v-3e89baea-s] {
   padding: var(--ui-space-4);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-3e89baea] {
   grid-template-columns: max-content minmax(0, 1fr);
   align-items: start;
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-3e89baea] {
   grid-auto-flow: row;
   grid-auto-columns: auto;
   border-block-end: 0;
   border-inline-end: 1px solid var(--ui-border-default);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-3e89baea] {
   margin: 0 -1px 0 0;
   border-block-end: 0;
   border-inline-end: 2px solid transparent;
@@ -3667,17 +3769,17 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
 }
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  button[aria-selected="true"][data-v-b9e876c6] {
+  button[aria-selected="true"][data-v-3e89baea] {
   border-inline-end-color: var(--ui-accent-solid);
 }
 @media (prefers-reduced-motion: reduce) {
-.list button[data-v-b9e876c6] {
+.list button[data-v-3e89baea] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tabs"][hidden][data-v-b9e876c6] {
+[data-component~="ui-tabs"][hidden][data-v-3e89baea] {
   display: none;
 }