@threadlabs/looma 0.5.1 → 0.6.0-rc.1

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

@@ -8,10 +8,14 @@
       name="actions"
       type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
     >The complete set of commands the current selection permits.</prop>
-    <state name="alignments" :value="[]"></state>
-    <state name="structure" :value="[]"></state>
-    <state name="swatches" :value="[]"></state>
-    <state name="sections" :value="[]"></state>
+    <state name="alignments" type="list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))" :value="[]"></state>
+    <state name="structure" type="list(object({ action: add-row-after | add-column-after, label: string, icon: string }))" :value="[]"></state>
+    <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean }))" :value="[]"></state>
+    <state
+      name="sections"
+      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))"
+      :value="[]"
+    ></state>
     <state name="hasOverflow" :value="false"></state>
     <state name="overflowOpen" :value="false"></state>
     <event
@@ -97,13 +101,13 @@
 
     .looma-editor__mobile-toolbar-shell :host button.active,
     .looma-editor__mobile-toolbar-shell :host button.selected {
-      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+      background: var(--ui-accent-soft, var(--ui-accent-subtle));
     }
 
     .looma-editor__mobile-toolbar-shell :host .menu {
       top: auto;
       right: 0;
-      bottom: calc(100% + var(--ui-space-2, 8px));
+      bottom: calc(100% + var(--ui-space-2));
       max-height: min(50dvh, 22rem);
       overflow-y: auto;
       overscroll-behavior: contain;
@@ -111,11 +115,11 @@
     :host {
       display: inline-flex;
       align-items: center;
-      gap: var(--ui-space-1, 4px);
-      padding: var(--ui-space-1, 4px);
-      background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: calc(var(--ui-radius-md, 6px) + 2px);
+      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);
+      border-radius: calc(var(--ui-radius-md) + 2px);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       backdrop-filter: blur(10px);
     }
