@ryanhelsing/ry-ui 1.0.13 → 1.0.15

package/dist/css/ry-ui.css

@@ -1,10 +1,11 @@
 /**
  * ry-ui Design Tokens
  *
- * These CSS custom properties define the visual language.
- * color-scheme: light dark enables OS preference detection.
- * light-dark() embeds both values — no separate dark.css needed.
- * Override in your theme file to customize.
+ * CORE KNOBS → DERIVED TOKENS → COMPONENTS
+ *
+ * Themes only need to set the ~18 core knobs at the top.
+ * Everything else derives automatically via color-mix() and calc().
+ * Override any derived token for fine-tuning.
  */
 
 /* ═══════════════════════════════════════════════════════════════
@@ -32,90 +33,119 @@
   color-scheme: light dark;
 
   /* ═══════════════════════════════════════════════════════════════
-     COLORS
+     CORE KNOBS — set these to define a theme
      ═══════════════════════════════════════════════════════════════ */
 
-  /* Primary */
+  /* Palette: 3 roles */
   --ry-color-primary: light-dark(oklch(0.623 0.188 259.8), oklch(0.714 0.143 254.6));
-  --ry-color-primary-hover: light-dark(oklch(0.546 0.215 262.9), oklch(0.623 0.188 259.8));
-  --ry-color-primary-active: light-dark(oklch(0.488 0.217 264.4), oklch(0.546 0.215 262.9));
-
-  /* Secondary */
   --ry-color-secondary: light-dark(oklch(0.554 0.041 257.4), oklch(0.711 0.035 256.8));
-  --ry-color-secondary-hover: light-dark(oklch(0.446 0.037 257.3), oklch(0.869 0.02 252.9));
-  --ry-color-secondary-active: light-dark(oklch(0.372 0.039 257.3), oklch(0.929 0.013 255.6));
-
-  /* Accent */
   --ry-color-accent: light-dark(oklch(0.627 0.213 303.9), oklch(0.714 0.183 303.9));
-  --ry-color-accent-hover: light-dark(oklch(0.557 0.213 303.9), oklch(0.627 0.213 303.9));
-  --ry-color-accent-active: light-dark(oklch(0.497 0.213 303.9), oklch(0.557 0.213 303.9));
 
-  /* Semantic */
+  /* Surface */
+  --ry-color-bg: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));
+  --ry-color-text: light-dark(oklch(0.279 0.037 260), oklch(0.968 0.007 248.1));
+
+  /* Semantic (overrideable, but defaults are universal) */
   --ry-color-success: oklch(0.723 0.192 149.6);
   --ry-color-warning: oklch(0.769 0.165 70.1);
   --ry-color-danger: oklch(0.637 0.208 25.3);
-  --ry-color-danger-hover: oklch(0.577 0.215 27.3);
   --ry-color-info: oklch(0.715 0.126 215.2);
 
-  /* Semantic backgrounds & text (for alerts, badges) */
-  --ry-color-info-bg: light-dark(oklch(0.984 0.019 201.1), oklch(0.398 0.066 227.4));
-  --ry-color-info-text: light-dark(oklch(0.52 0.094 223.1), oklch(0.917 0.077 205.1));
-  --ry-color-success-bg: light-dark(oklch(0.982 0.018 156.1), oklch(0.393 0.09 152.6));
-  --ry-color-success-text: light-dark(oklch(0.527 0.137 150.1), oklch(0.925 0.081 156.1));
-  --ry-color-warning-bg: light-dark(oklch(0.987 0.021 95.3), oklch(0.414 0.105 45.9));
-  --ry-color-warning-text: light-dark(oklch(0.555 0.145 49), oklch(0.962 0.058 95.6));
-  --ry-color-danger-bg: light-dark(oklch(0.971 0.013 17), oklch(0.396 0.133 25.7));
-  --ry-color-danger-text: light-dark(oklch(0.505 0.19 27.5), oklch(0.885 0.059 18.3));
-
-  /* Text */
-  --ry-color-text: light-dark(oklch(0.279 0.037 260), oklch(0.968 0.007 248.1));
-  --ry-color-text-muted: light-dark(oklch(0.554 0.041 257.4), oklch(0.711 0.035 256.8));
-  --ry-color-text-inverse: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));
+  /* Type: 2 fonts */
+  --ry-font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --ry-font-secondary: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
 
-  /* Background */
-  --ry-color-bg: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));
-  --ry-color-bg-subtle: light-dark(oklch(0.984 0.003 248.2), oklch(0.279 0.037 260));
-  --ry-color-bg-muted: light-dark(oklch(0.968 0.007 248.1), oklch(0.372 0.039 257.3));
+  /* Shape */
+  --ry-radius-base: 0.375rem;
+  --ry-border-width: 1px;
+  --ry-outline-width: 0px;
+
+  /* Depth */
+  --ry-shadow-color: light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.4));
+  --ry-shadow-strength: 1;
+  --ry-shadow-spread: 1;
+
+  /* Surface treatment */
+  --ry-panel-opacity: 1;
+  --ry-panel-blur: 0px;
+
+  /* Motion */
+  --ry-animation-style: smooth; /* none | smooth | bouncy */
+  --ry-duration-scale: 1;
+
+  /* Density */
+  --ry-space-scale: 1;
+
+  /* ═══════════════════════════════════════════════════════════════
+     DERIVED: COLORS — auto-generated from core palette
+     ═══════════════════════════════════════════════════════════════ */
 
