@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.
- package/.claude/skills/ry-ui-builder/SKILL.md +4 -6
- package/README.md +21 -26
- package/dist/components/ry-dropdown.d.ts +1 -1
- package/dist/components/ry-heading.d.ts +1 -5
- package/dist/components/ry-heading.d.ts.map +1 -1
- package/dist/components/ry-logo-bar.d.ts +25 -0
- package/dist/components/ry-logo-bar.d.ts.map +1 -0
- package/dist/components/ry-modal.d.ts +1 -1
- package/dist/components/ry-pricing.d.ts +4 -4
- package/dist/components/ry-pricing.d.ts.map +1 -1
- package/dist/components/ry-search-list.d.ts +30 -0
- package/dist/components/ry-search-list.d.ts.map +1 -0
- package/dist/components/ry-stat.d.ts +1 -4
- package/dist/components/ry-stat.d.ts.map +1 -1
- package/dist/components/ry-testimonial.d.ts +2 -5
- package/dist/components/ry-testimonial.d.ts.map +1 -1
- package/dist/components/ry-theme-panel.d.ts.map +1 -1
- package/dist/core/ry-transform.d.ts.map +1 -1
- package/dist/css/ry-structure.css +516 -28
- package/dist/css/ry-theme.css +186 -40
- package/dist/css/ry-tokens.css +4 -4
- package/dist/css/ry-ui.css +706 -72
- package/dist/pages/components.html +19 -82
- package/dist/pages/landing.html +13 -40
- package/dist/ry-ui.d.ts +2 -1
- package/dist/ry-ui.d.ts.map +1 -1
- package/dist/ry-ui.js +936 -667
- package/dist/ry-ui.js.map +1 -1
- package/docs/components/dropdown.md +2 -2
- package/docs/components/modal.md +2 -2
- package/package.json +1 -1
- package/docs/components/button-group.md +0 -36
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## `<ry-dropdown>`
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The first child element is the trigger. Menu items go inside `<ry-menu>`.
|
|
6
6
|
|
|
7
7
|
Events: `ry:select` — `e.detail.value`
|
|
8
8
|
API: `.open()`, `.close()`
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
11
|
<ry-dropdown>
|
|
12
|
-
<ry-button
|
|
12
|
+
<ry-button>Options</ry-button>
|
|
13
13
|
<ry-menu>
|
|
14
14
|
<ry-menu-item>Edit</ry-menu-item>
|
|
15
15
|
<ry-menu-item>Duplicate</ry-menu-item>
|
package/docs/components/modal.md
CHANGED
|
@@ -17,10 +17,10 @@ API: `.open()`, `.close()`, `.state`
|
|
|
17
17
|
|
|
18
18
|
<ry-modal id="demo" title="Confirm">
|
|
19
19
|
<p>Are you sure?</p>
|
|
20
|
-
<
|
|
20
|
+
<footer>
|
|
21
21
|
<ry-button variant="ghost" close>Cancel</ry-button>
|
|
22
22
|
<ry-button>OK</ry-button>
|
|
23
|
-
</
|
|
23
|
+
</footer>
|
|
24
24
|
</ry-modal>
|
|
25
25
|
```
|
|
26
26
|
|
package/package.json
CHANGED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
# Button Group
|
|
2
|
-
|
|
3
|
-
## `<ry-button-group>`
|
|
4
|
-
|
|
5
|
-
Segmented control with radio-group behavior. Only one child button can be selected at a time.
|
|
6
|
-
|
|
7
|
-
| Attribute | Values | Description |
|
|
8
|
-
|-----------|--------|-------------|
|
|
9
|
-
| `name` | string | Optional group name |
|
|
10
|
-
| `value` | string | Currently selected button value |
|
|
11
|
-
|
|
12
|
-
Events: `ry:change` — `e.detail.value`
|
|
13
|
-
|
|
14
|
-
Child buttons must have a `value` attribute to participate. Clicking a button sets `pressed` + `aria-pressed="true"` on it and clears the others.
|
|
15
|
-
|
|
16
|
-
```html
|
|
17
|
-
<ry-button-group name="billing" value="monthly">
|
|
18
|
-
<ry-button value="monthly">Monthly</ry-button>
|
|
19
|
-
<ry-button value="annually">Annually</ry-button>
|
|
20
|
-
</ry-button-group>
|
|
21
|
-
|
|
22
|
-
<ry-button-group name="mode" value="terminal">
|
|
23
|
-
<ry-button value="direct">Direct</ry-button>
|
|
24
|
-
<ry-button value="terminal">Terminal</ry-button>
|
|
25
|
-
<ry-button value="release">Release</ry-button>
|
|
26
|
-
</ry-button-group>
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
JS:
|
|
30
|
-
```js
|
|
31
|
-
const group = document.querySelector('ry-button-group');
|
|
32
|
-
group.addEventListener('ry:change', (e) => {
|
|
33
|
-
console.log(e.detail.value); // "monthly" | "annually"
|
|
34
|
-
});
|
|
35
|
-
group.value = 'annually'; // programmatic selection
|
|
36
|
-
```
|