@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/styles/ui-menu.css

@@ -1,12 +1,22 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
-:scope {
+/* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+    :scope[data-ui-menu-state~="density=compact"] {
+      --ui-menu-item-padding-block: var(--ui-space-1);
+      --ui-menu-item-padding-inline: var(--ui-space-2);
+      --ui-menu-item-font-size: var(--ui-font-size-sm);
+      --ui-menu-item-radius: var(--ui-radius-sm);
+      padding: var(--ui-space-1);
+      gap: 0;
+    }
+
+    :scope {
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
       inline-size: max-content;
-      min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2));
-      max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+      max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
       padding: 0;
       border: 0;
       outline: 0;
@@ -24,7 +34,7 @@
       padding: var(--ui-space-1);
       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));
       max-block-size: inherit;
       overflow: auto;
@@ -39,7 +49,7 @@
       inset: auto;
       margin: 0;
       overflow: visible;
-      max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
       transition:
@@ -72,7 +82,9 @@
     }
 }
 @scope ([data-component~="ui-menu"]) to ([data-component]) {
-@starting-style {
+/* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+
+    @starting-style {
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-popover.css

@@ -1,12 +1,12 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
 :scope {
       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;
@@ -24,7 +24,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/styles/ui-radio-group.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-radio.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-radio"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-reel.css

@@ -1,7 +1,7 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-gap: var(--ui-space-4);
       --_reel-item-width: auto;
       display: flex;
       inline-size: 100%;
@@ -15,19 +15,19 @@
     }
 
     :scope[data-ui-reel-state~="gap=xs"] {
-      --_reel-gap: var(--ui-space-2, 0.5rem);
+      --_reel-gap: var(--ui-space-2);
     }
     :scope[data-ui-reel-state~="gap=s"] {
-      --_reel-gap: var(--ui-space-3, 0.75rem);
+      --_reel-gap: var(--ui-space-3);
     }
     :scope[data-ui-reel-state~="gap=m"] {
-      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-gap: var(--ui-space-4);
     }
     :scope[data-ui-reel-state~="gap=l"] {
-      --_reel-gap: var(--ui-space-5, 1.5rem);
+      --_reel-gap: var(--ui-space-5);
     }
     :scope[data-ui-reel-state~="gap=xl"] {
-      --_reel-gap: var(--ui-space-6, 2rem);
+      --_reel-gap: var(--ui-space-6);
     }
     :scope[data-ui-reel-state~="itemWidth=sm"] {
       --_reel-item-width: 12rem;

package/styles/ui-search-result-row.css

@@ -1,22 +1,22 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-search-result-row"]) to ([data-component], [data-slotted]) {
 :scope {
       appearance: none;
       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);
     }
 
     :scope:last-child {
@@ -24,18 +24,18 @@
     }
 
     :scope: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%));
     }
 
     :scope[data-ui-search-result-row-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%))
       );
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, #2563eb);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: -2px;
     }
 

package/styles/ui-search-shell.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-search-shell"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;
@@ -34,7 +34,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)));
@@ -43,6 +43,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));
     }
 
     .status,
@@ -100,13 +107,15 @@
     }
 }
 @scope ([data-component~="ui-search-shell"]) to ([data-component]) {
-:where([data-slotted], [data-slotted] *):is(input[slot="search"]) {
+/* The search region shows where typing goes, whatever the author put in it. */
+
+    :where([data-slotted], [data-slotted] *):is(input[slot="search"]) {
       box-sizing: border-box;
       inline-size: 100%;
       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;
@@ -115,7 +124,7 @@
 
     :where([data-slotted], [data-slotted] *):is(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/styles/ui-select.css

@@ -1,15 +1,15 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-select"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;
       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/styles/ui-separator.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
 hr {
       box-sizing: border-box;

package/styles/ui-sidebar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-sidebar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: relative;
@@ -60,10 +60,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 {
@@ -72,17 +72,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;
     }
 
@@ -105,9 +105,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/styles/ui-stack.css

@@ -1,7 +1,7 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
       display: flex;
       flex-direction: column;
       align-items: stretch;
@@ -12,19 +12,19 @@
     }
 
     :scope[data-ui-stack-state~="gap=xs"] {
-      --_layout-gap: var(--ui-space-2, 0.5rem);
+      --_layout-gap: var(--ui-space-2);
     }
     :scope[data-ui-stack-state~="gap=s"] {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
     }
     :scope[data-ui-stack-state~="gap=m"] {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
     }
     :scope[data-ui-stack-state~="gap=l"] {
-      --_layout-gap: var(--ui-space-5, 1.5rem);
+      --_layout-gap: var(--ui-space-5);
     }
     :scope[data-ui-stack-state~="gap=xl"] {
-      --_layout-gap: var(--ui-space-6, 2rem);
+      --_layout-gap: var(--ui-space-6);
     }
     :scope[data-ui-stack-state~="align=start"] {
       align-items: flex-start;

package/styles/ui-switch.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-switcher.css

@@ -1,7 +1,7 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_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));
@@ -11,19 +11,19 @@
     }
 
     :scope[data-ui-switcher-state~="gap=xs"] {
-      --_switcher-gap: var(--ui-space-2, 0.5rem);
+      --_switcher-gap: var(--ui-space-2);
     }
     :scope[data-ui-switcher-state~="gap=s"] {
-      --_switcher-gap: var(--ui-space-3, 0.75rem);
+      --_switcher-gap: var(--ui-space-3);
     }
     :scope[data-ui-switcher-state~="gap=m"] {
-      --_switcher-gap: var(--ui-space-4, 1rem);
+      --_switcher-gap: var(--ui-space-4);
     }
     :scope[data-ui-switcher-state~="gap=l"] {
-      --_switcher-gap: var(--ui-space-5, 1.5rem);
+      --_switcher-gap: var(--ui-space-5);
     }
     :scope[data-ui-switcher-state~="gap=xl"] {
-      --_switcher-gap: var(--ui-space-6, 2rem);
+      --_switcher-gap: var(--ui-space-6);
     }
     :scope[data-ui-switcher-state~="align=start"] {
       align-items: flex-start;

package/styles/ui-tabs.css

@@ -1,6 +1,19 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
-:scope {
+/* Density resolves into the tab row's own values; the public tokens still override them. */
+    :scope {
+      --_tab-min-block-size: var(--ui-control-size);
+      --_tab-padding-block: var(--ui-space-2);
+      --_tab-padding-inline: var(--ui-space-3);
+    }
+
+    :scope[data-ui-tabs-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);
+    }
+
+    :scope {
       display: grid;
       inline-size: 100%;
       min-inline-size: 0;
@@ -24,16 +37,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),
@@ -61,7 +74,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 {
@@ -103,7 +116,8 @@
     }
 }
 @scope ([data-component~="ui-tabs"]) to ([data-component]) {
-:where([data-slotted], [data-slotted] *):is(*) {
+/* Density resolves into the tab row's own values; the public tokens still override them. */
+    :where([data-slotted], [data-slotted] *):is(*) {
       padding: var(--ui-space-4);
     }
 

package/styles/ui-textarea.css

@@ -1,17 +1,17 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;
       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/styles/ui-toast-region.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @keyframes ui-toast-enter {
       from {
         opacity: 0;
@@ -53,7 +53,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);
@@ -63,7 +63,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/styles/ui-tooltip.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
 :scope {
       position: fixed;
@@ -28,7 +28,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/styles/ui-top-bar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: sticky;
@@ -7,11 +7,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));
     }
 
@@ -24,7 +24,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/styles/ui-tree-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
 :scope {
       --_tree-row-min-height: 32px;
@@ -14,9 +14,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:
@@ -50,7 +50,8 @@
       box-shadow: 0 0 0 2px var(--ui-focus-ring);
     }
 
-    :scope[data-drop-position="inside"] .row {
+    /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+    :scope[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));
     }
@@ -132,13 +133,21 @@
 
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
 
+    /* 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-space-1) var(--ui-space-2);
+      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. */
+
     .actions {
       grid-column: 4;
       grid-row: 1;
@@ -172,7 +181,7 @@
     .row:hover .drag-handle,
     .drag-handle:hover,
     .drag-handle:focus-visible,
-    :scope[data-dragging] .drag-handle {
+    :scope[data-dragging] > .row > .drag-handle {
       opacity: 1;
     }
 
@@ -211,12 +220,12 @@
       inset-inline-end: -1px;
     }
 
-    :scope[data-drop-position="before"] .row-drop-indicator {
+    :scope[data-drop-position="before"] > .row > .row-drop-indicator {
       display: block;
       inset-block-start: -1px;
     }
 
-    :scope[data-drop-position="after"] .subtree-drop-indicator {
+    :scope[data-drop-position="after"] > .subtree-drop-indicator {
       display: block;
       inset-block-end: -1px;
     }
@@ -247,7 +256,9 @@
     }
 }
 @scope ([data-component~="ui-tree-item"]) to ([data-component]) {
-/* Lucide grip-vertical, filling the handle as in Looma 0.2. */
+/* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+
+    /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
 
     /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
 
@@ -260,6 +271,16 @@
       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. */
+
+    /* 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 > :where([data-slotted], [data-slotted] *):is(*) {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+
     @media (prefers-reduced-motion: reduce) {
     }