-  /* Border */
-  --ry-color-border: light-dark(oklch(0.929 0.013 255.6), oklch(0.372 0.039 257.3));
-  --ry-color-border-strong: light-dark(oklch(0.869 0.02 252.9), oklch(0.446 0.037 257.3));
+  /* Hover/active states via color-mix */
+  --ry-color-primary-hover: color-mix(in oklch, var(--ry-color-primary) 80%, var(--ry-color-text));
+  --ry-color-primary-active: color-mix(in oklch, var(--ry-color-primary) 65%, var(--ry-color-text));
+  --ry-color-secondary-hover: color-mix(in oklch, var(--ry-color-secondary) 80%, var(--ry-color-text));
+  --ry-color-secondary-active: color-mix(in oklch, var(--ry-color-secondary) 65%, var(--ry-color-text));
+  --ry-color-accent-hover: color-mix(in oklch, var(--ry-color-accent) 80%, var(--ry-color-text));
+  --ry-color-accent-active: color-mix(in oklch, var(--ry-color-accent) 65%, var(--ry-color-text));
+  --ry-color-danger-hover: color-mix(in oklch, var(--ry-color-danger) 80%, var(--ry-color-text));
+
+  /* Text variants */
+  --ry-color-text-muted: color-mix(in oklch, var(--ry-color-text) 55%, var(--ry-color-bg));
+  --ry-color-text-inverse: var(--ry-color-bg);
+
+  /* Background variants */
+  --ry-color-bg-subtle: color-mix(in oklch, var(--ry-color-bg) 96%, var(--ry-color-text));
+  --ry-color-bg-muted: color-mix(in oklch, var(--ry-color-bg) 92%, var(--ry-color-text));
+
+  /* Border variants */
+  --ry-color-border: color-mix(in oklch, var(--ry-color-bg) 82%, var(--ry-color-text));
+  --ry-color-border-strong: color-mix(in oklch, var(--ry-color-bg) 70%, var(--ry-color-text));
 
   /* Overlay */
-  --ry-color-overlay: light-dark(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.7));
+  --ry-color-overlay: color-mix(in oklch, var(--ry-color-text) 50%, transparent);
+  --ry-color-hover-overlay: color-mix(in oklch, var(--ry-color-text) 4%, transparent);
+
+  /* Semantic backgrounds & text — derived from base semantic colors */
+  --ry-color-info-bg: color-mix(in srgb, var(--ry-color-info) 12%, var(--ry-color-bg));
+  --ry-color-info-text: color-mix(in oklch, var(--ry-color-info) 70%, var(--ry-color-text));
+  --ry-color-success-bg: color-mix(in srgb, var(--ry-color-success) 12%, var(--ry-color-bg));
+  --ry-color-success-text: color-mix(in oklch, var(--ry-color-success) 70%, var(--ry-color-text));
+  --ry-color-warning-bg: color-mix(in srgb, var(--ry-color-warning) 12%, var(--ry-color-bg));
+  --ry-color-warning-text: color-mix(in oklch, var(--ry-color-warning) 70%, var(--ry-color-text));
+  --ry-color-danger-bg: color-mix(in srgb, var(--ry-color-danger) 12%, var(--ry-color-bg));
+  --ry-color-danger-text: color-mix(in oklch, var(--ry-color-danger) 70%, var(--ry-color-text));
 
   /* ═══════════════════════════════════════════════════════════════
-     CODE SYNTAX
+     DERIVED: CODE SYNTAX — from palette, auto-adapts to any theme
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-code-bg: light-dark(oklch(0.978 0.003 248.2), oklch(0.208 0.04 265.8));
-  --ry-code-header-bg: light-dark(oklch(0.947 0.007 248.1), oklch(0.279 0.037 260));
-  --ry-code-text-color: light-dark(oklch(0.279 0.013 253.1), oklch(0.968 0.007 248.1));
-  --ry-code-title-color: light-dark(oklch(0.485 0.02 251.1), oklch(0.711 0.035 256.8));
-  --ry-code-icon-color: light-dark(oklch(0.666 0.018 251), oklch(0.554 0.041 257.4));
-  --ry-code-icon-hover-bg: light-dark(oklch(0.876 0.012 248.1), oklch(0.372 0.039 257.3));
-  --ry-code-icon-hover-color: light-dark(oklch(0.279 0.013 253.1), oklch(0.968 0.007 248.1));
-  --ry-code-line-number-color: light-dark(oklch(0.666 0.018 251 / 0.6), oklch(0.446 0.037 257.3 / 0.6));
-  --ry-code-line-border-color: light-dark(oklch(0.876 0.012 248.1), oklch(0.372 0.039 257.3));
-  --ry-code-color-preview-border: light-dark(oklch(0.279 0.013 253.1 / 0.3), oklch(0.968 0.007 248.1 / 0.3));
-  --ry-code-keyword: light-dark(oklch(0.552 0.205 24.5), oklch(0.637 0.208 25.3));
-  --ry-code-property: light-dark(oklch(0.451 0.164 258.2), oklch(0.714 0.143 254.6));
-  --ry-code-value: light-dark(oklch(0.321 0.108 259.1), oklch(0.769 0.165 70.1));
-  --ry-code-string: light-dark(oklch(0.321 0.108 259.1), oklch(0.723 0.192 149.6));
-  --ry-code-number: light-dark(oklch(0.451 0.164 258.2), oklch(0.769 0.165 70.1));
-  --ry-code-comment: light-dark(oklch(0.565 0.019 251), oklch(0.711 0.035 256.8));
-  --ry-code-selector: light-dark(oklch(0.439 0.118 148.1), oklch(0.715 0.126 215.2));
-  --ry-code-punctuation: light-dark(oklch(0.279 0.013 253.1), oklch(0.711 0.035 256.8));
-  --ry-code-tag: light-dark(oklch(0.439 0.118 148.1), oklch(0.715 0.126 215.2));
-  --ry-code-attribute: light-dark(oklch(0.451 0.164 258.2), oklch(0.714 0.143 254.6));
+  --ry-code-bg: var(--ry-color-bg-subtle);
+  --ry-code-header-bg: var(--ry-color-bg-muted);
+  --ry-code-text-color: var(--ry-color-text);
+  --ry-code-title-color: var(--ry-color-text-muted);
+  --ry-code-icon-color: var(--ry-color-text-muted);
+  --ry-code-icon-hover-bg: var(--ry-color-bg-muted);
+  --ry-code-icon-hover-color: var(--ry-color-text);
+  --ry-code-line-number-color: var(--ry-color-secondary);
+  --ry-code-line-border-color: var(--ry-color-border);
+  --ry-code-color-preview-border: var(--ry-color-border);
+  --ry-code-keyword: var(--ry-color-danger);
+  --ry-code-property: var(--ry-color-primary);
+  --ry-code-value: var(--ry-color-accent);
+  --ry-code-string: var(--ry-color-success);
+  --ry-code-number: var(--ry-color-warning);
+  --ry-code-comment: var(--ry-color-text-muted);
+  --ry-code-selector: var(--ry-color-info);
+  --ry-code-punctuation: var(--ry-color-text-muted);
+  --ry-code-tag: var(--ry-color-info);
+  --ry-code-attribute: var(--ry-color-primary);
 
   /* ═══════════════════════════════════════════════════════════════
-     TYPOGRAPHY
+     DERIVED: TYPOGRAPHY — from core font knobs
      ═══════════════════════════════════════════════════════════════ */
 
