@threadlabs/looma 0.22.13 → 0.23.0

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -154,8 +154,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);
     }
@@ -245,7 +245,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;
@@ -260,7 +260,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 {
@@ -294,7 +294,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/components/ui-editor-toolbar/ui-editor-toolbar.html

@@ -13,7 +13,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
@@ -80,7 +80,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);
@@ -94,7 +94,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));
       }
@@ -103,7 +103,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/components/ui-floating-action-button/ui-floating-action-button.html

@@ -64,8 +64,8 @@
     }
 
     :host: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);
     }
 
     :host:disabled {

package/components/ui-icon/ui-icon.html

@@ -24,9 +24,11 @@
         'circle-x': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'm15 9-6 6' }, { tag: 'path', d: 'm9 9 6 6' }],
         'code-xml': [{ tag: 'path', d: 'm18 16 4-4-4-4' }, { tag: 'path', d: 'm6 8-4 4 4 4' }, { tag: 'path', d: 'm14.5 4-5 16' }],
         'columns': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M9 3v18' }, { tag: 'path', d: 'M15 3v18' }],
+        'compass': [{ tag: 'path', d: 'm16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z' }, { tag: 'circle', cx: '12', cy: '12', r: '10' }],
         'credit-card': [{ tag: 'rect', width: '20', height: '14', x: '2', y: '5', rx: '2' }, { tag: 'line', x1: '2', x2: '22', y1: '10', y2: '10' }],
         'ellipsis': [{ tag: 'circle', cx: '12', cy: '12', r: '1' }, { tag: 'circle', cx: '19', cy: '12', r: '1' }, { tag: 'circle', cx: '5', cy: '12', r: '1' }],
         'eraser': [{ tag: 'path', d: 'M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21' }, { tag: 'path', d: 'm5.082 11.09 8.828 8.828' }],
