@threadlabs/looma 0.26.10 → 0.26.12

package/components/ui-callout/ui-callout.html

@@ -95,6 +95,16 @@
       --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
       --_callout-surface: var(--ui-info-soft);
+      --_ui-selection-context-surface: light-dark(
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-border: light-dark(
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-text: var(--ui-text-primary);
+
       --_callout-border: var(--ui-info-solid);
       --_callout-icon: var(--ui-info-solid);
 
@@ -138,6 +148,9 @@
     }
 
     :host([tone="neutral"]), :host([tone="note"]) {
+      --_ui-selection-context-surface: initial;
+      --_ui-selection-context-border: initial;
+      --_ui-selection-context-text: initial;
       --_callout-surface: var(--ui-surface-muted);
       --_callout-border: var(--ui-border-strong);
       --_callout-icon: var(--ui-text-secondary);

package/components/ui-card/ui-card.html

@@ -8,8 +8,8 @@
     <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
     >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
-    >accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Tone never changes child
-      controls.</prop>
+    >accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the
+      surface hue; action controls retain their own intent.</prop>
     <prop name="as" type="keyword" values="div, section, article, aside" default="div"
     >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
   </defs>
@@ -23,6 +23,10 @@
     /* A surface that groups content. Its children stack with even space between them, so a card
        needs no layout of its own. */
     :host {
+      --_ui-card-surface: var(--ui-surface-raised);
+      --_ui-selection-context-surface: initial;
+      --_ui-selection-context-border: initial;
+      --_ui-selection-context-text: initial;
       display: flex;
       flex-direction: column;
       gap: var(--ui-space-4);
@@ -31,7 +35,7 @@
       padding: var(--ui-space-5);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
-      background: var(--ui-surface-raised);
+      background: var(--_ui-card-surface);
       color: var(--ui-text-primary);
     }
 
@@ -50,7 +54,7 @@
 
     :host([variant="subtle"]) {
       border-color: transparent;
-      background: var(--ui-surface-muted);
+      --_ui-card-surface: var(--ui-surface-muted);
     }
 
     :host([variant="elevated"]) {
@@ -60,22 +64,22 @@
 
     :host([tone="accent"]) {
       border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
-      background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
+      --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
     }
 
     :host([tone="info"]) {
       border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
-      background: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
+      --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
     }
 
     :host([tone="success"]) {
       border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
-      background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
+      --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
     }
 
     :host([tone="warning"]) {
       border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
-      background: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
+      --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
     }
 
     :host([variant="subtle"]:is([tone="accent"], [tone="info"], [tone="success"], [tone="warning"])) {
@@ -85,7 +89,20 @@
     :host([tone="danger"]) {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-      background: var(--ui-danger-soft);
+      --_ui-card-surface: var(--ui-danger-soft);
+    }
+
+    /* A colored panel shades rows in its own hue, without changing button intent. */
+    :host([tone="accent"]), :host([tone="info"]), :host([tone="success"]), :host([tone="warning"]), :host([tone="danger"]) {
+      --_ui-selection-context-surface: light-dark(
+        oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-border: light-dark(
+        oklch(from var(--_ui-card-surface) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--_ui-card-surface) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-text: var(--ui-text-primary);
     }
 
     :host([size="sm"]) {

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

@@ -83,8 +83,8 @@
     :host:where(:has(.title a[href])):hover,
     :host([highlighted]),
     :host([current]) {
-      background: var(--ui-selection-surface);
-      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
+      background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
     }
 
     :host([variant="card"]):where(:has(.title a[href])):hover {
@@ -92,7 +92,7 @@
     }
 
     :host([current]) {
-      color: var(--ui-selection-text);
+      color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     /* Framed cards already have their own edge; the stronger focus ring stays separate. */
@@ -118,7 +118,7 @@
     }
 
     :host([current]) .leading {
-      color: var(--ui-selection-text);
+      color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     /* An explicitly independent leading control sits above the stretched row link. */

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

@@ -97,7 +97,7 @@
     }
 
     :host:hover:not([aria-current]) {
-      background: var(--ui-nav-hover-surface);
+      background: var(--_ui-selection-context-surface, var(--ui-nav-hover-surface));
       color: var(--ui-text-primary);
     }
 
@@ -109,13 +109,13 @@
     }
 
     :host[aria-current] {
-      background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
-      color: var(--ui-selection-text);
+      background: var(--ui-nav-item-current-surface, var(--_ui-selection-context-surface, var(--ui-selection-surface)));
+      color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     /* A complete inset edge separates pale fills without changing rail geometry. */
     :host([variant="surface"]):is(:hover, [aria-current]) {
-      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
     }
 
     :host([variant="line"]) {

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

@@ -92,15 +92,15 @@
     }
 
     :host:hover:enabled {
-      background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
+      background: var(--ui-search-result-row-hover-surface, var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%)));
     }
 
     :host([selected]) {
       background: var(
         --ui-search-result-row-selected-bg,
-        var(--ui-selection-surface)
+        var(--_ui-selection-context-surface, var(--ui-selection-surface))
       );
-      color: var(--ui-selection-text);
+      color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     :host:focus-visible {

package/components/ui-section/ui-section.html

@@ -29,6 +29,9 @@
     }
 
     :host([variant="card"]) {
+      --_ui-selection-context-surface: initial;
+      --_ui-selection-context-border: initial;
+      --_ui-selection-context-text: initial;
       padding: var(--ui-space-5);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
@@ -41,6 +44,15 @@
     }
 
     :host([variant="card"][tone="danger"]) {
+      --_ui-selection-context-surface: light-dark(
+        oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-border: light-dark(
+        oklch(from var(--ui-danger-soft) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--ui-danger-soft) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-text: var(--ui-text-primary);
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
       background: var(--ui-danger-soft);

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

@@ -178,18 +178,18 @@
     .row:hover,
     .row:focus-within {
       color: var(--ui-text-primary);
-      background: var(--ui-surface-muted);
-      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
+      background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
     }
 
     /* Selection is the same surface recipe as destination and choice rows. */
     :host([selected]) > .row {
-      color: var(--ui-selection-text);
-      background: var(--ui-selection-surface);
-      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
+      color: var(--_ui-selection-context-text, var(--ui-selection-text));
+      background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
     }
     :host([selected]):not([aria-disabled="true"]) > .row > .leading {
-      color: var(--ui-selection-text);
+      color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     :host([disabled]) .row {