@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiTreeItem.vue

@@ -1,19 +1,16 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 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'
-import { createDispatch, useComponentHost } from './host'
+import {
+  attribute,
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiButton from './UiButton.vue'
@@ -287,38 +284,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:expanded': [value: boolean]
@@ -347,26 +313,8 @@ const structuralLevel = ref(1)
 const tabStop = ref(false)
 const isContainer = ref(false)
 const moving = ref(false)
-let guardedPrevious: any
+let guardedPrevious: any = null
 const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      structuralLevel.value == null || Number.isInteger(structuralLevel.value),
-      '$structuralLevel:structuralLevel',
-      './components/ui-tree-item/ui-tree-item.html: HR007: Reference structuralLevel does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = structuralLevel.value
-})
-let guardedBindingPrevious: any = null
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      moving.value == null || typeof moving.value === 'boolean',
-      '{ true: concat(\'Cancel moving \', $label), false: concat(\'Drag \', $label, \' to reorder\') }[concat($moving)]:moving',
-      './components/ui-tree-item/ui-tree-item.html: HR007: Reference moving does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
   const candidate: any = ((objectValue: any, indexValue: any) =>
     objectValue === Symbol.for('html-next.invalid-result')
       || indexValue === Symbol.for('html-next.invalid-result')
@@ -386,9 +334,9 @@ const guardedBinding = computed(() => {
       concat(moving.value),
     )
   if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedBindingPrevious
+    return guardedPrevious
   }
-  return guardedBindingPrevious = typeof (((objectValue: any, indexValue: any) =>
+  return guardedPrevious = typeof (((objectValue: any, indexValue: any) =>
       objectValue === Symbol.for('html-next.invalid-result')
         || indexValue === Symbol.for('html-next.invalid-result')
         ? Symbol.for('html-next.invalid-result')
@@ -443,60 +391,18 @@ const guardedBinding = computed(() => {
         concat(moving.value),
       ))
 })
-let guardedBinding2Previous: any
-const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      isContainer.value == null || typeof isContainer.value === 'boolean',
-      'not $isContainer:isContainer',
-      './components/ui-tree-item/ui-tree-item.html: HR007: Reference isContainer does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
-  return guardedBinding2Previous = !isContainer.value
-})
-let guardedBinding3Previous: any = null
-const guardedBinding3 = computed(() => {
+let guardedBindingPrevious: any = null
+const guardedBinding = computed(() => {
   const candidate: any = concat('Select ', checkedProps.value.label)
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
-  return guardedBinding3Previous = candidate
-})
-let guardedBinding4Previous: any
-const guardedBinding4 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalExpanded.value == null || typeof internalExpanded.value === 'boolean',
-      'not ($isContainer and $internalExpanded):internalExpanded',
-      './components/ui-tree-item/ui-tree-item.html: HR007: Reference internalExpanded does not satisfy its declared type.',
-    )
-      && htmlNextAuthoredCheck2(
-        isContainer.value == null || typeof isContainer.value === 'boolean',
-        'not ($isContainer and $internalExpanded):isContainer',
-        './components/ui-tree-item/ui-tree-item.html: HR007: Reference isContainer does not satisfy its declared type.',
-      ))
-  ) return guardedBinding4Previous
-  return guardedBinding4Previous = !(isContainer.value && internalExpanded.value)
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBindingPrevious
+  return guardedBindingPrevious = candidate
 })
 provide('html-next:ui-tree-item:internalExpanded', internalExpanded)
 provide('html-next:ui-tree-item:structuralLevel', structuralLevel)
 provide('html-next:ui-tree-item:tabStop', tabStop)
 provide('html-next:ui-tree-item:isContainer', isContainer)
 provide('html-next:ui-tree-item:moving', moving)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-tree-item> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-tree-item> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-tree-item')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -583,46 +489,15 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   },
   state: { internalExpanded, structuralLevel, tabStop, isContainer, moving },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
 </script>
 
 <template>
   <div
-    data-component="ui-tree-item"
+    class="ui-tree-item"
     role="treeitem"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
-    :aria-level="guarded"
+    :aria-level="structuralLevel"
     :aria-selected="checkedProps.selected ?? undefined"
     :aria-disabled="checkedProps.disabled ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -650,7 +525,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         class="drag-handle"
         type="button"
         draggable="true"