+        'external-link': [{ tag: 'path', d: 'M15 3h6v6' }, { tag: 'path', d: 'M10 14 21 3' }, { tag: 'path', d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' }],
         'file-text': [{ tag: 'path', d: 'M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' }, { tag: 'path', d: 'M14 2v5a1 1 0 0 0 1 1h5' }, { tag: 'path', d: 'M10 9H8' }, { tag: 'path', d: 'M16 13H8' }, { tag: 'path', d: 'M16 17H8' }],
         'folder': [{ tag: 'path', d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' }],
         'grip-horizontal': [{ tag: 'circle', cx: '12', cy: '9', r: '1' }, { tag: 'circle', cx: '19', cy: '9', r: '1' }, { tag: 'circle', cx: '5', cy: '9', r: '1' }, { tag: 'circle', cx: '12', cy: '15', r: '1' }, { tag: 'circle', cx: '19', cy: '15', r: '1' }, { tag: 'circle', cx: '5', cy: '15', r: '1' }],
@@ -36,6 +38,7 @@
         'heading-3': [{ tag: 'path', d: 'M4 12h8' }, { tag: 'path', d: 'M4 18V6' }, { tag: 'path', d: 'M12 18V6' }, { tag: 'path', d: 'M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2' }, { tag: 'path', d: 'M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2' }],
         'help': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' }, { tag: 'path', d: 'M12 17h.01' }],
         'highlighter': [{ tag: 'path', d: 'm9 11-6 6v3h9l3-3' }, { tag: 'path', d: 'm22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4' }],
+        'history': [{ tag: 'path', d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }, { tag: 'path', d: 'M3 3v5h5' }, { tag: 'path', d: 'M12 7v5l4 2' }],
         'image': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }, { tag: 'circle', cx: '9', cy: '9', r: '2' }, { tag: 'path', d: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21' }],
         'info': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'M12 16v-4' }, { tag: 'path', d: 'M12 8h.01' }],
         'italic': [{ tag: 'line', x1: '19', x2: '10', y1: '4', y2: '4' }, { tag: 'line', x1: '14', x2: '5', y1: '20', y2: '20' }, { tag: 'line', x1: '15', x2: '9', y1: '4', y2: '20' }],
@@ -53,12 +56,14 @@
         'panel-left': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M9 3v18' }],
         'panel-right': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M15 3v18' }],
         'panel-top': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M3 9h18' }],
+        'pencil': [{ tag: 'path', d: 'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' }, { tag: 'path', d: 'm15 5 4 4' }],
         'pilcrow': [{ tag: 'path', d: 'M13 4v16' }, { tag: 'path', d: 'M17 4v16' }, { tag: 'path', d: 'M19 4H9.5a4.5 4.5 0 0 0 0 9H13' }],
         'plus': [{ tag: 'path', d: 'M5 12h14' }, { tag: 'path', d: 'M12 5v14' }],
         'quote': [{ tag: 'path', d: 'M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z' }, { tag: 'path', d: 'M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z' }],
         'receipt': [{ tag: 'path', d: 'M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' }, { tag: 'path', d: 'M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' }, { tag: 'path', d: 'M12 17.5v-11' }],
         'redo': [{ tag: 'path', d: 'm15 14 5-5-5-5' }, { tag: 'path', d: 'M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13' }],
         'rows': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M21 9H3' }, { tag: 'path', d: 'M21 15H3' }],
+        'search': [{ tag: 'path', d: 'm21 21-4.34-4.34' }, { tag: 'circle', cx: '11', cy: '11', r: '8' }],
         'settings': [{ tag: 'path', d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' }, { tag: 'circle', cx: '12', cy: '12', r: '3' }],
         'split': [{ tag: 'path', d: 'M16 3h5v5' }, { tag: 'path', d: 'M8 3H3v5' }, { tag: 'path', d: 'M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3' }, { tag: 'path', d: 'm15 9 6-6' }],
         'strikethrough': [{ tag: 'path', d: 'M16 4H9a3 3 0 0 0-2.83 4' }, { tag: 'path', d: 'M14 12a4 4 0 0 1 0 8H6' }, { tag: 'line', x1: '4', x2: '20', y1: '12', y2: '12' }],
@@ -69,6 +74,7 @@
         'truck': [{ tag: 'path', d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' }, { tag: 'path', d: 'M15 18H9' }, { tag: 'path', d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' }, { tag: 'circle', cx: '17', cy: '18', r: '2' }, { tag: 'circle', cx: '7', cy: '18', r: '2' }],
         'underline': [{ tag: 'path', d: 'M6 4v6a6 6 0 0 0 12 0V4' }, { tag: 'line', x1: '4', x2: '20', y1: '20', y2: '20' }],
         'undo': [{ tag: 'path', d: 'M9 14 4 9l5-5' }, { tag: 'path', d: 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11' }],
+        'unlink': [{ tag: 'path', d: 'm18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71' }, { tag: 'path', d: 'm5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71' }, { tag: 'line', x1: '8', x2: '8', y1: '2', y2: '5' }, { tag: 'line', x1: '2', x2: '5', y1: '8', y2: '8' }, { tag: 'line', x1: '16', x2: '16', y1: '19', y2: '22' }, { tag: 'line', x1: '19', x2: '22', y1: '16', y2: '16' }],
         'user-round': [{ tag: 'circle', cx: '12', cy: '8', r: '5' }, { tag: 'path', d: 'M20 21a8 8 0 0 0-16 0' }],
         'users': [{ tag: 'path', d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }, { tag: 'path', d: 'M16 3.128a4 4 0 0 1 0 7.744' }, { tag: 'path', d: 'M22 21v-2a4 4 0 0 0-3-3.87' }, { tag: 'circle', cx: '9', cy: '7', r: '4' }],
         'x': [{ tag: 'path', d: 'M18 6 6 18' }, { tag: 'path', d: 'm6 6 12 12' }],

package/components/ui-icon-button/ui-icon-button.html

@@ -177,7 +177,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/components/ui-input/ui-input.html

@@ -102,7 +102,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))));
@@ -171,7 +172,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
+          )
         )
       );
     }
@@ -186,8 +191,8 @@
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
       :host: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/components/ui-input-group/ui-input-group.html

@@ -1,5 +1,7 @@
 <template component="ui-input-group" controller="./ui-input-group.js">
   <defs>
+    <prop name="prefixKind" type="keyword" values="text, icon" default="text"
+    >Text affixes have their own framing. An icon prefix shares the field surface and uses one compact icon-to-value gap.</prop>
     <prop name="disabled" type="boolean" default="false">Fades the group's framing to match a disabled input inside it. Disable the input itself too.</prop>
   </defs>
   <div>
@@ -52,7 +54,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);
@@ -98,15 +100,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) {
       :host:has(input:focus-visible) {
-        outline: 2px solid Highlight;
-        outline-offset: 1px;
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: var(--ui-border-width);
       }
     }
 
@@ -141,11 +147,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);
+    }
+
+    :host-state([prefixKind="icon"]) {
+      --_ui-default-input-padding-inline-start: var(--ui-space-2);
+    }
+    :host-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/components/ui-list/ui-list.html

@@ -65,7 +65,7 @@
 
     :host > :slotted(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/components/ui-list-item/ui-list-item.html

@@ -56,7 +56,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);
     }
@@ -64,7 +64,7 @@
     :host-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);
     }
@@ -78,11 +78,12 @@
     }
 
     :host-state([current]) {
-      background: var(--ui-surface-hover);
+      background: var(--ui-selection-surface);
+      color: var(--ui-selection-text);
     }
 
     :host: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,
