@threadlabs/looma 0.22.2 → 0.22.4

package/package.json

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

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

@@ -14,6 +14,19 @@
       background: var(--ui-accent-subtle);
     }
 
+    /* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+       the surface and a fine accent ring, so the initials stay visible. */
+    :scope[aria-selected="true"] .avatar {
+      background: var(--ui-surface);
+      box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
+    }
+
+    /* A slotted Avatar (a person's photo) is its own circle. */
+    :scope .avatar:has(> [data-component~="ui-avatar"]) {
+      background: none;
+      box-shadow: none;
+    }
+
     .avatar {
       display: inline-flex;
       align-items: center;
@@ -55,3 +68,9 @@
       display: none;
     }
 }
+@scope ([data-component~="ui-editor-mention-menu-item"]) to ([data-component]) {
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+       the surface and a fine accent ring, so the initials stay visible. */
+
+    /* A slotted Avatar (a person's photo) is its own circle. */
+}

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

@@ -83,6 +83,13 @@
       background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
     }
 
+    /* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+       the surface and a fine accent ring, so the initials stay visible. */
+    .item.active .avatar {
+      background: var(--ui-surface);
+      box-shadow: inset 0 0 0 1px var(--ui-accent-soft, var(--ui-accent-subtle));
+    }
+
     .avatar {
       display: inline-flex;
       align-items: center;
@@ -143,6 +150,9 @@
     }
 }
 @scope ([data-component~="ui-editor-mention-menu"]) to ([data-component]) {
-@media (max-width: 767px) {
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+       the surface and a fine accent ring, so the initials stay visible. */
+
+    @media (max-width: 767px) {
     }
 }

package/styles/ui-tooltip.css

@@ -91,6 +91,29 @@
       box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
     }
 
