@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/components/ui-menu-item/ui-menu-item.html

@@ -9,19 +9,19 @@
       display: block;
       box-sizing: border-box;
       width: 100%;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-menu-item-padding-block, var(--ui-space-2)) var(--ui-menu-item-padding-inline, var(--ui-space-3));
       text-align: left;
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-menu-item-radius, var(--ui-radius-md));
       color: var(--ui-text-primary);
-      font-size: var(--ui-font-size-md);
-      font-weight: var(--ui-font-medium, 500);
+      font-size: var(--ui-menu-item-font-size, var(--ui-font-size-md));
+      font-weight: var(--ui-font-medium);
       cursor: pointer;
       outline: none;
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     :host:is(:hover, :focus-visible):not([aria-disabled="true"]) {
-      background: var(--ui-surface-subtle);
+      background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
     }
 
     :host[aria-disabled="true"] {

package/components/ui-popover/ui-popover.html

@@ -19,9 +19,9 @@
       box-sizing: border-box;
       max-inline-size: min(
         20rem,
-        calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2)
+        calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
       );
-      max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
       overflow: visible;
       padding: 0;
       border: 0;
@@ -39,7 +39,7 @@
       padding: var(--ui-space-3);
       background: var(--ui-surface-elevated);
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-3);
+      border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
     }
 

package/components/ui-popover/ui-popover.js

@@ -14,11 +14,19 @@ export default function controller(host) {
 
   const close = (reason, trigger) => {
     host.state.internalOpen = false;
+    lastOpen = false;
     host.dispatch("close", { open: false, reason, trigger });
   };
   const onAnchorClick = (event) => {
-    host.state.internalOpen = !Boolean(host.state.internalOpen);
-    if (!host.state.internalOpen) close("action", event.detail === 0 ? "keyboard" : "pointer");
+    const trigger = event.detail === 0 ? "keyboard" : "pointer";
+    if (host.state.internalOpen) {
+      close("action", trigger);
+      return;
+    }
+    host.state.internalOpen = true;
+    // Announce the anchor's toggle once, with its real trigger; apply() only announces changes it made.
+    lastOpen = true;
+    host.dispatch("open", { open: true, reason: "action", trigger });
   };
   const ids = createIdResolver(document, () => apply());
   const setup = () => {

package/components/ui-reel/ui-reel.html

@@ -7,7 +7,7 @@
   <div role="region" tabindex="0"><slot></slot></div>
   <style>
     :host {
-      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-gap: var(--ui-space-4);
       --_reel-item-width: auto;
       display: flex;
       inline-size: 100%;
@@ -26,19 +26,19 @@
     }
 
     :host-state([gap="xs"]) {
-      --_reel-gap: var(--ui-space-2, 0.5rem);
+      --_reel-gap: var(--ui-space-2);
     }
     :host-state([gap="s"]) {
-      --_reel-gap: var(--ui-space-3, 0.75rem);
+      --_reel-gap: var(--ui-space-3);
     }
     :host-state([gap="m"]) {
-      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-gap: var(--ui-space-4);
     }
     :host-state([gap="l"]) {
-      --_reel-gap: var(--ui-space-5, 1.5rem);
+      --_reel-gap: var(--ui-space-5);
     }
     :host-state([gap="xl"]) {
-      --_reel-gap: var(--ui-space-6, 2rem);
+      --_reel-gap: var(--ui-space-6);
     }
     :host-state([itemWidth="sm"]) {
       --_reel-item-width: 12rem;

package/components/ui-search-result-row/ui-search-result-row.html

@@ -18,18 +18,18 @@
       inline-size: 100%;
       min-block-size: var(--ui-search-result-row-min-height, 56px);
       margin: 0;
-      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
-      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
       display: flex;
       align-items: flex-start;
-      gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
-      background: var(--ui-search-result-row-bg, transparent);
+      gap: var(--ui-search-result-row-gap, var(--ui-space-3));
+      background: var(--ui-search-result-row-surface, transparent);
       border: none;
-      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border));
       color: inherit;
       cursor: pointer;
       text-align: left;
-      transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     :host:last-child {
@@ -37,18 +37,18 @@
     }
 
     :host:hover:enabled {
-      background: var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%));
+      background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }
 
     :host-state([selected]) {
       background: var(
         --ui-search-result-row-selected-bg,
-        var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))
+        var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
       );
     }
 
     :host:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, #2563eb);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: -2px;
     }
 

package/components/ui-search-shell/ui-search-shell.html

