@relements/core 0.1.0 → 0.1.1
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/README.md +163 -0
- package/package.json +13 -1
package/README.md
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
# @relements/core
|
|
2
|
+
|
|
3
|
+
HTML-first design system by [Renascent Elements](https://renascentelements.hu). Semantic HTML + CSS tokens. JavaScript only where native behavior falls short.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @relements/core
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @relements/core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Plain HTML — no bundler, no JavaScript required
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<link rel="stylesheet" href="node_modules/@relements/core/dist/index.css" />
|
|
19
|
+
|
|
20
|
+
<button class="re-button" data-variant="primary">Save</button>
|
|
21
|
+
|
|
22
|
+
<label class="re-field">
|
|
23
|
+
<span class="re-field__label">Email</span>
|
|
24
|
+
<input class="re-input" type="email" name="email" />
|
|
25
|
+
<span class="re-field__hint">We'll use this to contact you.</span>
|
|
26
|
+
</label>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### With a bundler (Vite, webpack, Rollup…)
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
// Full bundle
|
|
33
|
+
import "@relements/core/index.css";
|
|
34
|
+
|
|
35
|
+
// Or import only what you use
|
|
36
|
+
import "@relements/core/components/button.css";
|
|
37
|
+
import "@relements/core/components/form.css";
|
|
38
|
+
|
|
39
|
+
// JS behaviors — tree-shakable ESM, fully typed
|
|
40
|
+
import { enhanceTabs } from "@relements/core/behaviors/tabs";
|
|
41
|
+
import { showToast } from "@relements/core/behaviors/toast";
|
|
42
|
+
|
|
43
|
+
// Custom elements
|
|
44
|
+
import "@relements/core/elements/re-tabs";
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Components
|
|
48
|
+
|
|
49
|
+
All styled with CSS classes and `data-*` attributes. No JavaScript needed for static use.
|
|
50
|
+
|
|
51
|
+
| Class | Element | Variants / options |
|
|
52
|
+
|---|---|---|
|
|
53
|
+
| `.re-button` | `<button>`, `<a>`, submit input | `data-variant`: primary, secondary, ghost, danger |
|
|
54
|
+
| `.re-link` | `<a>` | `data-variant`: muted, subtle, external |
|
|
55
|
+
| `.re-input` | `<input>` | `data-size`: sm, md, lg |
|
|
56
|
+
| `.re-textarea` | `<textarea>` | `data-size`: sm, md, lg |
|
|
57
|
+
| `.re-select` | `<select>` | `data-size`: sm, md, lg |
|
|
58
|
+
| `.re-checkbox` | `<input type="checkbox">` | — |
|
|
59
|
+
| `.re-radio` | `<input type="radio">` | — |
|
|
60
|
+
| `.re-field` | `<label>` | `re-field--inline` for checkbox/radio rows |
|
|
61
|
+
| `.re-field-group` | `<fieldset>` | `data-orientation`: horizontal |
|
|
62
|
+
| `.re-validation-message` | `<span>` | `data-tone`: success, hint, warning |
|
|
63
|
+
| `.re-disclosure` | `<details>` | `data-variant`: plain |
|
|
64
|
+
| `.re-dialog` | `<dialog>` | `showModal()` surface with header/body/footer slots |
|
|
65
|
+
| `.re-tabs` | container | pairs with `[role="tablist"]`, `[role="tab"]`, `[role="tabpanel"]` |
|
|
66
|
+
| `.re-menu` | container | pairs with `[role="menu"]`, `[role="menuitem"]` |
|
|
67
|
+
| `.re-popover` | `[popover]` element | `data-tone`: info, warning, danger |
|
|
68
|
+
| `.re-toast-region` | live region host | — |
|
|
69
|
+
| `.re-progress` | `<progress>` | `data-size`: sm, md, lg |
|
|
70
|
+
| `.re-meter` | `<meter>` | `data-size`: sm, md, lg |
|
|
71
|
+
|
|
72
|
+
## JavaScript behaviors
|
|
73
|
+
|
|
74
|
+
Each behavior accepts a root (`Document`, `Element`, or `ShadowRoot`), wires up the pattern, and returns `{ destroy() }`.
|
|
75
|
+
|
|
76
|
+
```js
|
|
77
|
+
import { enhanceTabs } from "@relements/core/behaviors/tabs";
|
|
78
|
+
|
|
79
|
+
const controller = enhanceTabs(document);
|
|
80
|
+
// later:
|
|
81
|
+
controller.destroy();
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
| Behavior | What it does | Key event |
|
|
85
|
+
|---|---|---|
|
|
86
|
+
| `enhanceTabs` | Arrow keys, Home/End, roving tabindex | `re-change` |
|
|
87
|
+
| `enhanceMenuButton` | Keyboard nav, outside-click close | `re-select` |
|
|
88
|
+
| `enhanceDialog` | Trigger binding, close buttons, backdrop dismiss | — |
|
|
89
|
+
| `enhancePopover` | Anchored positioning, toggle event bridge | `re-toggle` |
|
|
90
|
+
| `enhanceDismissible` | Dismiss buttons via `[data-re-dismiss]` | `re-dismiss` |
|
|
91
|
+
| `showToast(msg, opts)` | `aria-live` toast notifications | — |
|
|
92
|
+
|
|
93
|
+
## Custom elements
|
|
94
|
+
|
|
95
|
+
Light-DOM only (no Shadow DOM). Same HTML/CSS contract as the plain class API.
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<script type="module" src="node_modules/@relements/core/dist/elements/re-tabs.js"></script>
|
|
99
|
+
|
|
100
|
+
<re-tabs>
|
|
101
|
+
<div role="tablist" aria-label="Account">
|
|
102
|
+
<button role="tab" id="t1" aria-controls="p1" aria-selected="true">Profile</button>
|
|
103
|
+
<button role="tab" id="t2" aria-controls="p2" aria-selected="false" tabindex="-1">Settings</button>
|
|
104
|
+
</div>
|
|
105
|
+
<section role="tabpanel" id="p1" aria-labelledby="t1">…</section>
|
|
106
|
+
<section role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</section>
|
|
107
|
+
</re-tabs>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
| Tag | Wraps | Exposes |
|
|
111
|
+
|---|---|---|
|
|
112
|
+
| `<re-tabs>` | `enhanceTabs` | `.value` (selected tab id) |
|
|
113
|
+
| `<re-toast>` | `showToast` | `.show(message, options)` |
|
|
114
|
+
| `<re-menu>` | `enhanceMenuButton` | `.open` boolean |
|
|
115
|
+
| `<re-popover>` | `enhancePopover` | `.show()` / `.hide()` / `.toggle()` |
|
|
116
|
+
|
|
117
|
+
## Theming
|
|
118
|
+
|
|
119
|
+
All values are `--re-*` CSS custom properties. Override globally or on any subtree.
|
|
120
|
+
|
|
121
|
+
```css
|
|
122
|
+
:root {
|
|
123
|
+
--re-color-accent-600: #7c3aed; /* swap the brand colour */
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.my-card {
|
|
127
|
+
--re-color-surface: #1e293b; /* dark card, light page */
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Built-in dark theme
|
|
132
|
+
|
|
133
|
+
```html
|
|
134
|
+
<link rel="stylesheet" href="node_modules/@relements/core/dist/index.css" />
|
|
135
|
+
<link rel="stylesheet" href="node_modules/@relements/core/dist/themes/renascent.css" />
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Or scope it to a subtree:
|
|
139
|
+
|
|
140
|
+
```html
|
|
141
|
+
<div class="theme-renascent">…</div>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
The Renascent theme is the dark navy palette from [renascentelements.hu](https://renascentelements.hu), with electric blue primary, purple accent, and phoenix orange.
|
|
145
|
+
|
|
146
|
+
## Key tokens
|
|
147
|
+
|
|
148
|
+
| Token | Light default | Purpose |
|
|
149
|
+
|---|---|---|
|
|
150
|
+
| `--re-color-accent-600` | `#2563eb` | Buttons, links, focus ring |
|
|
151
|
+
| `--re-color-bg` | `#ffffff` | Page background |
|
|
152
|
+
| `--re-color-surface` | `#ffffff` | Card / panel background |
|
|
153
|
+
| `--re-color-text` | `#0f172a` | Body text |
|
|
154
|
+
| `--re-color-border` | `#e2e8f0` | Borders |
|
|
155
|
+
| `--re-color-focus-ring` | `#3b82f6` | Keyboard focus indicator |
|
|
156
|
+
| `--re-space-4` | `1rem` | Base spacing (4 px scale) |
|
|
157
|
+
| `--re-radius-md` | `0.375rem` | Default radius |
|
|
158
|
+
|
|
159
|
+
Full list in [`src/tokens.css`](./src/tokens.css).
|
|
160
|
+
|
|
161
|
+
## License
|
|
162
|
+
|
|
163
|
+
MIT — [Renascent Elements](https://renascentelements.hu)
|
package/package.json
CHANGED
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@relements/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "HTML-first design system core: tokens, styles, and progressive enhancement.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"design-system",
|
|
7
|
+
"css",
|
|
8
|
+
"html-first",
|
|
9
|
+
"accessible",
|
|
10
|
+
"progressive-enhancement",
|
|
11
|
+
"framework-agnostic",
|
|
12
|
+
"tokens",
|
|
13
|
+
"components",
|
|
14
|
+
"web-components",
|
|
15
|
+
"aria"
|
|
16
|
+
],
|
|
5
17
|
"license": "MIT",
|
|
6
18
|
"type": "module",
|
|
7
19
|
"sideEffects": [
|