astralkit 0.5.0 → 0.7.0

package/astralkit-utilities.css

@@ -196,12 +196,41 @@ html {
 .ak-switch-track-icon:last-child { right: 10px; }
 /* Off state: left icon hidden (behind knob), right icon visible */
 .ak-switch-with-icons .ak-switch-track-icon:first-child { opacity: 0; }
-.ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-on-primary); opacity: 0.7; }
+.ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-inverse-on-surface, #ffffff); opacity: 0.7; }
 /* On state: left icon visible, right icon hidden (behind knob) */
 .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:first-child { color: var(--color-ak-on-primary); opacity: 0.7; }
 .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:last-child { opacity: 0; }
+/* Off-state surfaces: ink track from the inverse pair — palettes tint it, and
+   it stays softer than the checked primary track — with the knob swapping the
+   same pair so the state icon is legible on every palette in both modes. */
+.ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
+  background: color-mix(in srgb, var(--color-ak-inverse-surface, #171717) 84%, var(--color-ak-surface, #ffffff));
+}
+.ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
+  background: var(--color-ak-inverse-on-surface, #ffffff);
+}
 /* Knob icon */
 .ak-switch-knob-icon { font-size: 14px; color: var(--color-ak-text); line-height: 1; }
+.ak-switch-with-icons .ak-switch-knob-icon { color: var(--color-ak-inverse-surface, #171717); }
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-knob-icon { color: var(--color-ak-primary); }
+/* Dark mode: the page is already ink — the off track returns to the neutral
+   border tone and the inverse pair flips (inverse-surface reads light). */
+.dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-track,
+[data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
+  background: var(--color-ak-border-strong);
+}
+.dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob,
+[data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
+  background: var(--color-ak-inverse-surface, var(--color-ak-text, #ffffff));
+}
+.dark .ak-switch-with-icons .ak-switch-track-icon:last-child,
+[data-theme="dark"] .ak-switch-with-icons .ak-switch-track-icon:last-child {
+  color: var(--color-ak-text, #ffffff);
+}
+.dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon,
+[data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon {
+  color: var(--color-ak-inverse-on-surface, var(--color-ak-bg, #171717));
+}
 
 /* Icon switch — lg (88×44) */
 .ak-switch-icons-lg .ak-switch-track { width: 88px; height: 44px; }
@@ -524,8 +553,258 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
   cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important;
 }
 
+/* ── Theme Role Utilities ── */
+.ak-theme-control {
+  background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  color: var(--color-ak-on-surface, var(--color-ak-text));
+}
+.ak-theme-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
+  background: var(--color-ak-surface-container-low, var(--color-ak-hover));
+  border-color: var(--color-ak-outline, var(--color-ak-border));
+}
+.ak-theme-control-selected {
+  background: var(--color-ak-secondary, var(--color-ak-primary));
+  border-color: var(--color-ak-secondary, var(--color-ak-primary));
+  color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.ak-theme-control-selected-soft {
+  background: var(--color-ak-secondary-container, var(--color-ak-primary-subtle));
+  border-color: var(--color-ak-secondary-outline, var(--color-ak-secondary, var(--color-ak-primary)));
+  color: var(--color-ak-on-secondary-container, var(--color-ak-text));
+}
+.ak-theme-control-selected-primary {
+  background: var(--color-ak-primary);
+  border-color: var(--color-ak-primary);
+  color: var(--color-ak-on-primary);
+}
+.ak-theme-control-selected-primary-soft {
+  background: var(--color-ak-primary-container, var(--color-ak-primary-subtle));
+  border-color: var(--color-ak-primary-outline, var(--color-ak-primary));
+  color: var(--color-ak-selection-ink, var(--color-ak-on-primary-container, var(--color-ak-text)));
+}
+.ak-theme-icon-well {
+  background: var(--color-ak-surface-container, var(--color-ak-surface-2));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
+}
+.ak-theme-icon-well-selected {
+  background: var(--color-ak-secondary, var(--color-ak-primary));
+  border-color: var(--color-ak-secondary, var(--color-ak-primary));
+  color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.ak-theme-icon-well-selected-primary {
+  background: var(--color-ak-primary-selection, var(--color-ak-primary));
+  border-color: var(--color-ak-primary-selection, var(--color-ak-primary));
+  color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary));
+}
+.ak-theme-badge {
+  background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
+}
+.ak-theme-badge-selected {
+  background: var(--color-ak-accent, var(--color-ak-primary));
+  border-color: var(--color-ak-accent, var(--color-ak-primary));
+  color: var(--color-ak-on-accent, var(--color-ak-on-primary));
+}
+.ak-theme-media-caption {
+  background: var(--color-ak-primary-container, var(--color-ak-secondary-container, var(--color-ak-surface-container-lowest, var(--color-ak-bg))));
+  border-color: color-mix(in srgb, var(--color-ak-primary, var(--color-ak-border)) 34%, transparent);
+  color: var(--color-ak-on-primary-container, var(--color-ak-on-secondary-container, var(--color-ak-on-surface, var(--color-ak-text))));
+}
+.ak-theme-cta-gradient {
+  background: var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active)));
+  background-size: 160% 160%;
+  border-color: transparent;
+  color: var(--color-ak-on-primary);
+  transition:
+    background-position var(--duration-ak-slow, 240ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
+    filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
+    transform var(--duration-ak-fast, 110ms) var(--ease-ak-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+.ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):hover {
+  background: var(--gradient-ak-primary-hover, var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active))));
+  background-position: 100% 50%;
+  filter: saturate(1.05);
+}
+.ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):active {
+  transform: translateY(1px) scale(0.99);
+}
+.ak-theme-switch-track {
+  background: var(--color-ak-surface-container-high, var(--color-ak-surface-2));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-surface-variant, var(--color-ak-text-secondary)) 6%, transparent);
+}
+.ak-theme-switch-track-selected {
+  background: var(--color-ak-secondary, var(--color-ak-primary));
+  border-color: var(--color-ak-secondary, var(--color-ak-primary));
+}
+.ak-theme-switch-track-selected-primary {
+  background: var(--color-ak-primary);
+  border-color: var(--color-ak-primary);
+}
+.ak-theme-switch-thumb {
+  background: var(--color-ak-bg);
+  box-shadow: var(--shadow-ak-xs);
+}
+.ak-theme-switch-track-selected .ak-theme-switch-thumb {
+  background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
+  background: var(--color-ak-on-primary);
+}
+.dark .ak-theme-switch-thumb,
+[data-theme="dark"] .ak-theme-switch-thumb,
+[data-ak-dark-panel] .ak-theme-switch-thumb {
+  background: var(--color-ak-text);
+}
+.dark .ak-theme-switch-track-selected .ak-theme-switch-thumb,
+[data-theme="dark"] .ak-theme-switch-track-selected .ak-theme-switch-thumb,
+[data-ak-dark-panel] .ak-theme-switch-track-selected .ak-theme-switch-thumb {
+  background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.dark .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
+[data-theme="dark"] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
+[data-ak-dark-panel] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
+  background: var(--color-ak-on-primary);
+}
+.ak-theme-logo-mark {
+  transition: filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)), opacity var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.dark .ak-theme-logo-mark,
+[data-theme="dark"] .ak-theme-logo-mark,
+[data-ak-dark-panel] .ak-theme-logo-mark {
+  filter: invert(1) brightness(1.08) contrast(0.96);
+}
+
+/* Dark premium material utilities.
+   These stay dormant in light mode and use the palette glow tokens in dark contexts. */
+.ak-dark-material:is([data-ak-dark-panel], [data-ak-dark-rail], [data-ak-dark-mobile]),
+.ak-dark-material:is(.dark *),
+.dark .ak-dark-material,
+[data-theme="dark"] .ak-dark-material,
+[data-ak-dark-panel] .ak-dark-material,
+[data-ak-dark-rail] .ak-dark-material,
+[data-ak-dark-mobile] .ak-dark-material {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 5%, transparent), transparent 42%),
+    radial-gradient(90% 64% at 50% 0%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 72%),
+    color-mix(in srgb, var(--color-ak-bg, #111) 90%, var(--color-ak-mesh-base, #050509) 10%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 18%, var(--color-ak-border, rgba(255,255,255,0.12)));
+  color: var(--color-ak-on-surface, var(--color-ak-text));
+}
+.ak-dark-control:is(.dark *),
+.dark .ak-dark-control,
+[data-theme="dark"] .ak-dark-control,
+[data-ak-dark-panel] .ak-dark-control,
+[data-ak-dark-rail] .ak-dark-control,
+[data-ak-dark-mobile] .ak-dark-control {
+  background-color: transparent;
+  border-color: transparent;
+}
+.ak-dark-outlined-control:is(.dark *),
+.dark .ak-dark-outlined-control,
+[data-theme="dark"] .ak-dark-outlined-control,
+[data-ak-dark-panel] .ak-dark-outlined-control,
+[data-ak-dark-rail] .ak-dark-outlined-control,
+[data-ak-dark-mobile] .ak-dark-outlined-control {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 3%, transparent), transparent 58%),
+    color-mix(in srgb, var(--color-ak-bg, #111) 86%, var(--color-ak-on-surface, #fff) 5%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 26%, var(--color-ak-border, rgba(255,255,255,0.12)));
+}
+.ak-dark-avatar-tile:is(.dark *),
+.dark .ak-dark-avatar-tile,
+[data-theme="dark"] .ak-dark-avatar-tile,
+[data-ak-dark-panel] .ak-dark-avatar-tile,
+[data-ak-dark-rail] .ak-dark-avatar-tile,
+[data-ak-dark-mobile] .ak-dark-avatar-tile {
+  background:
+    radial-gradient(circle at 35% 22%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 30%, transparent), transparent 62%),
+    color-mix(in srgb, var(--color-ak-primary-container, #31245a) 72%, var(--color-ak-bg, #111) 28%);
+  color: var(--color-ak-on-primary-container, var(--color-ak-on-surface, #fff));
+}
+.ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):is(:hover, [data-highlighted]),
+.ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled)[data-highlighted],
+.dark .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-theme="dark"] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-ak-dark-panel] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-ak-dark-rail] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-ak-dark-mobile] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 64%),
+    color-mix(in srgb, var(--color-ak-on-surface, #fff) 6%, transparent);
+  color: var(--color-ak-on-surface, var(--color-ak-text));
+}
+.ak-dark-control-selected:is(.dark *),
+.dark .ak-dark-control-selected,
+[data-theme="dark"] .ak-dark-control-selected,
+[data-ak-dark-panel] .ak-dark-control-selected,
+[data-ak-dark-rail] .ak-dark-control-selected,
+[data-ak-dark-mobile] .ak-dark-control-selected {
+  background:
+    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 22%, transparent), transparent 36%),
+    linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 52%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 64%, var(--color-ak-border, rgba(255,255,255,0.12)));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 46%, transparent),
+    inset 0 1px 0 color-mix(in srgb, var(--color-ak-neutral-0, #fff) 16%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 14%, transparent),
+    0 12px 28px -22px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 78%, transparent);
+  color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
+}
+.dark .ak-dark-control-selected.ak-selection-ink,
+[data-theme="dark"] .ak-dark-control-selected.ak-selection-ink,
+[data-ak-dark-panel] .ak-dark-control-selected.ak-selection-ink,
+[data-ak-dark-rail] .ak-dark-control-selected.ak-selection-ink,
+[data-ak-dark-mobile] .ak-dark-control-selected.ak-selection-ink,
+.dark .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-theme="dark"] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-ak-dark-panel] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-ak-dark-rail] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-ak-dark-mobile] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph) {
+  color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
+}
+.ak-dark-accent-tile:is(.dark *),
+.dark .ak-dark-accent-tile,
+[data-theme="dark"] .ak-dark-accent-tile,
+[data-ak-dark-panel] .ak-dark-accent-tile,
+[data-ak-dark-rail] .ak-dark-accent-tile,
+[data-ak-dark-mobile] .ak-dark-accent-tile {
+  background:
+    radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 20%, transparent), transparent 38%),
+    linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 50%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 62%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-primary, #fff) 16%, transparent),
+    0 10px 28px -18px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 90%, transparent);
+  color: var(--color-ak-on-primary, #fff);
+}
+.ak-dark-accent-tile:is(.dark *) :where(i, svg, .ph),
+.dark .ak-dark-accent-tile :where(i, svg, .ph),
+[data-theme="dark"] .ak-dark-accent-tile :where(i, svg, .ph),
+[data-ak-dark-panel] .ak-dark-accent-tile :where(i, svg, .ph),
+[data-ak-dark-rail] .ak-dark-accent-tile :where(i, svg, .ph),
+[data-ak-dark-mobile] .ak-dark-accent-tile :where(i, svg, .ph) {
+  color: var(--color-ak-on-primary, #fff);
+}
+.ak-dark-vivid-ink:is(.dark *),
+.dark .ak-dark-vivid-ink,
+[data-theme="dark"] .ak-dark-vivid-ink,
+[data-ak-dark-panel] .ak-dark-vivid-ink,
+[data-ak-dark-rail] .ak-dark-vivid-ink,
+[data-ak-dark-mobile] .ak-dark-vivid-ink {
+  color: var(--color-ak-glow-primary, var(--color-ak-primary));
+}
+
 /* ── Focus Ring Utility ── */
-.ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+.ak-focus-ring:focus-visible {
+  /* Material-drivable: packs may restyle focus (neo-brutal = 3px dashed ink).
+     Default reproduces the house ring exactly. */
+  outline: var(--ak-focus-outline, 2px solid var(--color-ak-border-focus, var(--color-ak-primary)));
+  outline-offset: var(--ak-focus-offset, 2px);
+}
 
 /* ── Price Fade Transition ── */
 .ak-price-fade { transition: opacity 0.15s ease-in-out; }
@@ -541,3 +820,309 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
   @keyframes ak-slideIn { from { opacity: 0; } to { opacity: 1; } }
   @keyframes ak-fadeOut { from { opacity: 1; } to { opacity: 0; } }
 }
