@ryanhelsing/ry-ui 1.0.1 → 1.0.3

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);
 }
 
@@ -124,8 +122,7 @@ ry-divider {
    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 +139,57 @@ 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);
 }
 
 /* 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);
 }
 
@@ -418,6 +401,213 @@ ry-knob[color="danger"] [data-ry-target="ring"] {
 }
 ry-knob[color="danger"] [data-ry-target="indicator"] { background-color: var(--ry-color-danger); }
 
+/* ═══════════════════════════════════════════════════════════════
+   NUMBER SELECT
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-number-select__btn {
+  background: var(--ry-color-bg);
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  color: var(--ry-color-text);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease),
+              border-color var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-number-select__btn:hover {
+  background-color: var(--ry-color-bg-muted);
+  border-color: var(--ry-color-border-strong);
+}
+
+.ry-number-select__btn:active {
+  background-color: var(--ry-color-bg-subtle);
+}
+
+.ry-number-select__decrement {
+  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-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-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-inline-start: var(--ry-border-width) solid var(--ry-color-border);
+}
+
+.ry-number-select__display {
+  background-color: var(--ry-color-bg);
+  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-inline-start: none;
+  border-inline-end: none;
+}
+
+/* No arrows: full border + radius */
+ry-number-select[arrows="none"] .ry-number-select__display {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-radius: var(--ry-radius-md);
+}
+
+/* Start only: display gets end border + end radius */
+ry-number-select[arrows="start"] .ry-number-select__display {
+  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 start border + start radius */
+ry-number-select[arrows="end"] .ry-number-select__display {
+  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-block-end: none;
+  border-radius: var(--ry-radius-md) var(--ry-radius-md) 0 0;
+}
+
+ry-number-select[arrows="stacked"] .ry-number-select__decrement {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-block-start: none;
+  border-radius: 0 0 var(--ry-radius-md) var(--ry-radius-md);
+}
+
+ry-number-select[arrows="stacked"] .ry-number-select__display {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  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);
+  font-weight: var(--ry-font-medium);
+  color: var(--ry-color-text);
+}
+
+.ry-number-select__input {
+  font-family: var(--ry-font-mono);
+  font-size: var(--ry-text-sm);
+  font-weight: var(--ry-font-medium);
+  color: var(--ry-color-text);
+  background: transparent;
+  border: none;
+  border-block-end: 2px solid var(--ry-color-primary);
+}
+
+.ry-number-select__display:focus-visible {
+  outline: none;
+  box-shadow: var(--ry-focus-ring);
+  border-color: var(--ry-color-primary);
+}
+
+.ry-number-select__affix {
+  font-family: var(--ry-font-mono);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-number-select__label {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+ry-number-select[disabled] {
+  opacity: 0.5;
+}
+
+ry-number-select[size="xs"] .ry-number-select__value {
+  font-size: var(--ry-text-xs);
+}
+
+ry-number-select[size="xs"] .ry-number-select__affix {
+  font-size: var(--ry-text-xs);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    CARDS
    ═══════════════════════════════════════════════════════════════ */
@@ -442,8 +632,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);
@@ -451,26 +640,22 @@ 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);
 }
@@ -479,43 +664,37 @@ ry-badge[variant="danger"] {
    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);
 }
 
@@ -523,10 +702,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);
@@ -540,35 +716,26 @@ 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);
@@ -583,14 +750,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 {
@@ -620,7 +785,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 {
@@ -639,7 +804,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 {
@@ -663,7 +828,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 {
@@ -686,7 +851,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);
 }
 
@@ -694,16 +859,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);
@@ -712,13 +875,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);
 }
@@ -920,8 +1081,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);
 }
 
@@ -938,106 +1098,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);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -1106,8 +1291,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;
 }
 
@@ -1171,15 +1356,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 {
@@ -1192,8 +1377,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);
 }
 
@@ -1228,7 +1412,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;
 }
 
@@ -1257,12 +1441,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 */
@@ -1294,12 +1478,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 */
@@ -1313,7 +1497,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;
 }
 
@@ -1407,7 +1591,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);
 }
 
@@ -1420,7 +1604,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"] {
@@ -1445,3 +1629,446 @@ ry-color-input [data-ry-target="panel"] {
   border-radius: var(--ry-radius-lg);
   box-shadow: var(--ry-shadow-lg);
 }
