@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiEditorLinkCard.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -258,12 +258,13 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
 <template>
   <div
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-detail="reflectedProp('detail', 'detail', checkedProps.detail, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-open-href="reflectedProp('openHref', 'open-href', checkedProps.openHref, undefined, false)"
-    :data-target-label="reflectedProp('targetLabel', 'target-label', checkedProps.targetLabel, undefined, false)"
+    :data-ui-editor-link-card-prop-detail="reflectedProp('detail', 'detail', checkedProps.detail, undefined, false)"
+    :data-ui-editor-link-card-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-editor-link-card-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-editor-link-card-prop-open-href="reflectedProp('openHref', 'open-href', checkedProps.openHref, undefined, false)"
+    :data-ui-editor-link-card-prop-target-label="reflectedProp('targetLabel', 'target-label', checkedProps.targetLabel, undefined, false)"
     ref="root"
   >
     <UiCard variant="elevated" padding="xs" size="content"><UiCluster

package/vue/UiEditorLinkForm.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -447,19 +447,20 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
   <form
     aria-label="Edit link"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-error="reflectedProp('error', 'error', checkedProps.error, undefined, false)"
-    :data-existing="reflectedProp('existing', 'existing', checkedProps.existing, undefined, false)"
-    :data-mode="reflectedProp('mode', 'mode', checkedProps.mode, undefined, false)"
-    :data-new-tab="reflectedProp('newTab', 'new-tab', checkedProps.newTab, undefined, false)"
-    :data-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
-    :data-results="reflectedProp('results', 'results', checkedProps.results, undefined, false)"
-    :data-searchable="reflectedProp('searchable', 'searchable', checkedProps.searchable, undefined, false)"
-    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
-    :data-status="reflectedProp('status', 'status', checkedProps.status, undefined, false)"
-    :data-text="reflectedProp('text', 'text', checkedProps.text, undefined, false)"
-    :data-text-editable="reflectedProp('textEditable', 'text-editable', checkedProps.textEditable, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-editor-link-form-prop-error="reflectedProp('error', 'error', checkedProps.error, undefined, false)"
+    :data-ui-editor-link-form-prop-existing="reflectedProp('existing', 'existing', checkedProps.existing, undefined, false)"
+    :data-ui-editor-link-form-prop-mode="reflectedProp('mode', 'mode', checkedProps.mode, undefined, false)"
+    :data-ui-editor-link-form-prop-new-tab="reflectedProp('newTab', 'new-tab', checkedProps.newTab, undefined, false)"
+    :data-ui-editor-link-form-prop-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
+    :data-ui-editor-link-form-prop-results="reflectedProp('results', 'results', checkedProps.results, undefined, false)"
+    :data-ui-editor-link-form-prop-searchable="reflectedProp('searchable', 'searchable', checkedProps.searchable, undefined, false)"
+    :data-ui-editor-link-form-prop-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-ui-editor-link-form-prop-status="reflectedProp('status', 'status', checkedProps.status, undefined, false)"
+    :data-ui-editor-link-form-prop-text="reflectedProp('text', 'text', checkedProps.text, undefined, false)"
+    :data-ui-editor-link-form-prop-text-editable="reflectedProp('textEditable', 'text-editable', checkedProps.textEditable, undefined, false)"
+    :data-ui-editor-link-form-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     ref="root"
   >
     <UiStack gap="s"><UiText as="h3" size="sm" weight="semibold">{{ text(heading) }}</UiText>
@@ -506,7 +507,7 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
             checkedProps.status
           }}</UiText>
           <KeyedBoundary><UiSearchResultRow
-              v-for="result in uniqueKeys(checkedProps.results, (result, index, loop) => result.id)"
+              v-for="result in uniqueKeys(checkedProps.results ?? [], (result, index, loop) => result.id)"
               :key="result.id"
               density="compact"
               data-link-result=""

package/vue/UiEditorMentionMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -344,56 +344,68 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     class="ui-editor-mention-menu"
     role="listbox"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-editor-mention-menu
     :aria-busy="checkedProps.loading ?? undefined"
     :hidden="!visible"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-anchor-rect="reflectedProp('anchorRect', 'anchor-rect', checkedProps.anchorRect, undefined, false)"
