@onyxdesign/core 0.0.0-stage → 1.0.0
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/LICENSE +25 -0
- package/README.md +108 -2
- package/package.json +36 -4
- package/src/onyx.css +886 -0
- package/src/onyx.js +196 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Onyx UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
This license covers the Onyx UI core library only. Onyx Pro components,
|
|
25
|
+
templates and design kits are distributed under a separate commercial license.
|
package/README.md
CHANGED
|
@@ -1,3 +1,109 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center"><img src="brand/onyx-logo-black.svg" width="120" alt="Onyx"></p>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# Onyx
|
|
4
|
+
|
|
5
|
+
**The interface, in black & white.**
|
|
6
|
+
|
|
7
|
+
[Website](https://onyx-six-ashy.vercel.app/) · [Documentation](https://onyx-six-ashy.vercel.app/docs/) · [Pricing](https://onyx-six-ashy.vercel.app/#pricing)
|
|
8
|
+
|
|
9
|
+
Onyx is a zero-dependency UI component library for designers who believe restraint is a feature. Two colors, sharp typography, and every detail considered. One CSS file, one small script, light and dark themes built in.
|
|
10
|
+
|
|
11
|
+
## Quick start
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<link rel="stylesheet" href="onyx.css">
|
|
15
|
+
<body class="ox">
|
|
16
|
+
<button class="ox-btn">Hello Onyx</button>
|
|
17
|
+
<script src="onyx.js"></script>
|
|
18
|
+
</body>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Or via npm (once published):
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @onyxdesign/core
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## React
|
|
28
|
+
|
|
29
|
+
Onyx is also available as typed React components:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install @onyxdesign/react
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import "@onyxdesign/react/styles.css";
|
|
37
|
+
import { Button, Modal, Tabs, useToast } from "@onyxdesign/react";
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
See [packages/react](packages/react) for details.
|
|
41
|
+
|
|
42
|
+
## Run the showcase locally
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npm run dev
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Then open http://localhost:5173.
|
|
49
|
+
|
|
50
|
+
## What's inside
|
|
51
|
+
|
|
52
|
+
| Category | Components |
|
|
53
|
+
|------------|------------|
|
|
54
|
+
| Actions | Button (primary, outline, ghost, link, pill, sizes, icon, loading), Segmented control |
|
|
55
|
+
| Forms | Input, Input group with icon, Select, Textarea, Checkbox, Radio, Switch, Field + hint + invalid state |
|
|
56
|
+
| Layout | Container, Card, Navbar, Stack, Row, Grid, Divider, Separator |
|
|
57
|
+
| Display | Badge, Avatar, Avatar stack, Alert, Kbd, Code block, Progress, Skeleton, Spinner |
|
|
58
|
+
| Overlays | Modal (focus trap, Esc to close), Dropdown, Tooltip, Toast |
|
|
59
|
+
| Navigation | Tabs (arrow-key support), Accordion |
|
|
60
|
+
|
|
61
|
+
Full documentation with live examples lives in [docs/](docs/index.html) — run `npm run dev` and open http://localhost:5173/docs/.
|
|
62
|
+
|
|
63
|
+
## Onyx Pro
|
|
64
|
+
|
|
65
|
+
Premium components and templates are sold separately and kept in a private repository. The docs show live previews of them.
|
|
66
|
+
|
|
67
|
+
Customers add the Pro files after the core files:
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<link rel="stylesheet" href="onyx.css">
|
|
71
|
+
<link rel="stylesheet" href="onyx-pro.css">
|
|
72
|
+
<script src="onyx.js"></script>
|
|
73
|
+
<script src="onyx-pro.js"></script>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Maintainers: the private repo is cloned into `pro/` (ignored here). After changing it, run `npm run build:pro-preview` to refresh the docs previews in `docs/pro-preview/`.
|
|
77
|
+
|
|
78
|
+
## Brand
|
|
79
|
+
|
|
80
|
+
The bat logo lives in [`brand/`](brand): `onyx-logo.svg` (follows text color), black and white versions, and a favicon that adapts to light and dark mode.
|
|
81
|
+
|
|
82
|
+
## Theming
|
|
83
|
+
|
|
84
|
+
Everything is driven by CSS custom properties (`--ox-*`):
|
|
85
|
+
|
|
86
|
+
```css
|
|
87
|
+
:root {
|
|
88
|
+
--ox-radius: 2px;
|
|
89
|
+
--ox-radius-lg: 4px;
|
|
90
|
+
--ox-font-sans: "Inter", sans-serif;
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
- Dark mode follows the OS. Force it with `<html data-theme="dark">` or `Onyx.theme.set("dark")`.
|
|
95
|
+
- Add `.ox-invert` to any element to flip it to the opposite theme (a black card on a white page, or the other way round).
|
|
96
|
+
|
|
97
|
+
## Plans
|
|
98
|
+
|
|
99
|
+
| | Free | Pro | Team |
|
|
100
|
+
|---|---|---|---|
|
|
101
|
+
| Core components | ✓ | ✓ | ✓ |
|
|
102
|
+
| Pro components & templates | | ✓ | ✓ |
|
|
103
|
+
| Figma kit | | ✓ | ✓ |
|
|
104
|
+
| Seats | 1 | 1 | 10 |
|
|
105
|
+
| Price | $0 | $12/mo | $39/mo |
|
|
106
|
+
|
|
107
|
+
## License
|
|
108
|
+
|
|
109
|
+
Core library: MIT. Pro components: commercial license.
|
package/package.json
CHANGED
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onyxdesign/core",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A black & white, zero-dependency UI component library for people who care about the details.",
|
|
5
|
+
"main": "src/onyx.js",
|
|
6
|
+
"style": "src/onyx.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"src",
|
|
9
|
+
"README.md",
|
|
10
|
+
"LICENSE"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"dev": "python -m http.server 5173",
|
|
14
|
+
"build:pro-preview": "node scripts/build-pro-preview.mjs"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"ui",
|
|
18
|
+
"css",
|
|
19
|
+
"components",
|
|
20
|
+
"design-system",
|
|
21
|
+
"black-and-white",
|
|
22
|
+
"monochrome",
|
|
23
|
+
"dark-mode",
|
|
24
|
+
"accessible"
|
|
25
|
+
],
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/codewithanshuman/Onyx.git"
|
|
30
|
+
},
|
|
31
|
+
"homepage": "https://onyx-six-ashy.vercel.app/",
|
|
32
|
+
"bugs": {
|
|
33
|
+
"url": "https://github.com/codewithanshuman/Onyx/issues"
|
|
34
|
+
},
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public"
|
|
37
|
+
}
|
|
38
|
+
}
|
package/src/onyx.css
ADDED
|
@@ -0,0 +1,886 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Onyx v1.0.0 — a black & white component library for the web
|
|
3
|
+
* Core: MIT License. Onyx Pro components require a commercial license.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* =========================================================
|
|
7
|
+
1. Design tokens
|
|
8
|
+
---------------------------------------------------------
|
|
9
|
+
Two palettes only: light and dark. Everything else is
|
|
10
|
+
built from these. `.ox-invert` flips a region to the
|
|
11
|
+
opposite palette (black card on a white page, and back).
|
|
12
|
+
========================================================= */
|
|
13
|
+
:root,
|
|
14
|
+
[data-theme="light"],
|
|
15
|
+
[data-theme="dark"] .ox-invert {
|
|
16
|
+
--ox-bg: #ffffff;
|
|
17
|
+
--ox-bg-subtle: #fafafa;
|
|
18
|
+
--ox-bg-muted: #f4f4f4;
|
|
19
|
+
--ox-surface: #ffffff;
|
|
20
|
+
--ox-border: #e8e8e8;
|
|
21
|
+
--ox-border-strong: #d4d4d4;
|
|
22
|
+
--ox-fg: #0a0a0a;
|
|
23
|
+
--ox-fg-muted: #6b6b6b;
|
|
24
|
+
--ox-fg-subtle: #a3a3a3;
|
|
25
|
+
--ox-inverse: #ffffff;
|
|
26
|
+
--ox-ring: rgba(10, 10, 10, 0.12);
|
|
27
|
+
--ox-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
28
|
+
--ox-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -6px rgba(0, 0, 0, 0.08);
|
|
29
|
+
--ox-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.04), 0 32px 64px -16px rgba(0, 0, 0, 0.18);
|
|
30
|
+
color-scheme: light;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[data-theme="dark"],
|
|
34
|
+
.ox-invert {
|
|
35
|
+
--ox-bg: #000000;
|
|
36
|
+
--ox-bg-subtle: #0a0a0a;
|
|
37
|
+
--ox-bg-muted: #161616;
|
|
38
|
+
--ox-surface: #0a0a0a;
|
|
39
|
+
--ox-border: #222222;
|
|
40
|
+
--ox-border-strong: #383838;
|
|
41
|
+
--ox-fg: #fafafa;
|
|
42
|
+
--ox-fg-muted: #a1a1a1;
|
|
43
|
+
--ox-fg-subtle: #6b6b6b;
|
|
44
|
+
--ox-inverse: #000000;
|
|
45
|
+
--ox-ring: rgba(255, 255, 255, 0.18);
|
|
46
|
+
--ox-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
47
|
+
--ox-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 24px -6px rgba(0, 0, 0, 0.6);
|
|
48
|
+
--ox-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 32px 64px -16px rgba(0, 0, 0, 0.8);
|
|
49
|
+
color-scheme: dark;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
[data-theme="dark"] .ox-invert {
|
|
53
|
+
color-scheme: light;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (prefers-color-scheme: dark) {
|
|
57
|
+
:root:not([data-theme="light"]) {
|
|
58
|
+
--ox-bg: #000000;
|
|
59
|
+
--ox-bg-subtle: #0a0a0a;
|
|
60
|
+
--ox-bg-muted: #161616;
|
|
61
|
+
--ox-surface: #0a0a0a;
|
|
62
|
+
--ox-border: #222222;
|
|
63
|
+
--ox-border-strong: #383838;
|
|
64
|
+
--ox-fg: #fafafa;
|
|
65
|
+
--ox-fg-muted: #a1a1a1;
|
|
66
|
+
--ox-fg-subtle: #6b6b6b;
|
|
67
|
+
--ox-inverse: #000000;
|
|
68
|
+
--ox-ring: rgba(255, 255, 255, 0.18);
|
|
69
|
+
--ox-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
70
|
+
--ox-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 24px -6px rgba(0, 0, 0, 0.6);
|
|
71
|
+
--ox-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 32px 64px -16px rgba(0, 0, 0, 0.8);
|
|
72
|
+
color-scheme: dark;
|
|
73
|
+
}
|
|
74
|
+
:root:not([data-theme="light"]) .ox-invert {
|
|
75
|
+
--ox-bg: #ffffff;
|
|
76
|
+
--ox-bg-subtle: #fafafa;
|
|
77
|
+
--ox-bg-muted: #f4f4f4;
|
|
78
|
+
--ox-surface: #ffffff;
|
|
79
|
+
--ox-border: #e8e8e8;
|
|
80
|
+
--ox-border-strong: #d4d4d4;
|
|
81
|
+
--ox-fg: #0a0a0a;
|
|
82
|
+
--ox-fg-muted: #6b6b6b;
|
|
83
|
+
--ox-fg-subtle: #a3a3a3;
|
|
84
|
+
--ox-inverse: #ffffff;
|
|
85
|
+
--ox-ring: rgba(10, 10, 10, 0.12);
|
|
86
|
+
--ox-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
87
|
+
--ox-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -6px rgba(0, 0, 0, 0.08);
|
|
88
|
+
--ox-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.04), 0 32px 64px -16px rgba(0, 0, 0, 0.18);
|
|
89
|
+
color-scheme: light;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
:root {
|
|
94
|
+
/* Typography */
|
|
95
|
+
--ox-font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
96
|
+
--ox-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
97
|
+
--ox-text-xs: 0.75rem;
|
|
98
|
+
--ox-text-sm: 0.875rem;
|
|
99
|
+
--ox-text-base: 1rem;
|
|
100
|
+
--ox-text-lg: 1.125rem;
|
|
101
|
+
--ox-text-xl: 1.25rem;
|
|
102
|
+
--ox-text-2xl: 1.5rem;
|
|
103
|
+
--ox-text-3xl: 2rem;
|
|
104
|
+
--ox-text-4xl: 2.75rem;
|
|
105
|
+
|
|
106
|
+
/* Spacing (4px base) */
|
|
107
|
+
--ox-space-1: 0.25rem;
|
|
108
|
+
--ox-space-2: 0.5rem;
|
|
109
|
+
--ox-space-3: 0.75rem;
|
|
110
|
+
--ox-space-4: 1rem;
|
|
111
|
+
--ox-space-5: 1.25rem;
|
|
112
|
+
--ox-space-6: 1.5rem;
|
|
113
|
+
--ox-space-8: 2rem;
|
|
114
|
+
--ox-space-10: 2.5rem;
|
|
115
|
+
--ox-space-12: 3rem;
|
|
116
|
+
--ox-space-16: 4rem;
|
|
117
|
+
|
|
118
|
+
/* Shape */
|
|
119
|
+
--ox-radius-sm: 6px;
|
|
120
|
+
--ox-radius: 8px;
|
|
121
|
+
--ox-radius-lg: 12px;
|
|
122
|
+
--ox-radius-xl: 20px;
|
|
123
|
+
--ox-radius-full: 999px;
|
|
124
|
+
|
|
125
|
+
/* Motion */
|
|
126
|
+
--ox-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
127
|
+
--ox-duration: 160ms;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* =========================================================
|
|
131
|
+
2. Base
|
|
132
|
+
========================================================= */
|
|
133
|
+
.ox,
|
|
134
|
+
.ox *,
|
|
135
|
+
.ox *::before,
|
|
136
|
+
.ox *::after {
|
|
137
|
+
box-sizing: border-box;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.ox {
|
|
141
|
+
font-family: var(--ox-font-sans);
|
|
142
|
+
font-size: var(--ox-text-base);
|
|
143
|
+
line-height: 1.6;
|
|
144
|
+
color: var(--ox-fg);
|
|
145
|
+
background: var(--ox-bg);
|
|
146
|
+
-webkit-font-smoothing: antialiased;
|
|
147
|
+
-moz-osx-font-smoothing: grayscale;
|
|
148
|
+
text-rendering: optimizeLegibility;
|
|
149
|
+
font-feature-settings: "ss01", "cv11";
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.ox ::selection {
|
|
153
|
+
background: var(--ox-fg);
|
|
154
|
+
color: var(--ox-inverse);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.ox-invert {
|
|
158
|
+
color: var(--ox-fg);
|
|
159
|
+
background: var(--ox-bg);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.ox-container {
|
|
163
|
+
width: 100%;
|
|
164
|
+
max-width: 1160px;
|
|
165
|
+
margin-inline: auto;
|
|
166
|
+
padding-inline: var(--ox-space-4);
|
|
167
|
+
}
|
|
168
|
+
@media (min-width: 640px) {
|
|
169
|
+
.ox-container { padding-inline: var(--ox-space-6); }
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.ox :focus-visible {
|
|
173
|
+
outline: 2px solid var(--ox-fg);
|
|
174
|
+
outline-offset: 2px;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* =========================================================
|
|
178
|
+
3. Typography helpers
|
|
179
|
+
========================================================= */
|
|
180
|
+
.ox-display {
|
|
181
|
+
font-size: clamp(2.5rem, 7vw, 5rem);
|
|
182
|
+
font-weight: 600;
|
|
183
|
+
line-height: 1;
|
|
184
|
+
letter-spacing: -0.045em;
|
|
185
|
+
}
|
|
186
|
+
.ox-h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
|
|
187
|
+
.ox-h2 { font-size: var(--ox-text-2xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
|
|
188
|
+
.ox-lead { font-size: var(--ox-text-lg); line-height: 1.6; color: var(--ox-fg-muted); }
|
|
189
|
+
.ox-eyebrow {
|
|
190
|
+
font-family: var(--ox-font-mono);
|
|
191
|
+
font-size: var(--ox-text-xs);
|
|
192
|
+
letter-spacing: 0.08em;
|
|
193
|
+
text-transform: uppercase;
|
|
194
|
+
color: var(--ox-fg-muted);
|
|
195
|
+
}
|
|
196
|
+
.ox-muted { color: var(--ox-fg-muted); }
|
|
197
|
+
.ox-subtle { color: var(--ox-fg-subtle); }
|
|
198
|
+
.ox-mono { font-family: var(--ox-font-mono); }
|
|
199
|
+
|
|
200
|
+
.ox-kbd {
|
|
201
|
+
display: inline-grid;
|
|
202
|
+
place-items: center;
|
|
203
|
+
min-width: 1.4rem;
|
|
204
|
+
height: 1.4rem;
|
|
205
|
+
padding: 0 0.35rem;
|
|
206
|
+
font: 500 0.7rem / 1 var(--ox-font-mono);
|
|
207
|
+
color: var(--ox-fg-muted);
|
|
208
|
+
background: var(--ox-bg-subtle);
|
|
209
|
+
border: 1px solid var(--ox-border);
|
|
210
|
+
border-bottom-width: 2px;
|
|
211
|
+
border-radius: 5px;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* =========================================================
|
|
215
|
+
4. Buttons
|
|
216
|
+
========================================================= */
|
|
217
|
+
.ox-btn {
|
|
218
|
+
--_bg: var(--ox-fg);
|
|
219
|
+
--_bg-hover: color-mix(in srgb, var(--ox-fg) 86%, var(--ox-bg));
|
|
220
|
+
--_fg: var(--ox-inverse);
|
|
221
|
+
--_border: var(--ox-fg);
|
|
222
|
+
|
|
223
|
+
position: relative;
|
|
224
|
+
display: inline-flex;
|
|
225
|
+
align-items: center;
|
|
226
|
+
justify-content: center;
|
|
227
|
+
gap: var(--ox-space-2);
|
|
228
|
+
height: 2.5rem;
|
|
229
|
+
padding: 0 var(--ox-space-4);
|
|
230
|
+
font: 500 var(--ox-text-sm) / 1 var(--ox-font-sans);
|
|
231
|
+
letter-spacing: -0.005em;
|
|
232
|
+
color: var(--_fg);
|
|
233
|
+
background: var(--_bg);
|
|
234
|
+
border: 1px solid var(--_border);
|
|
235
|
+
border-radius: var(--ox-radius);
|
|
236
|
+
cursor: pointer;
|
|
237
|
+
text-decoration: none;
|
|
238
|
+
white-space: nowrap;
|
|
239
|
+
user-select: none;
|
|
240
|
+
transition: background var(--ox-duration) var(--ox-ease),
|
|
241
|
+
border-color var(--ox-duration) var(--ox-ease),
|
|
242
|
+
color var(--ox-duration) var(--ox-ease),
|
|
243
|
+
transform var(--ox-duration) var(--ox-ease);
|
|
244
|
+
}
|
|
245
|
+
.ox-btn:hover { background: var(--_bg-hover); }
|
|
246
|
+
.ox-btn:active { transform: scale(0.98); }
|
|
247
|
+
.ox-btn:disabled,
|
|
248
|
+
.ox-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
|
|
249
|
+
.ox-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
|
|
250
|
+
|
|
251
|
+
.ox-btn-outline {
|
|
252
|
+
--_bg: var(--ox-bg);
|
|
253
|
+
--_bg-hover: var(--ox-bg-muted);
|
|
254
|
+
--_fg: var(--ox-fg);
|
|
255
|
+
--_border: var(--ox-border-strong);
|
|
256
|
+
}
|
|
257
|
+
.ox-btn-ghost {
|
|
258
|
+
--_bg: transparent;
|
|
259
|
+
--_bg-hover: var(--ox-bg-muted);
|
|
260
|
+
--_fg: var(--ox-fg);
|
|
261
|
+
--_border: transparent;
|
|
262
|
+
}
|
|
263
|
+
.ox-btn-link {
|
|
264
|
+
--_bg: transparent;
|
|
265
|
+
--_bg-hover: transparent;
|
|
266
|
+
--_fg: var(--ox-fg);
|
|
267
|
+
--_border: transparent;
|
|
268
|
+
height: auto;
|
|
269
|
+
padding: 0;
|
|
270
|
+
text-decoration: underline;
|
|
271
|
+
text-decoration-color: var(--ox-border-strong);
|
|
272
|
+
text-underline-offset: 4px;
|
|
273
|
+
}
|
|
274
|
+
.ox-btn-link:hover { text-decoration-color: var(--ox-fg); }
|
|
275
|
+
|
|
276
|
+
.ox-btn-sm { height: 2rem; padding: 0 var(--ox-space-3); font-size: var(--ox-text-xs); border-radius: var(--ox-radius-sm); }
|
|
277
|
+
.ox-btn-lg { height: 3rem; padding: 0 var(--ox-space-6); font-size: var(--ox-text-base); }
|
|
278
|
+
.ox-btn-pill { border-radius: var(--ox-radius-full); }
|
|
279
|
+
.ox-btn-block { width: 100%; }
|
|
280
|
+
.ox-btn-icon { width: 2.5rem; padding: 0; }
|
|
281
|
+
.ox-btn-sm.ox-btn-icon { width: 2rem; }
|
|
282
|
+
|
|
283
|
+
.ox-btn .ox-arrow { transition: transform var(--ox-duration) var(--ox-ease); }
|
|
284
|
+
.ox-btn:hover .ox-arrow { transform: translateX(3px); }
|
|
285
|
+
|
|
286
|
+
.ox-btn[data-loading="true"] { color: transparent; pointer-events: none; }
|
|
287
|
+
.ox-btn[data-loading="true"]::after {
|
|
288
|
+
content: "";
|
|
289
|
+
position: absolute;
|
|
290
|
+
width: 1rem;
|
|
291
|
+
height: 1rem;
|
|
292
|
+
border: 1.5px solid var(--_fg);
|
|
293
|
+
border-right-color: transparent;
|
|
294
|
+
border-radius: 50%;
|
|
295
|
+
animation: ox-spin 0.7s linear infinite;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* Segmented control */
|
|
299
|
+
.ox-segmented {
|
|
300
|
+
display: inline-flex;
|
|
301
|
+
padding: 3px;
|
|
302
|
+
gap: 2px;
|
|
303
|
+
background: var(--ox-bg-muted);
|
|
304
|
+
border: 1px solid var(--ox-border);
|
|
305
|
+
border-radius: var(--ox-radius);
|
|
306
|
+
}
|
|
307
|
+
.ox-segmented button {
|
|
308
|
+
height: 1.9rem;
|
|
309
|
+
padding: 0 var(--ox-space-3);
|
|
310
|
+
font: 500 var(--ox-text-xs) var(--ox-font-sans);
|
|
311
|
+
color: var(--ox-fg-muted);
|
|
312
|
+
background: transparent;
|
|
313
|
+
border: 0;
|
|
314
|
+
border-radius: 5px;
|
|
315
|
+
cursor: pointer;
|
|
316
|
+
transition: color var(--ox-duration) var(--ox-ease), background var(--ox-duration) var(--ox-ease);
|
|
317
|
+
}
|
|
318
|
+
.ox-segmented button:hover { color: var(--ox-fg); }
|
|
319
|
+
.ox-segmented button[aria-pressed="true"] {
|
|
320
|
+
color: var(--ox-fg);
|
|
321
|
+
background: var(--ox-surface);
|
|
322
|
+
box-shadow: 0 0 0 1px var(--ox-border), var(--ox-shadow-sm);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* =========================================================
|
|
326
|
+
5. Forms
|
|
327
|
+
========================================================= */
|
|
328
|
+
.ox-field { display: grid; gap: 0.4rem; }
|
|
329
|
+
.ox-label { font-size: var(--ox-text-sm); font-weight: 500; color: var(--ox-fg); }
|
|
330
|
+
.ox-hint { font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }
|
|
331
|
+
.ox-field[data-invalid] .ox-hint { color: var(--ox-fg); font-weight: 500; }
|
|
332
|
+
.ox-field[data-invalid] .ox-hint::before { content: "⚠ "; }
|
|
333
|
+
|
|
334
|
+
.ox-input,
|
|
335
|
+
.ox-select,
|
|
336
|
+
.ox-textarea {
|
|
337
|
+
width: 100%;
|
|
338
|
+
height: 2.5rem;
|
|
339
|
+
padding: 0 var(--ox-space-3);
|
|
340
|
+
font: inherit;
|
|
341
|
+
font-size: var(--ox-text-sm);
|
|
342
|
+
color: var(--ox-fg);
|
|
343
|
+
background: var(--ox-surface);
|
|
344
|
+
border: 1px solid var(--ox-border);
|
|
345
|
+
border-radius: var(--ox-radius);
|
|
346
|
+
transition: border-color var(--ox-duration) var(--ox-ease), box-shadow var(--ox-duration) var(--ox-ease);
|
|
347
|
+
}
|
|
348
|
+
.ox-input::placeholder,
|
|
349
|
+
.ox-textarea::placeholder { color: var(--ox-fg-subtle); }
|
|
350
|
+
.ox-input:hover,
|
|
351
|
+
.ox-select:hover,
|
|
352
|
+
.ox-textarea:hover { border-color: var(--ox-border-strong); }
|
|
353
|
+
.ox-input:focus,
|
|
354
|
+
.ox-select:focus,
|
|
355
|
+
.ox-textarea:focus {
|
|
356
|
+
outline: none;
|
|
357
|
+
border-color: var(--ox-fg);
|
|
358
|
+
box-shadow: 0 0 0 3px var(--ox-ring);
|
|
359
|
+
}
|
|
360
|
+
.ox-field[data-invalid] .ox-input {
|
|
361
|
+
border-color: var(--ox-fg);
|
|
362
|
+
border-style: dashed;
|
|
363
|
+
}
|
|
364
|
+
.ox-textarea { height: auto; min-height: 6rem; padding: var(--ox-space-3); resize: vertical; }
|
|
365
|
+
.ox-select {
|
|
366
|
+
appearance: none;
|
|
367
|
+
padding-right: var(--ox-space-8);
|
|
368
|
+
background-image:
|
|
369
|
+
linear-gradient(45deg, transparent 50%, var(--ox-fg-muted) 50%),
|
|
370
|
+
linear-gradient(135deg, var(--ox-fg-muted) 50%, transparent 50%);
|
|
371
|
+
background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
|
|
372
|
+
background-size: 5px 5px;
|
|
373
|
+
background-repeat: no-repeat;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.ox-input-group { position: relative; display: flex; align-items: center; }
|
|
377
|
+
.ox-input-group > .ox-input { padding-left: 2.25rem; }
|
|
378
|
+
.ox-input-group > .ox-input-icon {
|
|
379
|
+
position: absolute;
|
|
380
|
+
left: 0.75rem;
|
|
381
|
+
width: 1rem;
|
|
382
|
+
height: 1rem;
|
|
383
|
+
color: var(--ox-fg-subtle);
|
|
384
|
+
pointer-events: none;
|
|
385
|
+
}
|
|
386
|
+
.ox-input-group > .ox-kbd { position: absolute; right: 0.5rem; }
|
|
387
|
+
|
|
388
|
+
/* Checkbox & radio: custom, monochrome */
|
|
389
|
+
.ox-checkbox,
|
|
390
|
+
.ox-radio {
|
|
391
|
+
display: inline-flex;
|
|
392
|
+
align-items: center;
|
|
393
|
+
gap: var(--ox-space-2);
|
|
394
|
+
font-size: var(--ox-text-sm);
|
|
395
|
+
cursor: pointer;
|
|
396
|
+
}
|
|
397
|
+
.ox-checkbox input,
|
|
398
|
+
.ox-radio input {
|
|
399
|
+
appearance: none;
|
|
400
|
+
display: grid;
|
|
401
|
+
place-items: center;
|
|
402
|
+
width: 1rem;
|
|
403
|
+
height: 1rem;
|
|
404
|
+
margin: 0;
|
|
405
|
+
background: var(--ox-surface);
|
|
406
|
+
border: 1px solid var(--ox-border-strong);
|
|
407
|
+
cursor: pointer;
|
|
408
|
+
transition: background var(--ox-duration) var(--ox-ease), border-color var(--ox-duration) var(--ox-ease);
|
|
409
|
+
}
|
|
410
|
+
.ox-checkbox input { border-radius: 4px; }
|
|
411
|
+
.ox-radio input { border-radius: 50%; }
|
|
412
|
+
.ox-checkbox input::after {
|
|
413
|
+
content: "";
|
|
414
|
+
width: 0.55rem;
|
|
415
|
+
height: 0.3rem;
|
|
416
|
+
border: 1.75px solid var(--ox-inverse);
|
|
417
|
+
border-top: 0;
|
|
418
|
+
border-right: 0;
|
|
419
|
+
transform: translateY(-1px) rotate(-45deg) scale(0);
|
|
420
|
+
transition: transform var(--ox-duration) var(--ox-ease);
|
|
421
|
+
}
|
|
422
|
+
.ox-radio input::after {
|
|
423
|
+
content: "";
|
|
424
|
+
width: 0.4rem;
|
|
425
|
+
height: 0.4rem;
|
|
426
|
+
border-radius: 50%;
|
|
427
|
+
background: var(--ox-inverse);
|
|
428
|
+
transform: scale(0);
|
|
429
|
+
transition: transform var(--ox-duration) var(--ox-ease);
|
|
430
|
+
}
|
|
431
|
+
.ox-checkbox input:checked,
|
|
432
|
+
.ox-radio input:checked { background: var(--ox-fg); border-color: var(--ox-fg); }
|
|
433
|
+
.ox-checkbox input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
|
|
434
|
+
.ox-radio input:checked::after { transform: scale(1); }
|
|
435
|
+
|
|
436
|
+
/* Switch */
|
|
437
|
+
.ox-switch { display: inline-flex; align-items: center; gap: var(--ox-space-3); cursor: pointer; font-size: var(--ox-text-sm); }
|
|
438
|
+
.ox-switch input { position: absolute; opacity: 0; pointer-events: none; }
|
|
439
|
+
.ox-switch-track {
|
|
440
|
+
position: relative;
|
|
441
|
+
width: 2.25rem;
|
|
442
|
+
height: 1.25rem;
|
|
443
|
+
flex-shrink: 0;
|
|
444
|
+
background: var(--ox-border-strong);
|
|
445
|
+
border-radius: var(--ox-radius-full);
|
|
446
|
+
transition: background var(--ox-duration) var(--ox-ease);
|
|
447
|
+
}
|
|
448
|
+
.ox-switch-track::after {
|
|
449
|
+
content: "";
|
|
450
|
+
position: absolute;
|
|
451
|
+
top: 2px;
|
|
452
|
+
left: 2px;
|
|
453
|
+
width: 1rem;
|
|
454
|
+
height: 1rem;
|
|
455
|
+
background: var(--ox-bg);
|
|
456
|
+
border-radius: 50%;
|
|
457
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
458
|
+
transition: transform 220ms var(--ox-ease);
|
|
459
|
+
}
|
|
460
|
+
.ox-switch input:checked + .ox-switch-track { background: var(--ox-fg); }
|
|
461
|
+
.ox-switch input:checked + .ox-switch-track::after { transform: translateX(1rem); }
|
|
462
|
+
.ox-switch input:focus-visible + .ox-switch-track { outline: 2px solid var(--ox-fg); outline-offset: 2px; }
|
|
463
|
+
|
|
464
|
+
/* =========================================================
|
|
465
|
+
6. Cards
|
|
466
|
+
========================================================= */
|
|
467
|
+
.ox-card {
|
|
468
|
+
background: var(--ox-surface);
|
|
469
|
+
border: 1px solid var(--ox-border);
|
|
470
|
+
border-radius: var(--ox-radius-lg);
|
|
471
|
+
box-shadow: var(--ox-shadow-sm);
|
|
472
|
+
}
|
|
473
|
+
.ox-card-body { padding: var(--ox-space-6); }
|
|
474
|
+
.ox-card-header,
|
|
475
|
+
.ox-card-footer { padding: var(--ox-space-4) var(--ox-space-6); }
|
|
476
|
+
.ox-card-header { border-bottom: 1px solid var(--ox-border); }
|
|
477
|
+
.ox-card-footer {
|
|
478
|
+
border-top: 1px solid var(--ox-border);
|
|
479
|
+
background: var(--ox-bg-subtle);
|
|
480
|
+
border-radius: 0 0 var(--ox-radius-lg) var(--ox-radius-lg);
|
|
481
|
+
}
|
|
482
|
+
.ox-card-title { margin: 0 0 var(--ox-space-1); font-size: var(--ox-text-base); font-weight: 600; letter-spacing: -0.01em; }
|
|
483
|
+
.ox-card-text { margin: 0; color: var(--ox-fg-muted); font-size: var(--ox-text-sm); }
|
|
484
|
+
.ox-card-interactive { transition: border-color var(--ox-duration) var(--ox-ease), box-shadow 240ms var(--ox-ease), transform 240ms var(--ox-ease); }
|
|
485
|
+
.ox-card-interactive:hover { border-color: var(--ox-border-strong); box-shadow: var(--ox-shadow); transform: translateY(-2px); }
|
|
486
|
+
|
|
487
|
+
/* =========================================================
|
|
488
|
+
7. Badges, avatars
|
|
489
|
+
========================================================= */
|
|
490
|
+
.ox-badge {
|
|
491
|
+
display: inline-flex;
|
|
492
|
+
align-items: center;
|
|
493
|
+
gap: 0.35rem;
|
|
494
|
+
height: 1.375rem;
|
|
495
|
+
padding: 0 0.55rem;
|
|
496
|
+
font-size: 0.7rem;
|
|
497
|
+
font-weight: 500;
|
|
498
|
+
letter-spacing: 0.01em;
|
|
499
|
+
white-space: nowrap;
|
|
500
|
+
color: var(--ox-fg);
|
|
501
|
+
background: var(--ox-bg-muted);
|
|
502
|
+
border: 1px solid var(--ox-border);
|
|
503
|
+
border-radius: var(--ox-radius-full);
|
|
504
|
+
}
|
|
505
|
+
.ox-badge-solid { color: var(--ox-inverse); background: var(--ox-fg); border-color: var(--ox-fg); }
|
|
506
|
+
.ox-badge-outline { background: transparent; border-color: var(--ox-border-strong); }
|
|
507
|
+
.ox-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
508
|
+
.ox-badge-live::before { animation: ox-pulse 1.8s ease-in-out infinite; }
|
|
509
|
+
|
|
510
|
+
.ox-avatar {
|
|
511
|
+
display: inline-grid;
|
|
512
|
+
place-items: center;
|
|
513
|
+
width: 2.25rem;
|
|
514
|
+
height: 2.25rem;
|
|
515
|
+
flex-shrink: 0;
|
|
516
|
+
font-size: var(--ox-text-xs);
|
|
517
|
+
font-weight: 600;
|
|
518
|
+
color: var(--ox-fg);
|
|
519
|
+
background: var(--ox-bg-muted);
|
|
520
|
+
border: 1px solid var(--ox-border);
|
|
521
|
+
border-radius: 50%;
|
|
522
|
+
overflow: hidden;
|
|
523
|
+
}
|
|
524
|
+
.ox-avatar-solid { color: var(--ox-inverse); background: var(--ox-fg); border-color: var(--ox-fg); }
|
|
525
|
+
.ox-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
|
|
526
|
+
.ox-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; }
|
|
527
|
+
.ox-avatar-lg { width: 3rem; height: 3rem; font-size: var(--ox-text-sm); }
|
|
528
|
+
.ox-avatar-stack { display: inline-flex; }
|
|
529
|
+
.ox-avatar-stack > .ox-avatar { box-shadow: 0 0 0 2px var(--ox-surface); }
|
|
530
|
+
.ox-avatar-stack > .ox-avatar + .ox-avatar { margin-left: -0.5rem; }
|
|
531
|
+
|
|
532
|
+
/* =========================================================
|
|
533
|
+
8. Alerts
|
|
534
|
+
========================================================= */
|
|
535
|
+
.ox-alert {
|
|
536
|
+
display: flex;
|
|
537
|
+
gap: var(--ox-space-3);
|
|
538
|
+
padding: var(--ox-space-4);
|
|
539
|
+
font-size: var(--ox-text-sm);
|
|
540
|
+
color: var(--ox-fg-muted);
|
|
541
|
+
background: var(--ox-surface);
|
|
542
|
+
border: 1px solid var(--ox-border);
|
|
543
|
+
border-radius: var(--ox-radius-lg);
|
|
544
|
+
}
|
|
545
|
+
.ox-alert strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ox-fg); }
|
|
546
|
+
.ox-alert-icon {
|
|
547
|
+
display: grid;
|
|
548
|
+
place-items: center;
|
|
549
|
+
width: 1.25rem;
|
|
550
|
+
height: 1.25rem;
|
|
551
|
+
flex-shrink: 0;
|
|
552
|
+
margin-top: 1px;
|
|
553
|
+
font-size: 0.7rem;
|
|
554
|
+
font-weight: 700;
|
|
555
|
+
color: var(--ox-inverse);
|
|
556
|
+
background: var(--ox-fg);
|
|
557
|
+
border-radius: 50%;
|
|
558
|
+
}
|
|
559
|
+
.ox-alert-solid { color: color-mix(in srgb, var(--ox-inverse) 70%, transparent); background: var(--ox-fg); border-color: var(--ox-fg); }
|
|
560
|
+
.ox-alert-solid strong { color: var(--ox-inverse); }
|
|
561
|
+
.ox-alert-solid .ox-alert-icon { color: var(--ox-fg); background: var(--ox-inverse); }
|
|
562
|
+
|
|
563
|
+
/* =========================================================
|
|
564
|
+
9. Tabs
|
|
565
|
+
========================================================= */
|
|
566
|
+
.ox-tabs-list {
|
|
567
|
+
display: flex;
|
|
568
|
+
gap: var(--ox-space-5);
|
|
569
|
+
border-bottom: 1px solid var(--ox-border);
|
|
570
|
+
overflow-x: auto;
|
|
571
|
+
scrollbar-width: none;
|
|
572
|
+
}
|
|
573
|
+
.ox-tab {
|
|
574
|
+
position: relative;
|
|
575
|
+
padding: var(--ox-space-2) 0 var(--ox-space-3);
|
|
576
|
+
font: 500 var(--ox-text-sm) var(--ox-font-sans);
|
|
577
|
+
color: var(--ox-fg-muted);
|
|
578
|
+
background: none;
|
|
579
|
+
border: 0;
|
|
580
|
+
cursor: pointer;
|
|
581
|
+
white-space: nowrap;
|
|
582
|
+
transition: color var(--ox-duration) var(--ox-ease);
|
|
583
|
+
}
|
|
584
|
+
.ox-tab::after {
|
|
585
|
+
content: "";
|
|
586
|
+
position: absolute;
|
|
587
|
+
left: 0;
|
|
588
|
+
right: 0;
|
|
589
|
+
bottom: -1px;
|
|
590
|
+
height: 2px;
|
|
591
|
+
background: var(--ox-fg);
|
|
592
|
+
transform: scaleX(0);
|
|
593
|
+
transition: transform 220ms var(--ox-ease);
|
|
594
|
+
}
|
|
595
|
+
.ox-tab:hover { color: var(--ox-fg); }
|
|
596
|
+
.ox-tab[aria-selected="true"] { color: var(--ox-fg); }
|
|
597
|
+
.ox-tab[aria-selected="true"]::after { transform: scaleX(1); }
|
|
598
|
+
.ox-tab-panel { padding-top: var(--ox-space-4); }
|
|
599
|
+
.ox-tab-panel[hidden] { display: none; }
|
|
600
|
+
|
|
601
|
+
/* =========================================================
|
|
602
|
+
10. Accordion (native <details>)
|
|
603
|
+
========================================================= */
|
|
604
|
+
.ox-accordion { border-top: 1px solid var(--ox-border); }
|
|
605
|
+
.ox-accordion details { border-bottom: 1px solid var(--ox-border); }
|
|
606
|
+
.ox-accordion summary {
|
|
607
|
+
display: flex;
|
|
608
|
+
align-items: center;
|
|
609
|
+
justify-content: space-between;
|
|
610
|
+
gap: var(--ox-space-4);
|
|
611
|
+
padding: var(--ox-space-5) 0;
|
|
612
|
+
font-weight: 500;
|
|
613
|
+
list-style: none;
|
|
614
|
+
cursor: pointer;
|
|
615
|
+
}
|
|
616
|
+
.ox-accordion summary::-webkit-details-marker { display: none; }
|
|
617
|
+
.ox-accordion summary::after {
|
|
618
|
+
content: "+";
|
|
619
|
+
font: 300 1.4rem / 1 var(--ox-font-sans);
|
|
620
|
+
color: var(--ox-fg-muted);
|
|
621
|
+
transition: transform 220ms var(--ox-ease);
|
|
622
|
+
}
|
|
623
|
+
.ox-accordion details[open] summary::after { transform: rotate(45deg); }
|
|
624
|
+
.ox-accordion details > :not(summary) {
|
|
625
|
+
margin: 0;
|
|
626
|
+
padding-bottom: var(--ox-space-5);
|
|
627
|
+
max-width: 65ch;
|
|
628
|
+
color: var(--ox-fg-muted);
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
/* =========================================================
|
|
632
|
+
11. Modal
|
|
633
|
+
========================================================= */
|
|
634
|
+
.ox-modal {
|
|
635
|
+
position: fixed;
|
|
636
|
+
inset: 0;
|
|
637
|
+
z-index: 1000;
|
|
638
|
+
display: grid;
|
|
639
|
+
place-items: center;
|
|
640
|
+
padding: var(--ox-space-4);
|
|
641
|
+
background: rgba(0, 0, 0, 0.4);
|
|
642
|
+
backdrop-filter: blur(6px);
|
|
643
|
+
opacity: 0;
|
|
644
|
+
visibility: hidden;
|
|
645
|
+
transition: opacity 200ms var(--ox-ease), visibility 200ms;
|
|
646
|
+
}
|
|
647
|
+
.ox-modal[data-open="true"] { opacity: 1; visibility: visible; }
|
|
648
|
+
.ox-modal-dialog {
|
|
649
|
+
width: 100%;
|
|
650
|
+
max-width: 440px;
|
|
651
|
+
color: var(--ox-fg);
|
|
652
|
+
background: var(--ox-surface);
|
|
653
|
+
border: 1px solid var(--ox-border);
|
|
654
|
+
border-radius: var(--ox-radius-xl);
|
|
655
|
+
box-shadow: var(--ox-shadow-lg);
|
|
656
|
+
transform: translateY(8px) scale(0.97);
|
|
657
|
+
transition: transform 260ms var(--ox-ease);
|
|
658
|
+
}
|
|
659
|
+
.ox-modal[data-open="true"] .ox-modal-dialog { transform: none; }
|
|
660
|
+
.ox-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ox-space-4); padding: var(--ox-space-6) var(--ox-space-6) 0; }
|
|
661
|
+
.ox-modal-title { margin: 0; font-size: var(--ox-text-lg); font-weight: 600; letter-spacing: -0.015em; }
|
|
662
|
+
.ox-modal-body { padding: var(--ox-space-3) var(--ox-space-6) var(--ox-space-6); color: var(--ox-fg-muted); font-size: var(--ox-text-sm); }
|
|
663
|
+
.ox-modal-footer {
|
|
664
|
+
display: flex;
|
|
665
|
+
justify-content: flex-end;
|
|
666
|
+
gap: var(--ox-space-2);
|
|
667
|
+
padding: var(--ox-space-4) var(--ox-space-6);
|
|
668
|
+
background: var(--ox-bg-subtle);
|
|
669
|
+
border-top: 1px solid var(--ox-border);
|
|
670
|
+
border-radius: 0 0 var(--ox-radius-xl) var(--ox-radius-xl);
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
/* =========================================================
|
|
674
|
+
12. Dropdown
|
|
675
|
+
========================================================= */
|
|
676
|
+
.ox-dropdown { position: relative; display: inline-block; }
|
|
677
|
+
.ox-dropdown-menu {
|
|
678
|
+
position: absolute;
|
|
679
|
+
top: calc(100% + 6px);
|
|
680
|
+
left: 0;
|
|
681
|
+
z-index: 50;
|
|
682
|
+
min-width: 13rem;
|
|
683
|
+
padding: var(--ox-space-1);
|
|
684
|
+
background: var(--ox-surface);
|
|
685
|
+
border: 1px solid var(--ox-border);
|
|
686
|
+
border-radius: var(--ox-radius-lg);
|
|
687
|
+
box-shadow: var(--ox-shadow-lg);
|
|
688
|
+
opacity: 0;
|
|
689
|
+
transform: translateY(-4px) scale(0.98);
|
|
690
|
+
transform-origin: top left;
|
|
691
|
+
pointer-events: none;
|
|
692
|
+
transition: opacity var(--ox-duration) var(--ox-ease), transform var(--ox-duration) var(--ox-ease);
|
|
693
|
+
}
|
|
694
|
+
.ox-dropdown[data-open="true"] .ox-dropdown-menu { opacity: 1; transform: none; pointer-events: auto; }
|
|
695
|
+
.ox-dropdown-label { padding: var(--ox-space-2) var(--ox-space-3) var(--ox-space-1); font-size: var(--ox-text-xs); color: var(--ox-fg-subtle); }
|
|
696
|
+
.ox-dropdown-item {
|
|
697
|
+
display: flex;
|
|
698
|
+
align-items: center;
|
|
699
|
+
justify-content: space-between;
|
|
700
|
+
gap: var(--ox-space-4);
|
|
701
|
+
width: 100%;
|
|
702
|
+
padding: 0.45rem var(--ox-space-3);
|
|
703
|
+
font: inherit;
|
|
704
|
+
font-size: var(--ox-text-sm);
|
|
705
|
+
text-align: left;
|
|
706
|
+
color: var(--ox-fg);
|
|
707
|
+
background: none;
|
|
708
|
+
border: 0;
|
|
709
|
+
border-radius: var(--ox-radius-sm);
|
|
710
|
+
cursor: pointer;
|
|
711
|
+
text-decoration: none;
|
|
712
|
+
}
|
|
713
|
+
.ox-dropdown-item:hover,
|
|
714
|
+
.ox-dropdown-item:focus-visible { background: var(--ox-bg-muted); outline: none; }
|
|
715
|
+
.ox-dropdown-item .ox-kbd { background: transparent; }
|
|
716
|
+
.ox-separator { height: 1px; margin: var(--ox-space-1) 0; background: var(--ox-border); border: 0; }
|
|
717
|
+
|
|
718
|
+
/* =========================================================
|
|
719
|
+
13. Tooltip (CSS only)
|
|
720
|
+
========================================================= */
|
|
721
|
+
[data-ox-tooltip] { position: relative; }
|
|
722
|
+
[data-ox-tooltip]::after {
|
|
723
|
+
content: attr(data-ox-tooltip);
|
|
724
|
+
position: absolute;
|
|
725
|
+
bottom: calc(100% + 8px);
|
|
726
|
+
left: 50%;
|
|
727
|
+
z-index: 60;
|
|
728
|
+
translate: -50% 4px;
|
|
729
|
+
padding: 0.3rem 0.55rem;
|
|
730
|
+
font: 500 var(--ox-text-xs) / 1.3 var(--ox-font-sans);
|
|
731
|
+
color: var(--ox-inverse);
|
|
732
|
+
background: var(--ox-fg);
|
|
733
|
+
border-radius: var(--ox-radius-sm);
|
|
734
|
+
white-space: nowrap;
|
|
735
|
+
opacity: 0;
|
|
736
|
+
pointer-events: none;
|
|
737
|
+
transition: opacity var(--ox-duration) var(--ox-ease), translate var(--ox-duration) var(--ox-ease);
|
|
738
|
+
}
|
|
739
|
+
[data-ox-tooltip]:hover::after,
|
|
740
|
+
[data-ox-tooltip]:focus-visible::after { opacity: 1; translate: -50% 0; }
|
|
741
|
+
|
|
742
|
+
/* =========================================================
|
|
743
|
+
14. Toast
|
|
744
|
+
========================================================= */
|
|
745
|
+
.ox-toast-region {
|
|
746
|
+
position: fixed;
|
|
747
|
+
right: var(--ox-space-4);
|
|
748
|
+
bottom: var(--ox-space-4);
|
|
749
|
+
z-index: 1100;
|
|
750
|
+
display: grid;
|
|
751
|
+
gap: var(--ox-space-2);
|
|
752
|
+
max-width: calc(100vw - 2rem);
|
|
753
|
+
}
|
|
754
|
+
.ox-toast {
|
|
755
|
+
display: flex;
|
|
756
|
+
align-items: center;
|
|
757
|
+
gap: var(--ox-space-3);
|
|
758
|
+
min-width: 260px;
|
|
759
|
+
padding: var(--ox-space-3) var(--ox-space-4);
|
|
760
|
+
font: 500 var(--ox-text-sm) var(--ox-font-sans);
|
|
761
|
+
color: var(--ox-inverse);
|
|
762
|
+
background: var(--ox-fg);
|
|
763
|
+
border-radius: var(--ox-radius-lg);
|
|
764
|
+
box-shadow: var(--ox-shadow-lg);
|
|
765
|
+
animation: ox-toast-in 320ms var(--ox-ease);
|
|
766
|
+
}
|
|
767
|
+
.ox-toast::before {
|
|
768
|
+
content: "✓";
|
|
769
|
+
display: grid;
|
|
770
|
+
place-items: center;
|
|
771
|
+
width: 1.1rem;
|
|
772
|
+
height: 1.1rem;
|
|
773
|
+
font-size: 0.65rem;
|
|
774
|
+
color: var(--ox-fg);
|
|
775
|
+
background: var(--ox-inverse);
|
|
776
|
+
border-radius: 50%;
|
|
777
|
+
flex-shrink: 0;
|
|
778
|
+
}
|
|
779
|
+
.ox-toast[data-leaving] { animation: ox-toast-out 200ms var(--ox-ease) forwards; }
|
|
780
|
+
|
|
781
|
+
/* =========================================================
|
|
782
|
+
15. Progress, skeleton, spinner
|
|
783
|
+
========================================================= */
|
|
784
|
+
.ox-progress { height: 4px; background: var(--ox-bg-muted); border-radius: var(--ox-radius-full); overflow: hidden; }
|
|
785
|
+
.ox-progress-bar {
|
|
786
|
+
height: 100%;
|
|
787
|
+
width: var(--value, 0%);
|
|
788
|
+
background: var(--ox-fg);
|
|
789
|
+
border-radius: inherit;
|
|
790
|
+
transition: width 500ms var(--ox-ease);
|
|
791
|
+
}
|
|
792
|
+
.ox-skeleton {
|
|
793
|
+
background: linear-gradient(90deg, var(--ox-bg-muted) 30%, var(--ox-border) 50%, var(--ox-bg-muted) 70%);
|
|
794
|
+
background-size: 300% 100%;
|
|
795
|
+
border-radius: var(--ox-radius-sm);
|
|
796
|
+
animation: ox-shimmer 1.6s ease-in-out infinite;
|
|
797
|
+
}
|
|
798
|
+
.ox-spinner {
|
|
799
|
+
width: 1.25rem;
|
|
800
|
+
height: 1.25rem;
|
|
801
|
+
border: 1.5px solid var(--ox-border-strong);
|
|
802
|
+
border-top-color: var(--ox-fg);
|
|
803
|
+
border-radius: 50%;
|
|
804
|
+
animation: ox-spin 0.7s linear infinite;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
/* =========================================================
|
|
808
|
+
16. Code block
|
|
809
|
+
========================================================= */
|
|
810
|
+
.ox-code {
|
|
811
|
+
margin: 0;
|
|
812
|
+
padding: var(--ox-space-5);
|
|
813
|
+
font: 400 0.8125rem / 1.75 var(--ox-font-mono);
|
|
814
|
+
color: #d4d4d4;
|
|
815
|
+
background: #0a0a0a;
|
|
816
|
+
border: 1px solid #222;
|
|
817
|
+
border-radius: var(--ox-radius-lg);
|
|
818
|
+
overflow-x: auto;
|
|
819
|
+
tab-size: 2;
|
|
820
|
+
}
|
|
821
|
+
.ox-code .c { color: #5f5f5f; }
|
|
822
|
+
.ox-code .t { color: #ffffff; }
|
|
823
|
+
.ox-code .a { color: #9a9a9a; }
|
|
824
|
+
.ox-code .s { color: #e5e5e5; font-style: italic; }
|
|
825
|
+
|
|
826
|
+
/* =========================================================
|
|
827
|
+
17. Navbar
|
|
828
|
+
========================================================= */
|
|
829
|
+
.ox-navbar {
|
|
830
|
+
position: sticky;
|
|
831
|
+
top: 0;
|
|
832
|
+
z-index: 100;
|
|
833
|
+
background: color-mix(in srgb, var(--ox-bg) 75%, transparent);
|
|
834
|
+
backdrop-filter: saturate(180%) blur(16px);
|
|
835
|
+
border-bottom: 1px solid transparent;
|
|
836
|
+
transition: border-color 200ms var(--ox-ease);
|
|
837
|
+
}
|
|
838
|
+
.ox-navbar[data-scrolled="true"] { border-bottom-color: var(--ox-border); }
|
|
839
|
+
.ox-navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ox-space-4); height: 3.75rem; }
|
|
840
|
+
.ox-navbar-links { display: flex; gap: var(--ox-space-1); }
|
|
841
|
+
.ox-navbar-links a {
|
|
842
|
+
padding: 0.4rem 0.75rem;
|
|
843
|
+
font-size: var(--ox-text-sm);
|
|
844
|
+
color: var(--ox-fg-muted);
|
|
845
|
+
text-decoration: none;
|
|
846
|
+
border-radius: var(--ox-radius-full);
|
|
847
|
+
transition: color var(--ox-duration) var(--ox-ease), background var(--ox-duration) var(--ox-ease);
|
|
848
|
+
}
|
|
849
|
+
.ox-navbar-links a:hover { color: var(--ox-fg); background: var(--ox-bg-muted); }
|
|
850
|
+
@media (max-width: 760px) {
|
|
851
|
+
.ox-navbar-links { display: none; }
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
/* =========================================================
|
|
855
|
+
18. Utilities
|
|
856
|
+
========================================================= */
|
|
857
|
+
.ox-stack { display: flex; flex-direction: column; gap: var(--ox-space-4); }
|
|
858
|
+
.ox-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ox-space-3); }
|
|
859
|
+
.ox-between { justify-content: space-between; }
|
|
860
|
+
.ox-grid { display: grid; gap: var(--ox-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
|
|
861
|
+
.ox-divider { display: flex; align-items: center; gap: var(--ox-space-3); font-size: var(--ox-text-xs); color: var(--ox-fg-subtle); }
|
|
862
|
+
.ox-divider::before,
|
|
863
|
+
.ox-divider::after { content: ""; flex: 1; height: 1px; background: var(--ox-border); }
|
|
864
|
+
.ox-sr-only {
|
|
865
|
+
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
|
866
|
+
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
/* =========================================================
|
|
870
|
+
19. Keyframes & motion preferences
|
|
871
|
+
========================================================= */
|
|
872
|
+
@keyframes ox-spin { to { transform: rotate(360deg); } }
|
|
873
|
+
@keyframes ox-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
|
|
874
|
+
@keyframes ox-pulse { 50% { opacity: 0.3; } }
|
|
875
|
+
@keyframes ox-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
|
|
876
|
+
@keyframes ox-toast-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
|
|
877
|
+
|
|
878
|
+
@media (prefers-reduced-motion: reduce) {
|
|
879
|
+
.ox *,
|
|
880
|
+
.ox *::before,
|
|
881
|
+
.ox *::after {
|
|
882
|
+
animation-duration: 1ms !important;
|
|
883
|
+
animation-iteration-count: 1 !important;
|
|
884
|
+
transition-duration: 1ms !important;
|
|
885
|
+
}
|
|
886
|
+
}
|
package/src/onyx.js
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Onyx v1.0.0 — interactive behaviors
|
|
3
|
+
* Zero dependencies. Works via data attributes, or the window.Onyx API.
|
|
4
|
+
*/
|
|
5
|
+
(function (global) {
|
|
6
|
+
"use strict";
|
|
7
|
+
|
|
8
|
+
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
9
|
+
|
|
10
|
+
/* ---------- Modal ---------- */
|
|
11
|
+
var lastFocused = null;
|
|
12
|
+
|
|
13
|
+
function openModal(id) {
|
|
14
|
+
var modal = document.getElementById(id);
|
|
15
|
+
if (!modal) return;
|
|
16
|
+
lastFocused = document.activeElement;
|
|
17
|
+
modal.setAttribute("data-open", "true");
|
|
18
|
+
modal.setAttribute("aria-hidden", "false");
|
|
19
|
+
var first = modal.querySelector(FOCUSABLE);
|
|
20
|
+
if (first) setTimeout(function () { first.focus(); }, 60);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function closeModal(modal) {
|
|
24
|
+
if (typeof modal === "string") modal = document.getElementById(modal);
|
|
25
|
+
if (!modal) return;
|
|
26
|
+
modal.setAttribute("data-open", "false");
|
|
27
|
+
modal.setAttribute("aria-hidden", "true");
|
|
28
|
+
if (lastFocused) lastFocused.focus();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function trapFocus(modal, e) {
|
|
32
|
+
var items = modal.querySelectorAll(FOCUSABLE);
|
|
33
|
+
if (!items.length) return;
|
|
34
|
+
var first = items[0];
|
|
35
|
+
var last = items[items.length - 1];
|
|
36
|
+
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
|
|
37
|
+
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* ---------- Tabs ---------- */
|
|
41
|
+
function selectTab(tab) {
|
|
42
|
+
var list = tab.closest('[role="tablist"]');
|
|
43
|
+
if (!list) return;
|
|
44
|
+
list.querySelectorAll('[role="tab"]').forEach(function (t) {
|
|
45
|
+
var selected = t === tab;
|
|
46
|
+
t.setAttribute("aria-selected", String(selected));
|
|
47
|
+
t.tabIndex = selected ? 0 : -1;
|
|
48
|
+
var panel = document.getElementById(t.getAttribute("aria-controls"));
|
|
49
|
+
if (panel) panel.hidden = !selected;
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* ---------- Segmented control ---------- */
|
|
54
|
+
function pressSegment(btn) {
|
|
55
|
+
var group = btn.closest(".ox-segmented");
|
|
56
|
+
group.querySelectorAll("button").forEach(function (b) {
|
|
57
|
+
b.setAttribute("aria-pressed", String(b === btn));
|
|
58
|
+
});
|
|
59
|
+
group.dispatchEvent(new CustomEvent("ox:change", { bubbles: true, detail: { value: btn.value || btn.textContent.trim() } }));
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* ---------- Dropdown ---------- */
|
|
63
|
+
function closeAllDropdowns(except) {
|
|
64
|
+
document.querySelectorAll('.ox-dropdown[data-open="true"]').forEach(function (d) {
|
|
65
|
+
if (d !== except) {
|
|
66
|
+
d.setAttribute("data-open", "false");
|
|
67
|
+
var trigger = d.querySelector("[data-ox-dropdown-toggle]");
|
|
68
|
+
if (trigger) trigger.setAttribute("aria-expanded", "false");
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* ---------- Toast ---------- */
|
|
74
|
+
function toast(message, opts) {
|
|
75
|
+
opts = opts || {};
|
|
76
|
+
var region = document.querySelector(".ox-toast-region");
|
|
77
|
+
if (!region) {
|
|
78
|
+
region = document.createElement("div");
|
|
79
|
+
region.className = "ox-toast-region ox";
|
|
80
|
+
region.setAttribute("aria-live", "polite");
|
|
81
|
+
document.body.appendChild(region);
|
|
82
|
+
}
|
|
83
|
+
var el = document.createElement("div");
|
|
84
|
+
el.className = "ox-toast";
|
|
85
|
+
el.setAttribute("role", "status");
|
|
86
|
+
el.textContent = message;
|
|
87
|
+
region.appendChild(el);
|
|
88
|
+
setTimeout(function () {
|
|
89
|
+
el.setAttribute("data-leaving", "");
|
|
90
|
+
el.addEventListener("animationend", function () { el.remove(); });
|
|
91
|
+
}, opts.duration || 2800);
|
|
92
|
+
return el;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* ---------- Copy ---------- */
|
|
96
|
+
function copy(text) {
|
|
97
|
+
if (navigator.clipboard) navigator.clipboard.writeText(text).catch(function () {});
|
|
98
|
+
toast("Copied to clipboard");
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* ---------- Theme ---------- */
|
|
102
|
+
var THEME_KEY = "onyx-theme";
|
|
103
|
+
|
|
104
|
+
function currentTheme() {
|
|
105
|
+
var attr = document.documentElement.getAttribute("data-theme");
|
|
106
|
+
if (attr) return attr;
|
|
107
|
+
return global.matchMedia && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
function setTheme(theme) {
|
|
111
|
+
document.documentElement.setAttribute("data-theme", theme);
|
|
112
|
+
try { localStorage.setItem(THEME_KEY, theme); } catch (e) { /* storage unavailable */ }
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
function restoreTheme() {
|
|
116
|
+
try {
|
|
117
|
+
var saved = localStorage.getItem(THEME_KEY);
|
|
118
|
+
if (saved) document.documentElement.setAttribute("data-theme", saved);
|
|
119
|
+
} catch (e) { /* storage unavailable */ }
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* ---------- Navbar border on scroll ---------- */
|
|
123
|
+
function syncNavbars() {
|
|
124
|
+
var scrolled = String(global.scrollY > 4);
|
|
125
|
+
document.querySelectorAll(".ox-navbar").forEach(function (n) { n.setAttribute("data-scrolled", scrolled); });
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* ---------- Event delegation ---------- */
|
|
129
|
+
document.addEventListener("click", function (e) {
|
|
130
|
+
var t = e.target;
|
|
131
|
+
|
|
132
|
+
var opener = t.closest("[data-ox-modal-open]");
|
|
133
|
+
if (opener) { openModal(opener.getAttribute("data-ox-modal-open")); return; }
|
|
134
|
+
|
|
135
|
+
var closer = t.closest("[data-ox-modal-close]");
|
|
136
|
+
if (closer) closeModal(closer.closest(".ox-modal"));
|
|
137
|
+
|
|
138
|
+
if (t.classList && t.classList.contains("ox-modal")) { closeModal(t); return; }
|
|
139
|
+
|
|
140
|
+
var tab = t.closest('[role="tab"]');
|
|
141
|
+
if (tab) { selectTab(tab); return; }
|
|
142
|
+
|
|
143
|
+
var seg = t.closest(".ox-segmented button");
|
|
144
|
+
if (seg) { pressSegment(seg); return; }
|
|
145
|
+
|
|
146
|
+
var ddToggle = t.closest("[data-ox-dropdown-toggle]");
|
|
147
|
+
if (ddToggle) {
|
|
148
|
+
var dd = ddToggle.closest(".ox-dropdown");
|
|
149
|
+
var open = dd.getAttribute("data-open") === "true";
|
|
150
|
+
closeAllDropdowns(dd);
|
|
151
|
+
dd.setAttribute("data-open", String(!open));
|
|
152
|
+
ddToggle.setAttribute("aria-expanded", String(!open));
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
if (!t.closest(".ox-dropdown-menu") || t.closest(".ox-dropdown-item")) closeAllDropdowns();
|
|
156
|
+
|
|
157
|
+
var copier = t.closest("[data-ox-copy]");
|
|
158
|
+
if (copier) copy(copier.getAttribute("data-ox-copy"));
|
|
159
|
+
|
|
160
|
+
var toaster = t.closest("[data-ox-toast]");
|
|
161
|
+
if (toaster) toast(toaster.getAttribute("data-ox-toast"));
|
|
162
|
+
|
|
163
|
+
if (t.closest("[data-ox-theme-toggle]")) setTheme(currentTheme() === "dark" ? "light" : "dark");
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
document.addEventListener("keydown", function (e) {
|
|
167
|
+
var openModalEl = document.querySelector('.ox-modal[data-open="true"]');
|
|
168
|
+
if (e.key === "Escape") {
|
|
169
|
+
if (openModalEl) closeModal(openModalEl);
|
|
170
|
+
closeAllDropdowns();
|
|
171
|
+
}
|
|
172
|
+
if (e.key === "Tab" && openModalEl) trapFocus(openModalEl, e);
|
|
173
|
+
|
|
174
|
+
// Arrow-key navigation between tabs
|
|
175
|
+
var tab = e.target.closest && e.target.closest('[role="tab"]');
|
|
176
|
+
if (tab && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
|
|
177
|
+
var tabs = Array.prototype.slice.call(tab.closest('[role="tablist"]').querySelectorAll('[role="tab"]'));
|
|
178
|
+
var i = tabs.indexOf(tab) + (e.key === "ArrowRight" ? 1 : -1);
|
|
179
|
+
var next = tabs[(i + tabs.length) % tabs.length];
|
|
180
|
+
selectTab(next);
|
|
181
|
+
next.focus();
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
|
|
185
|
+
global.addEventListener("scroll", syncNavbars, { passive: true });
|
|
186
|
+
document.addEventListener("DOMContentLoaded", syncNavbars);
|
|
187
|
+
restoreTheme();
|
|
188
|
+
|
|
189
|
+
global.Onyx = {
|
|
190
|
+
version: "1.0.0",
|
|
191
|
+
modal: { open: openModal, close: closeModal },
|
|
192
|
+
toast: toast,
|
|
193
|
+
copy: copy,
|
|
194
|
+
theme: { get: currentTheme, set: setTheme }
|
|
195
|
+
};
|
|
196
|
+
})(window);
|