@threadlabs/looma 0.15.2 → 0.15.4

package/vue/components.css

@@ -274,6 +274,10 @@ svg[data-v-50d3f581] {
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-color {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-font-size {
   syntax: "*";
   inherits: false;
@@ -310,12 +314,24 @@ svg[data-v-50d3f581] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-v-3485e390] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);
   /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
   --_badge-border: var(--ui-surface-subtle);
-  --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-surface));
+  /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
+     surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
+     mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
+  --_ui-badge-color: var(--ui-badge-color);
+  --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
+  --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
+  --_badge-color-surface: var(--_badge-color-wash);
+  --_badge-color-border: var(--_badge-color-wash);
+  --_badge-color-text: var(--_badge-color-ink);
+  --_badge-outline-surface: var(
+    --ui-badge-surface,
+    var(--_badge-color-surface, var(--_badge-surface))
+  );
 
   display: inline-flex;
   align-items: center;
@@ -323,10 +339,10 @@ svg[data-v-50d3f581] {
   max-width: 100%;
   padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
     var(--ui-badge-padding-inline, var(--ui-space-2));
-  border: 1px solid var(--ui-badge-border, var(--_badge-border));
+  border: 1px solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
   border-radius: var(--ui-radius-round);
   background: var(--_badge-outline-surface);
-  color: var(--ui-badge-text, var(--_badge-text));
+  color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
   font-weight: var(--ui-badge-font-weight, var(--ui-font-medium));
@@ -338,7 +354,7 @@ svg[data-v-50d3f581] {
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
  * replaces, still sizes to its label rather than filling its container. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-v-3485e390] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
@@ -347,78 +363,89 @@ svg[data-v-50d3f581] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
   --_badge-surface: var(--ui-accent-soft);
   --_badge-border: var(--ui-accent-soft);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
   --_badge-surface: var(--ui-danger-soft);
   --_badge-border: var(--ui-danger-soft);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
   --_badge-surface: var(--ui-success-soft);
   --_badge-border: var(--ui-success-soft);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
   --_badge-surface: var(--ui-warning-soft);
   --_badge-border: var(--ui-warning-soft);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
   --_badge-surface: var(--ui-info-soft);
   --_badge-border: var(--ui-info-soft);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-8ef5da57] {
+
+/* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
+   invalid while the hook is unset. */
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-3485e390] {
+  --_badge-color-surface: var(--_badge-color-ink);
+  --_badge-color-border: var(--_badge-color-ink);
+  --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
+}
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-3485e390] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
+  /* An outline colour keeps the surface and draws its edge and text in the ink. */
+  --_badge-color-surface: initial;
+  --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
@@ -426,7 +453,7 @@ svg[data-v-50d3f581] {
 /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
    outline to follow: the edge is the fill. The end padding grows by the point's depth so the
    label never runs into it. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   border-color: transparent;
@@ -440,7 +467,7 @@ svg[data-v-50d3f581] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-8ef5da57]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3485e390]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
@@ -450,12 +477,12 @@ svg[data-v-50d3f581] {
 
 /* The tag clips its point, including the native border. Draw the outer shape in the border
    colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
   position: relative;
   isolation: isolate;
-  background: var(--ui-badge-border, var(--_badge-border));
+  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-8ef5da57]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]::before {
   content: "";
   position: absolute;
   inset: 1px;
@@ -470,22 +497,22 @@ svg[data-v-50d3f581] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-8ef5da57]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-8ef5da57] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-8ef5da57]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-8ef5da57] {
+[data-component~="ui-badge"][hidden][data-v-3485e390] {
   display: none;
 }
 
@@ -1539,7 +1566,7 @@ input[data-v-5e151d99]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-combobox"][data-v-069ed42d] {
+[data-component~="ui-combobox"][data-v-af2537d5] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-combobox-label-text: var(--ui-combobox-label-text);
   --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
@@ -1564,20 +1591,20 @@ input[data-v-5e151d99]:focus-visible {
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-069ed42d] {
+label[data-v-af2537d5] {
   color: var(--_ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-069ed42d] {
+.control[data-v-af2537d5] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-069ed42d] {
+.field[data-v-af2537d5] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -1589,14 +1616,14 @@ label[data-v-069ed42d] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-069ed42d]:focus-within {
+.field[data-v-af2537d5]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-069ed42d] {
+.help[data-v-af2537d5] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1613,28 +1640,28 @@ label[data-v-069ed42d] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-069ed42d]:hover:enabled,
-.help[aria-expanded="true"][data-v-069ed42d] {
+.help[data-v-af2537d5]:hover:enabled,
+.help[aria-expanded="true"][data-v-af2537d5] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-069ed42d]:focus-visible {
+.help[data-v-af2537d5]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-069ed42d]:disabled {
+.help[data-v-af2537d5]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-069ed42d] {
+.help-icon[data-v-af2537d5] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-069ed42d]::selection {
+input[data-v-af2537d5]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-069ed42d] {
+input[data-v-af2537d5] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -1650,20 +1677,20 @@ input[data-v-069ed42d] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-af2537d5] {
   --_row: var(--ui-control-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-af2537d5] {
   min-block-size: calc(var(--_row) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-af2537d5] {
   min-block-size: calc(var(--ui-control-size-lg) - 2px);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
 }
-button[data-v-069ed42d] {
+button[data-v-af2537d5] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -1678,35 +1705,35 @@ button[data-v-069ed42d] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-069ed42d] {
+.affordance-icon[data-v-af2537d5] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-069ed42d]:hover:enabled {
+button[data-v-af2537d5]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-069ed42d]:focus-visible {
+button[data-v-af2537d5]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-069ed42d]:disabled, button[data-v-069ed42d]:disabled {
+input[data-v-af2537d5]:disabled, button[data-v-af2537d5]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-069ed42d]:has(input:disabled) {
+.field[data-v-af2537d5]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-069ed42d],
-[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-af2537d5],
+[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-af2537d5] {
   border-color: var(
     --_ui-combobox-invalid-border,
     var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
   );
 }
-.popup[data-v-069ed42d] {
+.popup[data-v-af2537d5] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -1727,57 +1754,57 @@ input[data-v-069ed42d]:disabled, button[data-v-069ed42d]:disabled {
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
   );
 }
-[hidden][data-v-069ed42d] {
+[hidden][data-v-af2537d5] {
   display: none;
 }
-.option[data-v-069ed42d] {
+.option[data-v-af2537d5] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-069ed42d]:hover, .option.active[data-v-069ed42d] {
+.option[data-v-af2537d5]:hover, .option.active[data-v-af2537d5] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-069ed42d] {
+.option[aria-disabled="true"][data-v-af2537d5] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.primary[data-v-069ed42d] {
+.primary[data-v-af2537d5] {
   display: block;
   color: var(--_ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
 /* A row with a tag or a description: the label and its tag on one line, the description under them. */
-.detail[data-v-069ed42d] {
+.detail[data-v-af2537d5] {
   display: grid;
   gap: var(--ui-space-0-5);
   min-inline-size: 0;
 }
-.line[data-v-069ed42d] {
+.line[data-v-af2537d5] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.description[data-v-069ed42d] {
+.description[data-v-af2537d5] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.message[data-v-069ed42d], .group[data-v-069ed42d] {
+.message[data-v-af2537d5], .group[data-v-af2537d5] {
   color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-069ed42d], .popup .message[data-v-069ed42d] {
+.group[data-v-af2537d5], .popup .message[data-v-af2537d5] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-069ed42d] {
+.sr-only[data-v-af2537d5] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -1786,24 +1813,24 @@ input[data-v-069ed42d]:disabled, button[data-v-069ed42d]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-069ed42d] {
+button[data-v-af2537d5] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
   /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
      body-size text: below 16px, iOS zooms the page into the focused field. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-af2537d5] {
     --_row: var(--ui-control-min-block-size);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-af2537d5] {
     font-size: inherit;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-069ed42d], .popup[data-v-069ed42d] {
+.field[data-v-af2537d5], .popup[data-v-af2537d5] {
     border-color: CanvasText;
 }
-.option.active[data-v-069ed42d] {
+.option.active[data-v-af2537d5] {
     outline-color: Highlight;
 }
 }
@@ -1811,12 +1838,12 @@ button[data-v-069ed42d] {
 /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
    before anything is picked. aria-selected is the state; this draws it.
    Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-af2537d5] {
   display: flex;
   gap: var(--ui-space-2);
   align-items: center;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-069ed42d]::before {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-af2537d5]::before {
   content: "";
   flex: none;
   inline-size: 1.125rem;
@@ -1831,7 +1858,7 @@ button[data-v-069ed42d] {
   background-size: 0.7rem;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"][data-v-069ed42d]::before {
+  .option[aria-selected="true"][data-v-af2537d5]::before {
   border-color: var(--ui-accent-solid);
   background-color: var(--ui-accent-solid);
   background-image: var(
@@ -1841,14 +1868,14 @@ button[data-v-069ed42d] {
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-af2537d5] {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
   min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-069ed42d] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-af2537d5] {
   flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
@@ -1856,25 +1883,25 @@ button[data-v-069ed42d] {
 }
 /* A small multiple field starts at the small control height; chosen items still wrap it taller. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  .field[data-v-069ed42d] {
+  .field[data-v-af2537d5] {
   min-block-size: 0;
   padding: var(--ui-space-0-5);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  input[data-v-069ed42d] {
+  input[data-v-af2537d5] {
   min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
   padding: 0 var(--ui-space-1);
 }
 /* A large multiple field starts at the large control height, as sm starts at the small one. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  .field[data-v-069ed42d] {
+  .field[data-v-af2537d5] {
   min-block-size: 0;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  input[data-v-069ed42d] {
+  input[data-v-af2537d5] {
   min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
 }
-.item[data-v-069ed42d] {
+.item[data-v-af2537d5] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -1888,16 +1915,16 @@ button[data-v-069ed42d] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-069ed42d]:focus-visible {
+.item[data-v-af2537d5]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-069ed42d]:disabled {
+.item[data-v-af2537d5]:disabled {
   opacity: 0.6;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-069ed42d] {
+[data-component~="ui-combobox"][hidden][data-v-af2537d5] {
   display: none;
 }
 
@@ -8187,7 +8214,7 @@ html[data-ui-input-modality="touch"]
   position: relative;
 }
 
-.looma-editor .ProseMirror > .looma-active-block::before {
+.looma-editor .ProseMirror > .looma-active-block:not(.is-editor-empty)::before {
   position: absolute;
   z-index: 1;
   inset-block: 0;