@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiTreeItem.vue

@@ -1,418 +1,543 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
-import * as controllerModule from "../components/ui-tree-item/ui-tree-item.js";
-
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  n: (v: unknown): number | undefined => typeof v === "number" && v === v ? v : undefined,
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-  call: (fn: string, ...args: unknown[]): any => {
-    if (fn === "format") {
-      let index = 1;
-      return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : undefined;
-    }
-    const n = args.map(hn.n);
-    if (n.some((value) => value === undefined)) return undefined;
-    const v = n as number[];
-    switch (fn) {
-      case "abs": return v.length === 1 ? Math.abs(v[0]!) : undefined;
-      case "round": return v.length === 1 ? Math.round(v[0]!) : undefined;
-      case "min": return v.length > 0 ? Math.min(...v) : undefined;
-      case "max": return v.length > 0 ? Math.max(...v) : undefined;
-      case "clamp": return v.length === 3 ? Math.min(Math.max(v[0]!, v[1]!), v[2]!) : undefined;
-    }
-    return undefined;
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watchEffect,
+} from 'vue'
+import * as controllerModule from '../components/ui-tree-item/ui-tree-item.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    accepts?: string
+    container?: boolean
+    disabled?: boolean
+    dragType?: string
+    dropDepth?: number
+    dropScope?: string
+    expanded?: boolean
+    itemId?: string
+    label?: string
+    selected?: boolean
+    sortable?: boolean
+    subtreeDepth?: number
+  }>(),
+  {
+    accepts: '',
+    container: false,
+    disabled: false,
+    dragType: 'item',
+    dropScope: '',
+    expanded: false,
+    itemId: '',
+    label: '',
+    selected: false,
+    sortable: false,
   },
-};
-
-const props = withDefaults(defineProps<{
-  accepts?: string | null;
-  container?: boolean | null;
-  disabled?: boolean | null;
-  dragType?: string | null;
-  dropDepth?: number | null;
-  dropScope?: string | null;
-  expanded?: boolean | null;
-  itemId?: string | null;
-  label?: string | null;
-  selected?: boolean | null;
-  sortable?: boolean | null;
-  subtreeDepth?: number | null;
-}>(), {
-  accepts: "",
-  container: false,
-  disabled: false,
-  dragType: "item",
-  dropScope: "",
-  expanded: false,
-  itemId: "",
-  label: "",
-  selected: false,
-  sortable: false,
-});
+)
 const emit = defineEmits<{
-  "expand": [detail: { readonly id: string; readonly expanded: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_internalExpanded = ref<any>(false);
-const state_structuralLevel = ref<any>(1);
-const state_tabStop = ref<any>(false);
-const state_isContainer = ref<any>(false);
+  'update:expanded': [value: boolean]
+  expand: [
+    detail: {
+      readonly id: string
+      readonly expanded: boolean
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const rowElement = useTemplateRef<HTMLElement>('row')
+const dragHandleElement = useTemplateRef<HTMLElement>('dragHandle')
+const disclosureElement = useTemplateRef<HTMLElement>('disclosure')
+const childrenElement = useTemplateRef<HTMLElement>('children')
+const internalExpanded = ref(false)
+const structuralLevel = ref(1)
+const tabStop = ref(false)
+const isContainer = ref(false)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.selected && 'selected',
+    props.disabled && 'disabled',
+  ].filter(Boolean).join(' ')
+)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  const declared = {"expand":{"bubbles":false,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    expand: { bubbles: false, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "expand": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["id"] === "string" && typeof (detail as Record<string, unknown>)["expanded"] === "boolean" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["id","expanded","trigger"].includes(key))),
-  };
+    expand: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['id'] === 'string'
+      && typeof (detail as Record<string, unknown>)['expanded'] === 'boolean'
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['id', 'expanded', 'trigger'].includes(key)),
+  }
   if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
+  }
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  if (detail !== null && typeof detail === 'object' && 'expanded' in detail) {
+    emitEvent('update:expanded', (detail as Record<string, unknown>)['expanded'])
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["selected","disabled"] as const).flatMap((name) => {
-  const value = read(name);
-  const tokens: string[] = hn.t(value) ? [name] : [];
-  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-  return tokens;
-}).join(" "));
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+  ) ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "internalExpanded") return state_internalExpanded.value;
-  if (name === "structuralLevel") return state_structuralLevel.value;
-  if (name === "tabStop") return state_tabStop.value;
-  if (name === "isContainer") return state_isContainer.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'internalExpanded') return internalExpanded.value
+  if (name === 'structuralLevel') return structuralLevel.value
+  if (name === 'tabStop') return tabStop.value
+  if (name === 'isContainer') return isContainer.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "internalExpanded") { state_internalExpanded.value = value; return true; }
-  if (name === "structuralLevel") { state_structuralLevel.value = value; return true; }
-  if (name === "tabStop") { state_tabStop.value = value; return true; }
-  if (name === "isContainer") { state_isContainer.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'internalExpanded') {
+    internalExpanded.value = value as never
+    return true
+  }
+  if (name === 'structuralLevel') {
+    structuralLevel.value = value as never
+    return true
+  }
+  if (name === 'tabStop') {
+    tabStop.value = value as never
+    return true
+  }
+  if (name === 'isContainer') {
+    isContainer.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  get element(): Element {
+    return root.value as Element
+  },
   state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === "string" && write(name, value),
+    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === 'string' && write(name, value),
   }),