-    :data-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
-    :data-loading-label="reflectedProp('loadingLabel', 'loading-label', checkedProps.loadingLabel, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
-    :data-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
-    :data-selected-index="reflectedProp('selectedIndex', 'selected-index', checkedProps.selectedIndex, undefined, false)"
+    :data-ui-editor-mention-menu-prop-anchor-rect="reflectedProp('anchorRect', 'anchor-rect', checkedProps.anchorRect, undefined, false)"
+    :data-ui-editor-mention-menu-prop-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
+    :data-ui-editor-mention-menu-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-editor-mention-menu-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-ui-editor-mention-menu-prop-loading-label="reflectedProp('loadingLabel', 'loading-label', checkedProps.loadingLabel, undefined, false)"
+    :data-ui-editor-mention-menu-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-editor-mention-menu-prop-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
+    :data-ui-editor-mention-menu-prop-selected-index="reflectedProp('selectedIndex', 'selected-index', checkedProps.selectedIndex, undefined, false)"
     ref="root"
   >
-    <div class="header"><slot name="header" /></div>
-    <div v-if="searching" class="loading" role="status">{{ checkedProps.loadingLabel }}</div>
-    <ul v-if="!searching" class="list" role="presentation">
+    <div class="header" data-hn-ui-editor-mention-menu><slot name="header" /></div>
+    <div v-if="searching" class="loading" role="status" data-hn-ui-editor-mention-menu>
+      {{ checkedProps.loadingLabel }}
+    </div>
+    <ul v-if="!searching" class="list" role="presentation" data-hn-ui-editor-mention-menu>
       <li
         v-for="(row, index) in rows"
         :key="index"
         class="item"
         role="option"
+        data-hn-ui-editor-mention-menu
         :id="concat(prefix, '-option-', index)"
         :aria-selected="index === active"
         :data-index="index"
         :data-value="row.id"
         :class="{ active: index === active }"
       >
-        <span class="avatar" aria-hidden="true">{{ row.initials }}</span>
-        <span class="body"><span class="label">{{ row.label }}</span>
-          <span v-if="row.detail" class="detail">{{ row.detail }}</span></span>
+        <span class="avatar" aria-hidden="true" data-hn-ui-editor-mention-menu>{{
+          row.initials
+        }}</span>
+        <span class="body" data-hn-ui-editor-mention-menu><span
+            class="label"
+            data-hn-ui-editor-mention-menu
+          >{{ row.label }}</span>
+          <span v-if="row.detail" class="detail" data-hn-ui-editor-mention-menu>{{
+            row.detail
+          }}</span></span>
       </li>
       <slot />
     </ul>
