@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/README.md

@@ -42,7 +42,7 @@ The editor components' event and geometry types, without Tiptap, are in
 ```
 
 Importing the package registers every component with the
-[HTML Next runtime](https://www.npmjs.com/package/@nextwebwg/declarative-components), which turns
+[HTML Next runtime](https://www.npmjs.com/package/@nextwebwg/html-next), which turns
 each `<ui-*>` element into its native root. Each component's styles are scoped to it; the token
 stylesheet is the only stylesheet to include. Without a build, link components one by one from
 `@threadlabs/looma/components/<tag>/<tag>.html`.

package/components/shared/overlay.js

@@ -32,6 +32,9 @@ function ensureListeners(document, state) {
     const top = state.records.at(-1);
     if (!top || top.dismissible === false) return;
     const boundary = [top.element, ...(top.relatedElements ?? [])];
+    // Light dismiss needs a press it can place: an activation with no pointer (assistive technology,
+    // or a synthetic event) reports 0,0 and would otherwise read as a press outside the overlay.
+    if (event.clientX === 0 && event.clientY === 0) return;
     // A modal dialog's ::backdrop reports the dialog itself as the target; a press outside its box is outside.
     const rect = top.element.getBoundingClientRect();
     const onBackdrop = event.target === top.element

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

@@ -4,6 +4,9 @@
     >Visual emphasis and semantic intent. link is an inline text action that reads as a link.</prop>
     <prop name="size" type="sm | md | lg" default="md">Control size.</prop>
     <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="align" type="center | start" default="center"
+    >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
+    <prop name="stretch" type="boolean" default="false">Fills the inline size of its container.</prop>
   </defs>
   <button type="button" :disabled="disabled"><slot></slot></button>
   <style>
@@ -19,18 +22,28 @@
       color: var(--ui-action-primary-text, var(--ui-text-on-accent));
     }
 
+    :host-state([align="start"]) {
+      justify-content: flex-start;
+      text-align: start;
+    }
+
+    :host-state([stretch]) {
+      display: flex;
+      inline-size: 100%;
+    }
+
     :host {
       appearance: none;
-      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
+      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border: 1px solid var(--ui-button-border, var(--ui-border-strong));
-      border-radius: var(--ui-button-radius, var(--ui-radius-2));
+      border-radius: var(--ui-button-radius, var(--ui-radius-md));
       background: var(--ui-button-surface, var(--ui-surface-elevated));
       color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
       font: inherit;
-      font-weight: var(--ui-font-medium, 500);
+      font-weight: var(--ui-font-medium);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
-      background-image: var(--ui-raised-highlight, none);
+      background-image: var(--ui-raised-highlight);
       box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
       cursor: pointer;
       transition:
@@ -50,13 +63,13 @@
     }
 
     :host-state([size="sm"]) {
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: 0.875rem;
     }
 
     :host-state([size="lg"]) {
-      min-block-size: var(--ui-control-size-lg, 3rem);
+      min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: 1rem;
     }
@@ -119,12 +132,12 @@
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
     :host-state([variant="ghost"]):hover:enabled {
-      background: var(--ui-button-ghost-hover, color-mix(in srgb, currentColor 8%, transparent));
+      background: var(--ui-button-ghost-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       border-color: transparent;
     }
 
     :host-state([variant="ghost"]):active:enabled {
-      background: var(--ui-button-ghost-active, color-mix(in srgb, currentColor 14%, transparent));
+      background: var(--ui-button-ghost-active-surface, color-mix(in srgb, currentColor 14%, transparent));
       border-color: transparent;
     }
 
@@ -171,7 +184,7 @@
 
     @media (pointer: coarse) {
       :host {
-        min-block-size: var(--ui-control-min-block-size, 2.75rem);
+        min-block-size: var(--ui-control-min-block-size);
       }
     }
 
@@ -182,11 +195,11 @@
       min-block-size: 0;
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
+      border-radius: var(--ui-radius-sm);
       background: none;
       box-shadow: none;
       font: inherit;
-      color: var(--ui-button-link-color, var(--ui-text-secondary));
+      color: var(--ui-button-link-text, var(--ui-text-secondary));
       text-decoration-line: underline;
       text-decoration-thickness: 1px;
       text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
@@ -195,7 +208,7 @@
     }
 
     :host-state([variant="link"]):hover:enabled {
-      color: var(--ui-button-link-hover-color, var(--ui-text-primary));
+      color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
@@ -208,13 +221,13 @@
 
     :host-state([variant="link"]):disabled {
       background: none;
-      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+      color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
     }
 
     :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, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 

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

@@ -45,7 +45,7 @@
       padding: var(--ui-callout-padding-block, var(--ui-space-2)) 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-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-callout-surface, var(--_callout-surface));
       color: var(--ui-callout-text, var(--ui-text-primary));
       font-family: var(--ui-font-family-sans);

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

@@ -36,7 +36,7 @@
       block-size: var(--ui-checkbox-size, 1.125rem);
       margin: 0.125em 0 0;
       border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
       cursor: pointer;

package/components/ui-cluster/ui-cluster.html

@@ -6,7 +6,7 @@
   <div><slot></slot></div>
   <style>
     :host {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -17,19 +17,19 @@
     }
 
     :host-state([gap="xs"]) {
-      --_layout-gap: var(--ui-space-2, 0.5rem);
+      --_layout-gap: var(--ui-space-2);
     }
     :host-state([gap="s"]) {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
     }
     :host-state([gap="m"]) {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
     }
     :host-state([gap="l"]) {
-      --_layout-gap: var(--ui-space-5, 1.5rem);
+      --_layout-gap: var(--ui-space-5);
     }
     :host-state([gap="xl"]) {
-      --_layout-gap: var(--ui-space-6, 2rem);
+      --_layout-gap: var(--ui-space-6);
     }
     :host-state([align="start"]) {
       align-items: flex-start;

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

@@ -23,16 +23,24 @@
     <prop name="help" type="string" default="">help token.</prop>
     <state name="raw" :value="''"></state>
     <state name="display" :value="''"></state>
-    <state name="selected" :value="null"></state>
+    <state name="selected" type="string | null" :value="null"></state>
     <state name="expanded" :value="false"></state>
-    <state name="rows" :value="[]"></state>
+    <state name="rows" type="list(object({ id: string, value: string, label: string, group?: string, disabled: boolean }))" :value="[]"></state>
     <state name="active" :value="-1"></state>
     <state name="loading" :value="false"></state>
     <state name="helpOpen" :value="false"></state>
     <state name="lookupError" :value="''"></state>
-    <state name="validation" :value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"></state>
+    <state
+      name="validation"
+      type="object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string })), ... })"
+      :value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"
+    ></state>
     <state name="uid" :value="''"></state>
-    <state name="groups" :value="[]"></state>
+    <state
+      name="groups"
+      type="list(object({ name: string, role: group | presentation, label: string | null, rows: list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, index: integer })) }))"
+      :value="[]"
+    ></state>
     <state name="creatable" :value="false"></state>
     <state name="createIndex" :value="0"></state>
     <state name="message" :value="''"></state>
@@ -181,15 +189,15 @@
       font: inherit;
     }
     label {
-      color: var(--ui-field-label-color, var(--ui-text-primary));
-      font-size: var(--ui-field-label-size, 0.875rem);
-      font-weight: var(--ui-field-label-weight, 500);
+      color: var(--ui-combobox-label-text, var(--ui-text-primary));
+      font-size: var(--ui-combobox-label-font-size, 0.875rem);
+      font-weight: 500;
     }
     .field {
       display: flex;
       min-inline-size: 0;
       border: 1px solid var(--ui-control-border, var(--ui-border-default));
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
@@ -208,7 +216,7 @@
       appearance: none;
       width: 100%;
       min-inline-size: 0;
-      min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
+      min-block-size: calc(var(--ui-control-size-md) - 2px);
       box-sizing: border-box;
       border: 0;
       border-radius: inherit;
@@ -221,7 +229,7 @@
       outline: none;
     }
     :host-state([size="sm"]) input {
-      min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
+      min-block-size: calc(var(--ui-control-size-sm) - 2px);
       padding: var(--ui-space-1) var(--ui-space-2);
     }
     button {
@@ -230,19 +238,19 @@
       place-items: center;
       align-self: stretch;
       border: 0;
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: transparent;
-      color: var(--ui-field-affordance-color, var(--ui-text-secondary));
+      color: var(--ui-combobox-affordance-text, var(--ui-text-secondary));
       font: inherit;
-      font-weight: var(--ui-field-affordance-weight, 400);
+      font-weight: 400;
       min-inline-size: 2rem;
       padding: 0 var(--ui-space-1);
       cursor: pointer;
     }
     .affordance-icon {
       display: block;
-      inline-size: var(--ui-icon-size-sm, 1rem);
-      block-size: var(--ui-icon-size-sm, 1rem);
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
     }
     button:hover:enabled {
       background: var(--ui-surface-muted);
@@ -272,7 +280,7 @@
       margin: 0;
       padding: var(--ui-space-1);
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
@@ -282,13 +290,13 @@
     }
     .option {
       padding: var(--ui-space-2) var(--ui-space-3);
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       cursor: pointer;
       overflow-wrap: anywhere;
     }
     .option:hover, .option.active {
       background: var(--ui-surface-muted);
-      outline: 1px solid var(--ui-focus-ring, currentColor);
+      outline: 1px solid var(--ui-focus-ring);
       outline-offset: -1px;
     }
     .option[aria-disabled="true"] {
@@ -297,12 +305,12 @@
     }
     .primary {
       display: block;
-      color: var(--ui-option-primary-color, var(--ui-text-primary));
-      font-weight: var(--ui-option-primary-weight, 500);
+      color: var(--ui-combobox-option-text, var(--ui-text-primary));
+      font-weight: 500;
     }
     .message, .group {
-      color: var(--ui-field-message-color, var(--ui-text-secondary));
-      font-weight: var(--ui-field-message-weight, 400);
+      color: var(--ui-combobox-message-text, var(--ui-text-secondary));
+      font-weight: 400;
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-md);
       overflow-wrap: anywhere;
@@ -338,11 +346,11 @@
       flex-wrap: wrap;
       align-items: center;
       gap: var(--ui-space-1);
-      min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+      min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
       padding: var(--ui-space-1);
     }
     :host-state([multiple]) input {
-      flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+      flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
       padding: var(--ui-space-0-5) var(--ui-space-1);
@@ -351,18 +359,18 @@
       appearance: none;
       display: inline-flex;
       min-inline-size: 0;
-      max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+      max-inline-size: min(100%, var(--ui-combobox-item-item-max-inline-size, 12rem));
       overflow: hidden;
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       background: transparent;
       color: inherit;
       font: inherit;
       cursor: default;
     }
     .item:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 1px;
     }
     .item:disabled {

package/components/ui-container/ui-container.html

@@ -7,7 +7,7 @@
   <style>
     :host {
       --_container-measure: 65ch;
-      --_container-gutters: var(--ui-space-4, 1rem);
+      --_container-gutters: var(--ui-space-4);
       display: block;
       inline-size: 100%;
       max-inline-size: var(--ui-container-measure, var(--_container-measure));
@@ -22,13 +22,13 @@
       --_container-measure: 80ch;
     }
     :host-state([gutters="s"]) {
-      --_container-gutters: var(--ui-space-3, 0.75rem);
+      --_container-gutters: var(--ui-space-3);
     }
     :host-state([gutters="m"]) {
-      --_container-gutters: var(--ui-space-4, 1rem);
+      --_container-gutters: var(--ui-space-4);
     }
     :host-state([gutters="l"]) {
-      --_container-gutters: var(--ui-space-5, 1.5rem);
+      --_container-gutters: var(--ui-space-5);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

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

@@ -29,11 +29,11 @@
       padding: var(--ui-space-1);
       background: var(--ui-surface-elevated);
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-3);
+      border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       outline: 0;
       overflow: auto;
-      z-index: var(--ui-z-overlay, 1000);
+      z-index: var(--ui-context-menu-z-index, 1000);
       min-width: 12rem;
       opacity: 0;
       transform: translateY(-4px) scale(0.99);

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

@@ -27,11 +27,11 @@
       inset: 0;
       box-sizing: border-box;
       inline-size: min(
-        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2),
+        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
         var(--ui-dialog-max-width, 440px)
       );
       max-inline-size: none;
-      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2);
+      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
       margin: auto;
       padding: 0;
       overflow: hidden;
@@ -80,8 +80,8 @@
       border: 0;
       color: var(--ui-text-primary);
       letter-spacing: normal;
-      font-size: var(--ui-font-size-lg, 1.125rem);
-      font-weight: var(--ui-font-semibold, 600);
+      font-size: var(--ui-font-size-lg);
+      font-weight: var(--ui-font-semibold);
       line-height: var(--ui-line-height-tight);
     }
 
@@ -90,11 +90,11 @@
       place-items: center;
       flex: none;
       margin-inline-start: auto;
-      inline-size: var(--ui-control-size-sm, 2rem);
-      block-size: var(--ui-control-size-sm, 2rem);
+      inline-size: var(--ui-control-size-sm);
+      block-size: var(--ui-control-size-sm);
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-round, 999px);
+      border-radius: var(--ui-radius-round);
       background: transparent;
       color: var(--ui-text-secondary);
       cursor: pointer;
@@ -123,10 +123,23 @@
     }
 
     .close:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 
+    /* A touch target, like Button on coarse pointers. */
+    @media (pointer: coarse) {
+      .close {
+        inline-size: var(--ui-control-min-block-size);
+        block-size: var(--ui-control-min-block-size);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :host .close {
+      inline-size: var(--ui-control-min-block-size);
+      block-size: var(--ui-control-min-block-size);
+    }
+
     .body {
       flex: 1 1 auto;
       min-block-size: 0;

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

@@ -1,5 +1,6 @@
 <template component="ui-disclosure" controller="./ui-disclosure.js">
   <defs>
+    <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="summary" type="string" default="Details">summary token.</prop>
     <prop name="open" type="boolean" default="false">open token.</prop>
     <prop name="disabled" type="boolean" default="false">disabled token.</prop>
@@ -22,6 +23,19 @@
     <div class="panel" :id="contentId" :inert="not internalOpen"><div class="panel-inner"><slot></slot></div></div>
   </div>
   <style>
+    /* Density resolves into the summary row's own values; the public tokens still override them. */
+    :host {
+      --_trigger-min-block-size: var(--ui-control-size);
+      --_trigger-padding-block: var(--ui-space-2);
+      --_trigger-padding-inline: var(--ui-space-3);
+    }
+
+    :host-state([density="compact"]) {
+      --_trigger-min-block-size: var(--ui-control-size-sm);
+      --_trigger-padding-block: var(--ui-space-1);
+      --_trigger-padding-inline: var(--ui-space-2);
+    }
+
     /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
     :host {
@@ -38,16 +52,17 @@
       gap: var(--ui-space-3);
       align-items: center;
       inline-size: 100%;
-      min-block-size: 2.5rem;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+      padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+        var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
       border: 0;
       background: transparent;
       color: inherit;
       font: inherit;
-      font-weight: var(--ui-font-semibold, 600);
+      font-weight: var(--ui-font-semibold);
       text-align: start;
       cursor: pointer;
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 

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

@@ -52,11 +52,11 @@
     .input {
       grid-area: 1 / 1;
       box-sizing: border-box;
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       margin: 0;
       padding: var(--ui-space-1) var(--ui-space-2);
       border: 1px solid transparent;
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       font: inherit;
       line-height: var(--ui-line-height-md);
       color: inherit;
@@ -126,13 +126,13 @@
     }
 
     .actions button {
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       padding: 0 var(--ui-space-3);
       border: 1px solid var(--ui-border-strong);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
-      background-image: var(--ui-raised-highlight, none);
-      box-shadow: var(--ui-raised, none);
+      background-image: var(--ui-raised-highlight);
+      box-shadow: var(--ui-raised);
       color: inherit;
       font: inherit;
       font-size: var(--ui-font-size-sm);

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

@@ -4,7 +4,7 @@
     <prop name="maxRows" type="integer" default="8">The most rows the grid offers (at most 10).</prop>
     <prop name="maxCols" type="integer" default="8">The most columns the grid offers (at most 10).</prop>
     <prop name="headerRow" type="boolean" default="false">Whether table insertion initially includes a header row.</prop>
-    <state name="cells" :value="[]"></state>
+    <state name="cells" type="list(object({ key: string, row: integer, col: integer, label: string, selected: boolean }))" :value="[]"></state>
     <state name="rows" :value="8"></state>
     <state name="cols" :value="8"></state>
     <state name="hint" :value="''"></state>
@@ -32,17 +32,17 @@
   </div>
   <style>
     :host {
-      padding: var(--ui-space-3, 12px);
-      background: var(--ui-surface, #fff);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-md, 6px);
+      padding: var(--ui-space-3);
+      background: var(--ui-surface);
+      border: 1px solid var(--ui-border);
+      border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
     }
 
     .hint {
-      margin: 0 0 var(--ui-space-2, 8px);
-      font-size: var(--ui-text-sm, 0.875rem);
-      color: var(--ui-text-muted, #6b7280);
+      margin: 0 0 var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+      color: var(--ui-text-muted);
     }
 
     .grid {
@@ -50,39 +50,39 @@
       grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
       grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
       gap: 2px;
-      margin-bottom: var(--ui-space-2, 8px);
+      margin-bottom: var(--ui-space-2);
     }
 
     .cell {
       width: 1.25rem;
       height: 1.25rem;
       padding: 0;
-      border: 1px solid var(--ui-border, #e5e7eb);
+      border: 1px solid var(--ui-border);
       border-radius: 2px;
-      background: var(--ui-surface, #fff);
+      background: var(--ui-surface);
       cursor: pointer;
     }
 
     .cell.selected {
-      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-      border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      background: var(--ui-accent-solid, var(--ui-accent));
+      border-color: var(--ui-accent-solid, var(--ui-accent));
     }
 
     .header {
       display: block;
-      margin-bottom: var(--ui-space-2, 8px);
-      font-size: var(--ui-text-sm, 0.875rem);
+      margin-bottom: var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
       cursor: pointer;
     }
 
     :host .insert {
       width: 100%;
-      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-sm, 4px);
-      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-      color: var(--ui-accent-contrast, #fff);
-      font-size: var(--ui-text-sm, 0.875rem);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 1px solid var(--ui-border);
+      border-radius: var(--ui-radius-sm);
+      background: var(--ui-accent-solid, var(--ui-accent));
+      color: var(--ui-accent-contrast);
+      font-size: var(--ui-font-size-sm);
       cursor: pointer;
     }