@@ -130,7 +134,7 @@
     .sep {
       width: 1px;
       align-self: stretch;
-      background: var(--ui-border, #e5e7eb);
+      background: var(--ui-border);
     }
 
     .overflow {
@@ -141,31 +145,31 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: var(--ui-space-1-5, 6px);
+      gap: var(--ui-space-2);
       min-height: 32px;
       border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
+      border-radius: var(--ui-radius-sm);
       background: transparent;
-      color: var(--ui-text-primary, #111827);
+      color: var(--ui-text-primary);
       cursor: pointer;
-      font-size: var(--ui-text-sm, 0.875rem);
+      font-size: var(--ui-font-size-sm);
       font-weight: 500;
       line-height: 1;
-      padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+      padding: var(--ui-space-2) var(--ui-space-2);
       white-space: nowrap;
     }
 
     :host button:hover {
-      background: var(--ui-surface-hover, #f3f4f6);
+      background: var(--ui-surface-hover);
     }
 
     :host button.active {
-      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-      color: var(--ui-accent-active, #003d7a);
+      background: var(--ui-accent-soft, var(--ui-accent-subtle));
+      color: var(--ui-accent-active);
     }
 
     .group button {
-      border-radius: var(--ui-radius-sm, 4px);
+      border-radius: var(--ui-radius-sm);
     }
 
     .group button + button {
@@ -174,11 +178,11 @@
 
     :host .more {
       border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
+      border-radius: var(--ui-radius-sm);
     }
 
     :host button.danger {
-      color: var(--ui-danger, #dc2626);
+      color: var(--ui-danger);
     }
 
     :host {
@@ -198,13 +202,13 @@
 
     .menu {
       position: absolute;
-      top: calc(100% + var(--ui-space-2, 8px));
+      top: calc(100% + var(--ui-space-2));
       right: 0;
       min-width: 12rem;
-      padding: var(--ui-space-1, 4px);
-      background: var(--ui-surface, #fff);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-md, 6px);
+      padding: var(--ui-space-1);
+      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));
       display: flex;
       flex-direction: column;
@@ -213,18 +217,18 @@
     }
 
     .menu-section + .menu-section {
-      margin-top: var(--ui-space-1, 4px);
-      padding-top: var(--ui-space-1, 4px);
-      border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
+      margin-top: var(--ui-space-1);
+      padding-top: var(--ui-space-1);
+      border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
     }
 
     .menu-heading {
-      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+      padding: var(--ui-space-1) var(--ui-space-2);
       font-size: 0.6875rem;
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;
-      color: var(--ui-text-muted, #6b7280);
+      color: var(--ui-text-muted);
     }
 
     .menu button {
@@ -241,7 +245,7 @@
     }
 
     :host .swatch-button {
-      gap: var(--ui-space-1, 4px);
+      gap: var(--ui-space-1);
       justify-content: flex-start;
     }
 
@@ -249,19 +253,19 @@
       width: 14px;
       height: 14px;
       flex: 0 0 14px;
-      border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
+      border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
       border-radius: 3px;
       background: var(--ui-editor-table-toolbar-swatch);
     }
 
     .swatch.default {
       background:
-        linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
-        var(--ui-surface, #fff);
+        linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
+        var(--ui-surface);
     }
 
     .swatch-button.selected {
-      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+      background: var(--ui-accent-soft, var(--ui-accent-subtle));
     }
 
     :host[hidden] {

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

@@ -17,8 +17,8 @@
       overflow-x: auto;
       scrollbar-width: none;
       white-space: nowrap;
-      background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
-      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+      background: var(--ui-editor-toolbar-surface, var(--ui-surface));
+      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
     }
 
     :host::-webkit-scrollbar {
@@ -32,7 +32,7 @@
     :slotted(.divider) {
       width: 1px;
       height: 20px;
-      background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
+      background: var(--ui-editor-toolbar-divider, var(--ui-border));
       flex-shrink: 0;
       margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
     }
@@ -45,9 +45,9 @@
       min-height: auto;
       padding: var(--ui-editor-toolbar-floating-padding, 4px);
       overflow-x: visible;
-      background: color-mix(in srgb, var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%, transparent);
-      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+      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));
+      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);
     }
@@ -60,7 +60,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, #e5e7eb));
+        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
         border-bottom: none;
         box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
       }
@@ -69,8 +69,8 @@
         position: static;
         inset: auto;
         min-height: auto;
-        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-        border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+        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

@@ -8,13 +8,13 @@
   <style>
     :host {
       position: fixed;
-      inset-block-end: calc(var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom));
+      inset-block-end: calc(var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) + env(safe-area-inset-bottom));
       inset-inline-end: max(
-        var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
+        var(--ui-floating-action-button-inset-inline-end, var(--ui-space-5)),
         env(safe-area-inset-right)
       );
-      inline-size: var(--ui-floating-action-button-size, 56px);
-      block-size: var(--ui-floating-action-button-size, 56px);
+      inline-size: var(--ui-control-min-block-size);
+      block-size: var(--ui-control-min-block-size);
       display: inline-flex;
       z-index: var(--ui-floating-action-button-z-index, 100);
     }
@@ -28,33 +28,27 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
-      color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
-      box-shadow: var(
-        --ui-floating-action-button-shadow,
-        0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
-      );
+      background: var(--ui-accent);
+      color: var(--ui-on-accent);
+      box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
       cursor: pointer;
       transition:
-        background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
-        transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
-        box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     :host:hover:enabled {
-      background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
-      box-shadow: var(
-        --ui-floating-action-button-hover-shadow,
-        0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
-      );
+      background: var(--ui-accent-hover);
+      box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
     }
 
     :host:active:enabled {
-      transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+      transform: scale(0.94);
     }
 
     :host:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 
@@ -64,8 +58,8 @@
     }
 
     :slotted(svg) {
-      inline-size: var(--ui-floating-action-button-icon-size, 24px);
-      block-size: var(--ui-floating-action-button-icon-size, 24px);
+      inline-size: var(--ui-icon-size-lg);
+      block-size: var(--ui-icon-size-lg);
       flex-shrink: 0;
     }
 

package/components/ui-form-field/ui-form-field.html

@@ -5,10 +5,10 @@
     <prop name="required" type="boolean" default="false">required token.</prop>
   </defs>
   <div>
-    <slot name="label"></slot>
+    <div class="label"><slot name="label"></slot></div>
     <slot></slot>
-    <slot name="help"></slot>
-    <slot name="error"></slot>
+    <div class="help"><slot name="help"></slot></div>
+    <div class="error"><slot name="error"></slot></div>
   </div>
   <style>
     :host {
@@ -19,19 +19,30 @@
       color: var(--ui-text-primary);
     }
 
