@ryanhelsing/ry-ui 1.0.2 → 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,21 +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-number-select, ry-color-picker, ry-color-input,
-ry-tree, ry-tree-item {
+: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;
 }
 
@@ -54,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
    ═══════════════════════════════════════════════════════════════ */
@@ -108,6 +106,8 @@ ry-page {
   flex-direction: column;
   min-height: 100vh;
   min-height: 100dvh;
+  container-type: inline-size;
+  scrollbar-gutter: stable;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -138,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;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -154,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;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -177,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);
   }
 }
@@ -244,7 +242,7 @@ ry-split > :last-child {
   width: 300px;
 }
 
-@media (max-width: 768px) {
+@container (max-width: 768px) {
   ry-split {
     flex-direction: column;
   }
@@ -305,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);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -390,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);
 }
 
@@ -472,8 +472,7 @@ ry-number-select[disabled] {
   pointer-events: none;
 }
 
-ry-number-select [data-ry-target="decrement"],
-ry-number-select [data-ry-target="increment"] {
+ry-number-select :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -484,8 +483,7 @@ ry-number-select [data-ry-target="increment"] {
   cursor: pointer;
 }
 
-ry-number-select [data-ry-target="decrement"] svg,
-ry-number-select [data-ry-target="increment"] svg {
+ry-number-select :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg {
   width: 16px;
   height: 16px;
 }
@@ -502,8 +500,10 @@ ry-number-select [data-ry-target="display"] {
   outline: none;
 }
 
-ry-number-select[drag="y"] [data-ry-target="display"],
-ry-number-select[arrows="stacked"]:not([drag]) [data-ry-target="display"] {
+: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;
 }
 
@@ -515,8 +515,10 @@ ry-number-select[data-dragging] {
   cursor: ew-resize;
 }
 
-ry-number-select[drag="y"][data-dragging],
-ry-number-select[arrows="stacked"]:not([drag])[data-dragging] {
+: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;
 }
 
@@ -527,8 +529,7 @@ ry-number-select [data-ry-target="value"] {
   transition: transform 60ms ease-out;
 }
 
-ry-number-select [data-ry-target="prefix"],
-ry-number-select [data-ry-target="suffix"] {
+ry-number-select :is([data-ry-target="prefix"], [data-ry-target="suffix"]) {
   flex-shrink: 0;
   pointer-events: none;
 }
@@ -547,7 +548,7 @@ ry-number-select [data-ry-target="input"] {
 ry-number-select [data-ry-target="label"] {
   display: block;
   text-align: center;
-  margin-right: var(--ry-space-2, 0.5rem);
+  margin-inline-end: var(--ry-space-2, 0.5rem);
   order: -1;
 }
 
@@ -557,31 +558,42 @@ ry-number-select[arrows="stacked"] {
   align-items: stretch;
 }
 
-ry-number-select[arrows="stacked"] [data-ry-target="decrement"],
-ry-number-select[arrows="stacked"] [data-ry-target="increment"] {
+ry-number-select[arrows="stacked"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
   width: auto;
   height: 24px;
 }
 
-ry-number-select[arrows="stacked"] [data-ry-target="decrement"] svg,
-ry-number-select[arrows="stacked"] [data-ry-target="increment"] svg {
+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"] [data-ry-target="decrement"],
-ry-number-select[size="xs"] [data-ry-target="increment"] { width: 20px; height: 22px; }
+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"] [data-ry-target="decrement"] svg,
-ry-number-select[size="xs"] [data-ry-target="increment"] svg { width: 12px; height: 12px; }
+ry-number-select[size="xs"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg { width: 12px; height: 12px; }
 
-ry-number-select[size="sm"] [data-ry-target="decrement"],
-ry-number-select[size="sm"] [data-ry-target="increment"] { width: 24px; height: 28px; }
+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"] [data-ry-target="decrement"],
-ry-number-select[size="lg"] [data-ry-target="increment"] { width: 40px; height: 44px; }
+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; }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -627,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;
 }
 
@@ -641,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;
@@ -681,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 */
@@ -696,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 {
@@ -744,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);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -782,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;
 }
@@ -819,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;
 }
 
@@ -835,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;
 }
 
@@ -861,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"] {
@@ -868,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%;
@@ -877,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"] {
@@ -891,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;
@@ -933,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;
@@ -948,26 +981,31 @@ 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);
 }
 
