@ryanhelsing/ry-ui 1.0.2 → 1.0.4

package/dist/css/ry-theme.css

@@ -6,6 +6,8 @@
  * Override these styles or swap with your own theme.
  */
 
+@layer ry-theme {
+
 /* ═══════════════════════════════════════════════════════════════
    BASE / BODY
    ═══════════════════════════════════════════════════════════════ */
@@ -18,11 +20,7 @@ html {
    FOCUS STYLES
    ═══════════════════════════════════════════════════════════════ */
 
-[class^="ry-"]:focus-visible,
-[class*=" ry-"]:focus-visible,
-ry-button:focus-visible,
-.ry-btn:focus-visible,
-.ry-input:focus-visible {
+:is([class^="ry-"], [class*=" ry-"], ry-button, .ry-btn, .ry-input):focus-visible {
   outline: none;
   box-shadow: var(--ry-focus-ring);
 }
@@ -39,7 +37,7 @@ ry-page {
   background-color: var(--ry-color-bg);
 }
 
-ry-page h1, ry-page h2, ry-page h3, ry-page h4, ry-page h5, ry-page h6 {
+ry-page :is(h1, h2, h3, h4, h5, h6) {
   margin: 0 0 var(--ry-space-4) 0;
   font-weight: var(--ry-font-semibold);
   line-height: var(--ry-leading-tight);
@@ -70,7 +68,7 @@ ry-page a:hover {
 
 ry-header {
   background-color: var(--ry-color-bg);
-  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -79,7 +77,7 @@ ry-header {
 
 ry-footer {
   background-color: var(--ry-color-bg-subtle);
-  border-top: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
   color: var(--ry-color-text-muted);
 }
 
@@ -120,12 +118,33 @@ ry-divider {
   background-color: var(--ry-color-border);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SPLIT HANDLE
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-split [data-ry-target="handle"]::after {
+  background-color: var(--ry-color-border-strong);
+}
+
+ry-split[data-ry-resizing] [data-ry-target="handle"]::after {
+  background-color: var(--ry-color-primary);
+}
+
+ry-split [data-ry-target="handle"]:focus-visible {
+  outline: none;
+}
+
+ry-split [data-ry-target="handle"]:focus-visible::after {
+  opacity: 1;
+  background-color: var(--ry-color-primary);
+  box-shadow: var(--ry-focus-ring);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BUTTONS
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-btn,
-ry-button {
+:is(.ry-btn, ry-button) {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
@@ -142,71 +161,98 @@ ry-button {
   transition-timing-function: var(--ry-ease);
 }
 
-.ry-btn:hover,
-ry-button:hover {
+:is(.ry-btn, ry-button):hover {
   background-color: var(--ry-color-primary-hover);
 }
 
-.ry-btn:active,
-ry-button:active {
+:is(.ry-btn, ry-button):active {
   background-color: var(--ry-color-primary-active);
 }
 
-.ry-btn:disabled,
-.ry-btn[aria-disabled="true"],
-ry-button[disabled] {
+:is(.ry-btn:disabled, .ry-btn[aria-disabled="true"], ry-button[disabled]) {
   opacity: 0.5;
 }
 
 /* Button variants */
-.ry-btn--secondary,
-ry-button[variant="secondary"] {
+:is(.ry-btn--secondary, ry-button[variant="secondary"]) {
   background-color: var(--ry-color-secondary);
 }
-.ry-btn--secondary:hover,
-ry-button[variant="secondary"]:hover {
+:is(.ry-btn--secondary, ry-button[variant="secondary"]):hover {
   background-color: var(--ry-color-secondary-hover);
 }
 
-.ry-btn--outline,
-ry-button[variant="outline"] {
+:is(.ry-btn--outline, ry-button[variant="outline"]) {
   background-color: transparent;
   color: var(--ry-color-primary);
   border-color: var(--ry-color-primary);
 }
-.ry-btn--outline:hover,
-ry-button[variant="outline"]:hover {
+:is(.ry-btn--outline, ry-button[variant="outline"]):hover {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
 }
 
-.ry-btn--ghost,
-ry-button[variant="ghost"] {
+:is(.ry-btn--ghost, ry-button[variant="ghost"]) {
   background-color: transparent;
   color: var(--ry-color-text);
 }
-.ry-btn--ghost:hover,
-ry-button[variant="ghost"]:hover {
+:is(.ry-btn--ghost, ry-button[variant="ghost"]):hover {
   background-color: var(--ry-color-bg-muted);
 }
 
-.ry-btn--danger,
-ry-button[variant="danger"] {
+:is(.ry-btn--danger, ry-button[variant="danger"]) {
   background-color: var(--ry-color-danger);
 }
-.ry-btn--danger:hover,
-ry-button[variant="danger"]:hover {
-  background-color: var(--ry-color-danger-hover, #dc2626);
+:is(.ry-btn--danger, ry-button[variant="danger"]):hover {
+  background-color: var(--ry-color-danger-hover);
+}
+
+:is(.ry-btn--accent, ry-button[variant="accent"]) {
+  background-color: var(--ry-color-accent);
+}
+:is(.ry-btn--accent, ry-button[variant="accent"]):hover {
+  background-color: var(--ry-color-accent-hover);
+}
+
+/* Pressed/active toggle state */
+:is(.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 {
+  background-color: var(--ry-color-primary-hover);
+  border-color: var(--ry-color-primary-hover);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTON GROUP
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-button-group > :is(ry-button, ry-toggle-button) {
+  border-color: var(--ry-color-border);
+}
+
+ry-button-group > :is(ry-button, ry-toggle-button):not(:first-child) {
+  border-inline-start-color: transparent;
+}
+
+/* Default children to outline style for segmented look */
+ry-button-group:not([variant]) > :is(ry-button, ry-toggle-button):not([pressed]) {
+  background-color: var(--ry-color-bg);
+  color: var(--ry-color-text);
+  border-color: var(--ry-color-border);
+}
+
+ry-button-group:not([variant]) > :is(ry-button, ry-toggle-button):not([pressed]):hover {
+  background-color: var(--ry-color-bg-muted);
 }
 
 /* Button sizes (typography only - padding is structural) */
-.ry-btn--sm,
-ry-button[size="sm"] {
+:is(.ry-btn--sm, ry-button[size="sm"]) {
   font-size: var(--ry-text-xs);
 }
 
-.ry-btn--lg,
-ry-button[size="lg"] {
+:is(.ry-btn--lg, ry-button[size="lg"]) {
   font-size: var(--ry-text-base);
 }
 
@@ -440,37 +486,43 @@ ry-knob[color="danger"] [data-ry-target="indicator"] { background-color: var(--r
 }
 
 .ry-number-select__decrement {
-  border-radius: var(--ry-radius-md) 0 0 var(--ry-radius-md);
-  border-right: none;
+  border-start-start-radius: var(--ry-radius-md);
+  border-end-start-radius: var(--ry-radius-md);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-inline-end: none;
 }
 
 .ry-number-select__increment {
-  border-radius: 0 var(--ry-radius-md) var(--ry-radius-md) 0;
-  border-left: none;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--ry-radius-md);
+  border-end-end-radius: var(--ry-radius-md);
+  border-inline-start: none;
 }
 
 /* Single-button rounding */
 ry-number-select[arrows="start"] .ry-number-select__decrement {
   border-radius: var(--ry-radius-md);
-  border-right: var(--ry-border-width) solid var(--ry-color-border);
+  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 ry-number-select[arrows="end"] .ry-number-select__increment {
   border-radius: var(--ry-radius-md);
-  border-left: var(--ry-border-width) solid var(--ry-color-border);
+  border-inline-start: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 .ry-number-select__display {
   background-color: var(--ry-color-bg);
-  border-top: var(--ry-border-width) solid var(--ry-color-border);
-  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 /* Display borders when both arrows */
 ry-number-select:not([arrows]) .ry-number-select__display,
 ry-number-select[arrows="both"] .ry-number-select__display {
-  border-left: none;
-  border-right: none;
+  border-inline-start: none;
+  border-inline-end: none;
 }
 
 /* No arrows: full border + radius */
@@ -479,42 +531,100 @@ ry-number-select[arrows="none"] .ry-number-select__display {
   border-radius: var(--ry-radius-md);
 }
 
-/* Start only: display gets right border + right radius */
+/* Start only: display gets end border + end radius */
 ry-number-select[arrows="start"] .ry-number-select__display {
-  border-right: var(--ry-border-width) solid var(--ry-color-border);
-  border-left: none;
-  border-radius: 0 var(--ry-radius-md) var(--ry-radius-md) 0;
+  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
+  border-inline-start: none;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--ry-radius-md);
+  border-end-end-radius: var(--ry-radius-md);
 }
 
-/* End only: display gets left border + left radius */
+/* End only: display gets start border + start radius */
 ry-number-select[arrows="end"] .ry-number-select__display {
-  border-left: var(--ry-border-width) solid var(--ry-color-border);
-  border-right: none;
-  border-radius: var(--ry-radius-md) 0 0 var(--ry-radius-md);
+  border-inline-start: var(--ry-border-width) solid var(--ry-color-border);
+  border-inline-end: none;
+  border-start-start-radius: var(--ry-radius-md);
+  border-end-start-radius: var(--ry-radius-md);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
 /* Stacked: top-rounded increment, bottom-rounded decrement, no radius on display */
 ry-number-select[arrows="stacked"] .ry-number-select__increment {
   border: var(--ry-border-width) solid var(--ry-color-border);
-  border-bottom: none;
+  border-block-end: none;
   border-radius: var(--ry-radius-md) var(--ry-radius-md) 0 0;
-  border-left: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 ry-number-select[arrows="stacked"] .ry-number-select__decrement {
   border: var(--ry-border-width) solid var(--ry-color-border);
-  border-top: none;
+  border-block-start: none;
   border-radius: 0 0 var(--ry-radius-md) var(--ry-radius-md);
-  border-right: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 ry-number-select[arrows="stacked"] .ry-number-select__display {
   border: var(--ry-border-width) solid var(--ry-color-border);
-  border-top: none;
-  border-bottom: none;
+  border-block-start: none;
+  border-block-end: none;
   border-radius: 0;
 }
 
+/* Stacked-end: display start-rounded, buttons end-rounded */
+ry-number-select[arrows="stacked-end"] .ry-number-select__display {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-inline-end: none;
+  border-start-start-radius: var(--ry-radius-md);
+  border-end-start-radius: var(--ry-radius-md);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+ry-number-select[arrows="stacked-end"] .ry-number-select__increment {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: none;
+  border-start-end-radius: var(--ry-radius-md);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+ry-number-select[arrows="stacked-end"] .ry-number-select__decrement {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-end-end-radius: var(--ry-radius-md);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/* Stacked-start: buttons start-rounded, display end-rounded */
+ry-number-select[arrows="stacked-start"] .ry-number-select__display {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-inline-start: none;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--ry-radius-md);
+  border-end-end-radius: var(--ry-radius-md);
+}
+
+ry-number-select[arrows="stacked-start"] .ry-number-select__increment {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: none;
+  border-start-start-radius: var(--ry-radius-md);
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+ry-number-select[arrows="stacked-start"] .ry-number-select__decrement {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-end-start-radius: var(--ry-radius-md);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .ry-number-select__value {
   font-family: var(--ry-font-mono);
   font-size: var(--ry-text-sm);
@@ -529,7 +639,7 @@ ry-number-select[arrows="stacked"] .ry-number-select__display {
   color: var(--ry-color-text);
   background: transparent;
   border: none;
-  border-bottom: 2px solid var(--ry-color-primary);
+  border-block-end: 2px solid var(--ry-color-primary);
 }
 
 .ry-number-select__display:focus-visible {
@@ -585,8 +695,7 @@ ry-card p {
    BADGES
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-badge,
-ry-badge {
+:is(.ry-badge, ry-badge) {
   font-size: var(--ry-text-xs);
   font-weight: var(--ry-font-medium);
   background-color: var(--ry-color-bg-muted);
@@ -594,71 +703,72 @@ ry-badge {
   border-radius: var(--ry-radius-full);
 }
 
-.ry-badge--primary,
-ry-badge[variant="primary"] {
+:is(.ry-badge--primary, ry-badge[variant="primary"]) {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
 }
 
-.ry-badge--success,
-ry-badge[variant="success"] {
+:is(.ry-badge--success, ry-badge[variant="success"]) {
   background-color: var(--ry-color-success);
   color: var(--ry-color-text-inverse);
 }
 
-.ry-badge--warning,
-ry-badge[variant="warning"] {
+:is(.ry-badge--warning, ry-badge[variant="warning"]) {
   background-color: var(--ry-color-warning);
   color: var(--ry-color-text);
 }
 
-.ry-badge--danger,
-ry-badge[variant="danger"] {
+:is(.ry-badge--danger, ry-badge[variant="danger"]) {
   background-color: var(--ry-color-danger);
   color: var(--ry-color-text-inverse);
 }
 
+:is(.ry-badge--accent, ry-badge[variant="accent"]) {
+  background-color: var(--ry-color-accent);
+  color: var(--ry-color-text-inverse);
+}
+
+/* Arbitrary color via style="--ry-badge-color: ..." */
+ry-badge[style*="--ry-badge-color"] {
+  background-color: var(--ry-badge-color);
+  color: var(--ry-badge-text, var(--ry-color-text-inverse));
+}
+
 /* ═══════════════════════════════════════════════════════════════
    ALERTS
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-alert,
-ry-alert {
+:is(.ry-alert, ry-alert) {
   background-color: var(--ry-color-bg-subtle);
   border: var(--ry-border-width) solid var(--ry-color-border);
   border-radius: var(--ry-radius-lg);
 }
 
-.ry-alert--info,
-ry-alert[type="info"] {
-  background-color: var(--ry-color-info-bg, #ecfeff);
+:is(.ry-alert--info, ry-alert[type="info"]) {
+  background-color: var(--ry-color-info-bg);
   border-color: var(--ry-color-info);
-  color: var(--ry-color-info-text, #0e7490);
+  color: var(--ry-color-info-text);
 }
 
-.ry-alert--success,
-ry-alert[type="success"] {
-  background-color: var(--ry-color-success-bg, #f0fdf4);
+:is(.ry-alert--success, ry-alert[type="success"]) {
+  background-color: var(--ry-color-success-bg);
   border-color: var(--ry-color-success);
-  color: var(--ry-color-success-text, #15803d);
+  color: var(--ry-color-success-text);
 }
 
-.ry-alert--warning,
-ry-alert[type="warning"] {
-  background-color: var(--ry-color-warning-bg, #fffbeb);
+:is(.ry-alert--warning, ry-alert[type="warning"]) {
+  background-color: var(--ry-color-warning-bg);
   border-color: var(--ry-color-warning);
-  color: var(--ry-color-warning-text, #b45309);
+  color: var(--ry-color-warning-text);
 }
 
-.ry-alert--danger,
-ry-alert[type="danger"] {
-  background-color: var(--ry-color-danger-bg, #fef2f2);
+:is(.ry-alert--danger, ry-alert[type="danger"]) {
+  background-color: var(--ry-color-danger-bg);
   border-color: var(--ry-color-danger);
-  color: var(--ry-color-danger-text, #b91c1c);
+  color: var(--ry-color-danger-text);
 }
 
-.ry-alert__title,
-ry-alert [slot="title"] {
+:is(.ry-alert__title, ry-alert [slot="title"]) {
   font-weight: var(--ry-font-semibold);
 }
 
@@ -666,10 +776,7 @@ ry-alert [slot="title"] {
    FORM ELEMENTS
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-input,
-ry-field input,
-ry-field textarea,
-ry-field select {
+:is(.ry-input, ry-field input, ry-field textarea, ry-field select) {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-base);
   line-height: var(--ry-leading-normal);
@@ -683,40 +790,50 @@ ry-field select {
               box-shadow var(--ry-duration-fast) var(--ry-ease);
 }
 
-.ry-input:hover,
-ry-field input:hover,
-ry-field textarea:hover {
+:is(.ry-input, ry-field input, ry-field textarea):hover {
   border-color: var(--ry-color-border-strong);
 }
 
-.ry-input:focus,
-ry-field input:focus,
-ry-field textarea:focus {
+:is(.ry-input, ry-field input, ry-field textarea):focus {
   outline: none;
   border-color: var(--ry-color-primary);
   box-shadow: var(--ry-focus-ring);
 }
 
-.ry-input::placeholder,
-ry-field input::placeholder,
-ry-field textarea::placeholder {
+:is(.ry-input, ry-field input, ry-field textarea)::placeholder {
   color: var(--ry-color-text-muted);
 }
 
-.ry-input:disabled,
-ry-field input:disabled,
-ry-field textarea:disabled {
+:is(.ry-input, ry-field input, ry-field textarea):disabled {
   background-color: var(--ry-color-bg-muted);
   opacity: 0.5;
 }
 
-.ry-label,
-ry-field label {
+:is(.ry-label, ry-field label) {
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
   color: var(--ry-color-text);
 }
 
+.ry-field__error {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-danger);
+}
+
+.ry-field__hint {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+/* Error state on input */
+ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select) {
+  border-color: var(--ry-color-danger);
+}
+
+ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select):focus {
+  box-shadow: 0 0 0 3px light-dark(oklch(0.637 0.208 25.3 / 0.3), oklch(0.637 0.208 25.3 / 0.3));
+}
+
 /* ═══════════════════════════════════════════════════════════════
    ACCORDION
    ═══════════════════════════════════════════════════════════════ */
@@ -726,14 +843,12 @@ ry-accordion {
   border-radius: var(--ry-radius-lg);
 }
 
-.ry-accordion__item,
-ry-accordion-item {
-  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+:is(.ry-accordion__item, ry-accordion-item) {
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
-.ry-accordion__item:last-child,
-ry-accordion-item:last-child {
-  border-bottom: none;
+:is(.ry-accordion__item, ry-accordion-item):last-child {
+  border-block-end: none;
 }
 
 .ry-accordion__trigger {
@@ -763,7 +878,7 @@ ry-accordion-item:last-child {
    ═══════════════════════════════════════════════════════════════ */
 
 .ry-tabs__list {
-  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 .ry-tabs__trigger {
@@ -782,7 +897,7 @@ ry-accordion-item:last-child {
 
 .ry-tabs__trigger[aria-selected="true"] {
   color: var(--ry-color-primary);
-  border-bottom-color: var(--ry-color-primary);
+  border-block-end-color: var(--ry-color-primary);
 }
 
 .ry-tabs__trigger:focus-visible {
@@ -806,7 +921,7 @@ ry-accordion-item:last-child {
 }
 
 .ry-modal__header {
-  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 .ry-modal__title {
@@ -829,7 +944,7 @@ ry-accordion-item:last-child {
 }
 
 .ry-modal__footer {
-  border-top: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
   background-color: var(--ry-color-bg-subtle);
 }
 
@@ -837,16 +952,14 @@ ry-accordion-item:last-child {
    DROPDOWN
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-dropdown__menu,
-ry-menu {
+:is(.ry-dropdown__menu, ry-menu) {
   background-color: var(--ry-color-bg);
   border: var(--ry-border-width) solid var(--ry-color-border);
   border-radius: var(--ry-radius-lg);
   box-shadow: var(--ry-shadow-lg);
 }
 
-.ry-dropdown__item,
-ry-menu-item {
+:is(.ry-dropdown__item, ry-menu-item) {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-sm);
   color: var(--ry-color-text);
@@ -855,13 +968,11 @@ ry-menu-item {
   transition: background-color var(--ry-duration-fast) var(--ry-ease);
 }
 
-.ry-dropdown__item:hover,
-ry-menu-item:hover {
+:is(.ry-dropdown__item, ry-menu-item):hover {
   background-color: var(--ry-color-bg-muted);
 }
 
-.ry-dropdown__item:focus-visible,
-ry-menu-item:focus-visible {
+:is(.ry-dropdown__item, ry-menu-item):focus-visible {
   outline: none;
   box-shadow: inset var(--ry-focus-ring);
 }
@@ -1063,8 +1174,7 @@ ry-select[data-ry-state="open"] .ry-select__trigger {
   transition: background-color var(--ry-duration-fast) var(--ry-ease);
 }
 
-.ry-select__option:hover,
-.ry-select__option[data-highlighted] {
+.ry-select__option:is(:hover, [data-highlighted]) {
   background-color: var(--ry-color-bg-muted);
 }
 
@@ -1081,106 +1191,131 @@ ry-select[data-ry-state="open"] .ry-select__trigger {
   background-color: transparent;
 }
 
+/* Multi-select checkmarks */
+.ry-select__check {
+  color: var(--ry-color-primary);
+}
+
+.ry-select__clear {
+  background: transparent;
+  color: var(--ry-color-text-muted);
+  border-radius: var(--ry-radius-full);
+  transition: color var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-select__clear:hover {
+  color: var(--ry-color-text);
+}
+
+/* Multi: checkmark is the indicator, no bg change on selected */
+ry-select[multiple] .ry-select__option[aria-selected="true"] {
+  background-color: transparent;
+  color: var(--ry-color-text);
+}
+
+ry-select[multiple] .ry-select__option[aria-selected="true"]:is(:hover, [data-highlighted]) {
+  background-color: var(--ry-color-bg-muted);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    CODE
    ═══════════════════════════════════════════════════════════════ */
 
 ry-code {
-  background-color: var(--ry-code-bg, #f6f8fa);
+  background-color: var(--ry-code-bg);
   border-radius: var(--ry-radius-lg);
   box-shadow: var(--ry-shadow-lg);
 }
 
 .ry-code__header {
-  background-color: var(--ry-code-header-bg, #eaeef2);
+  background-color: var(--ry-code-header-bg);
 }
 
 .ry-code__title {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-xs);
   font-weight: var(--ry-font-bold);
-  color: var(--ry-code-title-color, #57606a);
+  color: var(--ry-code-title-color);
 }
 
 .ry-code__copy {
   background: transparent;
   border-radius: var(--ry-radius-full);
-  color: var(--ry-code-icon-color, #8c959f);
+  color: var(--ry-code-icon-color);
   transition: background-color var(--ry-duration-fast) var(--ry-ease),
               color var(--ry-duration-fast) var(--ry-ease);
 }
 
 .ry-code__copy:hover {
-  background-color: var(--ry-code-icon-hover-bg, #d0d7de);
-  color: var(--ry-code-icon-hover-color, #24292f);
+  background-color: var(--ry-code-icon-hover-bg);
+  color: var(--ry-code-icon-hover-color);
 }
 
 .ry-code__copy--success {
   color: var(--ry-color-success);
 }
 
-.ry-code__pre,
-.ry-code__code {
+:is(.ry-code__pre, .ry-code__code) {
   font-family: var(--ry-font-mono);
   font-size: var(--ry-text-sm);
   line-height: var(--ry-leading-relaxed);
-  color: var(--ry-code-text-color, #24292f);
+  color: var(--ry-code-text-color);
 }
 
 .ry-code__line-number {
-  color: var(--ry-code-line-number-color, rgba(140, 149, 159, 0.6));
-  border-right: 1px solid var(--ry-code-line-border-color, #d0d7de);
+  color: var(--ry-code-line-number-color);
+  border-inline-end: 1px solid var(--ry-code-line-border-color);
 }
 
 .ry-code__color-preview {
-  border: 1px solid var(--ry-code-color-preview-border, rgba(36, 41, 47, 0.3));
+  border: 1px solid var(--ry-code-color-preview-border);
   border-radius: var(--ry-radius-sm);
 }
 
-/* Syntax highlighting colors (Cool/GitHub light as default) */
+/* Syntax highlighting colors */
 .ry-code__keyword {
-  color: var(--ry-code-keyword, #cf222e);
+  color: var(--ry-code-keyword);
 }
 
 .ry-code__property {
-  color: var(--ry-code-property, #0550ae);
+  color: var(--ry-code-property);
 }
 
 .ry-code__value {
-  color: var(--ry-code-value, #0a3069);
+  color: var(--ry-code-value);
 }
 
 .ry-code__string {
-  color: var(--ry-code-string, #0a3069);
+  color: var(--ry-code-string);
 }
 
 .ry-code__number {
-  color: var(--ry-code-number, #0550ae);
+  color: var(--ry-code-number);
 }
 
 .ry-code__comment {
-  color: var(--ry-code-comment, #6e7781);
+  color: var(--ry-code-comment);
   font-style: italic;
 }
 
 .ry-code__selector {
-  color: var(--ry-code-selector, #116329);
+  color: var(--ry-code-selector);
 }
 
 .ry-code__punctuation {
-  color: var(--ry-code-punctuation, #24292f);
+  color: var(--ry-code-punctuation);
 }
 
 .ry-code__tag {
-  color: var(--ry-code-tag, #116329);
+  color: var(--ry-code-tag);
 }
 
 .ry-code__attribute {
-  color: var(--ry-code-attribute, #0550ae);
+  color: var(--ry-code-attribute);
 }
 
 .ry-code__color {
-  color: var(--ry-code-value, #0a3069);
+  color: var(--ry-code-value);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -1249,8 +1384,8 @@ input[type="checkbox"]:checked:hover {
 }
 
 input[type="checkbox"]::after {
-  border-right: 2px solid var(--ry-color-text-inverse);
-  border-bottom: 2px solid var(--ry-color-text-inverse);
+  border-inline-end: 2px solid var(--ry-color-text-inverse);
+  border-block-end: 2px solid var(--ry-color-text-inverse);
   margin-bottom: 2px;
 }
 
@@ -1314,15 +1449,15 @@ th {
   font-weight: var(--ry-font-semibold);
   color: var(--ry-color-text);
   background-color: var(--ry-color-bg-subtle);
-  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 td {
-  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
 tbody tr:last-child td {
-  border-bottom: none;
+  border-block-end: none;
 }
 
 tbody tr:hover {
@@ -1335,8 +1470,7 @@ table[data-bordered] {
   border-radius: var(--ry-radius-lg);
 }
 
-table[data-bordered] th,
-table[data-bordered] td {
+table[data-bordered] :is(th, td) {
   border: var(--ry-border-width) solid var(--ry-color-border);
 }
 
@@ -1371,7 +1505,7 @@ ry-color-picker [data-ry-target="trigger"]:focus-visible {
 
 ry-color-picker [data-ry-target="trigger-color"] {
   border-radius: calc(var(--ry-radius-md) - 1px);
-  outline: 3px solid rgba(0, 0, 0, 0.2);
+  outline: 3px solid oklch(0 0 0 / 0.2);
   outline-offset: -3px;
 }
 
@@ -1400,12 +1534,12 @@ ry-color-picker [data-ry-target="grid-handle"] {
   background-color: transparent;
   border: 2px solid #fff;
   border-radius: var(--ry-radius-full);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), inset 0 0 0 1px oklch(0 0 0 / 0.3);
 }
 
 ry-color-picker [data-ry-target="grid-handle"]:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3), var(--ry-focus-ring);
+  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), inset 0 0 0 1px oklch(0 0 0 / 0.3), var(--ry-focus-ring);
 }
 
 /* Hue slider */
@@ -1437,12 +1571,12 @@ ry-color-picker .ry-color-picker__alpha {
 ry-color-picker .ry-color-picker__slider-handle {
   background-color: #fff;
   border-radius: var(--ry-radius-full);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), var(--ry-shadow-sm);
+  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.2), var(--ry-shadow-sm);
 }
 
 ry-color-picker .ry-color-picker__slider-handle:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), var(--ry-focus-ring);
+  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.2), var(--ry-focus-ring);
 }
 
 /* Preview */
@@ -1456,7 +1590,7 @@ ry-color-picker [data-ry-target="preview"] {
 
 ry-color-picker [data-ry-target="preview-color"] {
   border-radius: inherit;
-  outline: 3px solid rgba(0, 0, 0, 0.2);
+  outline: 3px solid oklch(0 0 0 / 0.2);
   outline-offset: -3px;
 }
 
@@ -1550,7 +1684,7 @@ ry-color-input:focus-within [data-ry-target="trigger"] {
 ry-color-input [data-ry-target="swatch"] {
   background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
   background-size: 8px 8px;
-  border-right: var(--ry-border-width) solid var(--ry-color-border);
+  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
   transition: background-color var(--ry-duration-fast) var(--ry-ease);
 }
 
@@ -1563,7 +1697,7 @@ ry-color-input [data-ry-target="swatch"]:focus-visible {
 }
 
 ry-color-input [data-ry-target="swatch-color"] {
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
 }
 
 ry-color-input [data-ry-target="input"] {
@@ -1647,7 +1781,7 @@ ry-gradient-picker [data-ry-target="shape-control"] button[data-active] {
 /* Gradient bar */
 ry-gradient-picker [data-ry-target="bar"] {
   border-radius: var(--ry-radius-full, 9999px);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
 }
 
 /* Stop handles */
@@ -1655,7 +1789,7 @@ ry-gradient-picker [data-ry-target="stop"] {
   background-color: var(--stop-color, #fff);
   border: 2px solid #fff;
   border-radius: var(--ry-radius-full);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), var(--ry-shadow-sm);
+  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), var(--ry-shadow-sm);
   transition: transform var(--ry-duration-fast) var(--ry-ease),
               opacity var(--ry-duration-fast) var(--ry-ease);
 }
@@ -1719,7 +1853,7 @@ ry-tree {
 
 /* Vertical connector line */
 .ry-tree__children {
-  border-left: 1px solid var(--ry-color-border);
+  border-inline-start: 1px solid var(--ry-color-border);
 }
 
 /* Horizontal connector line */
@@ -1727,8 +1861,7 @@ ry-tree {
   background-color: var(--ry-color-border);
 }
 
-.ry-tree__label,
-.ry-tree__file {
+:is(.ry-tree__label, .ry-tree__file) {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-sm);
   color: var(--ry-color-text);
@@ -1736,8 +1869,7 @@ ry-tree {
   transition: background-color var(--ry-duration-fast) var(--ry-ease);
 }
 
-.ry-tree__label:hover,
-.ry-tree__file:hover {
+:is(.ry-tree__label, .ry-tree__file):hover {
   background-color: var(--ry-color-bg-muted);
 }
 
@@ -1778,12 +1910,11 @@ input[type="checkbox"].ry-tree__toggle::after {
 }
 
 .ry-tree__item--collapsed {
-  background-color: color-mix(in srgb, var(--ry-color-primary) 10%, transparent);
+  background-color: color-mix(in oklch, var(--ry-color-primary) 10%, transparent);
   border-radius: var(--ry-radius-sm);
 }
 
-.ry-tree__item[data-ry-drop-target="before"]::after,
-.ry-tree__item[data-ry-drop-target="after"]::after {
+.ry-tree__item:is([data-ry-drop-target="before"], [data-ry-drop-target="after"])::after {
   background-color: var(--ry-color-primary);
 }
 
@@ -1796,3 +1927,273 @@ input[type="checkbox"].ry-tree__toggle::after {
 .ry-tree__item[data-ry-drop-target="inside"] > .ry-tree__label .ry-tree__icon {
   color: var(--ry-color-text-inverse);
 }
+
+/* ═══════════════════════════════════════════════════════════════
+   TAG
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tag {
+  font-size: var(--ry-text-xs);
+  font-weight: var(--ry-font-medium);
+  background-color: var(--ry-color-bg-muted);
+  color: var(--ry-color-text);
+  border-radius: var(--ry-radius-full);
+}
+
+ry-tag[variant="primary"] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
+ry-tag[variant="success"] {
+  background-color: var(--ry-color-success);
+  color: var(--ry-color-text-inverse);
+}
+
+ry-tag[variant="warning"] {
+  background-color: var(--ry-color-warning);
+  color: var(--ry-color-text);
+}
+
+ry-tag[variant="danger"] {
+  background-color: var(--ry-color-danger);
+  color: var(--ry-color-text-inverse);
+}
+
+ry-tag[disabled] {
+  opacity: 0.5;
+}
+
+.ry-tag__remove {
+  background: transparent;
+  color: currentColor;
+  border-radius: var(--ry-radius-full);
+  opacity: 0.6;
+  transition: opacity var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-tag__remove:hover {
+  opacity: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TAG INPUT
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-tag-input__container {
+  background-color: var(--ry-color-bg);
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-radius: var(--ry-radius-md);
+  transition: border-color var(--ry-duration-fast) var(--ry-ease),
+              box-shadow var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-tag-input__container:hover {
+  border-color: var(--ry-color-border-strong);
+}
+
+.ry-tag-input__container:focus-within {
+  border-color: var(--ry-color-primary);
+  box-shadow: var(--ry-focus-ring);
+}
+
+.ry-tag-input__input {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+  background: transparent;
+  border: none;
+}
+
+.ry-tag-input__input:focus,
+.ry-tag-input__input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.ry-tag-input__input::placeholder {
+  color: var(--ry-color-text-muted);
+}
+
+ry-tag-input[disabled] .ry-tag-input__container {
+  opacity: 0.5;
+  background-color: var(--ry-color-bg-muted);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   HERO
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-hero h1 {
+  font-size: var(--ry-text-4xl);
+  font-weight: var(--ry-font-bold);
+  line-height: var(--ry-leading-tight);
+  color: var(--ry-color-text);
+}
+
+ry-hero p {
+  font-size: var(--ry-text-lg);
+  line-height: var(--ry-leading-relaxed);
+  color: var(--ry-color-text-muted);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   STAT
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-stat__value {
+  font-size: var(--ry-text-3xl);
+  font-weight: var(--ry-font-bold);
+  color: var(--ry-color-text);
+}
+
+ry-stat[size="sm"] .ry-stat__value {
+  font-size: var(--ry-text-2xl);
+}
+
+ry-stat[size="lg"] .ry-stat__value {
+  font-size: var(--ry-text-4xl);
+}
+
+.ry-stat__label {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-stat__trend--up {
+  color: var(--ry-color-success);
+}
+
+.ry-stat__trend--down {
+  color: var(--ry-color-danger);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FEATURE
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-feature__icon {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+  border-radius: var(--ry-radius-full);
+}
+
+ry-feature h3 {
+  font-size: var(--ry-text-lg);
+  font-weight: var(--ry-font-semibold);
+  color: var(--ry-color-text);
+}
+
+ry-feature p {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+  line-height: var(--ry-leading-relaxed);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PRICING
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-pricing-card {
+  background-color: var(--ry-color-bg);
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-radius: var(--ry-radius-xl);
+  box-shadow: var(--ry-shadow-sm);
+}
+
+ry-pricing-card[featured] {
+  border-color: var(--ry-color-primary);
+  box-shadow: var(--ry-shadow-lg);
+}
+
+ry-pricing-card h3 {
+  font-size: var(--ry-text-xl);
+  font-weight: var(--ry-font-semibold);
+  color: var(--ry-color-text);
+}
+
+ry-pricing-card [slot="price"] {
+  font-size: var(--ry-text-4xl);
+  font-weight: var(--ry-font-bold);
+  color: var(--ry-color-text);
+}
+
+ry-pricing-card [slot="price"] span {
+  font-size: var(--ry-text-base);
+  font-weight: var(--ry-font-normal);
+  color: var(--ry-color-text-muted);
+}
+
+ry-pricing-card ul li {
+  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+ry-pricing-card ul li:last-child {
+  border-block-end: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CAROUSEL
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-carousel__arrow {
+  background-color: var(--ry-color-bg);
+  color: var(--ry-color-text);
+  border-radius: var(--ry-radius-full);
+  box-shadow: var(--ry-shadow-md);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease),
+              box-shadow var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-carousel__arrow:hover {
+  background-color: var(--ry-color-bg-muted);
+  box-shadow: var(--ry-shadow-lg);
+}
+
+.ry-carousel__arrow:focus-visible {
+  outline: none;
+  box-shadow: var(--ry-focus-ring);
+}
+
+.ry-carousel__dot {
+  background-color: var(--ry-color-border);
+  border-radius: var(--ry-radius-full);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-carousel__dot[data-active] {
+  background-color: var(--ry-color-primary);
+}
+
+.ry-carousel__dot:hover {
+  background-color: var(--ry-color-primary-hover);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CHECK LIST
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-check-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ry-check-list li {
+  padding-inline-start: var(--ry-space-6);
+  position: relative;
+  margin-block-end: var(--ry-space-2);
+  color: var(--ry-color-text);
+}
+
+.ry-check-list li::before {
+  content: '\2713';
+  position: absolute;
+  inset-inline-start: 0;
+  color: var(--ry-color-success);
+  font-weight: var(--ry-font-bold);
+}
+
+} /* @layer ry-theme */