+
+/* ═══════════════════════════════════════════════════════════════
+   GRADIENT PICKER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-gradient-picker {
+  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-md);
+}
+
+ry-gradient-picker[disabled] {
+  opacity: 0.5;
+}
+
+/* Type toggle buttons */
+ry-gradient-picker [data-ry-target="type-toggle"] button {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-xs);
+  background-color: transparent;
+  color: var(--ry-color-text-muted);
+  border-radius: var(--ry-radius-sm);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease),
+              color var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] button:hover {
+  background-color: var(--ry-color-bg-subtle);
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] button[data-active] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
+/* Shape toggle */
+ry-gradient-picker [data-ry-target="shape-control"] button {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-xs);
+  background-color: transparent;
+  color: var(--ry-color-text-muted);
+  border-radius: var(--ry-radius-sm);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease),
+              color var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-gradient-picker [data-ry-target="shape-control"] button:hover {
+  background-color: var(--ry-color-bg-subtle);
+}
+
+ry-gradient-picker [data-ry-target="shape-control"] button[data-active] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
+/* Gradient bar */
+ry-gradient-picker [data-ry-target="bar"] {
+  border-radius: var(--ry-radius-full, 9999px);
+  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
+}
+
+/* Stop handles */
+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 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);
+}
+
+ry-gradient-picker [data-ry-target="stop"][data-selected] {
+  box-shadow: 0 0 0 2px var(--ry-color-primary), var(--ry-shadow-md);
+}
+
+ry-gradient-picker [data-ry-target="stop"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ry-color-primary), var(--ry-focus-ring);
+}
+
+/* CSS output */
+ry-gradient-picker [data-ry-target="output"] {
+  font-family: var(--ry-font-mono);
+  font-size: var(--ry-text-xs);
+  color: var(--ry-color-text);
+  background-color: var(--ry-color-bg-subtle);
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-radius: var(--ry-radius-sm);
+  transition: border-color var(--ry-duration-fast) var(--ry-ease),
+              box-shadow var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-gradient-picker [data-ry-target="output"]:focus {
+  outline: none;
+  border-color: var(--ry-color-primary);
+  box-shadow: var(--ry-focus-ring);
+}
+
+/* Copy button */
+ry-gradient-picker [data-ry-target="copy-btn"] {
+  background-color: transparent;
+  color: var(--ry-color-text-muted);
+  border-radius: var(--ry-radius-sm);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease),
+              color var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-gradient-picker [data-ry-target="copy-btn"]:hover {
+  background-color: var(--ry-color-bg-subtle);
+  color: var(--ry-color-text);
+}
+
+ry-gradient-picker [data-ry-target="copy-btn"][data-copied] {
+  color: var(--ry-color-success);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TREE
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tree {
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-radius: var(--ry-radius-lg);
+  padding: var(--ry-space-6);
+  background-color: var(--ry-color-bg);
+  box-shadow: var(--ry-shadow-sm);
+}
+
+/* Vertical connector line */
+.ry-tree__children {
+  border-inline-start: 1px solid var(--ry-color-border);
+}
+
+/* Horizontal connector line */
+.ry-tree__children .ry-tree__item::before {
+  background-color: var(--ry-color-border);
+}
+
+:is(.ry-tree__label, .ry-tree__file) {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+  border-radius: var(--ry-radius-sm);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease);
+}
+
+:is(.ry-tree__label, .ry-tree__file):hover {
+  background-color: var(--ry-color-bg-muted);
+}
+
+.ry-tree__file[data-ry-selected] {
+  background-color: var(--ry-color-bg-muted);
+  color: var(--ry-color-text);
+  font-weight: var(--ry-font-medium);
+}
+
+.ry-tree__icon {
+  color: var(--ry-color-text-muted);
+}
+
+/* Open folder icon gets stronger color */
+.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon {
+  color: var(--ry-color-text);
+}
+
+/* Exclude tree toggle checkboxes from global checkbox styling */
+input[type="checkbox"].ry-tree__toggle {
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+input[type="checkbox"].ry-tree__toggle::after {
+  display: none;
+}
+
+/* ── Drag and Drop ── */
+
+.ry-tree__ghost {
+  background-color: var(--ry-color-bg);
+  border: var(--ry-border-width) solid var(--ry-color-primary);
+  border-radius: var(--ry-radius-sm);
+  box-shadow: var(--ry-shadow-lg);
+  opacity: 0.85;
+}
+
+.ry-tree__item--collapsed {
+  background-color: color-mix(in oklch, var(--ry-color-primary) 10%, transparent);
+  border-radius: var(--ry-radius-sm);
+}
+
+.ry-tree__item:is([data-ry-drop-target="before"], [data-ry-drop-target="after"])::after {
+  background-color: var(--ry-color-primary);
+}
+
+.ry-tree__item[data-ry-drop-target="inside"] > .ry-tree__label {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+  border-radius: var(--ry-radius-sm);
+}
+
+.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;
+}
+
+.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);
+}
+
+} /* @layer ry-theme */