@threadlabs/looma 0.22.14 → 0.23.0

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

@@ -58,7 +58,7 @@
       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: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
@@ -102,7 +102,11 @@
       box-shadow: var(
         --ui-textarea-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+          transparent
+        )
       );
     }
 

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

@@ -52,8 +52,8 @@
       inline-size: 100%;
       margin: 0;
       padding: var(--ui-space-3) var(--ui-space-4);
-      border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
-      border-inline-start: 3px solid var(--ui-toast-accent, var(--_ui-toast-accent));
+      border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-toast-accent, var(--_ui-toast-accent));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);

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

@@ -140,7 +140,7 @@
       grid-template-columns: 1fr auto;
       gap: var(--ui-space-2);
       align-items: start;
-      border: 1px solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
       background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
@@ -150,16 +150,16 @@
     }
 
     .toast[data-tone="info"] {
-      border-inline-start: 3px solid var(--ui-info-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
     }
     .toast[data-tone="success"] {
-      border-inline-start: 3px solid var(--ui-success-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
     }
     .toast[data-tone="warning"] {
-      border-inline-start: 3px solid var(--ui-warning-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
     }
     .toast[data-tone="danger"] {
-      border-inline-start: 3px solid var(--ui-danger-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
     }
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */

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

@@ -117,7 +117,7 @@
       position: relative;
       box-sizing: border-box;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
-      border: 1px solid var(--_tooltip-line);
+      border: var(--ui-border-width) solid var(--_tooltip-line);
       border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
@@ -165,27 +165,27 @@
       position: absolute;
       z-index: 1;
       inset-inline-start: var(--ui-space-3);
-      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       box-sizing: border-box;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
-      border-inline-end-width: 1px;
-      border-block-end-width: 1px;
-      border-end-end-radius: 1px;
+      border-inline-end-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
+      border-end-end-radius: var(--ui-border-width);
       transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
     }
 
     :host[data-ui-actual-placement="bottom"] .surface::after {
-      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-block-end: auto;
       border-inline-end-width: 0;
       border-block-end-width: 0;
-      border-inline-start-width: 1px;
-      border-block-start-width: 1px;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
       border-end-end-radius: 0;
-      border-start-start-radius: 1px;
+      border-start-start-radius: var(--ui-border-width);
     }
 
     :host[data-ui-actual-align="center"] .surface::after {
@@ -206,16 +206,16 @@
 
     :host[data-ui-actual-placement="left"] .surface::after {
       inset-inline-start: auto;
-      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
-      border-inline-end-width: 1px;
-      border-block-start-width: 1px;
+      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+      border-inline-end-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
     }
 
     :host[data-ui-actual-placement="right"] .surface::after {
-      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-inline-end: auto;
-      border-inline-start-width: 1px;
-      border-block-end-width: 1px;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
     }
 
     :host[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,

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

@@ -51,7 +51,7 @@
       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-divider));
+      border-block-end: var(--ui-border-width) solid var(--ui-top-bar-border, var(--ui-border-divider));
     }
 
     .leading,

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

@@ -157,7 +157,7 @@
       min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
       font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-selection-radius);
       color: var(--ui-text-secondary);
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -168,12 +168,20 @@
     }
 
     .row:hover,
-    :host-state([selected]) .row,
     .row:focus-within {
       color: var(--ui-text-primary);
       background: var(--ui-surface-muted);
     }
 
+    /* Selection is the same surface recipe as destination and choice rows. */
+    :host-state([selected]) > .row {
+      color: var(--ui-selection-text);
+      background: var(--ui-selection-surface);
+    }
+    :host-state([selected]):not([aria-disabled="true"]) > .row > .leading {
+      color: var(--ui-selection-text);
+    }
+
     :host-state([disabled]) .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
@@ -188,13 +196,13 @@
     }
 
     :host:focus-visible .row {
-      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+      box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
     }
 
     /* 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));
+      box-shadow: inset 0 0 0 var(--ui-accent-line-width) var(--_ui-tree-drop-color, var(--ui-accent-solid));
     }
 
     .disclosure,
@@ -517,7 +525,7 @@
       z-index: 3;
       inset-inline: 1px;
       display: none;
-      block-size: 2px;
+      block-size: var(--ui-accent-line-width);
       border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
       pointer-events: none;
@@ -530,7 +538,7 @@
       inset-block-start: 50%;
       inline-size: 7px;
       block-size: 7px;
-      border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
+      border: var(--ui-accent-line-width) solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
       border-radius: var(--ui-radius-round);
       background: var(--ui-surface-elevated);
       transform: translateY(-50%);
@@ -545,12 +553,12 @@
 
     :host[data-drop-position="before"] > .row > .row-drop-indicator {
       display: block;
-      inset-block-start: -1px;
+      inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     :host[data-drop-position="after"] > .subtree-drop-indicator {
       display: block;
-      inset-block-end: -1px;
+      inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     .children[hidden] {
@@ -612,6 +620,17 @@
       }
     }
 
+    @media (forced-colors: active) {
+      :host:focus-visible > .row {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-focus-width));
+      }
+      :host-state([selected]):not(:focus-visible):not([aria-disabled="true"]) > .row {
+        outline: var(--ui-border-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;