@ryanhelsing/ry-ui 1.0.5 → 1.0.7

package/dist/css/ry-ui.css

@@ -290,7 +290,7 @@ ry {
   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-pricing, ry-pricing-card, ry-carousel, ry-combobox) {
   box-sizing: border-box;
 }
 
@@ -675,20 +675,13 @@ ry-button[icon][size="sm"]:empty {
 
 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: 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);
+  border-radius: calc(var(--ry-radius-md, 0.375rem) - 2px);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -1065,22 +1058,18 @@ ry-card {
   display: block;
   padding: var(--ry-space-6, 1.5rem);
   container-type: inline-size;
-  transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
 }
 
-ry-card:hover {
-  transform: translateY(-2px);
-}
-
-ry-card[interactive] {
+:is(a, [interactive]):is(ry-card) {
   cursor: pointer;
+  transition: transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
 }
 
-ry-card[interactive]:hover {
-  transform: translateY(-3px);
+:is(a, [interactive]):is(ry-card):hover {
+  transform: translateY(-1px);
 }
 
-ry-card[interactive]:active {
+:is(a, [interactive]):is(ry-card):active {
   transform: translateY(0);
 }
 
@@ -3066,6 +3055,126 @@ ry-carousel [data-ry-target="dot"] {
   cursor: pointer;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   COMBOBOX
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-combobox {
+  position: relative;
+  display: inline-block;
+  min-width: 12rem;
+}
+
+ry-combobox[disabled] {
+  cursor: not-allowed;
+}
+
+ry-combobox [data-ry-target="input-wrapper"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-2, 0.5rem);
+  width: 100%;
+}
+
+ry-combobox [data-ry-target="input"] {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+ry-combobox [data-ry-target="arrow"] {
+  flex-shrink: 0;
+  padding-inline-end: var(--ry-space-2, 0.5rem);
+  cursor: pointer;
+  transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+}
+
+ry-combobox[data-ry-state="open"] [data-ry-target="arrow"] {
+  transform: rotate(180deg);
+}
+
+ry-combobox [data-ry-target="dropdown"] {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: var(--ry-z-dropdown, 1000);
+  margin-block-start: var(--ry-space-1, 0.25rem);
+  padding: var(--ry-space-1, 0.25rem);
+  max-height: 15rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-0.5rem);
+  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
+              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
+  transition-behavior: allow-discrete;
+}
+
+ry-combobox[data-ry-state="open"] [data-ry-target="dropdown"] {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+@starting-style {
+  ry-combobox[data-ry-state="open"] [data-ry-target="dropdown"] {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+}
+
+ry-combobox[data-ry-position="top"] [data-ry-target="dropdown"] {
+  top: auto;
+  bottom: 100%;
+  margin-block-start: 0;
+  margin-block-end: var(--ry-space-1, 0.25rem);
+  transform: translateY(0.5rem);
+}
+
+ry-combobox[data-ry-position="top"][data-ry-state="open"] [data-ry-target="dropdown"] {
+  transform: translateY(0);
+}
+
+ry-combobox [data-ry-target="option"] {
+  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
+  cursor: pointer;
+}
+
+ry-combobox [data-ry-target="option"][hidden] {
+  display: none;
+}
+
+ry-combobox [data-ry-target="option"][data-disabled] {
+  cursor: not-allowed;
+}
+
+ry-combobox [data-ry-target="empty"] {
+  padding: var(--ry-space-3, 0.75rem);
+  text-align: center;
+}
+
+ry-combobox [data-ry-target="empty"][hidden] {
+  display: none;
+}
+
+ry-combobox [data-ry-target="native"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 } /* @layer ry-structure */
 
 /**
@@ -3298,23 +3407,18 @@ ry-split [data-ry-target="handle"]:focus-visible::after {
    BUTTON GROUP
    ═══════════════════════════════════════════════════════════════ */
 
-ry-button-group > :is(ry-button, ry-toggle-button) {
-  border-color: var(--ry-color-border);
+ry-button-group {
+  background-color: var(--ry-color-bg-muted);
 }
 
-ry-button-group > :is(ry-button, ry-toggle-button):not(:first-child) {
-  border-inline-start-color: transparent;
+ry-button-group > :is(ry-button, ry-toggle-button) {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--ry-color-text-muted);
 }
 
-/* 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);
+ry-button-group > :is(ry-button, ry-toggle-button):hover:not([pressed]) {
   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) */
@@ -3750,18 +3854,16 @@ ry-card {
   border: var(--ry-border-width) solid var(--ry-color-border);
   border-radius: var(--ry-radius-lg);
   box-shadow: var(--ry-shadow-sm);
-  transition: border-color var(--ry-duration-fast) var(--ry-ease),
-              box-shadow var(--ry-duration-fast) var(--ry-ease);
 }
 
-ry-card:hover {
-  border-color: var(--ry-color-border-strong);
-  box-shadow: var(--ry-shadow-md);
+:is(a, [interactive]):is(ry-card) {
+  transition: border-color var(--ry-duration-normal) var(--ry-ease),
+              box-shadow var(--ry-duration-normal) var(--ry-ease);
 }
 
-ry-card[interactive]:hover {
-  border-color: var(--ry-color-primary);
-  box-shadow: var(--ry-shadow-lg);
+:is(a, [interactive]):is(ry-card):hover {
+  border-color: var(--ry-color-border-strong);
+  box-shadow: var(--ry-shadow-md);
 }
 
 ry-card h3 {
@@ -5278,4 +5380,86 @@ ry-pricing-card ul li:last-child {
   font-weight: var(--ry-font-bold);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   COMBOBOX
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-combobox[disabled] {
+  opacity: 0.5;
+}
+
+.ry-combobox__input-wrapper {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-base);
+  line-height: var(--ry-leading-normal);
+  background-color: var(--ry-color-bg);
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-radius: var(--ry-radius-md);
+  transition: border-color var(--ry-duration-fast) var(--ry-ease),
+              box-shadow var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-combobox:hover .ry-combobox__input-wrapper {
+  border-color: var(--ry-color-border-strong);
+}
+
+ry-combobox:focus-within .ry-combobox__input-wrapper {
+  border-color: var(--ry-color-primary);
+  box-shadow: var(--ry-focus-ring);
+}
+
+ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
+  border-color: var(--ry-color-primary);
+}
+
+.ry-combobox__input {
+  font: inherit;
+  color: var(--ry-color-text);
+}
+
+.ry-combobox__input::placeholder {
+  color: var(--ry-color-text-muted);
+}
+
+.ry-combobox__arrow {
+  font-size: var(--ry-text-xs);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-combobox__dropdown {
+  background-color: var(--ry-color-bg);
+  border: var(--ry-border-width) solid var(--ry-color-border);
+  border-radius: var(--ry-radius-lg);
+  box-shadow: var(--ry-shadow-lg);
+}
+
+.ry-combobox__option {
+  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-combobox__option:is(:hover, [data-highlighted]) {
+  background-color: var(--ry-color-bg-muted);
+}
+
+.ry-combobox__option[aria-selected="true"] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
+.ry-combobox__option[data-disabled] {
+  opacity: 0.5;
+}
+
+.ry-combobox__option[data-disabled]:hover {
+  background-color: transparent;
+}
+
+.ry-combobox__empty {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
 } /* @layer ry-theme */

package/dist/ry-ui.d.ts

@@ -38,6 +38,7 @@ export { RyTooltip } from './components/ry-tooltip.js';
 export { RyDrawer } from './components/ry-drawer.js';
 export { RyToast } from './components/ry-toast.js';
 export { RySelect } from './components/ry-select.js';
+export { RyCombobox } from './components/ry-combobox.js';
 export { RyCode } from './components/ry-code.js';
 export { RyExample } from './components/ry-example.js';
 export { RyIcon } from './components/ry-icon.js';

package/dist/ry-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ry-ui.d.ts","sourceRoot":"","sources":["../src/ts/ry-ui.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ry-ui.d.ts","sourceRoot":"","sources":["../src/ts/ry-ui.ts"],"names":[],"mappings":"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"}