-    <div class="empty" ref="emptyElement"><slot name="empty" /></div>
+    <div class="empty" data-hn-ui-editor-mention-menu ref="emptyElement"><slot name="empty" /></div>
   </div>
 </template>
 
 <style scoped>
 /* 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 (.ui-editor-mention-menu) {
-  :scope:where(:scope):is([popover]) {
+@scope (.ui-editor-mention-menu) to ([data-hn]) {
+  :global(:scope[popover]:where([data-hn-ui-editor-mention-menu])) {
     position: fixed;
     inset: auto;
     margin: 0;
   }
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-editor-mention-menu])) {
     user-select: none;
   }
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-editor-mention-menu])) {
     display: flex;
     overflow: hidden;
     flex-direction: column;
@@ -402,7 +414,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     border-radius: var(--ui-radius-dialog);
     box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
   }
-  .header {
+  :global(.header:where([data-hn-ui-editor-mention-menu])) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -413,22 +425,23 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-semibold);
   }
-  :scope > .header:empty, :scope > .empty:empty {
+  :global(:scope > .header:empty:where([data-hn-ui-editor-mention-menu])),
+  :global(:scope > .empty:empty:where([data-hn-ui-editor-mention-menu])) {
     display: none;
   }
-  .empty {
+  :global(.empty:where([data-hn-ui-editor-mention-menu])) {
     padding: var(--ui-space-3);
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
-  .hint {
+  :global(.hint:where([data-hn-ui-editor-mention-menu])) {
     overflow: hidden;
     color: var(--ui-text-muted);
     font-weight: var(--ui-font-normal);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .list {
+  :global(.list:where([data-hn-ui-editor-mention-menu])) {
     max-height: 280px;
     padding: var(--ui-space-1) 0;
     margin: 0;
@@ -457,7 +470,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
       -1px calc(100% - var(--_ui-scroll-fade-size)),
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
-  .item {
+  :global(.item:where([data-hn-ui-editor-mention-menu])) {
     display: flex;
     align-items: center;
     min-height: 44px;
@@ -465,15 +478,15 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     gap: var(--ui-space-3);
     cursor: pointer;
   }
-  .item.active {
+  :global(.item.active:where([data-hn-ui-editor-mention-menu])) {
     background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
   }
-  .item.active .avatar {
+  :global(.item.active .avatar:where([data-hn-ui-editor-mention-menu])) {
     background: var(--ui-surface);
     box-shadow: inset 0 0 0 1px var(--ui-accent-soft, var(--ui-accent-subtle));
   }
 
-  .avatar {
+  :global(.avatar:where([data-hn-ui-editor-mention-menu])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -487,46 +500,48 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     font-weight: var(--ui-font-semibold);
   }
 
-  .body {
+  :global(.body:where([data-hn-ui-editor-mention-menu])) {
     display: flex;
     min-width: 0;
     flex-direction: column;
   }
 
-  .label, .detail {
+  :global(.label:where([data-hn-ui-editor-mention-menu])),
+  :global(.detail:where([data-hn-ui-editor-mention-menu])) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-editor-mention-menu])) {
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-medium);
   }
 
-  .detail, .loading {
+  :global(.detail:where([data-hn-ui-editor-mention-menu])),
+  :global(.loading:where([data-hn-ui-editor-mention-menu])) {
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-xs);
   }
 
-  .loading {
+  :global(.loading:where([data-hn-ui-editor-mention-menu])) {
     min-height: 44px;
     padding: var(--ui-space-3);
   }
 
   @media (max-width: 767px) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-editor-mention-menu])) {
       border-bottom: 0;
       border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
     }
 
-    .list {
+    :global(.list:where([data-hn-ui-editor-mention-menu])) {
       max-height: calc(60dvh - 48px);
     }
   }
 
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-editor-mention-menu])) {
     display: none;
   }
 }

package/vue/UiEditorMentionMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -77,16 +77,24 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
     role="option"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-editor-mention-menu-item
+    :data-value="checkedProps.value ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-detail="reflectedProp('detail', 'detail', checkedProps.detail, undefined, false)"
-    :data-initials="reflectedProp('initials', 'initials', checkedProps.initials, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
+    :data-ui-editor-mention-menu-item-prop-detail="reflectedProp('detail', 'detail', checkedProps.detail, undefined, false)"
+    :data-ui-editor-mention-menu-item-prop-initials="reflectedProp('initials', 'initials', checkedProps.initials, undefined, false)"
+    :data-ui-editor-mention-menu-item-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
   >
-    <span class="avatar" aria-hidden="true"><slot name="start">{{
-        checkedProps.initials
-      }}</slot></span>
-    <span class="body"><span class="label"><slot /></span>
-      <span v-if="checkedProps.detail" class="detail">{{ checkedProps.detail }}</span></span>
+    <span class="avatar" aria-hidden="true" data-hn-ui-editor-mention-menu-item><slot
+        name="start"
+      >{{ checkedProps.initials }}</slot></span>
+    <span class="body" data-hn-ui-editor-mention-menu-item><span
+        class="label"
+        data-hn-ui-editor-mention-menu-item
+      ><slot /></span>
+      <span v-if="checkedProps.detail" class="detail" data-hn-ui-editor-mention-menu-item>{{
+        checkedProps.detail
+      }}</span></span>
   </li>
 </template>
 
@@ -97,8 +105,8 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
 /* A slotted Avatar (a person's photo) is its own circle. Its root carries data-component in HTML
    and its tag as a class in Vue; neither tool lowers a component tag inside :has(). */
 
-@scope (.ui-editor-mention-menu-item) {
-  :scope:where(:scope) {
+@scope (.ui-editor-mention-menu-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-editor-mention-menu-item])) {
     display: flex;
     align-items: center;
     min-block-size: 44px;
@@ -107,19 +115,20 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
     cursor: pointer;
     list-style: none;
   }
