@threadlabs/looma 0.22.14 → 0.23.1

package/styles/ui-icon-button.css

@@ -147,7 +147,7 @@
       min-block-size: var(--ui-icon-button-size, var(--_size));
       padding: 0;
       margin: 0;
-      border: 1px solid transparent;
+      border: var(--ui-border-width) solid transparent;
       border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background-color: var(--ui-icon-button-surface, transparent);
       color: inherit;

package/styles/ui-input-group.css

@@ -43,7 +43,7 @@
       min-inline-size: 0;
       min-block-size: var(--ui-control-size-md);
       /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
-      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-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       box-shadow: var(--ui-control-inset);
@@ -89,15 +89,19 @@
       box-shadow: var(
         --ui-input-group-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-input-group-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-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+          transparent
+        )
       );
     }
 
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
       :scope:has(input:focus-visible) {
-        outline: 2px solid Highlight;
-        outline-offset: 1px;
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: var(--ui-border-width);
       }
     }
 
@@ -132,11 +136,11 @@
     }
 
     .affix:has([slot="prefix"]) {
-      border-inline-end: 1px solid var(--ui-border-divider);
+      border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     .affix:has([slot="suffix"]) {
-      border-inline-start: 1px solid var(--ui-border-divider);
+      border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     :scope[data-ui-input-group-state~="prefixKind=icon"] {

package/styles/ui-input.css

@@ -65,7 +65,7 @@
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
-      border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
+      border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
         var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));
       background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
@@ -134,7 +134,11 @@
         var(
           --_ui-default-input-invalid-focus-shadow,
           var(--ui-control-inset),
-          0 0 0 3px color-mix(in srgb, var(--ui-input-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-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+            transparent
+          )
         )
       );
     }
@@ -149,8 +153,8 @@
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
       :scope:focus-visible {
-        outline: var(--ui-input-focus-outline, var(--_ui-default-input-focus-outline, 2px solid Highlight));
-        outline-offset: 1px;
+        outline: var(--ui-input-focus-outline, var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight));
+        outline-offset: var(--ui-border-width);
       }
     }
 

package/styles/ui-list-item.css

@@ -40,7 +40,7 @@
       min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
       padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2)));
       padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3)));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-selection-radius);
       color: var(--ui-text-primary);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
@@ -48,7 +48,7 @@
     :scope[data-ui-list-item-state~="variant=card"] {
       padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
       padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
     }
@@ -62,11 +62,12 @@
     }
 
     :scope[data-ui-list-item-state~="current"] {
-      background: var(--ui-surface-hover);
+      background: var(--ui-selection-surface);
+      color: var(--ui-selection-text);
     }
 
     :scope:has(.title a[href]:focus-visible) {
-      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+      box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
     }
 
     .leading,
@@ -82,6 +83,10 @@
       font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
     }
 
+    :scope[data-ui-list-item-state~="current"] .leading {
+      color: var(--ui-selection-text);
+    }
+
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
     .trailing {
       position: relative;
@@ -126,6 +131,17 @@
       display: none;
     }
 
+    @media (forced-colors: active) {
+      :scope:has(a:focus-visible) {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-focus-width));
+      }
+      :scope[data-ui-list-item-state~="current"]:not(:has(a:focus-visible)) {
+        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. */
     :scope[hidden] {
       display: none;
@@ -165,5 +181,8 @@
 
     /* An unused region takes no space. */
 
+    @media (forced-colors: active) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-list.css

@@ -79,7 +79,7 @@
 
     :scope > :where([data-slotted], [data-slotted] *):is(li.card) {
       padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4));
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
       list-style: none;

package/styles/ui-listbox.css

@@ -28,7 +28,7 @@
       min-inline-size: 0;
       margin: 0;
       padding: var(--ui-space-1);
-      border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
+      border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
       border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-listbox-surface, var(--ui-control-surface));
       color: var(--ui-text-primary);
@@ -72,8 +72,8 @@
 
     :scope:focus-visible {
       border-color: var(--ui-control-focus);
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
       box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
     }
 

package/styles/ui-menu-item.css

@@ -35,7 +35,7 @@
       padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
         var(--ui-menu-item-padding-inline, var(--_ui-default-menu-item-padding-inline, var(--ui-space-3)));
       text-align: left;
-      border-radius: var(--ui-menu-item-radius, var(--_ui-default-menu-item-radius, var(--ui-radius-md)));
+      border-radius: var(--ui-menu-item-radius, var(--_ui-default-menu-item-radius, var(--ui-selection-radius)));
       color: var(--ui-text-primary);
       font-size: var(--ui-menu-item-font-size, var(--_ui-default-menu-item-font-size, var(--ui-font-size-md)));
       font-weight: var(--ui-font-medium);
@@ -61,7 +61,7 @@
       box-sizing: border-box;
       inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
       block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
