@threadlabs/looma 0.5.2 → 0.6.0-rc.1

package/theme-high-contrast.css

@@ -2,46 +2,42 @@
   @media (prefers-contrast: more) {
     :root:not([data-contrast]) {
       color-scheme: light;
-      --ui-surface-canvas: #ffffff;
-      --ui-surface-default: #ffffff;
-      --ui-surface-muted: #f8f8f6;
-      --ui-surface-subtle: #f0f0ec;
-      --ui-surface-elevated: #ffffff;
-      --ui-text-primary: #000000;
+      --ui-surface: #ffffff;
+      --ui-surface-raised: #ffffff;
+      --ui-surface-sunken: #f0f0ec;
+      --ui-text: #000000;
       --ui-text-secondary: #111111;
       --ui-text-muted: #222222;
-      --ui-border-default: #000000;
+      --ui-border: #000000;
       --ui-border-strong: #000000;
+      --ui-control-border: #000000;
       --ui-focus-ring: #0000ff;
-      --ui-accent-solid: #0000cc;
+      --ui-accent: #0000cc;
       --ui-accent-hover: #000080;
       --ui-accent-active: #000066;
-      --ui-accent-soft: #e6e6ff;
-      --ui-danger-solid: #8b0000;
+      --ui-accent-subtle: #e6e6ff;
+      --ui-danger: #8b0000;
       --ui-danger-hover: #5c0000;
-      --ui-danger-soft: #fff0f0;
     }
   }
 
   [data-contrast="high"] {
     color-scheme: light;
-    --ui-surface-canvas: #ffffff;
-    --ui-surface-default: #ffffff;
-    --ui-surface-muted: #f8f8f6;
-    --ui-surface-subtle: #f0f0ec;
-    --ui-surface-elevated: #ffffff;
-    --ui-text-primary: #000000;
+    --ui-surface: #ffffff;
+    --ui-surface-raised: #ffffff;
+    --ui-surface-sunken: #f0f0ec;
+    --ui-text: #000000;
     --ui-text-secondary: #111111;
     --ui-text-muted: #222222;
-    --ui-border-default: #000000;
+    --ui-border: #000000;
     --ui-border-strong: #000000;
+    --ui-control-border: #000000;
     --ui-focus-ring: #0000ff;
-    --ui-accent-solid: #0000cc;
+    --ui-accent: #0000cc;
     --ui-accent-hover: #000080;
     --ui-accent-active: #000066;
-    --ui-accent-soft: #e6e6ff;
-    --ui-danger-solid: #8b0000;
+    --ui-accent-subtle: #e6e6ff;
+    --ui-danger: #8b0000;
     --ui-danger-hover: #5c0000;
-    --ui-danger-soft: #fff0f0;
   }
 }

package/theme-light.css

