@threadlabs/looma 0.26.26 → 0.27.0

package/editor/chunks/extensions.js

@@ -6612,6 +6612,7 @@ function createLoomaMentionExtension(options = {}) {
 						selectedIndex,
 						query: props.query,
 						rect: props.clientRect?.() ?? null,
+						getRect: () => props.clientRect?.() ?? null,
 						loading,
 						highlight: (index) => {
 							if (index >= 0 && index < props.items.length) {
@@ -10697,6 +10698,7 @@ var LoomaSlashCommand = Extension.create({
 				selectedIndex,
 				query: props.query,
 				rect: props.clientRect?.() ?? null,
+				getRect: () => props.clientRect?.() ?? null,
 				select: (index) => {
 					if (revision !== generation || props !== currentProps || document !== this.editor.state.doc || !this.editor.isEditable || !isCurrent(props)) return;
 					const item = props.items[index];

package/editor/extensions/slash-command.d.ts

@@ -39,6 +39,8 @@ export interface LoomaSlashMenuSnapshot {
     selectedIndex: number;
     query: string;
     rect: DOMRect | null;
+    /** Re-measures the current virtual anchor after scrolling; valid for this snapshot only. */
+    getRect?: () => DOMRect | null;
     select: ((index: number) => void) | null;
     /** Keeps editor keyboard selection synchronized with a UI's hovered row. */
     highlight?: ((index: number) => void) | null;

package/editor/mention-contract.d.ts

@@ -44,6 +44,8 @@ export interface LoomaMentionMenuSnapshot {
     selectedIndex: number;
     query: string;
     rect: DOMRect | null;
+    /** Re-measures the current virtual anchor after scrolling; valid for this snapshot only. */
+    getRect?: () => DOMRect | null;
     loading: boolean;
     highlight: ((index: number) => void) | null;
     select: ((index: number) => void) | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.26",
+  "version": "0.27.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-card.css

@@ -69,6 +69,9 @@
     :scope[data-ui-card-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+      /* An accent edge keeps the corners on its side straight. */
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
       --_ui-card-surface: var(--ui-danger-soft);
     }
 

package/styles/ui-dialog.css

@@ -110,7 +110,9 @@
       align-items: center;
       gap: var(--ui-space-3);
       flex: none;
-      padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
+      /* The title's ink sits inside its line box and the taller close target. Balance that
+         visible top inset against the action row's bottom inset, not just the boxes. */
+      padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
@@ -211,7 +213,7 @@
         overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
-    :scope[open]::backdrop {
+    :scope[open]:modal::backdrop {
       background-color: var(--ui-overlay-backdrop);
       animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }

package/styles/ui-editor-mention-menu.css

@@ -1,6 +1,12 @@
 /* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
 @scope ([data-component~="ui-editor-mention-menu"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+    }
+
+    :scope {
       user-select: none;
     }
 

package/styles/ui-editor-slash-menu.css

@@ -1,6 +1,12 @@
 /* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
 @scope ([data-component~="ui-editor-slash-menu"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+    }
+
+    :scope {
       user-select: none;
     }
 

package/styles/ui-editor-table-context-menu.css

@@ -1,9 +1,15 @@
 /* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+    }
+
+    :scope {
       /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
       box-sizing: border-box;
-      min-width: 14rem;
+      min-width: min(14rem, calc(100vw - 24px));
       max-width: min(17rem, calc(100vw - 24px));
       max-height: min(28rem, calc(100vh - 24px));
       padding: var(--ui-space-2);
@@ -58,16 +64,22 @@
       color: var(--ui-danger);
     }
 
+    /* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
     .swatches {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      display: flex;
+      flex-wrap: wrap;
       gap: 3px;
     }
 
-    .swatch-button {
+    /* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
+    :scope .swatch-button {
       display: inline-flex;
       align-items: center;
       gap: var(--ui-space-2);
+      flex: 1 0 5rem;
+      min-width: 5rem;
+      max-width: calc((100% - 6px) / 3);
+      padding-inline-end: var(--ui-space-1);
     }
 
     .swatch {
@@ -114,7 +126,19 @@
       margin: var(--ui-space-1) 0;
     }
 
+    /* Separators divide sections, so none sits above the first. */
+    .sep:first-child {
+      display: none;
+    }
+
     :scope[hidden] {
       display: none;
     }
 }
+@scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component]) {
+/* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
+
+    /* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
+
+    /* Separators divide sections, so none sits above the first. */
+}

package/styles/ui-editor-table-toolbar.css

@@ -21,14 +21,6 @@
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
     }
 
-    .looma-editor__mobile-toolbar-shell :scope .menu {
-      top: auto;
-      right: 0;
-      bottom: calc(100% + var(--ui-space-2));
-      max-height: min(50dvh, 22rem);
-      overflow-y: auto;
-      overscroll-behavior: contain;
-    }
     :scope {
       display: inline-flex;
       align-items: center;
@@ -119,9 +111,9 @@
 
     .menu {
       box-sizing: border-box;
-      position: absolute;
-      top: calc(100% + var(--ui-space-2));
-      right: 0;
+      position: fixed;
+      inset: auto;
+      margin: 0;
       min-width: 12rem;
       max-width: min(17rem, calc(100vw - 24px));
       padding: var(--ui-space-1);

package/styles/ui-listbox.css

@@ -38,7 +38,10 @@
       outline: none;
     }
 
+    /* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
     .choices {
+      display: flex;
+      flex-direction: column;
       max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
     }
 
@@ -92,3 +95,6 @@
       display: none;
     }
 }
+@scope ([data-component~="ui-listbox"]) to ([data-component]) {
+/* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
+}

package/styles/ui-scroll-area.css

@@ -53,6 +53,19 @@
       max-block-size: 30rem;
     }
 
+    :scope[data-ui-scroll-area-state~="padding=xs"] {
+      padding: var(--ui-space-2);
+    }
+    :scope[data-ui-scroll-area-state~="padding=sm"] {
+      padding: var(--ui-space-3);
+    }
+    :scope[data-ui-scroll-area-state~="padding=md"] {
+      padding: var(--ui-space-5);
+    }
+    :scope[data-ui-scroll-area-state~="padding=lg"] {
+      padding: var(--ui-space-6);
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;

package/styles/ui-search-shell.css

@@ -76,7 +76,7 @@
       color: var(--ui-text-primary);
     }
 
-    dialog::backdrop {
+    dialog:modal::backdrop {
       background: var(--ui-overlay-backdrop);
     }
 

package/styles/ui-section.css

@@ -36,6 +36,9 @@
       --_ui-selection-context-text: var(--ui-text-primary);
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+      /* An accent edge keeps the corners on its side straight. */
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
       background: var(--ui-danger-soft);
     }
 

package/vanilla/UiDialog.js

@@ -62,7 +62,7 @@ export function createUiDialog(options = {}, html) {
     if (c === -1) {
       const x1 = true;
       const s1 = toAttribute(x1, "trim");
-      if (s1 !== r.v1) writeAttribute(r.a3, "trim", r.v1 = s1);
+      if (s1 !== r.v1) writeAttribute(r.a5, "trim", r.v1 = s1);
     }
     if (c & 516) {
       const x2 = hostState(["size","alert"], [v[9], v[2]]);
@@ -74,15 +74,15 @@ export function createUiDialog(options = {}, html) {
       if (true) {
         {
           r.b0 = undefined;
-          clearRegion(r.a1, r.e0);
+          clearRegion(r.a2, r.e0);
           if (t0) { r.b0 = m1(d); r.e0.before(r.b0.n); }
         }
       } else if (r.b0 !== undefined) p1(r.b0, c, d);
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
-    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a4, r.e1, "", J, false, undefined, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a6, r.e1, "", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
     else if (r.b1 !== undefined) p2(r.b1, c, d);
-    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a5, r.e2, "actions", J, false, undefined, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a8, r.e2, "actions", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m3(d); at.before(r.b2.n); } }
     else if (r.b2 !== undefined) p3(r.b2, c, d);
   };
@@ -92,13 +92,17 @@ export function createUiDialog(options = {}, html) {
   const t3 = t0.nextSibling;
   const t4 = t3.firstChild;
   const t5 = t4.firstChild;
-  const t6 = t3.nextSibling.firstChild;
-  const R = { n: element, a3: t4, v0: undefined, v1: null, v2: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a4: t5, e1: t5.nextSibling, b1: undefined, f1: undefined, a5: t6, e2: t6.nextSibling, b2: undefined, f2: undefined };
+  const t6 = t3.nextSibling;
+  const t7 = t6.firstChild;
+  const R = { n: element, a5: t4, v0: undefined, v1: null, v2: undefined, a2: t1, e0: t1.nextSibling, b0: undefined, a6: t5, e1: t5.nextSibling, b1: undefined, f1: undefined, a8: t7, e2: t7.nextSibling, b2: undefined, f2: undefined };
   const I = { B };
   const J = project(I, children, slots);
   I.R = new Set();
   attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
   manageProps(I);
+  I.r["header"] = t0;
   I.r["close"] = t2;
+  I.r["body"] = t3;
+  I.r["footer"] = t6;
   return element;
 }

package/vanilla/UiListbox.js

@@ -3,7 +3,7 @@ import { attachGeneratedController, buildTemplate, checkReference, clearRegion,
 import * as controller from "../components/ui-listbox/ui-listbox.js";
 import "../styles/ui-listbox.css";
 
-const T0 = ["",[],["ui-scroll-area",["class","choices"],2],["select",["class","fallback","aria-label","Choices"],4],1,["input",["class","validity","type","checkbox","aria-hidden","true","tabindex","-1"]]];
+const T0 = ["",[],["div",["class","choices"],["ui-scroll-area",[],2]],["select",["class","fallback","aria-label","Choices"],4],1,["input",["class","validity","type","checkbox","aria-hidden","true","tabindex","-1"]]];
 const T1 = ["div",["class","option","role","option","data-ui-choice-option",""],["span",[],0]];
 const T2 = ["",[]];
 const T3 = ["",[],2];
@@ -201,18 +201,19 @@ export function createUiListbox(options = {}, html) {
   };
   const t0 = element.firstChild;
   const t1 = t0.firstChild;
-  const t2 = t0.nextSibling;
-  const t3 = t2.firstChild;
-  const t4 = t2.nextSibling;
-  const t5 = t4.nextSibling.nextSibling;
-  const R = { n: element, a3: t2, a6: t5, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, v13: null, L0: new KeyedList(t1, t1.nextSibling, m1, p1, (o) => readMember(o, "index"), "choice"), a4: t3, e1: t3.nextSibling, b1: undefined, f1: undefined, a5: t4, e2: t4.nextSibling, b2: undefined };
+  const t2 = t1.firstChild;
+  const t3 = t0.nextSibling;
+  const t4 = t3.firstChild;
+  const t5 = t3.nextSibling;
+  const t6 = t5.nextSibling.nextSibling;
+  const R = { n: element, a3: t3, a6: t6, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, v13: null, L0: new KeyedList(t2, t2.nextSibling, m1, p1, (o) => readMember(o, "index"), "choice"), a4: t4, e1: t4.nextSibling, b1: undefined, f1: undefined, a5: t5, e2: t5.nextSibling, b2: undefined };
   const I = { B };
   const J = project(I, children, slots);
   I.R = new Set();
   attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
   manageProps(I);
-  I.r["choices"] = t0;
-  I.r["options"] = t2;
-  I.r["validity"] = t5;
+  I.r["choices"] = t1;
+  I.r["options"] = t3;
+  I.r["validity"] = t6;
   return element;
 }

package/vanilla/UiScrollArea.d.ts

@@ -8,6 +8,7 @@ export interface UiScrollAreaElement extends HTMLDivElement {
 export interface UiScrollAreaProps {
   fill?: boolean | null;
   orientation?: "vertical" | "horizontal" | null;
+  padding?: "none" | "xs" | "sm" | "md" | "lg" | null;
   size?: "content" | "sm" | "md" | "lg" | null;
   trim?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiScrollArea.js

@@ -7,7 +7,7 @@ const T0 = ["",[],["div",["class","content"],4]];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-scroll-area" };
-const D = { props: { "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "orientation": { "required":false,"values":["vertical","horizontal"],"default":"vertical", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "trim": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+const D = { props: { "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "orientation": { "required":false,"values":["vertical","horizontal"],"default":"vertical", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "padding": { "required":false,"values":["none","xs","sm","md","lg"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "trim": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
 const C = (host) => controller.default(host);
 
 export function createUiScrollArea(options = {}, html) {
@@ -19,7 +19,7 @@ export function createUiScrollArea(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-scroll-area");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null];
+  const v = [null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -30,8 +30,8 @@ export function createUiScrollArea(options = {}, html) {
   const p1 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 15) {
-      const x0 = hostState(["fill","orientation","size","trim"], [v[0], v[1], v[2], v[3]]);
+    if (c & 31) {
+      const x0 = hostState(["fill","orientation","size","padding","trim"], [v[0], v[1], v[3], v[2], v[4]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-scroll-area-state", (r.v0 = s0) === "" ? null : s0);
     }

package/vue/UiCard.vue

@@ -331,6 +331,9 @@ const hostState = computed(() =>
 [data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
   border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+  /* An accent edge keeps the corners on its side straight. */
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   --_ui-card-surface: var(--ui-danger-soft);
 }
 

package/vue/UiDialog.vue

@@ -228,7 +228,10 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const headerElement = useTemplateRef<HTMLElement>('headerElement')
 const closeElement = useTemplateRef<HTMLElement>('closeElement')
+const bodyElement = useTemplateRef<HTMLElement>('bodyElement')
+const footerElement = useTemplateRef<HTMLElement>('footerElement')
 const internalOpen = ref(false)
 const accessibleLabel = ref('Dialog')
 let guardedPrevious: any
@@ -324,7 +327,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   propNames: ['alert', 'closedby', 'for', 'label', 'modal', 'modeless', 'open', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
-  refs: { close: closeElement },
+  refs: { header: headerElement, close: closeElement, body: bodyElement, footer: footerElement },
   state: { internalOpen, accessibleLabel },
 })
 </script>
@@ -346,12 +349,12 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     :data-ui-dialog-state="hostState || undefined"
     ref="root"
   >
-    <header>
+    <header ref="headerElement">
       <h2 v-if="checkedProps.label" class="title">{{ checkedProps.label }}</h2>
       <button class="close" type="button" aria-label="Close" ref="closeElement"></button>
     </header>
-    <div class="body"><UiScrollArea :trim="true"><slot /></UiScrollArea></div>
-    <footer><slot name="actions" /></footer>
+    <div class="body" ref="bodyElement"><UiScrollArea :trim="true"><slot /></UiScrollArea></div>
+    <footer ref="footerElement"><slot name="actions" /></footer>
   </dialog>
 </template>
 
@@ -459,7 +462,10 @@ header {
   align-items: center;
   gap: var(--ui-space-3);
   flex: none;
-  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
+  /* The title's ink sits inside its line box and the taller close target. Balance that
+     visible top inset against the action row's bottom inset, not just the boxes. */
+  padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
+    var(--ui-space-5);
 }
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
@@ -569,7 +575,7 @@ footer:empty {
     overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
 
-[data-component~="ui-dialog"][open]::backdrop {
+[data-component~="ui-dialog"][open]:modal::backdrop {
   background-color: var(--ui-overlay-backdrop);
   animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base))
     var(--ui-motion-ease);

package/vue/UiEditorMentionMenu.vue

@@ -460,6 +460,12 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 </template>
 
 <style scoped>
+[data-component~="ui-editor-mention-menu"][popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
+
 [data-component~="ui-editor-mention-menu"] {
   user-select: none;
 }

package/vue/UiEditorSlashMenu.vue

@@ -394,6 +394,12 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 </template>
 
 <style scoped>
+[data-component~="ui-editor-slash-menu"][popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
+
 [data-component~="ui-editor-slash-menu"] {
   user-select: none;
 }

package/vue/UiEditorTableContextMenu.vue

@@ -654,10 +654,16 @@ function uniqueKeys<T>(
 </template>
 
 <style scoped>
+[data-component~="ui-editor-table-context-menu"][popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
+
 [data-component~="ui-editor-table-context-menu"] {
   /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
   box-sizing: border-box;
-  min-width: 14rem;
+  min-width: min(14rem, calc(100vw - 24px));
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
   padding: var(--ui-space-2);
@@ -712,16 +718,22 @@ function uniqueKeys<T>(
   color: var(--ui-danger);
 }
 
+/* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
 .swatches {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 3px;
 }
 
-.swatch-button {
+/* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
+[data-component~="ui-editor-table-context-menu"] .swatch-button {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
+  flex: 1 0 5rem;
+  min-width: 5rem;
+  max-width: calc((100% - 6px) / 3);
+  padding-inline-end: var(--ui-space-1);
 }
 
 .swatch {
@@ -768,6 +780,11 @@ function uniqueKeys<T>(
   margin: var(--ui-space-1) 0;
 }
 
+/* Separators divide sections, so none sits above the first. */
+.sep:first-child {
+  display: none;
+}
+
 [data-component~="ui-editor-table-context-menu"][hidden] {
   display: none;
 }

package/vue/UiEditorTableToolbar.vue

@@ -796,14 +796,6 @@ function uniqueKeys<T>(
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
 
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu {
-  top: auto;
-  right: 0;
-  bottom: calc(100% + var(--ui-space-2));
-  max-height: min(50dvh, 22rem);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
 [data-component~="ui-editor-table-toolbar"] {
   display: inline-flex;
   align-items: center;
@@ -894,9 +886,9 @@ function uniqueKeys<T>(
 
 .menu {
   box-sizing: border-box;
-  position: absolute;
-  top: calc(100% + var(--ui-space-2));
-  right: 0;
+  position: fixed;
+  inset: auto;
+  margin: 0;
   min-width: 12rem;
   max-width: min(17rem, calc(100vw - 24px));
   padding: var(--ui-space-1);

package/vue/UiListbox.vue

@@ -479,21 +479,23 @@ function uniqueKeys<T>(
     :data-values="reflectedProp('values', 'values', checkedProps.values, undefined, false)"
     ref="root"
   >
-    <UiScrollArea class="choices" ref="choicesElement"><KeyedBoundary><div
-          v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
-          :key="choice.index"
-          class="option"
-          role="option"
-          data-ui-choice-option=""
-          :data-multiple="checkedProps.multiple ? '' : undefined"
-          :id="concat(uid, '-option-', choice.index)"
-          :data-index="choice.index"
-          :aria-selected="choice.selected"
-          :aria-disabled="choice.disabled"
-          :class="{ active: choice.index === active }"
-        >
-          <span>{{ choice.label }}</span>
-        </div></KeyedBoundary></UiScrollArea>
+    <div class="choices">
+      <UiScrollArea ref="choicesElement"><KeyedBoundary><div
+            v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
+            :key="choice.index"
+            class="option"
+            role="option"
+            data-ui-choice-option=""
+            :data-multiple="checkedProps.multiple ? '' : undefined"
+            :id="concat(uid, '-option-', choice.index)"
+            :data-index="choice.index"
+            :aria-selected="choice.selected"
+            :aria-disabled="choice.disabled"
+            :class="{ active: choice.index === active }"
+          >
+            <span>{{ choice.label }}</span>
+          </div></KeyedBoundary></UiScrollArea>
+    </div>
     <select
       class="fallback"
       aria-label="Choices"
@@ -566,7 +568,10 @@ function uniqueKeys<T>(
   outline: none;
 }
 
+/* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
 .choices {
+  display: flex;
+  flex-direction: column;
   max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
 }
 

package/vue/UiScrollArea.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    padding: {
+        type: PropType<"none" | "xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -29,6 +33,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    padding: {
+        type: PropType<"none" | "xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -40,6 +48,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     fill: boolean | null;
     size: "sm" | "md" | "lg" | "content" | null;
+    padding: "none" | "xs" | "sm" | "md" | "lg" | null;
     trim: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;