@threadlabs/looma 0.26.25 → 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.25",
+  "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-icon-button.css

@@ -135,6 +135,13 @@
       pointer-events: none;
     }
 
+    :scope[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
+      inline-size: 2px;
+      block-size: 20px;
+      background: var(--ui-border-strong);
+      opacity: 1;
+    }
+
     :scope[data-ui-icon-button-state~="anticipatory"]:disabled::before {
       opacity: 0;
     }
@@ -189,7 +196,7 @@
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-        transform var(--ui-motion-fast) var(--ui-motion-ease);
+        scale var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     @media (hover: none), (pointer: coarse) {
@@ -319,7 +326,7 @@
     }
 
     :scope:active:enabled:not([aria-disabled="true"]) {
-      transform: scale(var(--ui-icon-button-active-scale, 0.96));
+      scale: var(--ui-icon-button-active-scale, 0.96);
     }
 
     :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) {

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/UiIconButton.d.ts

@@ -8,6 +8,7 @@ export interface UiIconButtonElement extends HTMLButtonElement {
 export interface UiIconButtonProps {
   anticipatory?: boolean | null;
   disabled?: boolean | null;
+  guide?: "dot" | "bar" | null;
   label?: string | null;
   loading?: boolean | null;
   matchButton?: boolean | null;

package/vanilla/UiIconButton.js

@@ -8,7 +8,7 @@ const T1 = ["ui-spinner",["size","sm"]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-icon-button" };
-const D = { props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiIconButton(options = {}, html) {
@@ -21,7 +21,7 @@ export function createUiIconButton(options = {}, html) {
   if (!element.hasAttribute("type")) element.setAttribute("type", "button");
   element.setAttribute("data-component", "ui-icon-button");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null, null, null, null, null, null];
+  const v = [null, null, null, null, null, null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, ["matchButton"], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -45,35 +45,35 @@ export function createUiIconButton(options = {}, html) {
       const s0 = toAttribute(x0, "disabled");
       if (s0 !== r.v0) writeAttribute(r.n, "disabled", r.v0 = s0);
     }
-    if (c & 4) {
-      const x1 = v[2];
+    if (c & 8) {
+      const x1 = v[3];
       const s1 = toAttribute(x1, "aria-label");
       if (s1 !== r.v1) writeAttribute(r.n, "aria-label", r.v1 = s1);
     }
-    if (c & 16) {
-      const x2 = v[4];
+    if (c & 32) {
+      const x2 = v[5];
       const s2 = toAttribute(x2, "data-match-button");
       if (s2 !== r.v2) writeAttribute(r.n, "data-match-button", r.v2 = s2);
     }
-    if (c & 1073741864) {
-      const x3 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[3]) || truthy(v[5]))]));
+    if (c & 1073741904) {
+      const x3 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[4]) || truthy(v[6]))]));
       if (x3 !== NONCONFORMING) {
         const s3 = toAttribute(x3, "aria-disabled");
         if (s3 !== r.v3) writeAttribute(r.n, "aria-disabled", r.v3 = s3);
       }
     }
-    if (c & 40) {
-      const x4 = (truthy(v[3]) || truthy(v[5]));
+    if (c & 80) {
+      const x4 = (truthy(v[4]) || truthy(v[6]));
       const s4 = toAttribute(x4, "aria-busy");
       if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
     }
-    if (c & 1017) {
-      const x5 = hostState(["tone","anticipatory","variant","loading","pending","size","matchButton","round"], [v[8], v[0], v[9], v[3], v[5], v[7], v[4], v[6]]);
+    if (c & 2037) {
+      const x5 = hostState(["tone","anticipatory","guide","variant","loading","pending","size","matchButton","round"], [v[9], v[0], v[2], v[10], v[4], v[6], v[8], v[5], v[7]]);
       const s5 = x5;
       if (s5 !== r.v5) writeAttribute(r.n, "data-ui-icon-button-state", (r.v5 = s5) === "" ? null : s5);
     }
-    if (c & 40) {
-      const t0 = (truthy(v[3]) || truthy(v[5]));
+    if (c & 80) {
+      const t0 = (truthy(v[4]) || truthy(v[6]));
       if (true) {
         {
           r.b0 = undefined;

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;
 }