@ryanhelsing/ry-ui 1.0.9 → 1.0.10

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.
Files changed (41) hide show
  1. package/.claude/skills/ry-ui-builder/SKILL.md +186 -0
  2. package/AGENT.md +3 -1
  3. package/README.md +16 -2
  4. package/dist/_redirects +1 -0
  5. package/dist/app.d.ts +2 -0
  6. package/dist/app.d.ts.map +1 -0
  7. package/dist/components/ry-testimonial.d.ts +19 -0
  8. package/dist/components/ry-testimonial.d.ts.map +1 -0
  9. package/dist/components/ry-theme-panel.d.ts +25 -0
  10. package/dist/components/ry-theme-panel.d.ts.map +1 -0
  11. package/dist/core/ry-icons.d.ts.map +1 -1
  12. package/dist/core/ry-transform.d.ts.map +1 -1
  13. package/dist/css/ry-structure.css +122 -3
  14. package/dist/css/ry-theme.css +133 -0
  15. package/dist/css/ry-tokens.css +4 -26
  16. package/dist/css/ry-ui.css +259 -29
  17. package/dist/pages/components.html +1827 -0
  18. package/dist/pages/landing.html +229 -0
  19. package/dist/ry-ui.d.ts +2 -0
  20. package/dist/ry-ui.d.ts.map +1 -1
  21. package/dist/ry-ui.js +382 -245
  22. package/dist/ry-ui.js.map +1 -1
  23. package/docs/components/forms.md +10 -3
  24. package/examples/starter-local.html +252 -0
  25. package/examples/starter-minimal.html +252 -0
  26. package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/LICENSE.txt +21 -0
  27. package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/README.md +7 -0
  28. package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/dist/index.html +23 -0
  29. package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/dist/style.css +126 -0
  30. package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/src/index.html +5 -0
  31. package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/src/style.scss +161 -0
  32. package/examples/themes/skeuomorphic/led-controls/LICENSE.txt +21 -0
  33. package/examples/themes/skeuomorphic/led-controls/README.md +7 -0
  34. package/examples/themes/skeuomorphic/led-controls/dist/index.html +17 -0
  35. package/examples/themes/skeuomorphic/led-controls/dist/script.js +27 -0
  36. package/examples/themes/skeuomorphic/led-controls/dist/style.css +135 -0
  37. package/examples/themes/skeuomorphic/led-controls/src/index.html +1 -0
  38. package/examples/themes/skeuomorphic/led-controls/src/script.ts +59 -0
  39. package/examples/themes/skeuomorphic/led-controls/src/style.scss +253 -0
  40. package/llms.txt +346 -0
  41. package/package.json +12 -4