@@ -55,7 +55,7 @@
       max-block-size: var(--ui-search-shell-max-height, 80vh);
       margin-inline: auto;
       overflow: hidden;
-      background: var(--ui-search-shell-bg, var(--ui-surface-elevated));
+      background: var(--ui-search-shell-surface, var(--ui-surface-elevated));
       border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
       border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
       box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
@@ -64,6 +64,13 @@
     .search {
       padding: var(--ui-space-3);
       border-block-end: 1px solid var(--ui-border-default);
+      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* The search region shows where typing goes, whatever the author put in it. */
+    .search:focus-within {
+      border-block-end-color: var(--ui-search-shell-focus-color, var(--ui-control-focus));
+      box-shadow: inset 0 -1px 0 var(--ui-search-shell-focus-color, var(--ui-control-focus));
     }
 
     :slotted(input[slot="search"]) {
@@ -72,7 +79,7 @@
       min-block-size: var(--ui-control-min-block-size);
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-control-surface);
       color: var(--ui-text-primary);
       font: inherit;
@@ -81,7 +88,7 @@
 
     :slotted(input[slot="search"]:focus-visible) {
       border-color: var(--ui-control-focus);
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 

package/components/ui-search-shell/ui-search-shell.js

@@ -40,6 +40,13 @@ export default function controller(host) {
     event.preventDefault();
     if (host.state.dismissible) dispatchClose("escape", "keyboard");
   };
+  // A search field spends the first Escape clearing itself and the dialog never sees a cancel,
+  // so a dismissible shell closes on Escape from anywhere inside it.
+  const onKeydown = (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || !host.state.dismissible) return;
+    event.preventDefault();
+    dispatchClose("escape", "keyboard");
+  };
   const onClick = (event) => {
     if (host.state.dismissible && event.target === dialog) dispatchClose("light-dismiss", trigger());
   };
@@ -47,12 +54,14 @@ export default function controller(host) {
     if (!suppressNativeClose && host.state.internalOpen) dispatchClose("action", trigger());
   };
   dialog.addEventListener("cancel", onCancel);
+  dialog.addEventListener("keydown", onKeydown);
   dialog.addEventListener("click", onClick);
   dialog.addEventListener("close", onClose);
   return () => {
     stop();
     stopTracking();
     dialog.removeEventListener("cancel", onCancel);
+    dialog.removeEventListener("keydown", onKeydown);
     dialog.removeEventListener("click", onClick);
     dialog.removeEventListener("close", onClose);
     closeNative();

package/components/ui-select/ui-select.html

@@ -13,11 +13,11 @@
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size-md, 2.5rem);
+      min-block-size: var(--ui-control-size-md);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-select-radius, var(--ui-radius-2));
+      border-radius: var(--ui-select-radius, var(--ui-radius-md));
       background-color: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       color-scheme: light dark;

package/components/ui-sidebar/ui-sidebar.html

@@ -91,10 +91,10 @@
       inset-inline-start: 3px;
       inline-size: 2px;
       background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
-      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      opacity: var(--ui-affordance-guide-opacity);
       transition:
