@ryanhelsing/ry-ui 1.0.14 → 1.0.15

package/dist/css/ry-ui.css

@@ -106,13 +106,13 @@
   --ry-color-hover-overlay: color-mix(in oklch, var(--ry-color-text) 4%, transparent);
 
   /* Semantic backgrounds & text — derived from base semantic colors */
-  --ry-color-info-bg: color-mix(in oklch, var(--ry-color-info) 12%, var(--ry-color-bg));
+  --ry-color-info-bg: color-mix(in srgb, var(--ry-color-info) 12%, var(--ry-color-bg));
   --ry-color-info-text: color-mix(in oklch, var(--ry-color-info) 70%, var(--ry-color-text));
-  --ry-color-success-bg: color-mix(in oklch, var(--ry-color-success) 12%, var(--ry-color-bg));
+  --ry-color-success-bg: color-mix(in srgb, var(--ry-color-success) 12%, var(--ry-color-bg));
   --ry-color-success-text: color-mix(in oklch, var(--ry-color-success) 70%, var(--ry-color-text));
-  --ry-color-warning-bg: color-mix(in oklch, var(--ry-color-warning) 12%, var(--ry-color-bg));
+  --ry-color-warning-bg: color-mix(in srgb, var(--ry-color-warning) 12%, var(--ry-color-bg));
   --ry-color-warning-text: color-mix(in oklch, var(--ry-color-warning) 70%, var(--ry-color-text));
-  --ry-color-danger-bg: color-mix(in oklch, var(--ry-color-danger) 12%, var(--ry-color-bg));
+  --ry-color-danger-bg: color-mix(in srgb, var(--ry-color-danger) 12%, var(--ry-color-bg));
   --ry-color-danger-text: color-mix(in oklch, var(--ry-color-danger) 70%, var(--ry-color-text));
 
   /* ═══════════════════════════════════════════════════════════════
@@ -306,16 +306,146 @@
    SCROLL LOCK (for modals, drawers)
    ═══════════════════════════════════════════════════════════════ */
 