package/.claude/skills/ry-ui-builder/SKILL.md ADDED
@@ -0,0 +1,186 @@
1
+ ---
2
+ name: ry-ui-builder
3
+ description: Build UIs with ry-ui web components. Use when creating pages, layouts, forms, dashboards, or any HTML interface. Provides component catalog, patterns, and anti-patterns so you use existing components instead of writing custom CSS/JS.
4
+ user-invocable: true
5
+ ---
6
+
7
+ # ry-ui Component Builder
8
+
9
+ **ALWAYS use ry-ui components instead of writing custom CSS or JavaScript.**
10
+
11
+ ## Setup
12
+
13
+ Add these two lines to any HTML page:
14
+
15
+ ```html
16
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
17
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/ry-ui.js"></script>
18
+ ```
19
+
20
+ Set theme: `<html data-ry-theme="light">` (or `"dark"`, or omit for OS preference)
21
+ Set body: `<body style="background: var(--ry-color-bg); color: var(--ry-color-text);">`
22
+
23
+ ## Rules
24
+
25
+ 1. **NEVER write custom modal, dropdown, tab, accordion, toast, or button CSS.** ry-ui has these built in.
26
+ 2. **NEVER write flexbox/grid layout CSS for page structure.** Use `<ry-page>`, `<ry-header>`, `<ry-main>`, `<ry-grid>`, `<ry-stack>`, `<ry-cluster>`.
27
+ 3. **NEVER create CSS variables for colors or spacing.** Use `--ry-color-*`, `--ry-space-*`, `--ry-radius-*` tokens.
28
+ 4. **DO use ry-ui tokens** in any custom CSS you write: `color: var(--ry-color-text-muted)`, `padding: var(--ry-space-4)`.
29
+ 5. **DO compose pages from ry-ui primitives** — they handle accessibility, keyboard nav, focus trapping, and dark mode automatically.
30
+
31
+ ## Page Template
32
+
33
+ ```html
34
+ <!DOCTYPE html>
35
+ <html lang="en" data-ry-theme="light">
36
+ <head>
37
+ <meta charset="UTF-8">
38
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
39
+ <title>My App</title>
40
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
41
+ </head>
42
+ <body style="background: var(--ry-color-bg); color: var(--ry-color-text);">
43
+ <ry-page>
44
+ <ry-header sticky>
45
+ <ry-cluster><strong>App Name</strong></ry-cluster>
46
+ <ry-actions><ry-theme-toggle themes="light,dark"></ry-theme-toggle></ry-actions>
47
+ </ry-header>
48
+ <ry-main>
49
+ <ry-section>
50
+ <!-- your content -->
51
+ </ry-section>
52
+ </ry-main>
53
+ <ry-footer>Footer</ry-footer>
54
+ </ry-page>
55
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/ry-ui.js"></script>
56
+ </body>
57
+ </html>
58
+ ```
59
+
60
+ ## Component Reference
61
+
62
+ ### Layout (CSS-only)
63
+ - `<ry-page>` — root container, full height
64
+ - `<ry-header sticky>` — top bar, space-between
65
+ - `<ry-main>` — centered content, max-width 1200px
66
+ - `<ry-footer>` — footer with border-top
67
+ - `<ry-section>` — content block with margin
68
+ - `<ry-grid cols="3">` — responsive grid (cols-sm, cols-md, cols-lg for breakpoints)
69
+ - `<ry-stack gap="md">` — vertical flex
70
+ - `<ry-cluster gap="sm">` — horizontal flex, wraps
71
+ - `<ry-center>` — center both axes
72
+ - `<ry-card>` — card container (lifts on hover), `interactive` for clickable
73
+ - `<ry-split resizable persist="key">` — two-column with drag resize
74
+ - `<ry-divider>` / `<ry-divider vertical>` — separator line
75
+ - `<ry-nav>` — nav links, active: `<a aria-current="page">`
76
+ - `<ry-logo>` — bold inline text
77
+ - `<ry-actions>` — flex row for buttons
78
+
79
+ ### Buttons
80
+ ```html
81
+ <ry-button>Default</ry-button>
82
+ <ry-button variant="primary|secondary|outline|ghost|danger|accent">Styled</ry-button>
83
+ <ry-button size="sm|lg">Sized</ry-button>
84
+ <ry-button modal="modal-id">Opens modal</ry-button>
85
+ <ry-button drawer="drawer-id">Opens drawer</ry-button>
86
+ <ry-button disabled>Disabled</ry-button>
87
+ ```
88
+
89
+ ### Modal
90
+ ```html
91
+ <ry-button modal="my-modal">Open</ry-button>
92
+ <ry-modal id="my-modal" title="Title">Content</ry-modal>
93
+ ```
94
+
95
+ ### Drawer
96
+ ```html
97
+ <ry-button drawer="my-drawer">Open</ry-button>
98
+ <ry-drawer id="my-drawer" side="left|right|bottom" title="Title">Content</ry-drawer>
99
+ ```
100
+
101
+ ### Tabs
102
+ ```html
103
+ <ry-tabs>
104
+ <ry-tab title="Tab 1" active>Content 1</ry-tab>
105
+ <ry-tab title="Tab 2">Content 2</ry-tab>
106
+ </ry-tabs>
107
+ ```
108
+
109
+ ### Accordion
110
+ ```html
111
+ <ry-accordion>
112
+ <ry-accordion-item title="Section" open>Content</ry-accordion-item>
113
+ </ry-accordion>
114
+ ```
115
+
116
+ ### Forms
117
+ ```html
118
+ <ry-field label="Email" hint="Help text" error="Error msg">
119
+ <input type="email">
120
+ </ry-field>
121
+
122
+ <ry-select placeholder="Choose..." name="field">
123
+ <ry-option value="a">A</ry-option>
124
+ </ry-select>
125
+
126
+ <ry-switch name="toggle" checked></ry-switch>
127
+ <!-- ry:change event detail: { value: "true"/"false" (STRING not boolean!), label: "on"/"off" }
128
+ Use e.detail.value === 'true' to get a boolean — "false" is truthy in JS! -->
129
+
130
+ <ry-slider min="0" max="100" value="50"></ry-slider>
131
+ ```
132
+
133
+ ### Dropdown Menu
134
+ ```html
135
+ <ry-dropdown>
136
+ <ry-button slot="trigger">Menu</ry-button>
137
+ <ry-menu>
138
+ <ry-menu-item>Item</ry-menu-item>
139
+ </ry-menu>
140
+ </ry-dropdown>
141
+ ```
142
+
143
+ ### Display
144
+ ```html
145
+ <ry-alert type="info|success|warning|danger" dismissible>Message</ry-alert>
146
+ <ry-badge variant="primary|success|warning|danger|accent">Label</ry-badge>
147
+ <ry-tooltip content="Help" position="top|bottom|left|right"><span>Hover me</span></ry-tooltip>
148
+ ```
149
+
150
+ ### Toast (JS only)
151
+ ```javascript
152
+ RyToast.success('Saved!');
153
+ RyToast.error('Failed');
154
+ RyToast.info('FYI');
155
+ RyToast.warning('Careful');
156
+ ```
157
+
158
+ ### Button Group
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>
164
+ ```
165
+
166
+ ### Events
167
+ All events prefixed `ry:` — `ry:change`, `ry:open`, `ry:close`, `ry:click`, `ry:select`
168
+
169
+ ```javascript
170
+ element.addEventListener('ry:change', (e) => console.log(e.detail));
171
+ document.querySelector('ry-modal').open();
172
+ document.querySelector('ry-modal').close();
173
+ ```
174
+
175
+ ## Theming
176
+
177
+ Override tokens — no build step:
178
+ ```css
179
+ :root {
180
+ --ry-color-primary: oklch(0.541 0.218 293);
181
+ --ry-radius-md: 0;
182
+ }
183
+ ```
184
+
185
+ Key tokens: `--ry-color-{primary,secondary,accent,success,warning,danger,info,text,bg,border}`,
186
+ `--ry-space-{1-20}`, `--ry-radius-{sm,md,lg,full}`, `--ry-shadow-{sm,md,lg,xl}`
package/AGENT.md CHANGED
@@ -67,7 +67,7 @@ Wrap markup in `<ry>` to use unprefixed tags:
67
67
  | `<ry-dropdown>` | — | Dropdown trigger + menu |
68
68
  | `<ry-select>` | `placeholder`, `name`, `value`, `disabled` | `ry:change` `{value}`. Children: `<ry-option value="...">` |
69
69
  | `<ry-combobox>` | `placeholder`, `name`, `value`, `disabled` | `ry:change` `{value, label}`, `ry:input` `{value}`. Searchable dropdown — type to filter. Children: `<ry-option value="...">` |
70
- | `<ry-switch>` | `checked`, `disabled`, `name` | `ry:change` `{checked}` |
70
+ | `<ry-switch>` | `checked`, `disabled`, `name` | `ry:change` `{value, label}` — value is `"true"`/`"false"` (string), label is `"on"`/`"off"` |
71
71
  | `<ry-tooltip>` | `content`, `position` | Hover tooltip |
72
72
  | `<ry-toast>` | — | Programmatic: `RyToast.success('msg')`, `.error()`, `.warning()`, `.info()` |
73
73
  | `<ry-slider>` | `min`, `max`, `step`, `value`, `color`, `disabled` | `ry:change` `{value}` |
@@ -81,6 +81,8 @@ Wrap markup in `<ry>` to use unprefixed tags:
81
81
  | `<ry-tag-input>` | `name`, `value`, `placeholder` | `ry:change` `{tags}` |
82
82
  | `<ry-carousel>` | `autoplay`, `interval` | `ry:change` `{index}` |
83
83
  | `<ry-theme-toggle>` | `themes="light,dark"` | Cycles through themes |
84
+ | `<ry-theme-panel>` | `theme`, `mode`, `base-path` | Floating theme/mode selector. Themes: `none`, `default`, `ocean`. Modes: `auto`, `light`, `dark`. Emits `ry:theme-panel-change` `{theme, mode}`. Persists to localStorage. |
85
+ | `<ry-testimonial>` | `stars` | Customer quote card. Slots: `avatar` (img), `name`, `role`. Blockquote for quote text. Stars show star rating. |
84
86
 
85
87
  ### Display Components
86
88
 
package/README.md CHANGED
@@ -80,6 +80,8 @@ These layers are independently replaceable. Structure works with any theme or no
80
80
  - `<ry-switch>` - Toggle switch
81
81
  - `<ry-tooltip>` - Hover tooltips
82
82
  - `<ry-toast>` - Notifications
83
+ - `<ry-theme-panel>` - Floating theme/mode selector (none, default, ocean + light/dark)
84
+ - `<ry-testimonial>` - Customer testimonial / quote card with avatar and star rating
83
85
 
84
86
  ### Forms
85
87
  - `<ry-field>` - Form field wrapper with auto label, error, and hint
@@ -146,11 +148,23 @@ RyToast.error('Failed');
146
148
 
147
149
  ## Themes
148
150
 
151
+ Theme and mode are orthogonal — every theme supports light and dark:
152
+
149
153
  ```html
