@ryanhelsing/ry-ui 1.0.3 → 1.0.5

package/docs/components/button-group.md

@@ -0,0 +1,36 @@
+# Button Group
+
+## `<ry-button-group>`
+
+Segmented control with radio-group behavior. Only one child button can be selected at a time.
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `name` | string | Optional group name |
+| `value` | string | Currently selected button value |
+
+Events: `ry:change` — `e.detail.value`
+
+Child buttons must have a `value` attribute to participate. Clicking a button sets `pressed` + `aria-pressed="true"` on it and clears the others.
+
+```html
+<ry-button-group name="billing" value="monthly">
+  <ry-button value="monthly">Monthly</ry-button>
+  <ry-button value="annually">Annually</ry-button>
+</ry-button-group>
+
+<ry-button-group name="mode" value="terminal">
+  <ry-button value="direct">Direct</ry-button>
+  <ry-button value="terminal">Terminal</ry-button>
+  <ry-button value="release">Release</ry-button>
+</ry-button-group>
+```
+
+JS:
+```js
+const group = document.querySelector('ry-button-group');
+group.addEventListener('ry:change', (e) => {
+  console.log(e.detail.value); // "monthly" | "annually"
+});
+group.value = 'annually'; // programmatic selection
+```

package/docs/components/forms.md

@@ -2,20 +2,24 @@
 
 ## `<ry-field>`
 
-Wraps native `<input>` / `<textarea>` with label and optional error.
+Wraps native `<input>` / `<textarea>` / `<select>` with auto-generated label, error, and hint. Handles accessibility linking (aria-describedby, aria-invalid) automatically.
 
 | Attribute | Values | Description |
 |-----------|--------|-------------|
 | `label` | string | Label text |
-| `error` | string | Error message |
+| `error` | string | Error message (hides hint when set) |
+| `hint` | string | Helper text shown below input |
 
 ```html
-<ry-field label="Email">
+<ry-field label="Email" hint="We'll never share your email">
   <input type="email" placeholder="you@example.com">
 </ry-field>
-<ry-field label="Bio" error="Required">
-  <textarea rows="3"></textarea>
+
+<ry-field label="Password" error="Must be at least 8 characters">
+  <input type="password">
 </ry-field>
+
+<!-- Setting error="" clears the error and shows hint again -->
 ```
 
 ## `<ry-select>`

package/docs/components/layout.md

@@ -75,9 +75,17 @@ Horizontal flex, wraps.
 
 ## `<ry-card>`
 
-Content container with padding and border. Use `<ry-actions>` inside for button groups.
+Content container with padding and border. All cards lift subtly on hover. Add `interactive` for clickable cards.
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `interactive` | boolean | Clickable card — cursor pointer, stronger hover lift, primary border, keyboard support |
+| `href` | URL | Navigate on click (requires `interactive`) |
+
+Events: `ry:click` (interactive cards only)
 
 ```html
+<!-- Static card -->
 <ry-card>
   <h3>Title</h3>
   <p>Content.</p>
@@ -86,8 +94,25 @@ Content container with padding and border. Use `<ry-actions>` inside for button
     <ry-button variant="ghost">Cancel</ry-button>
   </ry-actions>
 </ry-card>
+
+<!-- Interactive card with navigation -->
+<ry-card interactive href="/demos/goap">
+  <h3>GOAP</h3>
+  <p>Goal-Oriented Action Planning</p>
+</ry-card>
+
+<!-- Interactive card with event -->
+<ry-card interactive>
+  <h3>Click Me</h3>
+  <p>Emits ry:click. Tab + Enter for keyboard.</p>
+</ry-card>
 ```
 
+Hover behavior:
+- **All cards**: subtle lift (-2px) + border/shadow bump
+- **Interactive**: stronger lift (-3px), primary-colored border, snaps back on click
+- Clicks on child `<a>`, `<button>`, `<ry-button>` elements pass through normally
+
 ## `<ry-section>`
 
 Content section block. Adds bottom margin between sections, removed on last child.
@@ -112,15 +137,43 @@ Sidebar / secondary content block.
 
 ## `<ry-split>`
 
-Two-pane layout: content (flexible) + sidebar (300px). Stacks vertically on mobile (<768px).
+Two-pane layout: content (flexible) + sidebar (fixed). Stacks vertically on mobile (<768px).
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `resizable` | boolean | Enables drag handle between panes |
+| `persist` | string | localStorage key — saves/restores width as `ry-split:{key}` |
+
+CSS custom properties:
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--ry-split-width` | `300px` | Sidebar width |
+| `--ry-split-min-width` | `100px` | Minimum width during resize |
+| `--ry-split-max-width` | `80%` | Maximum width during resize |
+
+Events: `ry:resize` — `e.detail.width`
 
 ```html
+<!-- Basic -->
 <ry-split>
   <div>Main content (flex: 1)</div>
   <div>Sidebar (300px)</div>
 </ry-split>
+
+<!-- Resizable with persistence -->
+<ry-split resizable persist="sidebar" style="--ry-split-width: 400px">
+  <main>Content</main>
+  <aside>Resizable sidebar</aside>
+</ry-split>
 ```
 
+Resize interaction:
+- **Drag** handle between panes (mouse + touch)
+- **Arrow keys** ±10px, **Shift+Arrow** ±50px
+- **Home/End** jump to min/max
+- **Double-click** handle to reset to default
+
 ## `<ry-center>`
 
 Centers content both horizontally and vertically.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanhelsing/ry-ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Framework-agnostic, Light DOM web components. CSS is the source of truth.",
   "type": "module",
   "main": "./dist/ry-ui.js",
@@ -16,6 +16,7 @@
   },
   "files": [
     "dist",
+    "AGENT.md",
     "AGENTS.md",
     "docs/components",
     "docs/theming.md"
@@ -26,7 +27,8 @@
     "build:types": "tsc --emitDeclarationOnly",
     "build:css": "mkdir -p dist/css && node -e \"const fs=require('fs'); const files=['src/css/ry-tokens.css','src/css/ry-structure.css','src/css/ry-theme.css']; const out=files.map(f=>fs.readFileSync(f,'utf8')).join('\\n'); fs.writeFileSync('dist/css/ry-ui.css',out);\" && cp src/css/ry-tokens.css src/css/ry-structure.css src/css/ry-theme.css dist/css/ && mkdir -p dist/themes && cp src/themes/*.css dist/themes/",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "release": "npm run build && git add -A && git diff-index --quiet HEAD || git commit -m 'new build' && npm version patch && npm publish --access public"
   },
   "devDependencies": {
     "typescript": "^5.7.2",