-  /* Font families */
-  --ry-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --ry-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --ry-font-sans: var(--ry-font-primary);
+  --ry-font-mono: var(--ry-font-secondary);
 
   /* Font sizes */
   --ry-text-xs: 0.75rem;
@@ -139,61 +169,96 @@
   --ry-leading-relaxed: 1.75;
 
   /* ═══════════════════════════════════════════════════════════════
-     SPACING
+     DERIVED: SPACING — scaled from base
      ═══════════════════════════════════════════════════════════════ */
 
   --ry-space-0: 0;
-  --ry-space-1: 0.25rem;
-  --ry-space-2: 0.5rem;
-  --ry-space-3: 0.75rem;
-  --ry-space-4: 1rem;
-  --ry-space-5: 1.25rem;
-  --ry-space-6: 1.5rem;
-  --ry-space-8: 2rem;
-  --ry-space-10: 2.5rem;
-  --ry-space-12: 3rem;
-  --ry-space-16: 4rem;
-  --ry-space-20: 5rem;
+  --ry-space-1: calc(0.25rem * var(--ry-space-scale));
+  --ry-space-2: calc(0.5rem * var(--ry-space-scale));
+  --ry-space-3: calc(0.75rem * var(--ry-space-scale));
+  --ry-space-4: calc(1rem * var(--ry-space-scale));
+  --ry-space-5: calc(1.25rem * var(--ry-space-scale));
+  --ry-space-6: calc(1.5rem * var(--ry-space-scale));
+  --ry-space-8: calc(2rem * var(--ry-space-scale));
+  --ry-space-10: calc(2.5rem * var(--ry-space-scale));
+  --ry-space-12: calc(3rem * var(--ry-space-scale));
+  --ry-space-16: calc(4rem * var(--ry-space-scale));
+  --ry-space-20: calc(5rem * var(--ry-space-scale));
 
   /* ═══════════════════════════════════════════════════════════════
-     BORDERS & RADIUS
+     DERIVED: BORDERS & RADIUS — scaled from base
      ═══════════════════════════════════════════════════════════════ */
 
   --ry-radius-none: 0;
-  --ry-radius-sm: 0.25rem;
-  --ry-radius-md: 0.375rem;
-  --ry-radius-lg: 0.5rem;
-  --ry-radius-xl: 0.75rem;
-  --ry-radius-2xl: 1rem;
+  --ry-radius-sm: calc(var(--ry-radius-base) * 0.66);
+  --ry-radius-md: var(--ry-radius-base);
+  --ry-radius-lg: calc(var(--ry-radius-base) * 1.33);
+  --ry-radius-xl: calc(var(--ry-radius-base) * 2);
+  --ry-radius-2xl: calc(var(--ry-radius-base) * 2.66);
   --ry-radius-full: 9999px;
 
-  --ry-border-width: 1px;
-
   /* ═══════════════════════════════════════════════════════════════
-     SHADOWS
+     DERIVED: SHADOWS — scaled from strength + spread knobs
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-shadow-color: light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.4));
-  --ry-shadow-color-sm: light-dark(oklch(0 0 0 / 0.05), oklch(0 0 0 / 0.3));
-  --ry-shadow-sm: 0 1px 2px 0 var(--ry-shadow-color-sm);
-  --ry-shadow-md: 0 4px 6px -1px var(--ry-shadow-color), 0 2px 4px -2px var(--ry-shadow-color);
-  --ry-shadow-lg: 0 10px 15px -3px var(--ry-shadow-color), 0 4px 6px -4px var(--ry-shadow-color);
-  --ry-shadow-xl: 0 20px 25px -5px var(--ry-shadow-color), 0 8px 10px -6px var(--ry-shadow-color);
+  --ry-shadow-color-sm: color-mix(in oklch, var(--ry-shadow-color) calc(50% * var(--ry-shadow-strength)), transparent);
+  --ry-shadow-sm:
+    0
+    calc(1px * var(--ry-shadow-spread))
+    calc(2px * var(--ry-shadow-spread))
+    0
+    var(--ry-shadow-color-sm);
+  --ry-shadow-md:
+    0
+    calc(4px * var(--ry-shadow-spread))
+    calc(6px * var(--ry-shadow-spread))
+    calc(-1px * var(--ry-shadow-spread))
+    var(--ry-shadow-color),
+    0
+    calc(2px * var(--ry-shadow-spread))
+    calc(4px * var(--ry-shadow-spread))
+    calc(-2px * var(--ry-shadow-spread))
+    var(--ry-shadow-color);
+  --ry-shadow-lg:
+    0
+    calc(10px * var(--ry-shadow-spread))
+    calc(15px * var(--ry-shadow-spread))
+    calc(-3px * var(--ry-shadow-spread))
+    var(--ry-shadow-color),
+    0
+    calc(4px * var(--ry-shadow-spread))
+    calc(6px * var(--ry-shadow-spread))
+    calc(-4px * var(--ry-shadow-spread))
+    var(--ry-shadow-color);
+  --ry-shadow-xl:
+    0
+    calc(20px * var(--ry-shadow-spread))
+    calc(25px * var(--ry-shadow-spread))
+    calc(-5px * var(--ry-shadow-spread))
+    var(--ry-shadow-color),
+    0
+    calc(8px * var(--ry-shadow-spread))
+    calc(10px * var(--ry-shadow-spread))
+    calc(-6px * var(--ry-shadow-spread))
+    var(--ry-shadow-color);
 
   /* ═══════════════════════════════════════════════════════════════
-     TRANSITIONS
+     DERIVED: TRANSITIONS — scaled from duration-scale + animation style
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-duration-fast: 100ms;
-  --ry-duration-normal: 200ms;
-  --ry-duration-slow: 300ms;
+  --ry-duration-fast: calc(100ms * var(--ry-duration-scale));
+  --ry-duration-normal: calc(200ms * var(--ry-duration-scale));
+  --ry-duration-slow: calc(300ms * var(--ry-duration-scale));
 
   --ry-ease: cubic-bezier(0.4, 0, 0.2, 1);
   --ry-ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ry-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ry-ease-out-back: cubic-bezier(0.34, 1.85, 0.64, 1);
+  --ry-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ry-ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
 
   /* ═══════════════════════════════════════════════════════════════
-     Z-INDEX
+     Z-INDEX (not themeable — structural)
      ═══════════════════════════════════════════════════════════════ */
 
   --ry-z-dropdown: 1000;
