@ryanhelsing/ry-ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENT.md +30 -1
- package/dist/components/ry-card.d.ts +17 -0
- package/dist/components/ry-card.d.ts.map +1 -0
- package/dist/css/ry-structure.css +17 -0
- package/dist/css/ry-theme.css +12 -0
- package/dist/css/ry-ui.css +29 -0
- package/dist/ry-ui.d.ts +1 -0
- package/dist/ry-ui.d.ts.map +1 -1
- package/dist/ry-ui.js +125 -110
- package/dist/ry-ui.js.map +1 -1
- package/docs/components/layout.md +26 -1
- package/package.json +1 -1
|
@@ -75,9 +75,17 @@ Horizontal flex, wraps.
|
|
|
75
75
|
|
|
76
76
|
## `<ry-card>`
|
|
77
77
|
|
|
78
|
-
Content container with padding and border.
|
|
78
|
+
Content container with padding and border. All cards lift subtly on hover. Add `interactive` for clickable cards.
|
|
79
|
+
|
|
80
|
+
| Attribute | Values | Description |
|
|
81
|
+
|-----------|--------|-------------|
|
|
82
|
+
| `interactive` | boolean | Clickable card — cursor pointer, stronger hover lift, primary border, keyboard support |
|
|
83
|
+
| `href` | URL | Navigate on click (requires `interactive`) |
|
|
84
|
+
|
|
85
|
+
Events: `ry:click` (interactive cards only)
|
|
79
86
|
|
|
80
87
|
```html
|
|
88
|
+
<!-- Static card -->
|
|
81
89
|
<ry-card>
|
|
82
90
|
<h3>Title</h3>
|
|
83
91
|
<p>Content.</p>
|
|
@@ -86,8 +94,25 @@ Content container with padding and border. Use `<ry-actions>` inside for button
|
|
|
86
94
|
<ry-button variant="ghost">Cancel</ry-button>
|
|
87
95
|
</ry-actions>
|
|
88
96
|
</ry-card>
|
|
97
|
+
|
|
98
|
+
<!-- Interactive card with navigation -->
|
|
99
|
+
<ry-card interactive href="/demos/goap">
|
|
100
|
+
<h3>GOAP</h3>
|
|
101
|
+
<p>Goal-Oriented Action Planning</p>
|
|
102
|
+
</ry-card>
|
|
103
|
+
|
|
104
|
+
<!-- Interactive card with event -->
|
|
105
|
+
<ry-card interactive>
|
|
106
|
+
<h3>Click Me</h3>
|
|
107
|
+
<p>Emits ry:click. Tab + Enter for keyboard.</p>
|
|
108
|
+
</ry-card>
|
|
89
109
|
```
|
|
90
110
|
|
|
111
|
+
Hover behavior:
|
|
112
|
+
- **All cards**: subtle lift (-2px) + border/shadow bump
|
|
113
|
+
- **Interactive**: stronger lift (-3px), primary-colored border, snaps back on click
|
|
114
|
+
- Clicks on child `<a>`, `<button>`, `<ry-button>` elements pass through normally
|
|
115
|
+
|
|
91
116
|
## `<ry-section>`
|
|
92
117
|
|
|
93
118
|
Content section block. Adds bottom margin between sections, removed on last child.
|