@@ -2,58 +2,32 @@
   :root:not([data-theme]),
   [data-theme="light"] {
     color-scheme: light;
-    --ui-surface-canvas: #ffffff;
-    --ui-surface-default: #ffffff;
-    --ui-surface-muted: #f8f8f6;
-    --ui-surface-subtle: #f0f0ec;
-    --ui-surface-elevated: #ffffff;
+    --ui-surface: #ffffff;
+    --ui-surface-raised: #ffffff;
+    --ui-surface-sunken: #f0f0ec;
 
-    --ui-text-primary: #1a1a1a;
+    --ui-text: #1a1a1a;
     --ui-text-secondary: #5c5c5c;
     --ui-text-muted: #9b9b9b;
-    --ui-text-on-accent: #ffffff;
+    --ui-on-accent: #ffffff;
+    --ui-on-danger: #ffffff;
 
-    --ui-border-subtle: #ecece8;
-    --ui-border-default: #e4e4e0;
+    --ui-border: #e4e4e0;
     --ui-border-strong: #c8c8c4;
     --ui-focus-ring: #5b55d6;
-
-    /* Form controls need a visible 3:1 boundary and 4.5:1 placeholder text;
-       general dividers intentionally remain quieter. */
-    --ui-control-surface: #ffffff;
-    --ui-control-surface-disabled: #f0f0ec;
+    /* A control needs a visible 3:1 boundary; general dividers stay quieter. */
     --ui-control-border: #858580;
-    --ui-control-border-hover: #5c5c58;
-    --ui-control-placeholder: #62625e;
 
-    --ui-accent-solid: #5b55d6;
+    --ui-accent: #5b55d6;
     --ui-accent-hover: #4b45bd;
     --ui-accent-active: #3e399e;
-    --ui-accent-soft: #efeffc;
+    --ui-accent-subtle: #efeffc;
 
-    --ui-danger-solid: #b4233f;
+    --ui-danger: #b4233f;
     --ui-danger-hover: #941d35;
-    --ui-danger-soft: #fceef1;
-    --ui-success-solid: #007a33;
-    --ui-success-soft: #edf7f1;
-    --ui-warning-solid: #cc8800;
-    --ui-warning-soft: #fdf7e6;
-    --ui-info-solid: #0066cc;
-    --ui-info-soft: #e8f0fb;
-    --ui-accent-strong-surface: #5b55d6;
-    --ui-accent-on-strong: #ffffff;
-    --ui-accent-subtle-text: #3e399e;
-    --ui-danger-strong-surface: #b4233f;
-    --ui-danger-on-strong: #ffffff;
-    --ui-danger-subtle-text: #941d35;
-    --ui-success-strong-surface: #007a33;
-    --ui-success-on-strong: #ffffff;
-    --ui-success-subtle-text: #006629;
-    --ui-warning-strong-surface: #b45309;
-    --ui-warning-on-strong: #ffffff;
-    --ui-warning-subtle-text: #704800;
-    --ui-info-strong-surface: #0066cc;
-    --ui-info-on-strong: #ffffff;
-    --ui-info-subtle-text: #0058b0;
+    --ui-success: #007a33;
+    /* Deep amber, so a solid warning surface carries white text like the other tones (5:1). */
+    --ui-warning: #b45309;
+    --ui-info: #0066cc;
   }
 }

package/tokens.css