-        :aria-label="guardedBinding"
+        :aria-label="guarded"
         ref="dragHandleElement"
       >
         <svg
@@ -675,7 +550,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         class="disclosure"
         type="button"
         :disabled="checkedProps.disabled ?? undefined"
-        :hidden="guardedBinding2"
+        :hidden="!isContainer"
         ref="disclosureElement"
       >
         <span class="disclosure-icon" aria-hidden="true"></span>
@@ -686,7 +561,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
           tabindex="-1"
           :checked.attr="checkedProps.selected ? true : undefined"
           :disabled="checkedProps.disabled ?? undefined"
-          :aria-label="guardedBinding3"
+          :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
@@ -694,6 +569,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
           >{{ checkedProps.label }}</slot></span></span>
       <span class="actions" ref="actionsElement"><UiButton
           v-if="moving"
+          class="ui-button"
           data-tree-cancel-move=""
           variant="ghost"
           tone="neutral"
@@ -703,7 +579,12 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         <span><slot name="actions" /></span></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
-    <div class="children" role="group" :hidden="guardedBinding4" ref="childrenElement">
+    <div
+      class="children"
+      role="group"
+      :hidden="!(isContainer && internalExpanded)"
+      ref="childrenElement"
+    >
       <slot />
     </div>
     <span class="drop-indicator subtree-drop-indicator" aria-hidden="true"></span>
@@ -733,320 +614,34 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   inherits: false;
 }
 
-[data-component~="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(
-    --ui-tree-item-min-block-size,
-    var(--_ui-default-tree-item-min-block-size)
-  );
-  --_ui-tree-item-font-size: var(--ui-tree-item-font-size, var(--_ui-default-tree-item-font-size));
-  --_ui-tree-item-label-padding-block: var(
-    --ui-tree-item-label-padding-block,
-    var(--_ui-default-tree-item-label-padding-block)
-  );
-  --_ui-tree-item-label-padding-inline: var(--ui-tree-item-label-padding-inline);
-
-  --_tree-row-min-height: 32px;
-  --_tree-disclosure-size: 16px;
-
-  position: relative;
-  display: block;
-  min-inline-size: 0;
-  margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
-}
-
-.row {
-  position: relative;
-  display: grid;
-  grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
-  align-items: center;
-  min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
-  min-inline-size: 0;
-  font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
-  border-radius: var(--ui-selection-radius);
-  color: var(--ui-text-secondary);
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease),
-    opacity var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    min-block-size var(--ui-motion-base) var(--ui-motion-ease);
-}
-
-.row:hover,
-.row:focus-within {
-  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));
-}
-
 /* Selection is the same surface recipe as destination and choice rows. */
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] > .row {
-  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));
-}
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
-  > .row
-  > .leading {
-  color: var(--_ui-selection-context-text, var(--ui-selection-text));
-}
-
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row {
-  color: var(--ui-disabled-text);
-  background: var(--ui-disabled-surface);
-  box-shadow: none;
-}
-
-[data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row {
-  opacity: 0.42;
-}
-
-[data-component~="ui-tree-item"][data-move-source] > .row > .label,
-[data-component~="ui-tree-item"][data-move-source] > .row > .leading {
-  opacity: 0.42;
-}
-
-[data-component~="ui-tree-item"]:focus {
-  outline: none;
-}
-
-[data-component~="ui-tree-item"]:focus-visible .row {
-  box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
-}
 
 /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
-[data-component~="ui-tree-item"][data-drop-position="inside"] > .row {
-  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 {
-  grid-column: 1;
-  grid-row: 1;
-  inline-size: var(--_tree-disclosure-size);
-  block-size: 28px;
-}
-
-.disclosure {
-  display: grid;
-  /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
-  place-items: center start;
-  padding: 0;
-  color: var(--ui-text-muted);
-  background: transparent;
-  border: 0;
-  border-radius: var(--ui-radius-sm);
-  cursor: pointer;
-}
-
-.disclosure[hidden] {
-  display: none;
-}
-
-.selection-hit {
-  display: none;
-  grid-column: 2;
-  grid-row: 1;
-  place-items: center;
-  inline-size: 1.25rem;
-  block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
-  cursor: pointer;
-}
-.selection-checkbox {
-  inline-size: 1rem;
-  block-size: 1rem;
-  margin: 0;
-  accent-color: var(--ui-accent-solid);
-}
-
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row {
-  grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
-}
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .selection-hit {
-  display: grid;
-}
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading {
-  grid-column: 3;
-}
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label {
-  grid-column: 4;
-}
-
-.disclosure:hover {
-  color: var(--ui-text-primary);
-  background: var(--ui-surface-elevated);
-}
-
-.disclosure-icon {
-  display: grid;
-  place-items: center;
-  inline-size: 12px;
-  block-size: 12px;
-  transform: rotate(-90deg);
-  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-.disclosure-icon::before {
-  display: block;
-  inline-size: 0.375rem;
-  block-size: 0.375rem;
-  border-inline-end: 1.5px solid currentColor;
-  border-block-end: 1.5px solid currentColor;
-  content: "";
-  /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
-  transform: translateY(-20%) rotate(45deg);
-}
-
-[data-component~="ui-tree-item"][aria-expanded="true"] > .row > .disclosure > .disclosure-icon {
-  transform: rotate(0deg);
-}
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-}
 
 /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
-.leading {
-  display: inline-grid;
-  place-items: center;
-  grid-column: 2;
-  grid-row: 1;
-  inline-size: 1em;
-  block-size: 1em;
-  margin-inline-start: var(--ui-space-1);
-  color: var(--ui-text-muted);
-  /* Above the label, so a sliding name passes under the icon. */
-  position: relative;
-  z-index: 1;
-}
-
-.leading:empty {
-  display: none;
-}
 
 /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
-:slotted(svg),
-:slotted(img) {
-  display: block;
-  inline-size: 1em;
-  block-size: 1em;
-  flex: none;
-}
 
 /* The label spans the row's height and centres its content, so slotted content (a link) can
    stretch to fill the row as its own hit area; the padding tokens remove the inset. */
-.label {
-  grid-column: 3;
-  grid-row: 1;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  min-inline-size: 0;
-  /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
-  overflow: hidden;
-  padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1))
-    var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
-  /* The length of the fade before the controls. The label's one flex child lays out no gap; this
-     is where the controller reads the length in pixels to stop a sliding name before the fade. */
-  column-gap: var(--ui-space-1);
-}
 
 /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
    its own text and reading as overflow. */