150
- <html data-ry-theme="dark">
154
+ <!-- Theme controls visual skin -->
155
+ <html data-ry-theme="ocean">
156
+
157
+ <!-- Mode controls light/dark (independent of theme) -->
158
+ <html data-ry-mode="dark">
159
+
160
+ <!-- "none" theme shows pure structure (no visual styling) -->
161
+ <html data-ry-theme="none">
151
162
  ```
152
163
 
153
- Available: `light`, `dark`, `ocean`
164
+ Available themes: `none`, `default`, `ocean`
165
+ Available modes: `auto` (OS preference), `light`, `dark`
166
+
167
+ Use `<ry-theme-panel>` for an interactive floating selector.
154
168
 
155
169
  ## CSS Architecture
156
170
 
package/dist/_redirects ADDED
@@ -0,0 +1 @@
1
+ /* /index.html 200
package/dist/app.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import './ry-ui.js';
2
+ //# sourceMappingURL=app.d.ts.map
package/dist/app.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/ts/app.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC"}
package/dist/components/ry-testimonial.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * <ry-testimonial>
3
+ *
4
+ * Customer testimonial / quote card.
5
+ *
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>
12
+ * </ry-testimonial>
13
+ */
14
+ import { RyElement } from '../core/ry-element.js';
15
+ export declare class RyTestimonial extends RyElement {
16
+ #private;
17
+ setup(): void;
18
+ }
19
+ //# sourceMappingURL=ry-testimonial.d.ts.map
package/dist/components/ry-testimonial.d.ts.map ADDED
@@ -0,0 +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"}
package/dist/components/ry-theme-panel.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ /**
2
+ * <ry-theme-panel>
3
+ *
4
+ * Floating theme/mode selector panel.
5
+ * Theme and mode are orthogonal — every theme supports light and dark.
6
+ *
7
+ * Usage:
8
+ * <ry-theme-panel></ry-theme-panel>
9
+ *
10
+ * Themes: "none" (bare structure), "default", "ocean"
11
+ * Modes: "auto" (OS preference), "light", "dark"
12
+ *
13
+ * Sets data-ry-theme and data-ry-mode on <html>.
14
+ * Persists selection in localStorage.
15
+ */
16
+ import { RyElement } from '../core/ry-element.js';
17
+ export declare class RyThemePanel extends RyElement {
18
+ #private;
19
+ setup(): void;
20
+ get theme(): string;
21
+ set theme(v: string);
22
+ get mode(): string;
23
+ set mode(v: string);
24
+ }
25
+ //# sourceMappingURL=ry-theme-panel.d.ts.map
package/dist/components/ry-theme-panel.d.ts.map ADDED
@@ -0,0 +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;IA8Jb,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"}
package/dist/core/ry-icons.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ry-icons.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AA2GH;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAEpE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,EAAE,CAEvC"}
1
+ {"version":3,"file":"ry-icons.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AA8GH;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAEpE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,EAAE,CAEvC"}
package/dist/core/ry-transform.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAyDH;;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 CHANGED
@@ -164,6 +164,26 @@ ry-section:last-child {
164
164
  margin-block-end: 0;
165
165
  }
166
166
 
167
+ ry-section[narrow] {
168
+ max-inline-size: 48rem;
169
+ margin-inline: auto;
170
+ }
171
+
172
+ /* Logo bar pattern */
173
+ .ry-logo-bar {
174
+ text-align: center;
175
+ }
176
+
177
+ .ry-logo-bar p {
178
+ margin: 0 0 var(--ry-space-4, 1rem);
179
+ }
180
+
181
+ .ry-logo-bar ry-cluster {
182
+ justify-content: center;
183
+ gap: var(--ry-space-10, 2.5rem);
184
+ flex-wrap: wrap;
185
+ }
186
+
167
187
  /* ═══════════════════════════════════════════════════════════════
168
188
  GRID
169
189
  ═══════════════════════════════════════════════════════════════ */
@@ -2602,12 +2622,14 @@ ry-hero[full-bleed] {
2602
2622
  ry-stat {
2603
2623
  display: flex;
2604
2624
  flex-direction: column;
2625
+ align-items: center;
2626
+ text-align: center;
2605
2627
  gap: var(--ry-space-1, 0.25rem);
2606
2628
  }
2607
2629
 
2608
- ry-stat[align="center"] {
2609
- align-items: center;
2610
- text-align: center;
2630
+ ry-stat[align="left"] {
2631
+ align-items: flex-start;
2632
+ text-align: start;
2611
2633
  }
2612
2634
 
2613
2635
  ry-stat [data-ry-target="value"] {
@@ -2742,6 +2764,7 @@ ry-pricing-card ul li {
2742
2764
 
2743
2765
  ry-pricing-card :is(ry-button, .ry-btn) {
2744
2766
  margin-block-start: auto;
2767
+ width: 100%;
2745
2768
  }
2746
2769
 
2747
2770
  /* ═══════════════════════════════════════════════════════════════
@@ -2936,4 +2959,100 @@ ry-combobox [data-ry-target="native"] {
2936
2959
  border: 0;
2937
2960
  }
2938
2961
 
2962
+ /* ═══════════════════════════════════════════════════════════════
2963
+ TESTIMONIAL
2964
+ ═══════════════════════════════════════════════════════════════ */
2965
+
2966
+ ry-testimonial {
2967
+ display: flex;
2968
+ flex-direction: column;
2969
+ align-items: center;
2970
+ text-align: center;
2971
+ gap: var(--ry-space-3, 0.75rem);
2972
+ padding: var(--ry-space-6, 1.5rem);
2973
+ }
2974
+
2975
+ ry-testimonial [data-ry-target="avatar"] {
2976
+ width: 4rem;
2977
+ height: 4rem;
2978
+ border-radius: 9999px;
2979
+ overflow: hidden;
2980
+ flex-shrink: 0;
2981
+ }
2982
+
2983
+ ry-testimonial [data-ry-target="avatar"] img {
2984
+ width: 100%;
2985
+ height: 100%;
2986
+ object-fit: cover;
2987
+ }
2988
+
2989
+ ry-testimonial [data-ry-target="quote"] {
2990
+ margin: 0;
2991
+ max-inline-size: 36rem;
2992
+ }
2993
+
2994
+ ry-testimonial [data-ry-target="stars"] {
2995
+ display: flex;
2996
+ gap: var(--ry-space-1, 0.25rem);
2997
+ }
2998
+
2999
+ ry-testimonial [data-ry-target="stars"] svg {
3000
+ width: 16px;
3001
+ height: 16px;
3002
+ }
3003
+
3004
+ ry-testimonial [data-ry-target="attribution"] {
3005
+ display: flex;
3006
+ flex-direction: column;
3007
+ gap: var(--ry-space-1, 0.25rem);
3008
+ }
3009
+
3010
+ /* ═══════════════════════════════════════════════════════════════
3011
+ THEME PANEL
3012
+ ═══════════════════════════════════════════════════════════════ */
3013
+
3014
+ ry-theme-panel {
3015
+ position: fixed;
3016
+ inset-block-end: var(--ry-space-4, 1rem);
3017
+ inset-inline-end: var(--ry-space-4, 1rem);
3018
+ z-index: var(--ry-z-fixed, 1000);
3019
+ }
3020
+
3021
+ ry-theme-panel [data-ry-target="panel"] {
3022
+ display: flex;
3023
+ flex-direction: column;
3024
+ gap: var(--ry-space-2, 0.5rem);
3025
+ padding: var(--ry-space-3, 0.75rem);
3026
+ }
3027
+
3028
+ ry-theme-panel [data-ry-target="theme-row"],
3029
+ ry-theme-panel [data-ry-target="mode-row"] {
3030
+ display: flex;
3031
+ align-items: center;
3032
+ gap: var(--ry-space-3, 0.75rem);
3033
+ }
3034
+
3035
+ ry-theme-panel [data-ry-target="theme-options"],
3036
+ ry-theme-panel [data-ry-target="mode-options"] {
3037
+ display: flex;
3038
+ gap: var(--ry-space-1, 0.25rem);
3039
+ }
3040
+
3041
+ ry-theme-panel [data-ry-target="label"] {
3042
+ min-inline-size: 3rem;
3043
+ text-transform: uppercase;
3044
+ letter-spacing: 0.05em;
3045
+ }
3046
+
3047
+ ry-theme-panel [data-ry-target="theme-btn"],
3048
+ ry-theme-panel [data-ry-target="mode-btn"] {
3049
+ padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
3050
+ font: inherit;
3051
+ font-size: 0.6875rem;
3052
+ cursor: pointer;
3053
+ border: none;
3054
+ background: none;
3055
+ line-height: 1;
3056
+ }
3057
+
2939
3058
  } /* @layer ry-structure */
package/dist/css/ry-theme.css CHANGED
@@ -71,6 +71,25 @@ ry-header {
71
71
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
72
72
  }
73
73
 
74
+ ry-header strong {
75
+ font-size: var(--ry-text-xl);
76
+ }
77
+
78
+ ry-header span {
79
+ color: var(--ry-color-text-muted);
80
+ }
81
+
82
+ ry-header a:not(.ry-btn) {
83
+ color: var(--ry-color-text-muted);
84
+ text-decoration: none;
85
+ font-size: var(--ry-text-sm);
86
+ transition: color var(--ry-duration-fast);
87
+ }
88
+
89
+ ry-header a:not(.ry-btn):hover {
90
+ color: var(--ry-color-text);
91
+ }
92
+
74
93
  /* ═══════════════════════════════════════════════════════════════
75
94
  FOOTER
76
95
  ═══════════════════════════════════════════════════════════════ */
@@ -81,6 +100,16 @@ ry-footer {
81
100
  color: var(--ry-color-text-muted);
82
101
  }
83
102
 
103
+ ry-footer a {
104
+ color: inherit;
105
+ text-decoration: none;
106
+ transition: color var(--ry-duration-fast);
107
+ }
108
+
109
+ ry-footer a:hover {
110
+ color: var(--ry-color-text);
111
+ }
112
+
84
113
  /* ═══════════════════════════════════════════════════════════════
85
114
  NAV
86
115
  ═══════════════════════════════════════════════════════════════ */
@@ -2289,4 +2318,108 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
2289
2318
  color: var(--ry-color-text-muted);
2290
2319
  }
2291
2320
 
2321
+ /* ═══════════════════════════════════════════════════════════════
2322
+ LOGO BAR
2323
+ ═══════════════════════════════════════════════════════════════ */
2324
+
2325
+ .ry-logo-bar p {
2326
+ color: var(--ry-color-text-muted);
2327
+ font-size: var(--ry-text-sm);
2328
+ text-transform: uppercase;
2329
+ letter-spacing: 0.1em;
2330
+ }
2331
+
2332
+ .ry-logo-bar span {
2333
+ font-size: var(--ry-text-2xl);
2334
+ font-weight: var(--ry-font-bold);
2335
+ color: var(--ry-color-text);
2336
+ opacity: 0.5;
2337
+ }
2338
+
2339
+ /* ═══════════════════════════════════════════════════════════════
2340
+ TESTIMONIAL
2341
+ ═══════════════════════════════════════════════════════════════ */
2342
+
2343
+ .ry-testimonial__quote {
2344
+ font-size: var(--ry-text-lg);
2345
+ font-style: italic;
2346
+ line-height: var(--ry-leading-relaxed);
2347
+ color: var(--ry-color-text);
2348
+ }
2349
+
2350
+ .ry-testimonial__name {
2351
+ font-weight: var(--ry-font-semibold);
2352
+ color: var(--ry-color-text);
2353
+ }
2354
+
2355
+ .ry-testimonial__role {
2356
+ font-size: var(--ry-text-sm);
2357
+ color: var(--ry-color-text-muted);
2358
+ }
2359
+
2360
+ .ry-testimonial__star {
2361
+ color: var(--ry-color-warning);
2362
+ }
2363
+
2364
+ .ry-testimonial__star svg {
2365
+ fill: var(--ry-color-warning);
2366
+ }
2367
+
2368
+ .ry-testimonial__avatar {
2369
+ background-color: var(--ry-color-bg-muted);
2370
+ border: 2px solid var(--ry-color-border);
2371
+ }
2372
+
2373
+ /* ═══════════════════════════════════════════════════════════════
2374
+ "NONE" THEME — flat, no flourish
2375
+ Default theme minus radii, shadows, and decorative extras.
2376
+ Proves FORM/THEME separation: structure handles all layout.
2377
+ ═══════════════════════════════════════════════════════════════ */
2378
+
2379
+ [data-ry-theme="none"] {
2380
+ --ry-radius-sm: 0;
2381
+ --ry-radius-md: 0;
2382
+ --ry-radius-lg: 0;
2383
+ --ry-radius-xl: 0;
2384
+ --ry-radius-2xl: 0;
2385
+ --ry-radius-full: 0;
2386
+ --ry-shadow-sm: none;
2387
+ --ry-shadow-md: none;
2388
+ --ry-shadow-lg: none;
2389
+ --ry-shadow-xl: none;
2390
+ }
2391
+
2392
+ /* ═══════════════════════════════════════════════════════════════
2393
+ THEME PANEL
2394
+ ═══════════════════════════════════════════════════════════════ */
2395
+
2396
+ .ry-theme-panel {
2397
+ font-family: var(--ry-font-sans);
2398
+ background-color: var(--ry-color-bg);
2399
+ border-radius: var(--ry-radius-lg);
2400
+ box-shadow: var(--ry-shadow-lg);
2401
+ border: 1px solid var(--ry-color-border);
2402
+ }
2403
+
2404
+ .ry-theme-panel__label {
2405
+ color: var(--ry-color-text-muted);
2406
+ font-weight: 600;
2407
+ font-size: 0.6875rem;
2408
+ }
2409
+
2410
+ .ry-theme-panel__btn {
2411
+ border-radius: var(--ry-radius-sm);
2412
+ color: var(--ry-color-text-muted);
2413
+ transition: background-color var(--ry-duration-fast);
2414
+ }
2415
+
2416
+ .ry-theme-panel__btn:hover {
2417
+ background-color: var(--ry-color-bg-muted);
2418
+ }
2419
+
2420
+ .ry-theme-panel__btn[aria-pressed="true"] {
2421
+ background-color: var(--ry-color-primary);
2422
+ color: var(--ry-color-text-inverse);
2423
+ }
2424
+
2292
2425
  } /* @layer ry-theme */
package/dist/css/ry-tokens.css CHANGED
@@ -9,33 +9,11 @@
9
9
 
10
10
  /* ═══════════════════════════════════════════════════════════════
11
11
  @property — typed custom properties for animation & type safety
12
+ Note: color tokens are NOT registered here because @property
13
+ prevents light-dark() from re-resolving on dynamic color-scheme
14
+ changes in Firefox. Colors use unregistered custom properties.
12
15
  ═══════════════════════════════════════════════════════════════ */
13
16
 
14
- @property --ry-color-primary { syntax: "<color>"; inherits: true; initial-value: oklch(0.623 0.188 259.8); }
15
- @property --ry-color-primary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.546 0.215 262.9); }
16
- @property --ry-color-primary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.488 0.217 264.4); }
17
- @property --ry-color-secondary { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
18
- @property --ry-color-secondary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.446 0.037 257.3); }
19
- @property --ry-color-secondary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.372 0.039 257.3); }
20
- @property --ry-color-accent { syntax: "<color>"; inherits: true; initial-value: oklch(0.627 0.213 303.9); }
21
- @property --ry-color-accent-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.557 0.213 303.9); }
22
- @property --ry-color-accent-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.497 0.213 303.9); }
23
- @property --ry-color-success { syntax: "<color>"; inherits: true; initial-value: oklch(0.723 0.192 149.6); }
24
- @property --ry-color-warning { syntax: "<color>"; inherits: true; initial-value: oklch(0.769 0.165 70.1); }
25
- @property --ry-color-danger { syntax: "<color>"; inherits: true; initial-value: oklch(0.637 0.208 25.3); }
26
- @property --ry-color-info { syntax: "<color>"; inherits: true; initial-value: oklch(0.715 0.126 215.2); }
27
- @property --ry-color-text { syntax: "<color>"; inherits: true; initial-value: oklch(0.279 0.037 260); }
28
- @property --ry-color-text-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
29
- @property --ry-color-text-inverse { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
30
- @property --ry-color-bg { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
31
- @property --ry-color-bg-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.984 0.003 248.2); }
32
- @property --ry-color-bg-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.968 0.007 248.1); }
33
- @property --ry-color-border { syntax: "<color>"; inherits: true; initial-value: oklch(0.929 0.013 255.6); }
34
- @property --ry-color-border-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.869 0.02 252.9); }
35
- @property --ry-color-overlay { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.5); }
36
- @property --ry-shadow-color { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.1); }
37
- @property --ry-shadow-color-sm { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.05); }
38
-
39
17
  @property --ry-duration-fast { syntax: "<time>"; inherits: true; initial-value: 100ms; }
40
18
  @property --ry-duration-normal { syntax: "<time>"; inherits: true; initial-value: 200ms; }
41
19
  @property --ry-duration-slow { syntax: "<time>"; inherits: true; initial-value: 300ms; }
@@ -234,7 +212,7 @@
234
212
  --ry-focus-ring: 0 0 0 3px light-dark(oklch(0.623 0.188 259.8 / 0.5), oklch(0.714 0.143 254.6 / 0.5));
235
213
  }
236
214
 
237
- /* Force light or dark mode */
215
+ /* Force light or dark mode (legacy — theme used to conflate theme + mode) */
238
216
  [data-ry-theme="light"] { color-scheme: light; }
239
217
  [data-ry-theme="dark"] { color-scheme: dark; }
240
218