@threadlabs/looma 0.5.2 → 0.6.0-rc.2

package/styles/ui-editor-table-toolbar.css

@@ -18,13 +18,13 @@
 
     .looma-editor__mobile-toolbar-shell :scope button.active,
     .looma-editor__mobile-toolbar-shell :scope 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 :scope .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;
@@ -32,11 +32,11 @@
     :scope {
       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);
     }
@@ -51,7 +51,7 @@
     .sep {
       width: 1px;
       align-self: stretch;
-      background: var(--ui-border, #e5e7eb);
+      background: var(--ui-border);
     }
 
     .overflow {
@@ -62,31 +62,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;
     }
 
     :scope button:hover {
-      background: var(--ui-surface-hover, #f3f4f6);
+      background: var(--ui-surface-hover);
     }
 
     :scope 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 {
@@ -95,11 +95,11 @@
 
     :scope .more {
       border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
+      border-radius: var(--ui-radius-sm);
     }
 
     :scope button.danger {
-      color: var(--ui-danger, #dc2626);
+      color: var(--ui-danger);
     }
 
     :scope {
@@ -119,13 +119,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;
@@ -134,18 +134,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 {
@@ -162,7 +162,7 @@
     }
 
     :scope .swatch-button {
-      gap: var(--ui-space-1, 4px);
+      gap: var(--ui-space-1);
       justify-content: flex-start;
     }
 
@@ -170,19 +170,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));
     }
 
     :scope[hidden] {

package/styles/ui-editor-toolbar.css

@@ -13,8 +13,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));
     }
 
     :scope::-webkit-scrollbar {
@@ -29,9 +29,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);
     }
@@ -44,7 +44,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));
       }
@@ -53,8 +53,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)));
       }
     }
@@ -99,7 +99,7 @@
     :where([data-slotted], [data-slotted] *):is(.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);
     }

package/styles/ui-floating-action-button.css

@@ -2,13 +2,13 @@
 @scope ([data-component~="ui-floating-action-button"]) to ([data-component], [data-slotted]) {
 :scope {
       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);
     }
@@ -22,33 +22,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);
     }
 
     :scope: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);
     }
 
     :scope:active:enabled {
-      transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+      transform: scale(0.94);
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 
@@ -70,8 +64,8 @@
 }
 @scope ([data-component~="ui-floating-action-button"]) to ([data-component]) {
 :where([data-slotted], [data-slotted] *):is(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/styles/ui-grid.css

@@ -1,7 +1,7 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-grid"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_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));
@@ -12,19 +12,19 @@
     }
 
     :scope[data-ui-grid-state~="gap=xs"] {
-      --_grid-gap: var(--ui-space-2, 0.5rem);
+      --_grid-gap: var(--ui-space-2);
     }
     :scope[data-ui-grid-state~="gap=s"] {
-      --_grid-gap: var(--ui-space-3, 0.75rem);
+      --_grid-gap: var(--ui-space-3);
     }
     :scope[data-ui-grid-state~="gap=m"] {
-      --_grid-gap: var(--ui-space-4, 1rem);
+      --_grid-gap: var(--ui-space-4);
     }
     :scope[data-ui-grid-state~="gap=l"] {
-      --_grid-gap: var(--ui-space-5, 1.5rem);
+      --_grid-gap: var(--ui-space-5);
     }
     :scope[data-ui-grid-state~="gap=xl"] {
-      --_grid-gap: var(--ui-space-6, 2rem);
+      --_grid-gap: var(--ui-space-6);
     }
     :scope[data-ui-grid-state~="min=md"] {
       --_grid-min: 16rem;

package/styles/ui-icon-button.css

@@ -14,11 +14,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;
@@ -41,16 +41,18 @@
     }
 
     :scope {
+      /* 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;
@@ -81,8 +83,8 @@
         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%);
       }
     }
@@ -95,38 +97,40 @@
       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%);
     }
 
     :scope[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));
     }
 
     :scope[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));
     }
 
     :scope[data-ui-icon-button-state~="round"] {
-      border-radius: var(--ui-radius-round, 999px);
+      border-radius: var(--ui-radius-round);
     }
 
     :scope[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));
     }
 
     :scope[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)
@@ -135,8 +139,8 @@
 
     :scope: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));
     }
 
     :scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled {
@@ -144,7 +148,7 @@
     }
 
     :scope[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));
     }
 
     :scope:active:enabled {
@@ -158,32 +162,33 @@
 
     /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
     :scope:disabled {
-      opacity: var(--ui-icon-button-disabled-opacity, 0.6);
-      color: var(--ui-icon-button-disabled-color, inherit);
+      opacity: var(--ui-icon-button-disabled-opacity, 1);
+      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
       cursor: not-allowed;
     }
 
     :scope[data-ui-icon-button-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)));
+      border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+      background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope[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)));
-      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-solid-color, var(--ui-text-on-accent)));
+      border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+      background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
     }
 
     :scope {
-      --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
+      --_icon-button-icon-default: var(--ui-icon-size-md);
     }
 
     :scope[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);
     }
 
     :scope[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);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-input.css

@@ -5,12 +5,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/styles/ui-menu-item.css

@@ -4,19 +4,19 @@
       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: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     :scope:is(:hover, :focus-visible):not([aria-disabled="true"]) {
-      background: var(--ui-surface-subtle);
+      background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
     }
 
     :scope[aria-disabled="true"] {

package/styles/ui-menu.css

@@ -1,12 +1,22 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
-:scope {
+/* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+    :scope[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;
+    }
+
+    :scope {
       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;
@@ -24,7 +34,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;
@@ -39,7 +49,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:
@@ -72,7 +82,9 @@
     }
 }
 @scope ([data-component~="ui-menu"]) to ([data-component]) {
-@starting-style {
+/* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+
+    @starting-style {
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-popover.css

@@ -4,9 +4,9 @@
       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;
@@ -24,7 +24,7 @@
       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));
     }
 

package/styles/ui-reel.css

@@ -1,7 +1,7 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-gap: var(--ui-space-4);
       --_reel-item-width: auto;
       display: flex;
       inline-size: 100%;
@@ -15,19 +15,19 @@
     }
 
     :scope[data-ui-reel-state~="gap=xs"] {
-      --_reel-gap: var(--ui-space-2, 0.5rem);
+      --_reel-gap: var(--ui-space-2);
     }
     :scope[data-ui-reel-state~="gap=s"] {
-      --_reel-gap: var(--ui-space-3, 0.75rem);
+      --_reel-gap: var(--ui-space-3);
     }
     :scope[data-ui-reel-state~="gap=m"] {
-      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-gap: var(--ui-space-4);
     }
     :scope[data-ui-reel-state~="gap=l"] {
-      --_reel-gap: var(--ui-space-5, 1.5rem);
+      --_reel-gap: var(--ui-space-5);
     }
     :scope[data-ui-reel-state~="gap=xl"] {
-      --_reel-gap: var(--ui-space-6, 2rem);
+      --_reel-gap: var(--ui-space-6);
     }
     :scope[data-ui-reel-state~="itemWidth=sm"] {
       --_reel-item-width: 12rem;