-        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
     }
 
     .guide {
@@ -103,17 +103,17 @@
       inset-inline-start: 50%;
       inline-size: 6px;
       block-size: 22px;
-      border: 1px solid var(--ui-border-strong, #c8c8c4);
-      border-radius: var(--ui-radius-round, 999px);
-      background: var(--ui-surface-elevated, #fff);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-surface-elevated);
       opacity: 0;
       transform: translate(-50%, -50%);
-      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
       pointer-events: none;
     }
 
     .resizer:is(:hover, :focus-visible)::after {
-      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
       opacity: 1;
     }
 
@@ -136,9 +136,9 @@
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       transform: translateX(0);
       transition:
-        transform var(--ui-motion-base, 0.2s) var(--ui-motion-ease-out, ease-out),
-        display var(--ui-motion-base, 0.2s) allow-discrete,
-        overlay var(--ui-motion-base, 0.2s) allow-discrete;
+        transform var(--ui-motion-base) var(--ui-motion-ease-out),
+        display var(--ui-motion-base) allow-discrete,
+        overlay var(--ui-motion-base) allow-discrete;
     }
 
     /* The author display above would otherwise override the UA rule that hides a closed popover. */

package/components/ui-stack/ui-stack.html

@@ -7,7 +7,7 @@
   <div><slot></slot></div>
   <style>
     :host {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
       display: flex;
       flex-direction: column;
       align-items: stretch;
@@ -18,19 +18,19 @@
     }
 
     :host-state([gap="xs"]) {
-      --_layout-gap: var(--ui-space-2, 0.5rem);
+      --_layout-gap: var(--ui-space-2);
     }
     :host-state([gap="s"]) {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
     }
     :host-state([gap="m"]) {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
     }
     :host-state([gap="l"]) {
-      --_layout-gap: var(--ui-space-5, 1.5rem);
+      --_layout-gap: var(--ui-space-5);
     }
     :host-state([gap="xl"]) {
-      --_layout-gap: var(--ui-space-6, 2rem);
+      --_layout-gap: var(--ui-space-6);
     }
     :host-state([align="start"]) {
       align-items: flex-start;

package/components/ui-switcher/ui-switcher.html

@@ -7,7 +7,7 @@
   <div><slot></slot></div>
   <style>
     :host {
-      --_switcher-gap: var(--ui-space-4, 1rem);
+      --_switcher-gap: var(--ui-space-4);
       display: flex;
       flex-wrap: wrap;
       gap: var(--ui-switcher-gap, var(--_switcher-gap));
@@ -24,19 +24,19 @@
     }
 
     :host-state([gap="xs"]) {
-      --_switcher-gap: var(--ui-space-2, 0.5rem);
+      --_switcher-gap: var(--ui-space-2);
     }
     :host-state([gap="s"]) {
-      --_switcher-gap: var(--ui-space-3, 0.75rem);
+      --_switcher-gap: var(--ui-space-3);
     }
     :host-state([gap="m"]) {
-      --_switcher-gap: var(--ui-space-4, 1rem);
+      --_switcher-gap: var(--ui-space-4);
     }
     :host-state([gap="l"]) {
-      --_switcher-gap: var(--ui-space-5, 1.5rem);
+      --_switcher-gap: var(--ui-space-5);
     }
     :host-state([gap="xl"]) {
-      --_switcher-gap: var(--ui-space-6, 2rem);
+      --_switcher-gap: var(--ui-space-6);
     }
     :host-state([threshold="xs"]) > :slotted(*) {
       flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);

package/components/ui-tabs/ui-tabs.html

@@ -1,11 +1,12 @@
 <template component="ui-tabs" controller="./ui-tabs.js">
   <defs>
+    <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="label" type="string" default="Tabs">label token.</prop>
     <prop name="value" type="string" default="">value token.</prop>
     <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>
     <prop name="stretch" type="boolean" default="false">Share the full width of the tab list equally between tabs instead of sizing each to its label.</prop>
     <state name="internalValue" :value="''"></state>
-    <state name="tabs" :value="[]"></state>
+    <state name="tabs" type="list(object({ id: string, label: string }))" :value="[]"></state>
     <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
   <div>
@@ -26,6 +27,19 @@
     <div class="panels" $ref="panels"><slot></slot></div>
   </div>
   <style>
+    /* Density resolves into the tab row's own values; the public tokens still override them. */
+    :host {
+      --_tab-min-block-size: var(--ui-control-size);
+      --_tab-padding-block: var(--ui-space-2);
+      --_tab-padding-inline: var(--ui-space-3);
+    }
+
+    :host-state([density="compact"]) {
+      --_tab-min-block-size: var(--ui-control-size-sm);
+      --_tab-padding-block: var(--ui-space-1);
+      --_tab-padding-inline: var(--ui-space-2);
+    }
+
     :host {
       display: grid;
       inline-size: 100%;
@@ -50,16 +64,16 @@
     }
 
     .list button {
-      min-block-size: 2.5rem;
+      min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
       margin: 0 0 -1px;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
       border: 0;
       border-block-end: 2px solid transparent;
       background: transparent;
       color: var(--ui-text-secondary);
       font: inherit;
       font-size: var(--ui-font-size-sm);
-      font-weight: var(--ui-font-medium, 500);
+      font-weight: var(--ui-font-medium);
       cursor: pointer;
       transition:
         color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -87,7 +101,7 @@
       position: relative;
       outline: none;
       box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
     }
 
     .panels {

package/components/ui-textarea/ui-textarea.html

@@ -14,13 +14,13 @@
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: calc(var(--ui-space-12, 3rem) * 2);
+      min-block-size: calc(3rem * 2);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-textarea-radius, var(--ui-radius-2));
+      border-radius: var(--ui-textarea-radius, var(--ui-radius-md));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       font: inherit;

package/components/ui-toast-region/ui-toast-region.html

@@ -7,7 +7,7 @@
     >Dismiss each message automatically after its duration. Timers pause while the pointer or focus is on a message.</prop>
     <prop name="duration" type="number" default="5000">Milliseconds an automatically dismissed message stays visible.</prop>
     <state name="internalOpen" :value="false"></state>
-    <state name="toasts" :value="[]"></state>
+    <state name="toasts" type="list(object({ id: string, message: string, role: alert | status, closing: boolean }))" :value="[]"></state>
     <event
       name="close"
       type="object({ open: boolean, reason: action | timeout | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
@@ -67,7 +67,7 @@
       gap: var(--ui-space-2);
       align-items: start;
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-3);
+      border-radius: var(--ui-radius-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
@@ -77,7 +77,7 @@
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */
     .toast.closing {
-      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
+      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
       pointer-events: none;
     }
 

package/components/ui-tooltip/ui-tooltip.html

@@ -46,7 +46,7 @@
       box-sizing: border-box;
       max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
       border: 1px solid var(--_tooltip-line);
-      border-radius: var(--ui-tooltip-radius, var(--ui-radius-1));
+      border-radius: var(--ui-tooltip-radius, var(--ui-radius-sm));
       background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
       color: var(--ui-tooltip-text, var(--ui-text-primary));
       padding: var(--ui-space-1) var(--ui-space-2);

package/components/ui-top-bar/ui-top-bar.html

@@ -13,11 +13,11 @@
       min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
       display: flex;
       align-items: center;
-      gap: var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));
+      gap: var(--ui-top-bar-gap, var(--ui-space-3));
       padding-block-start: env(safe-area-inset-top);
