@threadlabs/looma 0.22.13 → 0.23.0

package/styles/ui-editor-slash-menu.css

@@ -6,7 +6,7 @@
 
     :scope {
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
       box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
       overflow: hidden;
@@ -26,7 +26,7 @@
       align-items: center;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-bottom: 1px solid var(--ui-border-divider);
+      border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
       font-weight: var(--ui-font-semibold);
@@ -104,7 +104,7 @@
       width: 32px;
       height: 32px;
       background: var(--ui-surface-hover);
-      border: 1px solid var(--ui-border);
+      border: var(--ui-border-width) solid var(--ui-border);
       border-radius: var(--ui-radius-md);
       font-size: var(--ui-font-size-sm);
       font-weight: var(--ui-font-bold);
@@ -151,7 +151,7 @@
 
     .footer {
       padding: var(--ui-space-2) var(--ui-space-3);
-      border-top: 1px solid var(--ui-border-divider);
+      border-top: var(--ui-border-width) solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
     }
@@ -163,8 +163,8 @@
       font-family: var(--ui-font-family-mono, ui-monospace, monospace);
       font-size: var(--ui-font-size-2xs);
       background: var(--ui-surface-hover);
-      border: 1px solid var(--ui-border);
-      border-radius: 3px;
+      border: var(--ui-border-width) solid var(--ui-border);
+      border-radius: var(--ui-radius-sm);
       padding: 0 3px;
       color: var(--ui-text-secondary);
     }

package/styles/ui-editor-table-context-menu.css

@@ -8,7 +8,7 @@
       max-height: min(28rem, calc(100vh - 24px));
       padding: var(--ui-space-2);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -75,7 +75,7 @@
       width: 1rem;
       height: 1rem;
       border-radius: var(--ui-radius-round);
-      border: 1px solid var(--ui-border);
+      border: var(--ui-border-width) solid var(--ui-border);
       background: var(--_swatch, #fff);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
       flex-shrink: 0;

package/styles/ui-editor-table-overlay.css

@@ -46,7 +46,7 @@
       width: 24px;
       height: 24px;
       padding: 0;
-      border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-affordance-near-color, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
       color: var(--ui-affordance-near-color, var(--ui-text-secondary));
@@ -89,8 +89,8 @@
     .handle:focus-visible,
     .selector:focus-visible,
     .cell-menu:focus-visible {
-      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);
     }
 
     .control.row {
@@ -123,13 +123,13 @@
     }
 
     .control.row .line {
-      inset: -1px 0 auto;
-      height: 2px;
+      inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
+      height: var(--ui-accent-line-width);
     }
 
     .control.col .line {
-      inset: 0 auto 0 -1px;
-      width: 2px;
+      inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
+      width: var(--ui-accent-line-width);
     }
 
     .control.active .line {
@@ -201,7 +201,7 @@
       align-items: center;
       justify-content: center;
       padding: 0;
-      border: 1px solid transparent;
+      border: var(--ui-border-width) solid transparent;
       background: transparent;
       color: var(--ui-text-secondary);
       box-shadow: none;
@@ -318,19 +318,19 @@
       position: absolute;
       z-index: 3;
       background: var(--ui-accent-solid);
-      box-shadow: 0 0 0 2px var(--ui-surface);
+      box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
       pointer-events: none;
     }
 
     .drop-indicator.row {
       left: 0;
       width: 100%;
-      height: 2px;
+      height: var(--ui-accent-line-width);
     }
 
     .drop-indicator.column {
       top: 0;
-      width: 2px;
+      width: var(--ui-accent-line-width);
       height: 100%;
     }
 

package/styles/ui-editor-table-toolbar.css

@@ -35,8 +35,8 @@
       gap: var(--ui-space-1);
       padding: var(--ui-space-1);
       background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-      border: 1px solid var(--ui-border-strong);
-      border-radius: calc(var(--ui-radius-md) + 2px);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
+      border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       backdrop-filter: blur(10px);
     }
@@ -126,7 +126,7 @@
       max-width: min(17rem, calc(100vw - 24px));
       padding: var(--ui-space-1);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -141,7 +141,7 @@
     .menu-section + .menu-section {
       margin-top: var(--ui-space-1);
       padding-top: var(--ui-space-1);
-      border-top: 1px solid var(--ui-border-divider);
+      border-top: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     .menu-heading {
@@ -175,7 +175,7 @@
       width: 14px;
       height: 14px;
       flex: 0 0 14px;
-      border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
+      border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
       border-radius: var(--ui-radius-round);
       background: var(--_swatch);
     }

package/styles/ui-editor-toolbar.css

@@ -9,7 +9,7 @@
       padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
+      border-bottom: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
     }
 
     /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
@@ -64,7 +64,7 @@
       min-height: auto;
       padding: var(--ui-editor-toolbar-floating-padding, 4px);
       background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
-      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
       box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       backdrop-filter: blur(10px);
@@ -78,7 +78,7 @@
         left: 0;
         right: 0;
         min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
+        border-top: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
         border-bottom: none;
         box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
       }
@@ -87,7 +87,7 @@
         position: relative;
         inset: auto;
         min-height: auto;
-        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+        border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
         border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
         box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       }

package/styles/ui-floating-action-button.css

@@ -56,8 +56,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: var(--ui-focus-width);
     }
 
     :scope:disabled {

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,20 @@
     }
 
     .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"] {
+      --_ui-default-input-padding-inline-start: var(--ui-space-2);
+    }
+    :scope[data-ui-input-group-state~="prefixKind=icon"] .affix:first-child {
+      padding-inline-end: 0;
+      border-inline-end: 0;
+      background: transparent;
     }
 
     /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a

package/styles/ui-input.css

@@ -64,7 +64,8 @@
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
-      border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
+      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, 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))));
@@ -133,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
+          )
         )
       );
     }
@@ -148,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))));
     }
@@ -92,6 +92,19 @@
       }
     }
 
+    :scope[data-ui-popover-state~="size=sm"] {
+      inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope[data-ui-popover-state~="size=md"] {
+      inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope[data-ui-popover-state~="size=lg"] {
+      inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+
     :scope[hidden] {
       display: none;
     }

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-scroll-area.css

@@ -37,6 +37,16 @@
       --_ui-scroll-fade-inline: to left;
     }
 
+    :scope[data-ui-scroll-area-state~="size=sm"] {
+      max-block-size: 9.375rem;
+    }
+    :scope[data-ui-scroll-area-state~="size=md"] {
+      max-block-size: 20rem;
+    }
+    :scope[data-ui-scroll-area-state~="size=lg"] {
+      max-block-size: 30rem;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;