@ryanhelsing/ry-ui 1.0.4 → 1.0.5

package/AGENT.md

@@ -85,7 +85,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 +200,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/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/css/ry-structure.css

@@ -823,6 +823,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 {

package/dist/css/ry-theme.css

@@ -680,6 +680,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 {

package/dist/css/ry-ui.css

@@ -1065,6 +1065,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 {
@@ -3733,6 +3750,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 {

package/dist/ry-ui.d.ts

@@ -30,6 +30,7 @@ export { RyButton } from './components/ry-button.js';
 export { RyButtonGroup } from './components/ry-button-group.js';
 export { RySplit } from './components/ry-split.js';
 export { RyThemeToggle } from './components/ry-theme-toggle.js';
+export { RyCard } from './components/ry-card.js';
 export { RyAlert } from './components/ry-alert.js';
 export { RyField } from './components/ry-field.js';
 export { RySwitch } from './components/ry-switch.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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"}