@ryanhelsing/ry-ui 1.0.4 → 1.0.6

package/AGENT.md

@@ -66,6 +66,7 @@ Wrap markup in `<ry>` to use unprefixed tags:
 | `<ry-tabs>` | — | Container. Children: `<ry-tab title="...">content</ry-tab>` |
 | `<ry-dropdown>` | — | Dropdown trigger + menu |
 | `<ry-select>` | `placeholder`, `name`, `value`, `disabled` | `ry:change` `{value}`. Children: `<ry-option value="...">` |
+| `<ry-combobox>` | `placeholder`, `name`, `value`, `disabled` | `ry:change` `{value, label}`, `ry:input` `{value}`. Searchable dropdown — type to filter. Children: `<ry-option value="...">` |
 | `<ry-switch>` | `checked`, `disabled`, `name` | `ry:change` `{checked}` |
 | `<ry-tooltip>` | `content`, `position` | Hover tooltip |
 | `<ry-toast>` | — | Programmatic: `RyToast.success('msg')`, `.error()`, `.warning()`, `.info()` |
@@ -85,7 +86,7 @@ Wrap markup in `<ry>` to use unprefixed tags:
 
 | Component | Key Attributes | Description |
 |-----------|---------------|-------------|
-| `<ry-card>` | — | Bordered card with padding. Put any content inside |
+| `<ry-card>` | `interactive`, `href` | Card container. All cards lift on hover. `interactive` adds click/keyboard + primary border hover. `href` navigates on click |
 | `<ry-badge>` | `variant="primary\|success\|warning\|danger\|accent"` | Pill badge. Arbitrary color: `style="--ry-badge-color: #8B5CF6"` |
 | `<ry-alert>` | `type="info\|success\|warning\|danger"` | Alert box with optional `[slot="title"]` |
 | `<ry-field>` | `label`, `error`, `hint` | Form field wrapper. See [Forms](#forms) |
@@ -200,6 +201,35 @@ document.querySelector('ry-button-group').addEventListener('ry:change', e => {
 <ry-button size="lg">Large</ry-button>
 ```
 
+### Interactive Card Grid
+
+```html
+<!-- Clickable card grid (e.g., demo index, dashboard) -->
+<ry-grid cols="3">
+  <ry-card interactive href="/demos/goap">
+    <h3>GOAP</h3>
+    <p>Goal-Oriented Action Planning</p>
+  </ry-card>
+  <ry-card interactive href="/demos/fsm">
+    <h3>FSM</h3>
+    <p>Finite State Machine</p>
+  </ry-card>
+  <ry-card interactive href="/demos/bt">
+    <h3>Behavior Trees</h3>
+    <p>Hierarchical task planning</p>
+  </ry-card>
+</ry-grid>
+
+<!-- Listen for clicks -->
+<script>
+document.querySelectorAll('ry-card[interactive]').forEach(card => {
+  card.addEventListener('ry:click', () => console.log('clicked', card.getAttribute('href')));
+});
+</script>
+```
+
+All cards hover-lift by default. `interactive` adds: cursor pointer, stronger lift, primary border on hover, keyboard (Tab/Enter/Space), and `ry:click` event.
+
 ### Badge with Arbitrary Color
 
 ```html

package/README.md

@@ -12,6 +12,16 @@ ry-ui normalizes this. No decisions to make. No architecture to debate. An LLM c
 
 **The goal:** Write once in HTML/CSS/JS. Deploy to web, iOS, Android, desktop. The primitives are portable because they're universal.
 
+### FUNCTION / FORM / THEME
+
+Every component is three independent layers:
+
+- **FUNCTION** (JS) — Behavior. Extends `RyElement`. Manages state, events, keyboard, ARIA. Queries via `data-ry-target`.
+- **FORM** (Structure CSS) — Layout. `ry-structure.css`. Display, flex, grid, padding, overflow, transform/opacity transitions. No colors.
+- **THEME** (Visual CSS) — Appearance. `ry-theme.css`. Colors, shadows, borders, typography, focus rings. Entirely swappable.
+
+These layers are independently replaceable. Structure works with any theme or no theme. Function works regardless of CSS loaded.
+
 ---
 
 - [x] separate the css minimal structure from the theme
@@ -66,6 +76,7 @@ ry-ui normalizes this. No decisions to make. No architecture to debate. An LLM c
 - `<ry-tabs>` - Tabbed content
 - `<ry-dropdown>` - Dropdown menus
 - `<ry-select>` - Custom select
+- `<ry-combobox>` - Searchable dropdown
 - `<ry-switch>` - Toggle switch
 - `<ry-tooltip>` - Hover tooltips
 - `<ry-toast>` - Notifications

package/dist/components/ry-card.d.ts

@@ -0,0 +1,17 @@
+/**
+ * <ry-card>
+ *
+ * Card container. CSS-only by default.
+ * Add `interactive` attribute for clickable cards with href navigation.
+ *
+ * Usage:
+ * <ry-card>Static content</ry-card>
+ * <ry-card interactive href="/demos/goap">Clickable card</ry-card>
+ * <ry-card interactive>Emits ry:click on click</ry-card>
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyCard extends RyElement {
+    #private;
+    setup(): void;
+}
+//# sourceMappingURL=ry-card.d.ts.map

package/dist/components/ry-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-card.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,MAAO,SAAQ,SAAS;;IACnC,KAAK,IAAI,IAAI;CA8Bd"}

package/dist/components/ry-combobox.d.ts

@@ -0,0 +1,25 @@
+/**
+ * <ry-combobox>
+ *
+ * Searchable dropdown with text input filtering.
+ *
+ * Usage:
+ * <ry-combobox placeholder="Search countries..." name="country">
+ *   <ry-option value="us">United States</ry-option>
+ *   <ry-option value="uk">United Kingdom</ry-option>
+ * </ry-combobox>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyCombobox extends RyElement {
+    #private;
+    static observedAttributes: readonly ["value", "disabled"];
+    setup(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    get value(): string;
+    set value(val: string);
+}
+//# sourceMappingURL=ry-combobox.d.ts.map

package/dist/components/ry-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-combobox.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-combobox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKlD,qBAAa,UAAW,SAAQ,SAAS;;IAKvC,MAAM,CAAC,kBAAkB,iCAAkC;IAE3D,KAAK,IAAI,IAAI;IAmSb,IAAI,IAAI,IAAI;IAsCZ,KAAK,IAAI,IAAI;IAmBb,MAAM,IAAI,IAAI;IAQd,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAKpB;CACF"}

package/dist/core/ry-transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAsDH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}
+{"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuDH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}

package/dist/css/ry-structure.css

@@ -48,7 +48,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;
 }
 
@@ -433,20 +433,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);
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -823,6 +816,23 @@ 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] {
+  cursor: pointer;
+}
+
+ry-card[interactive]:hover {
+  transform: translateY(-3px);
+}
+
+ry-card[interactive]:active {
+  transform: translateY(0);
 }
 
 ry-card h3 {
@@ -2807,4 +2817,124 @@ 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 */

package/dist/css/ry-theme.css

@@ -228,23 +228,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) */
@@ -680,6 +675,18 @@ 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);
+}
+
+ry-card[interactive]:hover {
+  border-color: var(--ry-color-primary);
+  box-shadow: var(--ry-shadow-lg);
 }
 
 ry-card h3 {
@@ -2196,4 +2203,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 */