@ryanhelsing/ry-ui 1.0.14 → 1.0.15

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.
@@ -133,7 +133,7 @@ Set body: `<body style="background: var(--ry-color-bg); color: var(--ry-color-te
133
133
  ### Dropdown Menu
134
134
  ```html
135
135
  <ry-dropdown>
136
- <ry-button slot="trigger">Menu</ry-button>
136
+ <ry-button>Menu</ry-button>
137
137
  <ry-menu>
138
138
  <ry-menu-item>Item</ry-menu-item>
139
139
  </ry-menu>
@@ -155,12 +155,10 @@ RyToast.info('FYI');
155
155
  RyToast.warning('Careful');
156
156
  ```
157
157
 
158
- ### Button Group
158
+ ### Toggle Button Group
159
159
  ```html
160
- <ry-button-group name="view" value="grid">
161
- <ry-button value="grid">Grid</ry-button>
162
- <ry-button value="list">List</ry-button>
163
- </ry-button-group>
160
+ <ry-toggle-button name="view" value="grid" pressed>Grid</ry-toggle-button>
161
+ <ry-toggle-button name="view" value="list">List</ry-toggle-button>
164
162
  ```
165
163
 
166
164
  ### Events
package/README.md CHANGED
@@ -15,7 +15,7 @@ npm install @ryanhelsing/ry-ui
15
15
  ```
16
16
 
17
17
  Set theme: `<html data-ry-theme="light">` — `light` | `dark` | omit for OS preference
18
- Set body: `<body style="background: var(--ry-color-bg); color: var(--ry-color-text);">`
18
+ Set body: `<body data-ry-reset style="background: var(--ry-color-bg); color: var(--ry-color-text);">`
19
19
 
20
20
  ## DON'T / DO
21
21
 
@@ -60,7 +60,7 @@ DO: `<ry-switch name="notify" checked></ry-switch>`
60
60
  <title>My App</title>
61
61
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
62
62
  </head>
63
- <body style="background: var(--ry-color-bg); color: var(--ry-color-text);">
63
+ <body data-ry-reset style="background: var(--ry-color-bg); color: var(--ry-color-text);">
64
64
  <ry-page>
65
65
  <ry-header sticky>
66
66
  <ry-cluster>
@@ -131,7 +131,6 @@ Wrap markup in `<ry>` to use unprefixed tags:
131
131
  | Component | Key Attributes | Events |
132
132
  |-----------|---------------|--------|
133
133
  | `<ry-button>` | `variant="primary\|secondary\|outline\|ghost\|danger\|accent"`, `size="sm\|lg"`, `disabled`, `pressed`, `modal="id"`, `drawer="id"` | `ry:click` |
134
- | `<ry-button-group>` | `name`, `value` | `ry:change` `{value}` |
135
134
  | `<ry-toggle-button>` | `pressed`, `name`, `value`, `size`, `icon`, `disabled` | `ry:change` `{pressed, value}` |
136
135
  | `<ry-modal>` | `id`, `title` | Trigger: `<ry-button modal="id">`. [Details](docs/components/modal.md) |
137
136
  | `<ry-drawer>` | `id`, `position="left\|right"`, `size` | Trigger: `<ry-button drawer="id">`. [Details](docs/components/drawer.md) |
@@ -156,7 +155,7 @@ Wrap markup in `<ry>` to use unprefixed tags:
156
155
  | `<ry-carousel>` | `autoplay`, `interval` | `ry:change` `{index}` |
157
156
  | `<ry-theme-toggle>` | `themes="light,dark"` | Cycles through themes |
158
157
  | `<ry-theme-panel>` | `theme`, `mode` | Floating theme/mode selector. Persists to localStorage |
159
- | `<ry-testimonial>` | `stars` | Quote card with avatar, name, role slots |
158
+ | `<ry-testimonial>` | `stars`, `avatar`, `name`, `role` | Quote card. Plain text children = quote |
160
159
 
161
160
  ### Display Components
162
161
 
@@ -164,17 +163,17 @@ Wrap markup in `<ry>` to use unprefixed tags:
164
163
  |-----------|---------------|-------------|
165
164
  | `<ry-card>` | `interactive`, `href` | Card container. `interactive` adds click/keyboard. `href` navigates |
166
165
  | `<ry-badge>` | `variant="primary\|success\|warning\|danger\|accent"` | Pill badge. Custom: `style="--ry-badge-color: #8B5CF6"` |