-.label-text {
-  display: flex;
-  align-items: center;
-  /* Stretches, so slotted content can still be the row's full-height hit area. */
-  align-self: stretch;
-  block-size: 100%;
-  min-inline-size: 0;
-  inline-size: 100%;
-  white-space: nowrap;
-}
-
-.label-text > :slotted(*) {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-}
 
 /* The controls sit over the label's end, so the text fades out where they begin. The fade is
    the truncation mark while it shows: an ellipsis under it would read as a second one. */
-.row:hover > .label,
-.row:focus-within > .label,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label,
-[data-component~="ui-tree-item"][data-move-source] > .row > .label {
-  text-overflow: clip;
-  mask-image: linear-gradient(
-    to right,
-    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
-    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-  );
-}
-
-.row:hover > .label:dir(rtl),
-.row:focus-within > .label:dir(rtl),
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
-  > .row
-  > .label:dir(rtl),
-[data-component~="ui-tree-item"][data-move-source] > .row > .label:dir(rtl) {
-  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))
-  );
-}
 
 /* A hovered row reads its whole name: the label slides far enough to show the end, rests
    there, and starts again. Only when it actually overflows — the controller measures by how
    much — after the controls have taken their place over its end — and hands over the distance
    and a duration from it, so every name moves at the same speed. */