-ry-dropdown[data-ry-position="top"] [data-ry-target="menu"],
-ry-dropdown[data-ry-position="top"] ry-menu {
+@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-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);
 }
 
-ry-dropdown[data-ry-position="top"][data-ry-state="open"] [data-ry-target="menu"],
-ry-dropdown[data-ry-position="top"][data-ry-state="open"] ry-menu {
+ry-dropdown[data-ry-position="top"][data-ry-state="open"] :is([data-ry-target="menu"], ry-menu) {
   transform: translateY(0);
 }
 
@@ -975,7 +1013,7 @@ 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;
@@ -1052,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"] {
@@ -1059,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%;
@@ -1104,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"] {
@@ -1111,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);
@@ -1119,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"] {
@@ -1126,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;
@@ -1200,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%;
 }
 
@@ -1229,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"] {
@@ -1236,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);
@@ -1313,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"] {
@@ -1331,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);
 }
 
@@ -1367,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)
    ═══════════════════════════════════════════════════════════════ */
@@ -1403,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"] {
@@ -1457,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;
 }
 
@@ -1496,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;
   }
@@ -1508,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 {
@@ -1529,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] {
@@ -1633,7 +1762,7 @@ input[type="radio"]:checked::after {
 table {
   width: 100%;
   border-collapse: collapse;
-  text-align: left;
+  text-align: start;
 }
 
 th, td {
@@ -1642,7 +1771,7 @@ th, td {
 }
 
 th {
-  text-align: left;
+  text-align: start;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -1956,7 +2085,7 @@ ry-gradient-picker [data-ry-target="angle-control"] {
   display: flex;
   align-items: center;
   gap: var(--ry-space-1, 0.25rem);
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 ry-gradient-picker [data-ry-target="angle-control"] ry-number-select {
@@ -1967,7 +2096,7 @@ ry-gradient-picker [data-ry-target="angle-control"] ry-number-select {
 ry-gradient-picker [data-ry-target="shape-control"] {
   display: none;
   gap: var(--ry-space-1, 0.25rem);
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 ry-gradient-picker [data-ry-target="shape-control"] button {
@@ -1996,15 +2125,7 @@ ry-gradient-picker[data-ry-type="radial"] [data-ry-target="shape-control"] {
 }
 
 /* When solid: hide bar, angle, shape */
-ry-gradient-picker[data-ry-type="solid"] [data-ry-target="bar-container"] {
-  display: none;
-}
-
-ry-gradient-picker[data-ry-type="solid"] [data-ry-target="angle-control"] {
-  display: none;
-}
-
-ry-gradient-picker[data-ry-type="solid"] [data-ry-target="shape-control"] {
+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;
 }
 
@@ -2093,36 +2214,34 @@ ry-tree-item {
   display: none;
 }
 
-.ry-tree__root,
-.ry-tree__children {
+:is(.ry-tree__root, .ry-tree__children) {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .ry-tree__children {
-  margin-left: 11px;
-  padding-left: 11px;
+  margin-inline-start: 11px;
+  padding-inline-start: 11px;
   overflow: hidden;
 }
 
 .ry-tree__item {
   position: relative;
-  margin-top: var(--ry-space-1, 0.25rem);
+  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;
-  left: -11px;
+  inset-inline-start: -11px;
   top: 14px;
   width: 11px;
   height: 1px;
 }
 
-.ry-tree__label,
-.ry-tree__file {
+:is(.ry-tree__label, .ry-tree__file) {
   display: flex;
   align-items: center;
   gap: var(--ry-space-2, 0.5rem);
@@ -2201,12 +2320,10 @@ ry-tree[no-animate] .ry-tree__children-wrapper {
   pointer-events: none;
 }
 
-.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 {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: 2px;
   pointer-events: none;
 }
@@ -2218,3 +2335,358 @@ ry-tree[no-animate] .ry-tree__children-wrapper {
 .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 */