@ryanhelsing/ry-ui 1.0.3 → 1.0.4

package/dist/css/ry-structure.css

@@ -42,7 +42,7 @@ 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-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
+  ry-button, ry-button-group, 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,
@@ -180,6 +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); }
 
+/* Auto-fit mode: fluid columns based on min-width */
+ry-grid[cols="auto-fit"] {
+  grid-template-columns: repeat(auto-fit, minmax(var(--ry-grid-min, 280px), 1fr));
+}
+
+ry-grid[cols="auto-fill"] {
+  grid-template-columns: repeat(auto-fill, minmax(var(--ry-grid-min, 280px), 1fr));
+}
+
+/* Default responsive behavior */
 @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"]) {
@@ -194,6 +204,28 @@ ry-grid[cols="6"] { grid-template-columns: repeat(6, 1fr); }
   }
 }
 
+/* Per-breakpoint column overrides: cols-sm, cols-md, cols-lg */
+@container (max-width: 640px) {
+  ry-grid[cols-sm="1"] { grid-template-columns: 1fr; }
+  ry-grid[cols-sm="2"] { grid-template-columns: repeat(2, 1fr); }
+  ry-grid[cols-sm="3"] { grid-template-columns: repeat(3, 1fr); }
+}
+
+@container (min-width: 641px) and (max-width: 1024px) {
+  ry-grid[cols-md="1"] { grid-template-columns: 1fr; }
+  ry-grid[cols-md="2"] { grid-template-columns: repeat(2, 1fr); }
+  ry-grid[cols-md="3"] { grid-template-columns: repeat(3, 1fr); }
+  ry-grid[cols-md="4"] { grid-template-columns: repeat(4, 1fr); }
+}
+
+@container (min-width: 1025px) {
+  ry-grid[cols-lg="2"] { grid-template-columns: repeat(2, 1fr); }
+  ry-grid[cols-lg="3"] { grid-template-columns: repeat(3, 1fr); }
+  ry-grid[cols-lg="4"] { grid-template-columns: repeat(4, 1fr); }
+  ry-grid[cols-lg="5"] { grid-template-columns: repeat(5, 1fr); }
+  ry-grid[cols-lg="6"] { grid-template-columns: repeat(6, 1fr); }
+}
+
 /* ═══════════════════════════════════════════════════════════════
    STACK (vertical)
    ═══════════════════════════════════════════════════════════════ */