-.row[data-ui-marquee] > .label > .label-text {
-  /* 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;
-}
 
 /* This comes after the hover fade, which it replaces at the same specificity. While the name
    slides, the label reaches back under the icon (the controller measures how far) with its text
    where it was, and fades out across the gap before the icon, fully gone where the icon begins
    to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
-.row[data-ui-marquee] > .label {
-  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))
-  );
-  mask-image: linear-gradient(
-    to right,
-    transparent var(--_marquee-icon-width, 0px),
-    #000 calc(
-      var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
-    ),
-    #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:dir(rtl) {
-  mask-image: linear-gradient(
-    to left,
-    transparent var(--_marquee-icon-width, 0px),
-    #000 calc(
-      var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
-    ),
-    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
-    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-  );
-}
 
 @keyframes ui-tree-item-marquee {
   from {
@@ -1059,298 +654,561 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 }
 
 /* Reduced motion keeps the fade, which already says the name continues. */
-@media (prefers-reduced-motion: reduce) {
-  .row[data-ui-marquee] > .label > .label-text {
-    animation: none;
-  }
-}
 
-.row:hover > .label > :slotted(*),
-.row:focus-within > .label > :slotted(*) {
-  text-overflow: clip;
-}
+/* Without hover there is no reveal, so the controls keep their own column. */
 
-.actions {
-  position: absolute;
-  z-index: 1;
-  inset-block: 0;
-  inset-inline-end: 0;
-  display: inline-flex;
-  align-items: center;
-  min-inline-size: 0;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
-}
+/* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
+   empty column, right before the icon; a branch's disclosure is there, so its handle sits just
+   outside the row. It is bare until pointed at: a resting surface behind it read as a faint
+   patch rather than as a control. */
 
-.row:hover > .actions,
-.row:focus-within > .actions,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
-[data-component~="ui-tree-item"][data-move-source] > .row > .actions {
-  opacity: 1;
-  pointer-events: auto;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
+
+@scope (.ui-tree-item) to (.ui-button) {
+  :scope:where(:scope) {
+    /* 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(
+      --ui-tree-item-min-block-size,
+      var(--_ui-default-tree-item-min-block-size)
+    );
+    --_ui-tree-item-font-size: var(
+      --ui-tree-item-font-size,
+      var(--_ui-default-tree-item-font-size)
+    );
+    --_ui-tree-item-label-padding-block: var(
+      --ui-tree-item-label-padding-block,
+      var(--_ui-default-tree-item-label-padding-block)
+    );
+    --_ui-tree-item-label-padding-inline: var(--ui-tree-item-label-padding-inline);
+
+    --_tree-row-min-height: 32px;
+    --_tree-disclosure-size: 16px;
+
+    position: relative;
+    display: block;
+    min-inline-size: 0;
+    margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
+  }
 
-/* Without hover there is no reveal, so the controls keep their own column. */
-@media (hover: none), (pointer: coarse) {
   .row {
-    grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
+    align-items: center;
+    min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
+    min-inline-size: 0;
+    font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
+    border-radius: var(--ui-selection-radius);
+    color: var(--ui-text-secondary);
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease),
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      min-block-size var(--ui-motion-base) var(--ui-motion-ease);
   }
 
-  .actions {
-    position: static;
+  .row:hover, .row:focus-within {
+    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 {
+    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 {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+  }
+
+  :scope[data-ui-tree-item-state~="disabled"] .row {
+    color: var(--ui-disabled-text);
+    background: var(--ui-disabled-surface);
+    box-shadow: none;
+  }
+
+  :scope[data-dragging]:not([data-move-source]) .row {
+    opacity: 0.42;
+  }
+
+  :scope[data-move-source] > .row > .label, :scope[data-move-source] > .row > .leading {
+    opacity: 0.42;
+  }
+
+  :scope:where(:scope):is(:focus) {
+    outline: none;
+  }
+
+  :scope:focus-visible .row {
+    box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
+  }
+  :scope[data-drop-position="inside"] > .row {
+    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 {
+    grid-column: 1;
+    grid-row: 1;
+    inline-size: var(--_tree-disclosure-size);
+    block-size: 28px;
+  }
+
+  .disclosure {
+    display: grid;
+    /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
+    place-items: center start;
+    padding: 0;
+    color: var(--ui-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+  }
+
+  .disclosure[hidden] {
+    display: none;
+  }
+
+  .selection-hit {
+    display: none;
+    grid-column: 2;
+    grid-row: 1;
+    place-items: center;
+    inline-size: 1.25rem;
+    block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
+    cursor: pointer;
+  }
+  .selection-checkbox {
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    accent-color: var(--ui-accent-solid);
+  }
+
+  :scope[data-selection-mode="multiple"] > .row {
+    grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
+  }
+  :scope[data-selection-mode="multiple"] > .row > .selection-hit {
+    display: grid;
+  }
+  :scope[data-selection-mode="multiple"] > .row > .leading {
+    grid-column: 3;
+  }
+  :scope[data-selection-mode="multiple"] > .row > .label {
     grid-column: 4;
+  }
+
+  .disclosure:hover {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-elevated);
+  }
+
+  .disclosure-icon {
+    display: grid;
+    place-items: center;
+    inline-size: 12px;
+    block-size: 12px;
+    transform: rotate(-90deg);
+    transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  .disclosure-icon::before {
+    display: block;
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    border-inline-end: 1.5px solid currentColor;
+    border-block-end: 1.5px solid currentColor;
+    content: "";
+    /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
+    transform: translateY(-20%) rotate(45deg);
+  }
+
+  :scope[aria-expanded="true"] > .row > .disclosure > .disclosure-icon {
+    transform: rotate(0deg);
+  }
+  .drag-handle svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  .leading {
+    display: inline-grid;
+    place-items: center;
+    grid-column: 2;
     grid-row: 1;
-    padding-inline-start: 0;
-    background: none;
-    opacity: 1;
-    pointer-events: auto;
+    inline-size: 1em;
+    block-size: 1em;
+    margin-inline-start: var(--ui-space-1);
+    color: var(--ui-text-muted);
+    /* Above the label, so a sliding name passes under the icon. */
+    position: relative;
+    z-index: 1;
   }
 
-  .row:is(:hover, :focus-within) > .label,
-  .row:is(:hover, :focus-within) > .label:dir(rtl),
-  [data-component~="ui-tree-item"][data-move-source] > .row > .label,
-  [data-component~="ui-tree-item"][data-move-source] > .row > .label:dir(rtl) {
-    mask-image: none;
+  .leading:empty {
+    display: none;
+  }
+  :slotted(svg), :slotted(img) {
+    display: block;
+    inline-size: 1em;
+    block-size: 1em;
+    flex: none;
+  }
+  .label {
+    grid-column: 3;
+    grid-row: 1;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
+    overflow: hidden;
+    padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1))
+      var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
+    /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+       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 {
+    display: flex;
+    align-items: center;
+    /* Stretches, so slotted content can still be the row's full-height hit area. */
+    align-self: stretch;
+    block-size: 100%;
+    min-inline-size: 0;
+    inline-size: 100%;
+    white-space: nowrap;
+  }
+
+  .label-text > :slotted(*) {
+    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 {
+    text-overflow: clip;
+    mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
   }
 
+  .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) {
+    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 {
+    /* 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 {
+    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))
+    );
     mask-image: linear-gradient(
       to right,
       transparent var(--_marquee-icon-width, 0px),
       #000 calc(
         var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
-      )
+      ),
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
     );
   }
 
-  /* Persistent content has its own column on touch. Fade only the label's end. */
-  [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label {
-    mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
-  }
-  [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
-    > .row
-    > .label:dir(rtl) {
-    mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
-  }
-
   .row[data-ui-marquee] > .label:dir(rtl) {
     mask-image: linear-gradient(
       to left,
       transparent var(--_marquee-icon-width, 0px),
       #000 calc(
         var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
-      )
+      ),
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
     );
   }
-
-  [data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row {
-    grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+  @media (prefers-reduced-motion: reduce) {
+    .row[data-ui-marquee] > .label > .label-text {
+      animation: none;
+    }
   }
 
-  [data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .actions {
-    grid-column: 5;
+  .row:hover > .label > :slotted(*), .row:focus-within > .label > :slotted(*) {
+    text-overflow: clip;
   }
-}
-
-/* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
-   empty column, right before the icon; a branch's disclosure is there, so its handle sits just
-   outside the row. It is bare until pointed at: a resting surface behind it read as a faint
-   patch rather than as a control. */
-.drag-handle {
-  position: absolute;
-  z-index: 2;
-  inset-block-start: 50%;
-  inset-inline-start: 0;
-  inline-size: var(--_tree-disclosure-size);
-  block-size: 24px;
-  display: grid;
-  place-items: center;
-  padding: 5px 2px;
-  color: var(--ui-text-muted);
-  background: transparent;
-  border: 0;
-  border-radius: var(--ui-radius-sm);
-  cursor: grab;
-  /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
-     the pointer onto it must not hide it on the way. */
-  opacity: 0;
-  transform: translateY(-50%);
-  transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
-}
 
-.row:hover .drag-handle,
-.drag-handle:hover,
-.drag-handle:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle {
-  opacity: 1;
-}
-
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
-  inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
-}
-
-.drag-handle:hover,
-.drag-handle:focus-visible {
-  color: var(--ui-text-primary);
-  background: var(--ui-surface-hover);
-}
-
-.drag-handle:active {
-  cursor: grabbing;
-}
+  .actions {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-end: 0;
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-.drop-indicator {
-  position: absolute;
-  z-index: 3;
-  inset-inline: 1px;
-  display: none;
-  block-size: var(--ui-accent-line-width);
-  border-radius: var(--ui-radius-round);
-  background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
-  pointer-events: none;
-}
+  .row:hover > .actions,
+  .row:focus-within > .actions,
+  :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
+  :scope[data-move-source] > .row > .actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (hover: none), (pointer: coarse) {
+    .row {
+      grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+    }
+
+    .actions {
+      position: static;
+      grid-column: 4;
+      grid-row: 1;
+      padding-inline-start: 0;
+      background: none;
+      opacity: 1;
+      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) {
+      mask-image: none;
+    }
+
+    .row[data-ui-marquee] > .label {
+      mask-image: linear-gradient(
+        to right,
+        transparent var(--_marquee-icon-width, 0px),
+        #000 calc(
+          var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+        )
+      );
+    }
+
+    /* Persistent content has its own column on touch. Fade only the label's end. */
+    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label {
+      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) {
+      mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+    }
+
+    .row[data-ui-marquee] > .label:dir(rtl) {
+      mask-image: linear-gradient(
+        to left,
+        transparent var(--_marquee-icon-width, 0px),
+        #000 calc(
+          var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+        )
+      );
+    }
+
+    :scope[data-selection-mode="multiple"] > .row {
+      grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+    }
+
+    :scope[data-selection-mode="multiple"] > .row > .actions {
+      grid-column: 5;
+    }
+  }
+  .drag-handle {
+    position: absolute;
+    z-index: 2;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    inline-size: var(--_tree-disclosure-size);
+    block-size: 24px;
+    display: grid;
+    place-items: center;
+    padding: 5px 2px;
+    color: var(--ui-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    cursor: grab;
+    /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
+       the pointer onto it must not hide it on the way. */
+    opacity: 0;
+    transform: translateY(-50%);
+    transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-.drop-indicator::before,
-.drop-indicator::after {
-  content: "";
-  position: absolute;
-  inset-block-start: 50%;
-  inline-size: 7px;
-  block-size: 7px;
-  border: var(--ui-accent-line-width) solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
-  border-radius: var(--ui-radius-round);
-  background: var(--ui-surface-elevated);
-  transform: translateY(-50%);
-}
+  .row:hover .drag-handle,
+  .drag-handle:hover,
+  .drag-handle:focus-visible,
+  :scope[data-dragging] > .row > .drag-handle {
+    opacity: 1;
+  }
 
-.drop-indicator::before {
-  inset-inline-start: -1px;
-}
-.drop-indicator::after {
-  inset-inline-end: -1px;
-}
+  :scope[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
+    inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+  }
 
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator {
-  display: block;
-  inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
-}
+  .drag-handle:hover, .drag-handle:focus-visible {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-hover);
+  }
 
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator {
-  display: block;
-  inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
-}
+  .drag-handle:active {
+    cursor: grabbing;
+  }
 
-.children[hidden] {
-  display: none;
-}
+  .drop-indicator {
+    position: absolute;
+    z-index: 3;
+    inset-inline: 1px;
+    display: none;
+    block-size: var(--ui-accent-line-width);
+    border-radius: var(--ui-radius-round);
+    background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
+    pointer-events: none;
+  }
 
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] {
-  --_tree-row-min-height: 44px;
-}
+  .drop-indicator::before, .drop-indicator::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 7px;
+    block-size: 7px;
+    border: var(--ui-accent-line-width) solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
+    border-radius: var(--ui-radius-round);
+    background: var(--ui-surface-elevated);
+    transform: translateY(-50%);
+  }
 
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row {
-  grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
-}
+  .drop-indicator::before {
+    inset-inline-start: -1px;
+  }
+  .drop-indicator::after {
+    inset-inline-end: -1px;
+  }
 
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle,
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"]
-  > .row
-  > .drag-handle {
-  position: relative;
-  grid-column: 1;
-  grid-row: 1;
-  inset: auto;
-  inline-size: 44px;
-  block-size: 44px;
-  padding: 14px;
-  opacity: 1;
-  transform: none;
-  cursor: pointer;
-}
+  :scope[data-drop-position="before"] > .row > .row-drop-indicator {
+    display: block;
+    inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
+  }
 
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .disclosure {
-  grid-column: 2;
-}
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading {
-  grid-column: 3;
-}
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label {
-  grid-column: 4;
-}
+  :scope[data-drop-position="after"] > .subtree-drop-indicator {
+    display: block;
+    inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
+  }
 
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-  > .row {
-  grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
-}
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-  > .row
-  > .selection-hit {
-  grid-column: 3;
-  inline-size: 44px;
-  block-size: 44px;
-}
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-  > .row
-  > .leading {
-  grid-column: 4;
-}
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-  > .row
-  > .label {
-  grid-column: 5;
-}
+  .children[hidden] {
+    display: none;
+  }
 
-@media (hover: none), (pointer: coarse) {
-  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row {
-    grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+  :scope:where(:scope):is(html[data-ui-input-modality="touch"] *) {
+    --_tree-row-min-height: 44px;
   }
 
-  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions {
-    grid-column: 5;
+  html[data-ui-input-modality="touch"] :scope .row {
+    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"]
-    [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-    > .row {
-    grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+    :scope[data-ui-tree-item-state~="isContainer"]
+    > .row
+    > .drag-handle {
+    position: relative;
+    grid-column: 1;
+    grid-row: 1;
+    inset: auto;
+    inline-size: 44px;
+    block-size: 44px;
+    padding: 14px;
+    opacity: 1;
+    transform: none;
+    cursor: pointer;
   }
 
+  html[data-ui-input-modality="touch"] :scope .disclosure {
+    grid-column: 2;
+  }
+  html[data-ui-input-modality="touch"] :scope .leading {
+    grid-column: 3;
+  }
+  html[data-ui-input-modality="touch"] :scope .label {
+    grid-column: 4;
+  }
+
+  html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+    grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
+  }
   html[data-ui-input-modality="touch"]
-    [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+    :scope[data-selection-mode="multiple"]
     > .row
-    > .actions {
-    grid-column: 6;
+    > .selection-hit {
+    grid-column: 3;
+    inline-size: 44px;
+    block-size: 44px;
   }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .row,
-  .disclosure-icon,
-  .drag-handle {
-    transition: none;
+  html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .leading {
+    grid-column: 4;
   }
-}
+  html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .label {
+    grid-column: 5;
+  }
+
+  @media (hover: none), (pointer: coarse) {
+    html[data-ui-input-modality="touch"] :scope .row {
+      grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+    }
 
-@media (forced-colors: active) {
-  [data-component~="ui-tree-item"]:focus-visible > .row {
-    outline: var(--ui-focus-width) solid Highlight;
-    outline-offset: calc(-1 * var(--ui-focus-width));
+    html[data-ui-input-modality="touch"] :scope .actions {
+      grid-column: 5;
+    }
+
+    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+      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 {
+      grid-column: 6;
+    }
   }
-  [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
-    > .row {
-    outline: var(--ui-border-width) solid Highlight;
-    outline-offset: calc(-1 * var(--ui-border-width));
+
+  @media (prefers-reduced-motion: reduce) {
+    .row, .disclosure-icon, .drag-handle {
+      transition: none;
+    }
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden] {
-  display: none;
+  @media (forced-colors: active) {
+    :scope:focus-visible > .row {
+      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 {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>