@@ -98,6 +99,10 @@
       font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
     }
 
+    :host-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;
@@ -159,6 +164,17 @@
       display: none;
     }
 
+    @media (forced-colors: active) {
+      :host:has(a:focus-visible) {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-focus-width));
+      }
+      :host-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. */
     :host[hidden] {
       display: none;

package/components/ui-listbox/ui-listbox.html

@@ -105,7 +105,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);
@@ -149,8 +149,8 @@
 
     :host: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/components/ui-menu/ui-menu.html

@@ -111,7 +111,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;
@@ -123,7 +123,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);
     }
 
     :host:not(:host-state([internalOpen])):not(:host-state([inline])) {

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

@@ -81,7 +81,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);
@@ -107,7 +107,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;
@@ -159,8 +159,8 @@
     }
 
     :host: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));
     }
 
     :host[aria-disabled="true"] {

package/components/ui-meter/ui-meter.html

@@ -59,7 +59,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;
     }
 
     :host-state([size="sm"]) {

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

@@ -1,9 +1,14 @@
 <template component="ui-nav-item">
   <defs>
+    <prop name="variant" type="keyword" values="surface, line" default="surface"
+    >surface marks the current row with a quiet filled surface and shared corners. line uses square corners and a continuous logical start edge. Both retain the
+      resting label weight and expose aria-current.</prop>
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
+    >Compact uses smaller type and row spacing to sit alongside a compact tree; comfortable keeps the regular navigation row.</prop>
     <prop name="current" type="keyword" values="true, false, page, step, location" default="false"
-    >Marks the item as where you are: it takes the selected surface, a stronger label, and a bar on its start edge, and states aria-current, which assistive
-      technology announces. "true" means the current page (aria-current="page"); "step" marks the current step of a process, and "location" the current place in
-      a set, such as a section of a record. Set it on one item at a time.</prop>
+    >Marks the item as where you are: it takes the selected surface, the selected text, and the chosen surface or line treatment, and states aria-current, which
+      assistive technology announces. "true" means the current page (aria-current="page"); "step" marks the current step of a process, and "location" the
+      current place in a set, such as a section of a record. Set it on one item at a time.</prop>
     <prop name="href" type="string"
     >The link's destination. Pair it with as="a" so the item renders as a real link: a router, a modified click, and "open in new tab" all work. Without it the
       item is a button, for switching views inside the app.</prop>
@@ -63,7 +68,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. */
     :host {
-      --_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;
@@ -77,11 +82,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;
@@ -97,32 +102,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. */
     :host: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));
     }
 
     :host[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);
+    }
+
+    :host-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);
     }
 
-    :host[aria-current] .indicator {
+    :host-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. */
+      :host-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;
       }
@@ -165,6 +181,22 @@
       line-height: var(--ui-line-height-tight);
     }
 
+    :host-state([density="compact"]) {
+      min-block-size: var(--ui-control-size-sm);
+      padding-block: var(--ui-space-1);
+      padding-inline: var(--ui-space-2);
+    }
+    :host-state([density="compact"]) .leading,
+    :host-state([density="compact"]) .label {
+      font-size: var(--ui-font-size-sm);
+    }
+
+    @media (pointer: coarse) {
+      :host-state([density="compact"]) {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
     /* An unused region takes no space. */
     .leading:empty,
     .description:empty {

package/components/ui-popover/ui-popover.html

@@ -1,5 +1,7 @@
 <template component="ui-popover" controller="./ui-popover.js">
   <defs>
+    <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
+    >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>
     <prop name="open" type="boolean" default="false">Whether the popover is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the popover.</prop>
     <prop
@@ -86,7 +88,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))));
     }
@@ -120,6 +122,19 @@
       }
     }
 
+    :host-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));
+    }
+    :host-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));
+    }
+    :host-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));
+    }
+
     :host[hidden] {
       display: none;
     }

package/components/ui-radio/ui-radio.html

@@ -86,8 +86,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);
     }
 
     :host-state([disabled]) {

package/components/ui-scroll-area/ui-scroll-area.html

@@ -1,5 +1,7 @@
 <template component="ui-scroll-area" controller="./ui-scroll-area.js">
   <defs>
+    <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
+    >Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is 30rem.</prop>
     <prop name="orientation" type="keyword" values="vertical, horizontal" default="vertical"
     >The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
       overflow.</prop>
@@ -43,6 +45,16 @@
       --_ui-scroll-fade-inline: to left;
     }
 
+    :host-state([size="sm"]) {
+      max-block-size: 9.375rem;
+    }
+    :host-state([size="md"]) {
+      max-block-size: 20rem;
+    }
+    :host-state([size="lg"]) {
+      max-block-size: 30rem;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;