@threadlabs/looma 0.22.13 → 0.23.0

package/components/shared/icons.js

@@ -17,9 +17,11 @@ export const icons = {
   "circle-x": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],
   "code-xml": [["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],
   "columns": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "compass": [["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"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
   "credit-card": [["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"2"}],["line",{"x1":"2","x2":"22","y1":"10","y2":"10"}]],
   "ellipsis": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],
   "eraser": [["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"}],["path",{"d":"m5.082 11.09 8.828 8.828"}]],
+  "external-link": [["path",{"d":"M15 3h6v6"}],["path",{"d":"M10 14 21 3"}],["path",{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]],
   "file-text": [["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"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
   "folder": [["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": [["circle",{"cx":"12","cy":"9","r":"1"}],["circle",{"cx":"19","cy":"9","r":"1"}],["circle",{"cx":"5","cy":"9","r":"1"}],["circle",{"cx":"12","cy":"15","r":"1"}],["circle",{"cx":"19","cy":"15","r":"1"}],["circle",{"cx":"5","cy":"15","r":"1"}]],
@@ -29,6 +31,7 @@ export const icons = {
   "heading-3": [["path",{"d":"M4 12h8"}],["path",{"d":"M4 18V6"}],["path",{"d":"M12 18V6"}],["path",{"d":"M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2"}],["path",{"d":"M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2"}]],
   "help": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
   "highlighter": [["path",{"d":"m9 11-6 6v3h9l3-3"}],["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": [["path",{"d":"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}],["path",{"d":"M3 3v5h5"}],["path",{"d":"M12 7v5l4 2"}]],
   "image": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
   "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],
   "italic": [["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],
@@ -46,12 +49,14 @@ export const icons = {
   "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
   "panel-right": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M15 3v18"}]],
   "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "pencil": [["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"}],["path",{"d":"m15 5 4 4"}]],
   "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
   "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],
   "quote": [["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"}],["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": [["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"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 17.5v-11"}]],
   "redo": [["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],
   "rows": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "search": [["path",{"d":"m21 21-4.34-4.34"}],["circle",{"cx":"11","cy":"11","r":"8"}]],
   "settings": [["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"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
   "split": [["path",{"d":"M16 3h5v5"}],["path",{"d":"M8 3H3v5"}],["path",{"d":"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"}],["path",{"d":"m15 9 6-6"}]],
   "strikethrough": [["path",{"d":"M16 4H9a3 3 0 0 0-2.83 4"}],["path",{"d":"M14 12a4 4 0 0 1 0 8H6"}],["line",{"x1":"4","x2":"20","y1":"12","y2":"12"}]],
@@ -62,6 +67,7 @@ export const icons = {
   "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["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"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],
   "underline": [["path",{"d":"M6 4v6a6 6 0 0 0 12 0V4"}],["line",{"x1":"4","x2":"20","y1":"20","y2":"20"}]],
   "undo": [["path",{"d":"M9 14 4 9l5-5"}],["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": [["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"}],["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"}],["line",{"x1":"8","x2":"8","y1":"2","y2":"5"}],["line",{"x1":"2","x2":"5","y1":"8","y2":"8"}],["line",{"x1":"16","x2":"16","y1":"19","y2":"22"}],["line",{"x1":"19","x2":"22","y1":"16","y2":"16"}]],
   "user-round": [["circle",{"cx":"12","cy":"8","r":"5"}],["path",{"d":"M20 21a8 8 0 0 0-16 0"}]],
   "users": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
   "x": [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],

package/components/ui-avatar/ui-avatar.html

@@ -65,7 +65,7 @@
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-      border: 1px solid var(--ui-avatar-border, color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default)));
+      border: var(--ui-border-width) solid var(--ui-avatar-border, color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default)));
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
       font: inherit;
@@ -103,8 +103,8 @@
     /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
     :host-state([active]) {
-      outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
-      outline-offset: 1px;
+      outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-border-width);
     }
 
     .image,

package/components/ui-avatar-group/ui-avatar-group.html

@@ -71,7 +71,7 @@
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-radius-round);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow:

package/components/ui-badge/ui-badge.html

@@ -80,7 +80,7 @@
       justify-content: center;
       max-width: 100%;
       padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
-      border: 1px solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
+      border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       border-radius: var(--ui-radius-round);
       background: var(--_badge-outline-surface);
       color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));

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

@@ -169,7 +169,7 @@
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
-      border-width: 1px;
+      border-width: var(--ui-border-width);
       border-color: var(--ui-button-border, var(--_tone));
       border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
@@ -432,8 +432,8 @@
     :host-state([variant="link"]):focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
-      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);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

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

@@ -106,8 +106,9 @@
       padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
       padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
       padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
-      border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-      border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
+      border: var(--ui-callout-border-width, var(--ui-border-width)) solid
+        color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+      border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid var(--ui-callout-border, var(--_callout-border));
       border-radius: var(--ui-radius-md);
       background: var(--ui-callout-surface, var(--_callout-surface));
       color: var(--ui-callout-text, var(--ui-text-primary));

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

@@ -1,10 +1,12 @@
 <template component="ui-card">
   <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="variant" type="keyword" values="outlined, subtle, elevated" default="outlined"
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
       elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
-    <prop name="padding" type="keyword" values="sm, md, lg" default="md"
-    >The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
+    <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
+    >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, danger" default="neutral"
     >danger adds a soft danger surface and a strong leading edge for consequential content.</prop>
     <prop name="as" type="keyword" values="div, section, article, aside" default="div"
@@ -26,12 +28,16 @@
       box-sizing: border-box;
       min-inline-size: 0;
       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);
       color: var(--ui-text-primary);
     }
 
+    :host-state([padding="xs"]) {
+      gap: var(--ui-space-1);
+      padding: var(--ui-space-2);
+    }
     :host-state([padding="sm"]) {
       gap: var(--ui-space-2);
       padding: var(--ui-space-3);
@@ -53,10 +59,23 @@
 
     :host-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);
     }
 
+    :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));
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-checkbox/ui-checkbox.html

@@ -102,7 +102,7 @@
       inline-size: var(--_ui-checkbox-size, 1.125rem);
       block-size: var(--_ui-checkbox-size, 1.125rem);
       margin: 0.125em 0 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-sm);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
@@ -179,8 +179,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([invalid]) input {

package/components/ui-combobox/ui-combobox.html

@@ -628,7 +628,7 @@
       flex: 1 1 auto;
       display: flex;
       min-inline-size: 0;
-      border: 1px solid var(--ui-control-border, var(--ui-border-default));
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
       border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
@@ -743,7 +743,7 @@
     button:focus-visible {
       outline: none;
       background: var(--ui-surface-muted);
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
     }
     input:disabled, button:disabled {
       color: var(--ui-disabled-text);
@@ -764,7 +764,7 @@
       overflow: auto;
       margin: 0;
       padding: var(--ui-space-1);
-      border: 1px solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
@@ -779,7 +779,7 @@
     }
     .primary {
       display: block;
-      color: var(--_ui-combobox-option-text, var(--ui-text-primary));
+      color: var(--_ui-combobox-option-text, inherit);
       font-weight: 500;
     }
     /* A row with a tag or a description: the label and its tag on one line, the description under them. */
@@ -868,7 +868,7 @@
       padding: var(--ui-space-0-5);
     }
     :host-state([multiple]):host-state([size="sm"]) input {
-      min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
       padding: 0 var(--ui-space-1);
     }
     /* A large multiple field starts at the large control height, as sm starts at the small one. */
@@ -876,7 +876,7 @@
       min-block-size: 0;
     }
     :host-state([multiple]):host-state([size="lg"]) input {
-      min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
+      min-block-size: calc(var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1));
     }
     .item {
       appearance: none;
@@ -894,8 +894,8 @@
       cursor: default;
     }
     .item:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 1px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-border-width);
     }
     .item:disabled {
       color: var(--ui-disabled-text);

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

@@ -69,7 +69,7 @@
       box-sizing: border-box;
       padding: var(--ui-space-1);
       background: var(--_ui-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-context-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       outline: 0;
@@ -90,7 +90,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);
     }
 
     .menu:popover-open {

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

@@ -53,7 +53,7 @@
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
       --_ui-description-padding: var(--_tile-padding);
-      --_ui-description-border-width: 1px;
+      --_ui-description-border-width: var(--ui-border-width);
       --_ui-description-border-color: var(--ui-border-strong);
       --_gap: var(--ui-space-3);
       --_gap-compact: var(--ui-space-2);

package/components/ui-dialog/ui-dialog.html

@@ -92,7 +92,7 @@
       overflow: hidden;
       flex-direction: column;
       background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
       box-shadow: var(--ui-dialog-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
       visibility: hidden;
@@ -198,8 +198,8 @@
     }
 
     .close: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);
     }
 
     /* A touch target, like Button on coarse pointers. */

package/components/ui-disclosure/ui-disclosure.html

@@ -2,6 +2,9 @@
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="fill" type="boolean" default="false"
+    >In a column with a bounded height, an open disclosure fills the remaining space and keeps its trigger visible. The content slot can contain a Scroll Area.
+      Closed items keep only their trigger height.</prop>
     <prop name="summary" type="string" default="Details"
     >The text of the trigger row that opens and closes the disclosure. It is the trigger button's accessible name, so name what the content is.</prop>
     <prop name="open" type="boolean" default="false"
@@ -38,7 +41,7 @@
     <div class="heading" from:role="headingRole" from:aria-level="headingAriaLevel">
       <button class="trigger" type="button" $ref="trigger" from:aria-controls="contentId" from:aria-expanded="internalOpen" from:disabled="disabled">
         <span class="summary"><slot name="summary"><template $value="summary"></template></slot></span>
-        <span class="chevron" aria-hidden="true"></span>
+        <slot name="indicator"><span class="chevron" aria-hidden="true"></span></slot>
       </button>
     </div>
     <div class="panel" $ref="panel" from:id="contentId"><div class="panel-inner"><slot></slot></div></div>
@@ -82,7 +85,7 @@
       display: block;
       inline-size: 100%;
       overflow: clip;
-      border-block-end: 1px solid var(--ui-border-divider);
+      border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
       color: var(--ui-text-primary);
     }
 
@@ -111,7 +114,7 @@
     }
     .trigger:focus-visible {
       outline: none;
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
     }
     .trigger:disabled {
       color: var(--ui-disabled-text);
@@ -149,6 +152,43 @@
       transform: rotate(225deg) translate(-1px, -1px);
     }
 
+    /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
+     * normal content-sized layout and its animation remain unchanged when fill is omitted. */
+    :host-state([fill]) {
+      display: flex;
+      flex-direction: column;
+      flex: none;
+      min-block-size: 0;
+      border-block-end: 0;
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+    }
+    :host-state([fill][internalOpen]) {
+      flex: 1;
+    }
+    :host-state([fill]) .heading {
+      flex: none;
+    }
+    :host-state([fill]) .trigger {
+      border-radius: 0;
+    }
+    :host-state([fill]) .panel {
+      display: flex;
+      flex: 1;
+      min-block-size: 0;
+      transition: none;
+    }
+    :host-state([fill]) .panel[hidden] {
+      flex: none;
+      block-size: 0;
+    }
+    :host-state([fill]) .panel-inner {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-block-size: 0;
+      padding: 0;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .panel,
       .chevron {

package/components/ui-editable/ui-editable.html

@@ -82,7 +82,7 @@
       min-block-size: var(--ui-control-size-sm);
       margin: 0;
       padding: var(--ui-space-1) var(--ui-space-2);
-      border: 1px solid transparent;
+      border: var(--ui-border-width) solid transparent;
       border-radius: var(--ui-radius-md);
       font: inherit;
       line-height: var(--ui-line-height-md);
@@ -155,7 +155,7 @@
     .actions button {
       min-block-size: var(--ui-control-size-sm);
       padding: 0 var(--ui-space-3);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
       background-image: var(--ui-raised-highlight);

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -38,7 +38,7 @@
     :host {
       padding: var(--ui-space-3);
       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));
     }
@@ -83,8 +83,8 @@
       width: 1.25rem;
       height: 1.25rem;
       padding: 0;
-      border: 1px solid var(--ui-control-border);
-      border-radius: 2px;
+      border: var(--ui-border-width) solid var(--ui-control-border);
+      border-radius: var(--ui-radius-sm);
       background: var(--ui-surface);
       cursor: pointer;
     }
@@ -95,8 +95,8 @@
     }
 
     .cell: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));
     }
 
     .header {

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -53,7 +53,7 @@
       overflow: hidden;
       flex-direction: column;
       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));
     }
@@ -65,7 +65,7 @@
       gap: var(--ui-space-3);
       padding: var(--ui-space-2) var(--ui-space-3);
       color: var(--ui-text-secondary);
-      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);
       font-weight: var(--ui-font-semibold);
     }

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -49,7 +49,7 @@
 
     :host {
       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;
@@ -69,7 +69,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);
@@ -147,7 +147,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);
@@ -194,7 +194,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);
     }
@@ -206,8 +206,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/components/ui-editor-slash-menu-item/ui-editor-slash-menu-item.html

@@ -44,7 +44,7 @@
       flex: 0 0 auto;
       color: var(--ui-text-secondary);
       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);
     }
 

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -88,7 +88,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;
@@ -155,7 +155,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/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -244,7 +244,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));
@@ -287,8 +287,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 {
@@ -321,13 +321,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 {
@@ -399,7 +399,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;
@@ -516,19 +516,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%;
     }