167
- | `<ry-alert>` | `type="info\|success\|warning\|danger"` | Alert box with optional `[slot="title"]` |
166
+ | `<ry-alert>` | `type="info\|success\|warning\|danger"` | Alert box |
168
167
  | `<ry-field>` | `label`, `error`, `hint` | Form field wrapper. [Details](docs/components/forms.md) |
169
168
  | `<ry-icon>` | `name` | SVG icon from registry |
170
169
  | `<ry-code>` | `language`, `title` | Syntax-highlighted code block |
171
170
  | `<ry-hero>` | `size="sm\|lg"`, `full-bleed`, `align="left"` | Marketing hero section |
172
- | `<ry-stat>` | `size="sm\|lg"` | Stat card with `slot="value"`, `slot="label"` |
171
+ | `<ry-stat>` | `value`, `label`, `size="sm\|lg"` | Stat card |
173
172
  | `<ry-feature>` | `icon` | Feature card with icon |
174
173
  | `<ry-feature-grid>` | `cols="2\|3\|4"` | Responsive grid for feature cards |
175
174
  | `<ry-pricing>` | — | Container for pricing cards |
176
- | `<ry-pricing-card>` | `featured` | Pricing tier. `featured` scales up with bold border |
177
- | `<ry-heading>` | `size="sm\|lg"`, `align="center\|right"`, `divider` | Section heading with optional `slot="sub"` subtitle |
175
+ | `<ry-pricing-card>` | `title`, `price`, `featured` | Pricing tier. `featured` scales up with bold border |
176
+ | `<ry-heading>` | `size="sm\|lg"`, `align="center\|right"`, `divider`, `sub` | Section heading with optional subtitle |
178
177
 
179
178
  ---
180
179
 
@@ -221,15 +220,6 @@ Event: `ry:resize` `{ width }`
221
220
 
222
221
  Error hides hint automatically. Set `error=""` to clear.
223
222
 
224
- ### Button Group
225
-
226
- ```html
227
- <ry-button-group name="billing" value="monthly">
228
- <ry-button value="monthly">Monthly</ry-button>
229
- <ry-button value="annually">Annually</ry-button>
230
- </ry-button-group>
231
- ```
232
-
233
223
  ### Button Variants
234
224
 
235
225
  ```html
@@ -298,18 +288,14 @@ Error hides hint automatically. Set `error=""` to clear.
298
288
 
299
289
  ```html
300
290
  <ry-pricing>
301
- <ry-pricing-card>
302
- <h3>Free</h3>
303
- <div class="ry-pricing__price">$0<span>/mo</span></div>
291
+ <ry-pricing-card title="Free" price="$0/mo">
304
292
  <ul class="ry-check-list">
305
293
  <li>3 projects</li>
306
294
  <li>Basic support</li>
307
295
  </ul>
308
296
  <ry-button variant="outline">Get Started</ry-button>
309
297
  </ry-pricing-card>
310
- <ry-pricing-card featured>
311
- <h3>Pro</h3>
312
- <div class="ry-pricing__price">$19<span>/mo</span></div>
298
+ <ry-pricing-card featured title="Pro" price="$19/mo">
313
299
  <ul class="ry-check-list">
314
300
  <li>Unlimited projects</li>
315
301
  <li>Priority support</li>
@@ -334,7 +320,7 @@ Error hides hint automatically. Set `error=""` to clear.
334
320
 
