@threadlabs/looma 0.5.2 → 0.6.0-rc.1

package/vue/UiEditorTableToolbar.vue

@@ -341,13 +341,13 @@ onBeforeUnmount(() => {
 
 .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active,
 .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] 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 [data-component~="ui-editor-table-toolbar"] .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;
@@ -355,11 +355,11 @@ onBeforeUnmount(() => {
 [data-component~="ui-editor-table-toolbar"] {
   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);
 }
@@ -374,7 +374,7 @@ onBeforeUnmount(() => {
 .sep {
   width: 1px;
   align-self: stretch;
-  background: var(--ui-border, #e5e7eb);
+  background: var(--ui-border);
 }
 
 .overflow {
@@ -385,31 +385,31 @@ onBeforeUnmount(() => {
   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;
 }
 
 [data-component~="ui-editor-table-toolbar"] button:hover {
-  background: var(--ui-surface-hover, #f3f4f6);
+  background: var(--ui-surface-hover);
 }
 
 [data-component~="ui-editor-table-toolbar"] 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 {
@@ -418,11 +418,11 @@ onBeforeUnmount(() => {
 
 [data-component~="ui-editor-table-toolbar"] .more {
   border: 0;
-  border-radius: var(--ui-radius-sm, 4px);
+  border-radius: var(--ui-radius-sm);
 }
 
 [data-component~="ui-editor-table-toolbar"] button.danger {
-  color: var(--ui-danger, #dc2626);
+  color: var(--ui-danger);
 }
 
 [data-component~="ui-editor-table-toolbar"] {
@@ -442,13 +442,13 @@ onBeforeUnmount(() => {
 
 .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;
@@ -457,18 +457,18 @@ onBeforeUnmount(() => {
 }
 
 .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 {
@@ -485,7 +485,7 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-table-toolbar"] .swatch-button {
-  gap: var(--ui-space-1, 4px);
+  gap: var(--ui-space-1);
   justify-content: flex-start;
 }
 
@@ -493,19 +493,19 @@ onBeforeUnmount(() => {
   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));
 }
 
 [data-component~="ui-editor-table-toolbar"][hidden] {

package/vue/UiEditorToolbar.vue

@@ -48,8 +48,8 @@ const hostState = computed(() =>
   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));
 }
 
 [data-component~="ui-editor-toolbar"]::-webkit-scrollbar {
@@ -63,7 +63,7 @@ const hostState = computed(() =>
 :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);
 }
@@ -78,11 +78,11 @@ const hostState = computed(() =>
   overflow-x: visible;
   background: color-mix(
     in srgb,
-    var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%,
+    var(--ui-editor-toolbar-surface, var(--ui-surface)) 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));
+  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))
@@ -98,7 +98,7 @@ const hostState = computed(() =>
     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));
   }
@@ -107,8 +107,8 @@ const hostState = computed(() =>
     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/vue/UiFloatingActionButton.vue

@@ -42,14 +42,15 @@ const hostState = computed(() =>
 [data-component~="ui-floating-action-button"] {
   position: fixed;
   inset-block-end: calc(
-    var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)
+    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);
 }
@@ -63,33 +64,27 @@ const hostState = computed(() =>
   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);
 }
 
 [data-component~="ui-floating-action-button"]: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);
 }
 
 [data-component~="ui-floating-action-button"]:active:enabled {
-  transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+  transform: scale(0.94);
 }
 
 [data-component~="ui-floating-action-button"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
@@ -99,8 +94,8 @@ const hostState = computed(() =>
 }
 
 :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/vue/UiGrid.vue

@@ -26,7 +26,7 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-grid"] {
-  --_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));
@@ -38,19 +38,19 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-grid"][data-ui-grid-state~="gap=xs"] {
-  --_grid-gap: var(--ui-space-2, 0.5rem);
+  --_grid-gap: var(--ui-space-2);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=s"] {
-  --_grid-gap: var(--ui-space-3, 0.75rem);
+  --_grid-gap: var(--ui-space-3);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=m"] {
-  --_grid-gap: var(--ui-space-4, 1rem);
+  --_grid-gap: var(--ui-space-4);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=l"] {
-  --_grid-gap: var(--ui-space-5, 1.5rem);
+  --_grid-gap: var(--ui-space-5);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=xl"] {
-  --_grid-gap: var(--ui-space-6, 2rem);
+  --_grid-gap: var(--ui-space-6);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="min=md"] {
   --_grid-min: 16rem;

package/vue/UiIconButton.vue

@@ -146,11 +146,11 @@ onBeforeUnmount(() => {
   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;
@@ -173,16 +173,18 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-icon-button"] {
+  /* 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;
@@ -213,8 +215,8 @@ onBeforeUnmount(() => {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
-    inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
-    block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+    inline-size: max(100%, var(--ui-control-min-block-size));
+    block-size: max(100%, var(--ui-control-min-block-size));
     transform: translate(-50%, -50%);
   }
 }
@@ -227,38 +229,40 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
-  inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
-  block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+  inline-size: max(100%, var(--ui-control-min-block-size));
+  block-size: max(100%, var(--ui-control-min-block-size));
   transform: translate(-50%, -50%);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-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));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-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));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="round"] {
-  border-radius: var(--ui-radius-round, 999px);
+  border-radius: var(--ui-radius-round);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-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));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-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)
@@ -267,8 +271,8 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 
 [data-component~="ui-icon-button"]: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));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled {
@@ -276,7 +280,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-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));
 }
 
 [data-component~="ui-icon-button"]:active:enabled {
@@ -291,7 +295,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
 [data-component~="ui-icon-button"]: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;
 }
 
@@ -301,36 +305,36 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     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))
+    --ui-icon-button-disabled-surface,
+    var(--ui-icon-button-outline-surface, var(--ui-surface-default))
   );
   color: var(
-    --ui-icon-button-disabled-color,
-    var(--ui-icon-button-outline-color, var(--ui-text-primary))
+    --ui-icon-button-disabled-text,
+    var(--ui-icon-button-outline-text, var(--ui-text-primary))
   );
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:disabled {
   background-color: var(
-    --ui-icon-button-disabled-bg,
-    var(--ui-icon-button-solid-bg, var(--ui-accent-solid))
+    --ui-icon-button-disabled-surface,
+    var(--ui-icon-button-solid-surface, var(--ui-accent-solid))
   );
   color: var(
-    --ui-icon-button-disabled-color,
-    var(--ui-icon-button-solid-color, var(--ui-text-on-accent))
+    --ui-icon-button-disabled-text,
+    var(--ui-icon-button-solid-text, var(--ui-text-on-accent))
   );
 }
 
 [data-component~="ui-icon-button"] {
-  --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
+  --_icon-button-icon-default: var(--ui-icon-size-md);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
-  --_icon-button-icon-default: var(--ui-icon-size-sm, 1rem);
+  --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-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/vue/UiInput.vue

@@ -132,12 +132,12 @@ onBeforeUnmount(() => {
   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/vue/UiMenu.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    density?: 'comfortable' | 'compact';
     for?: string;
     open?: boolean;
     placement?: string;
@@ -43,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     for: string;
     open: boolean;
     placement: string;
+    density: "comfortable" | "compact";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiMenu.vue

@@ -7,11 +7,13 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    density?: 'comfortable' | 'compact'
     for?: string
     open?: boolean
     placement?: string
   }>(),
   {
+    density: 'comfortable',
     for: '',
     open: false,
     placement: 'bottom-start',
@@ -44,6 +46,7 @@ const internalOpen = ref(false)
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.density && `density density=${props.density}`,
     internalOpen.value && 'internalOpen',
   ].filter(Boolean).join(' ')
 )
@@ -192,16 +195,23 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+/* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+[data-component~="ui-menu"][data-ui-menu-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;
+}
+
 [data-component~="ui-menu"] {
   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;
@@ -219,7 +229,7 @@ onBeforeUnmount(() => {
   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;
@@ -234,7 +244,7 @@ onBeforeUnmount(() => {
   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:

package/vue/UiMenuItem.vue

@@ -32,12 +32,13 @@ withDefaults(
   display: block;
   box-sizing: border-box;
   width: 100%;
-  padding: var(--ui-space-2) var(--ui-space-3);
+  padding: var(--ui-menu-item-padding-block, var(--ui-space-2))
+    var(--ui-menu-item-padding-inline, var(--ui-space-3));
   text-align: left;
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-menu-item-radius, var(--ui-radius-md));
   color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-md);
-  font-weight: var(--ui-font-medium, 500);
+  font-size: var(--ui-menu-item-font-size, var(--ui-font-size-md));
+  font-weight: var(--ui-font-medium);
   cursor: pointer;
   outline: none;
   transition:
@@ -46,7 +47,7 @@ withDefaults(
 }
 
 [data-component~="ui-menu-item"]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
-  background: var(--ui-surface-subtle);
+  background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
 
 [data-component~="ui-menu-item"][aria-disabled="true"] {

package/vue/UiPopover.vue

@@ -183,9 +183,9 @@ onBeforeUnmount(() => {
   box-sizing: border-box;
   max-inline-size: min(
     20rem,
-    calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2)
+    calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
   );
-  max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+  max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
   overflow: visible;
   padding: 0;
   border: 0;
@@ -203,7 +203,7 @@ onBeforeUnmount(() => {
   padding: var(--ui-space-3);
   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));
 }