@@ -239,7 +271,46 @@ ry-split > :first-child {
 
 ry-split > :last-child {
   flex-shrink: 0;
-  width: 300px;
+  width: var(--ry-split-width, 300px);
+  min-width: var(--ry-split-min-width, 0);
+}
+
+/* Resize handle */
+ry-split [data-ry-target="handle"] {
+  flex-shrink: 0;
+  width: 8px;
+  margin-inline: -4px;
+  cursor: col-resize;
+  position: relative;
+  z-index: 1;
+  touch-action: none;
+}
+
+/* Larger hit area via pseudo-element */
+ry-split [data-ry-target="handle"]::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline: -4px;
+}
+
+/* Visible drag indicator */
+ry-split [data-ry-target="handle"]::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  width: 4px;
+  height: 32px;
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+  opacity: 0;
+  transition: opacity var(--ry-duration-fast, 100ms);
+}
+
+ry-split [data-ry-target="handle"]:hover::after,
+ry-split[data-ry-resizing] [data-ry-target="handle"]::after {
+  opacity: 1;
 }
 
 @container (max-width: 768px) {
@@ -249,6 +320,9 @@ ry-split > :last-child {
   ry-split > :last-child {
     width: 100%;
   }
+  ry-split [data-ry-target="handle"] {
+    display: none;
+  }
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -344,6 +418,37 @@ ry-button[size="lg"] {
   padding: var(--ry-space-3, 0.75rem) var(--ry-space-6, 1.5rem);
 }
 
+/* Icon-only button */
+ry-button[icon]:empty {
+  padding: var(--ry-space-2, 0.5rem);
+}
+
+ry-button[icon][size="sm"]:empty {
+  padding: var(--ry-space-1, 0.25rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTON GROUP
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-button-group {
+  display: inline-flex;
+}
+
+ry-button-group > :is(ry-button, ry-toggle-button) {
+  border-radius: 0;
+}
+
+ry-button-group > :is(ry-button, ry-toggle-button):first-child {
+  border-start-start-radius: var(--ry-radius-md, 0.375rem);
+  border-end-start-radius: var(--ry-radius-md, 0.375rem);
+}
+
+ry-button-group > :is(ry-button, ry-toggle-button):last-child {
+  border-start-end-radius: var(--ry-radius-md, 0.375rem);
+  border-end-end-radius: var(--ry-radius-md, 0.375rem);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    TOGGLE BUTTON
    ═══════════════════════════════════════════════════════════════ */
@@ -786,6 +891,19 @@ ry-field {
   margin-block-end: var(--ry-space-4, 1rem);
 }
 
+ry-field [data-ry-target="error"]:empty,
+ry-field [data-ry-target="hint"]:empty {
+  display: none;
+}
+
+ry-field [data-ry-target="error"]:not(:empty) ~ [data-ry-target="hint"] {
+  display: none;
+}
+
+ry-field :is([data-ry-target="error"], [data-ry-target="hint"]) {
+  margin-block-start: var(--ry-space-1, 0.25rem);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    ACCORDION
    ═══════════════════════════════════════════════════════════════ */

package/dist/css/ry-theme.css

@@ -118,6 +118,28 @@ ry-divider {
   background-color: var(--ry-color-border);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SPLIT HANDLE
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-split [data-ry-target="handle"]::after {
+  background-color: var(--ry-color-border-strong);
+}
+
+ry-split[data-ry-resizing] [data-ry-target="handle"]::after {
+  background-color: var(--ry-color-primary);
+}
+
+ry-split [data-ry-target="handle"]:focus-visible {
+  outline: none;
+}
+
+ry-split [data-ry-target="handle"]:focus-visible::after {
+  opacity: 1;
+  background-color: var(--ry-color-primary);
+  box-shadow: var(--ry-focus-ring);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BUTTONS
    ═══════════════════════════════════════════════════════════════ */
@@ -184,6 +206,47 @@ ry-divider {
   background-color: var(--ry-color-danger-hover);
 }
 
+:is(.ry-btn--accent, ry-button[variant="accent"]) {
+  background-color: var(--ry-color-accent);
+}
+:is(.ry-btn--accent, ry-button[variant="accent"]):hover {
+  background-color: var(--ry-color-accent-hover);
+}
+
+/* Pressed/active toggle state */
+:is(.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 {
+  background-color: var(--ry-color-primary-hover);
+  border-color: var(--ry-color-primary-hover);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTON GROUP
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-button-group > :is(ry-button, ry-toggle-button) {
+  border-color: var(--ry-color-border);
+}
+
+ry-button-group > :is(ry-button, ry-toggle-button):not(:first-child) {
+  border-inline-start-color: transparent;
+}
+
+/* Default children to outline style for segmented look */
+ry-button-group:not([variant]) > :is(ry-button, ry-toggle-button):not([pressed]) {
+  background-color: var(--ry-color-bg);
+  color: var(--ry-color-text);
+  border-color: var(--ry-color-border);
+}
+
+ry-button-group:not([variant]) > :is(ry-button, ry-toggle-button):not([pressed]):hover {
+  background-color: var(--ry-color-bg-muted);
+}
+
 /* Button sizes (typography only - padding is structural) */
 :is(.ry-btn--sm, ry-button[size="sm"]) {
   font-size: var(--ry-text-xs);
@@ -660,6 +723,17 @@ ry-card p {
   color: var(--ry-color-text-inverse);
 }
 
+:is(.ry-badge--accent, ry-badge[variant="accent"]) {
+  background-color: var(--ry-color-accent);
+  color: var(--ry-color-text-inverse);
+}
+
+/* Arbitrary color via style="--ry-badge-color: ..." */
+ry-badge[style*="--ry-badge-color"] {
+  background-color: var(--ry-badge-color);
+  color: var(--ry-badge-text, var(--ry-color-text-inverse));
+}
+
 /* ═══════════════════════════════════════════════════════════════
    ALERTS
    ═══════════════════════════════════════════════════════════════ */
@@ -741,6 +815,25 @@ ry-card p {
   color: var(--ry-color-text);
 }
 
+.ry-field__error {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-danger);
+}
+
+.ry-field__hint {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+/* Error state on input */
+ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select) {
+  border-color: var(--ry-color-danger);
+}
+
+ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select):focus {
+  box-shadow: 0 0 0 3px light-dark(oklch(0.637 0.208 25.3 / 0.3), oklch(0.637 0.208 25.3 / 0.3));
+}
+
 /* ═══════════════════════════════════════════════════════════════
    ACCORDION
    ═══════════════════════════════════════════════════════════════ */
@@ -1909,6 +2002,13 @@ ry-tag[disabled] {
   font-size: var(--ry-text-sm);
   color: var(--ry-color-text);
   background: transparent;
+  border: none;
+}
+
+.ry-tag-input__input:focus,
+.ry-tag-input__input:focus-visible {
+  outline: none;
+  box-shadow: none;
 }
 
 .ry-tag-input__input::placeholder {
@@ -2071,4 +2171,29 @@ ry-pricing-card ul li:last-child {
   background-color: var(--ry-color-primary-hover);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   CHECK LIST
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-check-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ry-check-list li {
+  padding-inline-start: var(--ry-space-6);
+  position: relative;
+  margin-block-end: var(--ry-space-2);
+  color: var(--ry-color-text);
+}
+
+.ry-check-list li::before {
+  content: '\2713';
+  position: absolute;
+  inset-inline-start: 0;
+  color: var(--ry-color-success);
+  font-weight: var(--ry-font-bold);
+}
+
 } /* @layer ry-theme */

package/dist/css/ry-tokens.css

@@ -17,6 +17,9 @@
 @property --ry-color-secondary { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
 @property --ry-color-secondary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.446 0.037 257.3); }
 @property --ry-color-secondary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.372 0.039 257.3); }
+@property --ry-color-accent { syntax: "<color>"; inherits: true; initial-value: oklch(0.627 0.213 303.9); }
+@property --ry-color-accent-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.557 0.213 303.9); }
+@property --ry-color-accent-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.497 0.213 303.9); }
 @property --ry-color-success { syntax: "<color>"; inherits: true; initial-value: oklch(0.723 0.192 149.6); }
 @property --ry-color-warning { syntax: "<color>"; inherits: true; initial-value: oklch(0.769 0.165 70.1); }
 @property --ry-color-danger { syntax: "<color>"; inherits: true; initial-value: oklch(0.637 0.208 25.3); }
@@ -64,6 +67,11 @@
   --ry-color-secondary-hover: light-dark(oklch(0.446 0.037 257.3), oklch(0.869 0.02 252.9));
   --ry-color-secondary-active: light-dark(oklch(0.372 0.039 257.3), oklch(0.929 0.013 255.6));
 
+  /* Accent */
+  --ry-color-accent: light-dark(oklch(0.627 0.213 303.9), oklch(0.714 0.183 303.9));
+  --ry-color-accent-hover: light-dark(oklch(0.557 0.213 303.9), oklch(0.627 0.213 303.9));
+  --ry-color-accent-active: light-dark(oklch(0.497 0.213 303.9), oklch(0.557 0.213 303.9));
+
   /* Semantic */
   --ry-color-success: oklch(0.723 0.192 149.6);
   --ry-color-warning: oklch(0.769 0.165 70.1);