-      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left));
-      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right));
-      background: var(--ui-top-bar-bg, var(--ui-surface-elevated));
+      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
+      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
+      background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
       border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
     }
 
@@ -30,7 +30,7 @@
     }
 
     .actions {
-      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem));
+      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1));
     }
 
     .title {

package/components/ui-tree/ui-tree.html

@@ -1,6 +1,7 @@
 <link rel="component" href="../ui-tree-item/ui-tree-item.html">
 <template component="ui-tree" controller="./ui-tree.js">
   <defs>
+    <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="label" type="string" default="Tree">label token.</prop>
     <prop name="hoverExpandDelay" type="number" default="700">hoverExpandDelay token.</prop>
     <prop name="maxDepth" type="number" default="0">maxDepth token.</prop>
@@ -15,6 +16,12 @@
   </defs>
   <div role="tree"><slot></slot></div>
   <style>
+    :host-state([density="compact"]) {
+      --ui-tree-item-min-block-size: var(--ui-control-size-sm);
+      --ui-tree-item-font-size: var(--ui-font-size-sm);
+      --ui-tree-item-label-padding-block: 0;
+    }
+
     :host {
       display: block;
       min-inline-size: 0;

package/components/ui-tree-item/ui-tree-item.html

@@ -84,9 +84,9 @@
       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-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
-      font-size: var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));
+      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:
@@ -120,7 +120,8 @@
       box-shadow: 0 0 0 2px var(--ui-focus-ring);
     }
 
-    :host[data-drop-position="inside"] .row {
+    /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+    :host[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));
     }
@@ -209,11 +210,23 @@
       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;
+      padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1)) var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+    }
+
+    /* 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;
-      padding: var(--ui-space-1) var(--ui-space-2);
     }
 
     .actions {
@@ -249,7 +262,7 @@
     .row:hover .drag-handle,
     .drag-handle:hover,
     .drag-handle:focus-visible,
-    :host[data-dragging] .drag-handle {
+    :host[data-dragging] > .row > .drag-handle {
       opacity: 1;
     }
 
@@ -288,12 +301,12 @@
       inset-inline-end: -1px;
     }
 
-    :host[data-drop-position="before"] .row-drop-indicator {
+    :host[data-drop-position="before"] > .row > .row-drop-indicator {
       display: block;
       inset-block-start: -1px;
     }
 
-    :host[data-drop-position="after"] .subtree-drop-indicator {
+    :host[data-drop-position="after"] > .subtree-drop-indicator {
       display: block;
       inset-block-end: -1px;
     }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentDefinition } from "@nextwebwg/declarative-components";
+import type { ComponentDefinition } from "@nextwebwg/html-next";
 export declare const definitions: readonly ComponentDefinition[];
 export declare function register(root?: Document): () => void;
 export declare const stop: undefined | (() => void);