@threadlabs/looma 0.28.6 → 0.28.7

package/vue/components.css

@@ -3517,356 +3517,663 @@ footer[data-v-de6bc526]:empty {
 }
 }
 
-/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
-       wrapping into several lines, and a fade at each edge that has more to show says so. */
-
-/* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
-   strip, so a floating toolbar's border and shadow stay whole. */
-
-/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-
-/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-editor-toolbar) {
-:scope:where([data-v-4659067f]:scope) {
-    position: sticky;
-    top: 0;
-    z-index: var(--ui-editor-toolbar-z-index, 10);
-    display: flex;
-    align-items: center;
-    padding: var(--ui-editor-toolbar-padding-block, 6px)
-      var(--ui-editor-toolbar-padding-inline, 12px);
-    min-height: var(--ui-editor-toolbar-min-height, 48px);
-    background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-    border-bottom: var(--ui-border-width) solid
-      var(--ui-editor-toolbar-border, var(--ui-border-divider));
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-menu-surface {
+  syntax: "*";
+  inherits: false;
 }
-.strip[data-v-4659067f] {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--ui-editor-toolbar-gap, 2px);
-    min-width: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    overscroll-behavior-inline: contain;
-    scrollbar-width: none;
+@property --ui-menu-border {
+  syntax: "*";
+  inherits: false;
 }
-.strip[data-v-4659067f]::-webkit-scrollbar {
-    display: none;
+@property --ui-menu-radius {
+  syntax: "*";
+  inherits: false;
 }
-.strip > [data-v-4659067f-s] {
-    flex: 0 0 auto;
+@property --ui-menu-shadow {
+  syntax: "*";
+  inherits: false;
 }
-.strip[data-v-4659067f] {
-    --_ui-scroll-fade-direction: to right;
-    --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
-    mask-image: linear-gradient(
-      var(--_ui-scroll-fade-direction),
-      transparent,
-      #000 var(--_ui-scroll-fade-start),
-      #000 calc(100% - var(--_ui-scroll-fade-end)),
-      transparent
-    );
-    animation:
-      ui-scroll-fade-start linear,
-      ui-scroll-fade-start-hold linear,
-      ui-scroll-fade-end-hold linear,
-      ui-scroll-fade-end linear;
-    animation-timeline: scroll(self inline);
-    animation-range:
-      0 var(--_ui-scroll-fade-size),
-      var(--_ui-scroll-fade-size) calc(100% + 1px),
-      -1px calc(100% - var(--_ui-scroll-fade-size)),
-      calc(100% - var(--_ui-scroll-fade-size)) 100%;
+@property --ui-menu-viewport-gap {
+  syntax: "*";
+  inherits: false;
 }
-:scope:dir(rtl) .strip[data-v-4659067f] {
-    --_ui-scroll-fade-direction: to left;
+
+/* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
+   still win. */
+
+/* Small follows its trigger down: an item's own hooks still win. */
+@scope (.ui-menu) {
+:scope:where([data-v-1ded0073]:scope):is([data-ui-menu-state~="density=compact"]) {
+    --_ui-default-menu-item-padding-block: var(--ui-space-1);
+    --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+    --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
+    --_ui-default-menu-item-radius: var(--ui-radius-sm);
+    padding: var(--ui-space-1);
+    gap: 0;
 }
-.divider[data-v-4659067f-s] {
-    width: 1px;
-    height: 20px;
-    background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
-    flex-shrink: 0;
-    margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+:scope:where([data-v-1ded0073]:scope):is([data-ui-menu-state~="size=sm"]) {
+    --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
+    --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+    --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
+    --_ui-default-menu-item-radius: var(--ui-radius-sm);
+    --_ui-default-menu-item-min-block-size: 1.5rem;
+    --_ui-default-menu-indicator-size: 0.75rem;
+    min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+    padding: var(--ui-space-1);
+    gap: 0;
 }
-:scope:where([data-v-4659067f]:scope):is([data-ui-editor-toolbar-state~="floating"]) {
-    position: relative;
-    top: auto;
-    width: max-content;
-    max-width: min(calc(100vw - 24px), 100%);
-    min-height: auto;
-    padding: var(--ui-editor-toolbar-floating-padding, 4px);
-    background: color-mix(
-      in srgb,
-      var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
-      transparent
-    );
-    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
-    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+:scope:where([data-v-1ded0073]:scope):is([data-ui-menu-state~="icons"]) {
+    --_ui-default-menu-icon-display: inline-flex;
+}
+:scope:where([data-v-1ded0073]:scope) {
+    --_ui-menu-surface: var(--ui-menu-surface);
+    --_ui-menu-border: var(--ui-menu-border);
+    --_ui-menu-radius: var(--ui-menu-radius);
+    --_ui-menu-shadow: var(--ui-menu-shadow);
+    /* A menu nested in a compact one starts again from its own density. */
+    --_ui-default-menu-item-padding-block: initial;
+    --_ui-default-menu-item-padding-inline: initial;
+    --_ui-default-menu-item-font-size: initial;
+    --_ui-default-menu-item-radius: initial;
+    --_ui-default-menu-item-min-block-size: initial;
+    --_ui-default-menu-indicator-size: initial;
+    --_ui-default-menu-icon-display: none;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+    max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
+    padding: 0;
+    border: 0;
+    outline: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    overflow: visible;
+}
+.surface[data-v-1ded0073] {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    max-inline-size: inherit;
+    padding: var(--ui-space-1);
+    background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+    border: var(--ui-border-width) solid
+      var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
     box-shadow: var(
-      --ui-editor-toolbar-floating-shadow,
-      var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+      --_ui-menu-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
-    backdrop-filter: blur(10px);
+    max-block-size: inherit;
+    overflow: auto;
 }
-@media (max-width: 767px) {
-:scope:where([data-v-4659067f]:scope) {
-      position: fixed;
-      top: auto;
-      bottom: env(safe-area-inset-bottom);
-      left: 0;
-      right: 0;
-      min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-      border-top: var(--ui-border-width) solid
-        var(--ui-editor-toolbar-border, var(--ui-border-divider));
-      border-bottom: none;
-      box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+.surface hr[data-v-1ded0073] {
+    align-self: stretch;
+    block-size: 0;
+    margin: var(--ui-space-1) 0;
+    border: 0;
+    border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-:scope:where([data-v-4659067f]:scope):is([data-ui-editor-toolbar-state~="floating"]) {
-      position: relative;
-      inset: auto;
-      min-height: auto;
-      border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
-      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
-      box-shadow: var(
-        --ui-editor-toolbar-floating-shadow,
-        var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
-      );
+:scope:where([data-v-1ded0073]:scope):is(:not(:scope[data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"])) {
+    display: none;
 }
+:scope:where([data-v-1ded0073]:scope):is([popover]) {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    overflow: visible;
+    max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
+    opacity: 0;
+    transform: translateY(-4px) scale(0.99);
+    transition:
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      transform var(--ui-motion-fast) var(--ui-motion-ease),
+      display var(--ui-motion-fast) allow-discrete,
+      overlay var(--ui-motion-fast) allow-discrete;
 }
-:scope:where([data-v-4659067f]:scope):is(.looma-editor__sticky-toolbar-shell *) {
-    position: relative;
-    min-height: var(--ui-editor-toolbar-min-height, 48px);
-    background: transparent;
-    border: 0;
-    box-shadow: none;
+:scope:where([data-v-1ded0073]:scope):is([popover]:popover-open) {
+    opacity: 1;
+    transform: translateY(0) scale(1);
 }
-:scope:where([data-v-4659067f]:scope):is(.looma-editor__mobile-toolbar-shell
-    [data-ui-editor-toolbar-state~="floating"]) {
-    width: 100%;
-    max-width: none;
-    min-height: 100%;
-    padding: 0;
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    backdrop-filter: none;
+@starting-style {
+:scope:where([data-v-1ded0073]:scope):is([popover]:popover-open) {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
 }
-.looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] .strip[data-v-4659067f] {
-    scroll-snap-type: x mandatory;
 }
-:scope:where([data-v-4659067f]:scope):is([hidden]) {
+:scope:where([data-v-1ded0073]:scope):is([hidden]) {
     display: none;
 }
+@media (prefers-reduced-motion: reduce) {
+:scope:where([data-v-1ded0073]:scope):is([popover]) {
+      transition: none;
+}
+}
 }
 
 /* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-form-field-danger {
+@property --ui-menu-item-font-size {
   syntax: "*";
   inherits: false;
 }
-@property --ui-form-field-help-font-size {
+@property --ui-menu-item-hover-surface {
   syntax: "*";
   inherits: false;
 }
-@property --ui-form-field-help-min-block-size {
+@property --ui-menu-item-min-block-size {
   syntax: "*";
   inherits: false;
 }
-@property --ui-form-field-help-text {
+@property --ui-menu-item-padding-block {
   syntax: "*";
   inherits: false;
 }
-@property --ui-form-field-label-font-size {
+@property --ui-menu-item-padding-inline {
   syntax: "*";
   inherits: false;
 }
-@property --ui-form-field-label-text {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-form-field-min-inline-size {
+@property --ui-menu-item-radius {
   syntax: "*";
   inherits: false;
 }
 
-/* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
-   in Vue), and generates no box of its own, so an empty region adds no gap. */
+/* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
 
-/* A label action, such as a small help button, sits after the label text in a box one line
-   tall, centred on the first line and overflowing it. A button taller than a line of label
-   text then never makes this field's label row taller than its neighbours' in a grid row. */
+/* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
+   as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
 
-/* An error reads in the danger colour, the one the invalid control's border takes. */
+/* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-form-field) {
-:scope:where([data-v-50ee887a]:scope) {
-    /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-form-field-danger: var(--ui-form-field-danger);
-    --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
-    --_ui-form-field-label-text: var(--ui-form-field-label-text);
-    --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
-    --_ui-form-field-help-text: var(--ui-form-field-help-text);
-    --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
+/* Keep the text row at the shared control height where cap trimming is available. */
 
-    display: grid;
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-menu-item) to (.ui-icon) {
+:scope:where([data-v-50b6e1bc]:scope) {
+    display: flex;
+    align-items: center;
     gap: var(--ui-space-2);
-    min-inline-size: var(--ui-form-field-min-inline-size, 0);
-    align-content: start;
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(
+      --ui-menu-item-padding-block,
+      var(--_ui-default-menu-item-padding-block, var(--ui-space-2))
+    )
+      var(
+        --ui-menu-item-padding-inline,
+        var(--_ui-default-menu-item-padding-inline, var(--ui-space-3))
+      );
+    text-align: left;
+    border-radius: var(
+      --ui-menu-item-radius,
+      var(--_ui-default-menu-item-radius, var(--ui-selection-radius))
+    );
     color: var(--ui-text-primary);
+    font-size: var(
+      --ui-menu-item-font-size,
+      var(--_ui-default-menu-item-font-size, var(--ui-font-size-md))
+    );
+    font-weight: var(--ui-font-medium);
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.label[data-v-50ee887a], .help[data-v-50ee887a], .error[data-v-50ee887a] {
-    display: contents;
-}
-.label[data-v-50ee887a] {
-    color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
-    font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
+.icon[data-v-50b6e1bc] {
+    display: var(--_ui-default-menu-icon-display, none);
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
 }
-.label[data-v-50ee887a]:has(> .label-action > *) {
-    display: flex;
-    align-items: start;
-    gap: var(--ui-space-1);
+.icon[data-v-50b6e1bc]:not(:empty) {
+    display: inline-flex;
 }
-.label-action[data-v-50ee887a] {
-    display: flex;
-    align-items: unsafe center;
-    block-size: 1lh;
+.icon svg[data-v-50b6e1bc-s] {
+    inline-size: 100%;
+    block-size: 100%;
 }
-.label-action[data-v-50ee887a]:not(:has(> *)) {
-    display: none;
+:scope:where([data-v-50b6e1bc]:scope):is([data-ui-menu-item-state~="tone=danger"]) {
+    color: var(--ui-danger);
 }
-.help[data-v-50ee887a] {
-    color: var(--_ui-form-field-help-text, var(--ui-text-muted));
-    font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
-    line-height: var(--ui-line-height-md);
+.label[data-v-50b6e1bc] {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    flex: 1;
+    min-inline-size: 0;
 }
-.help > [data-v-50ee887a-s] {
-    min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+.indicator[data-v-50b6e1bc] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
+    block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
+    border: var(--ui-border-width) solid var(--ui-control-border);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-surface);
+    --_ui-default-icon-size: 0.75rem;
 }
-.error[data-v-50ee887a] {
+:scope[data-ui-menu-item-state~="type=action"] .indicator[data-v-50b6e1bc] {
     display: none;
 }
-:scope[data-ui-form-field-state~="invalid"] .error[data-v-50ee887a] {
-    display: contents;
+:scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator[data-v-50b6e1bc] {
+    border-color: var(--ui-accent);
+    background: var(--ui-accent);
 }
-.error[data-v-50ee887a],[role="alert"][data-v-50ee887a-s] {
-    color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+:scope[data-ui-menu-item-state~="type=radio"] .indicator[data-v-50b6e1bc] {
+    border-color: transparent;
+    color: var(--ui-text-secondary);
+}
+.shortcut[data-v-50b6e1bc] {
+    margin-inline-start: auto;
+    color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
 }
-:scope:where([data-v-50ee887a]:scope):is([hidden]) {
+.shortcut[data-v-50b6e1bc]:empty {
     display: none;
 }
+.shortcut kbd[data-v-50b6e1bc-s] {
+    font: inherit;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-icon-button-active-scale {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-active-surface {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-disabled-filter {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-disabled-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-hover-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-hover-surface {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-hover-text {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-icon-button-icon-size {
-  syntax: "*";
-  inherits: false;
+@supports (text-box-trim: trim-both) {
+:scope:where([data-v-50b6e1bc]:scope) {
+      min-block-size: var(
+        --ui-menu-item-min-block-size,
+        var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem))
+      );
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
 }
-@property --ui-icon-button-icon-stroke-width {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-icon-button-outline-surface {
-  syntax: "*";
-  inherits: false;
+:scope:where([data-v-50b6e1bc]:scope):is(:is(:hover, :focus-visible):not([aria-disabled="true"])) {
+    background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
-@property --ui-icon-button-outline-text {
-  syntax: "*";
-  inherits: false;
+:scope:where([data-v-50b6e1bc]:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
 }
-@property --ui-icon-button-radius {
-  syntax: "*";
-  inherits: false;
+:scope:where([data-v-50b6e1bc]:scope):is([aria-disabled="true"]) {
+    background: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
 }
-@property --ui-icon-button-size {
-  syntax: "*";
-  inherits: false;
+:scope[aria-disabled="true"] .indicator[data-v-50b6e1bc] {
+    border-color: var(--ui-disabled-border);
+    background: transparent;
+    color: var(--ui-disabled-text);
 }
-@property --ui-icon-button-solid-hover-surface {
-  syntax: "*";
-  inherits: false;
+:scope[aria-disabled="true"] .indicator[data-v-50b6e1bc]::after {
+    background: var(--ui-disabled-text);
 }
-@property --ui-icon-button-solid-shadow {
-  syntax: "*";
-  inherits: false;
+@media (forced-colors: active) {
+:scope:where([data-v-50b6e1bc]:scope):is(:focus-visible) {
+      outline-color: Highlight;
 }
-@property --ui-icon-button-solid-surface {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-icon-button-solid-text {
-  syntax: "*";
-  inherits: false;
+:scope:where([data-v-50b6e1bc]:scope):is([hidden]) {
+    display: none;
 }
-@property --ui-icon-button-surface {
-  syntax: "*";
-  inherits: false;
 }
 
-/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
-
-/* 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. */
-
-/* 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). */
+/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
+       wrapping into several lines, and a fade at each edge that has more to show says so. */
 
-/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+/* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
+   strip, so a floating toolbar's border and shadow stay whole. */
 
-/* Native toggle state persists after pointer release, including during loading. */
+/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
 
-/* Disabled is a flat neutral control, independent of the active variant's tone. */
+/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-icon-button) to (.ui-spinner) {
-:scope:where([data-v-4a58a364]:scope) {
-    /* Optional inherited action-group values keep text and icon actions under the same light.
-       One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
-       A single ambient lift avoids stacking a face gradient or another inset bevel. */
-    --_ui-action-start: 1px;
-    --_ui-action-edge: var(
-      --ui-action-edge,
-      inset var(--_ui-action-start) 1px 0 light-dark(
-        rgb(255 255 255 / 0.08),
-        rgb(255 255 255 / 0.06)
+@scope (.ui-editor-toolbar) {
+:scope:where([data-v-4659067f]:scope) {
+    position: sticky;
+    top: 0;
+    z-index: var(--ui-editor-toolbar-z-index, 10);
+    display: flex;
+    align-items: center;
+    padding: var(--ui-editor-toolbar-padding-block, 6px)
+      var(--ui-editor-toolbar-padding-inline, 12px);
+    min-height: var(--ui-editor-toolbar-min-height, 48px);
+    background: var(--ui-editor-toolbar-surface, var(--ui-surface));
+    border-bottom: var(--ui-border-width) solid
+      var(--ui-editor-toolbar-border, var(--ui-border-divider));
+}
+.strip[data-v-4659067f] {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--ui-editor-toolbar-gap, 2px);
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+}
+.strip[data-v-4659067f]::-webkit-scrollbar {
+    display: none;
+}
+.strip > [data-v-4659067f-s] {
+    flex: 0 0 auto;
+}
+.strip[data-v-4659067f] {
+    --_ui-scroll-fade-direction: to right;
+    --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+    animation:
+      ui-scroll-fade-start linear,
+      ui-scroll-fade-start-hold linear,
+      ui-scroll-fade-end-hold linear,
+      ui-scroll-fade-end linear;
+    animation-timeline: scroll(self inline);
+    animation-range:
+      0 var(--_ui-scroll-fade-size),
+      var(--_ui-scroll-fade-size) calc(100% + 1px),
+      -1px calc(100% - var(--_ui-scroll-fade-size)),
+      calc(100% - var(--_ui-scroll-fade-size)) 100%;
+}
+:scope:dir(rtl) .strip[data-v-4659067f] {
+    --_ui-scroll-fade-direction: to left;
+}
+.divider[data-v-4659067f-s] {
+    width: 1px;
+    height: 20px;
+    background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
+    flex-shrink: 0;
+    margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+}
+:scope:where([data-v-4659067f]:scope):is([data-ui-editor-toolbar-state~="floating"]) {
+    position: relative;
+    top: auto;
+    width: max-content;
+    max-width: min(calc(100vw - 24px), 100%);
+    min-height: auto;
+    padding: var(--ui-editor-toolbar-floating-padding, 4px);
+    background: color-mix(
+      in srgb,
+      var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
+      transparent
+    );
+    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+    box-shadow: var(
+      --ui-editor-toolbar-floating-shadow,
+      var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+    );
+    backdrop-filter: blur(10px);
+}
+@media (max-width: 767px) {
+:scope:where([data-v-4659067f]:scope) {
+      position: fixed;
+      top: auto;
+      bottom: env(safe-area-inset-bottom);
+      left: 0;
+      right: 0;
+      min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+      border-top: var(--ui-border-width) solid
+        var(--ui-editor-toolbar-border, var(--ui-border-divider));
+      border-bottom: none;
+      box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+}
+:scope:where([data-v-4659067f]:scope):is([data-ui-editor-toolbar-state~="floating"]) {
+      position: relative;
+      inset: auto;
+      min-height: auto;
+      border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+      box-shadow: var(
+        --ui-editor-toolbar-floating-shadow,
+        var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+      );
+}
+}
+:scope:where([data-v-4659067f]:scope):is(.looma-editor__sticky-toolbar-shell *) {
+    position: relative;
+    min-height: var(--ui-editor-toolbar-min-height, 48px);
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+:scope:where([data-v-4659067f]:scope):is(.looma-editor__mobile-toolbar-shell
+    [data-ui-editor-toolbar-state~="floating"]) {
+    width: 100%;
+    max-width: none;
+    min-height: 100%;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    backdrop-filter: none;
+}
+.looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] .strip[data-v-4659067f] {
+    scroll-snap-type: x mandatory;
+}
+:scope:where([data-v-4659067f]:scope):is([hidden]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-form-field-danger {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-help-font-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-help-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-help-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-label-font-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-label-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-min-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+   in Vue), and generates no box of its own, so an empty region adds no gap. */
+
+/* A label action, such as a small help button, sits after the label text in a box one line
+   tall, centred on the first line and overflowing it. A button taller than a line of label
+   text then never makes this field's label row taller than its neighbours' in a grid row. */
+
+/* An error reads in the danger colour, the one the invalid control's border takes. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-form-field) {
+:scope:where([data-v-50ee887a]:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-form-field-danger: var(--ui-form-field-danger);
+    --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+    --_ui-form-field-label-text: var(--ui-form-field-label-text);
+    --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+    --_ui-form-field-help-text: var(--ui-form-field-help-text);
+    --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
+
+    display: grid;
+    gap: var(--ui-space-2);
+    min-inline-size: var(--ui-form-field-min-inline-size, 0);
+    align-content: start;
+    color: var(--ui-text-primary);
+}
+.label[data-v-50ee887a], .help[data-v-50ee887a], .error[data-v-50ee887a] {
+    display: contents;
+}
+.label[data-v-50ee887a] {
+    color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+    font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
+}
+.label[data-v-50ee887a]:has(> .label-action > *) {
+    display: flex;
+    align-items: start;
+    gap: var(--ui-space-1);
+}
+.label-action[data-v-50ee887a] {
+    display: flex;
+    align-items: unsafe center;
+    block-size: 1lh;
+}
+.label-action[data-v-50ee887a]:not(:has(> *)) {
+    display: none;
+}
+.help[data-v-50ee887a] {
+    color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+    font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
+    line-height: var(--ui-line-height-md);
+}
+.help > [data-v-50ee887a-s] {
+    min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+}
+.error[data-v-50ee887a] {
+    display: none;
+}
+:scope[data-ui-form-field-state~="invalid"] .error[data-v-50ee887a] {
+    display: contents;
+}
+.error[data-v-50ee887a],[role="alert"][data-v-50ee887a-s] {
+    color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+    font-size: var(--ui-font-size-sm);
+}
+:scope:where([data-v-50ee887a]:scope):is([hidden]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-icon-button-active-scale {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-active-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-disabled-filter {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-disabled-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-hover-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-hover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-hover-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-icon-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-icon-stroke-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-outline-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-outline-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-hover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-surface {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+
+/* 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. */
+
+/* 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). */
+
+/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+
+/* Native toggle state persists after pointer release, including during loading. */
+
+/* Disabled is a flat neutral control, independent of the active variant's tone. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-icon-button) to (.ui-spinner) {
+:scope:where([data-v-4a58a364]:scope) {
+    /* Optional inherited action-group values keep text and icon actions under the same light.
+       One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+       A single ambient lift avoids stacking a face gradient or another inset bevel. */
+    --_ui-action-start: 1px;
+    --_ui-action-edge: var(
+      --ui-action-edge,
+      inset var(--_ui-action-start) 1px 0 light-dark(
+        rgb(255 255 255 / 0.08),
+        rgb(255 255 255 / 0.06)
       ),
       inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(
         rgb(0 0 0 / 0.08),
@@ -5923,1124 +6230,817 @@ ul[data-v-7d408909] {
 svg[data-v-3d55b8dc-s] {
     inline-size: var(--ui-icon-size-lg);
     block-size: var(--ui-icon-size-lg);
-    flex-shrink: 0;
-}
-@media (min-width: 768px) {
-:scope:where([data-v-3d55b8dc]:scope):is([data-ui-floating-action-button-state~="mobileOnly"]) {
-      display: none;
-}
-}
-:scope:where([data-v-3d55b8dc]:scope):is([hidden]) {
-    display: none;
-}
-}
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-grid-gap {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-grid-min {
-  syntax: "*";
-  inherits: false;
-}
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-grid) {
-:scope:where([data-v-30a8e139]:scope) {
-    --_grid-gap: var(--ui-space-4);
-    --_grid-min: 12rem;
-    display: grid;
-    gap: var(--ui-grid-gap, var(--_grid-gap));
-    grid-template-columns:
-      repeat(
-        auto-fit,
-        minmax(
-          min(
-            max(
-              var(--ui-grid-min, var(--_grid-min)),
-              calc(
-                (
-                  100% -
-                    (
-                    max(1, var(--_grid-column-cap, 9999)) - 1
-                  ) *
-                    var(--ui-grid-gap, var(--_grid-gap))
-                ) /
-                  max(1, var(--_grid-column-cap, 9999))
-              )
-            ),
-            100%
-          ),
-          1fr
-        )
-      );
-    min-inline-size: 0;
-    max-inline-size: 100%;
-    margin: 0;
-}
-:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=xs"]) {
-    --_grid-gap: var(--ui-space-2);
-}
-:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=s"]) {
-    --_grid-gap: var(--ui-space-3);
-}
-:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=m"]) {
-    --_grid-gap: var(--ui-space-4);
-}
-:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=l"]) {
-    --_grid-gap: var(--ui-space-5);
-}
-:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=xl"]) {
-    --_grid-gap: var(--ui-space-6);
-}
-:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="min=md"]) {
-    --_grid-min: 16rem;
-}
-:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="min=lg"]) {
-    --_grid-min: 20rem;
-}
-:scope:where([data-v-30a8e139]:scope):is([hidden]) {
-    display: none;
-}
-}
-
-@scope (.ui-image) {
-:scope:where([data-v-73881051]:scope) {
-    display: flex;
-    justify-content: flex-start;
-    box-sizing: border-box;
-    max-inline-size: 100%;
-    min-inline-size: 0;
-    margin: 0;
-    padding: var(--ui-space-3) 0;
-}
-:scope:where([data-v-73881051]:scope):is([data-ui-image-state~="placement=center"]) {
-    justify-content: center;
-}
-:scope:where([data-v-73881051]:scope):is([data-ui-image-state~="placement=wrap-left"]) {
-    float: left;
-    padding-inline-end: var(--ui-space-4);
-}
-:scope:where([data-v-73881051]:scope):is([data-ui-image-state~="placement=wrap-right"]) {
-    float: right;
-    padding-inline-start: var(--ui-space-4);
-}
-:scope:where([data-v-73881051]:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
-    inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
-}
-:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
-    .frame[data-v-73881051] {
-    inline-size: 100%;
-}
-:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
-    .frame
-    img[data-v-73881051],
-  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
-    .frame
-    img[data-v-73881051-s] {
-    inline-size: 100%;
-}
-.frame[data-v-73881051] {
-    position: relative;
-    flex: 0 1 auto;
-    inline-size: var(--_ui-image-width, fit-content);
-    max-inline-size: 100%;
-    min-inline-size: 0;
-    align-self: flex-start;
-    border-radius: var(--ui-radius-md);
-}
-.frame img[data-v-73881051], .frame img[data-v-73881051-s] {
-    display: block;
-    max-inline-size: 100%;
-    block-size: auto;
-    margin: 0;
-    border-radius: inherit;
-}
-:scope[data-resizing] .frame img[data-v-73881051], :scope[data-resizing] .frame img[data-v-73881051-s] {
-    inline-size: 100%;
-}
-:scope[data-ui-image-state~="selected"] .frame[data-v-73881051] {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: var(--ui-border-width);
-}
-.handle[data-v-73881051] {
-    position: absolute;
-    z-index: 1;
-    inline-size: 24px;
-    block-size: 24px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    touch-action: none;
-}
-.handle[data-v-73881051]::after {
-    content: "";
-    position: absolute;
-    inset: 8px;
-    background: var(--ui-surface);
-    border: var(--ui-border-width) solid var(--ui-focus-ring);
-    border-radius: var(--ui-radius-sm);
-}
-.handle[data-v-73881051]:focus-visible {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    border-radius: var(--ui-radius-sm);
-}
-.handle[data-corner="top-left"][data-v-73881051] {
-    top: -12px;
-    left: -12px;
-    cursor: nwse-resize;
-}
-.handle[data-corner="top-right"][data-v-73881051] {
-    top: -12px;
-    right: -12px;
-    cursor: nesw-resize;
-}
-.handle[data-corner="bottom-left"][data-v-73881051] {
-    bottom: -12px;
-    left: -12px;
-    cursor: nesw-resize;
-}
-.handle[data-corner="bottom-right"][data-v-73881051] {
-    bottom: -12px;
-    right: -12px;
-    cursor: nwse-resize;
-}
-.handles[hidden][data-v-73881051], :scope:where([data-v-73881051]:scope):is([hidden]) {
-    display: none;
-}
-@media (max-width: 767px) {
-:scope:where([data-v-73881051]:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
-      float: none;
-      inline-size: 100%;
-      padding-inline: 0;
-}
-:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
-      .handles[data-v-73881051] {
-      display: none;
-}
-}
-@media (pointer: coarse) {
-.handle[data-v-73881051] {
-      inline-size: 44px;
-      block-size: 44px;
-}
-.handle[data-v-73881051]::after {
-      inset: 18px;
-}
-.handle[data-corner="top-left"][data-v-73881051] {
-      top: -22px;
-      left: -22px;
-}
-.handle[data-corner="top-right"][data-v-73881051] {
-      top: -22px;
-      right: -22px;
-}
-.handle[data-corner="bottom-left"][data-v-73881051] {
-      bottom: -22px;
-      left: -22px;
-}
-.handle[data-corner="bottom-right"][data-v-73881051] {
-      bottom: -22px;
-      right: -22px;
-}
+    flex-shrink: 0;
 }
-@media (forced-colors: active) {
-:scope[data-ui-image-state~="selected"] .frame[data-v-73881051], .handle[data-v-73881051]:focus-visible {
-      outline-color: Highlight;
+@media (min-width: 768px) {
+:scope:where([data-v-3d55b8dc]:scope):is([data-ui-floating-action-button-state~="mobileOnly"]) {
+      display: none;
 }
-.handle[data-v-73881051]::after {
-      border-color: Highlight;
-      background: Canvas;
 }
+:scope:where([data-v-3d55b8dc]:scope):is([hidden]) {
+    display: none;
 }
 }
 
-@property --ui-input-group-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-group-invalid-border {
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-grid-gap {
   syntax: "*";
   inherits: false;
 }
-@property --ui-input-group-invalid-focus-shadow {
+@property --ui-grid-min {
   syntax: "*";
   inherits: false;
 }
-/* An input with fixed text before or after it, such as a domain after a site's name
-   ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
-   focus ring around the input and its affixes together; the input inside drops its own through
-   its custom properties, so it is still the one ui-input, with its form behaviour intact. The
-   affixes are plain text beside the input, so name the input with a label that says what the
-   whole value is. The action slot takes one button at the end, inside the border, for the one
-   thing the field is for ("Continue" after a site's address), so it reads as the field's action
-   and not the form's. */
-
-/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
-
-/* The ring shows when the field's input would show its own: when it is focus-visible, which a
-   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-
-/* Forced colors drop box shadows, so the focus ring becomes an outline. */
-
-/* Fixed text is part of the value, but should not look editable. */
-
-/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
-   small button sits inside it with the difference split evenly, and the field keeps its height. */
-
-/* Multiline text owns the first row; its action remains inside the same frame below it. */
-
-/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
-   so a translated label or pending indicator cannot cover what the person types. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-input-group) {
-:scope:where([data-v-8b90cc23]:scope) {
-    /* The group's own border and height stand for the input's, so the group is a lone Input's height.
-       Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
-    --_ui-default-input-border-width: 0;
-    --_ui-default-input-min-block-size: 0;
-    --_ui-default-input-border: transparent;
-    --_ui-default-input-border-hover: transparent;
-    --_ui-default-input-focus-border: transparent;
-    --_ui-default-input-invalid-border: transparent;
-    --_ui-default-input-invalid-focus-shadow: none;
-    --_ui-default-input-shadow: none;
-    --_ui-default-input-focus-shadow: none;
-    --_ui-default-input-focus-outline: none;
-    --_ui-default-input-radius: 0;
-    --_ui-default-input-surface: transparent;
-    --_ui-default-textarea-border-width: 0;
-    --_ui-default-textarea-border: transparent;
-    --_ui-default-textarea-border-hover: transparent;
-    --_ui-default-textarea-focus-border: transparent;
-    --_ui-default-textarea-invalid-border: transparent;
-    --_ui-default-textarea-invalid-focus-shadow: none;
-    --_ui-default-textarea-shadow: none;
-    --_ui-default-textarea-focus-shadow: none;
-    --_ui-default-textarea-focus-outline: none;
-    --_ui-default-textarea-radius: 0;
-    --_ui-default-textarea-surface: transparent;
-
-    display: flex;
-    align-items: stretch;
-    box-sizing: border-box;
-    inline-size: 100%;
+@scope (.ui-grid) {
+:scope:where([data-v-30a8e139]:scope) {
+    --_grid-gap: var(--ui-space-4);
+    --_grid-min: 12rem;
+    display: grid;
+    gap: var(--ui-grid-gap, var(--_grid-gap));
+    grid-template-columns:
+      repeat(
+        auto-fit,
+        minmax(
+          min(
+            max(
+              var(--ui-grid-min, var(--_grid-min)),
+              calc(
+                (
+                  100% -
+                    (
+                    max(1, var(--_grid-column-cap, 9999)) - 1
+                  ) *
+                    var(--ui-grid-gap, var(--_grid-gap))
+                ) /
+                  max(1, var(--_grid-column-cap, 9999))
+              )
+            ),
+            100%
+          ),
+          1fr
+        )
+      );
     min-inline-size: 0;
-    min-block-size: var(--ui-control-size-md);
-    /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
-    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-    border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
-    background: var(--ui-control-surface, var(--ui-surface-elevated));
-    box-shadow: var(--ui-control-inset);
-    overflow: hidden;
-    /* A press anywhere in the frame focuses the input. */
-    cursor: text;
-    transition:
-      border-color var(--ui-motion-fast) var(--ui-motion-ease),
-      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    max-inline-size: 100%;
+    margin: 0;
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="variant=subtle"]) {
-    border-color: var(--ui-border);
-    background: var(--ui-surface-muted);
-    box-shadow: none;
+:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=xs"]) {
+    --_grid-gap: var(--ui-space-2);
 }
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
-    min-block-size: var(--ui-control-size-sm);
+:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=s"]) {
+    --_grid-gap: var(--ui-space-3);
 }
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=lg"])) {
-    min-block-size: var(--ui-control-size-lg);
+:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=m"]) {
+    --_grid-gap: var(--ui-space-4);
 }
-@media (pointer: coarse) {
-:scope:where([data-v-8b90cc23]:scope) {
-      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=l"]) {
+    --_grid-gap: var(--ui-space-5);
 }
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
-      min-block-size: var(--ui-control-min-block-size);
+:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="gap=xl"]) {
+    --_grid-gap: var(--ui-space-6);
 }
+:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="min=md"]) {
+    --_grid-min: 16rem;
 }
-:scope:where([data-v-8b90cc23]:scope):is(:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid])))) {
-    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+:scope:where([data-v-30a8e139]:scope):is([data-ui-grid-state~="min=lg"]) {
+    --_grid-min: 20rem;
 }
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field :is(input, textarea):focus-visible)) {
-    border-color: var(--ui-control-focus, var(--ui-accent-solid));
-    box-shadow:
-      var(--ui-control-inset),
-      var(--ui-control-focus-halo-shadow);
+:scope:where([data-v-30a8e139]:scope):is([hidden]) {
+    display: none;
 }
-:scope:where([data-v-8b90cc23]:scope):is(:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
-    border-color: var(
-      --ui-input-group-invalid-border,
-      var(--ui-field-danger, var(--ui-danger-solid))
-    );
 }
-:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible)) {
-    box-shadow: var(
-      --ui-input-group-invalid-focus-shadow,
-      var(--ui-control-inset),
-      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-        in srgb,
-        var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-        transparent
-      )
-    );
+
+@scope (.ui-image) {
+:scope:where([data-v-73881051]:scope) {
+    display: flex;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--ui-space-3) 0;
 }
-@media (forced-colors: active) {
-:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):focus-visible)) {
-      outline: var(--ui-focus-width) solid Highlight;
-      outline-offset: var(--ui-border-width);
+:scope:where([data-v-73881051]:scope):is([data-ui-image-state~="placement=center"]) {
+    justify-content: center;
 }
+:scope:where([data-v-73881051]:scope):is([data-ui-image-state~="placement=wrap-left"]) {
+    float: left;
+    padding-inline-end: var(--ui-space-4);
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="disabled"]),
-  :scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):disabled)) {
-    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-    box-shadow: none;
-    cursor: not-allowed;
+:scope:where([data-v-73881051]:scope):is([data-ui-image-state~="placement=wrap-right"]) {
+    float: right;
+    padding-inline-start: var(--ui-space-4);
 }
-.field[data-v-8b90cc23] {
-    display: flex;
-    flex: 1;
-    min-inline-size: 0;
+:scope:where([data-v-73881051]:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
+    inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
 }
-.affix[data-v-8b90cc23] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    padding-inline: var(--ui-space-2);
-    color: var(--ui-text-muted);
-    font-family: var(--ui-font-family-mono);
-    font-size: var(--ui-font-size-sm);
-    white-space: nowrap;
+:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    .frame[data-v-73881051] {
+    inline-size: 100%;
 }
-.affix[data-v-8b90cc23]:has([slot="prefix"]), .affix[data-v-8b90cc23]:has([slot="suffix"]) {
-    background: var(--ui-surface-muted);
+:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    .frame
+    img[data-v-73881051],
+  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    .frame
+    img[data-v-73881051-s] {
+    inline-size: 100%;
 }
-.affix[data-v-8b90cc23]:has([slot="prefix"]) {
-    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
+.frame[data-v-73881051] {
+    position: relative;
+    flex: 0 1 auto;
+    inline-size: var(--_ui-image-width, fit-content);
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    align-self: flex-start;
+    border-radius: var(--ui-radius-md);
 }
-.affix[data-v-8b90cc23]:has([slot="suffix"]) {
-    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
+.frame img[data-v-73881051], .frame img[data-v-73881051-s] {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    margin: 0;
+    border-radius: inherit;
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="prefixKind=icon"]) {
-    --_ui-default-input-padding-inline-start: var(--ui-space-2);
+:scope[data-resizing] .frame img[data-v-73881051], :scope[data-resizing] .frame img[data-v-73881051-s] {
+    inline-size: 100%;
 }
-:scope[data-ui-input-group-state~="prefixKind=icon"] .affix[data-v-8b90cc23]:first-child {
-    padding-inline-end: 0;
-    border-inline-end: 0;
+:scope[data-ui-image-state~="selected"] .frame[data-v-73881051] {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-border-width);
+}
+.handle[data-v-73881051] {
+    position: absolute;
+    z-index: 1;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    border: 0;
     background: transparent;
+    touch-action: none;
 }
-.action[data-v-8b90cc23] {
-    display: flex;
-    flex: none;
-    align-items: center;
-    padding-inline: var(--ui-space-1);
-}
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"]) {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+.handle[data-v-73881051]::after {
+    content: "";
+    position: absolute;
+    inset: 8px;
+    background: var(--ui-surface);
+    border: var(--ui-border-width) solid var(--ui-focus-ring);
+    border-radius: var(--ui-radius-sm);
 }
-:scope[data-ui-input-group-state~="multiline"] .field[data-v-8b90cc23] {
-    grid-column: 2;
+.handle[data-v-73881051]:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    border-radius: var(--ui-radius-sm);
 }
-:scope[data-ui-input-group-state~="multiline"] .action[data-v-8b90cc23] {
-    grid-column: 1 / -1;
-    justify-content: end;
-    padding: var(--ui-space-2);
-    padding-block-start: 0;
+.handle[data-corner="top-left"][data-v-73881051] {
+    top: -12px;
+    left: -12px;
+    cursor: nwse-resize;
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]) {
-    --_ui-default-textarea-padding-inline-end: calc(
-      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
-    );
+.handle[data-corner="top-right"][data-v-73881051] {
+    top: -12px;
+    right: -12px;
+    cursor: nesw-resize;
 }
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .field[data-v-8b90cc23] {
-    grid-row: 1;
+.handle[data-corner="bottom-left"][data-v-73881051] {
+    bottom: -12px;
+    left: -12px;
+    cursor: nesw-resize;
 }
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .action[data-v-8b90cc23] {
-    grid-column: 2;
-    grid-row: 1;
-    align-self: start;
-    justify-self: end;
-    padding: var(--ui-space-2);
+.handle[data-corner="bottom-right"][data-v-73881051] {
+    bottom: -12px;
+    right: -12px;
+    cursor: nwse-resize;
 }
-.affix[data-v-8b90cc23]:empty, .action[data-v-8b90cc23]:empty {
+.handles[hidden][data-v-73881051], :scope:where([data-v-73881051]:scope):is([hidden]) {
     display: none;
 }
-:scope:where([data-v-8b90cc23]:scope):is([hidden]) {
-    display: none;
+@media (max-width: 767px) {
+:scope:where([data-v-73881051]:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
+      float: none;
+      inline-size: 100%;
+      padding-inline: 0;
 }
+:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+      .handles[data-v-73881051] {
+      display: none;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-list-gap {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-list-min-item-width {
-  syntax: "*";
-  inherits: false;
+@media (pointer: coarse) {
+.handle[data-v-73881051] {
+      inline-size: 44px;
+      block-size: 44px;
 }
-
-/* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
-   explicit list role keeps the list announced as one: some browsers drop it from a list with no
-   markers. */
-
-/* Compact passes its size to the items through private properties, which cross into each item. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-list) {
-:scope:where([data-v-4ed3243c]:scope) {
-    --_list-gap: var(--ui-list-gap, var(--ui-space-1));
-    --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
-    display: flex;
-    flex-direction: column;
-    inline-size: 100%;
-    gap: var(--_list-gap);
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    list-style: none;
+.handle[data-v-73881051]::after {
+      inset: 18px;
 }
-:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="as=ol"]),
-  :scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="markers=disc"]) {
-    padding-inline-start: var(--ui-space-5);
+.handle[data-corner="top-left"][data-v-73881051] {
+      top: -22px;
+      left: -22px;
 }
-:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="as=ol"]) {
-    list-style: decimal;
+.handle[data-corner="top-right"][data-v-73881051] {
+      top: -22px;
+      right: -22px;
 }
-:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="markers=disc"]) {
-    list-style: disc;
+.handle[data-corner="bottom-left"][data-v-73881051] {
+      bottom: -22px;
+      left: -22px;
 }
-:scope > li[data-v-4ed3243c-s] {
-    box-sizing: border-box;
-    min-inline-size: 0;
-    padding: var(--_ui-list-native-padding-block, var(--ui-space-2))
-      var(--_ui-list-native-padding-inline, var(--ui-space-3));
-    border-radius: var(--ui-radius-md);
-    color: var(--ui-text-primary);
-    list-style: inherit;
+.handle[data-corner="bottom-right"][data-v-73881051] {
+      bottom: -22px;
+      right: -22px;
 }
-:scope > li.card[data-v-4ed3243c-s] {
-    padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
-      var(--_ui-list-native-padding-inline, var(--ui-space-4));
-    border: var(--ui-border-width) solid var(--ui-border-strong);
-    border-radius: var(--ui-radius-lg);
-    background: var(--ui-surface-raised);
-    list-style: none;
 }
-:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="density=compact"]) {
-    --_list-gap: var(--ui-list-gap, var(--ui-space-2));
-    --_ui-list-item-min-size: 0;
-    --_ui-list-item-padding-block: 0;
-    --_ui-list-item-padding-inline: 0;
-    --_ui-list-item-title-weight: var(--ui-font-normal);
-    --_ui-list-native-padding-block: 0;
-    --_ui-list-native-padding-inline: 0;
+@media (forced-colors: active) {
+:scope[data-ui-image-state~="selected"] .frame[data-v-73881051], .handle[data-v-73881051]:focus-visible {
+      outline-color: Highlight;
 }
-:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="layout=grid"]) {
-    --_list-gap: var(--ui-list-gap, var(--ui-space-3));
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
+.handle[data-v-73881051]::after {
+      border-color: Highlight;
+      background: Canvas;
 }
-:scope:where([data-v-4ed3243c]:scope):is([hidden]) {
-    display: none;
 }
 }
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-list-item-gap {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-list-item-icon-size {
+@property --ui-input-group-radius {
   syntax: "*";
   inherits: false;
 }
-@property --ui-list-item-padding-block {
+@property --ui-input-group-invalid-border {
   syntax: "*";
   inherits: false;
 }
-@property --ui-list-item-padding-inline {
+@property --ui-input-group-invalid-focus-shadow {
   syntax: "*";
   inherits: false;
 }
+/* An input with fixed text before or after it, such as a domain after a site's name
+   ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+   focus ring around the input and its affixes together; the input inside drops its own through
+   its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+   affixes are plain text beside the input, so name the input with a label that says what the
+   whole value is. The action slot takes one button at the end, inside the border, for the one
+   thing the field is for ("Continue" after a site's address), so it reads as the field's action
+   and not the form's. */
 
-/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
-   slot), one line about it (description), and what it offers (trailing, such as a button or a
-   badge). The title and description are one line each and end in an ellipsis, so every item in a
-   list has the same height.
+/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
 
-   A link in the title is the whole item: its hit area stretches over the item, so the icon and the
-   padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
-   a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
-   stay their own. */
+/* The ring shows when the field's input would show its own: when it is focus-visible, which a
+   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
 
-/* Framed cards already have their own edge; the stronger focus ring stays separate. */
+/* Forced colors drop box shadows, so the focus ring becomes an outline. */
 
-/* An explicitly independent leading control sits above the stretched row link. */
+/* Fixed text is part of the value, but should not look editable. */
 
-/* Trailing controls take their own clicks, above the title link's stretched hit area. */
+/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
+   small button sits inside it with the difference split evenly, and the field keeps its height. */
 
-/* Keep identity and disclosure marks beside the first line, even with a long description. */
+/* Multiline text owns the first row; its action remains inside the same frame below it. */
 
-/* An unused region takes no space. */
+/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+   so a translated label or pending indicator cannot cover what the person types. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-list-item) {
-:scope:where([data-v-8c851f73]:scope) {
-    /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
+@scope (.ui-input-group) {
+:scope:where([data-v-8b90cc23]:scope) {
+    /* The group's own border and height stand for the input's, so the group is a lone Input's height.
+       Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
+    --_ui-default-input-border-width: 0;
+    --_ui-default-input-min-block-size: 0;
+    --_ui-default-input-border: transparent;
+    --_ui-default-input-border-hover: transparent;
+    --_ui-default-input-focus-border: transparent;
+    --_ui-default-input-invalid-border: transparent;
+    --_ui-default-input-invalid-focus-shadow: none;
+    --_ui-default-input-shadow: none;
+    --_ui-default-input-focus-shadow: none;
+    --_ui-default-input-focus-outline: none;
+    --_ui-default-input-radius: 0;
+    --_ui-default-input-surface: transparent;
+    --_ui-default-textarea-border-width: 0;
+    --_ui-default-textarea-border: transparent;
+    --_ui-default-textarea-border-hover: transparent;
+    --_ui-default-textarea-focus-border: transparent;
+    --_ui-default-textarea-invalid-border: transparent;
+    --_ui-default-textarea-invalid-focus-shadow: none;
+    --_ui-default-textarea-shadow: none;
+    --_ui-default-textarea-focus-shadow: none;
+    --_ui-default-textarea-focus-outline: none;
+    --_ui-default-textarea-radius: 0;
+    --_ui-default-textarea-surface: transparent;
 
-    position: relative;
-    box-sizing: border-box;
     display: flex;
-    align-items: center;
-    gap: var(--ui-list-item-gap, var(--ui-space-3));
+    align-items: stretch;
+    box-sizing: border-box;
+    inline-size: 100%;
     min-inline-size: 0;
-    min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
-    padding-block: var(
-      --ui-list-item-padding-block,
-      var(--_ui-list-item-padding-block, var(--ui-space-2))
-    );
-    padding-inline: var(
-      --ui-list-item-padding-inline,
-      var(--_ui-list-item-padding-inline, var(--ui-space-3))
-    );
-    border-radius: var(--ui-selection-radius);
-    color: var(--ui-text-primary);
+    min-block-size: var(--ui-control-size-md);
+    /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+    border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-control-surface, var(--ui-surface-elevated));
+    box-shadow: var(--ui-control-inset);
+    overflow: hidden;
+    /* A press anywhere in the frame focuses the input. */
+    cursor: text;
     transition:
-      background-color var(--ui-motion-fast) var(--ui-motion-ease),
-      border-color var(--ui-motion-fast) var(--ui-motion-ease);
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="variant=card"]) {
-    padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
-    padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
-    border: var(--ui-border-width) solid var(--ui-border-strong);
-    border-radius: var(--ui-radius-lg);
-    background: var(--ui-surface-raised);
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="variant=subtle"]) {
+    border-color: var(--ui-border);
+    background: var(--ui-surface-muted);
+    box-shadow: none;
 }
-:scope:where([data-v-8c851f73]:scope):is(:where(:has(.title a[href])):hover),
-  :scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="highlighted"]),
-  :scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="current"]) {
-    background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
-    box-shadow: inset 0 0 0 var(--ui-border-width)
-      var(--_ui-selection-context-border, var(--ui-selection-border));
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+    min-block-size: var(--ui-control-size-sm);
 }
-:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="variant=card"]:where(:has(.title
-    a[href])):hover) {
-    border-color: var(--ui-border-strong);
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=lg"])) {
+    min-block-size: var(--ui-control-size-lg);
 }
-:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="current"]) {
-    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+@media (pointer: coarse) {
+:scope:where([data-v-8b90cc23]:scope) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
 }
-:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="variant=card"]) {
-    box-shadow: none;
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+      min-block-size: var(--ui-control-min-block-size);
 }
-:scope:where([data-v-8c851f73]:scope):is(:has(.title a[href]:focus-visible)) {
-    box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
-.leading[data-v-8c851f73], .trailing[data-v-8c851f73] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    gap: var(--ui-space-2);
+:scope:where([data-v-8b90cc23]:scope):is(:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid])))) {
+    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-.leading[data-v-8c851f73] {
-    color: var(--ui-text-muted);
-    font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field :is(input, textarea):focus-visible)) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
 }
-:scope[data-ui-list-item-state~="current"] .leading[data-v-8c851f73] {
-    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+:scope:where([data-v-8b90cc23]:scope):is(:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
+    border-color: var(
+      --ui-input-group-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
 }
-:scope[data-ui-list-item-state~="leadingInteractive"] .leading[data-v-8c851f73] {
-    position: relative;
-    z-index: 1;
+:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible)) {
+    box-shadow: var(
+      --ui-input-group-invalid-focus-shadow,
+      var(--ui-control-inset),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+        transparent
+      )
+    );
 }
-.trailing[data-v-8c851f73] {
-    position: relative;
-    z-index: 1;
-    color: var(--ui-text-muted);
-    font-size: var(--ui-font-size-sm);
+@media (forced-colors: active) {
+:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):focus-visible)) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: var(--ui-border-width);
 }
-.content[data-v-8c851f73] {
+}
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="disabled"]),
+  :scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):disabled)) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    box-shadow: none;
+    cursor: not-allowed;
+}
+.field[data-v-8b90cc23] {
     display: flex;
     flex: 1;
-    flex-direction: column;
-    gap: var(--ui-space-0-5, 2px);
     min-inline-size: 0;
 }
-.title[data-v-8c851f73], .description[data-v-8c851f73] {
-    display: block;
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.affix[data-v-8b90cc23] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    padding-inline: var(--ui-space-2);
+    color: var(--ui-text-muted);
+    font-family: var(--ui-font-family-mono);
+    font-size: var(--ui-font-size-sm);
     white-space: nowrap;
 }
-:scope[data-ui-list-item-state~="wrap"] .title[data-v-8c851f73],
-  :scope[data-ui-list-item-state~="wrap"] .description[data-v-8c851f73] {
-    white-space: normal;
-    overflow-wrap: anywhere;
+.affix[data-v-8b90cc23]:has([slot="prefix"]), .affix[data-v-8b90cc23]:has([slot="suffix"]) {
+    background: var(--ui-surface-muted);
 }
-.title[data-v-8c851f73] {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
-    line-height: var(--ui-line-height-tight);
+.affix[data-v-8b90cc23]:has([slot="prefix"]) {
+    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
-:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="align=title"]) {
-    align-items: flex-start;
+.affix[data-v-8b90cc23]:has([slot="suffix"]) {
+    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-:scope[data-ui-list-item-state~="align=title"] .leading[data-v-8c851f73],
-  :scope[data-ui-list-item-state~="align=title"] .trailing[data-v-8c851f73] {
-    min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="prefixKind=icon"]) {
+    --_ui-default-input-padding-inline-start: var(--ui-space-2);
 }
-.description[data-v-8c851f73] {
-    color: var(--ui-text-muted);
-    font-size: var(--ui-font-size-sm);
-    line-height: var(--ui-line-height-tight);
+:scope[data-ui-input-group-state~="prefixKind=icon"] .affix[data-v-8b90cc23]:first-child {
+    padding-inline-end: 0;
+    border-inline-end: 0;
+    background: transparent;
 }
-.title > a[data-v-8c851f73-s] {
-    color: inherit;
-    text-decoration: none;
+.action[data-v-8b90cc23] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding-inline: var(--ui-space-1);
 }
-.title > a[data-v-8c851f73-s]:focus-visible {
-    outline: none;
-    box-shadow: none;
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
 }
-.title > a[href][data-v-8c851f73-s]::after {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    content: "";
+:scope[data-ui-input-group-state~="multiline"] .field[data-v-8b90cc23] {
+    grid-column: 2;
 }
-.leading[data-v-8c851f73]:empty, .description[data-v-8c851f73]:empty, .trailing[data-v-8c851f73]:empty {
-    display: none;
+:scope[data-ui-input-group-state~="multiline"] .action[data-v-8b90cc23] {
+    grid-column: 1 / -1;
+    justify-content: end;
+    padding: var(--ui-space-2);
+    padding-block-start: 0;
 }
-@media (forced-colors: active) {
-:scope:where([data-v-8c851f73]:scope):is(:has(a:focus-visible)) {
-      outline: var(--ui-focus-width) solid Highlight;
-      outline-offset: calc(-1 * var(--ui-focus-width));
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]) {
+    --_ui-default-textarea-padding-inline-end: calc(
+      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
+    );
 }
-:is(:scope[data-ui-list-item-state~="current"][data-v-8c851f73], :scope[data-ui-list-item-state~="highlighted"][data-v-8c851f73]):not(:has(a:focus-visible)) {
-      outline: var(--ui-border-width) solid Highlight;
-      outline-offset: calc(-1 * var(--ui-border-width));
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .field[data-v-8b90cc23] {
+    grid-row: 1;
 }
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .action[data-v-8b90cc23] {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    justify-self: end;
+    padding: var(--ui-space-2);
 }
-:scope:where([data-v-8c851f73]:scope):is([hidden]) {
+.affix[data-v-8b90cc23]:empty, .action[data-v-8b90cc23]:empty {
     display: none;
 }
+:scope:where([data-v-8b90cc23]:scope):is([hidden]) {
+    display: none;
 }
-
-@property --ui-listbox-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-listbox-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-listbox-surface {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-listbox-focus-shadow {
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-list-gap {
   syntax: "*";
   inherits: false;
 }
-@property --ui-listbox-invalid-border {
+@property --ui-list-min-item-width {
   syntax: "*";
   inherits: false;
 }
 
-/* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
-@scope (.ui-listbox) to (.ui-scroll-area) {
-:scope:where([data-v-93820102]:scope) {
-    position: relative;
-    box-sizing: border-box;
-    display: block;
+/* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
+   explicit list role keeps the list announced as one: some browsers drop it from a list with no
+   markers. */
+
+/* Compact passes its size to the items through private properties, which cross into each item. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-list) {
+:scope:where([data-v-4ed3243c]:scope) {
+    --_list-gap: var(--ui-list-gap, var(--ui-space-1));
+    --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
+    display: flex;
+    flex-direction: column;
     inline-size: 100%;
+    gap: var(--_list-gap);
     min-inline-size: 0;
     margin: 0;
-    padding: var(--ui-space-1);
-    border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
-    border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
-    background: var(--ui-listbox-surface, var(--ui-control-surface));
-    color: var(--ui-text-primary);
-    font: inherit;
-    line-height: var(--ui-line-height-md);
-    box-shadow: var(--ui-control-inset);
-    outline: none;
+    padding: 0;
+    list-style: none;
 }
-.choices[data-v-93820102] {
-    display: flex;
-    flex-direction: column;
-    max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="as=ol"]),
+  :scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="markers=disc"]) {
+    padding-inline-start: var(--ui-space-5);
 }
-:scope:where([data-v-93820102]:scope):is(:not([data-enhanced])) {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    box-shadow: none;
+:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="as=ol"]) {
+    list-style: decimal;
 }
-:scope:not([data-enhanced]) .choices[data-v-93820102], :scope[data-enhanced] .fallback[data-v-93820102] {
-    display: none;
+:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="markers=disc"]) {
+    list-style: disc;
 }
-.fallback[data-v-93820102] {
+:scope > li[data-v-4ed3243c-s] {
     box-sizing: border-box;
-    inline-size: 100%;
-    font: inherit;
-}
-.validity[data-v-93820102] {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    opacity: 0;
-    pointer-events: none;
+    min-inline-size: 0;
+    padding: var(--_ui-list-native-padding-block, var(--ui-space-2))
+      var(--_ui-list-native-padding-inline, var(--ui-space-3));
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-primary);
+    list-style: inherit;
 }
-:scope:where([data-v-93820102]:scope):is(:focus-visible) {
-    border-color: var(--ui-control-focus);
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: var(--ui-focus-width);
-    box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
+:scope > li.card[data-v-4ed3243c-s] {
+    padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
+      var(--_ui-list-native-padding-inline, var(--ui-space-4));
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-raised);
+    list-style: none;
 }
-:scope:where([data-v-93820102]:scope):is([aria-invalid="true"]) {
-    border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="density=compact"]) {
+    --_list-gap: var(--ui-list-gap, var(--ui-space-2));
+    --_ui-list-item-min-size: 0;
+    --_ui-list-item-padding-block: 0;
+    --_ui-list-item-padding-inline: 0;
+    --_ui-list-item-title-weight: var(--ui-font-normal);
+    --_ui-list-native-padding-block: 0;
+    --_ui-list-native-padding-inline: 0;
 }
-:scope:where([data-v-93820102]:scope):is([aria-disabled="true"]) {
-    background: var(--ui-control-surface-disabled);
-    color: var(--ui-disabled-text);
-    box-shadow: none;
-    cursor: not-allowed;
+:scope:where([data-v-4ed3243c]:scope):is([data-ui-list-state~="layout=grid"]) {
+    --_list-gap: var(--ui-list-gap, var(--ui-space-3));
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
 }
-:scope:where([data-v-93820102]:scope):is([hidden]) {
+:scope:where([data-v-4ed3243c]:scope):is([hidden]) {
     display: none;
 }
 }
 
 /* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-menu-surface {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-menu-border {
+@property --ui-list-item-gap {
   syntax: "*";
   inherits: false;
 }
-@property --ui-menu-radius {
+@property --ui-list-item-icon-size {
   syntax: "*";
   inherits: false;
 }
-@property --ui-menu-shadow {
+@property --ui-list-item-padding-block {
   syntax: "*";
   inherits: false;
 }
-@property --ui-menu-viewport-gap {
+@property --ui-list-item-padding-inline {
   syntax: "*";
   inherits: false;
 }
 
-/* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
-   still win. */
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+   slot), one line about it (description), and what it offers (trailing, such as a button or a
+   badge). The title and description are one line each and end in an ellipsis, so every item in a
+   list has the same height.
 
-/* Small follows its trigger down: an item's own hooks still win. */
-@scope (.ui-menu) {
-:scope:where([data-v-1ded0073]:scope):is([data-ui-menu-state~="density=compact"]) {
-    --_ui-default-menu-item-padding-block: var(--ui-space-1);
-    --_ui-default-menu-item-padding-inline: var(--ui-space-2);
-    --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
-    --_ui-default-menu-item-radius: var(--ui-radius-sm);
-    padding: var(--ui-space-1);
-    gap: 0;
+   A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+   padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+   a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+   stay their own. */
+
+/* Framed cards already have their own edge; the stronger focus ring stays separate. */
+
+/* An explicitly independent leading control sits above the stretched row link. */
+
+/* Trailing controls take their own clicks, above the title link's stretched hit area. */
+
+/* Keep identity and disclosure marks beside the first line, even with a long description. */
+
+/* An unused region takes no space. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-list-item) {
+:scope:where([data-v-8c851f73]:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
+
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--ui-list-item-gap, var(--ui-space-3));
+    min-inline-size: 0;
+    min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
+    padding-block: var(
+      --ui-list-item-padding-block,
+      var(--_ui-list-item-padding-block, var(--ui-space-2))
+    );
+    padding-inline: var(
+      --ui-list-item-padding-inline,
+      var(--_ui-list-item-padding-inline, var(--ui-space-3))
+    );
+    border-radius: var(--ui-selection-radius);
+    color: var(--ui-text-primary);
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-:scope:where([data-v-1ded0073]:scope):is([data-ui-menu-state~="size=sm"]) {
-    --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
-    --_ui-default-menu-item-padding-inline: var(--ui-space-2);
-    --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
-    --_ui-default-menu-item-radius: var(--ui-radius-sm);
-    --_ui-default-menu-item-min-block-size: 1.5rem;
-    --_ui-default-menu-indicator-size: 0.75rem;
-    min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
-    padding: var(--ui-space-1);
-    gap: 0;
+:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="variant=card"]) {
+    padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+    padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-raised);
 }
-:scope:where([data-v-1ded0073]:scope):is([data-ui-menu-state~="icons"]) {
-    --_ui-default-menu-icon-display: inline-flex;
+:scope:where([data-v-8c851f73]:scope):is(:where(:has(.title a[href])):hover),
+  :scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="highlighted"]),
+  :scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="current"]) {
+    background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+    box-shadow: inset 0 0 0 var(--ui-border-width)
+      var(--_ui-selection-context-border, var(--ui-selection-border));
 }
-:scope:where([data-v-1ded0073]:scope) {
-    --_ui-menu-surface: var(--ui-menu-surface);
-    --_ui-menu-border: var(--ui-menu-border);
-    --_ui-menu-radius: var(--ui-menu-radius);
-    --_ui-menu-shadow: var(--ui-menu-shadow);
-    /* A menu nested in a compact one starts again from its own density. */
-    --_ui-default-menu-item-padding-block: initial;
-    --_ui-default-menu-item-padding-inline: initial;
-    --_ui-default-menu-item-font-size: initial;
-    --_ui-default-menu-item-radius: initial;
-    --_ui-default-menu-item-min-block-size: initial;
-    --_ui-default-menu-indicator-size: initial;
-    --_ui-default-menu-icon-display: none;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    inline-size: max-content;
-    min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
-    max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
-    padding: 0;
-    border: 0;
-    outline: 0;
-    border-radius: 0;
-    background: transparent;
+:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="variant=card"]:where(:has(.title
+    a[href])):hover) {
+    border-color: var(--ui-border-strong);
+}
+:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="current"]) {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+}
+:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="variant=card"]) {
     box-shadow: none;
-    overflow: visible;
 }
-.surface[data-v-1ded0073] {
+:scope:where([data-v-8c851f73]:scope):is(:has(.title a[href]:focus-visible)) {
+    box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
+}
+.leading[data-v-8c851f73], .trailing[data-v-8c851f73] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--ui-space-2);
+}
+.leading[data-v-8c851f73] {
+    color: var(--ui-text-muted);
+    font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
+}
+:scope[data-ui-list-item-state~="current"] .leading[data-v-8c851f73] {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+}
+:scope[data-ui-list-item-state~="leadingInteractive"] .leading[data-v-8c851f73] {
+    position: relative;
+    z-index: 1;
+}
+.trailing[data-v-8c851f73] {
+    position: relative;
+    z-index: 1;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+}
+.content[data-v-8c851f73] {
     display: flex;
+    flex: 1;
     flex-direction: column;
-    box-sizing: border-box;
-    max-inline-size: inherit;
-    padding: var(--ui-space-1);
-    background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-    border: var(--ui-border-width) solid
-      var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
-    border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-    box-shadow: var(
-      --_ui-menu-shadow,
-      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
-    );
-    max-block-size: inherit;
-    overflow: auto;
-}
-.surface hr[data-v-1ded0073] {
-    align-self: stretch;
-    block-size: 0;
-    margin: var(--ui-space-1) 0;
-    border: 0;
-    border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+    gap: var(--ui-space-0-5, 2px);
+    min-inline-size: 0;
 }
-:scope:where([data-v-1ded0073]:scope):is(:not(:scope[data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"])) {
-    display: none;
+.title[data-v-8c851f73], .description[data-v-8c851f73] {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-:scope:where([data-v-1ded0073]:scope):is([popover]) {
-    position: fixed;
-    inset: auto;
-    margin: 0;
-    overflow: visible;
-    max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
-    opacity: 0;
-    transform: translateY(-4px) scale(0.99);
-    transition:
-      opacity var(--ui-motion-fast) var(--ui-motion-ease),
-      transform var(--ui-motion-fast) var(--ui-motion-ease),
-      display var(--ui-motion-fast) allow-discrete,
-      overlay var(--ui-motion-fast) allow-discrete;
+:scope[data-ui-list-item-state~="wrap"] .title[data-v-8c851f73],
+  :scope[data-ui-list-item-state~="wrap"] .description[data-v-8c851f73] {
+    white-space: normal;
+    overflow-wrap: anywhere;
 }
-:scope:where([data-v-1ded0073]:scope):is([popover]:popover-open) {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+.title[data-v-8c851f73] {
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
+    line-height: var(--ui-line-height-tight);
 }
-@starting-style {
-:scope:where([data-v-1ded0073]:scope):is([popover]:popover-open) {
-      opacity: 0;
-      transform: translateY(-4px) scale(0.99);
+:scope:where([data-v-8c851f73]:scope):is([data-ui-list-item-state~="align=title"]) {
+    align-items: flex-start;
 }
+:scope[data-ui-list-item-state~="align=title"] .leading[data-v-8c851f73],
+  :scope[data-ui-list-item-state~="align=title"] .trailing[data-v-8c851f73] {
+    min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
 }
-:scope:where([data-v-1ded0073]:scope):is([hidden]) {
-    display: none;
+.description[data-v-8c851f73] {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-tight);
 }
-@media (prefers-reduced-motion: reduce) {
-:scope:where([data-v-1ded0073]:scope):is([popover]) {
-      transition: none;
+.title > a[data-v-8c851f73-s] {
+    color: inherit;
+    text-decoration: none;
+}
+.title > a[data-v-8c851f73-s]:focus-visible {
+    outline: none;
+    box-shadow: none;
 }
+.title > a[href][data-v-8c851f73-s]::after {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    content: "";
 }
+.leading[data-v-8c851f73]:empty, .description[data-v-8c851f73]:empty, .trailing[data-v-8c851f73]:empty {
+    display: none;
 }
-
-@scope (.ui-menu-group) {
-:scope:where([data-v-d68e51f2]:scope) {
-    display: flex;
-    flex-direction: column;
-    min-inline-size: 0;
+@media (forced-colors: active) {
+:scope:where([data-v-8c851f73]:scope):is(:has(a:focus-visible)) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-focus-width));
 }
-.heading[data-v-d68e51f2] {
-    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
-    color: var(--ui-text-muted);
-    font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-semibold);
+:is(:scope[data-ui-list-item-state~="current"][data-v-8c851f73], :scope[data-ui-list-item-state~="highlighted"][data-v-8c851f73]):not(:has(a:focus-visible)) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
 }
-:scope:where([data-v-d68e51f2]:scope):is([hidden]) {
+}
+:scope:where([data-v-8c851f73]:scope):is([hidden]) {
     display: none;
 }
 }
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-menu-item-font-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-menu-item-hover-surface {
+@property --ui-listbox-radius {
   syntax: "*";
   inherits: false;
 }
-@property --ui-menu-item-min-block-size {
+@property --ui-listbox-border {
   syntax: "*";
   inherits: false;
 }
-@property --ui-menu-item-padding-block {
+@property --ui-listbox-surface {
   syntax: "*";
   inherits: false;
 }
-@property --ui-menu-item-padding-inline {
+@property --ui-listbox-focus-shadow {
   syntax: "*";
   inherits: false;
 }
-@property --ui-menu-item-radius {
+@property --ui-listbox-invalid-border {
   syntax: "*";
   inherits: false;
 }
 
-/* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
-
-/* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
-   as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
-
-/* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
-
-/* Keep the text row at the shared control height where cap trimming is available. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-menu-item) to (.ui-icon) {
-:scope:where([data-v-50b6e1bc]:scope) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+/* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
+@scope (.ui-listbox) to (.ui-scroll-area) {
+:scope:where([data-v-93820102]:scope) {
+    position: relative;
     box-sizing: border-box;
-    width: 100%;
-    padding: var(
-      --ui-menu-item-padding-block,
-      var(--_ui-default-menu-item-padding-block, var(--ui-space-2))
-    )
-      var(
-        --ui-menu-item-padding-inline,
-        var(--_ui-default-menu-item-padding-inline, var(--ui-space-3))
-      );
-    text-align: left;
-    border-radius: var(
-      --ui-menu-item-radius,
-      var(--_ui-default-menu-item-radius, var(--ui-selection-radius))
-    );
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--ui-space-1);
+    border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
+    border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-listbox-surface, var(--ui-control-surface));
     color: var(--ui-text-primary);
-    font-size: var(
-      --ui-menu-item-font-size,
-      var(--_ui-default-menu-item-font-size, var(--ui-font-size-md))
-    );
-    font-weight: var(--ui-font-medium);
-    text-decoration: none;
-    cursor: pointer;
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(--ui-control-inset);
     outline: none;
-    transition:
-      background-color var(--ui-motion-fast) var(--ui-motion-ease),
-      color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-.icon[data-v-50b6e1bc] {
-    display: var(--_ui-default-menu-icon-display, none);
-    align-items: center;
-    justify-content: center;
-    flex: none;
-    inline-size: var(--ui-icon-size-sm);
-    block-size: var(--ui-icon-size-sm);
-}
-.icon[data-v-50b6e1bc]:not(:empty) {
-    display: inline-flex;
-}
-.icon svg[data-v-50b6e1bc-s] {
-    inline-size: 100%;
-    block-size: 100%;
-}
-:scope:where([data-v-50b6e1bc]:scope):is([data-ui-menu-item-state~="tone=danger"]) {
-    color: var(--ui-danger);
 }
-.label[data-v-50b6e1bc] {
+.choices[data-v-93820102] {
     display: flex;
-    align-items: center;
-    gap: var(--ui-space-2);
-    flex: 1;
-    min-inline-size: 0;
-}
-.indicator[data-v-50b6e1bc] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: none;
-    box-sizing: border-box;
-    inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
-    block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
-    border: var(--ui-border-width) solid var(--ui-control-border);
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-surface);
-    --_ui-default-icon-size: 0.75rem;
-}
-:scope[data-ui-menu-item-state~="type=action"] .indicator[data-v-50b6e1bc] {
-    display: none;
-}
-:scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator[data-v-50b6e1bc] {
-    border-color: var(--ui-accent);
-    background: var(--ui-accent);
-}
-:scope[data-ui-menu-item-state~="type=radio"] .indicator[data-v-50b6e1bc] {
-    border-color: transparent;
-    color: var(--ui-text-secondary);
+    flex-direction: column;
+    max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
 }
-.shortcut[data-v-50b6e1bc] {
-    margin-inline-start: auto;
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-normal);
+:scope:where([data-v-93820102]:scope):is(:not([data-enhanced])) {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
 }
-.shortcut[data-v-50b6e1bc]:empty {
+:scope:not([data-enhanced]) .choices[data-v-93820102], :scope[data-enhanced] .fallback[data-v-93820102] {
     display: none;
 }
-.shortcut kbd[data-v-50b6e1bc-s] {
+.fallback[data-v-93820102] {
+    box-sizing: border-box;
+    inline-size: 100%;
     font: inherit;
 }
-@supports (text-box-trim: trim-both) {
-:scope:where([data-v-50b6e1bc]:scope) {
-      min-block-size: var(
-        --ui-menu-item-min-block-size,
-        var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem))
-      );
-      text-box-trim: trim-both;
-      text-box-edge: cap alphabetic;
-}
-}
-:scope:where([data-v-50b6e1bc]:scope):is(:is(:hover, :focus-visible):not([aria-disabled="true"])) {
-    background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+.validity[data-v-93820102] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    opacity: 0;
+    pointer-events: none;
 }
-:scope:where([data-v-50b6e1bc]:scope):is(:focus-visible) {
+:scope:where([data-v-93820102]:scope):is(:focus-visible) {
+    border-color: var(--ui-control-focus);
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: calc(-1 * var(--ui-focus-width));
+    outline-offset: var(--ui-focus-width);
+    box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
 }
-:scope:where([data-v-50b6e1bc]:scope):is([aria-disabled="true"]) {
-    background: var(--ui-disabled-surface);
+:scope:where([data-v-93820102]:scope):is([aria-invalid="true"]) {
+    border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+}
+:scope:where([data-v-93820102]:scope):is([aria-disabled="true"]) {
+    background: var(--ui-control-surface-disabled);
     color: var(--ui-disabled-text);
+    box-shadow: none;
     cursor: not-allowed;
 }
-:scope[aria-disabled="true"] .indicator[data-v-50b6e1bc] {
-    border-color: var(--ui-disabled-border);
-    background: transparent;
-    color: var(--ui-disabled-text);
+:scope:where([data-v-93820102]:scope):is([hidden]) {
+    display: none;
 }
-:scope[aria-disabled="true"] .indicator[data-v-50b6e1bc]::after {
-    background: var(--ui-disabled-text);
 }
-@media (forced-colors: active) {
-:scope:where([data-v-50b6e1bc]:scope):is(:focus-visible) {
-      outline-color: Highlight;
+
+@scope (.ui-menu-group) {
+:scope:where([data-v-d68e51f2]:scope) {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
 }
+.heading[data-v-d68e51f2] {
+    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-semibold);
 }
-:scope:where([data-v-50b6e1bc]:scope):is([hidden]) {
+:scope:where([data-v-d68e51f2]:scope):is([hidden]) {
     display: none;
 }
 }