+    /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+       it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+    .shortcut {
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: var(--ui-space-2);
+      padding-inline-start: var(--ui-space-2);
+      border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+      color: color-mix(in oklab, currentColor 72%, transparent);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-normal);
+      white-space: nowrap;
+      vertical-align: baseline;
+    }
+
+    .shortcut:empty {
+      display: none;
+    }
+
+    .shortcut kbd {
+      font: inherit;
+    }
+
     :scope[data-ui-tooltip-state~="inverse"] .surface {
       --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
@@ -193,6 +216,9 @@
 @scope ([data-component~="ui-tooltip"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+       it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+
     /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
      * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
 

package/vanilla/UiTooltip.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";
 
-const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"top"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500},"trigger":{"type":{"kind":"terminal","name":"keyword"},"values":["hover","click","focus"],"required":false,"target":{"attribute":"trigger"},"default":"hover"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"top"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500},"trigger":{"type":{"kind":"terminal","name":"keyword"},"values":["hover","click","focus"],"required":false,"target":{"attribute":"trigger"},"default":"hover"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTooltip(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -26,6 +26,18 @@ export function createUiTooltip(options = {}) {
     }
   } else {
   }
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "shortcut");
+  if (slots["shortcut"] ?? [].length > 0) {
+    for (const child of slots["shortcut"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "shortcut"]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element0.append(element1);
   element.append(element0);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,

package/vue/UiEditorMentionMenu.vue

@@ -450,6 +450,13 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
 
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+   the surface and a fine accent ring, so the initials stay visible. */
+.item.active .avatar {
+  background: var(--ui-surface);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-soft, var(--ui-accent-subtle));
+}
+
 .avatar {
   display: inline-flex;
   align-items: center;

package/vue/UiEditorMentionMenuItem.vue

@@ -147,6 +147,19 @@ if (
   background: var(--ui-accent-subtle);
 }
 
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+   the surface and a fine accent ring, so the initials stay visible. */
+[data-component~="ui-editor-mention-menu-item"][aria-selected="true"] .avatar {
+  background: var(--ui-surface);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
+}
+
+/* A slotted Avatar (a person's photo) is its own circle. */
+[data-component~="ui-editor-mention-menu-item"] .avatar:has(> [data-component~="ui-avatar"]) {
+  background: none;
+  box-shadow: none;
+}
+
 .avatar {
   display: inline-flex;
   align-items: center;

package/vue/UiTooltip.d.ts

@@ -1,7 +1,9 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    shortcut?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     for: {

package/vue/UiTooltip.vue

@@ -312,7 +312,10 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     :data-trigger="reflectedProp('trigger', 'trigger', checkedProps.trigger, undefined, false)"
     :data-ui-tooltip-state="hostState || undefined"
     ref="root"
-  ><div class="surface"><slot /></div></span>
+  ><div class="surface">
+      <slot />
+      <span class="shortcut"><slot name="shortcut" /></span>
+    </div></span>
 </template>
 
 <style scoped>
@@ -410,6 +413,29 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   );
 }
 
+/* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+   it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+.shortcut {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: var(--ui-space-2);
+  padding-inline-start: var(--ui-space-2);
+  border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+  color: color-mix(in oklab, currentColor 72%, transparent);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-normal);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+.shortcut:empty {
+  display: none;
+}
+
+.shortcut kbd {
+  font: inherit;
+}
+
 [data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface {
   --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));

package/vue/chunks/UiEditorMentionMenu.js

@@ -511,6 +511,6 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-40241d5b"]]);
+}), [["__scopeId", "data-v-4e4cf8c6"]]);
 //#endregion
 export { UiEditorMentionMenu_default as t };

package/vue/chunks/UiEditorMentionMenuItem.js

@@ -123,6 +123,6 @@ var UiEditorMentionMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0efb3ba1"]]);
+}), [["__scopeId", "data-v-58580723"]]);
 //#endregion
 export { UiEditorMentionMenuItem_default as t };

package/vue/chunks/UiTooltip.js

@@ -15,6 +15,7 @@ var _hoisted_1 = [
 	"data-ui-tooltip-state"
 ];
 var _hoisted_2 = { class: "surface" };
+var _hoisted_3 = { class: "shortcut" };
 //#endregion
 //#region .build/vue/UiTooltip.vue
 var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -253,12 +254,12 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"data-ui-tooltip-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut", {}, void 0, true)])])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...checkedProps.value }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0ec1a9c8"]]);
+}), [["__scopeId", "data-v-3762dc6a"]]);
 //#endregion
 export { UiTooltip_default as t };

package/vue/components.css

@@ -1484,7 +1484,7 @@ input[data-v-101ef53e]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-tooltip"][data-v-0ec1a9c8] {
+[data-component~="ui-tooltip"][data-v-3762dc6a] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-tooltip-border: var(--ui-tooltip-border);
   --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -1516,7 +1516,7 @@ input[data-v-101ef53e]:focus-visible {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-.surface[data-v-0ec1a9c8] {
+.surface[data-v-3762dc6a] {
   --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
   position: relative;
   box-sizing: border-box;
@@ -1534,7 +1534,28 @@ input[data-v-101ef53e]:focus-visible {
     var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
   );
 }
-[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-0ec1a9c8] {
+
+/* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+   it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+.shortcut[data-v-3762dc6a] {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: var(--ui-space-2);
+  padding-inline-start: var(--ui-space-2);
+  border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+  color: color-mix(in oklab, currentColor 72%, transparent);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-normal);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+.shortcut[data-v-3762dc6a]:empty {
+  display: none;
+}
+.shortcut kbd[data-v-3762dc6a] {
+  font: inherit;
+}
+[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-3762dc6a] {
   --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
@@ -1542,7 +1563,7 @@ input[data-v-101ef53e]:focus-visible {
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-.surface[data-v-0ec1a9c8]::after {
+.surface[data-v-3762dc6a]::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -1558,7 +1579,7 @@ input[data-v-101ef53e]:focus-visible {
   border-end-end-radius: 1px;
   transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-3762dc6a]::after {
   inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -1568,59 +1589,59 @@ input[data-v-101ef53e]:focus-visible {
   border-end-end-radius: 0;
   border-start-start-radius: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-0ec1a9c8]::after,
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-3762dc6a]::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-3762dc6a]::after {
   inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
   inset-block-end: auto;
   border: 0 solid var(--_tooltip-line);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: auto;
   inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   border-inline-end-width: 1px;
   border-block-start-width: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-inline-end: auto;
   border-inline-start-width: 1px;
   border-block-end-width: 1px;
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]
-  .surface[data-v-0ec1a9c8]::after,
+  .surface[data-v-3762dc6a]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="start"]
-  .surface[data-v-0ec1a9c8]::after {
+  .surface[data-v-3762dc6a]::after {
   inset-block-start: var(--ui-space-3);
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="end"]
-  .surface[data-v-0ec1a9c8]::after,
+  .surface[data-v-3762dc6a]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="end"]
-  .surface[data-v-0ec1a9c8]::after {
+  .surface[data-v-3762dc6a]::after {
   inset-block-start: auto;
   inset-block-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-v-0ec1a9c8]:popover-open {
+[data-component~="ui-tooltip"][data-v-3762dc6a]:popover-open {
   opacity: 1;
   transform: translateY(0);
 }
 @starting-style {
-[data-component~="ui-tooltip"][data-v-0ec1a9c8]:popover-open {
+[data-component~="ui-tooltip"][data-v-3762dc6a]:popover-open {
     opacity: 0;
     transform: translateY(4px);
 }
 }
-[data-component~="ui-tooltip"][hidden][data-v-0ec1a9c8] {
+[data-component~="ui-tooltip"][hidden][data-v-3762dc6a] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-tooltip"][data-v-0ec1a9c8] {
+[data-component~="ui-tooltip"][data-v-3762dc6a] {
     transition: none;
 }
 }
@@ -2837,10 +2858,10 @@ from {
   display: none;
 }
 
-[data-component~="ui-editor-mention-menu"][data-v-40241d5b] {
+[data-component~="ui-editor-mention-menu"][data-v-4e4cf8c6] {
   user-select: none;
 }
-[data-component~="ui-editor-mention-menu"][data-v-40241d5b] {
+[data-component~="ui-editor-mention-menu"][data-v-4e4cf8c6] {
   display: flex;
   overflow: hidden;
   flex-direction: column;
@@ -2849,7 +2870,7 @@ from {
   border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
-.header[data-v-40241d5b] {
+.header[data-v-4e4cf8c6] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2860,23 +2881,23 @@ from {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }
-[data-component~="ui-editor-mention-menu"] > .header[data-v-40241d5b]:empty,
-[data-component~="ui-editor-mention-menu"] > .empty[data-v-40241d5b]:empty {
+[data-component~="ui-editor-mention-menu"] > .header[data-v-4e4cf8c6]:empty,
+[data-component~="ui-editor-mention-menu"] > .empty[data-v-4e4cf8c6]:empty {
   display: none;
 }
-.empty[data-v-40241d5b] {
+.empty[data-v-4e4cf8c6] {
   padding: var(--ui-space-3);
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
 }
-.hint[data-v-40241d5b] {
+.hint[data-v-4e4cf8c6] {
   overflow: hidden;
   color: var(--ui-text-muted);
   font-weight: var(--ui-font-normal);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.list[data-v-40241d5b] {
+.list[data-v-4e4cf8c6] {
   max-height: 280px;
   padding: var(--ui-space-1) 0;
   margin: 0;
@@ -2905,7 +2926,7 @@ from {
     -1px calc(100% - var(--_ui-scroll-fade-size)),
     calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-.item[data-v-40241d5b] {
+.item[data-v-4e4cf8c6] {
   display: flex;
   align-items: center;
   min-height: 44px;
@@ -2913,10 +2934,17 @@ from {
   gap: var(--ui-space-3);
   cursor: pointer;
 }
-.item.active[data-v-40241d5b] {
+.item.active[data-v-4e4cf8c6] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-.avatar[data-v-40241d5b] {
+
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+   the surface and a fine accent ring, so the initials stay visible. */
+.item.active .avatar[data-v-4e4cf8c6] {
+  background: var(--ui-surface);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-soft, var(--ui-accent-subtle));
+}
+.avatar[data-v-4e4cf8c6] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2929,45 +2957,45 @@ from {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }
-.body[data-v-40241d5b] {
+.body[data-v-4e4cf8c6] {
   display: flex;
   min-width: 0;
   flex-direction: column;
 }
-.label[data-v-40241d5b],
-.detail[data-v-40241d5b] {
+.label[data-v-4e4cf8c6],
+.detail[data-v-4e4cf8c6] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.label[data-v-40241d5b] {
+.label[data-v-4e4cf8c6] {
   color: var(--ui-text-primary);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-medium);
 }
-.detail[data-v-40241d5b],
-.loading[data-v-40241d5b] {
+.detail[data-v-4e4cf8c6],
+.loading[data-v-4e4cf8c6] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-xs);
 }
-.loading[data-v-40241d5b] {
+.loading[data-v-4e4cf8c6] {
   min-height: 44px;
   padding: var(--ui-space-3);
 }
 @media (max-width: 767px) {
-[data-component~="ui-editor-mention-menu"][data-v-40241d5b] {
+[data-component~="ui-editor-mention-menu"][data-v-4e4cf8c6] {
     border-bottom: 0;
     border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
 }
-.list[data-v-40241d5b] {
+.list[data-v-4e4cf8c6] {
     max-height: calc(60dvh - 48px);
 }
 }
-[data-component~="ui-editor-mention-menu"][hidden][data-v-40241d5b] {
+[data-component~="ui-editor-mention-menu"][hidden][data-v-4e4cf8c6] {
   display: none;
 }
 
-[data-component~="ui-editor-mention-menu-item"][data-v-0efb3ba1] {
+[data-component~="ui-editor-mention-menu-item"][data-v-58580723] {
   display: flex;
   align-items: center;
   min-block-size: 44px;
@@ -2976,10 +3004,23 @@ from {
   cursor: pointer;
   list-style: none;
 }
-[data-component~="ui-editor-mention-menu-item"][aria-selected="true"][data-v-0efb3ba1] {
+[data-component~="ui-editor-mention-menu-item"][aria-selected="true"][data-v-58580723] {
   background: var(--ui-accent-subtle);
 }
-.avatar[data-v-0efb3ba1] {
+
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+   the surface and a fine accent ring, so the initials stay visible. */
+[data-component~="ui-editor-mention-menu-item"][aria-selected="true"] .avatar[data-v-58580723] {
+  background: var(--ui-surface);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
+}
+
+/* A slotted Avatar (a person's photo) is its own circle. */
+[data-component~="ui-editor-mention-menu-item"] .avatar[data-v-58580723]:has(> [data-component~="ui-avatar"]) {
+  background: none;
+  box-shadow: none;
+}
+.avatar[data-v-58580723] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2992,26 +3033,26 @@ from {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }
-.body[data-v-0efb3ba1] {
+.body[data-v-58580723] {
   display: flex;
   min-inline-size: 0;
   flex-direction: column;
 }
-.label[data-v-0efb3ba1], .detail[data-v-0efb3ba1] {
+.label[data-v-58580723], .detail[data-v-58580723] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.label[data-v-0efb3ba1] {
+.label[data-v-58580723] {
   color: var(--ui-text-primary);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-medium);
 }
-.detail[data-v-0efb3ba1] {
+.detail[data-v-58580723] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-xs);
 }
-[data-component~="ui-editor-mention-menu-item"][hidden][data-v-0efb3ba1] {
+[data-component~="ui-editor-mention-menu-item"][hidden][data-v-58580723] {
   display: none;
 }