+body {
+  margin: 0;
+  min-height: 100dvh;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
 body[data-ry-scroll-lock] {
   overflow: hidden;
   padding-right: var(--ry-scrollbar-width, 0);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   PREFLIGHT RESET (opt-in via data-ry-reset on body/html)
+   Faithful equivalent of Tailwind Preflight.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Universal — :where() gives zero specificity so component styles always win */
+:where([data-ry-reset]) *,
+:where([data-ry-reset]) *::before,
+:where([data-ry-reset]) *::after,
+:where([data-ry-reset]) *::backdrop {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+}
+
+/* Root */
+:where([data-ry-reset]) {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Typography */
+:where([data-ry-reset]) :where(h1, h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where([data-ry-reset]) :where(a) {
+  color: inherit;
+  text-decoration: inherit;
+}
+:where([data-ry-reset]) :where(b, strong) {
+  font-weight: bolder;
+}
+:where([data-ry-reset]) :where(code, kbd, samp, pre) {
+  font-size: 1em;
+}
+:where([data-ry-reset]) :where(small) {
+  font-size: 80%;
+}
+:where([data-ry-reset]) :where(sub, sup) {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+:where([data-ry-reset]) :where(sub) { bottom: -0.25em; }
+:where([data-ry-reset]) :where(sup) { top: -0.5em; }
+
+/* Lists */
+:where([data-ry-reset]) :where(ol, ul, menu) {
+  list-style: none;
+}
+
+/* Table */
+:where([data-ry-reset]) :where(table) {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+/* HR */
+:where([data-ry-reset]) :where(hr) {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+/* Media */
+:where([data-ry-reset]) :where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+  vertical-align: middle;
+}
+:where([data-ry-reset]) :where(img, video) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Form controls */
+:where([data-ry-reset]) :where(button, input, select, optgroup, textarea) {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  border-radius: 0;
+  background-color: transparent;
+}
+:where([data-ry-reset]) ::placeholder {
+  opacity: 1;
+}
+@supports (color: color-mix(in oklab, currentcolor 50%, transparent)) {
+  :where([data-ry-reset]) ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+:where([data-ry-reset]) :where(textarea) {
+  resize: vertical;
+}
+:where([data-ry-reset]) :where(button, input:where([type='button'], [type='reset'], [type='submit'])) {
+  appearance: button;
+}
+:where([data-ry-reset]) ::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+:where([data-ry-reset]) ::-webkit-inner-spin-button,
+:where([data-ry-reset]) ::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/* Misc */
+:where([data-ry-reset]) :where(summary) {
+  display: list-item;
+}
+:where([data-ry-reset]) :where([hidden]:not([hidden='until-found'])) {
+  display: none !important;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    TRANSFORM WRAPPER (FOUC prevention)
    ═══════════════════════════════════════════════════════════════ */
 
-ry {
+ry,
+ry-search-item,
+ry-search-group {
   display: none;
 }
 
@@ -327,13 +457,14 @@ ry {
   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-button-group, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
+  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, ry-combobox, ry-heading) {
+  ry-pricing, ry-pricing-card, ry-carousel, ry-combobox, ry-heading,
+  ry-logo-bar) {
   box-sizing: border-box;
 }
 
@@ -394,6 +525,7 @@ ry-page {
   min-height: 100dvh;
   container-type: inline-size;
   scrollbar-gutter: stable;
+  overflow-x: clip;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -437,6 +569,51 @@ ry-footer {
   text-align: center;
 }
 
+/* Full footer with columns */
+ry-footer[layout="columns"] {
+  text-align: start;
+  padding: var(--ry-space-12, 3rem) var(--ry-space-6, 1.5rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="columns"],
+ry-footer[layout="columns"] > .ry-footer__columns {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(auto-fit, minmax(8rem, 1fr));
+  gap: var(--ry-space-8, 2rem);
+  padding-block-end: var(--ry-space-8, 2rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="columns"] nav,
+ry-footer[layout="columns"] > .ry-footer__columns nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-2, 0.5rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="columns"] nav strong,
+ry-footer[layout="columns"] > .ry-footer__columns nav strong {
+  margin-block-end: var(--ry-space-2, 0.5rem);
+}
+
+ry-footer[layout="columns"] > [data-ry-target="bottom"],
+ry-footer[layout="columns"] > .ry-footer__bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--ry-space-4, 1rem);
+  padding-block-start: var(--ry-space-6, 1.5rem);
+  border-top: 1px solid currentColor;
+  opacity: 0.5;
+}
+
+@media (max-width: 768px) {
+  ry-footer[layout="columns"] > [data-ry-target="columns"],
+  ry-footer[layout="columns"] > .ry-footer__columns {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 /* ═══════════════════════════════════════════════════════════════
    SECTION
    ═══════════════════════════════════════════════════════════════ */
@@ -455,19 +632,114 @@ ry-section[narrow] {
   margin-inline: auto;
 }
 
-/* Logo bar pattern */
-.ry-logo-bar {
-  text-align: center;
+/* Full-width breakout — bg goes edge-to-edge, content stays centered */
+ry-section[full],
+ry-section[inverted],
+ry-footer,
+ry-logo-bar {
+  width: 100vw;
+  margin-inline-start: calc(50% - 50vw);
+  padding-inline: max(var(--ry-space-6, 1.5rem), calc(50vw - 50%));
 }
 
-.ry-logo-bar p {
-  margin: 0 0 var(--ry-space-4, 1rem);
+ry-section[inverted] {
+  padding-block: var(--ry-space-12, 3rem);
 }
 
-.ry-logo-bar ry-cluster {
-  justify-content: center;
-  gap: var(--ry-space-10, 2.5rem);
+ry-section[pad-bottom="lg"] {
+  padding-bottom: var(--ry-space-20, 5rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   LOGO BAR
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-logo-bar {
+  display: flex;
   flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: var(--ry-space-8, 2rem);
+  padding-block: var(--ry-space-8, 2rem);
+  text-align: center;
+}
+
+ry-logo-bar > p {
+  width: 100%;
+  margin: 0;
+}
+
+ry-logo-bar > :not(p) {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Scroll layout — horizontal scroll, no wrap */
+ry-logo-bar[layout="scroll"] {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+ry-logo-bar[layout="scroll"]::-webkit-scrollbar {
+  display: none;
+}
+
+ry-logo-bar[layout="scroll"] > :not(p) {
+  flex-shrink: 0;
+}
+
+/* Marquee layout — infinite auto-scroll */
+ry-logo-bar[layout="marquee"] {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+ry-logo-bar[layout="marquee"] [data-ry-target="track"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-8, 2rem);
+  width: max-content;
+  animation: ry-marquee var(--ry-logo-bar-speed, 30s) linear infinite;
+}
+
+ry-logo-bar[layout="marquee"] [data-ry-target="track"] > * {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+ry-logo-bar[layout="marquee"]:hover [data-ry-target="track"] {
+  animation-play-state: paused;
+}
+
+@keyframes ry-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-25%); }
+}
+
+/* Size variants */
+ry-logo-bar[size="sm"] {
+  padding: var(--ry-space-4, 1rem) var(--ry-space-4, 1rem);
+  gap: var(--ry-space-4, 1rem);
+}
+
+ry-logo-bar[size="lg"] {
+  padding: var(--ry-space-12, 3rem) var(--ry-space-6, 1.5rem);
+  gap: var(--ry-space-6, 1.5rem);
+}
+
+/* Logo items */
+ry-logo-bar img {
+  height: var(--ry-logo-bar-height, 2rem);
+  width: auto;
+  object-fit: contain;
+}
+
+ry-logo-bar span {
+  white-space: nowrap;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -495,6 +767,13 @@ ry-grid[cols="auto-fill"] {
   grid-template-columns: repeat(auto-fill, minmax(var(--ry-grid-min, 280px), 1fr));
 }
 
+ry-grid[overlap] {
+  position: relative;
+  z-index: 1;
+  margin-top: calc(-1 * var(--ry-space-12, 3rem));
+  padding-inline: var(--ry-space-6, 1.5rem);
+}
+
 /* Default responsive behavior */
 @container (max-width: 640px) {
   :is(ry-grid[cols="2"], ry-grid[cols="3"], ry-grid[cols="4"],
@@ -736,19 +1015,13 @@ ry-button[icon][size="sm"]:empty {
   padding: var(--ry-space-1, 0.25rem);
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   BUTTON GROUP
-   ═══════════════════════════════════════════════════════════════ */
-
-ry-button-group {
-  display: inline-flex;
-  gap: 2px;
-  padding: 2px;
-  border-radius: var(--ry-radius-md, 0.375rem);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button) {
-  border-radius: calc(var(--ry-radius-md, 0.375rem) - 2px);
+/* Link variant — inline text link style */
+ry-button[variant="link"] {
+  background: none;
+  border: none;
+  padding: 0;
+  display: inline;
+  cursor: pointer;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -1152,6 +1425,12 @@ ry-card p:last-child {
   margin-bottom: 0;
 }
 
+ry-card > img:first-child {
+  display: block;
+  width: 100%;
+  margin-bottom: var(--ry-space-4, 1rem);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BADGES
    ═══════════════════════════════════════════════════════════════ */
@@ -1173,7 +1452,7 @@ ry-alert {
   padding: var(--ry-space-4, 1rem);
 }
 
-ry-alert [slot="title"] {
+.ry-alert__title {
   margin: 0 0 var(--ry-space-1, 0.25rem) 0;
 }
 
@@ -1885,7 +2164,11 @@ ry-select[multiple] [data-ry-target="trigger"] {
 }
 
 ry-select[multiple] [data-ry-target="tags"] {
-  display: contents;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 0%;
+  gap: var(--ry-space-1, 0.25rem);
+  align-items: center;
 }
 
 ry-select[multiple] [data-ry-target="clear"] {
@@ -2858,6 +3141,40 @@ ry-tag-input[disabled] [data-ry-target="container"] {
   cursor: not-allowed;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   DEVICE FRAME (CSS-only phone mockup)
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-phone {
+  position: relative;
+  display: inline-block;
+  padding: 0.75rem;
+  border-radius: 2.5rem;
+  border: 3px solid currentColor;
+  overflow: hidden;
+  max-width: 20rem;
+}
+
+.ry-phone::before {
+  content: '';
+  position: absolute;
+  top: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 5rem;
+  height: 1.5rem;
+  border-radius: 0 0 1rem 1rem;
+  background: currentColor;
+  z-index: 1;
+}
+
+.ry-phone img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 1.75rem;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    HERO
    ═══════════════════════════════════════════════════════════════ */
@@ -2900,10 +3217,95 @@ ry-hero[size="lg"] {
   padding: var(--ry-space-20, 5rem) var(--ry-space-6, 1.5rem);
 }
 
+ry-hero[size="full"] {
+  min-height: 100vh;
+  min-height: 100dvh;
+  justify-content: center;
+}
+
 ry-hero[full-bleed] {
   max-width: none;
 }
 
+/* Split layout: text + media side by side */
+ry-hero[layout="split"] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  text-align: start;
+  gap: 0;
+  max-width: none;
+  padding: 0;
+  overflow: hidden;
+}
+
+ry-hero[layout="split"] > *:first-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ry-space-4, 1rem);
+  padding: var(--ry-space-12, 3rem) var(--ry-space-12, 3rem) var(--ry-space-12, 3rem) clamp(var(--ry-space-6, 1.5rem), 8vw, 10rem);
+}
+
+ry-hero[layout="split"] > *:first-child > * + * {
+  margin-block-start: 0;
+}
+
+ry-hero[layout="split"] > *:last-child {
+  align-self: stretch;
+  position: relative;
+  overflow: hidden;
+}
+
+ry-hero[layout="split"] > *:last-child img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+/* Full viewport height for split */
+ry-hero[layout="split"][size="full"] {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* Flip: image left, text right */
+ry-hero[layout="split"][reverse] {
+  direction: rtl;
+}
+
+ry-hero[layout="split"][reverse] > * {
+  direction: ltr;
+}
+
+ry-hero[layout="split"][reverse] > *:first-child {
+  padding-inline: var(--ry-space-12, 3rem) clamp(var(--ry-space-6, 1.5rem), 8vw, 10rem);
+}
+
+@media (max-width: 768px) {
+  ry-hero[layout="split"] {
+    grid-template-columns: 1fr;
+  }
+
+  ry-hero[layout="split"] > *:first-child {
+    padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
+  }
+
+  ry-hero[layout="split"][reverse] > *:first-child {
+    padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
+  }
+
+  ry-hero[layout="split"] > *:last-child {
+    max-height: 20rem;
+  }
+
+  ry-hero[layout="split"][size="full"] {
+    min-height: auto;
+  }
+}
+
 /* ═══════════════════════════════════════════════════════════════
    STAT
    ═══════════════════════════════════════════════════════════════ */
@@ -3032,11 +3434,11 @@ ry-pricing-card h3 {
   margin: 0 0 var(--ry-space-2, 0.5rem) 0;
 }
 
-ry-pricing-card [slot="price"] {
+.ry-pricing-card__price {
   margin-block-end: var(--ry-space-6, 1.5rem);
 }
 
-ry-pricing-card [slot="price"] span {
+.ry-pricing-card__price span {
   display: inline;
 }
 
@@ -3377,6 +3779,92 @@ ry-heading[divider] {
   padding-block-end: var(--ry-space-4, 1rem);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SEARCH LIST
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-search-list {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+ry-search-list [data-ry-target="search"] {
+  flex-shrink: 0;
+  padding: var(--ry-space-2) var(--ry-space-3);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+ry-search-list [data-ry-target="input"] {
+  width: 100%;
+  padding: var(--ry-space-2) var(--ry-space-3);
+  border: none;
+  background: transparent;
+  font: inherit;
+  outline: none;
+}
+
+ry-search-list [data-ry-target="list"] {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: var(--ry-space-1) var(--ry-space-2);
+}
+
+ry-search-list [data-ry-target="item"] {
+  display: flex;
+  align-items: center;
+  padding: var(--ry-space-1) var(--ry-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+ry-search-list [data-ry-target="item"][hidden] {
+  display: none;
+}
+
+ry-search-list [data-ry-target="group-header"] {
+  padding: var(--ry-space-2) var(--ry-space-3);
+  padding-top: var(--ry-space-4);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  pointer-events: none;
+  user-select: none;
+}
+
+ry-search-list [data-ry-target="group"][hidden] {
+  display: none;
+}
+
+ry-search-list [data-ry-target="empty"] {
+  padding: var(--ry-space-6) var(--ry-space-3);
+  text-align: center;
+}
+
+ry-search-list [data-ry-target="empty"][hidden] {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-avatar {
+  display: block;
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: var(--ry-space-4, 1rem);
+}
+
+.ry-avatar[data-size="lg"] {
+  width: 6rem;
+  height: 6rem;
+}
+
 } /* @layer ry-structure */
 
 /**
@@ -3397,6 +3885,46 @@ html {
   background-color: var(--ry-color-bg);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SECTION — INVERTED
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-section[inverted] {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+  border-radius: var(--ry-radius-lg);
+}
+
+ry-section[inverted] :is(h1, h2, h3, h4, p, span, a) {
+  color: inherit;
+}
+
+ry-section[inverted] p {
+  opacity: 0.7;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FOOTER — INVERTED
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-footer[inverted] {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+}
+
+ry-footer[inverted] :is(a, strong, p, span, nav) {
+  color: inherit;
+}
+
+ry-footer[inverted] a {
+  opacity: 0.7;
+  transition: opacity var(--ry-duration-fast);
+}
+
+ry-footer[inverted] a:hover {
+  opacity: 1;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    FOCUS STYLES
    ═══════════════════════════════════════════════════════════════ */
@@ -3557,7 +4085,7 @@ ry-split [data-ry-target="handle"]:focus-visible::after {
    BUTTONS
    ═══════════════════════════════════════════════════════════════ */
 
-:is(.ry-btn, ry-button) {
+:is(:where(.ry-btn), ry-button) {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
@@ -3574,93 +4102,88 @@ ry-split [data-ry-target="handle"]:focus-visible::after {
   transition-timing-function: var(--ry-ease);
 }
 
-:is(.ry-btn, ry-button):hover {
+:is(:where(.ry-btn), ry-button):hover {
   background-color: var(--ry-color-primary-hover);
 }
 
-:is(.ry-btn, ry-button):active {
+:is(:where(.ry-btn), ry-button):active {
   background-color: var(--ry-color-primary-active);
 }
 
-:is(.ry-btn:disabled, .ry-btn[aria-disabled="true"], ry-button[disabled]) {
+:is(:where(.ry-btn:disabled, .ry-btn[aria-disabled="true"]), ry-button[disabled]) {
   opacity: 0.5;
 }
 
 /* Button variants */
-:is(.ry-btn--secondary, ry-button[variant="secondary"]) {
+:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]) {
   background-color: var(--ry-color-secondary);
 }
-:is(.ry-btn--secondary, ry-button[variant="secondary"]):hover {
+:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]):hover {
   background-color: var(--ry-color-secondary-hover);
 }
 
-:is(.ry-btn--outline, ry-button[variant="outline"]) {
+:is(:where(.ry-btn--outline), ry-button[variant="outline"]) {
   background-color: transparent;
   color: var(--ry-color-primary);
   border-color: var(--ry-color-primary);
 }
-:is(.ry-btn--outline, ry-button[variant="outline"]):hover {
+:is(:where(.ry-btn--outline), ry-button[variant="outline"]):hover {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
 }
 
-:is(.ry-btn--ghost, ry-button[variant="ghost"]) {
+:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]) {
   background-color: transparent;
   color: var(--ry-color-text);
 }
-:is(.ry-btn--ghost, ry-button[variant="ghost"]):hover {
+:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]):hover {
   background-color: var(--ry-color-bg-muted);
 }
 
-:is(.ry-btn--danger, ry-button[variant="danger"]) {
+:is(:where(.ry-btn--danger), ry-button[variant="danger"]) {
   background-color: var(--ry-color-danger);
 }
-:is(.ry-btn--danger, ry-button[variant="danger"]):hover {
+:is(:where(.ry-btn--danger), ry-button[variant="danger"]):hover {
   background-color: var(--ry-color-danger-hover);
 }
 
-:is(.ry-btn--accent, ry-button[variant="accent"]) {
+:is(:where(.ry-btn--accent), ry-button[variant="accent"]) {
   background-color: var(--ry-color-accent);
 }
-:is(.ry-btn--accent, ry-button[variant="accent"]):hover {
+:is(:where(.ry-btn--accent), ry-button[variant="accent"]):hover {
   background-color: var(--ry-color-accent-hover);
 }
 
+/* Link variant — inline text link */
+:is(:where(.ry-btn--link), ry-button[variant="link"]) {
+  background: none;
+  color: var(--ry-color-primary);
+  font-weight: var(--ry-font-semibold);
+  text-decoration: none;
+  border: none;
+}
+:is(:where(.ry-btn--link), ry-button[variant="link"]):hover {
+  text-decoration: underline;
+}
+
 /* Pressed/active toggle state */
-:is(.ry-btn[aria-pressed="true"], ry-button[pressed]) {
+:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]) {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
   border-color: var(--ry-color-primary);
 }
-:is(.ry-btn[aria-pressed="true"], ry-button[pressed]):hover {
+:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]):hover {
   background-color: var(--ry-color-primary-hover);
   border-color: var(--ry-color-primary-hover);
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   BUTTON GROUP
-   ═══════════════════════════════════════════════════════════════ */
-
-ry-button-group {
-  background-color: var(--ry-color-bg-muted);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--ry-color-text-muted);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button):hover:not([pressed]) {
-  color: var(--ry-color-text);
-}
 
 /* Button sizes (typography only - padding is structural) */
-:is(.ry-btn--sm, ry-button[size="sm"]) {
+:is(:where(.ry-btn--sm), ry-button[size="sm"]) {
   font-size: var(--ry-text-xs);
 }
 
-:is(.ry-btn--lg, ry-button[size="lg"]) {
+:is(:where(.ry-btn--lg), ry-button[size="lg"]) {
   font-size: var(--ry-text-base);
 }
 
@@ -4109,6 +4632,10 @@ ry-card p {
   color: var(--ry-color-text-muted);
 }
 
+ry-card > img:first-child {
+  border-radius: var(--ry-radius-md);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BADGES
    ═══════════════════════════════════════════════════════════════ */
@@ -4186,7 +4713,7 @@ ry-badge[style*="--ry-badge-color"] {
   color: var(--ry-color-danger-text);
 }
 
-:is(.ry-alert__title, ry-alert [slot="title"]) {
+.ry-alert__title {
   font-weight: var(--ry-font-semibold);
 }
 
@@ -5530,13 +6057,13 @@ ry-pricing-card h3 {
   color: var(--ry-color-text);
 }
 
-ry-pricing-card [slot="price"] {
+.ry-pricing-card__price {
   font-size: var(--ry-text-4xl);
   font-weight: var(--ry-font-bold);
   color: var(--ry-color-text);
 }
 
-ry-pricing-card [slot="price"] span {
+.ry-pricing-card__price span {
   font-size: var(--ry-text-base);
   font-weight: var(--ry-font-normal);
   color: var(--ry-color-text-muted);
@@ -5706,18 +6233,34 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
    LOGO BAR
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-logo-bar p {
+ry-logo-bar > p {
   color: var(--ry-color-text-muted);
   font-size: var(--ry-text-sm);
+  font-family: var(--ry-font-sans);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
-.ry-logo-bar span {
+ry-logo-bar span {
   font-size: var(--ry-text-2xl);
   font-weight: var(--ry-font-bold);
+  font-family: var(--ry-font-sans);
   color: var(--ry-color-text);
   opacity: 0.5;
+  transition: opacity var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-logo-bar span:hover {
+  opacity: 0.8;
+}
+
+ry-logo-bar img {
+  opacity: 0.5;
+  transition: opacity var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-logo-bar img:hover {
+  opacity: 0.8;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -5868,4 +6411,95 @@ ry-heading[divider] {
   border-bottom: var(--ry-border-width) solid var(--ry-color-border);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SEARCH LIST
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-search-list__search {
+  background-color: var(--ry-color-bg);
+  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+}
+
+.ry-search-list__input {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+}
+
+.ry-search-list__input::placeholder {
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__item {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+  border-radius: var(--ry-radius-md);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-search-list__item[data-highlighted] {
+  background-color: var(--ry-color-bg-muted);
+}
+
+.ry-search-list__item[aria-selected="true"] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
+.ry-search-list__item[aria-selected="true"][data-highlighted] {
+  background-color: var(--ry-color-primary-hover);
+}
+
+.ry-search-list__group-header {
+  font-family: var(--ry-font-sans);
+  font-weight: 600;
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__empty {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__item mark {
+  background-color: transparent;
+  color: var(--ry-color-primary);
+  font-weight: 600;
+}
+
+.ry-search-list__item[aria-selected="true"] mark {
+  color: inherit;
+  text-decoration: underline;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: var(--ry-font-semibold);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-avatar {
+  border-radius: var(--ry-radius-full);
+  object-fit: cover;
+}
+
+.ry-bg-subtle {
+  background-color: var(--ry-color-bg-subtle);
+}
+
+.ry-bg-inverted {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+}
+
+.ry-bg-inverted p {
+  opacity: 0.7;
+}
+
 } /* @layer ry-theme */