@@ -1,6 +1,39 @@
 @layer tokens {
+  /* The theme contract.
+     These are the values a product sets to theme Looma. Everything else in this file is derived
+     from them, so a theme that sets only these still looks coherent. A component reads a derived
+     value or its own `--ui-<component>-*` token; it never needs the product to set either. */
   :root {
-    --ui-font-stack-system:
+    /* Colour: intent and neutrals. */
+    --ui-accent: #5b55d6;
+    --ui-accent-hover: #4b45bd;
+    --ui-accent-active: #3e399e;
+    --ui-accent-subtle: #efeffc;
+    --ui-on-accent: #ffffff;
+    --ui-danger: #b4233f;
+    --ui-danger-hover: #941d35;
+    --ui-on-danger: #ffffff;
+    --ui-success: #007a33;
+    --ui-warning: #b45309;
+    --ui-info: #0066cc;
+    --ui-surface: #ffffff;
+    --ui-surface-raised: #ffffff;
+    --ui-surface-sunken: #f0f0ec;
+    /* The middle neutral step. It defaults to a mix of the two either side, but a palette with its
+       own value for it sets this rather than accepting the mix. */
+    --ui-surface-muted: color-mix(in srgb, var(--ui-surface-sunken) 50%, var(--ui-surface));
+    --ui-text: #1a1a1a;
+    --ui-text-secondary: #5c5c5c;
+    --ui-text-muted: #9b9b9b;
+    --ui-border: #e4e4e0;
+    --ui-border-strong: #c8c8c4;
+
+    /* Focus. */
+    --ui-focus-ring: #5b55d6;
+    --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
+
+    /* Type. */
+    --ui-font-sans:
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -11,246 +44,161 @@
       sans-serif,
       "Apple Color Emoji",
       "Segoe UI Emoji";
-    --ui-font-stack-neo-grotesque:
-      Inter,
-      Roboto,
-      "Helvetica Neue",
-      "Arial Nova",
-      "Nimbus Sans",
-      Arial,
-      sans-serif;
-    --ui-font-stack-humanist:
-      Seravek,
-      "Gill Sans Nova",
-      Ubuntu,
-      Calibri,
-      "DejaVu Sans",
-      source-sans-pro,
-      sans-serif;
-    --ui-font-stack-rounded:
-      ui-rounded,
-      "Hiragino Maru Gothic ProN",
-      Quicksand,
-      Comfortaa,
-      Manjari,
-      "Arial Rounded MT",
-      "Arial Rounded MT Bold",
-      Calibri,
-      source-sans-pro,
-      sans-serif;
-    --ui-font-family-sans: var(--ui-font-stack-system);
-    /* Quiet metadata scale for compact, non-interactive component labels. */
-    --ui-font-size-2xs: 0.6875rem;
-    --ui-font-size-xs: 0.75rem;
+    --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    --ui-font-size: 1rem;
     --ui-font-size-sm: 0.875rem;
-    /* Dense interactive text: legible at 15px without body-copy spacing. */
-    --ui-font-size-ui: 0.9375rem;
-    --ui-font-size-md: 1rem;
-    --ui-font-size-lg: 1.125rem;
-    --ui-font-size-xl: 1.25rem;
-    --ui-font-size-2xl: 1.5rem;
-    --ui-line-height-tight: 1.2;
-    --ui-line-height-md: 1.4;
-    --ui-line-height-relaxed: 1.6;
-
-    --ui-font-normal: 400;
     --ui-font-medium: 500;
-    --ui-font-semibold: 600;
-    --ui-font-bold: 700;
+    --ui-line-height: 1.4;
 
-    --ui-space-0-5: 0.125rem;
+    /* Space: the steps components lay out with. */
     --ui-space-1: 0.25rem;
     --ui-space-2: 0.5rem;
     --ui-space-3: 0.75rem;
     --ui-space-4: 1rem;
-    --ui-space-5: 1.5rem;
-    --ui-space-6: 2rem;
-    --ui-space-7: 2.5rem;
-    --ui-space-8: 3rem;
 
-    --ui-radius-1: 0.25rem;
-    --ui-radius-2: 0.5rem;
-    --ui-radius-3: 0.75rem;
-    --ui-radius-4: 1rem;
-    --ui-radius-dialog: 1rem;
+    /* Radius. */
+    --ui-radius-sm: 0.25rem;
+    --ui-radius-md: 0.5rem;
+    /* Derived from --ui-radius-md by default, in the contract because a product that rounds large
+       surfaces differently needs to pin it. */
+    --ui-radius-lg: calc(var(--ui-radius-md) * 1.5);
     --ui-radius-round: 999px;
 
-    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    /* Elevation: a resting shadow and a floating one. */
     --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-    --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
     --ui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
-    --ui-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
-    --ui-shadow-dialog: var(--ui-shadow-xl);
-
-    /* Semantic elevation: every floating surface uses one of these so overlays read consistently. */
-    --ui-elevation-tooltip: var(--ui-shadow-md);
-    --ui-elevation-overlay: var(--ui-shadow-lg);
-    --ui-elevation-dialog: var(--ui-shadow-xl);
-    --ui-overlay-backdrop: rgba(0, 0, 0, 0.4);
 
+    /* Motion. */
     --ui-motion-fast: 120ms;
-    --ui-motion-base: 180ms;
     --ui-motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
-    /* Fast start, gentle settle: for reveals that should feel immediate (expanding panels). */
-    --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
-    /* Anticipatory interaction: guide → near → direct → active. */
-    --ui-affordance-guide-size: 0.25rem;
-    --ui-affordance-guide-opacity: 0.42;
-    --ui-affordance-guide-color: var(--ui-border-strong);
-    --ui-affordance-near-color: var(--ui-text-secondary);
-    --ui-affordance-direct-color: var(--ui-accent-solid);
-    --ui-affordance-active-color: var(--ui-accent-active);
-    --ui-affordance-motion: var(--ui-motion-fast);
-
-    --ui-surface-canvas: #ffffff;
-    --ui-surface-default: #ffffff;
-    --ui-surface-muted: #f8f8f6;
-    --ui-surface-subtle: #f0f0ec;
-    --ui-surface-elevated: #ffffff;
-
-    --ui-text-primary: #1a1a1a;
-    --ui-text-secondary: #5c5c5c;
-    --ui-text-muted: #9b9b9b;
-    --ui-text-on-accent: #ffffff;
-
-    --ui-border-subtle: #ecece8;
-    --ui-border-default: #e4e4e0;
-    --ui-border-strong: #c8c8c4;
-    --ui-focus-ring: #5b55d6;
+    /* Controls: the contract every button and field shares. */
+    --ui-control-size: 2.5rem;
+    --ui-control-size-sm: 2rem;
+    /* WCAG 2.5.5 counts CSS pixels, so this one stays in px: a smaller root font must not shrink
+       a touch target below 44. */
+    --ui-control-min-block-size: 44px;
+    --ui-control-border: #858580;
+  }
 
-    --ui-accent-solid: #5b55d6;
-    --ui-accent-hover: #4b45bd;
-    --ui-accent-active: #3e399e;
-    --ui-accent-soft: #efeffc;
+  /* Derived values.
+     Each is computed from the contract above. A theme may set one to diverge deliberately, but
+     never has to: these exist so components share one vocabulary, not to be configured. */
+  :root,
+  :where([data-theme], [data-contrast]) {
+    /* Type scale, from the base size. */
+    --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
+    --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
+    /* Dense interactive text: legible without body-copy spacing. */
+    --ui-font-size-ui: calc(var(--ui-font-size) * 0.9375);
+    --ui-font-size-md: var(--ui-font-size);
+    --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
+    --ui-line-height-tight: 1.2;
+    --ui-line-height-md: var(--ui-line-height);
+    --ui-font-normal: 400;
+    --ui-font-semibold: 600;
+    --ui-font-bold: 700;
+    --ui-font-family-sans: var(--ui-font-sans);
+    --ui-font-family-mono: var(--ui-font-mono);
 
-    --ui-danger-solid: #b4233f;
-    --ui-danger-hover: #941d35;
-    --ui-danger-soft: #fceef1;
-    --ui-success-solid: #007a33;
-    --ui-success-soft: #edf7f1;
-    --ui-warning-solid: #cc8800;
-    --ui-warning-soft: #fdf7e6;
-    --ui-info-solid: #0066cc;
-    --ui-info-soft: #e8f0fb;
+    /* Space steps either side of the contract's four. */
+    --ui-space-0-5: calc(var(--ui-space-1) * 0.5);
+    --ui-space-5: calc(var(--ui-space-4) * 1.5);
+    --ui-space-6: calc(var(--ui-space-4) * 2);
 
-    /* Intent colors split readable foreground use from filled-surface use. */
-    --ui-accent-strong-surface: #5b55d6;
-    --ui-accent-on-strong: #ffffff;
-    --ui-accent-subtle-text: #3e399e;
-    --ui-danger-strong-surface: #b4233f;
-    --ui-danger-on-strong: #ffffff;
-    --ui-danger-subtle-text: #941d35;
-    --ui-success-strong-surface: #007a33;
-    --ui-success-on-strong: #ffffff;
-    --ui-success-subtle-text: #006629;
-    /* Deeper amber so the solid warning badge carries white text like the other tones (5:1). */
-    --ui-warning-strong-surface: #b45309;
-    --ui-warning-on-strong: #ffffff;
-    --ui-warning-subtle-text: #704800;
-    --ui-info-strong-surface: #0066cc;
-    --ui-info-on-strong: #ffffff;
-    --ui-info-subtle-text: #0058b0;
+    --ui-radius-dialog: calc(var(--ui-radius-md) * 2);
 
-    /* Depth and focus. Fields read as a shallow well; buttons as gently raised. Focus is a soft halo
-       that transitions in (no hard outline ring). */
+    /* Elevation: one resting shadow, one floating, and the overlays in between. */
+    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --ui-shadow-md: var(--ui-shadow-sm);
+    --ui-shadow-xl: var(--ui-shadow-lg);
+    --ui-elevation-tooltip: var(--ui-shadow-sm);
+    --ui-elevation-overlay: var(--ui-shadow-lg);
+    --ui-elevation-dialog: var(--ui-shadow-lg);
+    --ui-overlay-backdrop: rgba(0, 0, 0, 0.4);
     --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.07), inset 0 1px 0 rgb(0 0 0 / 0.02);
-    --ui-control-focus-halo-shadow: 0 0 0 3px var(--ui-control-focus-halo, color-mix(in srgb, var(--ui-focus-ring) 24%, transparent));
     --ui-raised: 0 1px 2px rgb(0 0 0 / 0.07), 0 1px 1px rgb(0 0 0 / 0.04);
     --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
-    --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
-
-    /* Icon sizes, used by icon buttons and field affordances. */
-    --ui-icon-size-sm: 1rem;
-    --ui-icon-size-md: 1.25rem;
-    --ui-icon-size-lg: 1.5rem;
 
-    /* One height scale for every form control and button size. */
-    --ui-control-size-sm: 2rem;
-    --ui-control-size-md: 2.5rem;
-    --ui-control-size-lg: 3rem;
-    /* Touch-target floor applied under coarse pointers. */
-    --ui-control-min-block-size: 2.75rem;
+    --ui-motion-base: calc(var(--ui-motion-fast) * 1.5);
+    /* Fast start, gentle settle: for reveals that should feel immediate. */
+    --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
-    /* Compatibility aliases used by the editor's public styling surface.
-       Each alias resolves through the canonical semantic token so an app only
-       needs to override the canonical Looma theme contract. */
-    --ui-surface: var(--ui-surface-elevated);
+    /* Surfaces and text, in the names components use. */
+    --ui-surface-canvas: var(--ui-surface);
+    --ui-surface-default: var(--ui-surface);
+    --ui-surface-elevated: var(--ui-surface-raised);
+    --ui-surface-subtle: var(--ui-surface-sunken);
     --ui-surface-hover: var(--ui-surface-muted);
-    --ui-text: var(--ui-text-primary);
-    --ui-border: var(--ui-border-default);
-    --ui-accent: var(--ui-accent-solid);
-    --ui-accent-subtle: var(--ui-accent-soft);
-    --ui-accent-contrast: var(--ui-text-on-accent);
-    --ui-danger: var(--ui-danger-solid);
-    --ui-radius-sm: var(--ui-radius-1);
-    --ui-radius-md: var(--ui-radius-2);
-    --ui-radius-lg: var(--ui-radius-3);
-    --ui-radius-xl: var(--ui-radius-4);
-    --ui-text-sm: var(--ui-font-size-sm);
-  }
-
-  /* Custom-property references resolve where declared, before inheritance.
-     Rebind semantic roles at theme boundaries to use the local palette. */
-  :root,
-  :where([data-theme], [data-contrast]) {
-    /* Semantic interaction roles. Products can theme intent without coupling
-       every component to a single brand accent. */
-    --ui-action-primary-surface: var(--ui-accent-solid);
+    --ui-text-primary: var(--ui-text);
+    --ui-text-on-accent: var(--ui-on-accent);
+    --ui-border-subtle: color-mix(in srgb, var(--ui-border) 55%, var(--ui-surface));
+    --ui-border-default: var(--ui-border);
+
+    /* Intent tones: a solid surface, its foreground, and a soft tint of each. */
+    --ui-accent-solid: var(--ui-accent);
+    --ui-accent-soft: var(--ui-accent-subtle);
+    --ui-accent-contrast: var(--ui-on-accent);
+    --ui-accent-strong-surface: var(--ui-accent);
+    --ui-accent-on-strong: var(--ui-on-accent);
+    --ui-accent-subtle-text: var(--ui-accent-active);
+    --ui-danger-solid: var(--ui-danger);
+    --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-surface));
+    --ui-danger-strong-surface: var(--ui-danger);
+    --ui-danger-on-strong: var(--ui-on-danger);
+    --ui-danger-subtle-text: var(--ui-danger-hover);
+    --ui-success-solid: var(--ui-success);
+    --ui-success-hover: color-mix(in srgb, var(--ui-success) 85%, var(--ui-text));
+    --ui-success-soft: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface));
+    --ui-success-strong-surface: var(--ui-success);
+    --ui-success-on-strong: var(--ui-on-accent);
+    --ui-success-subtle-text: color-mix(in srgb, var(--ui-success) 85%, var(--ui-text));
+    --ui-warning-solid: var(--ui-warning);
+    --ui-warning-soft: color-mix(in srgb, var(--ui-warning) 8%, var(--ui-surface));
+    --ui-warning-strong-surface: var(--ui-warning);
+    --ui-warning-on-strong: var(--ui-on-accent);
+    --ui-warning-subtle-text: color-mix(in srgb, var(--ui-warning) 85%, var(--ui-text));
+    --ui-info-solid: var(--ui-info);
+    --ui-info-soft: color-mix(in srgb, var(--ui-info) 8%, var(--ui-surface));
+    --ui-info-strong-surface: var(--ui-info);
+    --ui-info-on-strong: var(--ui-on-accent);
+    --ui-info-subtle-text: color-mix(in srgb, var(--ui-info) 85%, var(--ui-text));
+
+    /* Interaction roles: what a control paints, whatever its intent. */
+    --ui-action-primary-surface: var(--ui-accent);
     --ui-action-primary-surface-hover: var(--ui-accent-hover);
     --ui-action-primary-surface-active: var(--ui-accent-active);
