@threadlabs/looma 0.5.2 → 0.6.0-rc.1

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)));
@@ -79,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;
@@ -88,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-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,5 +1,6 @@
 <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>
@@ -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

@@ -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));
     }
@@ -218,7 +219,14 @@
       display: flex;
       align-items: center;
       min-inline-size: 0;
-      padding: var(--ui-tree-label-padding-block, var(--ui-space-1)) var(--ui-tree-label-padding-inline, 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. */
+    .label > :slotted(*) {
+      flex: 1 1 auto;
+      min-inline-size: 0;
     }
 
     .actions {
@@ -254,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;
     }
 
@@ -293,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;
     }