@threadlabs/looma 0.23.6 → 0.23.8

package/vue/components.css

@@ -301,6 +301,10 @@ svg[data-v-47b12d9e] {
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-square-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-dot-size {
   syntax: "*";
   inherits: false;
@@ -345,7 +349,7 @@ svg[data-v-47b12d9e] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-v-470f6e28] {
   --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
   --_badge-text: var(--ui-text-secondary);
   /* Sit between the soft fill and its stronger theme ink. */
@@ -390,7 +394,7 @@ svg[data-v-47b12d9e] {
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
  * replaces, still sizes to its label rather than filling its container. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-v-470f6e28] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
@@ -399,7 +403,7 @@ svg[data-v-47b12d9e] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -407,52 +411,52 @@ svg[data-v-47b12d9e] {
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
   --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
   --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
   --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
   --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
   --_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-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
   --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -460,12 +464,12 @@ svg[data-v-47b12d9e] {
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-470f6e28] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-470f6e28] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -473,29 +477,52 @@ svg[data-v-47b12d9e] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
+/* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-470f6e28] {
+  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
+  display: inline-flex;
+  box-sizing: border-box;
+  flex: none;
+  inline-size: var(--_badge-square-size);
+  block-size: var(--_badge-square-size);
+  min-inline-size: var(--_badge-square-size);
+  min-block-size: var(--_badge-square-size);
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  text-box-trim: none;
+}
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
+  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
+}
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-470f6e28] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -507,7 +534,7 @@ svg[data-v-47b12d9e] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-470f6e28] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -518,7 +545,7 @@ svg[data-v-47b12d9e] {
 
 /* The clipped point needs an inset surface over an outer border-colour shape: a native border
    has no diagonal edge to follow. Keep this edge for every tag variant. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -535,7 +562,7 @@ svg[data-v-47b12d9e] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -550,34 +577,34 @@ svg[data-v-47b12d9e] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
   );
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-84736a7c] {
+[data-component~="ui-badge"][hidden][data-v-470f6e28] {
   display: none;
 }
 
@@ -2641,7 +2668,7 @@ from {
 }
 
 /* Density resolves into the summary row's own values; the public tokens still override them. */
-[data-component~="ui-disclosure"][data-v-af326e00] {
+[data-component~="ui-disclosure"][data-v-a0b99707] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
   --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
@@ -2651,7 +2678,7 @@ from {
   --_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-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"][data-v-a0b99707] {
   --_trigger-min-block-size: var(--ui-control-size-sm);
   --_trigger-padding-block: var(--ui-space-1);
   --_trigger-padding-inline: var(--ui-space-2);
@@ -2659,16 +2686,15 @@ 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-af326e00] {
+[data-component~="ui-disclosure"][data-v-a0b99707] {
   display: block;
   inline-size: 100%;
   overflow: clip;
   border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
   color: var(--ui-text-primary);
 }
-.trigger[data-v-af326e00] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+.trigger[data-v-a0b99707] {
+  display: flex;
   gap: var(--ui-space-3);
   align-items: center;
   inline-size: 100%;
@@ -2685,92 +2711,144 @@ from {
   border-radius: var(--ui-radius-sm);
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.trigger[data-v-af326e00]:hover:not(:disabled) {
+.trigger[data-v-a0b99707]:hover:not(:disabled) {
   background: color-mix(in srgb, currentColor 6%, transparent);
 }
-.trigger[data-v-af326e00]:focus-visible {
+.trigger[data-v-a0b99707]:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 var(--ui-focus-width)
     color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-.trigger[data-v-af326e00]:disabled {
+.trigger[data-v-a0b99707]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.chevron[data-v-af326e00] {
+.summary[data-v-a0b99707] {
+  flex: 1;
+  min-inline-size: 0;
+}
+.leading[data-v-a0b99707],
+.indicator[data-v-a0b99707] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.leading[data-v-a0b99707]:empty {
+  display: none;
+}
+.indicator[data-v-a0b99707] {
+  transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .indicator[data-v-a0b99707] {
+  transform: rotate(180deg);
+}
+.chevron[data-v-a0b99707] {
   inline-size: 0.5rem;
   block-size: 0.5rem;
   border-inline-end: 2px solid currentColor;
   border-block-end: 2px solid currentColor;
   transform: rotate(45deg) translate(-1px, -1px);
-  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.panel[data-v-af326e00] {
+.panel[data-v-a0b99707] {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--ui-motion-fast)
-    var(--ui-motion-ease-out, var(--ui-motion-ease));
+  transition:
+    grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+    content-visibility var(--ui-motion-reveal) allow-discrete;
 }
-.panel-inner[data-v-af326e00] {
+.panel-inner[data-v-a0b99707] {
   min-block-size: 0;
   overflow: hidden;
   padding-inline: var(--ui-space-3);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-a0b99707] {
   grid-template-rows: 1fr;
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-a0b99707] {
   padding-block: 0 var(--ui-space-3);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron[data-v-af326e00] {
-  transform: rotate(225deg) translate(-1px, -1px);
-}
 
 /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
  * normal content-sized layout and its animation remain unchanged when fill is omitted. */
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-v-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-v-a0b99707] {
   display: flex;
   flex-direction: column;
-  flex: none;
-  min-block-size: 0;
+  flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
+  min-block-size: calc(
+    var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width)
+  );
+  transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
   border-block-end: 0;
   border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"][data-v-af326e00] {
-  flex: 1;
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"][data-v-a0b99707] {
+  flex-grow: 1;
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading[data-v-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading[data-v-a0b99707] {
   flex: none;
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .trigger[data-v-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .trigger[data-v-a0b99707] {
   border-radius: 0;
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel[data-v-af326e00] {
-  display: flex;
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel[data-v-a0b99707] {
   flex: 1;
   min-block-size: 0;
-  transition: none;
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel[hidden][data-v-af326e00] {
-  flex: none;
-  block-size: 0;
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel-inner[data-v-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel-inner[data-v-a0b99707] {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-block-size: 0;
   padding: 0;
 }
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"] .trigger[data-v-a0b99707] {
+  gap: var(--ui-nav-gap);
+  padding-inline: var(--ui-nav-padding-inline);
+  min-block-size: var(--ui-nav-min-block-size);
+  padding-block: var(--ui-nav-padding-block);
+  border-radius: var(--ui-selection-radius);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-normal);
+  color: var(--ui-text-secondary);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+  .trigger[data-v-a0b99707] {
+  padding-inline: var(--ui-nav-compact-padding-inline);
+  padding-block: var(--ui-nav-compact-padding-block);
+  min-block-size: var(--ui-nav-compact-min-block-size);
+  font-size: var(--ui-font-size-sm);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"]
+  .trigger[data-v-a0b99707]:hover:not(:disabled) {
+  background: var(--ui-nav-hover-surface);
+  color: var(--ui-text-primary);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="internalOpen"]
+  .trigger[data-v-a0b99707] {
+  color: var(--ui-selection-text);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-v-a0b99707]
+  :is(.leading, .indicator) {
+  inline-size: var(--ui-nav-icon-size);
+  font-size: var(--ui-nav-icon-size);
+}
+@media (pointer: coarse) {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+    .trigger[data-v-a0b99707] {
+    min-block-size: var(--ui-control-min-block-size);
+}
+}
 @media (prefers-reduced-motion: reduce) {
-.panel[data-v-af326e00],
-  .chevron[data-v-af326e00] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-v-a0b99707],
+  .panel[data-v-a0b99707],
+  .indicator[data-v-a0b99707] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-disclosure"][hidden][data-v-af326e00] {
+[data-component~="ui-disclosure"][hidden][data-v-a0b99707] {
   display: none;
 }
 
@@ -5821,20 +5899,20 @@ svg[data-v-7bb0fe2e-s] {
    default slot), and an optional line under it (description), such as the record a section
    belongs to. Label and description are one line each and end in an ellipsis, so every item in a
    navigation has the same height and the rail never grows sideways. */
-[data-component~="ui-nav-item"][data-v-d666b895] {
+[data-component~="ui-nav-item"][data-v-7ab7def5] {
   --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
   --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
   position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: var(--ui-space-3);
+  gap: var(--ui-nav-gap);
   inline-size: var(--ui-nav-item-inline-size, 100%);
   min-inline-size: 0;
-  min-block-size: var(--ui-control-size, 2.5rem);
+  min-block-size: var(--ui-nav-min-block-size);
   margin: 0;
-  padding-block: var(--ui-space-2);
-  padding-inline: var(--ui-space-3);
+  padding-block: var(--ui-nav-padding-block);
+  padding-inline: var(--ui-nav-padding-inline);
   border: 0;
   border-radius: var(--ui-selection-radius);
   background: transparent;
@@ -5849,22 +5927,22 @@ svg[data-v-7bb0fe2e-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-nav-item"][data-v-d666b895]:hover:not([aria-current]) {
-  background: var(--ui-surface-hover);
+[data-component~="ui-nav-item"][data-v-7ab7def5]:hover:not([aria-current]) {
+  background: var(--ui-nav-hover-surface);
   color: var(--ui-text-primary);
 }
 
 /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
    box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
-[data-component~="ui-nav-item"][data-v-d666b895]:focus-visible {
+[data-component~="ui-nav-item"][data-v-7ab7def5]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: calc(-1 * var(--ui-focus-width));
 }
-[data-component~="ui-nav-item"][aria-current][data-v-d666b895] {
+[data-component~="ui-nav-item"][aria-current][data-v-7ab7def5] {
   background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
   color: var(--ui-selection-text);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][data-v-d666b895] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][data-v-7ab7def5] {
   border-radius: 0;
 }
 
@@ -5873,82 +5951,85 @@ svg[data-v-7bb0fe2e-s] {
    The line is a border, not a fill: forced colors replace backgrounds but keep a
    border, so the current item stays marked in high contrast. Logical edges mirror it in a
    right-to-left page. */
-.indicator[data-v-d666b895] {
+.indicator[data-v-7ab7def5] {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
   display: none;
   border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][aria-current] .indicator[data-v-d666b895] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][aria-current] .indicator[data-v-7ab7def5] {
   display: block;
 }
 @media (forced-colors: active) {
   /* System colors may erase the selected fill. Trace the complete surface, without
      creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][aria-current][data-v-d666b895]:not(:focus-visible) {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][aria-current][data-v-7ab7def5]:not(:focus-visible) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
-.indicator[data-v-d666b895] {
+.indicator[data-v-7ab7def5] {
     border-inline-start-color: Highlight;
 }
 }
-.leading[data-v-d666b895] {
+.leading[data-v-7ab7def5],
+.trailing[data-v-7ab7def5] {
   display: inline-flex;
   flex: none;
   align-items: center;
+  justify-content: center;
+  inline-size: var(--ui-nav-icon-size);
   color: inherit;
-  font-size: var(--ui-font-size-lg);
+  font-size: var(--ui-nav-icon-size);
 }
-.content[data-v-d666b895] {
+.content[data-v-7ab7def5] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.label[data-v-d666b895],
-.description[data-v-d666b895] {
+.label[data-v-7ab7def5],
+.description[data-v-7ab7def5] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.label[data-v-d666b895] {
+.label[data-v-7ab7def5] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-d666b895] {
+.description[data-v-7ab7def5] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-normal);
   line-height: var(--ui-line-height-tight);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-d666b895] {
-  min-block-size: var(--ui-control-size-sm);
-  padding-block: var(--ui-space-1);
-  padding-inline: var(--ui-space-2);
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-7ab7def5] {
+  min-block-size: var(--ui-nav-compact-min-block-size);
+  padding-block: var(--ui-nav-compact-padding-block);
+  padding-inline: var(--ui-nav-compact-padding-inline);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .leading[data-v-d666b895],
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label[data-v-d666b895] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label[data-v-7ab7def5] {
   font-size: var(--ui-font-size-sm);
 }
 @media (pointer: coarse) {
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-d666b895] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-7ab7def5] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
 /* An unused region takes no space. */
-.leading[data-v-d666b895]:empty,
-.description[data-v-d666b895]:empty {
+.leading[data-v-7ab7def5]:empty,
+.trailing[data-v-7ab7def5]:empty,
+.description[data-v-7ab7def5]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-nav-item"][hidden][data-v-d666b895] {
+[data-component~="ui-nav-item"][hidden][data-v-7ab7def5] {
   display: none;
 }
 
@@ -6951,9 +7032,14 @@ dialog[data-v-a424b50e] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-sidebar"][data-v-2d6c1f5b] {
+@property --ui-sidebar-collapsed-width {
+  syntax: "*";
+  inherits: false;
+}
+[data-component~="ui-sidebar"][data-v-5d67aa4a] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+  --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
   position: relative;
   box-sizing: border-box;
@@ -6966,8 +7052,11 @@ dialog[data-v-a424b50e] {
   background: var(--ui-sidebar-surface, var(--ui-surface-default));
   border-inline-end: var(--ui-border-width) solid
     var(--ui-sidebar-border, var(--ui-border-divider));
+  transition:
+    inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease),
+    visibility var(--ui-motion-layout);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-2d6c1f5b] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-5d67aa4a] {
   border-inline-end: 0;
   border-inline-start: var(--ui-border-width) solid
     var(--ui-sidebar-border, var(--ui-border-divider));
@@ -6975,10 +7064,17 @@ dialog[data-v-a424b50e] {
 
 /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
    Looma scroller uses (see ui-scroll-area). */
-.content[data-v-2d6c1f5b] {
+.viewport[data-v-5d67aa4a] {
   flex: 1;
   min-block-size: 0;
+  overflow: clip;
+}
+.content[data-v-5d67aa4a] {
+  block-size: 100%;
+  inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
+  min-block-size: 0;
   overflow: auto;
+  transition: transform var(--ui-motion-layout) var(--ui-motion-layout-ease);
   --_ui-scroll-fade-direction: to bottom;
   --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
   mask-image: linear-gradient(
@@ -7002,10 +7098,21 @@ dialog[data-v-a424b50e] {
 }
 
 /* Collapsed while docked. */
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-2d6c1f5b]:not([popover]) {
-  display: none;
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-5d67aa4a]:not([popover]) {
+  inline-size: var(--ui-sidebar-collapsed-width, 0px);
+  visibility: hidden;
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="resizing"][data-v-5d67aa4a] {
+  transition: none;
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content[data-v-5d67aa4a] {
+  transform: translateX(-100%);
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-ui-sidebar-state~="internalCollapsed"]:not([popover])
+  .content[data-v-5d67aa4a] {
+  transform: translateX(100%);
 }
-.resizer[data-v-2d6c1f5b] {
+.resizer[data-v-5d67aa4a] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -7018,15 +7125,15 @@ dialog[data-v-a424b50e] {
   touch-action: none;
   outline: none;
 }
-.resizer[hidden][data-v-2d6c1f5b] {
+.resizer[hidden][data-v-5d67aa4a] {
   display: none;
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-2d6c1f5b] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-5d67aa4a] {
   inset-inline-end: auto;
   inset-inline-start: 0;
   transform: translateX(-50%);
 }
-.resizer[data-v-2d6c1f5b]::after {
+.resizer[data-v-5d67aa4a]::after {
   content: "";
   position: absolute;
   inset-block: 0;
@@ -7042,7 +7149,7 @@ dialog[data-v-a424b50e] {
     background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.guide[data-v-2d6c1f5b] {
+.guide[data-v-5d67aa4a] {
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
@@ -7056,16 +7163,16 @@ dialog[data-v-a424b50e] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-.resizer[data-v-2d6c1f5b]:is(:hover, :focus-visible)::after {
+.resizer[data-v-5d67aa4a]:is(:hover, :focus-visible)::after {
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
   opacity: 1;
 }
-.resizer:is(:hover, :focus-visible) > .guide[data-v-2d6c1f5b] {
+.resizer:is(:hover, :focus-visible) > .guide[data-v-5d67aa4a] {
   opacity: 1;
 }
 
 /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
-[data-component~="ui-sidebar"][popover][data-v-2d6c1f5b] {
+[data-component~="ui-sidebar"][popover][data-v-5d67aa4a] {
   position: fixed;
   inset-block: 0;
   inset-inline-start: 0;
@@ -7079,42 +7186,47 @@ dialog[data-v-a424b50e] {
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
   transform: translateX(0);
   transition:
-    transform var(--ui-motion-base) var(--ui-motion-ease-out),
-    display var(--ui-motion-base) allow-discrete,
-    overlay var(--ui-motion-base) allow-discrete;
+    transform var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+    display var(--ui-motion-reveal) allow-discrete,
+    overlay var(--ui-motion-reveal) allow-discrete;
 }
 
 /* The author display above would otherwise override the UA rule that hides a closed popover. */
-[data-component~="ui-sidebar"][popover][data-v-2d6c1f5b]:not(:popover-open) {
+[data-component~="ui-sidebar"][popover][data-v-5d67aa4a]:not(:popover-open) {
   display: none;
   transform: translateX(-100%);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-2d6c1f5b] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-5d67aa4a] {
   inset-inline-start: auto;
   inset-inline-end: 0;
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-2d6c1f5b]:not(:popover-open) {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-5d67aa4a]:not(:popover-open) {
   transform: translateX(100%);
 }
 @starting-style {
-[data-component~="ui-sidebar"][popover][data-v-2d6c1f5b]:popover-open {
+[data-component~="ui-sidebar"][popover][data-v-5d67aa4a]:popover-open {
     transform: translateX(-100%);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-2d6c1f5b]:popover-open {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-5d67aa4a]:popover-open {
     transform: translateX(100%);
 }
 }
-[data-component~="ui-sidebar"][popover][data-v-2d6c1f5b]::backdrop {
+[data-component~="ui-sidebar"][popover][data-v-5d67aa4a]::backdrop {
   background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
 }
+[data-component~="ui-sidebar"][popover] .content[data-v-5d67aa4a] {
+  inline-size: 100%;
+}
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-sidebar"][popover][data-v-2d6c1f5b] {
+[data-component~="ui-sidebar"][data-v-5d67aa4a],
+  [data-component~="ui-sidebar"][popover][data-v-5d67aa4a],
+  .content[data-v-5d67aa4a] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-sidebar"][hidden][data-v-2d6c1f5b] {
+[data-component~="ui-sidebar"][hidden][data-v-5d67aa4a] {
   display: none;
 }