-      border: 1.5px solid var(--ui-control-border);
+      border: var(--ui-border-width) solid var(--ui-control-border);
       border-radius: var(--ui-radius-sm);
       color: var(--ui-surface);
       --_ui-default-icon-size: 0.75rem;
@@ -110,8 +110,8 @@
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: -2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
     :scope[aria-disabled="true"] {

package/styles/ui-menu.css

@@ -80,7 +80,7 @@
       max-inline-size: inherit;
       padding: var(--ui-space-1);
       background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       max-block-size: inherit;
@@ -92,7 +92,7 @@
       block-size: 0;
       margin: var(--ui-space-1) 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-border-divider);
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     :scope:not(:scope[data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"]) {

package/styles/ui-meter.css

@@ -22,7 +22,7 @@
       background: var(--ui-border);
       box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1), inset 0 -1px rgb(255 255 255 / 0.22);
       /* Unseen until forced colours draw it, where the track's own colour is gone. */
-      outline: 1px solid transparent;
+      outline: var(--ui-border-width) solid transparent;
     }
 
     :scope[data-ui-meter-state~="size=sm"] {

package/styles/ui-nav-item.css

@@ -23,7 +23,7 @@
        belongs to. Label and description are one line each and end in an ellipsis, so every item in a
        navigation has the same height and the rail never grows sideways. */
     :scope {
-      --_indicator-width: var(--ui-nav-item-indicator-width, 3px);
+      --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
       --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
       position: relative;
       box-sizing: border-box;
@@ -37,11 +37,11 @@
       padding-block: var(--ui-space-2);
       padding-inline: var(--ui-space-3);
       border: 0;
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-selection-radius);
       background: transparent;
       color: var(--ui-text-secondary);
       font: inherit;
-      font-weight: var(--ui-font-medium);
+      font-weight: var(--ui-font-normal);
       text-align: start;
       text-decoration: none;
       cursor: pointer;
@@ -57,32 +57,43 @@
     /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
        box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: -2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
     :scope[aria-current] {
-      background: var(--ui-nav-item-current-surface, var(--ui-accent-soft));
-      color: var(--ui-accent-subtle-text, var(--ui-text-primary));
-      font-weight: var(--ui-font-semibold);
+      background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
+      color: var(--ui-selection-text);
+    }
+
+    :scope[data-ui-nav-item-state~="variant=line"] {
+      border-radius: 0;
     }
 
-    /* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
+    /* A line treatment has straight corners and a continuous edge. Surface treatment has
+       shared rounded corners and no edge marker; never combine the two geometries.
+       The line is a border, not a fill: forced colors replace backgrounds but keep a
        border, so the current item stays marked in high contrast. Logical edges mirror it in a
        right-to-left page. */
     .indicator {
       position: absolute;
-      inset-block: var(--ui-space-2);
+      inset-block: 0;
       inset-inline-start: 0;
       display: none;
       border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
     }
 
-    :scope[aria-current] .indicator {
+    :scope[data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
       display: block;
     }
 
     @media (forced-colors: active) {
+      /* System colors may erase the selected fill. Trace the complete surface, without
+         creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
+      :scope[data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible) {
+        outline: var(--ui-border-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
       .indicator {
         border-inline-start-color: Highlight;
       }
@@ -125,6 +136,22 @@
       line-height: var(--ui-line-height-tight);
     }
 
+    :scope[data-ui-nav-item-state~="density=compact"] {
+      min-block-size: var(--ui-control-size-sm);
+      padding-block: var(--ui-space-1);
+      padding-inline: var(--ui-space-2);
+    }
+    :scope[data-ui-nav-item-state~="density=compact"] .leading,
+    :scope[data-ui-nav-item-state~="density=compact"] .label {
+      font-size: var(--ui-font-size-sm);
+    }
+
+    @media (pointer: coarse) {
+      :scope[data-ui-nav-item-state~="density=compact"] {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
     /* An unused region takes no space. */
     .leading:empty,
     .description:empty {
@@ -147,11 +174,18 @@
     /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
        box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
 
-    /* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
+    /* A line treatment has straight corners and a continuous edge. Surface treatment has
+       shared rounded corners and no edge marker; never combine the two geometries.
+       The line is a border, not a fill: forced colors replace backgrounds but keep a
        border, so the current item stays marked in high contrast. Logical edges mirror it in a
        right-to-left page. */
 
     @media (forced-colors: active) {
+      /* System colors may erase the selected fill. Trace the complete surface, without
+         creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
+    }
+
+    @media (pointer: coarse) {
     }
 
     /* An unused region takes no space. */

package/styles/ui-popover.css

@@ -58,7 +58,7 @@
       overflow: auto;
       padding: var(--_ui-popover-padding, var(--ui-space-3));
       background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }

package/styles/ui-radio.css

@@ -55,8 +55,8 @@
     }
 
     input:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
     }
 
     :scope[data-ui-radio-state~="disabled"] {

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

@@ -45,8 +45,8 @@
       align-items: flex-start;
       gap: var(--ui-search-result-row-gap, var(--ui-space-3));
       background: var(--ui-search-result-row-surface, transparent);
-      border: 1px solid var(--ui-search-result-row-border, transparent);
-      border-radius: var(--ui-radius-md);
+      border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
+      border-radius: var(--ui-selection-radius);
       color: inherit;
       cursor: pointer;
       text-align: left;
@@ -62,6 +62,17 @@
       font-family: var(--ui-font-family-sans, sans-serif);
     }
 
+    /* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+    :scope[data-ui-search-result-row-state~="density=compact"] .title {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    :scope[data-ui-search-result-row-state~="density=compact"] .meta {
+      font-size: var(--ui-font-size-xs);
+      line-height: var(--ui-line-height);
+    }
+
     :scope:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }
@@ -69,13 +80,14 @@
     :scope[data-ui-search-result-row-state~="selected"] {
       background: var(
         --ui-search-result-row-selected-bg,
-        var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
+        var(--ui-selection-surface)
       );
+      color: var(--ui-selection-text);
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: -2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
     :scope:disabled {
@@ -113,6 +125,13 @@
       display: none;
     }
 
+    @media (forced-colors: active) {
+      :scope[data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled) {
+        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. */
     :scope[hidden] {
       display: none;
@@ -121,6 +140,8 @@
 @scope ([data-component~="ui-search-result-row"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+
     /* An unused region takes no space. */
 
     :where([data-slotted], [data-slotted] *):is([slot="title"]),
@@ -130,5 +151,8 @@
       margin: 0;
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-search-shell.css

@@ -97,7 +97,7 @@
       margin-inline: auto;
       overflow: hidden;
       background: var(--_ui-search-shell-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
       box-shadow: var(--_ui-search-shell-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
     }
@@ -184,7 +184,7 @@
       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: var(--ui-border-width) solid var(--ui-control-border);
       border-radius: var(--ui-field-radius, var(--ui-radius-md));
       background: var(--ui-control-surface);
       color: var(--ui-text-primary);
@@ -194,8 +194,8 @@
 
     :where([data-slotted], [data-slotted] *):is(input[slot="search"]:focus-visible) {
       border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
     }
 
     /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */

package/styles/ui-section.css

@@ -11,19 +11,19 @@
 
     :scope[data-ui-section-state~="variant=card"] {
       padding: var(--ui-space-5);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
     }
 
     :scope[data-ui-section-state~="variant=divided"] {
       padding-block-start: var(--ui-space-6);
-      border-block-start: 1px solid var(--ui-border-divider);
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     :scope[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-      border-inline-start: 4px solid var(--ui-danger);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
       background: var(--ui-danger-soft);
     }
 

package/styles/ui-select.css

@@ -50,7 +50,7 @@
       min-block-size: var(--ui-control-size-md);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
@@ -98,7 +98,11 @@
       box-shadow: var(
         --ui-select-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-select-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-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+          transparent
+        )
       );
     }
 

package/styles/ui-separator.css

@@ -12,13 +12,13 @@
       align-self: stretch;
       margin: 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
+      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
     }
 
     :scope[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
-      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
     }
 }
 @scope ([data-component~="ui-separator"]) to ([data-component]) {

package/styles/ui-sidebar.css

@@ -31,12 +31,12 @@
       max-inline-size: 100%;
       min-block-size: 0;
       background: var(--ui-sidebar-surface, var(--ui-surface-default));
-      border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
+      border-inline-end: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
 
     :scope[data-ui-sidebar-state~="side=end"] {
       border-inline-end: 0;
-      border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
 
     /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
@@ -111,7 +111,7 @@
       inset-inline-start: 50%;
       inline-size: 6px;
       block-size: 22px;
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-round);
       background: var(--ui-surface-elevated);
       opacity: 0;

package/styles/ui-status-message.css

@@ -19,7 +19,7 @@
 
     :scope[data-ui-status-message-state~="layout=panel"] {
       padding: var(--ui-space-6);
-      border: 1px dashed var(--ui-border-strong);
+      border: var(--ui-border-width) dashed var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
     }
 

package/styles/ui-switch.css

@@ -58,7 +58,7 @@
       width: var(--_ui-switch-track-width, 2.5rem);
       height: var(--_ui-switch-track-height, 1.5rem);
       padding: 0;
-      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-radius-round);
       background-color: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
@@ -91,8 +91,8 @@
     }
 
     input:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
     }
 
     :scope[data-ui-switch-state~="disabled"] {

package/styles/ui-table.css

@@ -41,8 +41,8 @@
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: -2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
     :scope[data-ui-table-state~="density=compact"] {
@@ -92,7 +92,7 @@
     :where([data-slotted], [data-slotted] *):is(td) {
       block-size: var(--_row-size);
       padding: var(--_pad-block) var(--_pad-inline);
-      border-block-end: 1px solid var(--ui-border-subtle);
+      border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
       text-align: start;
       vertical-align: middle;
     }