@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiTreeItem.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'
@@ -404,7 +404,7 @@ provide('html-next:ui-tree-item:isContainer', isContainer)
 provide('html-next:ui-tree-item:moving', moving)
 checkHydratedRoot('div', 'ui-tree-item')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.selected && 'selected',
@@ -496,35 +496,44 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     class="ui-tree-item"
     role="treeitem"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-tree-item
     :aria-label="checkedProps.label ?? undefined"
     :aria-level="structuralLevel"
     :aria-selected="checkedProps.selected ?? undefined"
     :aria-disabled="checkedProps.disabled ?? undefined"
+    :data-item-id="checkedProps.itemId ?? undefined"
+    :data-drag-type="checkedProps.dragType ?? undefined"
+    :data-drop-scope="checkedProps.dropScope ?? undefined"
+    :data-accepts="checkedProps.accepts ?? undefined"
+    :data-drop-depth="checkedProps.dropDepth ?? undefined"
+    :data-subtree-depth="checkedProps.subtreeDepth ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-accepts="reflectedProp('accepts', 'accepts', checkedProps.accepts, undefined, true)"
-    :data-actions-visible="reflectedProp('actionsVisible', 'actions-visible', checkedProps.actionsVisible, undefined, false)"
-    :data-container="reflectedProp('container', 'container', checkedProps.container, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-drag-type="reflectedProp('dragType', 'drag-type', checkedProps.dragType, undefined, true)"
-    :data-drop-depth="reflectedProp('dropDepth', 'drop-depth', checkedProps.dropDepth, undefined, true)"
-    :data-drop-scope="reflectedProp('dropScope', 'drop-scope', checkedProps.dropScope, undefined, true)"
-    :data-expanded="reflectedProp('expanded', 'expanded', checkedProps.expanded, undefined, false)"
-    :data-item-id="reflectedProp('itemId', 'item-id', checkedProps.itemId, undefined, true)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-lazy="reflectedProp('lazy', 'lazy', checkedProps.lazy, undefined, false)"
-    :data-marquee="reflectedProp('marquee', 'marquee', checkedProps.marquee, undefined, false)"
-    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
-    :data-sortable="reflectedProp('sortable', 'sortable', checkedProps.sortable, undefined, false)"
-    :data-subtree-depth="reflectedProp('subtreeDepth', 'subtree-depth', checkedProps.subtreeDepth, undefined, true)"
+    :data-ui-tree-item-prop-accepts="reflectedProp('accepts', 'accepts', checkedProps.accepts, undefined, false)"
+    :data-ui-tree-item-prop-actions-visible="reflectedProp('actionsVisible', 'actions-visible', checkedProps.actionsVisible, undefined, false)"
+    :data-ui-tree-item-prop-container="reflectedProp('container', 'container', checkedProps.container, undefined, false)"
+    :data-ui-tree-item-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-tree-item-prop-drag-type="reflectedProp('dragType', 'drag-type', checkedProps.dragType, undefined, false)"
+    :data-ui-tree-item-prop-drop-depth="reflectedProp('dropDepth', 'drop-depth', checkedProps.dropDepth, undefined, false)"
+    :data-ui-tree-item-prop-drop-scope="reflectedProp('dropScope', 'drop-scope', checkedProps.dropScope, undefined, false)"
+    :data-ui-tree-item-prop-expanded="reflectedProp('expanded', 'expanded', checkedProps.expanded, undefined, false)"
+    :data-ui-tree-item-prop-item-id="reflectedProp('itemId', 'item-id', checkedProps.itemId, undefined, false)"
+    :data-ui-tree-item-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-tree-item-prop-lazy="reflectedProp('lazy', 'lazy', checkedProps.lazy, undefined, false)"
+    :data-ui-tree-item-prop-marquee="reflectedProp('marquee', 'marquee', checkedProps.marquee, undefined, false)"
+    :data-ui-tree-item-prop-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-ui-tree-item-prop-sortable="reflectedProp('sortable', 'sortable', checkedProps.sortable, undefined, false)"
+    :data-ui-tree-item-prop-subtree-depth="reflectedProp('subtreeDepth', 'subtree-depth', checkedProps.subtreeDepth, undefined, false)"
     :data-ui-tree-item-state="hostState || undefined"
     ref="root"
   >