335
321
  ```html
336
322
  <ry-dropdown>
337
- <ry-button slot="trigger">Actions</ry-button>
323
+ <ry-button>Actions</ry-button>
338
324
  <ry-menu>
339
325
  <ry-menu-item>Edit</ry-menu-item>
340
326
  <ry-menu-item>Duplicate</ry-menu-item>
@@ -435,9 +421,19 @@ Each color also has `-bg` and `-text` variants for alert/badge backgrounds.
435
421
  Three CSS layers, loaded in order:
436
422
 
437
423
  1. **ry-tokens.css** — CSS custom properties (colors, spacing, etc.)
438
- 2. **ry-structure.css** — Pure layout (no colors)
424
+ 2. **ry-structure.css** — Pure layout (no colors) + Preflight reset via `data-ry-reset`
439
425
  3. **ry-theme.css** — All visual styling (colors, shadows, borders)
440
426
 
427
+ ### Preflight Reset
428
+
429
+ Add `data-ry-reset` to `<body>` to normalize all elements (Tailwind Preflight-equivalent):
430
+
431
+ ```html
432
+ <body data-ry-reset>
433
+ ```
434
+
435
+ Resets box-sizing, margins, padding, form element inheritance, media elements, lists, tables. Without it, only ry-* components are reset.
436
+
441
437
  ### Custom Theme
442
438
 
443
439
  Load structure-only and bring your own:
@@ -529,7 +525,6 @@ Per-component docs with full attributes, events, and examples:
529
525
  |-----|-----------|
530
526
  | [layout](docs/components/layout.md) | page, header, main, footer, section, grid, stack, cluster, split, center, card, nav, divider |
531
527
  | [button](docs/components/button.md) | button, toggle-button |
532
- | [button-group](docs/components/button-group.md) | button-group |
533
528
  | [accordion](docs/components/accordion.md) | accordion, accordion-item |
534
529
  | [tabs](docs/components/tabs.md) | tabs, tab |
535
530
  | [modal](docs/components/modal.md) | modal |
@@ -5,7 +5,7 @@
5
5
  *
6
6
  * Minimal markup (recommended):
7
7
  * <ry-dropdown>
8
- * <ry-button slot="trigger">Options</ry-button>
8
+ * <ry-button>Options</ry-button>
9
9
  * <ry-menu>
10
10
  * <ry-menu-item>Edit</ry-menu-item>
11
11
  * </ry-menu>
@@ -5,11 +5,7 @@
5
5
  *
6
6
  * Usage:
7
7
  * <ry-heading>Page Title</ry-heading>
8
- * <ry-heading size="lg">Large Title</ry-heading>
9
- * <ry-heading align="center">
10
- * Centered Title
11
- * <span slot="sub">A brief description</span>
12
- * </ry-heading>
8
+ * <ry-heading sub="A brief description" align="center">Centered Title</ry-heading>
13
9
  */
14
10
  import { RyElement } from '../core/ry-element.js';
15
11
  export declare class RyHeading extends RyElement {
@@ -1 +1 @@
1
- {"version":3,"file":"ry-heading.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-heading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CAmBd"}
1
+ {"version":3,"file":"ry-heading.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-heading.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CAed"}
@@ -0,0 +1,25 @@
1
+ /**
2
+ * <ry-logo-bar>
3
+ *
4
+ * Logo bar / trust strip for landing pages (CSS-only layout).
5
+ *
6
+ * Default: centered row, wraps on small screens.
7
+ * scroll: horizontal scroll, no wrap.
8
+ * marquee: infinite auto-scrolling loop.
9
+ *
10
+ * Usage:
11
+ * <ry-logo-bar>
12
+ * <p>Trusted by industry leaders</p>
13
+ * <span>Acme</span>
14
+ * <span>Globex</span>
15
+ * </ry-logo-bar>
16
+ *
17
+ * <ry-logo-bar layout="scroll">...</ry-logo-bar>
18
+ * <ry-logo-bar layout="marquee">...</ry-logo-bar>
19
+ */
20
+ import { RyElement } from '../core/ry-element.js';
21
+ export declare class RyLogoBar extends RyElement {
22
+ #private;
23
+ setup(): void;
24
+ }
25
+ //# sourceMappingURL=ry-logo-bar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-logo-bar.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-logo-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CAkCd"}
@@ -7,7 +7,7 @@
7
7
  * <ry-button modal="my-modal">Open</ry-button>
8
8
  * <ry-modal id="my-modal" title="Title">
9
9
  * Content
10
- * <ry-actions slot="footer">...</ry-actions>
10
+ * <footer>...</footer>
11
11
  * </ry-modal>
12
12
  *
13
13
  * JS uses data-ry-target for queries, CSS uses classes for styling.
@@ -5,10 +5,8 @@
5
5
  *
6
6
  * Usage:
7
7
  * <ry-pricing>
8
- * <ry-pricing-card featured>
9
- * <h3>Pro</h3>
10
- * <div slot="price">$29<span>/mo</span></div>
11
- * <ul><li>Feature 1</li></ul>
8
+ * <ry-pricing-card title="Pro" price="$29/mo" featured>
9
+ * <ul class="ry-check-list"><li>Feature 1</li></ul>
12
10
  * <ry-button>Choose Pro</ry-button>
13
11
  * </ry-pricing-card>
14
12
  * </ry-pricing>
@@ -17,5 +15,7 @@ import { RyElement } from '../core/ry-element.js';
17
15
  export declare class RyPricing extends RyElement {
18
16
  }
19
17
  export declare class RyPricingCard extends RyElement {
18
+ #private;
19
+ setup(): void;
20
20
  }
21
21
  //# sourceMappingURL=ry-pricing.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ry-pricing.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-pricing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,SAAU,SAAQ,SAAS;CAAG;AAC3C,qBAAa,aAAc,SAAQ,SAAS;CAAG"}
1
+ {"version":3,"file":"ry-pricing.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-pricing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,SAAU,SAAQ,SAAS;CAAG;AAE3C,qBAAa,aAAc,SAAQ,SAAS;;IAC1C,KAAK,IAAI,IAAI;CAiBd"}
@@ -0,0 +1,30 @@
1
+ /**
2
+ * <ry-search-list>
3
+ *
4
+ * Always-visible, filterable, keyboard-navigable list.
5
+ * Supports optional grouping via <ry-search-group>.
6
+ *
7
+ * Usage:
8
+ * <ry-search-list placeholder="Search...">
9
+ * <ry-search-item value="grid">Grid</ry-search-item>
10
+ * <ry-search-item value="tabs">Tabs</ry-search-item>
11
+ * </ry-search-list>
12
+ *
13
+ * Grouped:
14
+ * <ry-search-list placeholder="Search...">
15
+ * <ry-search-group label="Layout">
16
+ * <ry-search-item value="grid">Grid</ry-search-item>
17
+ * </ry-search-group>
18
+ * </ry-search-list>
19
+ *
20
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
21
+ */
22
+ import { RyElement } from '../core/ry-element.js';
23
+ export declare class RySearchList extends RyElement {
24
+ #private;
25
+ setup(): void;
26
+ get value(): string;
27
+ set value(val: string);
28
+ clear(): void;
29
+ }
30
+ //# sourceMappingURL=ry-search-list.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-search-list.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-search-list.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAuFlD,qBAAa,YAAa,SAAQ,SAAS;;IAMzC,KAAK,IAAI,IAAI;IAsYb,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAGpB;IAED,KAAK,IAAI,IAAI;CAKd"}
@@ -4,10 +4,7 @@
4
4
  * KPI / statistic display with optional trend arrow.
5
5
  *
6
6
  * Usage:
7
- * <ry-stat trend="up">
8
- * <span slot="value">2,847</span>
9
- * <span slot="label">Active Users</span>
10
- * </ry-stat>
7
+ * <ry-stat value="2,847" label="Active Users" trend="up"></ry-stat>
11
8
  */
12
9
  import { RyElement } from '../core/ry-element.js';
13
10
  export declare class RyStat extends RyElement {
@@ -1 +1 @@
1
- {"version":3,"file":"ry-stat.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-stat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,MAAO,SAAQ,SAAS;;IACnC,KAAK,IAAI,IAAI;CAyBd"}
1
+ {"version":3,"file":"ry-stat.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-stat.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,MAAO,SAAQ,SAAS;;IACnC,KAAK,IAAI,IAAI;CAsBd"}
@@ -4,11 +4,8 @@
4
4
  * Customer testimonial / quote card.
5
5
  *
6
6
  * Usage:
7
- * <ry-testimonial stars="5">
8
- * <img slot="avatar" src="photo.jpg" alt="Jane Doe">
9
- * <blockquote>This changed everything.</blockquote>
10
- * <span slot="name">Jane Doe</span>
11
- * <span slot="role">CTO, Acme Corp</span>
7
+ * <ry-testimonial name="Jane Doe" role="CTO, Acme Corp" avatar="photo.jpg" stars="5">
8
+ * This changed everything.
12
9
  * </ry-testimonial>
13
10
  */
14
11
  import { RyElement } from '../core/ry-element.js';
@@ -1 +1 @@
1
- {"version":3,"file":"ry-testimonial.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-testimonial.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,aAAc,SAAQ,SAAS;;IAC1C,KAAK,IAAI,IAAI;CAmCd"}
1
+ {"version":3,"file":"ry-testimonial.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-testimonial.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,aAAc,SAAQ,SAAS;;IAC1C,KAAK,IAAI,IAAI;CA+Bd"}
@@ -1 +1 @@
1
- {"version":3,"file":"ry-theme-panel.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-theme-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AASlD,qBAAa,YAAa,SAAQ,SAAS;;IAIzC,KAAK,IAAI,IAAI;IAiKb,IAAI,KAAK,IAAI,MAAM,CAAwB;IAC3C,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAKlB;IAED,IAAI,IAAI,IAAI,MAAM,CAAuB;IACzC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAKjB;CACF"}
1
+ {"version":3,"file":"ry-theme-panel.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-theme-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AASlD,qBAAa,YAAa,SAAQ,SAAS;;IAIzC,KAAK,IAAI,IAAI;IAyJb,IAAI,KAAK,IAAI,MAAM,CAAwB;IAC3C,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAKlB;IAED,IAAI,IAAI,IAAI,MAAM,CAAuB;IACzC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAKjB;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AA0DH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}
1
+ {"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AA6DH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}