@threadlabs/looma 0.30.9 → 0.31.1

package/vue/components.css

@@ -1783,7 +1783,7 @@ html[data-ui-input-modality="touch"]
 /* The label, and under it an optional line saying what the choice means. */
 
 /* Centre the tick's box and lift it slightly for the rotated check shape. */
-@keyframes ui-checkbox-check-b6776f7f {
+@keyframes ui-checkbox-check-aac88235 {
 from {
     opacity: 0;
     transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
@@ -1878,7 +1878,7 @@ input:checked:where([data-hn-ui-checkbox])::after {
     border-width: 0 0.125rem 0.125rem 0;
     opacity: 1;
     transform: translateY(-0.09rem) rotate(45deg);
-    animation: ui-checkbox-check-b6776f7f 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
+    animation: ui-checkbox-check-aac88235 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
       both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
@@ -3042,13 +3042,13 @@ dd:where([data-hn-ui-description-item]) {
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-f26be724 {
+@keyframes ui-dialog-enter-0e4bd8b5 {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-f26be724 {
+@keyframes ui-dialog-backdrop-enter-0e4bd8b5 {
 from {
     background-color: transparent;
 }
@@ -3096,7 +3096,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-f26be724 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-0e4bd8b5 var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -3217,7 +3217,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-f26be724 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-0e4bd8b5 var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -4243,6 +4243,530 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
 }
 }
 
+/* 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) to ([data-hn]) {
+:scope:where([data-hn-ui-form-field]) {
+    /* 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:where([data-hn-ui-form-field]),.help:where([data-hn-ui-form-field]),.error:where([data-hn-ui-form-field]) {
+    display: contents;
+}
+.label:where([data-hn-ui-form-field]) {
+    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:has(> .label-action > *):where([data-hn-ui-form-field]) {
+    display: flex;
+    align-items: start;
+    gap: var(--ui-space-1);
+}
+.label-action:where([data-hn-ui-form-field]) {
+    display: flex;
+    align-items: unsafe center;
+    block-size: 1lh;
+}
+.label-action:not(:has(> *)):where([data-hn-ui-form-field]) {
+    display: none;
+}
+.help:where([data-hn-ui-form-field]) {
+    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 > :where(:not([data-hn-ui-form-field])):is(*) {
+    min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+}
+.error:where([data-hn-ui-form-field]) {
+    display: none;
+}
+:scope[data-ui-form-field-state~="invalid"] .error:where([data-hn-ui-form-field]) {
+    display: contents;
+}
+.error:where([data-hn-ui-form-field]),:where(:not([data-hn-ui-form-field])):is([role="alert"]) {
+    color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+    font-size: var(--ui-font-size-sm);
+}
+:scope[hidden]:where([data-hn-ui-form-field]) {
+    display: none;
+}
+}
+
+@property --ui-input-group-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-group-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@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. */
+
+/* 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) to ([data-hn]) {
+:scope:where([data-hn-ui-input-group]) {
+    /* 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%;
+    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);
+}
+:scope[data-ui-input-group-state~="variant=subtle"]:where([data-hn-ui-input-group]) {
+    border-color: var(--ui-border);
+    background: var(--ui-surface-muted);
+    box-shadow: none;
+}
+:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
+    min-block-size: var(--ui-control-size-sm);
+}
+:scope:has(.field [data-ui-input-state~="size=lg"]):where([data-hn-ui-input-group]) {
+    min-block-size: var(--ui-control-size-lg);
+}
+@media (pointer: coarse) {
+:scope:where([data-hn-ui-input-group]) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+}
+:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
+      min-block-size: var(--ui-control-min-block-size);
+}
+}
+:scope: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]))):where([data-hn-ui-input-group]) {
+    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+}
+:scope:has(.field :is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
+}
+:scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):where([data-hn-ui-input-group]) {
+    border-color: var(
+      --ui-input-group-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
+}
+:scope:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible):where([data-hn-ui-input-group]) {
+    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
+      )
+    );
+}
+@media (forced-colors: active) {
+:scope:has(:is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: var(--ui-border-width);
+}
+}
+:scope[data-ui-input-group-state~="disabled"]:where([data-hn-ui-input-group]),:scope:has(:is(input, textarea):disabled):where([data-hn-ui-input-group]) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    box-shadow: none;
+    cursor: not-allowed;
+}
+.field:where([data-hn-ui-input-group]) {
+    display: flex;
+    flex: 1;
+    min-inline-size: 0;
+}
+.affix:where([data-hn-ui-input-group]) {
+    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;
+}
+.affix:has([slot="prefix"]):where([data-hn-ui-input-group]),.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
+    background: var(--ui-surface-muted);
+}
+.affix:has([slot="prefix"]):where([data-hn-ui-input-group]) {
+    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
+}
+.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
+    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
+}
+:scope[data-ui-input-group-state~="prefixKind=icon"]:where([data-hn-ui-input-group]) {
+    --_ui-default-input-padding-inline-start: var(--ui-space-2);
+}
+:scope[data-ui-input-group-state~="prefixKind=icon"]
+    .affix:first-child:where([data-hn-ui-input-group]) {
+    padding-inline-end: 0;
+    border-inline-end: 0;
+    background: transparent;
+}
+.action:where([data-hn-ui-input-group]) {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding-inline: var(--ui-space-1);
+}
+:scope[data-ui-input-group-state~="multiline"]:where([data-hn-ui-input-group]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+}
+:scope[data-ui-input-group-state~="multiline"] .field:where([data-hn-ui-input-group]) {
+    grid-column: 2;
+}
+:scope[data-ui-input-group-state~="multiline"] .action:where([data-hn-ui-input-group]) {
+    grid-column: 1 / -1;
+    justify-content: end;
+    padding: var(--ui-space-2);
+    padding-block-start: 0;
+}
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]:where([data-hn-ui-input-group]) {
+    --_ui-default-textarea-padding-inline-end: calc(
+      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
+    );
+}
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .field:where([data-hn-ui-input-group]) {
+    grid-row: 1;
+}
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .action:where([data-hn-ui-input-group]) {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    justify-self: end;
+    padding: var(--ui-space-2);
+}
+.affix:empty:where([data-hn-ui-input-group]),.action:empty:where([data-hn-ui-input-group]) {
+    display: none;
+}
+:scope[hidden]:where([data-hn-ui-input-group]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-textarea-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-border-hover {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-focus-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-focus-outline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-invalid-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-padding-inline-end {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+
+/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+
+/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-textarea) to ([data-hn]) {
+:scope {
+    box-sizing: border-box;
+    display: inline-block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: calc(3rem * 2);
+    margin: 0;
+    --_padding-block: var(--ui-space-2);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))
+    );
+    appearance: none;
+    resize: vertical;
+    border: var(
+      --ui-textarea-border-width,
+      var(--_ui-default-textarea-border-width, var(--ui-border-width))
+    ) solid
+      var(
+        --ui-textarea-border,
+        var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
+      );
+    border-radius: var(
+      --ui-textarea-radius,
+      var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
+    );
+    background: var(
+      --ui-textarea-surface,
+      var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
+    );
+    color: var(--ui-text-primary);
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --ui-textarea-shadow,
+      var(--_ui-default-textarea-shadow, var(--ui-control-inset))
+    );
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+:scope::selection {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    color: inherit;
+}
+:scope::placeholder {
+    color: var(--ui-control-placeholder, var(--ui-text-secondary));
+    opacity: 1;
+}
+:scope:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
+    border-color: var(
+      --ui-textarea-border-hover,
+      var(
+        --_ui-default-textarea-border-hover,
+        var(--ui-control-border-hover, var(--ui-text-secondary))
+      )
+    );
+}
+:scope:focus-visible {
+    border-color: var(
+      --ui-textarea-focus-border,
+      var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
+    );
+    outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
+    box-shadow: var(
+      --ui-textarea-focus-shadow,
+      var(
+        --_ui-default-textarea-focus-shadow,
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow)
+      )
+    );
+}
+:scope[aria-invalid="true"],:scope:is(:user-invalid, [data-user-invalid]) {
+    border-color: var(
+      --ui-textarea-invalid-border,
+      var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+    );
+}
+:scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+    box-shadow: var(
+      --ui-textarea-invalid-focus-shadow,
+      var(
+        --_ui-default-textarea-invalid-focus-shadow,
+        var(--ui-control-inset),
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(
+            --ui-textarea-invalid-border,
+            var(
+              --_ui-default-textarea-invalid-border,
+              var(--ui-field-danger, var(--ui-danger-solid))
+            )
+          ) 22%,
+          transparent
+        )
+      )
+    );
+}
+:scope:disabled {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
+}
+:scope[data-ui-textarea-state~="size=sm"] {
+    --_padding-block: var(--ui-space-1);
+    padding: var(--ui-space-1) var(--ui-space-2);
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))
+    );
+    font-size: var(--ui-font-size-sm);
+}
+:scope[data-ui-textarea-state~="size=lg"] {
+    --_padding-block: var(--ui-space-3);
+    padding: var(--ui-space-3) var(--ui-space-4);
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))
+    );
+    font-size: var(--ui-font-size-md);
+}
+:scope[data-ui-textarea-state~="maxRows"] {
+    max-block-size: calc(
+      max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) +
+        2px
+    );
+}
+@supports (field-sizing: content) {
+:scope[data-ui-textarea-state~="autosize"] {
+      field-sizing: content;
+      min-block-size: calc(
+        var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
+      );
+}
+}
+@media (pointer: coarse) {
+:scope[data-ui-textarea-state~="size=sm"] {
+      font-size: inherit;
+}
+}
+:scope[hidden] {
+    display: none;
+}
+}
+
 /* 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. */
 
@@ -4351,142 +4875,43 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
       border-bottom: none;
       box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
 }
-:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
-      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))
-      );
-}
-}
-.looma-editor__sticky-toolbar-shell :scope:where([data-hn-ui-editor-toolbar]) {
-    position: relative;
-    min-height: var(--ui-editor-toolbar-min-height, 48px);
-    background: transparent;
-    border: 0;
-    box-shadow: none;
-}
-.looma-editor__mobile-toolbar-shell
-    :scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
-    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:where([data-hn-ui-editor-toolbar]) {
-    scroll-snap-type: x mandatory;
-}
-:scope[hidden]:where([data-hn-ui-editor-toolbar]) {
-    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) to ([data-hn]) {
-:scope:where([data-hn-ui-form-field]) {
-    /* 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:where([data-hn-ui-form-field]),.help:where([data-hn-ui-form-field]),.error:where([data-hn-ui-form-field]) {
-    display: contents;
-}
-.label:where([data-hn-ui-form-field]) {
-    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:has(> .label-action > *):where([data-hn-ui-form-field]) {
-    display: flex;
-    align-items: start;
-    gap: var(--ui-space-1);
-}
-.label-action:where([data-hn-ui-form-field]) {
-    display: flex;
-    align-items: unsafe center;
-    block-size: 1lh;
-}
-.label-action:not(:has(> *)):where([data-hn-ui-form-field]) {
-    display: none;
-}
-.help:where([data-hn-ui-form-field]) {
-    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 > :where(:not([data-hn-ui-form-field])):is(*) {
-    min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
+      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))
+      );
 }
-.error:where([data-hn-ui-form-field]) {
-    display: none;
 }
-:scope[data-ui-form-field-state~="invalid"] .error:where([data-hn-ui-form-field]) {
-    display: contents;
+.looma-editor__sticky-toolbar-shell :scope:where([data-hn-ui-editor-toolbar]) {
+    position: relative;
+    min-height: var(--ui-editor-toolbar-min-height, 48px);
+    background: transparent;
+    border: 0;
+    box-shadow: none;
 }
-.error:where([data-hn-ui-form-field]),:where(:not([data-hn-ui-form-field])):is([role="alert"]) {
-    color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
-    font-size: var(--ui-font-size-sm);
+.looma-editor__mobile-toolbar-shell
+    :scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
+    width: 100%;
+    max-width: none;
+    min-height: 100%;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    backdrop-filter: none;
 }
-:scope[hidden]:where([data-hn-ui-form-field]) {
+.looma-editor__mobile-toolbar-shell
+    :scope[data-ui-editor-toolbar-state~="floating"]
+    .strip:where([data-hn-ui-editor-toolbar]) {
+    scroll-snap-type: x mandatory;
+}
+:scope[hidden]:where([data-hn-ui-editor-toolbar]) {
     display: none;
 }
 }
@@ -5220,254 +5645,36 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
     background: var(--ui-surface);
     cursor: pointer;
 }
-.cell.selected {
-    background: var(--ui-accent-solid, var(--ui-accent));
-    border-color: var(--ui-accent-solid, var(--ui-accent));
-}
-.cell:focus-visible {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: calc(-1 * var(--ui-focus-width));
-}
-.header {
-    display: block;
-    margin-bottom: var(--ui-space-2);
-    font-size: var(--ui-font-size-sm);
-    cursor: pointer;
-}
-@media (pointer: coarse) {
-.grid {
-      grid-template-columns: repeat(var(--_cols, 8), 44px);
-      grid-template-rows: repeat(var(--_rows, 8), 44px);
-}
-.cell {
-      width: 44px;
-      height: 44px;
-}
-}
-@media (forced-colors: active) {
-.cell:focus-visible {
-      outline-color: Highlight;
-}
-}
-:scope[hidden] {
-    display: none;
-}
-}
-
-@property --ui-input-group-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-group-invalid-border {
-  syntax: "*";
-  inherits: false;
-}
-@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. */
-
-/* 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) to ([data-hn]) {
-:scope:where([data-hn-ui-input-group]) {
-    /* 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%;
-    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);
-}
-:scope[data-ui-input-group-state~="variant=subtle"]:where([data-hn-ui-input-group]) {
-    border-color: var(--ui-border);
-    background: var(--ui-surface-muted);
-    box-shadow: none;
-}
-:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
-    min-block-size: var(--ui-control-size-sm);
-}
-:scope:has(.field [data-ui-input-state~="size=lg"]):where([data-hn-ui-input-group]) {
-    min-block-size: var(--ui-control-size-lg);
-}
-@media (pointer: coarse) {
-:scope:where([data-hn-ui-input-group]) {
-      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-}
-:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
-      min-block-size: var(--ui-control-min-block-size);
-}
-}
-:scope: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]))):where([data-hn-ui-input-group]) {
-    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
-}
-:scope:has(.field :is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
-    border-color: var(--ui-control-focus, var(--ui-accent-solid));
-    box-shadow:
-      var(--ui-control-inset),
-      var(--ui-control-focus-halo-shadow);
-}
-:scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):where([data-hn-ui-input-group]) {
-    border-color: var(
-      --ui-input-group-invalid-border,
-      var(--ui-field-danger, var(--ui-danger-solid))
-    );
-}
-:scope:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible):where([data-hn-ui-input-group]) {
-    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
-      )
-    );
-}
-@media (forced-colors: active) {
-:scope:has(:is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
-      outline: var(--ui-focus-width) solid Highlight;
-      outline-offset: var(--ui-border-width);
-}
-}
-:scope[data-ui-input-group-state~="disabled"]:where([data-hn-ui-input-group]),:scope:has(:is(input, textarea):disabled):where([data-hn-ui-input-group]) {
-    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-    box-shadow: none;
-    cursor: not-allowed;
-}
-.field:where([data-hn-ui-input-group]) {
-    display: flex;
-    flex: 1;
-    min-inline-size: 0;
-}
-.affix:where([data-hn-ui-input-group]) {
-    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;
-}
-.affix:has([slot="prefix"]):where([data-hn-ui-input-group]),.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
-    background: var(--ui-surface-muted);
-}
-.affix:has([slot="prefix"]):where([data-hn-ui-input-group]) {
-    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
-}
-.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
-    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
-}
-:scope[data-ui-input-group-state~="prefixKind=icon"]:where([data-hn-ui-input-group]) {
-    --_ui-default-input-padding-inline-start: var(--ui-space-2);
-}
-:scope[data-ui-input-group-state~="prefixKind=icon"]
-    .affix:first-child:where([data-hn-ui-input-group]) {
-    padding-inline-end: 0;
-    border-inline-end: 0;
-    background: transparent;
-}
-.action:where([data-hn-ui-input-group]) {
-    display: flex;
-    flex: none;
-    align-items: center;
-    padding-inline: var(--ui-space-1);
+.cell.selected {
+    background: var(--ui-accent-solid, var(--ui-accent));
+    border-color: var(--ui-accent-solid, var(--ui-accent));
 }
-:scope[data-ui-input-group-state~="multiline"]:where([data-hn-ui-input-group]) {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+.cell:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
 }
-:scope[data-ui-input-group-state~="multiline"] .field:where([data-hn-ui-input-group]) {
-    grid-column: 2;
+.header {
+    display: block;
+    margin-bottom: var(--ui-space-2);
+    font-size: var(--ui-font-size-sm);
+    cursor: pointer;
 }
-:scope[data-ui-input-group-state~="multiline"] .action:where([data-hn-ui-input-group]) {
-    grid-column: 1 / -1;
-    justify-content: end;
-    padding: var(--ui-space-2);
-    padding-block-start: 0;
+@media (pointer: coarse) {
+.grid {
+      grid-template-columns: repeat(var(--_cols, 8), 44px);
+      grid-template-rows: repeat(var(--_rows, 8), 44px);
 }
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]:where([data-hn-ui-input-group]) {
-    --_ui-default-textarea-padding-inline-end: calc(
-      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
-    );
+.cell {
+      width: 44px;
+      height: 44px;
 }
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .field:where([data-hn-ui-input-group]) {
-    grid-row: 1;
 }
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .action:where([data-hn-ui-input-group]) {
-    grid-column: 2;
-    grid-row: 1;
-    align-self: start;
-    justify-self: end;
-    padding: var(--ui-space-2);
+@media (forced-colors: active) {
+.cell:focus-visible {
+      outline-color: Highlight;
 }
-.affix:empty:where([data-hn-ui-input-group]),.action:empty:where([data-hn-ui-input-group]) {
-    display: none;
 }
-:scope[hidden]:where([data-hn-ui-input-group]) {
+:scope[hidden] {
     display: none;
 }
 }
@@ -9121,213 +9328,6 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
 }
 }
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-textarea-border-width {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-border-hover {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-focus-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-focus-outline {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-surface {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-invalid-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-invalid-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-textarea-padding-inline-end {
-  syntax: "*";
-  inherits: false;
-}
-
-/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-
-/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-
-/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-textarea) to ([data-hn]) {
-:scope {
-    box-sizing: border-box;
-    display: inline-block;
-    inline-size: 100%;
-    min-inline-size: 0;
-    min-block-size: calc(3rem * 2);
-    margin: 0;
-    --_padding-block: var(--ui-space-2);
-    padding: var(--ui-space-2) var(--ui-space-3);
-    padding-inline-end: var(
-      --ui-textarea-padding-inline-end,
-      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))
-    );
-    appearance: none;
-    resize: vertical;
-    border: var(
-      --ui-textarea-border-width,
-      var(--_ui-default-textarea-border-width, var(--ui-border-width))
-    ) solid
-      var(
-        --ui-textarea-border,
-        var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
-      );
-    border-radius: var(
-      --ui-textarea-radius,
-      var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
-    );
-    background: var(
-      --ui-textarea-surface,
-      var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
-    );
-    color: var(--ui-text-primary);
-    font: inherit;
-    line-height: var(--ui-line-height-md);
-    box-shadow: var(
-      --ui-textarea-shadow,
-      var(--_ui-default-textarea-shadow, var(--ui-control-inset))
-    );
-    transition:
-      border-color var(--ui-motion-fast) var(--ui-motion-ease),
-      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-      background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-:scope::selection {
-    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-    color: inherit;
-}
-:scope::placeholder {
-    color: var(--ui-control-placeholder, var(--ui-text-secondary));
-    opacity: 1;
-}
-:scope:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
-    border-color: var(
-      --ui-textarea-border-hover,
-      var(
-        --_ui-default-textarea-border-hover,
-        var(--ui-control-border-hover, var(--ui-text-secondary))
-      )
-    );
-}
-:scope:focus-visible {
-    border-color: var(
-      --ui-textarea-focus-border,
-      var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
-    );
-    outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
-    box-shadow: var(
-      --ui-textarea-focus-shadow,
-      var(
-        --_ui-default-textarea-focus-shadow,
-        var(--ui-control-inset),
-        var(--ui-control-focus-halo-shadow)
-      )
-    );
-}
-:scope[aria-invalid="true"],:scope:is(:user-invalid, [data-user-invalid]) {
-    border-color: var(
-      --ui-textarea-invalid-border,
-      var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
-    );
-}
-:scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-    box-shadow: var(
-      --ui-textarea-invalid-focus-shadow,
-      var(
-        --_ui-default-textarea-invalid-focus-shadow,
-        var(--ui-control-inset),
-        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-          in srgb,
-          var(
-            --ui-textarea-invalid-border,
-            var(
-              --_ui-default-textarea-invalid-border,
-              var(--ui-field-danger, var(--ui-danger-solid))
-            )
-          ) 22%,
-          transparent
-        )
-      )
-    );
-}
-:scope:disabled {
-    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-    color: var(--ui-disabled-text);
-    box-shadow: none;
-    cursor: not-allowed;
-}
-:scope[data-ui-textarea-state~="size=sm"] {
-    --_padding-block: var(--ui-space-1);
-    padding: var(--ui-space-1) var(--ui-space-2);
-    padding-inline-end: var(
-      --ui-textarea-padding-inline-end,
-      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))
-    );
-    font-size: var(--ui-font-size-sm);
-}
-:scope[data-ui-textarea-state~="size=lg"] {
-    --_padding-block: var(--ui-space-3);
-    padding: var(--ui-space-3) var(--ui-space-4);
-    padding-inline-end: var(
-      --ui-textarea-padding-inline-end,
-      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))
-    );
-    font-size: var(--ui-font-size-md);
-}
-:scope[data-ui-textarea-state~="maxRows"] {
-    max-block-size: calc(
-      max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) +
-        2px
-    );
-}
-@supports (field-sizing: content) {
-:scope[data-ui-textarea-state~="autosize"] {
-      field-sizing: content;
-      min-block-size: calc(
-        var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
-      );
-}
-}
-@media (pointer: coarse) {
-:scope[data-ui-textarea-state~="size=sm"] {
-      font-size: inherit;
-}
-}
-:scope[hidden] {
-    display: none;
-}
-}
-
 /* Component hooks stay on this toast; group overlay values may inherit from the region. */
 @property --ui-toast-surface {
   syntax: "*";
@@ -9436,7 +9436,7 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-@keyframes ui-toast-enter-f4df0ea9 {
+@keyframes ui-toast-enter-cab264c9 {
 from {
     opacity: 0;
     transform: translateY(-1rem);
@@ -9446,7 +9446,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-f4df0ea9 {
+@keyframes ui-toast-exit-cab264c9 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9456,7 +9456,7 @@ to {
     transform: translateY(0.75rem);
 }
 }
-@keyframes ui-toast-enter-bottom-f4df0ea9 {
+@keyframes ui-toast-enter-bottom-cab264c9 {
 from {
     opacity: 0;
     transform: translateY(1rem);
@@ -9466,7 +9466,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-bottom-f4df0ea9 {
+@keyframes ui-toast-exit-bottom-cab264c9 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9557,7 +9557,7 @@ to {
       --_ui-toast-region-shadow,
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
-    animation: ui-toast-enter-f4df0ea9 var(--_ui-toast-region-enter-duration, 0.32s)
+    animation: ui-toast-enter-cab264c9 var(--_ui-toast-region-enter-duration, 0.32s)
       var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 .toast[data-tone="info"]:where([data-hn-ui-toast-region]) {
@@ -9577,17 +9577,17 @@ to {
     --_ui-toast-region-tone-surface: var(--ui-danger-soft);
 }
 .toast.closing:where([data-hn-ui-toast-region]) {
-    animation: ui-toast-exit-f4df0ea9 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
+    animation: ui-toast-exit-cab264c9 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
       both;
     pointer-events: none;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-enter-bottom-f4df0ea9;
+    animation-name: ui-toast-enter-bottom-cab264c9;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast.closing:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-exit-bottom-f4df0ea9;
+    animation-name: ui-toast-exit-bottom-cab264c9;
 }
 @media (prefers-reduced-motion: reduce) {
 .toast:where([data-hn-ui-toast-region]),.toast.closing:where([data-hn-ui-toast-region]) {
@@ -9788,7 +9788,7 @@ to {
    slides, the label reaches back under the icon (the controller measures how far) with its text
    where it was, and fades out across the gap before the icon, fully gone where the icon begins
    to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
-@keyframes ui-tree-item-marquee-26f52f6b {
+@keyframes ui-tree-item-marquee-16fe002b {
 from {
     transform: translateX(0);
 }
@@ -10044,7 +10044,7 @@ to {
 .row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item]) {
     /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
        long enough to read rather than sliding back and forth. */
-    animation: ui-tree-item-marquee-26f52f6b var(--_marquee-duration) linear 0.5s 1 normal forwards;
+    animation: ui-tree-item-marquee-16fe002b var(--_marquee-duration) linear 0.5s 1 normal forwards;
     will-change: transform;
 }
 .row[data-ui-marquee] > .label:where([data-hn-ui-tree-item]) {