@ryanhelsing/ry-ui 1.0.13 → 1.0.14

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;
 
-  /* 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));
+  /* 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
+     ═══════════════════════════════════════════════════════════════ */
+
+  /* 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 oklch, 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 oklch, 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 oklch, 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 oklch, 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; }
 
@@ -268,7 +333,7 @@ ry {
   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) {
   box-sizing: border-box;
 }
 
@@ -313,7 +378,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;
 }
 
@@ -584,11 +650,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 +676,7 @@ ry-actions {
   display: flex;
   align-items: center;
   gap: var(--ry-space-2, 0.5rem);
+  margin-inline-start: auto;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -3275,6 +3344,39 @@ 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);
+}
+
 } /* @layer ry-structure */
 
 /**
@@ -3397,11 +3499,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"] {
@@ -5656,6 +5761,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 +5828,44 @@ 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);
+}
+
 } /* @layer ry-theme */

package/dist/ry-ui.d.ts

@@ -62,6 +62,7 @@ export { RyPricing, RyPricingCard } from './components/ry-pricing.js';
 export { RyCarousel } from './components/ry-carousel.js';
 export { RyThemePanel } from './components/ry-theme-panel.js';
 export { RyTestimonial } from './components/ry-testimonial.js';
+export { RyHeading } from './components/ry-heading.js';
 export { getIcon, registerIcon, registerIcons, getIconNames } from './core/ry-icons.js';
 import { RyToast as _RyToast } from './components/ry-toast.js';
 declare global {

package/dist/ry-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ry-ui.d.ts","sourceRoot":"","sources":["../src/ts/ry-ui.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ry-ui.d.ts","sourceRoot":"","sources":["../src/ts/ry-ui.ts"],"names":[],"mappings":"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"}