+
+/* ── Typography roles (2026-08-02) ─────────────────────────────────
+   Five roles, each an authored family+weight pair driven by variables so a
+   font pairing re-tunes the whole hierarchy coherently (family swaps without
+   weight compensation always look wrong — different families have different
+   weight curves). Components consume ROLE classes, never literal
+   font-family/font-weight for themed text. Weight vars live outside the
+   --font-weight-* namespace on purpose (v4 would generate colliding font-*
+   utilities). Mono role = the existing font-ak-mono utility. */
+.ak-font-heading {
+  font-family: var(--font-ak-heading, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-heading, 600);
+}
+.ak-font-body {
+  font-family: var(--font-ak-sans, Inter, sans-serif);
+  font-weight: var(--ak-weight-body, 400);
+}
+.ak-font-ui {
+  font-family: var(--font-ak-ui, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-ui, 500);
+}
+/* Emphasized UI — buttons, pressed/active controls, row titles. The library
+   calibration is semibold on every button and active state (conventions:
+   "titles are font-semibold"; forms references all carry font-semibold CTAs)
+   while quiet UI (menu rows, inputs, nav) stays at the ui weight. Pairings
+   override via --ak-weight-ui-strong. */
+.ak-font-ui-strong {
+  font-family: var(--font-ak-ui, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-ui-strong, 600);
+}
+.ak-font-label {
+  font-family: var(--font-ak-label, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-label, 600);
+  letter-spacing: var(--ak-tracking-label, 0.02em);
+}
+
+/* ── Material recipes (2026-08-02) ──────────────────────────────
+   The consumption layer for material appearances (astralkit/presets
+   MATERIAL_APPEARANCES). Components carry these classes; appearance packs
+   fill the --ak-* slots. Every default reproduces the pre-material look,
+   so unthemed apps are pixel-identical. */
+.ak-material-control {
+  box-shadow: var(--ak-control-shadow, none);
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+.ak-material-control:hover {
+  transform: var(--ak-control-hover-transform, none);
+  box-shadow: var(--ak-control-shadow-hover, var(--ak-control-shadow, none));
+}
+.ak-material-control:active {
+  box-shadow: var(--ak-control-shadow-active, var(--ak-control-shadow, none));
+}
+.ak-material-surface {
+  position: relative;
+  /* Two-layer background: an optional SHEEN (falls off from the single
+     top-left light source) over the fill. Defaults collapse to plain fill. */
+  background: var(--ak-surface-sheen, none), var(--ak-surface-fill, var(--color-ak-surface));
+  border: var(--ak-surface-border-w, 1px) solid var(--ak-surface-border-color, var(--color-ak-border));
+  box-shadow: var(--ak-surface-shadow, none);
+  -webkit-backdrop-filter: var(--ak-surface-blur, none);
+  backdrop-filter: var(--ak-surface-blur, none);
+}
+/* Directional rim — a gradient border ring (hot toward the light source,
+   dying opposite) via padding + mask-composite. Invisible until a pack sets
+   --ak-surface-rim. */
+.ak-material-surface::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--ak-surface-rim-w, 1.5px);
+  background: var(--ak-surface-rim, none);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+/* Depth ladder: nested material surfaces step their tint up one level so
+   stacked glass reads as stacked panes. Packs opt in via the -2 slot. */
+.ak-material-surface .ak-material-surface {
+  background: var(--ak-surface-sheen-2, var(--ak-surface-sheen, none)),
+    var(--ak-surface-fill-2, var(--ak-surface-fill, var(--color-ak-surface-2)));
+  box-shadow: var(--ak-surface-shadow-2, var(--ak-surface-shadow, none));
+}
+
+/* ── Small-control material parts (batch 2) ─────────────────────────────
+   Glass Law 4: glass is for surfaces — active parts stay flat solid. The
+   knob (switch), thumb (slider) and track are material-slotted so the
+   Appearance dial re-materializes running form controls. Position is done
+   with the CSS `translate` property in components; recipes only ever touch
+   `transform`, so squish/tilt compose with position instead of clobbering it. */
+.ak-control-knob {
+  background: var(--ak-knob-fill, #ffffff);
+  box-shadow: var(--ak-knob-shadow, 0 1px 3px rgba(0, 0, 0, 0.25));
+  transition:
+    translate 200ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
+    transform 200ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
+    background-color 150ms ease;
+}
+[data-state="checked"] > .ak-control-knob {
+  background: var(--ak-knob-fill-checked, var(--ak-knob-fill, #ffffff));
+}
+/* The squish: origin follows the travel direction so the stretch reads as
+   the knob leaning into the push. */
+[data-ak-component="switch"]:active .ak-control-knob {
+  transform: var(--ak-knob-press, scaleX(1.12));
+  transform-origin: left center;
+}
+[data-ak-component="switch"][data-state="checked"]:active .ak-control-knob {
+  transform-origin: right center;
+}
+.ak-control-thumb {
+  background: var(--ak-thumb-fill, #ffffff);
+  border-radius: var(--ak-thumb-radius, 9999px);
+  border: var(--ak-thumb-border-w, 0px) solid var(--ak-thumb-border-color, transparent);
+  box-shadow: var(--ak-thumb-shadow, 0 1px 4px rgba(0, 0, 0, 0.3));
+  transition: transform 180ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
+    box-shadow 180ms ease;
+}
+.ak-control-thumb:hover {
+  transform: var(--ak-thumb-hover-transform, scale(1.1));
+}
+.ak-control-thumb:active {
+  transform: var(--ak-thumb-active-transform, scale(0.96));
+}
+/* Track border renders as an INSET RING, not a real border — layout never
+   shifts, so knob travel constants hold across every material. */
+.ak-control-track {
+  box-shadow:
+    inset 0 0 0 var(--ak-track-border-w, 0px) var(--ak-track-border-color, transparent),
+    var(--ak-track-shadow, 0 0 0 0 transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ak-control-knob,
+  .ak-control-thumb {
+    transition: none;
+  }
+}
+
+/* ── Themed scrollbar (2026-08-03) ──────────────────────────────────────
+   A thin, ALWAYS-VISIBLE scrollbar on the token layer — thumb follows the
+   theme (border-strong, text-muted on hover), track transparent. Visible
+   at rest on purpose: hidden-until-hover scrollbars fail discoverability.
+   Firefox via scrollbar-*, WebKit via the pseudo-elements. */
+.ak-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-ak-border-strong) transparent;
+}
+.ak-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.ak-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-ak-border-strong);
+  border-radius: 9999px;
+}
+.ak-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-ak-text-muted);
+}
+.ak-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ── Quiet-hover bar (2026-08-03) ───────────────────────────────────────
+   The hover treatment for quiet controls and text links: a bar under the
+   WHOLE control (::after), not text-decoration — underlines don't propagate
+   into flex children, so any link with an icon shows a cut-off underline.
+   Materials fill the slots (brutal: 3px ink bar offset 4px = the backface's
+   bottom edge). Defaults are 0/invisible; a component can opt into a
+   default bar via the -default fallback vars (the link button does), which
+   materials still override via the primary vars. */
+.ak-quiet-hover {
+  position: relative;
+}
+.ak-quiet-hover::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: calc(-1 * var(--ak-quiet-hover-offset, var(--ak-quiet-hover-offset-default, 0px)));
+  height: var(--ak-quiet-hover-thickness, var(--ak-quiet-hover-thickness-default, 0px));
+  background: var(--ak-quiet-hover-color, currentColor);
+  opacity: 0;
+  transition: opacity 120ms ease;
+  pointer-events: none;
+}
+.ak-quiet-hover:hover::after,
+.ak-quiet-hover:focus-visible::after {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ak-quiet-hover::after {
+    transition: none;
+  }
+}
+
+/* ── Overlay motion (core batch 4) ──────────────────────────────────────
+   In/out animations for portalled overlays, driven by Radix data-state.
+   Plain CSS so both Tailwind pipelines get them. Dialogs center with
+   inset-0 + m-auto (NOT translate) so the pop transform never fights
+   positioning; sheets own their transform entirely. */
+@keyframes ak-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ak-overlay-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes ak-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+@keyframes ak-pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
+@keyframes ak-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes ak-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes ak-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes ak-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes ak-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes ak-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
+@keyframes ak-slide-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes ak-slide-out-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }
+.ak-overlay-anim[data-state="open"] { animation: ak-overlay-in 150ms ease; }
+.ak-overlay-anim[data-state="closed"] { animation: ak-overlay-out 130ms ease forwards; }
+.ak-pop-anim[data-state="open"],
+.ak-pop-anim[data-state="delayed-open"] { animation: ak-pop-in 160ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-pop-anim[data-state="closed"] { animation: ak-pop-out 120ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="right"] { animation: ak-slide-in-right 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="right"] { animation: ak-slide-out-right 200ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="left"] { animation: ak-slide-in-left 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="left"] { animation: ak-slide-out-left 200ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="bottom"] { animation: ak-slide-in-bottom 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="bottom"] { animation: ak-slide-out-bottom 200ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="top"] { animation: ak-slide-in-top 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="top"] { animation: ak-slide-out-top 200ms ease forwards; }
+/* Height-reveal for Radix Accordion/Collapsible content. */
+@keyframes ak-accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
+@keyframes ak-accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
+@keyframes ak-collapsible-down { from { height: 0; } to { height: var(--radix-collapsible-content-height); } }
+@keyframes ak-collapsible-up { from { height: var(--radix-collapsible-content-height); } to { height: 0; } }
+.ak-accordion-anim[data-state="open"] { animation: ak-accordion-down 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-accordion-anim[data-state="closed"] { animation: ak-accordion-up 180ms ease forwards; }
+.ak-collapsible-anim[data-state="open"] { animation: ak-collapsible-down 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-collapsible-anim[data-state="closed"] { animation: ak-collapsible-up 180ms ease forwards; }
+@media (prefers-reduced-motion: reduce) {
+  .ak-overlay-anim,
+  .ak-pop-anim,
+  .ak-sheet-anim,
+  .ak-accordion-anim,
+  .ak-collapsible-anim {
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* ── Button group (core) ────────────────────────────────────────────────
+   Container-aware styling for attached button groups (the CORE-STANDARD
+   pattern: plain CSS attribute selectors, works in both Tailwind pipelines).
+   Inner corners collapse, outer corners keep the radius tokens, adjacent
+   borders overlap by 1px, and the focused member wins the z-order. */
+/* Any direct child participates in the corner system — buttons today,
+   inputs/selects/ButtonGroupText when those cores land. Separators opt out. */
+.ak-button-group {
+  display: inline-flex;
+  align-items: stretch;
+}
+.ak-button-group > :focus-visible {
+  z-index: 1;
+}
+.ak-button-group[data-ak-orientation="vertical"] {
+  flex-direction: column;
+}
+/* Fusing applies only to a leaf group — a group of groups is a toolbar
+   (below) and its sub-groups keep their own corners. */
+.ak-button-group:not(:has(> .ak-button-group)) > * {
+  position: relative;
+  border-radius: 0;
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > * + :not(.ak-button-group-separator) {
+  margin-left: -1px;
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > .ak-button-group-separator + * {
+  margin-left: 0;
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > :first-child {
+  border-top-left-radius: var(--radius-ak-md);
+  border-bottom-left-radius: var(--radius-ak-md);
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > :last-child {
+  border-top-right-radius: var(--radius-ak-md);
+  border-bottom-right-radius: var(--radius-ak-md);
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > * + :not(.ak-button-group-separator) {
+  margin-top: -1px;
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > .ak-button-group-separator + * {
+  margin-top: 0;
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > :first-child {
+  border-top-left-radius: var(--radius-ak-md);
+  border-top-right-radius: var(--radius-ak-md);
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > :last-child {
+  border-bottom-left-radius: var(--radius-ak-md);
+  border-bottom-right-radius: var(--radius-ak-md);
+}
+/* The seam flips with the group's axis. */
+.ak-button-group[data-ak-orientation="vertical"] > .ak-button-group-separator {
+  width: auto;
+  height: 1px;
+  align-self: stretch;
+}
+/* A group of groups is a toolbar: sub-groups space out instead of fusing. */
+.ak-button-group:has(> .ak-button-group) {
+  gap: var(--spacing-ak-1, 0.5rem);
+}

package/lib/presets/appearance-presets.d.ts

@@ -0,0 +1,12 @@
+export type AppearancePresetId = 'clean' | 'soft-mesh' | 'neon-edge' | 'cinematic-backlight' | 'circuit-spark' | 'portfolio-grain';
+type AppearanceVariableName = `--ak-effect-${string}` | `--gradient-ak-${string}`;
+export interface AppearancePreset {
+    id: AppearancePresetId;
+    name: string;
+    description: string;
+    variables: Partial<Record<AppearanceVariableName, string>>;
+}
+export declare const DEFAULT_APPEARANCE_PRESET_ID: AppearancePresetId;
+export declare const APPEARANCE_PRESETS: AppearancePreset[];
+export declare function appearancePresetToVariables(preset: AppearancePreset): Partial<Record<AppearanceVariableName, string>>;
+export {};