@ryanhelsing/ry-ui 1.0.0

package/dist/css/ry-structure.css

@@ -0,0 +1,1737 @@
+/**
+ * ry-ui Structure CSS
+ *
+ * Pure layout and behavioral styles using data-ry-target selectors.
+ * No colors, shadows, or decorative properties.
+ * Works with any theme or no theme at all.
+ *
+ * Users can bring their own styling (e.g., Tailwind) - classes are optional.
+ * JS queries use [data-ry-target], structure CSS uses [data-ry-target],
+ * only theme CSS requires .ry-* classes.
+ */
+
+/* ═══════════════════════════════════════════════════════════════
+   SCROLL LOCK (for modals, drawers)
+   ═══════════════════════════════════════════════════════════════ */
+
+body[data-ry-scroll-lock] {
+  overflow: hidden;
+  padding-right: var(--ry-scrollbar-width, 0);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TRANSFORM WRAPPER (FOUC prevention)
+   ═══════════════════════════════════════════════════════════════ */
+
+ry {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   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 {
+  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 * {
+  box-sizing: inherit;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CUSTOM ELEMENT DISPLAY DEFAULTS
+   ═══════════════════════════════════════════════════════════════ */
+
+/* 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 {
+  display: block;
+}
+
+/* Flex containers */
+ry-grid,
+ry-stack,
+ry-cluster,
+ry-split,
+ry-center,
+ry-nav,
+ry-actions {
+  display: flex;
+}
+
+/* Inline elements */
+ry-badge,
+ry-logo {
+  display: inline-flex;
+}
+
+/* Contents (wrapper doesn't affect layout) */
+ry-modal,
+ry-drawer {
+  display: contents;
+}
+
+/* Button-like elements */
+ry-button,
+ry-menu-item {
+  display: inline-flex;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PAGE LAYOUT
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   HEADER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ry-space-4, 1rem);
+  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
+}
+
+ry-header[sticky] {
+  position: sticky;
+  top: 0;
+  z-index: var(--ry-z-sticky, 1020);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   MAIN
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-main {
+  flex: 1;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FOOTER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-footer {
+  padding: var(--ry-space-6, 1.5rem);
+  text-align: center;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SECTION
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-section {
+  margin-bottom: var(--ry-space-12, 3rem);
+}
+
+ry-section:last-child {
+  margin-bottom: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   GRID
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-grid {
+  display: grid;
+  gap: var(--ry-space-4, 1rem);
+}
+
+ry-grid[cols="1"] { grid-template-columns: 1fr; }
+ry-grid[cols="2"] { grid-template-columns: repeat(2, 1fr); }
+ry-grid[cols="3"] { grid-template-columns: repeat(3, 1fr); }
+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"] {
+    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"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   STACK (vertical)
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-4, 1rem);
+}
+
+ry-stack[gap="sm"] { gap: var(--ry-space-2, 0.5rem); }
+ry-stack[gap="md"] { gap: var(--ry-space-4, 1rem); }
+ry-stack[gap="lg"] { gap: var(--ry-space-6, 1.5rem); }
+ry-stack[gap="xl"] { gap: var(--ry-space-8, 2rem); }
+
+/* ═══════════════════════════════════════════════════════════════
+   CLUSTER (horizontal, wraps)
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ry-space-3, 0.75rem);
+}
+
+ry-cluster[gap="sm"] { gap: var(--ry-space-2, 0.5rem); }
+ry-cluster[gap="md"] { gap: var(--ry-space-3, 0.75rem); }
+ry-cluster[gap="lg"] { gap: var(--ry-space-4, 1rem); }
+
+/* ═══════════════════════════════════════════════════════════════
+   SPLIT (two columns)
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-split {
+  display: flex;
+  gap: var(--ry-space-6, 1.5rem);
+}
+
+ry-split > :first-child {
+  flex: 1;
+}
+
+ry-split > :last-child {
+  flex-shrink: 0;
+  width: 300px;
+}
+
+@media (max-width: 768px) {
+  ry-split {
+    flex-direction: column;
+  }
+  ry-split > :last-child {
+    width: 100%;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CENTER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   NAV
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-4, 1rem);
+}
+
+ry-nav a {
+  text-decoration: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   LOGO
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-logo {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   ACTIONS
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-2, 0.5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   DIVIDER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-divider {
+  display: block;
+  height: 1px;
+  margin: var(--ry-space-4, 1rem) 0;
+}
+
+ry-divider[vertical] {
+  width: 1px;
+  height: auto;
+  align-self: stretch;
+  margin: 0 var(--ry-space-4, 1rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTONS
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ry-space-2, 0.5rem);
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+ry-button[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Button sizes */
+ry-button[size="sm"] {
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-3, 0.75rem);
+}
+
+ry-button[size="lg"] {
+  padding: var(--ry-space-3, 0.75rem) var(--ry-space-6, 1.5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TOGGLE BUTTON
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-toggle-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ry-space-2, 0.5rem);
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+ry-toggle-button[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Toggle button sizes */
+ry-toggle-button[size="sm"] {
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-3, 0.75rem);
+}
+
+ry-toggle-button[size="lg"] {
+  padding: var(--ry-space-3, 0.75rem) var(--ry-space-6, 1.5rem);
+}
+
+/* Icon-only toggle button */
+ry-toggle-button[icon]:empty {
+  padding: var(--ry-space-2, 0.5rem);
+}
+
+ry-toggle-button[icon][size="sm"]:empty {
+  padding: var(--ry-space-1, 0.25rem);
+}
+
+ry-toggle-button[icon][size="lg"]:empty {
+  padding: var(--ry-space-3, 0.75rem);
+}
+
+/* Block toggle button (card-style, full width) */
+ry-toggle-button[block] {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: var(--ry-space-4, 1rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   KNOB
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-knob {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ry-space-1, 0.25rem);
+  user-select: none;
+  outline: none;
+}
+
+ry-knob[disabled] {
+  pointer-events: none;
+}
+
+ry-knob [data-ry-target="ring"] {
+  --knob-size: 64px;
+  --knob-rotation: -135deg;
+  --knob-percent: 0;
+
+  position: relative;
+  width: var(--knob-size);
+  height: var(--knob-size);
+  cursor: grab;
+}
+
+ry-knob [data-ry-target="ring"].ry-knob__ring--dragging {
+  cursor: grabbing;
+}
+
+ry-knob [data-ry-target="cap"] {
+  position: absolute;
+  inset: 0;
+  transform: rotate(var(--knob-rotation));
+}
+
+ry-knob [data-ry-target="indicator"] {
+  position: absolute;
+  width: 3px;
+  height: 10px;
+  top: 6px;
+  left: 50%;
+  margin-left: -1.5px;
+}
+
+ry-knob [data-ry-target="display"] {
+  display: block;
+  min-width: 3em;
+  text-align: center;
+}
+
+ry-knob [data-ry-target="label"] {
+  display: block;
+  text-align: center;
+}
+
+/* Sizes */
+ry-knob[size="sm"] [data-ry-target="ring"] { --knob-size: 48px; }
+ry-knob[size="lg"] [data-ry-target="ring"] { --knob-size: 80px; }
+
+/* ═══════════════════════════════════════════════════════════════
+   SLIDER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-slider {
+  display: block;
+  position: relative;
+  padding: var(--ry-space-4, 1rem) 0;
+  touch-action: none;
+  user-select: none;
+}
+
+ry-slider[disabled] {
+  pointer-events: none;
+}
+
+ry-slider [data-ry-target="track"] {
+  position: relative;
+  height: var(--ry-slider-track, 14px);
+  cursor: pointer;
+}
+
+ry-slider [data-ry-target="fill"] {
+  position: absolute;
+  height: 100%;
+}
+
+ry-slider [data-ry-target^="thumb"] {
+  position: absolute;
+  width: var(--ry-slider-thumb, 32px);
+  height: var(--ry-slider-thumb, 32px);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  cursor: grab;
+}
+
+ry-slider [data-ry-target^="thumb"]:active {
+  cursor: grabbing;
+}
+
+ry-slider [data-ry-target="labels"] {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--ry-space-2, 0.5rem);
+  pointer-events: none;
+}
+
+ry-slider [data-ry-target^="tooltip"] {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+  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"] {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Vertical */
+ry-slider[vertical] {
+  display: inline-flex;
+  width: auto;
+  height: 200px;
+  padding: 0 var(--ry-space-4, 1rem);
+}
+
+ry-slider[vertical] [data-ry-target="track"] {
+  width: var(--ry-slider-track, 14px);
+  height: 100%;
+}
+
+ry-slider[vertical] [data-ry-target="fill"] {
+  width: 100%;
+  height: auto;
+  bottom: 0;
+  left: 0;
+}
+
+ry-slider[vertical] [data-ry-target^="thumb"] {
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+}
+
+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);
+}
+
+/* Sizes */
+ry-slider[size="sm"] { --ry-slider-track: 10px; --ry-slider-thumb: 24px; }
+ry-slider[size="lg"] { --ry-slider-track: 18px; --ry-slider-thumb: 40px; }
+
+/* ═══════════════════════════════════════════════════════════════
+   CARDS
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-card {
+  display: block;
+  padding: var(--ry-space-6, 1.5rem);
+}
+
+ry-card h3 {
+  margin: 0 0 var(--ry-space-2, 0.5rem) 0;
+}
+
+ry-card p {
+  margin: 0 0 var(--ry-space-4, 1rem) 0;
+}
+
+ry-card p:last-child {
+  margin-bottom: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BADGES
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  line-height: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   ALERTS
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-alert {
+  display: flex;
+  gap: var(--ry-space-3, 0.75rem);
+  padding: var(--ry-space-4, 1rem);
+}
+
+ry-alert [slot="title"] {
+  margin: 0 0 var(--ry-space-1, 0.25rem) 0;
+}
+
+ry-alert p,
+ry-alert [data-ry-target="content"] {
+  margin: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FORM ELEMENTS
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-field input,
+ry-field textarea,
+ry-field 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 {
+  cursor: not-allowed;
+}
+
+ry-field label,
+ry-field [data-ry-target="label"] {
+  display: block;
+  margin-bottom: var(--ry-space-2, 0.5rem);
+}
+
+ry-field {
+  display: block;
+  margin-bottom: var(--ry-space-4, 1rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   ACCORDION
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-accordion {
+  overflow: hidden;
+}
+
+ry-accordion [data-ry-target="trigger"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
+  text-align: left;
+  border: none;
+  cursor: pointer;
+}
+
+ry-accordion [data-ry-target="icon"] {
+  flex-shrink: 0;
+  transition: transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+}
+
+ry-accordion [data-ry-target="item"][data-ry-state="open"] [data-ry-target="icon"] {
+  transform: rotate(180deg);
+}
+
+ry-accordion [data-ry-target="panel"] {
+  overflow: hidden;
+}
+
+ry-accordion [data-ry-target="item"][data-ry-state="closed"] [data-ry-target="panel"] {
+  display: none;
+}
+
+ry-accordion [data-ry-target="panel"] > * {
+  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TABS
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tabs {
+  display: block;
+}
+
+ry-tabs [data-ry-target="list"] {
+  display: flex;
+  gap: var(--ry-space-1, 0.25rem);
+  margin-bottom: 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;
+  cursor: pointer;
+}
+
+ry-tabs [data-ry-target="panel"],
+ry-tab {
+  display: none;
+}
+
+ry-tabs [data-ry-target="panel"][data-ry-state="active"],
+ry-tab[active],
+ry-tab[data-ry-state="active"] {
+  display: block;
+}
+
+ry-tabs:not(:defined) ry-tab:first-of-type {
+  display: block;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   MODAL
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-modal {
+  display: contents;
+}
+
+ry-modal [data-ry-target="backdrop"] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ry-z-modal-backdrop, 1040);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
+              visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+}
+
+ry-modal[data-ry-state="open"] [data-ry-target="backdrop"] {
+  opacity: 1;
+  visibility: visible;
+}
+
+ry-modal [data-ry-target="dialog"] {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: var(--ry-z-modal, 1050);
+  width: 100%;
+  max-width: 32rem;
+  max-height: calc(100vh - var(--ry-space-8, 2rem));
+  overflow: auto;
+  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);
+}
+
+ry-modal[data-ry-state="open"] [data-ry-target="dialog"] {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+ry-modal [data-ry-target="header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
+}
+
+ry-modal [data-ry-target="header"] h3 {
+  margin: 0;
+}
+
+ry-modal [data-ry-target="close"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-modal [data-ry-target="body"] {
+  padding: var(--ry-space-6, 1.5rem);
+}
+
+ry-modal [data-ry-target="footer"] {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ry-space-3, 0.75rem);
+  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   DROPDOWN
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+ry-dropdown [data-ry-target="menu"],
+ry-dropdown 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);
+  padding: var(--ry-space-1, 0.25rem);
+  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);
+}
+
+ry-dropdown[data-ry-state="open"] [data-ry-target="menu"],
+ry-dropdown[data-ry-state="open"] ry-menu {
+  opacity: 1;
+  visibility: visible;
+  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-decoration: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SWITCH
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ry-space-3, 0.75rem);
+  cursor: pointer;
+  user-select: none;
+}
+
+ry-switch[disabled] {
+  cursor: not-allowed;
+}
+
+ry-switch [data-ry-target="track"] {
+  position: relative;
+  display: inline-flex;
+  width: 2.75rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+ry-switch [data-ry-target="thumb"] {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.125rem;
+  height: 1.125rem;
+  transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+ry-switch[checked] [data-ry-target="thumb"] {
+  transform: translateX(1.25rem);
+}
+
+ry-switch [data-ry-target="input"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+ry-switch:focus-visible {
+  outline: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TOOLTIP
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+ry-tooltip [data-ry-target="content"] {
+  position: absolute;
+  z-index: var(--ry-z-tooltip, 1070);
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+ry-tooltip[data-ry-state="open"] [data-ry-target="content"] {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Tooltip positioning - CSS handles all layout, no JS needed */
+ry-tooltip[data-ry-position="top"] [data-ry-target="content"] {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--ry-space-2, 0.5rem);
+}
+
+ry-tooltip[data-ry-position="bottom"] [data-ry-target="content"] {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--ry-space-2, 0.5rem);
+}
+
+ry-tooltip[data-ry-position="left"] [data-ry-target="content"] {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--ry-space-2, 0.5rem);
+}
+
+ry-tooltip[data-ry-position="right"] [data-ry-target="content"] {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--ry-space-2, 0.5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   DRAWER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-drawer {
+  display: contents;
+}
+
+ry-drawer [data-ry-target="backdrop"] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ry-z-modal-backdrop, 1040);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
+              visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+}
+
+ry-drawer[data-ry-state="open"] [data-ry-target="backdrop"] {
+  opacity: 1;
+  visibility: visible;
+}
+
+ry-drawer [data-ry-target="panel"] {
+  position: fixed;
+  z-index: var(--ry-z-modal, 1050);
+  opacity: 0;
+  visibility: hidden;
+  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);
+}
+
+ry-drawer[data-ry-state="open"] [data-ry-target="panel"] {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Left drawer */
+ry-drawer [data-ry-target="panel"][data-ry-side="left"] {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 20rem;
+  max-width: 100%;
+  transform: translateX(-100%);
+}
+
+ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="left"] {
+  transform: translateX(0);
+}
+
+/* Right drawer */
+ry-drawer [data-ry-target="panel"][data-ry-side="right"] {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 20rem;
+  max-width: 100%;
+  transform: translateX(100%);
+}
+
+ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="right"] {
+  transform: translateX(0);
+}
+
+/* Top drawer */
+ry-drawer [data-ry-target="panel"][data-ry-side="top"] {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  max-height: 80vh;
+  transform: translateY(-100%);
+}
+
+ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="top"] {
+  transform: translateY(0);
+}
+
+/* Bottom drawer */
+ry-drawer [data-ry-target="panel"][data-ry-side="bottom"] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  max-height: 80vh;
+  transform: translateY(100%);
+}
+
+ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="bottom"] {
+  transform: translateY(0);
+}
+
+ry-drawer [data-ry-target="close"] {
+  position: absolute;
+  top: var(--ry-space-4, 1rem);
+  right: var(--ry-space-4, 1rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-drawer [data-ry-target="content"] {
+  padding: var(--ry-space-6, 1.5rem);
+  padding-top: var(--ry-space-12, 3rem);
+  overflow-y: auto;
+  height: 100%;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TOAST
+   ═══════════════════════════════════════════════════════════════ */
+
+[data-ry-target="toast-container"] {
+  position: fixed;
+  top: var(--ry-space-4, 1rem);
+  right: var(--ry-space-4, 1rem);
+  z-index: var(--ry-z-toast, 1080);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-3, 0.75rem);
+  max-width: 24rem;
+  pointer-events: none;
+}
+
+ry-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ry-space-3, 0.75rem);
+  padding: var(--ry-space-4, 1rem);
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateX(1rem);
+  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
+              transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
+}
+
+ry-toast[data-ry-state="visible"] {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+ry-toast[data-ry-state="hiding"] {
+  opacity: 0;
+  transform: translateX(1rem);
+}
+
+ry-toast [data-ry-target="icon"] {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ry-toast [data-ry-target="content"] {
+  flex: 1;
+}
+
+ry-toast [data-ry-target="close"] {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin: calc(var(--ry-space-1, 0.25rem) * -1);
+  border: none;
+  cursor: pointer;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SELECT
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-select {
+  position: relative;
+  display: inline-block;
+  min-width: 12rem;
+}
+
+ry-select[disabled] {
+  cursor: not-allowed;
+}
+
+ry-select [data-ry-target="trigger"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ry-space-2, 0.5rem);
+  width: 100%;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  cursor: pointer;
+}
+
+ry-select [data-ry-target="value"] {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+ry-select [data-ry-target="arrow"] {
+  flex-shrink: 0;
+  transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+ry-select[data-ry-state="open"] [data-ry-target="arrow"] {
+  transform: rotate(180deg);
+}
+
+ry-select [data-ry-target="dropdown"] {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: var(--ry-z-dropdown, 1000);
+  margin-top: var(--ry-space-1, 0.25rem);
+  padding: var(--ry-space-1, 0.25rem);
+  max-height: 15rem;
+  overflow-y: auto;
+  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);
+}
+
+ry-select[data-ry-state="open"] [data-ry-target="dropdown"] {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+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);
+  transform: translateY(0.5rem);
+}
+
+ry-select[data-ry-position="top"][data-ry-state="open"] [data-ry-target="dropdown"] {
+  transform: translateY(0);
+}
+
+ry-select [data-ry-target="option"] {
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  cursor: pointer;
+}
+
+ry-select [data-ry-target="option"][data-disabled] {
+  cursor: not-allowed;
+}
+
+ry-select [data-ry-target="native"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+ry-option {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   KEYFRAMES (structural animations)
+   ═══════════════════════════════════════════════════════════════ */
+
+@keyframes ry-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ry-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes ry-slide-up {
+  from { transform: translateY(1rem); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes ry-slide-down {
+  from { transform: translateY(-1rem); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes ry-scale-in {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CODE
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-code {
+  display: block;
+  overflow: hidden;
+  margin-bottom: var(--ry-space-4, 1rem);
+}
+
+ry-code [data-ry-target="header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
+}
+
+ry-code [data-ry-target="title"] {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+ry-code [data-ry-target="copy"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-code [data-ry-target="copy"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+ry-code [data-ry-target="content"] {
+  overflow: auto;
+  padding: 0 var(--ry-space-4, 1rem) var(--ry-space-4, 1rem);
+}
+
+ry-code [data-ry-target="pre"] {
+  margin: 0;
+  overflow: visible;
+}
+
+ry-code [data-ry-target="code"] {
+  display: block;
+  white-space: pre;
+  tab-size: 2;
+}
+
+ry-code .ry-code__line {
+  display: flex;
+}
+
+ry-code .ry-code__line-number {
+  flex-shrink: 0;
+  width: 2rem;
+  text-align: right;
+  padding-right: 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);
+}
+
+ry-code .ry-code__color-preview {
+  display: inline-block;
+  width: 0.625rem;
+  height: 0.625rem;
+  margin-right: var(--ry-space-1, 0.25rem);
+  vertical-align: middle;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   EXAMPLE
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-example {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ry-space-4, 1rem);
+  align-items: start;
+}
+
+ry-example [data-ry-target="code"] {
+  min-width: 0;
+}
+
+ry-example [data-ry-target="preview"] {
+  min-width: 0;
+  padding: var(--ry-space-4, 1rem);
+}
+
+@media (max-width: 768px) {
+  ry-example {
+    grid-template-columns: 1fr;
+  }
+}
+
+ry-example[data-stacked] {
+  grid-template-columns: 1fr;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   ICON
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+ry-icon svg {
+  display: block;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CHECKBOX
+   ═══════════════════════════════════════════════════════════════ */
+
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+
+input[type="checkbox"]::after {
+  content: '';
+  display: block;
+  width: 0.375rem;
+  height: 0.625rem;
+  opacity: 0;
+  transform: rotate(45deg) scale(0.8);
+  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+input[type="checkbox"]:checked::after {
+  opacity: 1;
+  transform: rotate(45deg) scale(1);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   RADIO
+   ═══════════════════════════════════════════════════════════════ */
+
+input[type="radio"] {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+input[type="radio"]:disabled {
+  cursor: not-allowed;
+}
+
+input[type="radio"]::after {
+  content: '';
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+input[type="radio"]:checked::after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TABLE
+   ═══════════════════════════════════════════════════════════════ */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+th, td {
+  padding: var(--ry-space-3, 0.75rem) var(--ry-space-4, 1rem);
+  vertical-align: top;
+}
+
+th {
+  text-align: left;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   COLOR PICKER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-color-picker {
+  position: relative;
+  display: inline-block;
+  user-select: none;
+}
+
+ry-color-picker[disabled] {
+  pointer-events: none;
+}
+
+/* Trigger button (dropdown mode) */
+ry-color-picker [data-ry-target="trigger"] {
+  display: block;
+  width: var(--ry-color-picker-trigger-size, 32px);
+  height: var(--ry-color-picker-trigger-size, 32px);
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-color-picker [data-ry-target="trigger-color"] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Panel */
+ry-color-picker [data-ry-target="panel"] {
+  width: var(--ry-color-picker-width, 240px);
+}
+
+/* Dropdown mode: panel is absolutely positioned */
+ry-color-picker:not([inline]) [data-ry-target="panel"] {
+  position: absolute;
+  left: 0;
+  z-index: var(--ry-z-dropdown, 1000);
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* Position below trigger */
+ry-color-picker[data-ry-position="bottom"] [data-ry-target="panel"] {
+  top: 100%;
+  margin-top: var(--ry-space-1, 0.25rem);
+  transform: translateY(-0.5rem);
+}
+
+/* Position above trigger */
+ry-color-picker[data-ry-position="top"] [data-ry-target="panel"] {
+  bottom: 100%;
+  top: auto;
+  margin-bottom: var(--ry-space-1, 0.25rem);
+  transform: translateY(0.5rem);
+}
+
+/* Open state - only animate when position is set */
+ry-color-picker[data-ry-state="open"][data-ry-position] [data-ry-target="panel"] {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+/* Inline mode: panel always visible */
+ry-color-picker[inline] [data-ry-target="panel"] {
+  position: static;
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+}
+
+/* Grid (saturation/brightness) */
+ry-color-picker [data-ry-target="grid"] {
+  position: relative;
+  width: 100%;
+  height: var(--ry-color-picker-grid-height, 160px);
+  cursor: crosshair;
+  touch-action: none;
+}
+
+ry-color-picker [data-ry-target="grid-handle"] {
+  position: absolute;
+  width: var(--ry-color-picker-handle-size, 16px);
+  height: var(--ry-color-picker-handle-size, 16px);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+}
+
+ry-color-picker [data-ry-target="grid-handle"]:active {
+  cursor: grabbing;
+}
+
+/* Controls row (sliders + preview) */
+ry-color-picker [data-ry-target="controls"] {
+  display: flex;
+  gap: var(--ry-space-3, 0.75rem);
+  padding: var(--ry-space-3, 0.75rem);
+}
+
+ry-color-picker [data-ry-target="sliders"] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-2, 0.5rem);
+  justify-content: center;
+}
+
+/* Sliders (hue, alpha) */
+ry-color-picker .ry-color-picker__slider {
+  position: relative;
+  height: var(--ry-color-picker-slider-height, 12px);
+  cursor: pointer;
+  touch-action: none;
+}
+
+ry-color-picker .ry-color-picker__slider-handle {
+  position: absolute;
+  top: 50%;
+  width: var(--ry-color-picker-slider-handle, 16px);
+  height: var(--ry-color-picker-slider-handle, 16px);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+}
+
+ry-color-picker .ry-color-picker__slider-handle:active {
+  cursor: grabbing;
+}
+
+/* Preview swatch */
+ry-color-picker [data-ry-target="preview"] {
+  position: relative;
+  width: var(--ry-color-picker-preview-size, 40px);
+  height: var(--ry-color-picker-preview-size, 40px);
+  flex-shrink: 0;
+}
+
+ry-color-picker [data-ry-target="preview-color"] {
+  position: absolute;
+  inset: 0;
+}
+
+/* Input row */
+ry-color-picker [data-ry-target="input-row"] {
+  display: flex;
+  gap: var(--ry-space-2, 0.5rem);
+  padding: 0 var(--ry-space-3, 0.75rem) var(--ry-space-3, 0.75rem);
+}
+
+ry-color-picker [data-ry-target="input"] {
+  flex: 1;
+  min-width: 0;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+}
+
+ry-color-picker [data-ry-target="format-toggle"] {
+  flex-shrink: 0;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  border: none;
+  cursor: pointer;
+}
+
+/* Swatches */
+ry-color-picker [data-ry-target="swatches"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ry-space-1, 0.25rem);
+  padding: 0 var(--ry-space-3, 0.75rem) var(--ry-space-3, 0.75rem);
+}
+
+ry-color-picker .ry-color-picker__swatch {
+  width: var(--ry-color-picker-swatch-size, 20px);
+  height: var(--ry-color-picker-swatch-size, 20px);
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   COLOR INPUT
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-color-input {
+  position: relative;
+  display: inline-block;
+}
+
+ry-color-input[disabled] {
+  pointer-events: none;
+}
+
+ry-color-input [data-ry-target="trigger"] {
+  display: flex;
+  align-items: stretch;
+}
+
+ry-color-input [data-ry-target="swatch"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ry-color-input-swatch-width, 40px);
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-color-input [data-ry-target="swatch-color"] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+ry-color-input [data-ry-target="input"] {
+  flex: 1;
+  min-width: 0;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+}
+
+/* Panel (dropdown) */
+ry-color-input [data-ry-target="panel"] {
+  position: absolute;
+  left: 0;
+  z-index: var(--ry-z-dropdown, 1000);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Position below trigger */
+ry-color-input[data-ry-position="bottom"] [data-ry-target="panel"] {
+  top: 100%;
+  margin-top: var(--ry-space-1, 0.25rem);
+  transform: translateY(-0.5rem);
+}
+
+/* Position above trigger */
+ry-color-input[data-ry-position="top"] [data-ry-target="panel"] {
+  bottom: 100%;
+  top: auto;
+  margin-bottom: var(--ry-space-1, 0.25rem);
+  transform: translateY(0.5rem);
+}
+
+/* Open state */
+ry-color-input[data-ry-state="open"][data-ry-position] [data-ry-target="panel"] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+/* Hide the embedded picker's panel border since we provide our own */
+ry-color-input ry-color-picker[inline] [data-ry-target="panel"] {
+  border: none;
+  box-shadow: none;
+}