@threadlabs/looma 0.31.0 → 0.31.2

package/vue/components.css

@@ -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. */
 
@@ -4349,144 +4873,45 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
       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[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;
+      box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
 }
-.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);
+: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))
+      );
 }
-.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;
+.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;
 }
-:scope[data-ui-form-field-state~="invalid"] .error:where([data-hn-ui-form-field]) {
-    display: contents;
+.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;
 }
-.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"]
+    .strip:where([data-hn-ui-editor-toolbar]) {
+    scroll-snap-type: x mandatory;
 }
-:scope[hidden]:where([data-hn-ui-form-field]) {
+:scope[hidden]:where([data-hn-ui-editor-toolbar]) {
     display: none;
 }
 }
@@ -5237,237 +5662,19 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
 @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);
-}
-: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;
+      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: "*";
@@ -10438,6 +10438,30 @@ html[data-ui-input-modality="touch"]
 :is([data-component~="ui-editor-surface"], .ui-editor-surface) .ProseMirror[data-link-navigation] a[href] {
   cursor: pointer;
 }
+
+/* Inline table affordances share the document's scroll chain; popups use the top layer. */
+.looma-editor__table-overlay-shell {
+  position: absolute;
+  z-index: var(--ui-editor-overlay-z-index, 299);
+  overflow: visible;
+  pointer-events: none;
+}
+
+/* The toolbar follows its table, lifting inside the document scroller only when needed. */
+[data-looma-table-toolbar-host] { display: contents; }
+.looma-editor__table-toolbar-shell {
+  position: sticky;
+  bottom: var(--ui-space-3);
+  z-index: var(--ui-editor-popover-z-index, 300);
+  width: max-content;
+  max-width: 100%;
+  margin: var(--ui-space-3) auto 0;
+  overflow-x: auto;
+}
+
+.looma-editor .ProseMirror [data-looma-table-block] + p {
+  margin-top: var(--ui-editor-table-following-gap, var(--ui-space-4));
+}
 /**
  * Looma editor styles (tokens-based).
  * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.
@@ -10738,7 +10762,6 @@ html[data-ui-input-modality="touch"]
 
 .looma-editor__table-picker-popover,
 .looma-editor__chip-popover,
-.looma-editor__table-toolbar-shell,
 .looma-editor__table-menu-shell {
   z-index: var(--ui-editor-popover-z-index, 300);
 }
@@ -10768,9 +10791,7 @@ html[data-ui-input-modality="touch"]
   outline-offset: var(--ui-focus-width);
 }
 
-.looma-editor__table-toolbar-shell,
-.looma-editor__table-menu-shell,
-.looma-editor__table-overlay-shell {
+.looma-editor__table-menu-shell {
   position: fixed;
 }
 
@@ -10836,12 +10857,6 @@ html[data-ui-input-modality="touch"]
   color: var(--ui-text-primary, #111827);
 }
 
-.looma-editor__table-overlay-shell {
-  z-index: var(--ui-editor-overlay-z-index, 299);
-  overflow: visible;
-  pointer-events: none;
-}
-
 .looma-editor .ProseMirror .looma-mention {
   padding: 0.08em 0.28em;
   color: var(--ui-editor-mention-color, var(--ui-accent-active, var(--ui-accent-solid)));