-  refs: refs as Readonly<Record<string, Element>>,
+  refs: {
+    get row(): Element {
+      return rowElement.value as Element
+    },
+    get dragHandle(): Element {
+      return dragHandleElement.value as Element
+    },
+    get disclosure(): Element {
+      return disclosureElement.value as Element
+    },
+    get children(): Element {
+      return childrenElement.value as Element
+    },
+  } as Readonly<Record<string, Element>>,
   elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
     get: (_target, name) => {
-      if (typeof name !== "string" || root.value === null) return undefined;
-      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
-      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+      if (typeof name !== 'string' || root.value === null) return undefined
+      const form = root.value instanceof HTMLFormElement
+        ? root.value
+        : root.value.querySelector('form')
+      return form?.elements.namedItem(name)
+        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
     },
   }),
   signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue);
+    const value = shallowRef(initialValue)
     return {
       get: (): T => value.value,
-      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
-      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
-    };
+      set: (next: T): void => {
+        if (!Object.is(value.value, next)) value.value = next
+      },
+      update: (next: (current: T) => T): void => {
+        const updated = next(value.value)
+        if (!Object.is(value.value, updated)) value.value = updated
+      },
+    }
   },
   computed<T>(compute: () => T) {
-    const value = computed(compute);
-    return { get: (): T => value.value };
+    const value = computed(compute)
+    return { get: (): T => value.value }
   },
   effect(run: () => void | (() => void)): () => void {
     const stop = watchEffect((onCleanup) => {
-      const cleanup = run();
-      if (typeof cleanup === "function") onCleanup(cleanup);
-    }, { flush: "post" });
-    stops.push(stop);
-    return stop;
+      const cleanup = run()
+      if (typeof cleanup === 'function') onCleanup(cleanup)
+    }, { flush: 'post' })
+    stops.push(stop)
+    return stop
   },
   on(event: string, listener: EventListener): () => void {
-    const element = root.value;
-    element?.addEventListener(event, listener);
-    const off = (): void => element?.removeEventListener(event, listener);
-    stops.push(off);
-    return off;
+    const element = root.value
+    element?.addEventListener(event, listener)
+    const off = (): void => element?.removeEventListener(event, listener)
+    stops.push(off)
+    return off
   },
   dispatch,
-};
+}
 
-let cleanup: void | (() => void);
-let ready: Promise<void> | undefined;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
+    cleanup = result
+  })
+})
 onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop();
-  if (typeof cleanup === "function") cleanup();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 </script>
 
 <template>