-    :slotted([slot="label"]) {
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+    .label,
+    .help,
+    .error {
+      display: contents;
+    }
+
+    .label {
       color: var(--ui-text-secondary);
       font-size: 0.95rem;
     }
 
-    :slotted([slot="help"]) {
-      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+    .help {
       color: var(--ui-text-muted);
       font-size: 0.875rem;
       line-height: var(--ui-line-height-md);
     }
 
-    :slotted([slot="error"]),
+    .help > :slotted(*) {
+      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+    }
+
+    .error,
     :slotted([role="alert"]) {
       color: var(--ui-accent-active);
       font-size: 0.875rem;

package/components/ui-grid/ui-grid.html

@@ -6,7 +6,7 @@
   <div><slot></slot></div>
   <style>
     :host {
-      --_grid-gap: var(--ui-space-4, 1rem);
+      --_grid-gap: var(--ui-space-4);
       --_grid-min: 12rem;
       display: grid;
       gap: var(--ui-grid-gap, var(--_grid-gap));
@@ -17,19 +17,19 @@
     }
 
     :host-state([gap="xs"]) {
-      --_grid-gap: var(--ui-space-2, 0.5rem);
+      --_grid-gap: var(--ui-space-2);
     }
     :host-state([gap="s"]) {
-      --_grid-gap: var(--ui-space-3, 0.75rem);
+      --_grid-gap: var(--ui-space-3);
     }
     :host-state([gap="m"]) {
-      --_grid-gap: var(--ui-space-4, 1rem);
+      --_grid-gap: var(--ui-space-4);
     }
     :host-state([gap="l"]) {
-      --_grid-gap: var(--ui-space-5, 1.5rem);
+      --_grid-gap: var(--ui-space-5);
     }
     :host-state([gap="xl"]) {
-      --_grid-gap: var(--ui-space-6, 2rem);
+      --_grid-gap: var(--ui-space-6);
     }
     :host-state([min="md"]) {
       --_grid-min: 16rem;

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

@@ -1,7 +1,11 @@
 <template component="ui-icon" controller="./ui-icon.js">
   <defs>
     <prop name="name" type="string" default="">The icon's name.</prop>
-    <state name="shapes" :value="[]"></state>
+    <state
+      name="shapes"
+      type="list(object({ tag: path | circle | rect, d?: string, cx?: string, cy?: string, r?: string, x?: string, y?: string, width?: string, height?: string, rx?: string }))"
+      :value="[]"
+    ></state>
   </defs>
   <span aria-hidden="true">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">

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

@@ -23,11 +23,11 @@
       position: absolute;
       inset: 50% auto auto 50%;
       z-index: 1;
-      inline-size: var(--ui-affordance-guide-size, 0.25rem);
-      block-size: var(--ui-affordance-guide-size, 0.25rem);
-      border-radius: var(--ui-radius-round, 999px);
+      inline-size: var(--ui-affordance-guide-size);
+      block-size: var(--ui-affordance-guide-size);
+      border-radius: var(--ui-radius-round);
       background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      opacity: var(--ui-affordance-guide-opacity);
       transform: translate(-50%, -50%);
       transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
       pointer-events: none;
@@ -50,16 +50,18 @@
     }
 
     :host {
+      /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+      --_size: 2rem;
       appearance: none;
-      inline-size: var(--ui-icon-button-size, 2rem);
-      block-size: var(--ui-icon-button-size, 2rem);
-      min-inline-size: var(--ui-icon-button-size, 2rem);
-      min-block-size: var(--ui-icon-button-size, 2rem);
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
       padding: 0;
       margin: 0;
       border: 1px solid transparent;
-      border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
-      background: var(--ui-icon-button-bg, transparent);
+      border-radius: var(--ui-icon-button-radius, var(--ui-radius-md));
+      background: var(--ui-icon-button-surface, transparent);
       color: inherit;
       display: inline-flex;
       align-items: center;
@@ -79,33 +81,65 @@
       }
     }
 
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+      :host {
+        position: relative;
+      }
+
+      :host::after {
+        content: "";
+        position: absolute;
+        inset: 50% auto auto 50%;
+        inline-size: max(100%, var(--ui-control-min-block-size));
+        block-size: max(100%, var(--ui-control-min-block-size));
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :host {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :host::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size));
+      block-size: max(100%, var(--ui-control-min-block-size));
+      transform: translate(-50%, -50%);
+    }
+
     :host-state([size="sm"]) {
-      inline-size: var(--ui-icon-button-size-sm, 1.75rem);
-      block-size: var(--ui-icon-button-size-sm, 1.75rem);
-      min-inline-size: var(--ui-icon-button-size-sm, 1.75rem);
-      min-block-size: var(--ui-icon-button-size-sm, 1.75rem);
+      --_size: 1.75rem;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
     }
 
     :host-state([size="lg"]) {
-      inline-size: var(--ui-icon-button-size-lg, 2.5rem);
-      block-size: var(--ui-icon-button-size-lg, 2.5rem);
-      min-inline-size: var(--ui-icon-button-size-lg, 2.5rem);
-      min-block-size: var(--ui-icon-button-size-lg, 2.5rem);
+      --_size: 2.5rem;
+      inline-size: var(--ui-icon-button-size, var(--_size));
+      block-size: var(--ui-icon-button-size, var(--_size));
+      min-inline-size: var(--ui-icon-button-size, var(--_size));
+      min-block-size: var(--ui-icon-button-size, var(--_size));
     }
 
     :host-state([round]) {
-      border-radius: var(--ui-radius-round, 999px);
+      border-radius: var(--ui-radius-round);
     }
 
     :host-state([variant="outline"]) {
       border-color: var(--ui-icon-button-border, var(--ui-border-default));
-      background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
-      color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
+      background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+      color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
     }
 
     :host-state([variant="solid"]) {
-      background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
-      color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
+      background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+      color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
       box-shadow: var(
         --ui-icon-button-solid-shadow,
         0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
@@ -114,8 +148,8 @@
 
     :host:hover:enabled {
       /* Derived from the text colour so the ghost hover shows on any background. */
-      background: var(--ui-icon-button-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
-      color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
+      background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
     }
 
     :host-state([variant="outline"]):hover:enabled {
@@ -123,7 +157,7 @@
     }
 
     :host-state([variant="solid"]):hover:enabled {
-      background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
+      background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
     :host:active:enabled {
@@ -138,31 +172,31 @@
     /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
     :host:disabled {
       opacity: var(--ui-icon-button-disabled-opacity, 0.6);
-      color: var(--ui-icon-button-disabled-color, inherit);
+      color: var(--ui-icon-button-disabled-text, inherit);
       cursor: not-allowed;
     }
 
     :host-state([variant="outline"]):disabled {
       border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
-      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-outline-bg, var(--ui-surface-default)));
-      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-outline-color, var(--ui-text-primary)));
+      background-color: var(--ui-icon-button-disabled-surface, var(--ui-icon-button-outline-surface, var(--ui-surface-default)));
+      color: var(--ui-icon-button-disabled-text, var(--ui-icon-button-outline-text, var(--ui-text-primary)));
     }
 
     :host-state([variant="solid"]):disabled {
-      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-solid-bg, var(--ui-accent-solid)));
-      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-solid-color, var(--ui-text-on-accent)));
+      background-color: var(--ui-icon-button-disabled-surface, var(--ui-icon-button-solid-surface, var(--ui-accent-solid)));
+      color: var(--ui-icon-button-disabled-text, var(--ui-icon-button-solid-text, var(--ui-text-on-accent)));
     }
 
     :host {
-      --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
+      --_icon-button-icon-default: var(--ui-icon-size-md);
     }
 
     :host-state([size="sm"]) {
-      --_icon-button-icon-default: var(--ui-icon-size-sm, 1rem);
+      --_icon-button-icon-default: var(--ui-icon-size-sm);
     }
 
     :host-state([size="lg"]) {
-      --_icon-button-icon-default: var(--ui-icon-size-lg, 1.5rem);
+      --_icon-button-icon-default: var(--ui-icon-size-lg);
     }
 
     :slotted(svg) {

package/components/ui-input/ui-input.html

@@ -13,12 +13,12 @@
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size-md, 2.5rem);
+      min-block-size: var(--ui-control-size-md);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-input-radius, var(--ui-radius-2));
+      border-radius: var(--ui-input-radius, var(--ui-radius-md));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       font: inherit;

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

@@ -1,5 +1,6 @@
 <template component="ui-menu" controller="./ui-menu.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="open" type="boolean" default="false">Whether the menu is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the menu.</prop>
     <prop name="placement" type="string" default="bottom-start">Positions an associated menu relative to its trigger.</prop>
@@ -13,13 +14,23 @@
   </defs>
   <div role="menu" aria-orientation="vertical"><div class="surface"><slot></slot></div></div>
   <style>
+    /* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+    :host-state([density="compact"]) {
+      --ui-menu-item-padding-block: var(--ui-space-1);
+      --ui-menu-item-padding-inline: var(--ui-space-2);
+      --ui-menu-item-font-size: var(--ui-font-size-sm);
+      --ui-menu-item-radius: var(--ui-radius-sm);
+      padding: var(--ui-space-1);
+      gap: 0;
+    }
+
     :host {
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
       inline-size: max-content;
-      min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2));
-      max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+      max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
       padding: 0;
       border: 0;
       outline: 0;
@@ -37,7 +48,7 @@
       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));
       max-block-size: inherit;
       overflow: auto;
@@ -52,7 +63,7 @@
       inset: auto;
       margin: 0;
       overflow: visible;
-      max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
       transition: