@threadlabs/looma 0.22.14 → 0.23.0

package/components/shared/icons.js

@@ -17,6 +17,7 @@ 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"}]],
@@ -30,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"}]],

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

@@ -28,7 +28,7 @@
       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);
@@ -59,7 +59,7 @@
 
     :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);
     }
 

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%;
     }
 

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,6 +24,7 @@
         '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' }],
@@ -37,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' }],