@ryanhelsing/ry-ui 1.0.14 → 1.0.15

package/dist/css/ry-structure.css

@@ -21,16 +21,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;
 }
 
@@ -42,13 +172,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;
 }
 
@@ -109,6 +240,7 @@ ry-page {
   min-height: 100dvh;
   container-type: inline-size;
   scrollbar-gutter: stable;
+  overflow-x: clip;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -152,6 +284,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
    ═══════════════════════════════════════════════════════════════ */
@@ -170,19 +347,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;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -210,6 +482,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"],
@@ -451,19 +730,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;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -867,6 +1140,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
    ═══════════════════════════════════════════════════════════════ */
@@ -888,7 +1167,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;
 }
 
@@ -1600,7 +1879,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"] {
@@ -2573,6 +2856,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
    ═══════════════════════════════════════════════════════════════ */
@@ -2615,10 +2932,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
    ═══════════════════════════════════════════════════════════════ */
@@ -2747,11 +3149,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;
 }
 
@@ -3092,4 +3494,90 @@ 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 */