-    <div class="row" ref="rowElement">
+    <div class="row" data-hn-ui-tree-item ref="rowElement">
       <button
         v-if="checkedProps.sortable && !checkedProps.disabled"
         class="drag-handle"
         type="button"
         draggable="true"
+        data-hn-ui-tree-item
         :aria-label="guarded"
         ref="dragHandleElement"
       >
@@ -537,37 +546,42 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
+          data-hn-ui-tree-item
         >
-          <circle cx="9" cy="12" r="1"></circle>
-          <circle cx="9" cy="5" r="1"></circle>
-          <circle cx="9" cy="19" r="1"></circle>
-          <circle cx="15" cy="12" r="1"></circle>
-          <circle cx="15" cy="5" r="1"></circle>
-          <circle cx="15" cy="19" r="1"></circle>
+          <circle cx="9" cy="12" r="1" data-hn-ui-tree-item></circle>
+          <circle cx="9" cy="5" r="1" data-hn-ui-tree-item></circle>
+          <circle cx="9" cy="19" r="1" data-hn-ui-tree-item></circle>
+          <circle cx="15" cy="12" r="1" data-hn-ui-tree-item></circle>
+          <circle cx="15" cy="5" r="1" data-hn-ui-tree-item></circle>
+          <circle cx="15" cy="19" r="1" data-hn-ui-tree-item></circle>
         </svg>
       </button>
       <button
         class="disclosure"
         type="button"
+        data-hn-ui-tree-item
         :disabled="checkedProps.disabled ?? undefined"
         :hidden="!isContainer"
         ref="disclosureElement"
       >
-        <span class="disclosure-icon" aria-hidden="true"></span>
+        <span class="disclosure-icon" aria-hidden="true" data-hn-ui-tree-item></span>
       </button>
-      <label class="selection-hit"><input
+      <label class="selection-hit" data-hn-ui-tree-item><input
           class="selection-checkbox"
           type="checkbox"
           tabindex="-1"
+          data-hn-ui-tree-item
           :checked.attr="checkedProps.selected ? true : undefined"
           :disabled="checkedProps.disabled ?? undefined"
           :aria-label="guardedBinding"
         ></label>
-      <span class="leading" ref="leadingElement"><slot name="leading" /></span>
-      <span class="label" ref="labelElement"><span class="label-text" ref="labelTextElement"><slot
-            name="label"
-          >{{ checkedProps.label }}</slot></span></span>
-      <span class="actions" ref="actionsElement"><UiButton
+      <span class="leading" data-hn-ui-tree-item ref="leadingElement"><slot name="leading" /></span>
+      <span class="label" data-hn-ui-tree-item ref="labelElement"><span
+          class="label-text"
+          data-hn-ui-tree-item
+          ref="labelTextElement"
+        ><slot name="label">{{ checkedProps.label }}</slot></span></span>
+      <span class="actions" data-hn-ui-tree-item ref="actionsElement"><UiButton
           v-if="moving"
           class="ui-button"
           data-tree-cancel-move=""
@@ -576,18 +590,27 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
           size="sm"
           aria-label="Cancel move"
         >Cancel</UiButton>
-        <span><slot name="actions" /></span></span>
-      <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
+        <span data-hn-ui-tree-item><slot name="actions" /></span></span>
+      <span
+        class="drop-indicator row-drop-indicator"
+        aria-hidden="true"
+        data-hn-ui-tree-item
+      ></span>
     </div>
     <div
       class="children"
       role="group"
+      data-hn-ui-tree-item
       :hidden="!(isContainer && internalExpanded)"
       ref="childrenElement"
     >
       <slot />
     </div>
-    <span class="drop-indicator subtree-drop-indicator" aria-hidden="true"></span>
+    <span
+      class="drop-indicator subtree-drop-indicator"
+      aria-hidden="true"
+      data-hn-ui-tree-item
+    ></span>
   </div>
 </template>
 
