@ryanhelsing/ry-ui 1.0.1 → 1.0.3

package/dist/css/ry-structure.css

@@ -10,6 +10,13 @@
  * only theme CSS requires .ry-* classes.
  */
 
+@layer ry-structure {
+
+/* Enable native height: auto animation for all components */
+:root {
+  interpolate-size: allow-keywords;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    SCROLL LOCK (for modals, drawers)
    ═══════════════════════════════════════════════════════════════ */
@@ -31,20 +38,23 @@ ry {
    BOX SIZING RESET
    ═══════════════════════════════════════════════════════════════ */
 
-[data-ry-target],
-ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
-ry-grid, ry-stack, ry-cluster, ry-split, ry-center,
-ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown,
-ry-button, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
-ry-accordion-item, ry-tab, ry-menu, ry-menu-item, ry-divider,
-ry-theme-toggle, ry-select, ry-switch, ry-tooltip, ry-drawer, ry-toast,
-ry-toggle-button, ry-knob, ry-slider, ry-color-picker, ry-color-input {
+:where([data-ry-target],
+  ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
+  ry-grid, ry-stack, ry-cluster, ry-split, ry-center,
+  ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown,
+  ry-button, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
+  ry-accordion-item, ry-tab, ry-menu, ry-menu-item, ry-divider,
+  ry-theme-toggle, ry-select, ry-switch, ry-tooltip, ry-drawer, ry-toast,
+  ry-toggle-button, ry-knob, ry-slider, ry-number-select, ry-color-picker, ry-color-input,
+  ry-gradient-picker, ry-tree, ry-tree-item,
+  ry-tag, ry-tag-input, ry-hero, ry-stat, ry-feature, ry-feature-grid,
+  ry-pricing, ry-pricing-card, ry-carousel) {
   box-sizing: border-box;
 }
 
-[data-ry-target] *,
-ry-page *, ry-header *, ry-main *, ry-footer *, ry-section *,
-ry-card *, ry-accordion *, ry-modal *, ry-tabs *, ry-dropdown * {
+:where([data-ry-target],
+  ry-page, ry-header, ry-main, ry-footer, ry-section,
+  ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown) * {
   box-sizing: inherit;
 }
 
@@ -53,51 +63,40 @@ ry-card *, ry-accordion *, ry-modal *, ry-tabs *, ry-dropdown * {
    ═══════════════════════════════════════════════════════════════ */
 
 /* Block elements */
-ry-page,
-ry-header,
-ry-main,
-ry-footer,
-ry-section,
-ry-aside,
-ry-card,
-ry-accordion,
-ry-accordion-item,
-ry-tabs,
-ry-tab,
-ry-alert,
-ry-field {
+:is(ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
+    ry-card, ry-accordion, ry-accordion-item, ry-tabs, ry-tab, ry-alert, ry-field,
+    ry-tag-input, ry-carousel) {
   display: block;
 }
 
 /* Flex containers */
-ry-grid,
-ry-stack,
-ry-cluster,
-ry-split,
-ry-center,
-ry-nav,
-ry-actions {
+:is(ry-grid, ry-stack, ry-cluster, ry-split, ry-center, ry-nav, ry-actions) {
   display: flex;
 }
 
 /* Inline elements */
-ry-badge,
-ry-logo {
+:is(ry-badge, ry-logo, ry-tag) {
   display: inline-flex;
 }
 
 /* Contents (wrapper doesn't affect layout) */
-ry-modal,
-ry-drawer {
+:is(ry-modal, ry-drawer) {
   display: contents;
 }
 
 /* Button-like elements */
-ry-button,
-ry-menu-item {
+:is(ry-button, ry-menu-item) {
   display: inline-flex;
 }
 
+/* Balanced text wrapping for headings in overlay/display components */
+:is(ry-modal [data-ry-target="header"] h3,
+    ry-card h3,
+    ry-hero h1,
+    ry-pricing-card h3) {
+  text-wrap: balance;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    PAGE LAYOUT
    ═══════════════════════════════════════════════════════════════ */
@@ -107,6 +106,8 @@ ry-page {
   flex-direction: column;
   min-height: 100vh;
   min-height: 100dvh;
+  container-type: inline-size;
+  scrollbar-gutter: stable;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -137,6 +138,8 @@ ry-main {
   max-width: 1200px;
   margin: 0 auto;
   padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
+  container-type: inline-size;
+  scrollbar-gutter: stable;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -153,11 +156,12 @@ ry-footer {
    ═══════════════════════════════════════════════════════════════ */
 
 ry-section {
-  margin-bottom: var(--ry-space-12, 3rem);
+  margin-block-end: var(--ry-space-12, 3rem);
+  container-type: inline-size;
 }
 
 ry-section:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -176,21 +180,16 @@ ry-grid[cols="4"] { grid-template-columns: repeat(4, 1fr); }
 ry-grid[cols="5"] { grid-template-columns: repeat(5, 1fr); }
 ry-grid[cols="6"] { grid-template-columns: repeat(6, 1fr); }
 
-@media (max-width: 640px) {
-  ry-grid[cols="2"],
-  ry-grid[cols="3"],
-  ry-grid[cols="4"],
-  ry-grid[cols="5"],
-  ry-grid[cols="6"] {
+@container (max-width: 640px) {
+  :is(ry-grid[cols="2"], ry-grid[cols="3"], ry-grid[cols="4"],
+      ry-grid[cols="5"], ry-grid[cols="6"]) {
     grid-template-columns: 1fr;
   }
 }
 
-@media (min-width: 641px) and (max-width: 1024px) {
-  ry-grid[cols="3"],
-  ry-grid[cols="4"],
-  ry-grid[cols="5"],
-  ry-grid[cols="6"] {
+@container (min-width: 641px) and (max-width: 1024px) {
+  :is(ry-grid[cols="3"], ry-grid[cols="4"],
+      ry-grid[cols="5"], ry-grid[cols="6"]) {
     grid-template-columns: repeat(2, 1fr);
   }
 }
@@ -243,7 +242,7 @@ ry-split > :last-child {
   width: 300px;
 }
 
-@media (max-width: 768px) {
+@container (max-width: 768px) {
   ry-split {
     flex-direction: column;
   }
@@ -304,14 +303,16 @@ ry-actions {
 ry-divider {
   display: block;
   height: 1px;
-  margin: var(--ry-space-4, 1rem) 0;
+  margin-block: var(--ry-space-4, 1rem);
+  margin-inline: 0;
 }
 
 ry-divider[vertical] {
   width: 1px;
   height: auto;
   align-self: stretch;
-  margin: 0 var(--ry-space-4, 1rem);
+  margin-block: 0;
+  margin-inline: var(--ry-space-4, 1rem);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -389,7 +390,7 @@ ry-toggle-button[icon][size="lg"]:empty {
 ry-toggle-button[block] {
   display: block;
   width: 100%;
-  text-align: left;
+  text-align: start;
   padding: var(--ry-space-4, 1rem);
 }
 
@@ -455,6 +456,146 @@ ry-knob [data-ry-target="label"] {
 ry-knob[size="sm"] [data-ry-target="ring"] { --knob-size: 48px; }
 ry-knob[size="lg"] [data-ry-target="ring"] { --knob-size: 80px; }
 
+/* ═══════════════════════════════════════════════════════════════
+   NUMBER SELECT
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-number-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  user-select: none;
+  touch-action: none;
+}
+
+ry-number-select[disabled] {
+  pointer-events: none;
+}
+
+ry-number-select :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 36px;
+  padding: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+ry-number-select :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg {
+  width: 16px;
+  height: 16px;
+}
+
+ry-number-select [data-ry-target="display"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 36px;
+  padding: 0 var(--ry-space-2, 0.5rem);
+  position: relative;
+  cursor: ew-resize;
+  outline: none;
+}
+
+:is(ry-number-select[drag="y"],
+    ry-number-select[arrows="stacked"]:not([drag]),
+    ry-number-select[arrows="stacked-end"]:not([drag]),
+    ry-number-select[arrows="stacked-start"]:not([drag])) [data-ry-target="display"] {
+  cursor: ns-resize;
+}
+
+ry-number-select[drag="none"] [data-ry-target="display"] {
+  cursor: default;
+}
+
+ry-number-select[data-dragging] {
+  cursor: ew-resize;
+}
+
+:is(ry-number-select[drag="y"],
+    ry-number-select[arrows="stacked"]:not([drag]),
+    ry-number-select[arrows="stacked-end"]:not([drag]),
+    ry-number-select[arrows="stacked-start"]:not([drag]))[data-dragging] {
+  cursor: ns-resize;
+}
+
+ry-number-select [data-ry-target="value"] {
+  display: inline-block;
+  min-width: 2em;
+  text-align: center;
+  transition: transform 60ms ease-out;
+}
+
+ry-number-select :is([data-ry-target="prefix"], [data-ry-target="suffix"]) {
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+ry-number-select [data-ry-target="input"] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding: 0 var(--ry-space-1, 0.25rem);
+  outline: none;
+}
+
+ry-number-select [data-ry-target="label"] {
+  display: block;
+  text-align: center;
+  margin-inline-end: var(--ry-space-2, 0.5rem);
+  order: -1;
+}
+
+/* Stacked layout (buttons above/below) */
+ry-number-select[arrows="stacked"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+ry-number-select[arrows="stacked"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
+  width: auto;
+  height: 24px;
+}
+
+ry-number-select[arrows="stacked"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Stacked-end / stacked-start (buttons grouped beside display) */
+ry-number-select [data-ry-target="btn-group"] {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+:is(ry-number-select[arrows="stacked-end"], ry-number-select[arrows="stacked-start"]) :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
+  width: 28px;
+  height: 18px;
+}
+
+:is(ry-number-select[arrows="stacked-end"], ry-number-select[arrows="stacked-start"]) :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Sizes */
+ry-number-select[size="xs"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) { width: 20px; height: 22px; }
+ry-number-select[size="xs"] [data-ry-target="display"] { min-width: 28px; height: 22px; padding: 0 var(--ry-space-1, 0.25rem); }
+ry-number-select[size="xs"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg { width: 12px; height: 12px; }
+
+ry-number-select[size="sm"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) { width: 24px; height: 28px; }
+ry-number-select[size="sm"] [data-ry-target="display"] { min-width: 36px; height: 28px; }
+
+ry-number-select[size="lg"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) { width: 40px; height: 44px; }
+ry-number-select[size="lg"] [data-ry-target="display"] { min-width: 60px; height: 44px; }
+
 /* ═══════════════════════════════════════════════════════════════
    SLIDER
    ═══════════════════════════════════════════════════════════════ */
@@ -498,7 +639,7 @@ ry-slider [data-ry-target^="thumb"]:active {
 ry-slider [data-ry-target="labels"] {
   display: flex;
   justify-content: space-between;
-  margin-top: var(--ry-space-2, 0.5rem);
+  margin-block-start: var(--ry-space-2, 0.5rem);
   pointer-events: none;
 }
 
@@ -512,16 +653,25 @@ ry-slider [data-ry-target^="tooltip"] {
   visibility: hidden;
   transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
               visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
   pointer-events: none;
 }
 
-ry-slider [data-ry-target^="thumb"]:hover [data-ry-target^="tooltip"],
-ry-slider [data-ry-target^="thumb"]:focus [data-ry-target^="tooltip"],
-ry-slider[data-dragging] [data-ry-target^="tooltip"] {
+:is(ry-slider [data-ry-target^="thumb"]:hover,
+    ry-slider [data-ry-target^="thumb"]:focus,
+    ry-slider[data-dragging]) [data-ry-target^="tooltip"] {
   opacity: 1;
   visibility: visible;
 }
 
+@starting-style {
+  :is(ry-slider [data-ry-target^="thumb"]:hover,
+      ry-slider [data-ry-target^="thumb"]:focus,
+      ry-slider[data-dragging]) [data-ry-target^="tooltip"] {
+    opacity: 0;
+  }
+}
+
 /* Vertical */
 ry-slider[vertical] {
   display: inline-flex;
@@ -552,8 +702,8 @@ ry-slider[vertical] [data-ry-target="labels"] {
   flex-direction: column-reverse;
   justify-content: space-between;
   height: 100%;
-  margin-top: 0;
-  margin-left: var(--ry-space-2, 0.5rem);
+  margin-block-start: 0;
+  margin-inline-start: var(--ry-space-2, 0.5rem);
 }
 
 /* Sizes */
@@ -567,6 +717,7 @@ ry-slider[size="lg"] { --ry-slider-track: 18px; --ry-slider-thumb: 40px; }
 ry-card {
   display: block;
   padding: var(--ry-space-6, 1.5rem);
+  container-type: inline-size;
 }
 
 ry-card h3 {
@@ -615,28 +766,24 @@ ry-alert [data-ry-target="content"] {
    FORM ELEMENTS
    ═══════════════════════════════════════════════════════════════ */
 
-ry-field input,
-ry-field textarea,
-ry-field select {
+ry-field :is(input, textarea, select) {
   display: block;
   width: 100%;
   padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
 }
 
-ry-field input:disabled,
-ry-field textarea:disabled {
+ry-field :is(input, textarea):disabled {
   cursor: not-allowed;
 }
 
-ry-field label,
-ry-field [data-ry-target="label"] {
+ry-field :is(label, [data-ry-target="label"]) {
   display: block;
-  margin-bottom: var(--ry-space-2, 0.5rem);
+  margin-block-end: var(--ry-space-2, 0.5rem);
 }
 
 ry-field {
   display: block;
-  margin-bottom: var(--ry-space-4, 1rem);
+  margin-block-end: var(--ry-space-4, 1rem);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -653,7 +800,7 @@ ry-accordion [data-ry-target="trigger"] {
   justify-content: space-between;
   width: 100%;
   padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
-  text-align: left;
+  text-align: start;
   border: none;
   cursor: pointer;
 }
@@ -690,14 +837,14 @@ ry-tabs {
 ry-tabs [data-ry-target="list"] {
   display: flex;
   gap: var(--ry-space-1, 0.25rem);
-  margin-bottom: var(--ry-space-4, 1rem);
+  margin-block-end: var(--ry-space-4, 1rem);
 }
 
 ry-tabs [data-ry-target="trigger"] {
   padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
   border: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
+  border-block-end: 2px solid transparent;
+  margin-block-end: -1px;
   cursor: pointer;
 }
 
@@ -706,9 +853,9 @@ ry-tab {
   display: none;
 }
 
-ry-tabs [data-ry-target="panel"][data-ry-state="active"],
-ry-tab[active],
-ry-tab[data-ry-state="active"] {
+:is(ry-tabs [data-ry-target="panel"][data-ry-state="active"],
+    ry-tab[active],
+    ry-tab[data-ry-state="active"]) {
   display: block;
 }
 
@@ -732,6 +879,7 @@ ry-modal [data-ry-target="backdrop"] {
   visibility: hidden;
   transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
               visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
 ry-modal[data-ry-state="open"] [data-ry-target="backdrop"] {
@@ -739,6 +887,12 @@ ry-modal[data-ry-state="open"] [data-ry-target="backdrop"] {
   visibility: visible;
 }
 
+@starting-style {
+  ry-modal[data-ry-state="open"] [data-ry-target="backdrop"] {
+    opacity: 0;
+  }
+}
+
 ry-modal [data-ry-target="dialog"] {
   position: fixed;
   top: 50%;
@@ -748,12 +902,14 @@ ry-modal [data-ry-target="dialog"] {
   max-width: 32rem;
   max-height: calc(100vh - var(--ry-space-8, 2rem));
   overflow: auto;
+  overscroll-behavior: contain;
   opacity: 0;
   visibility: hidden;
   transform: translate(-50%, -50%) scale(0.95);
   transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
               visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
               transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
 ry-modal[data-ry-state="open"] [data-ry-target="dialog"] {
@@ -762,6 +918,13 @@ ry-modal[data-ry-state="open"] [data-ry-target="dialog"] {
   transform: translate(-50%, -50%) scale(1);
 }
 
+@starting-style {
+  ry-modal[data-ry-state="open"] [data-ry-target="dialog"] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+}
+
 ry-modal [data-ry-target="header"] {
   display: flex;
   align-items: center;
@@ -804,14 +967,13 @@ ry-dropdown {
   display: inline-block;
 }
 
-ry-dropdown [data-ry-target="menu"],
-ry-dropdown ry-menu {
+ry-dropdown :is([data-ry-target="menu"], ry-menu) {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: var(--ry-z-dropdown, 1000);
   min-width: 12rem;
-  margin-top: var(--ry-space-1, 0.25rem);
+  margin-block-start: var(--ry-space-1, 0.25rem);
   padding: var(--ry-space-1, 0.25rem);
   opacity: 0;
   visibility: hidden;
@@ -819,20 +981,39 @@ ry-dropdown ry-menu {
   transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
               visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
               transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
-ry-dropdown[data-ry-state="open"] [data-ry-target="menu"],
-ry-dropdown[data-ry-state="open"] ry-menu {
+ry-dropdown[data-ry-state="open"] :is([data-ry-target="menu"], ry-menu) {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }
 
+@starting-style {
+  ry-dropdown[data-ry-state="open"] :is([data-ry-target="menu"], ry-menu) {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+}
+
+ry-dropdown[data-ry-position="top"] :is([data-ry-target="menu"], ry-menu) {
+  top: auto;
+  bottom: 100%;
+  margin-block-start: 0;
+  margin-block-end: var(--ry-space-1, 0.25rem);
+  transform: translateY(0.5rem);
+}
+
+ry-dropdown[data-ry-position="top"][data-ry-state="open"] :is([data-ry-target="menu"], ry-menu) {
+  transform: translateY(0);
+}
+
 ry-menu-item {
   display: block;
   width: 100%;
   padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   border: none;
   cursor: pointer;
@@ -909,6 +1090,7 @@ ry-tooltip [data-ry-target="content"] {
   pointer-events: none;
   transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
               visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
 ry-tooltip[data-ry-state="open"] [data-ry-target="content"] {
@@ -916,6 +1098,12 @@ ry-tooltip[data-ry-state="open"] [data-ry-target="content"] {
   visibility: visible;
 }
 
+@starting-style {
+  ry-tooltip[data-ry-state="open"] [data-ry-target="content"] {
+    opacity: 0;
+  }
+}
+
 /* Tooltip positioning - CSS handles all layout, no JS needed */
 ry-tooltip[data-ry-position="top"] [data-ry-target="content"] {
   bottom: 100%;
@@ -961,6 +1149,7 @@ ry-drawer [data-ry-target="backdrop"] {
   visibility: hidden;
   transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
               visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
 ry-drawer[data-ry-state="open"] [data-ry-target="backdrop"] {
@@ -968,6 +1157,12 @@ ry-drawer[data-ry-state="open"] [data-ry-target="backdrop"] {
   visibility: visible;
 }
 
+@starting-style {
+  ry-drawer[data-ry-state="open"] [data-ry-target="backdrop"] {
+    opacity: 0;
+  }
+}
+
 ry-drawer [data-ry-target="panel"] {
   position: fixed;
   z-index: var(--ry-z-modal, 1050);
@@ -976,6 +1171,7 @@ ry-drawer [data-ry-target="panel"] {
   transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
               visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
               transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
 ry-drawer[data-ry-state="open"] [data-ry-target="panel"] {
@@ -983,6 +1179,12 @@ ry-drawer[data-ry-state="open"] [data-ry-target="panel"] {
   visibility: visible;
 }
 
+@starting-style {
+  ry-drawer[data-ry-state="open"] [data-ry-target="panel"] {
+    opacity: 0;
+  }
+}
+
 /* Left drawer */
 ry-drawer [data-ry-target="panel"][data-ry-side="left"] {
   top: 0;
@@ -1057,6 +1259,7 @@ ry-drawer [data-ry-target="content"] {
   padding: var(--ry-space-6, 1.5rem);
   padding-top: var(--ry-space-12, 3rem);
   overflow-y: auto;
+  overscroll-behavior: contain;
   height: 100%;
 }
 
@@ -1086,6 +1289,7 @@ ry-toast {
   transform: translateX(1rem);
   transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
               transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
 ry-toast[data-ry-state="visible"] {
@@ -1093,6 +1297,13 @@ ry-toast[data-ry-state="visible"] {
   transform: translateX(0);
 }
 
+@starting-style {
+  ry-toast[data-ry-state="visible"] {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
 ry-toast[data-ry-state="hiding"] {
   opacity: 0;
   transform: translateX(1rem);
@@ -1170,16 +1381,18 @@ ry-select [data-ry-target="dropdown"] {
   left: 0;
   right: 0;
   z-index: var(--ry-z-dropdown, 1000);
-  margin-top: var(--ry-space-1, 0.25rem);
+  margin-block-start: var(--ry-space-1, 0.25rem);
   padding: var(--ry-space-1, 0.25rem);
   max-height: 15rem;
   overflow-y: auto;
+  overscroll-behavior: contain;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-0.5rem);
   transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
               visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
               transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
 }
 
 ry-select[data-ry-state="open"] [data-ry-target="dropdown"] {
@@ -1188,11 +1401,18 @@ ry-select[data-ry-state="open"] [data-ry-target="dropdown"] {
   transform: translateY(0);
 }
 
+@starting-style {
+  ry-select[data-ry-state="open"] [data-ry-target="dropdown"] {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+}
+
 ry-select[data-ry-position="top"] [data-ry-target="dropdown"] {
   top: auto;
   bottom: 100%;
-  margin-top: 0;
-  margin-bottom: var(--ry-space-1, 0.25rem);
+  margin-block-start: 0;
+  margin-block-end: var(--ry-space-1, 0.25rem);
   transform: translateY(0.5rem);
 }
 
@@ -1224,6 +1444,58 @@ ry-option {
   display: none;
 }
 
+/* Multi-select trigger */
+ry-select[multiple] [data-ry-target="trigger"] {
+  flex-wrap: wrap;
+  gap: var(--ry-space-1, 0.25rem);
+  min-height: 2.5rem;
+}
+
+ry-select[multiple] [data-ry-target="tags"] {
+  display: contents;
+}
+
+ry-select[multiple] [data-ry-target="clear"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-select[multiple] [data-ry-target="clear"] svg {
+  width: 14px;
+  height: 14px;
+}
+
+ry-select [data-ry-target="check"] {
+  display: inline-flex;
+  align-items: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0;
+}
+
+ry-select [data-ry-target="check"] svg {
+  width: 14px;
+  height: 14px;
+}
+
+ry-select [data-ry-target="option"][aria-selected="true"] [data-ry-target="check"] {
+  opacity: 1;
+}
+
+ry-select[multiple] [data-ry-target="option"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-2, 0.5rem);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    KEYFRAMES (structural animations)
    ═══════════════════════════════════════════════════════════════ */
@@ -1260,7 +1532,7 @@ ry-option {
 ry-code {
   display: block;
   overflow: hidden;
-  margin-bottom: var(--ry-space-4, 1rem);
+  margin-block-end: var(--ry-space-4, 1rem);
 }
 
 ry-code [data-ry-target="header"] {
@@ -1314,22 +1586,22 @@ ry-code .ry-code__line {
 ry-code .ry-code__line-number {
   flex-shrink: 0;
   width: 2rem;
-  text-align: right;
-  padding-right: var(--ry-space-2, 0.5rem);
+  text-align: end;
+  padding-inline-end: var(--ry-space-2, 0.5rem);
   user-select: none;
 }
 
 ry-code .ry-code__line-content {
   flex: 1;
   min-width: 0;
-  padding-left: var(--ry-space-2, 0.5rem);
+  padding-inline-start: var(--ry-space-2, 0.5rem);
 }
 
 ry-code .ry-code__color-preview {
   display: inline-block;
   width: 0.625rem;
   height: 0.625rem;
-  margin-right: var(--ry-space-1, 0.25rem);
+  margin-inline-end: var(--ry-space-1, 0.25rem);
   vertical-align: middle;
 }
 
@@ -1353,7 +1625,7 @@ ry-example [data-ry-target="preview"] {
   padding: var(--ry-space-4, 1rem);
 }
 
-@media (max-width: 768px) {
+@container (max-width: 768px) {
   ry-example {
     grid-template-columns: 1fr;
   }
@@ -1365,7 +1637,7 @@ ry-example[data-stacked] {
 
 .ry-example__usage {
   grid-column: 1 / -1;
-  margin-top: var(--ry-space-2, 0.5rem);
+  padding-block-end: 3rem;
 }
 
 .ry-example__usage-toggle {
@@ -1386,7 +1658,7 @@ ry-example[data-stacked] {
 }
 
 .ry-example__usage-panel {
-  margin-top: var(--ry-space-2, 0.5rem);
+  margin-block-start: var(--ry-space-2, 0.5rem);
 }
 
 .ry-example__usage-panel[hidden] {
@@ -1490,7 +1762,7 @@ input[type="radio"]:checked::after {
 table {
   width: 100%;
   border-collapse: collapse;
-  text-align: left;
+  text-align: start;
 }
 
 th, td {
@@ -1499,7 +1771,7 @@ th, td {
 }
 
 th {
-  text-align: left;
+  text-align: start;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -1765,3 +2037,656 @@ ry-color-input ry-color-picker[inline] [data-ry-target="panel"] {
   border: none;
   box-shadow: none;
 }
+
+/* ═══════════════════════════════════════════════════════════════
+   GRADIENT PICKER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-gradient-picker {
+  display: block;
+  width: var(--ry-color-picker-width, 240px);
+}
+
+ry-gradient-picker[disabled] {
+  pointer-events: none;
+}
+
+/* Controls row */
+ry-gradient-picker [data-ry-target="controls"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-3, 0.75rem);
+  padding: var(--ry-space-3, 0.75rem);
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] {
+  display: flex;
+  gap: var(--ry-space-1, 0.25rem);
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] button svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Angle control — visible when linear (default) */
+ry-gradient-picker [data-ry-target="angle-control"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-1, 0.25rem);
+  margin-inline-start: auto;
+}
+
+ry-gradient-picker [data-ry-target="angle-control"] ry-number-select {
+  min-width: 0;
+}
+
+/* Shape control — hidden by default */
+ry-gradient-picker [data-ry-target="shape-control"] {
+  display: none;
+  gap: var(--ry-space-1, 0.25rem);
+  margin-inline-start: auto;
+}
+
+ry-gradient-picker [data-ry-target="shape-control"] button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-gradient-picker [data-ry-target="shape-control"] button svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* When radial: hide angle, show shape */
+ry-gradient-picker[data-ry-type="radial"] [data-ry-target="angle-control"] {
+  display: none;
+}
+
+ry-gradient-picker[data-ry-type="radial"] [data-ry-target="shape-control"] {
+  display: flex;
+}
+
+/* When solid: hide bar, angle, shape */
+ry-gradient-picker[data-ry-type="solid"] :is([data-ry-target="bar-container"], [data-ry-target="angle-control"], [data-ry-target="shape-control"]) {
+  display: none;
+}
+
+/* Gradient bar */
+ry-gradient-picker [data-ry-target="bar-container"] {
+  position: relative;
+  margin: 0 10px;
+  padding: var(--ry-space-4, 1rem) 0;
+}
+
+ry-gradient-picker [data-ry-target="bar"] {
+  position: relative;
+  height: var(--ry-gradient-picker-bar-height, 24px);
+  cursor: pointer;
+  touch-action: none;
+}
+
+/* Stop handle */
+ry-gradient-picker [data-ry-target="stop"] {
+  position: absolute;
+  top: 50%;
+  width: var(--ry-gradient-picker-stop-size, 16px);
+  height: var(--ry-gradient-picker-stop-size, 16px);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  z-index: 1;
+}
+
+ry-gradient-picker [data-ry-target="stop"]:active {
+  cursor: grabbing;
+}
+
+ry-gradient-picker [data-ry-target="stop"][data-selected] {
+  z-index: 2;
+  width: calc(var(--ry-gradient-picker-stop-size, 16px) + 4px);
+  height: calc(var(--ry-gradient-picker-stop-size, 16px) + 4px);
+}
+
+/* Inline color picker — remove extra border */
+ry-gradient-picker ry-color-picker[inline] [data-ry-target="panel"] {
+  border: none;
+  box-shadow: none;
+}
+
+/* CSS output */
+ry-gradient-picker [data-ry-target="output-row"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-1, 0.25rem);
+  padding: 0 var(--ry-space-3, 0.75rem) var(--ry-space-3, 0.75rem);
+}
+
+ry-gradient-picker [data-ry-target="output"] {
+  flex: 1;
+  min-width: 0;
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  border: none;
+}
+
+ry-gradient-picker [data-ry-target="copy-btn"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-gradient-picker [data-ry-target="copy-btn"] svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TREE
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tree {
+  display: block;
+}
+
+ry-tree-item {
+  display: none;
+}
+
+:is(.ry-tree__root, .ry-tree__children) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ry-tree__children {
+  margin-inline-start: 11px;
+  padding-inline-start: 11px;
+  overflow: hidden;
+}
+
+.ry-tree__item {
+  position: relative;
+  margin-block-start: var(--ry-space-1, 0.25rem);
+}
+
+/* Horizontal connector lines for nested items */
+.ry-tree__children .ry-tree__item::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: -11px;
+  top: 14px;
+  width: 11px;
+  height: 1px;
+}
+
+:is(.ry-tree__label, .ry-tree__file) {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-2, 0.5rem);
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  height: 28px;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+}
+
+/* Hidden checkbox — the CSS engine for expand/collapse */
+/* Compound selector to override global input[type="checkbox"] styles */
+input[type="checkbox"].ry-tree__toggle {
+  display: none;
+  appearance: auto;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+/* Folder icon swap */
+.ry-tree__icon-open {
+  display: none;
+}
+.ry-tree__icon-closed {
+  display: flex;
+}
+
+.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon-open {
+  display: flex;
+}
+.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon-closed {
+  display: none;
+}
+
+/* Grid animation for expand/collapse */
+.ry-tree__children-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--ry-tree-duration, 150ms) var(--ry-ease, ease);
+}
+
+ry-tree[no-animate] .ry-tree__children-wrapper {
+  transition-duration: 0ms;
+}
+
+.ry-tree__toggle:checked ~ .ry-tree__children-wrapper {
+  grid-template-rows: 1fr;
+}
+
+.ry-tree__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ── Drag and Drop ── */
+
+.ry-tree__ghost {
+  position: fixed;
+  pointer-events: none;
+  user-select: none;
+  z-index: var(--ry-z-toast, 1080);
+  transform: rotate(-2deg);
+}
+
+.ry-tree__item[data-ry-dragging] {
+  opacity: 0.4;
+}
+
+.ry-tree__item--collapsed {
+  height: 4px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.ry-tree__item:is([data-ry-drop-target="before"], [data-ry-drop-target="after"])::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  height: 2px;
+  pointer-events: none;
+}
+
+.ry-tree__item[data-ry-drop-target="before"]::after {
+  top: -1px;
+}
+
+.ry-tree__item[data-ry-drop-target="after"]::after {
+  bottom: -1px;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TAG
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ry-space-1, 0.25rem);
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  max-width: 100%;
+  line-height: 1;
+}
+
+ry-tag[disabled] {
+  pointer-events: none;
+}
+
+ry-tag [data-ry-target="label"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+ry-tag [data-ry-target="remove"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-tag [data-ry-target="remove"] svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Size variants */
+ry-tag[size="sm"] {
+  padding: 2px var(--ry-space-1, 0.25rem);
+}
+
+ry-tag[size="sm"] [data-ry-target="remove"] {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+ry-tag[size="sm"] [data-ry-target="remove"] svg {
+  width: 10px;
+  height: 10px;
+}
+
+ry-tag[size="lg"] {
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TAG INPUT
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tag-input {
+  display: block;
+}
+
+ry-tag-input [data-ry-target="container"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ry-space-1, 0.25rem);
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  min-height: 2.5rem;
+  cursor: text;
+}
+
+ry-tag-input [data-ry-target="input"] {
+  flex: 1;
+  min-width: 60px;
+  padding: var(--ry-space-1, 0.25rem) 0;
+  border: none;
+  outline: none;
+}
+
+ry-tag-input[disabled] [data-ry-target="container"] {
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   HERO
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ry-space-16, 4rem) var(--ry-space-6, 1.5rem);
+  max-width: 48rem;
+  margin-inline: auto;
+  text-align: center;
+}
+
+ry-hero[align="left"] {
+  align-items: flex-start;
+  text-align: start;
+}
+
+ry-hero > * + * {
+  margin-block-start: var(--ry-space-4, 1rem);
+}
+
+ry-hero > h1 {
+  margin: 0;
+}
+
+ry-hero > p {
+  margin: 0;
+  margin-block-start: var(--ry-space-4, 1rem);
+}
+
+/* Size variants */
+ry-hero[size="sm"] {
+  padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
+}
+
+ry-hero[size="lg"] {
+  padding: var(--ry-space-20, 5rem) var(--ry-space-6, 1.5rem);
+}
+
+ry-hero[full-bleed] {
+  max-width: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   STAT
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-1, 0.25rem);
+}
+
+ry-stat[align="center"] {
+  align-items: center;
+  text-align: center;
+}
+
+ry-stat [data-ry-target="value"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-2, 0.5rem);
+}
+
+ry-stat [data-ry-target="trend"] svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Size variants */
+ry-stat[size="sm"] [data-ry-target="trend"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FEATURE + FEATURE GRID
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-feature-grid {
+  display: grid;
+  gap: var(--ry-space-6, 1.5rem);
+}
+
+ry-feature-grid[cols="2"] { grid-template-columns: repeat(2, 1fr); }
+ry-feature-grid[cols="3"] { grid-template-columns: repeat(3, 1fr); }
+ry-feature-grid[cols="4"] { grid-template-columns: repeat(4, 1fr); }
+
+@container (max-width: 640px) {
+  :is(ry-feature-grid[cols="2"], ry-feature-grid[cols="3"], ry-feature-grid[cols="4"]) {
+    grid-template-columns: 1fr;
+  }
+}
+
+@container (min-width: 641px) and (max-width: 1024px) {
+  :is(ry-feature-grid[cols="3"], ry-feature-grid[cols="4"]) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+ry-feature {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-3, 0.75rem);
+}
+
+ry-feature[align="center"] {
+  align-items: center;
+  text-align: center;
+}
+
+ry-feature [data-ry-target="icon"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  flex-shrink: 0;
+}
+
+ry-feature [data-ry-target="icon"] svg {
+  width: 24px;
+  height: 24px;
+}
+
+ry-feature h3 {
+  margin: 0;
+}
+
+ry-feature p {
+  margin: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PRICING + PRICING CARD
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-pricing {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--ry-space-6, 1.5rem);
+  align-items: stretch;
+}
+
+@container (max-width: 640px) {
+  ry-pricing {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+ry-pricing-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ry-space-8, 2rem);
+  width: 100%;
+  max-width: 20rem;
+}
+
+ry-pricing-card[featured] {
+  transform: scale(1.05);
+  z-index: 1;
+}
+
+ry-pricing-card h3 {
+  margin: 0 0 var(--ry-space-2, 0.5rem) 0;
+}
+
+ry-pricing-card [slot="price"] {
+  margin-block-end: var(--ry-space-6, 1.5rem);
+}
+
+ry-pricing-card [slot="price"] span {
+  display: inline;
+}
+
+ry-pricing-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--ry-space-6, 1.5rem) 0;
+  flex: 1;
+}
+
+ry-pricing-card ul li {
+  padding: var(--ry-space-2, 0.5rem) 0;
+}
+
+ry-pricing-card :is(ry-button, .ry-btn) {
+  margin-block-start: auto;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CAROUSEL
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-carousel {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  outline: none;
+}
+
+ry-carousel [data-ry-target="viewport"] {
+  overflow: hidden;
+  touch-action: pan-y;
+}
+
+ry-carousel [data-ry-target="track"] {
+  display: flex;
+  transition: transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+}
+
+ry-carousel [data-ry-target="slide"] {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+
+ry-carousel :is([data-ry-target="prev"], [data-ry-target="next"]) {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-carousel [data-ry-target="prev"] {
+  left: var(--ry-space-3, 0.75rem);
+}
+
+ry-carousel [data-ry-target="next"] {
+  right: var(--ry-space-3, 0.75rem);
+}
+
+ry-carousel :is([data-ry-target="prev"], [data-ry-target="next"]) svg {
+  width: 20px;
+  height: 20px;
+}
+
+ry-carousel [data-ry-target="dots"] {
+  display: flex;
+  justify-content: center;
+  gap: var(--ry-space-2, 0.5rem);
+  padding: var(--ry-space-3, 0.75rem) 0;
+}
+
+ry-carousel [data-ry-target="dot"] {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+} /* @layer ry-structure */