-  :scope:where(:scope):is([aria-selected="true"]) {
+  :global(:scope[aria-selected="true"]:where([data-hn-ui-editor-mention-menu-item])) {
     background: var(--ui-accent-subtle);
   }
-  :scope[aria-selected="true"] .avatar {
+  :global(:scope[aria-selected="true"] .avatar:where([data-hn-ui-editor-mention-menu-item])) {
     background: var(--ui-surface);
     box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
   }
-  :scope .avatar:has(> :is([data-component~="ui-avatar"], .ui-avatar)) {
+  :global(:scope
+    .avatar:has(> :is([data-component~="ui-avatar"], .ui-avatar)):where([data-hn-ui-editor-mention-menu-item])) {
     background: none;
     box-shadow: none;
   }
 
-  .avatar {
+  :global(.avatar:where([data-hn-ui-editor-mention-menu-item])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -133,30 +142,31 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
     font-weight: var(--ui-font-semibold);
   }
 
-  .body {
+  :global(.body:where([data-hn-ui-editor-mention-menu-item])) {
     display: flex;
     min-inline-size: 0;
     flex-direction: column;
   }
 
-  .label, .detail {
+  :global(.label:where([data-hn-ui-editor-mention-menu-item])),
+  :global(.detail:where([data-hn-ui-editor-mention-menu-item])) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-editor-mention-menu-item])) {
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-medium);
   }
 
-  .detail {
+  :global(.detail:where([data-hn-ui-editor-mention-menu-item])) {
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-xs);
   }
 
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-editor-mention-menu-item])) {
     display: none;
   }
 }

package/vue/UiEditorSlashMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -299,50 +299,61 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     class="ui-editor-slash-menu"
     role="listbox"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-editor-slash-menu
     :hidden="!visible"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-anchor-rect="reflectedProp('anchorRect', 'anchor-rect', checkedProps.anchorRect, undefined, false)"
-    :data-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
-    :data-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
-    :data-selected-index="reflectedProp('selectedIndex', 'selected-index', checkedProps.selectedIndex, undefined, false)"
+    :data-ui-editor-slash-menu-prop-anchor-rect="reflectedProp('anchorRect', 'anchor-rect', checkedProps.anchorRect, undefined, false)"
+    :data-ui-editor-slash-menu-prop-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
+    :data-ui-editor-slash-menu-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-editor-slash-menu-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-editor-slash-menu-prop-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
+    :data-ui-editor-slash-menu-prop-selected-index="reflectedProp('selectedIndex', 'selected-index', checkedProps.selectedIndex, undefined, false)"
     ref="root"
   >
-    <div class="header"><slot name="header" /></div>
-    <ul class="list" role="presentation">
+    <div class="header" data-hn-ui-editor-slash-menu><slot name="header" /></div>
+    <ul class="list" role="presentation" data-hn-ui-editor-slash-menu>
       <li
         v-for="(item, index) in rows"
         :key="index"
         class="item"
         role="option"
+        data-hn-ui-editor-slash-menu
         :aria-selected="index === active"
         :data-index="index"
         :data-value="item.value"
         :class="{ active: index === active }"
       >
-        <span class="icon" aria-hidden="true"><UiIcon class="ui-icon" :name="item.icon" /></span>
-        <span class="body"><span class="title">{{ item.title }}</span>
-          <span class="description">{{ item.description }}</span></span>
+        <span class="icon" aria-hidden="true" data-hn-ui-editor-slash-menu><UiIcon
+            class="ui-icon"
+            :name="item.icon"
+          /></span>
+        <span class="body" data-hn-ui-editor-slash-menu><span
+            class="title"
+            data-hn-ui-editor-slash-menu
+          >{{ item.title }}</span>
+          <span class="description" data-hn-ui-editor-slash-menu>{{
+            item.description
+          }}</span></span>
       </li>
       <slot />
     </ul>