-    --ui-action-primary-text: var(--ui-text-on-accent);
-    --ui-action-secondary-surface: var(--ui-surface-default);
+    --ui-action-primary-text: var(--ui-on-accent);
     --ui-action-secondary-surface-hover: var(--ui-surface-muted);
-    --ui-action-secondary-text: var(--ui-text-primary);
-    --ui-control-surface: var(--ui-surface-default);
+    --ui-action-secondary-text: var(--ui-text);
+    --ui-control-surface: var(--ui-surface);
     --ui-control-surface-disabled: var(--ui-surface-muted);
-    --ui-control-border: var(--ui-border-default);
     --ui-control-border-hover: var(--ui-border-strong);
+    --ui-control-placeholder: var(--ui-text-secondary);
     --ui-control-focus: var(--ui-focus-ring);
-    /* Derived from the ring, not the near-white accent tint, so the halo shows on any surface. */
+    /* Derived from the ring, not a near-white tint, so the halo shows on any surface. */
     --ui-control-focus-halo: color-mix(in srgb, var(--ui-focus-ring) 24%, transparent);
-  }
-
-  @supports (color: oklch(0.5 0.1 240)) {
-    :root {
-      --ui-surface-canvas: oklch(0.99 0.01 250);
-      --ui-surface-default: oklch(1 0 0);
-      --ui-surface-muted: oklch(0.97 0.01 250);
-      --ui-surface-subtle: oklch(0.95 0.01 250);
-      --ui-surface-elevated: oklch(1 0 0);
+    --ui-control-focus-halo-shadow: 0 0 0 3px var(--ui-control-focus-halo);
+    --ui-control-size-md: var(--ui-control-size);
+    --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
-      --ui-text-primary: oklch(0.23 0.02 260);
-      --ui-text-secondary: oklch(0.36 0.02 260);
-      --ui-text-muted: oklch(0.5 0.02 260);
-      --ui-text-on-accent: oklch(0.99 0.01 250);
-
-      --ui-border-subtle: oklch(0.9 0.01 250);
-      --ui-border-default: oklch(0.84 0.01 250);
-      --ui-border-strong: oklch(0.7 0.02 250);
-      --ui-focus-ring: oklch(0.57 0.17 285);
-
-      --ui-accent-solid: oklch(0.57 0.17 285);
-      --ui-accent-hover: oklch(0.52 0.18 285);
-      --ui-accent-active: oklch(0.46 0.16 285);
-      --ui-accent-soft: oklch(0.96 0.025 285);
+    /* Icon sizes, used by icon buttons and field affordances. */
+    --ui-icon-size-sm: var(--ui-font-size);
+    --ui-icon-size-md: calc(var(--ui-font-size) * 1.25);
+    --ui-icon-size-lg: calc(var(--ui-font-size) * 1.5);
 
-      --ui-danger-solid: oklch(0.5 0.17 18);
-      --ui-danger-hover: oklch(0.44 0.16 18);
-      --ui-danger-soft: oklch(0.97 0.025 18);
-      --ui-success-solid: oklch(0.5 0.15 145);
-      --ui-success-soft: oklch(0.96 0.03 145);
-      --ui-warning-solid: oklch(0.7 0.15 85);
-      --ui-warning-soft: oklch(0.97 0.04 85);
-      --ui-info-solid: oklch(0.62 0.18 250);
-      --ui-info-soft: oklch(0.95 0.03 250);
-    }
+    /* Anticipatory interaction: guide → near → direct. */
+    --ui-affordance-guide-size: var(--ui-space-1);
+    --ui-affordance-guide-opacity: 0.42;
+    --ui-affordance-guide-color: var(--ui-border-strong);
+    --ui-affordance-near-color: var(--ui-text-secondary);
+    --ui-affordance-direct-color: var(--ui-accent);
+    --ui-affordance-motion: var(--ui-motion-fast);
   }
 
   @media (prefers-reduced-motion: reduce) {
     :root {
       --ui-motion-fast: 0ms;
-      --ui-motion-base: 0ms;
     }
   }
 }