-  <div data-component="ui-tree-item" role="treeitem" v-bind="$attrs" :aria-label="hn.enumerated(props.label)" :aria-level="hn.enumerated(state_structuralLevel)" :aria-selected="hn.enumerated(props.selected)" :aria-disabled="hn.enumerated(props.disabled)" :data-item-id="hn.attr(props.itemId)" :data-drag-type="hn.attr(props.dragType)" :data-drop-scope="hn.attr(props.dropScope)" :data-accepts="hn.attr(props.accepts)" :data-drop-depth="hn.attr(props.dropDepth)" :data-subtree-depth="hn.attr(props.subtreeDepth)" :data-ui-tree-item-state="hostState || undefined" ref="root"><div class="row" :ref="(element) => { refs['row'] = element as Element }"><template v-if="hn.t((hn.t(props.sortable) && hn.t(!hn.t(props.disabled))))"><button class="drag-handle" type="button" draggable="true" :aria-label="hn.enumerated(hn.call('format', 'Drag %s to reorder', props.label))" :ref="(element) => { refs['dragHandle'] = element as Element }"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></svg></button></template><button class="disclosure" type="button" :disabled="hn.attr(props.disabled)" :hidden="hn.attr(!hn.t(state_isContainer))" :ref="(element) => { refs['disclosure'] = element as Element }"><span class="disclosure-icon" aria-hidden="true"></span></button><span class="leading"><slot name="leading"></slot></span><span class="label"><slot name="label">{{ hn.text(props.label) }}</slot></span><span class="actions"><slot name="actions"></slot></span><span class="drop-indicator row-drop-indicator" aria-hidden="true"></span></div><div class="children" role="group" :hidden="hn.attr(!hn.t((hn.t(state_isContainer) && hn.t(state_internalExpanded))))" :ref="(element) => { refs['children'] = element as Element }"><slot></slot></div><span class="drop-indicator subtree-drop-indicator" aria-hidden="true"></span></div>
+  <div
+    data-component="ui-tree-item"
+    role="treeitem"
+    v-bind="$attrs"
+    :aria-label="label"
+    :aria-level="structuralLevel"
+    :aria-selected="selected"
+    :aria-disabled="disabled"
+    :data-item-id="itemId"
+    :data-drag-type="dragType"
+    :data-drop-scope="dropScope"
+    :data-accepts="accepts"
+    :data-drop-depth="dropDepth"
+    :data-subtree-depth="subtreeDepth"
+    :data-ui-tree-item-state="hostState || undefined"
+    ref="root"
+  >
+    <div class="row" ref="row">
+      <button
+        v-if="sortable && !disabled"
+        class="drag-handle"
+        type="button"
+        draggable="true"
+        :aria-label="`Drag ${label} to reorder`"
+        ref="dragHandle"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <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>
+        </svg>
+      </button>
+      <button
+        class="disclosure"
+        type="button"
+        :disabled="disabled"
+        :hidden="!isContainer"
+        ref="disclosure"
+      >
+        <span class="disclosure-icon" aria-hidden="true"></span>
+      </button>
+      <span class="leading"><slot name="leading" /></span>
+      <span class="label"><slot name="label">{{ label }}</slot></span>
+      <span class="actions"><slot name="actions" /></span>
+      <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
+    </div>
+    <div class="children" role="group" :hidden="!(isContainer && internalExpanded)" ref="children">
+      <slot />
+    </div>
+    <span class="drop-indicator subtree-drop-indicator" aria-hidden="true"></span>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-tree-item"] {
-      --_tree-row-min-height: 32px;
+  --_tree-row-min-height: 32px;
 
-      position: relative;
-      display: block;
-      min-inline-size: 0;
-      margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
-    }
+  position: relative;
+  display: block;
+  min-inline-size: 0;
+  margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
+}
 
