@threadlabs/looma 0.4.0 → 0.5.0

package/vue/UiTree.d.ts

@@ -0,0 +1,62 @@
+type __VLS_Props = {
+    hoverExpandDelay?: number | null;
+    label?: string | null;
+    maxDepth?: number | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reorder: (detail: {
+        readonly sourceId: string;
+        readonly targetId: string;
+        readonly position: "before" | "inside" | "after";
+        readonly sourceType: string;
+        readonly targetType: string;
+        readonly sourceScope: string;
+        readonly targetScope: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+    "reorder-rejected": (detail: {
+        readonly sourceId: string;
+        readonly targetId: string;
+        readonly position: "before" | "inside" | "after";
+        readonly reason: "max-depth";
+        readonly maxDepth: number;
+        readonly resultingDepth: number;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReorder?: ((detail: {
+        readonly sourceId: string;
+        readonly targetId: string;
+        readonly position: "before" | "inside" | "after";
+        readonly sourceType: string;
+        readonly targetType: string;
+        readonly sourceScope: string;
+        readonly targetScope: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+    "onReorder-rejected"?: ((detail: {
+        readonly sourceId: string;
+        readonly targetId: string;
+        readonly position: "before" | "inside" | "after";
+        readonly reason: "max-depth";
+        readonly maxDepth: number;
+        readonly resultingDepth: number;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+}>, {
+    label: string | null;
+    hoverExpandDelay: number | null;
+    maxDepth: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiTree.js

@@ -0,0 +1,2 @@
+import { t as UiTree_default } from "./chunks/UiTree.js";
+export { UiTree_default as default };

package/vue/UiTree.vue

@@ -0,0 +1,117 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 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/ui-tree.js";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+  hoverExpandDelay?: number | null;
+  label?: string | null;
+  maxDepth?: number | null;
+}>(), {
+  hoverExpandDelay: 700,
+  label: "Tree",
+  maxDepth: 0,
+});
+const emit = defineEmits<{
+  "reorder": [detail: { readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+  "reorder-rejected": [detail: { readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+
+/** 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 = {"reorder":{"bubbles":true,"composed":true,"cancelable":false},"reorder-rejected":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "reorder": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["sourceId"] === "string" && typeof (detail as Record<string, unknown>)["targetId"] === "string" && ((detail as Record<string, unknown>)["position"] === "before" || (detail as Record<string, unknown>)["position"] === "inside" || (detail as Record<string, unknown>)["position"] === "after") && typeof (detail as Record<string, unknown>)["sourceType"] === "string" && typeof (detail as Record<string, unknown>)["targetType"] === "string" && typeof (detail as Record<string, unknown>)["sourceScope"] === "string" && typeof (detail as Record<string, unknown>)["targetScope"] === "string" && ((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) => ["sourceId","targetId","position","sourceType","targetType","sourceScope","targetScope","trigger"].includes(key))),
+    "reorder-rejected": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["sourceId"] === "string" && typeof (detail as Record<string, unknown>)["targetId"] === "string" && ((detail as Record<string, unknown>)["position"] === "before" || (detail as Record<string, unknown>)["position"] === "inside" || (detail as Record<string, unknown>)["position"] === "after") && (detail as Record<string, unknown>)["reason"] === "max-depth" && Number.isInteger((detail as Record<string, unknown>)["maxDepth"]) && Number.isInteger((detail as Record<string, unknown>)["resultingDepth"]) && ((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) => ["sourceId","targetId","position","reason","maxDepth","resultingDepth","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.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+function read(name: string): unknown {
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  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),
+  }),
+  refs: refs 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;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    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; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    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;
+  },
+  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;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  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();
+});
+</script>
+
+<template>
+  <div data-component="ui-tree" role="tree" v-bind="$attrs" ref="root"><slot></slot></div>
+</template>
+
+<style scoped>
+[data-component~="ui-tree"] {
+      display: block;
+      min-inline-size: 0;
+      padding-inline-start: var(--ui-tree-gutter, 0px);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-tree"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiTreeItem.d.ts

@@ -0,0 +1,56 @@
+type __VLS_Props = {
+    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;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    label?: (props: typeof __VLS_3) => any;
+} & {
+    actions?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: (detail: {
+        readonly id: string;
+        readonly expanded: boolean;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExpand?: ((detail: {
+        readonly id: string;
+        readonly expanded: boolean;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+}>, {
+    label: string | null;
+    disabled: boolean | null;
+    selected: boolean | null;
+    expanded: boolean | null;
+    accepts: string | null;
+    container: boolean | null;
+    dragType: string | null;
+    dropScope: string | null;
+    itemId: string | null;
+    sortable: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiTreeItem.js

@@ -0,0 +1,2 @@
+import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
+export { UiTreeItem_default as default };

package/vue/UiTreeItem.vue

@@ -0,0 +1,418 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 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;
+  },
+};
+
+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);
+
+/** 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>;
+  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))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (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(" "));
+
+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];
+}
+
+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.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  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),
+  }),
+  refs: refs 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;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    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; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    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;
+  },
+  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;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  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();
+});
+</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>
+</template>
+
+<style scoped>
+[data-component~="ui-tree-item"] {
+      --_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));
+    }
+
+    .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: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-dragging] .row {
+      opacity: 0.42;
+    }
+
+    [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"][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 {
+      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: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::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);
+    }
+
+    /* 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);
+    }
+
+    .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;
+    }
+
+    .label {
+      grid-column: 3;
+      grid-row: 1;
+      min-inline-size: 0;
+      padding: var(--ui-space-1) var(--ui-space-2);
+    }
+
+    .actions {
+      grid-column: 4;
+      grid-row: 1;
+      display: inline-flex;
+      align-items: center;
+      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);
+    }
+
+    .row:hover .drag-handle,
+    .drag-handle:hover,
+    .drag-handle:focus-visible,
+    [data-component~="ui-tree-item"][data-dragging] .drag-handle {
+      opacity: 1;
+    }
+
+    .drag-handle:active {
+      cursor: grabbing;
+    }
+
+    .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,
+    .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::before {
+      inset-inline-start: -1px;
+    }
+    .drop-indicator::after {
+      inset-inline-end: -1px;
+    }
+
+    [data-component~="ui-tree-item"][data-drop-position="before"] .row-drop-indicator {
+      display: block;
+      inset-block-start: -1px;
+    }
+
+    [data-component~="ui-tree-item"][data-drop-position="after"] .subtree-drop-indicator {
+      display: block;
+      inset-block-end: -1px;
+    }
+
+    .children[hidden] {
+      display: none;
+    }
+
+    html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] {
+      --_tree-row-min-height: 44px;
+    }
+
+    html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle {
+      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>