@threadlabs/looma 0.26.26 → 0.27.1

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.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-badge.css

@@ -279,6 +279,15 @@
       box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
     }
 
+    /* A count can keep its containing control's contrasting ink instead of reversing it.
+       The faint fill is painted over that control; no second rim or shadow competes with it. */
+    :scope[data-ui-badge-state~="variant=overlay"] {
+      --_badge-outline-surface: var(--ui-badge-surface, color-mix(in srgb, currentColor 10%, transparent));
+      color: var(--ui-badge-text, inherit);
+      border-color: var(--ui-badge-border, transparent);
+      box-shadow: none;
+    }
+
     /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
        surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
     :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
@@ -366,6 +375,10 @@
       text-box-trim: none;
     }
 
+    :scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"] {
+      --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
+    }
+
     :scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
       --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
     }
@@ -519,6 +532,9 @@
     /* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
        Dark controls retain a shaded surface and theme ink with a quieter rim. */
 
+    /* A count can keep its containing control's contrasting ink instead of reversing it.
+       The faint fill is painted over that control; no second rim or shadow competes with it. */
+
     /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
        surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
 

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

@@ -9,7 +9,7 @@ export interface UiBadgeProps {
   shape?: "pill" | "tag" | "dot" | "square" | "circle" | null;
   size?: "xs" | "sm" | "md" | "lg" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
-  variant?: "solid" | "subtle" | "outline" | "inverse" | null;
+  variant?: "solid" | "subtle" | "outline" | "inverse" | "overlay" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiBadge.js

@@ -7,7 +7,7 @@ const T1 = ["",[]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-badge" };
-const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline","inverse"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline","inverse","overlay"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiBadge(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

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

@@ -19,7 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | "overlay" | null>;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -36,14 +36,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | "overlay" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
     shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
     size: "xs" | "sm" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
-    variant: "solid" | "subtle" | "outline" | "inverse" | null;
+    variant: "solid" | "subtle" | "outline" | "inverse" | "overlay" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiBadge.vue

@@ -22,7 +22,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg.',
+        'Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg. A small overlay circle is 20px.',
       values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
@@ -40,8 +40,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
-      values: ['solid', 'subtle', 'outline', 'inverse'],
+        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. overlay inherits the containing filled control\'s text colour on a faint translucent fill, without a visible rim or shadow. Its small circle is\n      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
+      values: ['solid', 'subtle', 'outline', 'inverse', 'overlay'],
       default: 'subtle',
     },
   },
@@ -59,7 +59,9 @@ const props = defineProps({
     default: 'neutral',
   },
   variant: {
-    type: null as unknown as PropType<'solid' | 'subtle' | 'outline' | 'inverse' | null>,
+    type: null as unknown as PropType<
+      'solid' | 'subtle' | 'outline' | 'inverse' | 'overlay' | null
+    >,
     default: 'subtle',
   },
 })
@@ -91,13 +93,13 @@ const checkedProps = computed(() => ({
     'tone',
     acceptedProps,
   ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
-  variant: checkedProp<'solid' | 'subtle' | 'outline' | 'inverse'>(
+  variant: checkedProp<'solid' | 'subtle' | 'outline' | 'inverse' | 'overlay'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
     acceptedProps,
-  ) as 'solid' | 'subtle' | 'outline' | 'inverse',
+  ) as 'solid' | 'subtle' | 'outline' | 'inverse' | 'overlay',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -533,6 +535,18 @@ const hostState = computed(() =>
   box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
 }
 
+/* A count can keep its containing control's contrasting ink instead of reversing it.
+   The faint fill is painted over that control; no second rim or shadow competes with it. */
+[data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"] {
+  --_badge-outline-surface: var(
+    --ui-badge-surface,
+    color-mix(in srgb, currentColor 10%, transparent)
+  );
+  color: var(--ui-badge-text, inherit);
+  border-color: var(--ui-badge-border, transparent);
+  box-shadow: none;
+}
+
 /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
    surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
 [data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
@@ -627,6 +641,10 @@ const hostState = computed(() =>
   text-box-trim: none;
 }
 
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"] {
+  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
   --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
 }

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