-    .row {
-      position: relative;
-      display: grid;
-      grid-template-columns: 20px auto minmax(0, 1fr) auto;
-      align-items: center;
-      min-block-size: var(--ui-tree-row-min-height, var(--_tree-row-min-height));
-      min-inline-size: 0;
-      font-size: var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));
-      border-radius: var(--ui-radius-md);
-      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 {
+  position: relative;
+  display: grid;
+  grid-template-columns: 20px auto minmax(0, 1fr) auto;
+  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-ui));
+  border-radius: var(--ui-radius-md);
+  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,
-    [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row,
-    .row:focus-within {
-      color: var(--ui-text-primary);
-      background: var(--ui-surface-muted);
-    }
+.row:hover,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row,
+.row:focus-within {
+  color: var(--ui-text-primary);
+  background: var(--ui-surface-muted);
+}
 
-    [data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row {
-      opacity: 0.55;
-    }
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row {
+  opacity: 0.55;
+}
 
-    [data-component~="ui-tree-item"][data-dragging] .row {
-      opacity: 0.42;
-    }
+[data-component~="ui-tree-item"][data-dragging] .row {
+  opacity: 0.42;
+}
 
-    [data-component~="ui-tree-item"]:focus {
-      outline: none;
-    }
+[data-component~="ui-tree-item"]:focus {
+  outline: none;
+}
 
-    [data-component~="ui-tree-item"]:focus-visible .row {
-      box-shadow: 0 0 0 2px var(--ui-focus-ring);
-    }
+[data-component~="ui-tree-item"]:focus-visible .row {
+  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+}
 
-    [data-component~="ui-tree-item"][data-drop-position="inside"] .row {
-      background: var(--ui-accent-subtle);
-      box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
-    }
+/* 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 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
+}
 
-    .disclosure,
-    .disclosure-spacer {
-      grid-column: 1;
-      grid-row: 1;
-      inline-size: 20px;
-      block-size: 28px;
-    }
+.disclosure,
+.disclosure-spacer {
+  grid-column: 1;
+  grid-row: 1;
+  inline-size: 20px;
+  block-size: 28px;
+}
 
-    .disclosure {
-      display: grid;
-      place-items: center;
-      padding: 0;
-      color: var(--ui-text-muted);
-      background: transparent;
-      border: 0;
-      border-radius: var(--ui-radius-sm);
-      cursor: pointer;
-    }
+.disclosure {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  color: var(--ui-text-muted);
+  background: transparent;
+  border: 0;
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+}
 
-    .disclosure[hidden] {
-      display: none;
-    }
+.disclosure[hidden] {
+  display: none;
+}
 
-    .disclosure:hover {
-      color: var(--ui-text-primary);
-      background: var(--ui-surface-elevated);
-    }
+.disclosure:hover {
+  color: var(--ui-text-primary);
+  background: var(--ui-surface-elevated);
+}
 
-    .disclosure-icon {
-      display: grid;
-      place-items: center;
-      inline-size: 14px;
-      block-size: 14px;
-      transform: rotate(-90deg);
-      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
-    }
+.disclosure-icon {
+  display: grid;
+  place-items: center;
+  inline-size: 14px;
+  block-size: 14px;
+  transform: rotate(-90deg);
+  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+}
 
-    .disclosure-icon::before {
-      display: block;
-      inline-size: 0.45rem;
-      block-size: 0.45rem;
-      border-inline-end: 2px solid currentColor;
-      border-block-end: 2px 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);
-    }
+.disclosure-icon::before {
+  display: block;
+  inline-size: 0.45rem;
+  block-size: 0.45rem;
+  border-inline-end: 2px solid currentColor;
+  border-block-end: 2px 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"] .disclosure-icon {
-      transform: rotate(0deg);
-    }
+[data-component~="ui-tree-item"][aria-expanded="true"] .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%;
-    }
+/* 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);
-    }
+/* 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);
+}
 
-    .leading:empty {
-      display: none;
-    }
+.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;
-    }
+/* 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;
+}
 
-    .label {
-      grid-column: 3;
-      grid-row: 1;
-      min-inline-size: 0;
-      padding: var(--ui-space-1) var(--ui-space-2);
-    }
+/* 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;
+  padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1))
+    var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+}
 
-    .actions {
-      grid-column: 4;
-      grid-row: 1;
-      display: inline-flex;
-      align-items: center;
-      min-inline-size: 0;
-    }
+/* 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 > :slotted(*) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
 
-    .drag-handle {
-      position: absolute;
-      z-index: 2;
-      inset-block-start: 50%;
-      inset-inline-start: -22px;
-      inline-size: 20px;
-      block-size: 32px;
-      display: grid;
-      place-items: center;
-      padding: 7px 3px;
-      color: var(--ui-text-muted);
-      background: var(--ui-surface-elevated);
-      border: 1px solid transparent;
-      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);
-    }
+.actions {
+  grid-column: 4;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+}
 
-    .row:hover .drag-handle,
-    .drag-handle:hover,
-    .drag-handle:focus-visible,
-    [data-component~="ui-tree-item"][data-dragging] .drag-handle {
-      opacity: 1;
-    }
+.drag-handle {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 50%;
+  inset-inline-start: -22px;
+  inline-size: 20px;
+  block-size: 32px;
+  display: grid;
+  place-items: center;
+  padding: 7px 3px;
+  color: var(--ui-text-muted);
+  background: var(--ui-surface-elevated);
+  border: 1px solid transparent;
+  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);
+}
 
-    .drag-handle:active {
-      cursor: grabbing;
-    }
+.row:hover .drag-handle,
+.drag-handle:hover,
+.drag-handle:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle {
+  opacity: 1;
+}
 
-    .drop-indicator {
-      position: absolute;
-      z-index: 3;
-      inset-inline: 1px;
-      display: none;
-      block-size: 2px;
-      border-radius: 999px;
-      background: var(--ui-tree-drop-color, var(--ui-accent-solid));
-      pointer-events: none;
-    }
+.drag-handle:active {
+  cursor: grabbing;
+}
 
-    .drop-indicator::before,
-    .drop-indicator::after {
-      content: "";
-      position: absolute;
-      inset-block-start: 50%;
-      inline-size: 7px;
-      block-size: 7px;
-      border: 2px solid var(--ui-tree-drop-color, var(--ui-accent-solid));
-      border-radius: 999px;
-      background: var(--ui-surface-elevated);
-      transform: translateY(-50%);
-    }
+.drop-indicator {
+  position: absolute;
+  z-index: 3;
+  inset-inline: 1px;
+  display: none;
+  block-size: 2px;
+  border-radius: 999px;
+  background: var(--ui-tree-drop-color, var(--ui-accent-solid));
+  pointer-events: none;
+}
 
-    .drop-indicator::before {
-      inset-inline-start: -1px;
-    }
-    .drop-indicator::after {
-      inset-inline-end: -1px;
-    }
+.drop-indicator::before,
+.drop-indicator::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inline-size: 7px;
+  block-size: 7px;
+  border: 2px solid var(--ui-tree-drop-color, var(--ui-accent-solid));
+  border-radius: 999px;
+  background: var(--ui-surface-elevated);
+  transform: translateY(-50%);
+}
 
-    [data-component~="ui-tree-item"][data-drop-position="before"] .row-drop-indicator {
-      display: block;
-      inset-block-start: -1px;
-    }
+.drop-indicator::before {
+  inset-inline-start: -1px;
+}
+.drop-indicator::after {
+  inset-inline-end: -1px;
+}
 
-    [data-component~="ui-tree-item"][data-drop-position="after"] .subtree-drop-indicator {
-      display: block;
-      inset-block-end: -1px;
-    }
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator {
+  display: block;
+  inset-block-start: -1px;
+}
 
-    .children[hidden] {
-      display: none;
-    }
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator {
+  display: block;
+  inset-block-end: -1px;
+}
 
-    html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] {
-      --_tree-row-min-height: 44px;
-    }
+.children[hidden] {
+  display: none;
+}
 
-    html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle {
-      display: none;
-    }
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] {
+  --_tree-row-min-height: 44px;
+}
 
-    @media (prefers-reduced-motion: reduce) {
-      .row,
-      .disclosure-icon,
-      .drag-handle {
-        transition: none;
-      }
-    }
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle {
+  display: none;
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-tree-item"][hidden] {
-      display: none;
-    }
+@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;
+}
 </style>