@@ -206,13 +271,13 @@
   --ry-z-toast: 1080;
 
   /* ═══════════════════════════════════════════════════════════════
-     FOCUS
+     DERIVED: FOCUS — from primary
      ═══════════════════════════════════════════════════════════════ */
 
-  --ry-focus-ring: 0 0 0 3px light-dark(oklch(0.623 0.188 259.8 / 0.5), oklch(0.714 0.143 254.6 / 0.5));
+  --ry-focus-ring: 0 0 0 3px color-mix(in oklch, var(--ry-color-primary) 50%, transparent);
 }
 
-/* Force light or dark mode (legacy — theme used to conflate theme + mode) */
+/* Force light or dark mode */
 [data-ry-theme="light"] { color-scheme: light; }
 [data-ry-theme="dark"]  { color-scheme: dark; }
 
@@ -241,16 +306,146 @@
    SCROLL LOCK (for modals, drawers)
    ═══════════════════════════════════════════════════════════════ */
 
+body {
+  margin: 0;
+  min-height: 100dvh;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
 body[data-ry-scroll-lock] {
   overflow: hidden;
   padding-right: var(--ry-scrollbar-width, 0);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   PREFLIGHT RESET (opt-in via data-ry-reset on body/html)
+   Faithful equivalent of Tailwind Preflight.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Universal — :where() gives zero specificity so component styles always win */
+:where([data-ry-reset]) *,
+:where([data-ry-reset]) *::before,
+:where([data-ry-reset]) *::after,
+:where([data-ry-reset]) *::backdrop {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+}
+
+/* Root */
+:where([data-ry-reset]) {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Typography */
+:where([data-ry-reset]) :where(h1, h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where([data-ry-reset]) :where(a) {
+  color: inherit;
+  text-decoration: inherit;
+}
+:where([data-ry-reset]) :where(b, strong) {
+  font-weight: bolder;
+}
+:where([data-ry-reset]) :where(code, kbd, samp, pre) {
+  font-size: 1em;
+}
+:where([data-ry-reset]) :where(small) {
+  font-size: 80%;
+}
+:where([data-ry-reset]) :where(sub, sup) {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+:where([data-ry-reset]) :where(sub) { bottom: -0.25em; }
+:where([data-ry-reset]) :where(sup) { top: -0.5em; }
+
+/* Lists */
+:where([data-ry-reset]) :where(ol, ul, menu) {
+  list-style: none;
+}
+
+/* Table */
+:where([data-ry-reset]) :where(table) {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+/* HR */
+:where([data-ry-reset]) :where(hr) {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+/* Media */
+:where([data-ry-reset]) :where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+  vertical-align: middle;
+}
+:where([data-ry-reset]) :where(img, video) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Form controls */
+:where([data-ry-reset]) :where(button, input, select, optgroup, textarea) {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  border-radius: 0;
+  background-color: transparent;
+}
+:where([data-ry-reset]) ::placeholder {
+  opacity: 1;
+}
+@supports (color: color-mix(in oklab, currentcolor 50%, transparent)) {
+  :where([data-ry-reset]) ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+:where([data-ry-reset]) :where(textarea) {
+  resize: vertical;
+}
+:where([data-ry-reset]) :where(button, input:where([type='button'], [type='reset'], [type='submit'])) {
+  appearance: button;
+}
+:where([data-ry-reset]) ::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+:where([data-ry-reset]) ::-webkit-inner-spin-button,
+:where([data-ry-reset]) ::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/* Misc */
+:where([data-ry-reset]) :where(summary) {
+  display: list-item;
+}
+:where([data-ry-reset]) :where([hidden]:not([hidden='until-found'])) {
+  display: none !important;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    TRANSFORM WRAPPER (FOUC prevention)
    ═══════════════════════════════════════════════════════════════ */
 
-ry {
+ry,
+ry-search-item,
+ry-search-group {
   display: none;
 }
 
@@ -262,13 +457,14 @@ ry {
   ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
   ry-grid, ry-stack, ry-cluster, ry-split, ry-center,
   ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown,
-  ry-button, ry-button-group, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
+  ry-button, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
   ry-accordion-item, ry-tab, ry-menu, ry-menu-item, ry-divider,
   ry-theme-toggle, ry-select, ry-switch, ry-tooltip, ry-drawer, ry-toast,
   ry-toggle-button, ry-knob, ry-slider, ry-number-select, ry-color-picker, ry-color-input,
   ry-gradient-picker, ry-tree, ry-tree-item,
   ry-tag, ry-tag-input, ry-hero, ry-stat, ry-feature, ry-feature-grid,
-  ry-pricing, ry-pricing-card, ry-carousel, ry-combobox) {
+  ry-pricing, ry-pricing-card, ry-carousel, ry-combobox, ry-heading,
+  ry-logo-bar) {
   box-sizing: border-box;
 }
 
@@ -313,7 +509,8 @@ ry {
 :is(ry-modal [data-ry-target="header"] h3,
     ry-card h3,
     ry-hero h1,
-    ry-pricing-card h3) {
+    ry-pricing-card h3,
+    ry-heading [data-ry-target="title"]) {
   text-wrap: balance;
 }
 
@@ -328,6 +525,7 @@ ry-page {
   min-height: 100dvh;
   container-type: inline-size;
   scrollbar-gutter: stable;
+  overflow-x: clip;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -371,6 +569,51 @@ ry-footer {
   text-align: center;
 }
 
+/* Full footer with columns */
+ry-footer[layout="columns"] {
+  text-align: start;
+  padding: var(--ry-space-12, 3rem) var(--ry-space-6, 1.5rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="columns"],
+ry-footer[layout="columns"] > .ry-footer__columns {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(auto-fit, minmax(8rem, 1fr));
+  gap: var(--ry-space-8, 2rem);
+  padding-block-end: var(--ry-space-8, 2rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="columns"] nav,
+ry-footer[layout="columns"] > .ry-footer__columns nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-2, 0.5rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="columns"] nav strong,
+ry-footer[layout="columns"] > .ry-footer__columns nav strong {
+  margin-block-end: var(--ry-space-2, 0.5rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="bottom"],
+ry-footer[layout="columns"] > .ry-footer__bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--ry-space-4, 1rem);
+  padding-block-start: var(--ry-space-6, 1.5rem);
+  border-top: 1px solid currentColor;
+  opacity: 0.5;
+}
+
+@media (max-width: 768px) {
+  ry-footer[layout="columns"] > [data-ry-target="columns"],
+  ry-footer[layout="columns"] > .ry-footer__columns {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 /* ═══════════════════════════════════════════════════════════════
    SECTION
    ═══════════════════════════════════════════════════════════════ */
@@ -389,19 +632,114 @@ ry-section[narrow] {
   margin-inline: auto;
 }
 
-/* Logo bar pattern */
-.ry-logo-bar {
-  text-align: center;
+/* Full-width breakout — bg goes edge-to-edge, content stays centered */
+ry-section[full],
+ry-section[inverted],
+ry-footer,
+ry-logo-bar {
+  width: 100vw;
+  margin-inline-start: calc(50% - 50vw);
+  padding-inline: max(var(--ry-space-6, 1.5rem), calc(50vw - 50%));
 }
 
-.ry-logo-bar p {
-  margin: 0 0 var(--ry-space-4, 1rem);
+ry-section[inverted] {
+  padding-block: var(--ry-space-12, 3rem);
 }
 
-.ry-logo-bar ry-cluster {
-  justify-content: center;
-  gap: var(--ry-space-10, 2.5rem);
+ry-section[pad-bottom="lg"] {
+  padding-bottom: var(--ry-space-20, 5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   LOGO BAR
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-logo-bar {
+  display: flex;
   flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: var(--ry-space-8, 2rem);
+  padding-block: var(--ry-space-8, 2rem);
+  text-align: center;
+}
+
+ry-logo-bar > p {
+  width: 100%;
+  margin: 0;
+}
+
+ry-logo-bar > :not(p) {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Scroll layout — horizontal scroll, no wrap */
+ry-logo-bar[layout="scroll"] {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+ry-logo-bar[layout="scroll"]::-webkit-scrollbar {
+  display: none;
+}
+
+ry-logo-bar[layout="scroll"] > :not(p) {
+  flex-shrink: 0;
+}
+
+/* Marquee layout — infinite auto-scroll */
+ry-logo-bar[layout="marquee"] {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+ry-logo-bar[layout="marquee"] [data-ry-target="track"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-8, 2rem);
+  width: max-content;
+  animation: ry-marquee var(--ry-logo-bar-speed, 30s) linear infinite;
+}
+
+ry-logo-bar[layout="marquee"] [data-ry-target="track"] > * {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+ry-logo-bar[layout="marquee"]:hover [data-ry-target="track"] {
+  animation-play-state: paused;
+}
+
+@keyframes ry-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-25%); }
+}
+
+/* Size variants */
+ry-logo-bar[size="sm"] {
+  padding: var(--ry-space-4, 1rem) var(--ry-space-4, 1rem);
+  gap: var(--ry-space-4, 1rem);
+}
+
+ry-logo-bar[size="lg"] {
+  padding: var(--ry-space-12, 3rem) var(--ry-space-6, 1.5rem);
+  gap: var(--ry-space-6, 1.5rem);
+}
+
+/* Logo items */
+ry-logo-bar img {
+  height: var(--ry-logo-bar-height, 2rem);
+  width: auto;
+  object-fit: contain;
+}
+
+ry-logo-bar span {
+  white-space: nowrap;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -429,6 +767,13 @@ ry-grid[cols="auto-fill"] {
   grid-template-columns: repeat(auto-fill, minmax(var(--ry-grid-min, 280px), 1fr));
 }
 
+ry-grid[overlap] {
+  position: relative;
+  z-index: 1;
+  margin-top: calc(-1 * var(--ry-space-12, 3rem));
+  padding-inline: var(--ry-space-6, 1.5rem);
+}
+
 /* Default responsive behavior */
 @container (max-width: 640px) {
   :is(ry-grid[cols="2"], ry-grid[cols="3"], ry-grid[cols="4"],
@@ -584,11 +929,13 @@ ry-center {
 ry-nav {
   display: flex;
   align-items: center;
-  gap: var(--ry-space-4, 1rem);
+  gap: var(--ry-space-1, 0.25rem);
 }
 
 ry-nav a {
   text-decoration: none;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  white-space: nowrap;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -608,6 +955,7 @@ ry-actions {
   display: flex;
   align-items: center;
   gap: var(--ry-space-2, 0.5rem);
+  margin-inline-start: auto;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -667,19 +1015,13 @@ ry-button[icon][size="sm"]:empty {
   padding: var(--ry-space-1, 0.25rem);
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   BUTTON GROUP
-   ═══════════════════════════════════════════════════════════════ */
-
-ry-button-group {
-  display: inline-flex;
-  gap: 2px;
-  padding: 2px;
-  border-radius: var(--ry-radius-md, 0.375rem);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button) {
-  border-radius: calc(var(--ry-radius-md, 0.375rem) - 2px);
+/* Link variant — inline text link style */
+ry-button[variant="link"] {
+  background: none;
+  border: none;
+  padding: 0;
+  display: inline;
+  cursor: pointer;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -1083,6 +1425,12 @@ ry-card p:last-child {
   margin-bottom: 0;
 }
 
+ry-card > img:first-child {
+  display: block;
+  width: 100%;
+  margin-bottom: var(--ry-space-4, 1rem);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BADGES
    ═══════════════════════════════════════════════════════════════ */
@@ -1104,7 +1452,7 @@ ry-alert {
   padding: var(--ry-space-4, 1rem);
 }
 
-ry-alert [slot="title"] {
+.ry-alert__title {
   margin: 0 0 var(--ry-space-1, 0.25rem) 0;
 }
 
@@ -1816,7 +2164,11 @@ ry-select[multiple] [data-ry-target="trigger"] {
 }
 
 ry-select[multiple] [data-ry-target="tags"] {
-  display: contents;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 0%;
+  gap: var(--ry-space-1, 0.25rem);
+  align-items: center;
 }
 
 ry-select[multiple] [data-ry-target="clear"] {
@@ -2789,6 +3141,40 @@ ry-tag-input[disabled] [data-ry-target="container"] {
   cursor: not-allowed;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   DEVICE FRAME (CSS-only phone mockup)
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-phone {
+  position: relative;
+  display: inline-block;
+  padding: 0.75rem;
+  border-radius: 2.5rem;
+  border: 3px solid currentColor;
+  overflow: hidden;
+  max-width: 20rem;
+}
+
+.ry-phone::before {
+  content: '';
+  position: absolute;
+  top: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 5rem;
+  height: 1.5rem;
+  border-radius: 0 0 1rem 1rem;
+  background: currentColor;
+  z-index: 1;
+}
+
+.ry-phone img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 1.75rem;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    HERO
    ═══════════════════════════════════════════════════════════════ */
@@ -2827,12 +3213,97 @@ ry-hero[size="sm"] {
   padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
 }
 
-ry-hero[size="lg"] {
-  padding: var(--ry-space-20, 5rem) var(--ry-space-6, 1.5rem);
-}
+ry-hero[size="lg"] {
+  padding: var(--ry-space-20, 5rem) var(--ry-space-6, 1.5rem);
+}
+
+ry-hero[size="full"] {
+  min-height: 100vh;
+  min-height: 100dvh;
+  justify-content: center;
+}
+
+ry-hero[full-bleed] {
+  max-width: none;
+}
+
+/* Split layout: text + media side by side */
+ry-hero[layout="split"] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  text-align: start;
+  gap: 0;
+  max-width: none;
+  padding: 0;
+  overflow: hidden;
+}
+
+ry-hero[layout="split"] > *:first-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ry-space-4, 1rem);
+  padding: var(--ry-space-12, 3rem) var(--ry-space-12, 3rem) var(--ry-space-12, 3rem) clamp(var(--ry-space-6, 1.5rem), 8vw, 10rem);
+}
+
+ry-hero[layout="split"] > *:first-child > * + * {
+  margin-block-start: 0;
+}
+
+ry-hero[layout="split"] > *:last-child {
+  align-self: stretch;
+  position: relative;
+  overflow: hidden;
+}
+
+ry-hero[layout="split"] > *:last-child img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+/* Full viewport height for split */
+ry-hero[layout="split"][size="full"] {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* Flip: image left, text right */
+ry-hero[layout="split"][reverse] {
+  direction: rtl;
+}
+
+ry-hero[layout="split"][reverse] > * {
+  direction: ltr;
+}
+
+ry-hero[layout="split"][reverse] > *:first-child {
+  padding-inline: var(--ry-space-12, 3rem) clamp(var(--ry-space-6, 1.5rem), 8vw, 10rem);
+}
+
+@media (max-width: 768px) {
+  ry-hero[layout="split"] {
+    grid-template-columns: 1fr;
+  }
+
+  ry-hero[layout="split"] > *:first-child {
+    padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
+  }
+
+  ry-hero[layout="split"][reverse] > *:first-child {
+    padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
+  }
 
-ry-hero[full-bleed] {
-  max-width: none;
+  ry-hero[layout="split"] > *:last-child {
+    max-height: 20rem;
+  }
+
+  ry-hero[layout="split"][size="full"] {
+    min-height: auto;
+  }
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -2963,11 +3434,11 @@ ry-pricing-card h3 {
   margin: 0 0 var(--ry-space-2, 0.5rem) 0;
 }
 
-ry-pricing-card [slot="price"] {
+.ry-pricing-card__price {
   margin-block-end: var(--ry-space-6, 1.5rem);
 }
 
-ry-pricing-card [slot="price"] span {
+.ry-pricing-card__price span {
   display: inline;
 }
 
@@ -3275,6 +3746,125 @@ ry-theme-panel [data-ry-target="mode-btn"] {
   line-height: 1;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   HEADING
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-2, 0.5rem);
+}
+
+ry-heading[align="center"] {
+  text-align: center;
+}
+
+ry-heading[align="right"] {
+  text-align: end;
+}
+
+/* Balanced text wrapping for heading titles */
+ry-heading [data-ry-target="title"] {
+  text-wrap: balance;
+  margin: 0;
+}
+
+ry-heading [data-ry-target="sub"] {
+  margin: 0;
+}
+
+/* Divider variant: adds a bottom border */
+ry-heading[divider] {
+  padding-block-end: var(--ry-space-4, 1rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SEARCH LIST
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-search-list {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+ry-search-list [data-ry-target="search"] {
+  flex-shrink: 0;
+  padding: var(--ry-space-2) var(--ry-space-3);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+ry-search-list [data-ry-target="input"] {
+  width: 100%;
+  padding: var(--ry-space-2) var(--ry-space-3);
+  border: none;
+  background: transparent;
+  font: inherit;
+  outline: none;
+}
+
+ry-search-list [data-ry-target="list"] {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: var(--ry-space-1) var(--ry-space-2);
+}
+
+ry-search-list [data-ry-target="item"] {
+  display: flex;
+  align-items: center;
+  padding: var(--ry-space-1) var(--ry-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+ry-search-list [data-ry-target="item"][hidden] {
+  display: none;
+}
+
+ry-search-list [data-ry-target="group-header"] {
+  padding: var(--ry-space-2) var(--ry-space-3);
+  padding-top: var(--ry-space-4);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  pointer-events: none;
+  user-select: none;
+}
+
+ry-search-list [data-ry-target="group"][hidden] {
+  display: none;
+}
+
+ry-search-list [data-ry-target="empty"] {
+  padding: var(--ry-space-6) var(--ry-space-3);
+  text-align: center;
+}
+
+ry-search-list [data-ry-target="empty"][hidden] {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-avatar {
+  display: block;
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: var(--ry-space-4, 1rem);
+}
+
+.ry-avatar[data-size="lg"] {
+  width: 6rem;
+  height: 6rem;
+}
+
 } /* @layer ry-structure */
 
 /**
@@ -3295,6 +3885,46 @@ html {
   background-color: var(--ry-color-bg);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SECTION — INVERTED
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-section[inverted] {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+  border-radius: var(--ry-radius-lg);
+}
+
+ry-section[inverted] :is(h1, h2, h3, h4, p, span, a) {
+  color: inherit;
+}
+
+ry-section[inverted] p {
+  opacity: 0.7;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FOOTER — INVERTED
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-footer[inverted] {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+}
+
+ry-footer[inverted] :is(a, strong, p, span, nav) {
+  color: inherit;
+}
+
+ry-footer[inverted] a {
+  opacity: 0.7;
+  transition: opacity var(--ry-duration-fast);
+}
+
+ry-footer[inverted] a:hover {
+  opacity: 1;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    FOCUS STYLES
    ═══════════════════════════════════════════════════════════════ */
@@ -3397,11 +4027,14 @@ ry-nav a {
   color: var(--ry-color-text-muted);
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
-  transition: color var(--ry-duration-fast) var(--ry-ease);
+  border-radius: var(--ry-radius-md);
+  transition: color var(--ry-duration-fast) var(--ry-ease),
+              background-color var(--ry-duration-fast) var(--ry-ease);
 }
 
 ry-nav a:hover {
   color: var(--ry-color-text);
+  background-color: var(--ry-color-hover-overlay);
 }
 
 ry-nav a[aria-current="page"] {
@@ -3452,7 +4085,7 @@ ry-split [data-ry-target="handle"]:focus-visible::after {
    BUTTONS
    ═══════════════════════════════════════════════════════════════ */
 
-:is(.ry-btn, ry-button) {
+:is(:where(.ry-btn), ry-button) {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
@@ -3469,93 +4102,88 @@ ry-split [data-ry-target="handle"]:focus-visible::after {
   transition-timing-function: var(--ry-ease);
 }
 
-:is(.ry-btn, ry-button):hover {
+:is(:where(.ry-btn), ry-button):hover {
   background-color: var(--ry-color-primary-hover);
 }
 
-:is(.ry-btn, ry-button):active {
+:is(:where(.ry-btn), ry-button):active {
   background-color: var(--ry-color-primary-active);
 }
 
-:is(.ry-btn:disabled, .ry-btn[aria-disabled="true"], ry-button[disabled]) {
+:is(:where(.ry-btn:disabled, .ry-btn[aria-disabled="true"]), ry-button[disabled]) {
   opacity: 0.5;
 }
 
 /* Button variants */
-:is(.ry-btn--secondary, ry-button[variant="secondary"]) {
+:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]) {
   background-color: var(--ry-color-secondary);
 }
-:is(.ry-btn--secondary, ry-button[variant="secondary"]):hover {
+:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]):hover {
   background-color: var(--ry-color-secondary-hover);
 }
 
-:is(.ry-btn--outline, ry-button[variant="outline"]) {
+:is(:where(.ry-btn--outline), ry-button[variant="outline"]) {
   background-color: transparent;
   color: var(--ry-color-primary);
   border-color: var(--ry-color-primary);
 }
-:is(.ry-btn--outline, ry-button[variant="outline"]):hover {
+:is(:where(.ry-btn--outline), ry-button[variant="outline"]):hover {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
 }
 
-:is(.ry-btn--ghost, ry-button[variant="ghost"]) {
+:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]) {
   background-color: transparent;
   color: var(--ry-color-text);
 }
-:is(.ry-btn--ghost, ry-button[variant="ghost"]):hover {
+:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]):hover {
   background-color: var(--ry-color-bg-muted);
 }
 
-:is(.ry-btn--danger, ry-button[variant="danger"]) {
+:is(:where(.ry-btn--danger), ry-button[variant="danger"]) {
   background-color: var(--ry-color-danger);
 }
-:is(.ry-btn--danger, ry-button[variant="danger"]):hover {
+:is(:where(.ry-btn--danger), ry-button[variant="danger"]):hover {
   background-color: var(--ry-color-danger-hover);
 }
 
-:is(.ry-btn--accent, ry-button[variant="accent"]) {
+:is(:where(.ry-btn--accent), ry-button[variant="accent"]) {
   background-color: var(--ry-color-accent);
 }
-:is(.ry-btn--accent, ry-button[variant="accent"]):hover {
+:is(:where(.ry-btn--accent), ry-button[variant="accent"]):hover {
   background-color: var(--ry-color-accent-hover);
 }
 
+/* Link variant — inline text link */
+:is(:where(.ry-btn--link), ry-button[variant="link"]) {
+  background: none;
+  color: var(--ry-color-primary);
+  font-weight: var(--ry-font-semibold);
+  text-decoration: none;
+  border: none;
+}
+:is(:where(.ry-btn--link), ry-button[variant="link"]):hover {
+  text-decoration: underline;
+}
+
 /* Pressed/active toggle state */
-:is(.ry-btn[aria-pressed="true"], ry-button[pressed]) {
+:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]) {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
   border-color: var(--ry-color-primary);
 }
-:is(.ry-btn[aria-pressed="true"], ry-button[pressed]):hover {
+:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]):hover {
   background-color: var(--ry-color-primary-hover);
   border-color: var(--ry-color-primary-hover);
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   BUTTON GROUP
-   ═══════════════════════════════════════════════════════════════ */
-
-ry-button-group {
-  background-color: var(--ry-color-bg-muted);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--ry-color-text-muted);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button):hover:not([pressed]) {
-  color: var(--ry-color-text);
-}
 
 /* Button sizes (typography only - padding is structural) */
-:is(.ry-btn--sm, ry-button[size="sm"]) {
+:is(:where(.ry-btn--sm), ry-button[size="sm"]) {
   font-size: var(--ry-text-xs);
 }
 
-:is(.ry-btn--lg, ry-button[size="lg"]) {
+:is(:where(.ry-btn--lg), ry-button[size="lg"]) {
   font-size: var(--ry-text-base);
 }
 
@@ -4004,6 +4632,10 @@ ry-card p {
   color: var(--ry-color-text-muted);
 }
 
+ry-card > img:first-child {
+  border-radius: var(--ry-radius-md);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BADGES
    ═══════════════════════════════════════════════════════════════ */
@@ -4081,7 +4713,7 @@ ry-badge[style*="--ry-badge-color"] {
   color: var(--ry-color-danger-text);
 }
 
-:is(.ry-alert__title, ry-alert [slot="title"]) {
+.ry-alert__title {
   font-weight: var(--ry-font-semibold);
 }
 
@@ -5425,13 +6057,13 @@ ry-pricing-card h3 {
   color: var(--ry-color-text);
 }
 
-ry-pricing-card [slot="price"] {
+.ry-pricing-card__price {
   font-size: var(--ry-text-4xl);
   font-weight: var(--ry-font-bold);
   color: var(--ry-color-text);
 }
 
-ry-pricing-card [slot="price"] span {
+.ry-pricing-card__price span {
   font-size: var(--ry-text-base);
   font-weight: var(--ry-font-normal);
   color: var(--ry-color-text-muted);
@@ -5601,18 +6233,34 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
    LOGO BAR
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-logo-bar p {
+ry-logo-bar > p {
   color: var(--ry-color-text-muted);
   font-size: var(--ry-text-sm);
+  font-family: var(--ry-font-sans);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
-.ry-logo-bar span {
+ry-logo-bar span {
   font-size: var(--ry-text-2xl);
   font-weight: var(--ry-font-bold);
+  font-family: var(--ry-font-sans);
   color: var(--ry-color-text);
   opacity: 0.5;
+  transition: opacity var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-logo-bar span:hover {
+  opacity: 0.8;
+}
+
+ry-logo-bar img {
+  opacity: 0.5;
+  transition: opacity var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-logo-bar img:hover {
+  opacity: 0.8;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -5656,6 +6304,28 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
    ═══════════════════════════════════════════════════════════════ */
 
 [data-ry-theme="none"] {
+  /* Strictly black and white */
+  --ry-color-primary: light-dark(#000000, #ffffff);
+  --ry-color-primary-hover: light-dark(#333333, #cccccc);
+  --ry-color-primary-active: light-dark(#555555, #aaaaaa);
+  --ry-color-secondary: light-dark(#000000, #ffffff);
+  --ry-color-secondary-hover: light-dark(#333333, #cccccc);
+  --ry-color-secondary-active: light-dark(#555555, #aaaaaa);
+  --ry-color-accent: light-dark(#000000, #ffffff);
+  --ry-color-accent-hover: light-dark(#333333, #cccccc);
+  --ry-color-accent-active: light-dark(#555555, #aaaaaa);
+  --ry-color-text: light-dark(#000000, #ffffff);
+  --ry-color-text-muted: light-dark(#666666, #999999);
+  --ry-color-text-inverse: light-dark(#ffffff, #000000);
+  --ry-color-bg: light-dark(#ffffff, #000000);
+  --ry-color-bg-subtle: light-dark(#f5f5f5, #0a0a0a);
+  --ry-color-bg-muted: light-dark(#eeeeee, #111111);
+  --ry-color-border: light-dark(#dddddd, #333333);
+  --ry-color-border-strong: light-dark(#999999, #666666);
+  --ry-color-overlay: light-dark(rgba(255,255,255,0.95), rgba(0,0,0,0.95));
+  --ry-color-hover-overlay: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.06));
+  --ry-focus-ring: light-dark(0 0 0 3px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.3));
+  /* No radii, no shadows */
   --ry-radius-sm: 0;
   --ry-radius-md: 0;
   --ry-radius-lg: 0;
@@ -5701,4 +6371,135 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
   color: var(--ry-color-text-inverse);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   HEADING
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-heading__title {
+  font-size: var(--ry-text-2xl);
+  font-weight: var(--ry-font-bold);
+  line-height: var(--ry-leading-tight);
+  color: var(--ry-color-text);
+}
+
+.ry-heading__sub {
+  font-size: var(--ry-text-base);
+  line-height: var(--ry-leading-normal);
+  color: var(--ry-color-text-muted);
+}
+
+/* Size: sm */
+ry-heading[size="sm"] .ry-heading__title {
+  font-size: var(--ry-text-lg);
+}
+
+ry-heading[size="sm"] .ry-heading__sub {
+  font-size: var(--ry-text-sm);
+}
+
+/* Size: lg */
+ry-heading[size="lg"] .ry-heading__title {
+  font-size: var(--ry-text-4xl);
+}
+
+ry-heading[size="lg"] .ry-heading__sub {
+  font-size: var(--ry-text-lg);
+}
+
+/* Divider variant */
+ry-heading[divider] {
+  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SEARCH LIST
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-search-list__search {
+  background-color: var(--ry-color-bg);
+  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+}
+
+.ry-search-list__input {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+}
+
+.ry-search-list__input::placeholder {
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__item {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+  border-radius: var(--ry-radius-md);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-search-list__item[data-highlighted] {
+  background-color: var(--ry-color-bg-muted);
+}
+
+.ry-search-list__item[aria-selected="true"] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
+.ry-search-list__item[aria-selected="true"][data-highlighted] {
+  background-color: var(--ry-color-primary-hover);
+}
+
+.ry-search-list__group-header {
+  font-family: var(--ry-font-sans);
+  font-weight: 600;
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__empty {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__item mark {
+  background-color: transparent;
+  color: var(--ry-color-primary);
+  font-weight: 600;
+}
+
+.ry-search-list__item[aria-selected="true"] mark {
+  color: inherit;
+  text-decoration: underline;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: var(--ry-font-semibold);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-avatar {
+  border-radius: var(--ry-radius-full);
+  object-fit: cover;
+}
+
+.ry-bg-subtle {
+  background-color: var(--ry-color-bg-subtle);
+}
+
+.ry-bg-inverted {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+}
+
+.ry-bg-inverted p {
+  opacity: 0.7;
+}
+
 } /* @layer ry-theme */