-    <div class="empty" ref="emptyElement"><slot name="empty" /></div>
-    <div class="footer"><slot name="footer" /></div>
+    <div class="empty" data-hn-ui-editor-slash-menu ref="emptyElement"><slot name="empty" /></div>
+    <div class="footer" data-hn-ui-editor-slash-menu><slot name="footer" /></div>
   </div>
 </template>
 
 <style scoped>
-@scope (.ui-editor-slash-menu) to (.ui-icon) {
-  :scope:where(:scope):is([popover]) {
+@scope (.ui-editor-slash-menu) to ([data-hn]) {
+  :global(:scope[popover]:where([data-hn-ui-editor-slash-menu])) {
     position: fixed;
     inset: auto;
     margin: 0;
   }
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-editor-slash-menu])) {
     user-select: none;
   }
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-editor-slash-menu])) {
     background: var(--ui-surface);
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-dialog);
@@ -352,12 +363,12 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     flex-direction: column;
   }
   @media (max-width: 767px) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-editor-slash-menu])) {
       border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
       border-bottom: none;
     }
   }
-  .header {
+  :global(.header:where([data-hn-ui-editor-slash-menu])) {
     display: none;
     align-items: center;
     gap: var(--ui-space-2);
@@ -369,20 +380,22 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
-  :scope > .header:empty, :scope > .footer:empty, :scope > .empty:empty {
+  :global(:scope > .header:empty:where([data-hn-ui-editor-slash-menu])),
+  :global(:scope > .footer:empty:where([data-hn-ui-editor-slash-menu])),
+  :global(:scope > .empty:empty:where([data-hn-ui-editor-slash-menu])) {
     display: none;
   }
-  .empty {
+  :global(.empty:where([data-hn-ui-editor-slash-menu])) {
     padding: var(--ui-space-3);
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
   @media (max-width: 767px) {
-    .header {
+    :global(.header:where([data-hn-ui-editor-slash-menu])) {
       display: flex;
     }
   }
-  .list {
+  :global(.list:where([data-hn-ui-editor-slash-menu])) {
     list-style: none;
     margin: 0;
     padding: var(--ui-space-1) 0;
@@ -412,12 +425,12 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
   @media (max-width: 767px) {
-    .list {
+    :global(.list:where([data-hn-ui-editor-slash-menu])) {
       max-height: calc(60dvh - 80px);
       padding: var(--ui-space-1) 0 var(--ui-space-2);
     }
   }
-  .item {
+  :global(.item:where([data-hn-ui-editor-slash-menu])) {
     display: flex;
     align-items: center;
     gap: var(--ui-space-3);
@@ -426,10 +439,10 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     cursor: pointer;
     transition: background-color 120ms ease;
   }
-  .item.active {
+  :global(.item.active:where([data-hn-ui-editor-slash-menu])) {
     background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
   }
-  .icon {
+  :global(.icon:where([data-hn-ui-editor-slash-menu])) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -445,22 +458,22 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     flex-shrink: 0;
     line-height: 1;
   }
-  .item.active .icon {
+  :global(.item.active .icon:where([data-hn-ui-editor-slash-menu])) {
     background: var(--ui-accent);
     border-color: var(--ui-accent);
     color: var(--ui-accent-contrast);
   }
-  .icon {
+  :global(.icon:where([data-hn-ui-editor-slash-menu])) {
     --_ui-default-icon-size: 1rem;
     --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
   }
-  .body {
+  :global(.body:where([data-hn-ui-editor-slash-menu])) {
     display: flex;
     min-width: 0;
     flex-direction: column;
     gap: 1px;
   }
-  .title {
+  :global(.title:where([data-hn-ui-editor-slash-menu])) {
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-medium);
     color: var(--ui-text);
@@ -468,20 +481,20 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .description {
+  :global(.description:where([data-hn-ui-editor-slash-menu])) {
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .footer {
+  :global(.footer:where([data-hn-ui-editor-slash-menu])) {
     padding: var(--ui-space-2) var(--ui-space-3);
     border-top: var(--ui-border-width) solid var(--ui-border-divider);
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-muted);
   }
-  :scope kbd {
+  :global(:scope kbd:where([data-hn-ui-editor-slash-menu])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -493,7 +506,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     padding: 0 3px;
     color: var(--ui-text-secondary);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-editor-slash-menu])) {
     display: none;
   }
 }