@@ -664,8 +687,8 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-tree-item) to (.ui-button) {
-  :scope:where(:scope) {
+@scope (.ui-tree-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-tree-item])) {
     /* Hooks do not inherit, so the parts below read them from the root. The tree's density
        sets the defaults, in --_ui-default-*. */
     --_ui-tree-item-min-block-size: var(
@@ -691,7 +714,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
   }
 
-  .row {
+  :global(.row:where([data-hn-ui-tree-item])) {
     position: relative;
     display: grid;
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -709,57 +732,62 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
       min-block-size var(--ui-motion-base) var(--ui-motion-ease);
   }
 
-  .row:hover, .row:focus-within {
+  :global(.row:hover:where([data-hn-ui-tree-item])),
+  :global(.row:focus-within:where([data-hn-ui-tree-item])) {
     color: var(--ui-text-primary);
     background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
     box-shadow: inset 0 0 0 var(--ui-border-width)
       var(--_ui-selection-context-border, var(--ui-selection-border));
   }
-  :scope[data-ui-tree-item-state~="selected"] > .row {
+  :global(:scope[data-ui-tree-item-state~="selected"] > .row:where([data-hn-ui-tree-item])) {
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
     background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
     box-shadow: inset 0 0 0 var(--ui-border-width)
       var(--_ui-selection-context-border, var(--ui-selection-border));
   }
-  :scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading {
+  :global(:scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
+    > .row
+    > .leading:where([data-hn-ui-tree-item])) {
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
   }
 
-  :scope[data-ui-tree-item-state~="disabled"] .row {
+  :global(:scope[data-ui-tree-item-state~="disabled"] .row:where([data-hn-ui-tree-item])) {
     color: var(--ui-disabled-text);
     background: var(--ui-disabled-surface);
     box-shadow: none;
   }
 
-  :scope[data-dragging]:not([data-move-source]) .row {
+  :global(:scope[data-dragging]:not([data-move-source]) .row:where([data-hn-ui-tree-item])) {
     opacity: 0.42;
   }
 
-  :scope[data-move-source] > .row > .label, :scope[data-move-source] > .row > .leading {
+  :global(:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item])),
+  :global(:scope[data-move-source] > .row > .leading:where([data-hn-ui-tree-item])) {
     opacity: 0.42;
   }
 
-  :scope:where(:scope):is(:focus) {
+  :global(:scope:focus:where([data-hn-ui-tree-item])) {
     outline: none;
   }
 
-  :scope:focus-visible .row {
+  :global(:scope:focus-visible .row:where([data-hn-ui-tree-item])) {
     box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
   }
-  :scope[data-drop-position="inside"] > .row {
+  :global(:scope[data-drop-position="inside"] > .row:where([data-hn-ui-tree-item])) {
     background: var(--ui-accent-subtle);
     box-shadow: inset 0 0 0 var(--ui-accent-line-width)
       var(--_ui-tree-drop-color, var(--ui-accent-solid));
   }
 
-  .disclosure, .disclosure-spacer {
+  :global(.disclosure:where([data-hn-ui-tree-item])),
+  :global(.disclosure-spacer:where([data-hn-ui-tree-item])) {
     grid-column: 1;
     grid-row: 1;
     inline-size: var(--_tree-disclosure-size);
     block-size: 28px;
   }
 
-  .disclosure {
+  :global(.disclosure:where([data-hn-ui-tree-item])) {
     display: grid;
     /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
     place-items: center start;
@@ -771,11 +799,11 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     cursor: pointer;
   }
 
-  .disclosure[hidden] {
+  :global(.disclosure[hidden]:where([data-hn-ui-tree-item])) {
     display: none;
   }
 
-  .selection-hit {
+  :global(.selection-hit:where([data-hn-ui-tree-item])) {
     display: none;
     grid-column: 2;
     grid-row: 1;
@@ -784,32 +812,34 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
     cursor: pointer;
   }
-  .selection-checkbox {
+  :global(.selection-checkbox:where([data-hn-ui-tree-item])) {
     inline-size: 1rem;
     block-size: 1rem;
     margin: 0;
     accent-color: var(--ui-accent-solid);
   }
 
-  :scope[data-selection-mode="multiple"] > .row {
+  :global(:scope[data-selection-mode="multiple"] > .row:where([data-hn-ui-tree-item])) {
     grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
   }
-  :scope[data-selection-mode="multiple"] > .row > .selection-hit {
+  :global(:scope[data-selection-mode="multiple"]
+    > .row
+    > .selection-hit:where([data-hn-ui-tree-item])) {
     display: grid;
   }
-  :scope[data-selection-mode="multiple"] > .row > .leading {
+  :global(:scope[data-selection-mode="multiple"] > .row > .leading:where([data-hn-ui-tree-item])) {
     grid-column: 3;
   }
-  :scope[data-selection-mode="multiple"] > .row > .label {
+  :global(:scope[data-selection-mode="multiple"] > .row > .label:where([data-hn-ui-tree-item])) {
     grid-column: 4;
   }
 
-  .disclosure:hover {
+  :global(.disclosure:hover:where([data-hn-ui-tree-item])) {
     color: var(--ui-text-primary);
     background: var(--ui-surface-elevated);
   }
 
-  .disclosure-icon {
+  :global(.disclosure-icon:where([data-hn-ui-tree-item])) {
     display: grid;
     place-items: center;
     inline-size: 12px;
@@ -818,7 +848,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  .disclosure-icon::before {
+  :global(.disclosure-icon:where([data-hn-ui-tree-item])::before) {
     display: block;
     inline-size: 0.375rem;
     block-size: 0.375rem;
@@ -829,15 +859,18 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     transform: translateY(-20%) rotate(45deg);
   }
 
-  :scope[aria-expanded="true"] > .row > .disclosure > .disclosure-icon {
+  :global(:scope[aria-expanded="true"]
+    > .row
+    > .disclosure
+    > .disclosure-icon:where([data-hn-ui-tree-item])) {
     transform: rotate(0deg);
   }
-  .drag-handle svg {
+  :global(.drag-handle svg:where([data-hn-ui-tree-item])) {
     display: block;
     inline-size: 100%;
     block-size: 100%;
   }
-  .leading {
+  :global(.leading:where([data-hn-ui-tree-item])) {
     display: inline-grid;
     place-items: center;
     grid-column: 2;
@@ -851,16 +884,17 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     z-index: 1;
   }
 
-  .leading:empty {
+  :global(.leading:empty:where([data-hn-ui-tree-item])) {
     display: none;
   }
-  :slotted(svg), :slotted(img) {
+  :global(:where(:not([data-hn-ui-tree-item])):is(svg)),
+  :global(:where(:not([data-hn-ui-tree-item])):is(img)) {
     display: block;
     inline-size: 1em;
     block-size: 1em;
     flex: none;
   }
-  .label {
+  :global(.label:where([data-hn-ui-tree-item])) {
     grid-column: 3;
     grid-row: 1;
     align-self: stretch;
@@ -875,7 +909,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
        is where the controller reads the length in pixels to stop a sliding name before the fade. */
     column-gap: var(--ui-space-1);
   }
-  .label-text {
+  :global(.label-text:where([data-hn-ui-tree-item])) {
     display: flex;
     align-items: center;
     /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -886,14 +920,16 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     white-space: nowrap;
   }
 
-  .label-text > :slotted(*) {
+  :global(.label-text > :where(:not([data-hn-ui-tree-item])):is(*)) {
     flex: 1 1 auto;
     min-inline-size: 0;
   }
-  .row:hover > .label,
-  .row:focus-within > .label,
-  :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label,
-  :scope[data-move-source] > .row > .label {
+  :global(.row:hover > .label:where([data-hn-ui-tree-item])),
+  :global(.row:focus-within > .label:where([data-hn-ui-tree-item])),
+  :global(:scope[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .label:where([data-hn-ui-tree-item])),
+  :global(:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item])) {
     text-overflow: clip;
     mask-image: linear-gradient(
       to right,
@@ -902,23 +938,25 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     );
   }
 
-  .row:hover > .label:dir(rtl),
-  .row:focus-within > .label:dir(rtl),
-  :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl),
-  :scope[data-move-source] > .row > .label:dir(rtl) {
+  :global(.row:hover > .label:dir(rtl):where([data-hn-ui-tree-item])),
+  :global(.row:focus-within > .label:dir(rtl):where([data-hn-ui-tree-item])),
+  :global(:scope[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .label:dir(rtl):where([data-hn-ui-tree-item])),
+  :global(:scope[data-move-source] > .row > .label:dir(rtl):where([data-hn-ui-tree-item])) {
     mask-image: linear-gradient(
       to left,
       #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
       transparent calc(100% - var(--_tree-actions-width, 1.75rem))
     );
   }
-  .row[data-ui-marquee] > .label > .label-text {
+  :global(.row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item])) {
     /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
        long enough to read rather than sliding back and forth. */
     animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
     will-change: transform;
   }
-  .row[data-ui-marquee] > .label {
+  :global(.row[data-ui-marquee] > .label:where([data-hn-ui-tree-item])) {
     margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
     padding-inline-start: calc(
       var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
@@ -934,7 +972,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     );
   }
 
-  .row[data-ui-marquee] > .label:dir(rtl) {
+  :global(.row[data-ui-marquee] > .label:dir(rtl):where([data-hn-ui-tree-item])) {
     mask-image: linear-gradient(
       to left,
       transparent var(--_marquee-icon-width, 0px),
@@ -946,16 +984,17 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     );
   }
   @media (prefers-reduced-motion: reduce) {
-    .row[data-ui-marquee] > .label > .label-text {
+    :global(.row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item])) {
       animation: none;
     }
   }
 
-  .row:hover > .label > :slotted(*), .row:focus-within > .label > :slotted(*) {
+  :global(.row:hover > .label > :where(:not([data-hn-ui-tree-item])):is(*)),
+  :global(.row:focus-within > .label > :where(:not([data-hn-ui-tree-item])):is(*)) {
     text-overflow: clip;
   }
 
-  .actions {
+  :global(.actions:where([data-hn-ui-tree-item])) {
     position: absolute;
     z-index: 1;
     inset-block: 0;
@@ -968,19 +1007,21 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  .row:hover > .actions,
-  .row:focus-within > .actions,
-  :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
-  :scope[data-move-source] > .row > .actions {
+  :global(.row:hover > .actions:where([data-hn-ui-tree-item])),
+  :global(.row:focus-within > .actions:where([data-hn-ui-tree-item])),
+  :global(:scope[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .actions:where([data-hn-ui-tree-item])),
+  :global(:scope[data-move-source] > .row > .actions:where([data-hn-ui-tree-item])) {
     opacity: 1;
     pointer-events: auto;
   }
   @media (hover: none), (pointer: coarse) {
-    .row {
+    :global(.row:where([data-hn-ui-tree-item])) {
       grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
     }
 
-    .actions {
+    :global(.actions:where([data-hn-ui-tree-item])) {
       position: static;
       grid-column: 4;
       grid-row: 1;
@@ -990,14 +1031,14 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
       pointer-events: auto;
     }
 
-    .row:is(:hover, :focus-within) > .label,
-    .row:is(:hover, :focus-within) > .label:dir(rtl),
-    :scope[data-move-source] > .row > .label,
-    :scope[data-move-source] > .row > .label:dir(rtl) {
+    :global(.row:is(:hover, :focus-within) > .label:where([data-hn-ui-tree-item])),
+    :global(.row:is(:hover, :focus-within) > .label:dir(rtl):where([data-hn-ui-tree-item])),
+    :global(:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item])),
+    :global(:scope[data-move-source] > .row > .label:dir(rtl):where([data-hn-ui-tree-item])) {
       mask-image: none;
     }
 
-    .row[data-ui-marquee] > .label {
+    :global(.row[data-ui-marquee] > .label:where([data-hn-ui-tree-item])) {
       mask-image: linear-gradient(
         to right,
         transparent var(--_marquee-icon-width, 0px),
@@ -1008,14 +1049,18 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     }
 
     /* Persistent content has its own column on touch. Fade only the label's end. */
-    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label {
+    :global(:scope[data-ui-tree-item-state~="actionsVisible"]
+      > .row
+      > .label:where([data-hn-ui-tree-item])) {
       mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
     }
-    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl) {
+    :global(:scope[data-ui-tree-item-state~="actionsVisible"]
+      > .row
+      > .label:dir(rtl):where([data-hn-ui-tree-item])) {
       mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
     }
 
-    .row[data-ui-marquee] > .label:dir(rtl) {
+    :global(.row[data-ui-marquee] > .label:dir(rtl):where([data-hn-ui-tree-item])) {
       mask-image: linear-gradient(
         to left,
         transparent var(--_marquee-icon-width, 0px),
@@ -1025,15 +1070,17 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
       );
     }
 
-    :scope[data-selection-mode="multiple"] > .row {
+    :global(:scope[data-selection-mode="multiple"] > .row:where([data-hn-ui-tree-item])) {
       grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
     }
 
-    :scope[data-selection-mode="multiple"] > .row > .actions {
+    :global(:scope[data-selection-mode="multiple"]
+      > .row
+      > .actions:where([data-hn-ui-tree-item])) {
       grid-column: 5;
     }
   }
-  .drag-handle {
+  :global(.drag-handle:where([data-hn-ui-tree-item])) {
     position: absolute;
     z-index: 2;
     inset-block-start: 50%;
@@ -1055,27 +1102,30 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  .row:hover .drag-handle,
-  .drag-handle:hover,
-  .drag-handle:focus-visible,
-  :scope[data-dragging] > .row > .drag-handle {
+  :global(.row:hover .drag-handle:where([data-hn-ui-tree-item])),
+  :global(.drag-handle:hover:where([data-hn-ui-tree-item])),
+  :global(.drag-handle:focus-visible:where([data-hn-ui-tree-item])),
+  :global(:scope[data-dragging] > .row > .drag-handle:where([data-hn-ui-tree-item])) {
     opacity: 1;
   }
 
-  :scope[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
+  :global(:scope[data-ui-tree-item-state~="isContainer"]
+    > .row
+    > .drag-handle:where([data-hn-ui-tree-item])) {
     inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
   }
 
-  .drag-handle:hover, .drag-handle:focus-visible {
+  :global(.drag-handle:hover:where([data-hn-ui-tree-item])),
+  :global(.drag-handle:focus-visible:where([data-hn-ui-tree-item])) {
     color: var(--ui-text-primary);
     background: var(--ui-surface-hover);
   }
 
-  .drag-handle:active {
+  :global(.drag-handle:active:where([data-hn-ui-tree-item])) {
     cursor: grabbing;
   }
 
-  .drop-indicator {
+  :global(.drop-indicator:where([data-hn-ui-tree-item])) {
     position: absolute;
     z-index: 3;
     inset-inline: 1px;
@@ -1086,7 +1136,8 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     pointer-events: none;
   }
 
-  .drop-indicator::before, .drop-indicator::after {
+  :global(.drop-indicator:where([data-hn-ui-tree-item])::before),
+  :global(.drop-indicator:where([data-hn-ui-tree-item])::after) {
     content: "";
     position: absolute;
     inset-block-start: 50%;
@@ -1098,40 +1149,43 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     transform: translateY(-50%);
   }
 
-  .drop-indicator::before {
+  :global(.drop-indicator:where([data-hn-ui-tree-item])::before) {
     inset-inline-start: -1px;
   }
-  .drop-indicator::after {
+  :global(.drop-indicator:where([data-hn-ui-tree-item])::after) {
     inset-inline-end: -1px;
   }
 
-  :scope[data-drop-position="before"] > .row > .row-drop-indicator {
+  :global(:scope[data-drop-position="before"]
+    > .row
+    > .row-drop-indicator:where([data-hn-ui-tree-item])) {
     display: block;
     inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
   }
 
-  :scope[data-drop-position="after"] > .subtree-drop-indicator {
+  :global(:scope[data-drop-position="after"]
+    > .subtree-drop-indicator:where([data-hn-ui-tree-item])) {
     display: block;
     inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
   }
 
-  .children[hidden] {
+  :global(.children[hidden]:where([data-hn-ui-tree-item])) {
     display: none;
   }
 
-  :scope:where(:scope):is(html[data-ui-input-modality="touch"] *) {
+  :global(html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-tree-item])) {
     --_tree-row-min-height: 44px;
   }
 
-  html[data-ui-input-modality="touch"] :scope .row {
+  :global(html[data-ui-input-modality="touch"] :scope .row:where([data-hn-ui-tree-item])) {
     grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
   }
 
-  html[data-ui-input-modality="touch"] :scope .drag-handle,
-  html[data-ui-input-modality="touch"]
+  :global(html[data-ui-input-modality="touch"] :scope .drag-handle:where([data-hn-ui-tree-item])),
+  :global(html[data-ui-input-modality="touch"]
     :scope[data-ui-tree-item-state~="isContainer"]
     > .row
-    > .drag-handle {
+    > .drag-handle:where([data-hn-ui-tree-item])) {
     position: relative;
     grid-column: 1;
     grid-row: 1;
@@ -1144,70 +1198,85 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     cursor: pointer;
   }
 
-  html[data-ui-input-modality="touch"] :scope .disclosure {
+  :global(html[data-ui-input-modality="touch"] :scope .disclosure:where([data-hn-ui-tree-item])) {
     grid-column: 2;
   }
-  html[data-ui-input-modality="touch"] :scope .leading {
+  :global(html[data-ui-input-modality="touch"] :scope .leading:where([data-hn-ui-tree-item])) {
     grid-column: 3;
   }
-  html[data-ui-input-modality="touch"] :scope .label {
+  :global(html[data-ui-input-modality="touch"] :scope .label:where([data-hn-ui-tree-item])) {
     grid-column: 4;
   }
 
-  html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+  :global(html[data-ui-input-modality="touch"]
+    :scope[data-selection-mode="multiple"]
+    > .row:where([data-hn-ui-tree-item])) {
     grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
   }
-  html[data-ui-input-modality="touch"]
+  :global(html[data-ui-input-modality="touch"]
     :scope[data-selection-mode="multiple"]
     > .row
-    > .selection-hit {
+    > .selection-hit:where([data-hn-ui-tree-item])) {
     grid-column: 3;
     inline-size: 44px;
     block-size: 44px;
   }
-  html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .leading {
+  :global(html[data-ui-input-modality="touch"]
+    :scope[data-selection-mode="multiple"]
+    > .row
+    > .leading:where([data-hn-ui-tree-item])) {
     grid-column: 4;
   }
-  html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .label {
+  :global(html[data-ui-input-modality="touch"]
+    :scope[data-selection-mode="multiple"]
+    > .row
+    > .label:where([data-hn-ui-tree-item])) {
     grid-column: 5;
   }
 
   @media (hover: none), (pointer: coarse) {
-    html[data-ui-input-modality="touch"] :scope .row {
+    :global(html[data-ui-input-modality="touch"] :scope .row:where([data-hn-ui-tree-item])) {
       grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
     }
 
-    html[data-ui-input-modality="touch"] :scope .actions {
+    :global(html[data-ui-input-modality="touch"] :scope .actions:where([data-hn-ui-tree-item])) {
       grid-column: 5;
     }
 
-    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+    :global(html[data-ui-input-modality="touch"]
+      :scope[data-selection-mode="multiple"]
+      > .row:where([data-hn-ui-tree-item])) {
       grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
     }
 
-    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .actions {
+    :global(html[data-ui-input-modality="touch"]
+      :scope[data-selection-mode="multiple"]
+      > .row
+      > .actions:where([data-hn-ui-tree-item])) {
       grid-column: 6;
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .row, .disclosure-icon, .drag-handle {
+    :global(.row:where([data-hn-ui-tree-item])),
+    :global(.disclosure-icon:where([data-hn-ui-tree-item])),
+    :global(.drag-handle:where([data-hn-ui-tree-item])) {
       transition: none;
     }
   }
 
   @media (forced-colors: active) {
-    :scope:focus-visible > .row {
+    :global(:scope:focus-visible > .row:where([data-hn-ui-tree-item])) {
       outline: var(--ui-focus-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-focus-width));
     }
-    :scope[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
-      > .row {
+    :global(:scope[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
+      > .row:where([data-hn-ui-tree-item])) {
       outline: var(--ui-border-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-border-width));
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-tree-item])) {
     display: none;
   }
 }