@threadlabs/looma 0.22.2 → 0.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "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/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/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/components.css

@@ -2837,10 +2837,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 +2849,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 +2860,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 +2905,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 +2913,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 +2936,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 +2983,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 +3012,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;
 }