package/vanilla/UiDisclosure.d.ts

@@ -8,6 +8,7 @@ export interface UiDisclosureElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiDisclosureEventMap>(type: K, listener: (this: UiDisclosureElement, event: UiDisclosureEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiDisclosureProps {
+  density?: "comfortable" | "compact" | null;
   disabled?: boolean | null;
   open?: boolean | null;
   summary?: string | null;

package/vanilla/UiDisclosure.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-disclosure/ui-disclosure.js";
 import "../styles/ui-disclosure.css";
 
-const definition = {...{"contract":{"tag":"ui-disclosure","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"trigger"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"inert","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"trigger"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"inert","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiDisclosure(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiMenu.d.ts

@@ -9,6 +9,7 @@ export interface UiMenuElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiMenuEventMap>(type: K, listener: (this: UiMenuElement, event: UiMenuEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiMenuProps {
+  density?: "comfortable" | "compact" | null;
   for?: string | null;
   open?: boolean | null;
   placement?: string | null;

package/vanilla/UiMenu.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-menu/ui-menu.js";
 import "../styles/ui-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-menu","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-menu","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiMenu(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiTabs.d.ts

@@ -7,6 +7,7 @@ export interface UiTabsElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiTabsEventMap>(type: K, listener: (this: UiTabsElement, event: UiTabsEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiTabsProps {
+  density?: "comfortable" | "compact" | null;
   label?: string | null;
   orientation?: "horizontal" | "vertical" | null;
   stretch?: boolean | null;