@threadlabs/looma 0.5.1 → 0.6.0-rc.1

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-table-toolbar"]) to ([data-component], [data-slotted]) {
 .looma-editor__mobile-toolbar-shell :scope {
       min-width: max-content;
@@ -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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: sticky;
@@ -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

@@ -1,14 +1,14 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @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-form-field.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
 :scope {
       display: grid;
@@ -8,25 +8,39 @@
       color: var(--ui-text-primary);
     }
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
-      display: none;
+    /* 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;
     }
-}
-@scope ([data-component~="ui-form-field"]) to ([data-component]) {
-:where([data-slotted], [data-slotted] *):is([slot="label"]) {
+
+    .label {
       color: var(--ui-text-secondary);
       font-size: 0.95rem;
     }
 
-    :where([data-slotted], [data-slotted] *):is([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);
     }
 
-    :where([data-slotted], [data-slotted] *):is([slot="error"]),
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-form-field"]) to ([data-component]) {
+/* 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. */
+
+    .help > :where([data-slotted], [data-slotted] *):is(*) {
+      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+    }
+
+    .error,
     :where([data-slotted], [data-slotted] *):is([role="alert"]) {
       color: var(--ui-accent-active);
       font-size: 0.875rem;

package/styles/ui-grid.css

@@ -1,7 +1,7 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* 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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;
@@ -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;
@@ -70,33 +72,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) {
+      :scope {
+        position: relative;
+      }
+
+      :scope::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"] :scope {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :scope::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%);
+    }
+
     :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)
@@ -105,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 {
@@ -114,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 {
@@ -129,31 +163,31 @@
     /* 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);
+      color: var(--ui-icon-button-disabled-text, inherit);
       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)));
+      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)));
     }
 
     :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)));
+      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)));
     }
 
     :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. */
@@ -171,6 +205,11 @@
     @media (hover: none), (pointer: coarse) {
     }
 
+    /* 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) {
+    }
+
     /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
 
     :where([data-slotted], [data-slotted] *):is(svg) {

package/styles/ui-icon.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-input.css

@@ -1,16 +1,16 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;
       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

@@ -1,22 +1,22 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-menu-item"]) to ([data-component], [data-slotted]) {
 :scope {
       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"] {