@birdapi/velinstyle 0.9.0 → 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/README.de.md +7 -7
- package/README.md +7 -7
- package/cli/cli-manifest.json +1 -1
- package/core/a11y/component-contracts.json +1 -1
- package/core/search/worker-client.js +2 -3
- package/dist/chunks/attributes-ADOKLKA7.js +391 -0
- package/dist/chunks/chunk-IEHKRARD.js +109 -0
- package/dist/chunks/runtime-entry.js +1 -1
- package/dist/chunks/velin-search-FDHEMCSO.js +557 -0
- package/dist/chunks/worker-client-MPT7PNQ4.js +47 -0
- package/dist/llms.txt +1 -1
- package/dist/search-index.json +2 -2
- package/dist/velin-agent.json +2 -2
- package/dist/velinstyle-components.iife.js +3 -3
- package/dist/velinstyle-components.js +2 -1
- package/dist/velinstyle-components.min.js +1 -1
- package/dist/velinstyle.css +12 -19
- package/dist/velinstyle.min.css +1 -1
- package/package.json +1 -1
- package/dist/llms.test.txt +0 -40
- package/dist/search-index.test.json +0 -1773
- package/dist/velin-agent.test.json +0 -684
package/README.de.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
[](LICENSE)
|
|
13
|
-
[](https://github.com/SkyliteDesign/velinstyle/releases/tag/v1.0.0)
|
|
14
14
|
[](https://www.npmjs.com/package/@birdapi/velinstyle)
|
|
15
15
|
[](https://velinstyle.info/docs/a11y.html)
|
|
16
16
|
[](https://github.com/SkyliteDesign/velinstyle/stargazers)
|
|
@@ -28,7 +28,7 @@ npm i @birdapi/velinstyle
|
|
|
28
28
|
|
|
29
29
|
---
|
|
30
30
|
|
|
31
|
-
**VelinStyle** ist das **WCAG-2.2-AAA-CSS-Framework** mit nativer JavaScript-Runtime und Web Components — CSS-Utilities, 0.
|
|
31
|
+
**VelinStyle** ist das **WCAG-2.2-AAA-CSS-Framework** mit nativer JavaScript-Runtime und Web Components — CSS-Utilities, 1.0.0-Module (Search, Motion, Highlight, Attributes, Meta) und Security-Toolchain, **ohne externe UI-Framework-Abhängigkeiten** im Kern.
|
|
32
32
|
|
|
33
33
|
Gedacht für Teams mit **lesbarem HTML**, **AAA-Token-Defaults** (AA über `data-velin-contrast="aa"`) und **CLI-Automatisierung** statt Utility-Chaos.
|
|
34
34
|
|
|
@@ -70,8 +70,8 @@ npm i @birdapi/velinstyle
|
|
|
70
70
|
**CDN (Version pinnen):**
|
|
71
71
|
|
|
72
72
|
```html
|
|
73
|
-
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.
|
|
74
|
-
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.
|
|
73
|
+
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle.min.css">
|
|
74
|
+
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle-components.min.js"></script>
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
Nach dem Klonen: `npm install && npm run build` — `dist/` wird erzeugt, nicht committet.
|
|
@@ -86,8 +86,8 @@ Nach dem Klonen: `npm install && npm run build` — `dist/` wird erzeugt, nicht
|
|
|
86
86
|
<head>
|
|
87
87
|
<meta charset="UTF-8">
|
|
88
88
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
89
|
-
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.
|
|
90
|
-
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.
|
|
89
|
+
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle.min.css">
|
|
90
|
+
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle-components.min.js"></script>
|
|
91
91
|
</head>
|
|
92
92
|
<body class="velin-p-6">
|
|
93
93
|
<button type="button" class="velin-btn velin-btn--primary" velin-reveal="slide-up">Loslegen</button>
|
|
@@ -98,7 +98,7 @@ Nach dem Klonen: `npm install && npm run build` — `dist/` wird erzeugt, nicht
|
|
|
98
98
|
|
|
99
99
|
---
|
|
100
100
|
|
|
101
|
-
## Core-Module (0.
|
|
101
|
+
## Core-Module (1.0.0)
|
|
102
102
|
|
|
103
103
|
| Export | Beschreibung |
|
|
104
104
|
| --- | --- |
|
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
[](LICENSE)
|
|
13
|
-
[](https://github.com/SkyliteDesign/velinstyle/releases/tag/v1.0.0)
|
|
14
14
|
[](https://www.npmjs.com/package/@birdapi/velinstyle)
|
|
15
15
|
[](https://velinstyle.info/docs/a11y.html)
|
|
16
16
|
[](https://github.com/SkyliteDesign/velinstyle/stargazers)
|
|
@@ -28,7 +28,7 @@ npm i @birdapi/velinstyle
|
|
|
28
28
|
|
|
29
29
|
---
|
|
30
30
|
|
|
31
|
-
**VelinStyle** is the **WCAG 2.2 AAA CSS framework** with native JavaScript runtime and Web Components — CSS utilities, 0.
|
|
31
|
+
**VelinStyle** is the **WCAG 2.2 AAA CSS framework** with native JavaScript runtime and Web Components — CSS utilities, 1.0.0 modules (search, motion, highlight, attributes, meta), and security tooling, with **no external UI framework dependencies** in the core.
|
|
32
32
|
|
|
33
33
|
Built for teams who want **readable HTML**, **AAA token defaults** (AA via `data-velin-contrast="aa"`), and **CLI automation** instead of utility sprawl.
|
|
34
34
|
|
|
@@ -70,8 +70,8 @@ npm i @birdapi/velinstyle
|
|
|
70
70
|
**CDN (pin version):**
|
|
71
71
|
|
|
72
72
|
```html
|
|
73
|
-
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.
|
|
74
|
-
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.
|
|
73
|
+
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle.min.css">
|
|
74
|
+
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle-components.min.js"></script>
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
After cloning, run `npm install && npm run build` — `dist/` is generated, not committed.
|
|
@@ -86,8 +86,8 @@ After cloning, run `npm install && npm run build` — `dist/` is generated, not
|
|
|
86
86
|
<head>
|
|
87
87
|
<meta charset="UTF-8">
|
|
88
88
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
89
|
-
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.
|
|
90
|
-
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.
|
|
89
|
+
<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle.min.css">
|
|
90
|
+
<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.0.0/dist/velinstyle-components.min.js"></script>
|
|
91
91
|
</head>
|
|
92
92
|
<body class="velin-p-6">
|
|
93
93
|
<button type="button" class="velin-btn velin-btn--primary" velin-reveal="slide-up">Ship it</button>
|
|
@@ -98,7 +98,7 @@ After cloning, run `npm install && npm run build` — `dist/` is generated, not
|
|
|
98
98
|
|
|
99
99
|
---
|
|
100
100
|
|
|
101
|
-
## Core modules (0.
|
|
101
|
+
## Core modules (1.0.0)
|
|
102
102
|
|
|
103
103
|
| Export | Description |
|
|
104
104
|
| --- | --- |
|
package/cli/cli-manifest.json
CHANGED
|
@@ -5,10 +5,9 @@ let _nextId = 0;
|
|
|
5
5
|
*/
|
|
6
6
|
export function createSearchWorker(workerUrl) {
|
|
7
7
|
if (typeof Worker === 'undefined') return null;
|
|
8
|
+
if (!workerUrl) return null;
|
|
8
9
|
|
|
9
|
-
const url =
|
|
10
|
-
workerUrl ||
|
|
11
|
-
new URL('./worker.js', import.meta.url).href;
|
|
10
|
+
const url = workerUrl;
|
|
12
11
|
|
|
13
12
|
let worker;
|
|
14
13
|
try {
|
|
@@ -0,0 +1,391 @@
|
|
|
1
|
+
import {
|
|
2
|
+
disconnectInViewObserver,
|
|
3
|
+
observeInView
|
|
4
|
+
} from "./chunk-7MCGPHVC.js";
|
|
5
|
+
import {
|
|
6
|
+
lazyDefine
|
|
7
|
+
} from "./chunk-IEHKRARD.js";
|
|
8
|
+
|
|
9
|
+
// core/motion/effects.js
|
|
10
|
+
var VISIBLE_CLASS = "velin-in-view";
|
|
11
|
+
var EFFECT_MAP = {
|
|
12
|
+
reveal: ["velin-animate-on-scroll"],
|
|
13
|
+
fade: ["velin-animate-on-scroll", "velin-animate-on-scroll--fade"],
|
|
14
|
+
slide: ["velin-animate-on-scroll", "velin-animate-on-scroll--slide-up"],
|
|
15
|
+
"slide-up": ["velin-animate-on-scroll", "velin-animate-on-scroll--slide-up"],
|
|
16
|
+
"slide-down": ["velin-animate-on-scroll", "velin-animate-on-scroll--slide-down"],
|
|
17
|
+
"slide-left": ["velin-animate-on-scroll", "velin-animate-on-scroll--slide-left"],
|
|
18
|
+
"slide-right": ["velin-animate-on-scroll", "velin-animate-on-scroll--slide-right"],
|
|
19
|
+
scale: ["velin-animate-on-scroll", "velin-animate-on-scroll--scale"],
|
|
20
|
+
parallax: ["velin-parallax"],
|
|
21
|
+
"parallax-slow": ["velin-parallax", "velin-parallax--slow"],
|
|
22
|
+
hover: ["velin-animate-hover"],
|
|
23
|
+
"hover-lift": ["velin-animate-hover"],
|
|
24
|
+
flip: ["velin-animate-scale-in"],
|
|
25
|
+
blur: ["velin-animate-fade-in"]
|
|
26
|
+
};
|
|
27
|
+
function applyEffects(el, attrs = {}) {
|
|
28
|
+
const classes = /* @__PURE__ */ new Set();
|
|
29
|
+
for (const [name, value] of Object.entries(attrs)) {
|
|
30
|
+
if (value === "false" || value === "off") continue;
|
|
31
|
+
const mapped = EFFECT_MAP[name];
|
|
32
|
+
if (mapped) mapped.forEach((c) => classes.add(c));
|
|
33
|
+
if (name === "slide" && value && value !== "true" && value !== "") {
|
|
34
|
+
const key = `slide-${value}`;
|
|
35
|
+
EFFECT_MAP[key]?.forEach((c) => classes.add(c));
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
classes.forEach((c) => el.classList.add(c));
|
|
39
|
+
if (!el.classList.contains("velin-animate-on-scroll") && attrs.reveal !== void 0) {
|
|
40
|
+
el.classList.add("velin-animate-on-scroll");
|
|
41
|
+
}
|
|
42
|
+
return [...classes];
|
|
43
|
+
}
|
|
44
|
+
function markVisible(el) {
|
|
45
|
+
el.classList.add(VISIBLE_CLASS);
|
|
46
|
+
el.dataset.velinVisible = "true";
|
|
47
|
+
}
|
|
48
|
+
function prefersReducedMotion() {
|
|
49
|
+
return typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// core/motion/stagger.js
|
|
53
|
+
var STAGGER_ATTR = "velin-stagger";
|
|
54
|
+
function applyStagger(listEl, value = "true") {
|
|
55
|
+
const base = value === "true" || value === "" ? 60 : parseInt(value, 10) || 60;
|
|
56
|
+
const children = [...listEl.children];
|
|
57
|
+
children.forEach((child, i) => {
|
|
58
|
+
child.style.setProperty("--velin-stagger-delay", `${i * base}ms`);
|
|
59
|
+
child.classList.add("velin-stagger-item");
|
|
60
|
+
});
|
|
61
|
+
listEl.classList.add("velin-stagger");
|
|
62
|
+
}
|
|
63
|
+
function enhanceStagger(root = document) {
|
|
64
|
+
root.querySelectorAll(`[${STAGGER_ATTR}]`).forEach((el) => {
|
|
65
|
+
if (el.dataset.velinStaggerDone) return;
|
|
66
|
+
el.dataset.velinStaggerDone = "1";
|
|
67
|
+
applyStagger(el, el.getAttribute(STAGGER_ATTR) || "true");
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// core/motion/scroll.js
|
|
72
|
+
function smoothScrollTo(target, options = {}) {
|
|
73
|
+
const reduced = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
74
|
+
const el = typeof target === "string" ? document.querySelector(target) : target;
|
|
75
|
+
if (!el) return;
|
|
76
|
+
el.scrollIntoView({
|
|
77
|
+
behavior: reduced || options.instant ? "auto" : "smooth",
|
|
78
|
+
block: options.block || "start",
|
|
79
|
+
inline: options.inline || "nearest"
|
|
80
|
+
});
|
|
81
|
+
if (el.tabIndex < 0 && !el.hasAttribute("tabindex")) {
|
|
82
|
+
el.setAttribute("tabindex", "-1");
|
|
83
|
+
}
|
|
84
|
+
el.focus({ preventScroll: true });
|
|
85
|
+
}
|
|
86
|
+
function bindSmoothScroll(root = document) {
|
|
87
|
+
root.querySelectorAll("[velin-scroll]").forEach((link) => {
|
|
88
|
+
if (link.dataset.velinScrollBound) return;
|
|
89
|
+
link.dataset.velinScrollBound = "1";
|
|
90
|
+
link.addEventListener("click", (e) => {
|
|
91
|
+
const href = link.getAttribute("href");
|
|
92
|
+
if (!href || !href.startsWith("#")) return;
|
|
93
|
+
const target = document.querySelector(href);
|
|
94
|
+
if (!target) return;
|
|
95
|
+
e.preventDefault();
|
|
96
|
+
smoothScrollTo(target);
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// core/motion/index.js
|
|
102
|
+
var MOTION_ATTRS = ["velin-reveal", "velin-fade", "velin-slide", "velin-scale", "velin-parallax", "velin-hover"];
|
|
103
|
+
var teardownFns = [];
|
|
104
|
+
function initMotion(options = {}) {
|
|
105
|
+
const root = options.root || (typeof document !== "undefined" ? document : null);
|
|
106
|
+
if (!root) return () => {
|
|
107
|
+
};
|
|
108
|
+
const selector = options.selector || [
|
|
109
|
+
"[velin-reveal]",
|
|
110
|
+
"[velin-fade]",
|
|
111
|
+
"[velin-slide]",
|
|
112
|
+
"[velin-scale]",
|
|
113
|
+
"[velin-parallax]",
|
|
114
|
+
"[velin-hover]",
|
|
115
|
+
".velin-animate-on-scroll"
|
|
116
|
+
].join(",");
|
|
117
|
+
const elements = root.querySelectorAll(selector);
|
|
118
|
+
const reduced = prefersReducedMotion();
|
|
119
|
+
for (const el of elements) {
|
|
120
|
+
if (el.dataset.velinMotionInit) continue;
|
|
121
|
+
el.dataset.velinMotionInit = "1";
|
|
122
|
+
const attrs = {};
|
|
123
|
+
for (const name of MOTION_ATTRS) {
|
|
124
|
+
if (el.hasAttribute(name)) attrs[name.replace("velin-", "")] = el.getAttribute(name) || "true";
|
|
125
|
+
}
|
|
126
|
+
applyEffects(el, attrs);
|
|
127
|
+
if (reduced) {
|
|
128
|
+
markVisible(el);
|
|
129
|
+
continue;
|
|
130
|
+
}
|
|
131
|
+
const stop = observeInView(el, (node) => markVisible(node));
|
|
132
|
+
teardownFns.push(stop);
|
|
133
|
+
}
|
|
134
|
+
enhanceStagger(root);
|
|
135
|
+
bindSmoothScroll(root);
|
|
136
|
+
return () => {
|
|
137
|
+
teardownFns.forEach((fn) => fn());
|
|
138
|
+
teardownFns = [];
|
|
139
|
+
disconnectInViewObserver();
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// core/attributes/registry.js
|
|
144
|
+
var registry = /* @__PURE__ */ new Map();
|
|
145
|
+
function registerAttribute(name, handler) {
|
|
146
|
+
registry.set(name, handler);
|
|
147
|
+
}
|
|
148
|
+
function getAttributeHandler(name) {
|
|
149
|
+
return registry.get(name);
|
|
150
|
+
}
|
|
151
|
+
function bridgeComponent(el, tag, attrs = {}) {
|
|
152
|
+
el.setAttribute("data-velin-component", tag);
|
|
153
|
+
for (const [k, v] of Object.entries(attrs)) {
|
|
154
|
+
if (v != null) el.setAttribute(k, v);
|
|
155
|
+
}
|
|
156
|
+
return lazyDefine(tag);
|
|
157
|
+
}
|
|
158
|
+
function registerBuiltins() {
|
|
159
|
+
registerAttribute("velin-modal", {
|
|
160
|
+
enhance(el) {
|
|
161
|
+
bridgeComponent(el, "velin-modal", { open: el.getAttribute("velin-modal") || "" });
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
registerAttribute("velin-tabs", { enhance: (el) => bridgeComponent(el, "velin-tabs") });
|
|
165
|
+
registerAttribute("velin-accordion", { enhance: (el) => bridgeComponent(el, "velin-accordion") });
|
|
166
|
+
registerAttribute("velin-tooltip", {
|
|
167
|
+
enhance(el) {
|
|
168
|
+
const tip = el.getAttribute("velin-tooltip") || el.getAttribute("title") || "";
|
|
169
|
+
if (tip && el.hasAttribute("title")) el.removeAttribute("title");
|
|
170
|
+
if (el.tagName === "VELIN-TOOLTIP" || el.tagName === "VELIN-TOOLTIP-WC") {
|
|
171
|
+
el.setAttribute("content", tip);
|
|
172
|
+
return lazyDefine("velin-tooltip");
|
|
173
|
+
}
|
|
174
|
+
const wc = document.createElement("velin-tooltip");
|
|
175
|
+
wc.setAttribute("content", tip);
|
|
176
|
+
const parent = el.parentElement;
|
|
177
|
+
if (parent) {
|
|
178
|
+
parent.insertBefore(wc, el);
|
|
179
|
+
wc.appendChild(el);
|
|
180
|
+
}
|
|
181
|
+
return lazyDefine("velin-tooltip");
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
registerAttribute("velin-copy", {
|
|
185
|
+
enhance(el) {
|
|
186
|
+
const text = el.getAttribute("velin-copy") || el.textContent?.trim() || "";
|
|
187
|
+
if (!el.querySelector("velin-copy")) {
|
|
188
|
+
const wc = document.createElement("velin-copy");
|
|
189
|
+
wc.setAttribute("value", text);
|
|
190
|
+
if (el.tagName === "BUTTON") {
|
|
191
|
+
wc.append(...el.childNodes);
|
|
192
|
+
el.replaceWith(wc);
|
|
193
|
+
return lazyDefine("velin-copy");
|
|
194
|
+
}
|
|
195
|
+
el.appendChild(wc);
|
|
196
|
+
}
|
|
197
|
+
return lazyDefine("velin-copy");
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
registerAttribute("velin-counter", {
|
|
201
|
+
enhance(el) {
|
|
202
|
+
bridgeComponent(el, "velin-counter", {
|
|
203
|
+
value: el.getAttribute("velin-counter") || "0"
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
registerAttribute("velin-notify", {
|
|
208
|
+
async enhance(el) {
|
|
209
|
+
await lazyDefine("velin-toast");
|
|
210
|
+
el.addEventListener("click", () => {
|
|
211
|
+
const msg = el.getAttribute("velin-notify") || el.textContent || "";
|
|
212
|
+
document.dispatchEvent(
|
|
213
|
+
new CustomEvent("velin-toast-show", { detail: { message: msg, variant: el.dataset.variant || "info" } })
|
|
214
|
+
);
|
|
215
|
+
});
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
registerAttribute("velin-theme", {
|
|
219
|
+
enhance(el) {
|
|
220
|
+
const theme = el.getAttribute("velin-theme") || "toggle";
|
|
221
|
+
if (theme === "toggle") {
|
|
222
|
+
if (!el.querySelector("velin-theme-toggle")) {
|
|
223
|
+
el.appendChild(document.createElement("velin-theme-toggle"));
|
|
224
|
+
}
|
|
225
|
+
return lazyDefine("velin-theme-toggle");
|
|
226
|
+
}
|
|
227
|
+
document.documentElement.setAttribute("data-velin-theme", theme);
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
registerAttribute("velin-scroll-top", {
|
|
231
|
+
enhance(el) {
|
|
232
|
+
const raw = el.getAttribute("velin-scroll-top");
|
|
233
|
+
const threshold = raw && raw !== "true" ? raw : "300";
|
|
234
|
+
if (el.tagName === "VELIN-SCROLL-TOP") {
|
|
235
|
+
if (raw && raw !== "true") el.setAttribute("threshold", threshold);
|
|
236
|
+
return lazyDefine("velin-scroll-top");
|
|
237
|
+
}
|
|
238
|
+
let wc = document.querySelector("velin-scroll-top");
|
|
239
|
+
if (!wc) {
|
|
240
|
+
wc = document.createElement("velin-scroll-top");
|
|
241
|
+
wc.setAttribute("threshold", threshold);
|
|
242
|
+
(el === document.body || el === document.documentElement ? document.body : el).appendChild(wc);
|
|
243
|
+
}
|
|
244
|
+
return lazyDefine("velin-scroll-top");
|
|
245
|
+
}
|
|
246
|
+
});
|
|
247
|
+
registerAttribute("velin-progress", {
|
|
248
|
+
enhance(el) {
|
|
249
|
+
const ring = el.hasAttribute("ring");
|
|
250
|
+
if (ring) return bridgeComponent(el, "velin-progress-ring");
|
|
251
|
+
el.classList.add("velin-progress");
|
|
252
|
+
const val = parseInt(el.getAttribute("velin-progress") || "0", 10);
|
|
253
|
+
el.setAttribute("role", "progressbar");
|
|
254
|
+
el.setAttribute("aria-valuenow", String(val));
|
|
255
|
+
el.style.setProperty("--velin-progress", `${Math.min(100, val)}%`);
|
|
256
|
+
}
|
|
257
|
+
});
|
|
258
|
+
registerAttribute("velin-search", {
|
|
259
|
+
async enhance(el) {
|
|
260
|
+
if (el.tagName !== "VELIN-SEARCH") {
|
|
261
|
+
const host = document.createElement("velin-search");
|
|
262
|
+
host.setAttribute("index", el.getAttribute("data-search-index") || "/search-index.json");
|
|
263
|
+
el.replaceWith(host);
|
|
264
|
+
host.appendChild(el);
|
|
265
|
+
}
|
|
266
|
+
return lazyDefine("velin-search");
|
|
267
|
+
}
|
|
268
|
+
});
|
|
269
|
+
registerAttribute("velin-lazy", {
|
|
270
|
+
enhance(el) {
|
|
271
|
+
if (el.tagName === "IMG") {
|
|
272
|
+
el.loading = "lazy";
|
|
273
|
+
el.decoding = "async";
|
|
274
|
+
if (el.hasAttribute("velin-skeleton") || el.dataset.velinSkeleton) {
|
|
275
|
+
el.classList.add("velin-skeleton", "velin-skeleton--image");
|
|
276
|
+
el.addEventListener("load", () => el.classList.remove("velin-skeleton", "velin-skeleton--image"), { once: true });
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
});
|
|
281
|
+
registerAttribute("velin-skeleton", {
|
|
282
|
+
enhance(el) {
|
|
283
|
+
const variant = el.getAttribute("velin-skeleton") || "text";
|
|
284
|
+
el.classList.add("velin-skeleton", `velin-skeleton--${variant}`);
|
|
285
|
+
const hasText = Boolean(el.textContent?.trim()) && el.children.length > 0;
|
|
286
|
+
if (!hasText && !el.textContent?.trim()) {
|
|
287
|
+
el.setAttribute("aria-hidden", "true");
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
});
|
|
291
|
+
registerAttribute("velin-loading", {
|
|
292
|
+
enhance(el) {
|
|
293
|
+
el.classList.add("velin-spinner");
|
|
294
|
+
el.setAttribute("aria-busy", "true");
|
|
295
|
+
el.setAttribute("role", "status");
|
|
296
|
+
if (!el.getAttribute("aria-label")?.trim()) {
|
|
297
|
+
el.setAttribute("aria-label", "Loading");
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
});
|
|
301
|
+
registerAttribute("velin-grid", {
|
|
302
|
+
enhance(el) {
|
|
303
|
+
const cols = el.getAttribute("velin-grid") || "auto";
|
|
304
|
+
el.classList.add("velin-grid");
|
|
305
|
+
if (cols !== "auto") el.style.setProperty("--velin-grid-cols", cols);
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
registerAttribute("velin-anchor", {
|
|
309
|
+
enhance(el) {
|
|
310
|
+
if (!el.id && el.getAttribute("velin-anchor")) el.id = el.getAttribute("velin-anchor");
|
|
311
|
+
el.setAttribute("tabindex", "-1");
|
|
312
|
+
}
|
|
313
|
+
});
|
|
314
|
+
registerAttribute("velin-code", {
|
|
315
|
+
async enhance(el) {
|
|
316
|
+
const lang = el.getAttribute("velin-code") || el.getAttribute("language") || el.getAttribute("data-language") || "";
|
|
317
|
+
el.classList.add("velin-code-block");
|
|
318
|
+
if (lang && lang !== "true") {
|
|
319
|
+
el.dataset.language = lang;
|
|
320
|
+
if (!el.getAttribute("language")) el.setAttribute("language", lang);
|
|
321
|
+
}
|
|
322
|
+
if (!el.querySelector("[data-velin-copy]")) {
|
|
323
|
+
const btn = document.createElement("button");
|
|
324
|
+
btn.type = "button";
|
|
325
|
+
btn.className = "velin-code-block__copy velin-btn velin-btn--sm";
|
|
326
|
+
btn.textContent = "Copy";
|
|
327
|
+
btn.setAttribute("data-velin-copy", "");
|
|
328
|
+
btn.setAttribute("velin-copy", el.querySelector("code")?.textContent || el.textContent || "");
|
|
329
|
+
el.style.position = "relative";
|
|
330
|
+
el.appendChild(btn);
|
|
331
|
+
}
|
|
332
|
+
await lazyDefine("velin-copy");
|
|
333
|
+
const { initHighlight, highlightElement } = await import("./highlight-GJHHV4KM.js");
|
|
334
|
+
const immediate = el.getAttribute("data-velin-highlight") === "immediate" || typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
335
|
+
if (immediate) {
|
|
336
|
+
await highlightElement(el);
|
|
337
|
+
} else {
|
|
338
|
+
initHighlight(el, { root: el });
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
});
|
|
342
|
+
registerAttribute("velin-quote", {
|
|
343
|
+
enhance(el) {
|
|
344
|
+
if (el.tagName === "BLOCKQUOTE" || el.tagName === "Q") {
|
|
345
|
+
el.classList.add("velin-quote");
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
});
|
|
349
|
+
registerAttribute("velin-highlight", {
|
|
350
|
+
enhance(el) {
|
|
351
|
+
el.classList.add("velin-highlight");
|
|
352
|
+
}
|
|
353
|
+
});
|
|
354
|
+
for (const motion of ["velin-reveal", "velin-fade", "velin-slide", "velin-scale", "velin-parallax", "velin-hover", "velin-stagger", "velin-scroll"]) {
|
|
355
|
+
registerAttribute(motion, { enhance() {
|
|
356
|
+
} });
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
registerBuiltins();
|
|
360
|
+
var enhanced = /* @__PURE__ */ new WeakSet();
|
|
361
|
+
async function bootAttributes(root = document) {
|
|
362
|
+
const selector = [...registry.keys()].map((a) => `[${a}]`).join(",");
|
|
363
|
+
const elements = root.querySelectorAll(selector);
|
|
364
|
+
for (const el of elements) {
|
|
365
|
+
if (enhanced.has(el)) continue;
|
|
366
|
+
for (const attr of registry.keys()) {
|
|
367
|
+
if (!el.hasAttribute(attr)) continue;
|
|
368
|
+
const handler = registry.get(attr);
|
|
369
|
+
if (handler?.enhance) await handler.enhance(el);
|
|
370
|
+
}
|
|
371
|
+
enhanced.add(el);
|
|
372
|
+
}
|
|
373
|
+
initMotion({ root });
|
|
374
|
+
if (typeof HTMLElement !== "undefined") {
|
|
375
|
+
const { bindDeclarativeSearch } = await import("./velin-search-FDHEMCSO.js");
|
|
376
|
+
bindDeclarativeSearch(root);
|
|
377
|
+
if (!document.querySelector("velin-announcer")) {
|
|
378
|
+
const { getAnnouncer } = await import("./a11y-utils-IRC7LOPF.js");
|
|
379
|
+
getAnnouncer();
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
function listRegisteredAttributes() {
|
|
384
|
+
return [...registry.keys()];
|
|
385
|
+
}
|
|
386
|
+
export {
|
|
387
|
+
bootAttributes,
|
|
388
|
+
getAttributeHandler,
|
|
389
|
+
listRegisteredAttributes,
|
|
390
|
+
registerAttribute
|
|
391
|
+
};
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
// components/runtime/component-loaders.js
|
|
2
|
+
var COMPONENT_LOADERS = {
|
|
3
|
+
"velin-accordion": () => import("./velin-accordion-QAQO7BI7.js"),
|
|
4
|
+
"velin-announcer": () => import("./velin-announcer-PVTXXCWR.js"),
|
|
5
|
+
"velin-bottom-nav": () => import("./velin-bottom-nav-CTU6FFZV.js"),
|
|
6
|
+
"velin-carousel": () => import("./velin-carousel-ZTBANFQQ.js"),
|
|
7
|
+
"velin-code-block": () => import("./velin-code-block-CIAURDRJ.js"),
|
|
8
|
+
"velin-collapse": () => import("./velin-collapse-5XYBUIID.js"),
|
|
9
|
+
"velin-combobox": () => import("./velin-combobox-UGA56HP3.js"),
|
|
10
|
+
"velin-command": () => import("./velin-command-CKDNO4BW.js"),
|
|
11
|
+
"velin-copy": () => import("./velin-copy-G2TZ5YBB.js"),
|
|
12
|
+
"velin-countdown": () => import("./velin-countdown-7AIY66CU.js"),
|
|
13
|
+
"velin-counter": () => import("./velin-counter-L5FYJF7A.js"),
|
|
14
|
+
"velin-dialog": () => import("./velin-dialog-ELFOZIXZ.js"),
|
|
15
|
+
"velin-drawer": () => import("./velin-drawer-BE6TYN3H.js"),
|
|
16
|
+
"velin-dropdown": () => import("./velin-dropdown-PLUIFA5M.js"),
|
|
17
|
+
"velin-email": () => import("./velin-email-NTM6DG3V.js"),
|
|
18
|
+
"velin-icon": () => import("./velin-icon-WTFPG2DD.js"),
|
|
19
|
+
"velin-lightbox": () => import("./velin-lightbox-6E7CAATP.js"),
|
|
20
|
+
"velin-live-dot": () => import("./velin-live-dot-RJHX2DGY.js"),
|
|
21
|
+
"velin-menubar": () => import("./velin-menubar-I426AED2.js"),
|
|
22
|
+
"velin-modal": () => import("./velin-modal-AEOTZ67O.js"),
|
|
23
|
+
"velin-persist": () => import("./velin-persist-DFPL3QP4.js"),
|
|
24
|
+
"velin-popover": () => import("./velin-popover-HQW6Q2Y6.js"),
|
|
25
|
+
"velin-progress-ring": () => import("./velin-progress-ring-E4YRLZHH.js"),
|
|
26
|
+
"velin-rating": () => import("./velin-rating-6CDBI6DG.js"),
|
|
27
|
+
"velin-scroll-top": () => import("./velin-scroll-top-OHYVVHHY.js"),
|
|
28
|
+
"velin-scrollspy": () => import("./velin-scrollspy-OKCT4FDV.js"),
|
|
29
|
+
"velin-search": () => import("./velin-search-FDHEMCSO.js"),
|
|
30
|
+
"velin-secure-field": () => import("./velin-secure-field-OFNAXCDP.js"),
|
|
31
|
+
"velin-segmented-control": () => import("./velin-segmented-control-EKL4E3BL.js"),
|
|
32
|
+
"velin-sheet": () => import("./velin-sheet-R2Y67X6H.js"),
|
|
33
|
+
"velin-sparkline": () => import("./velin-sparkline-XVTFC6GE.js"),
|
|
34
|
+
"velin-stepper": () => import("./velin-stepper-7ECRUYHD.js"),
|
|
35
|
+
"velin-stepper-wc": () => import("./velin-stepper-7ECRUYHD.js"),
|
|
36
|
+
"velin-tabs": () => import("./velin-tabs-5UQ5ZVMV.js"),
|
|
37
|
+
"velin-theme-toggle": () => import("./velin-theme-toggle-32J2CBNC.js"),
|
|
38
|
+
"velin-toast": () => import("./velin-toast-RSF2IHT3.js"),
|
|
39
|
+
"velin-tooltip": () => import("./velin-tooltip-HVUOKNVX.js"),
|
|
40
|
+
"velin-tooltip-wc": () => import("./velin-tooltip-HVUOKNVX.js")
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
// components/runtime/index.js
|
|
44
|
+
var registry = /* @__PURE__ */ new Map();
|
|
45
|
+
var VELIN_TAG_RE = /^velin-[a-z0-9-]+$/;
|
|
46
|
+
function whenDefined(tagName) {
|
|
47
|
+
if (typeof customElements === "undefined") {
|
|
48
|
+
return Promise.reject(new Error("customElements not available"));
|
|
49
|
+
}
|
|
50
|
+
return customElements.whenDefined(tagName);
|
|
51
|
+
}
|
|
52
|
+
async function lazyDefine(tagName) {
|
|
53
|
+
const loader = COMPONENT_LOADERS[tagName];
|
|
54
|
+
if (!loader) {
|
|
55
|
+
throw new Error(`Unknown Velin component: ${tagName}`);
|
|
56
|
+
}
|
|
57
|
+
if (registry.has(tagName)) return registry.get(tagName);
|
|
58
|
+
const p = loader().then((mod) => {
|
|
59
|
+
const Cls = mod.default;
|
|
60
|
+
if (Cls && !customElements.get(tagName)) {
|
|
61
|
+
customElements.define(tagName, Cls);
|
|
62
|
+
}
|
|
63
|
+
return Cls;
|
|
64
|
+
});
|
|
65
|
+
registry.set(tagName, p);
|
|
66
|
+
return p;
|
|
67
|
+
}
|
|
68
|
+
async function register(tagNames) {
|
|
69
|
+
return Promise.all(tagNames.map((t) => lazyDefine(t)));
|
|
70
|
+
}
|
|
71
|
+
function collectTagsFromDOM(root) {
|
|
72
|
+
const tags = /* @__PURE__ */ new Set();
|
|
73
|
+
root.querySelectorAll("[data-velin-component]").forEach((el) => {
|
|
74
|
+
const name = el.getAttribute("data-velin-component");
|
|
75
|
+
if (name) tags.add(name.startsWith("velin-") ? name : `velin-${name}`);
|
|
76
|
+
});
|
|
77
|
+
for (const el of root.querySelectorAll("*")) {
|
|
78
|
+
const tag = el.tagName?.toLowerCase();
|
|
79
|
+
if (tag && VELIN_TAG_RE.test(tag) && COMPONENT_LOADERS[tag]) {
|
|
80
|
+
tags.add(tag);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
return tags;
|
|
84
|
+
}
|
|
85
|
+
async function bootFromDOM(root = document, options = {}) {
|
|
86
|
+
const tags = options.tags?.length ? new Set(options.tags) : collectTagsFromDOM(root);
|
|
87
|
+
const wcPromise = register([...tags]);
|
|
88
|
+
if (options.attributes) {
|
|
89
|
+
const { bootAttributes } = await import("./attributes-ADOKLKA7.js");
|
|
90
|
+
await bootAttributes(root);
|
|
91
|
+
}
|
|
92
|
+
if (options.highlight) {
|
|
93
|
+
const { initHighlight } = await import("./highlight-GJHHV4KM.js");
|
|
94
|
+
initHighlight(root);
|
|
95
|
+
}
|
|
96
|
+
if (options.haptic) {
|
|
97
|
+
const { VelinHapticObserver } = await import("./velin-haptic-4QQTM3RK.js");
|
|
98
|
+
new VelinHapticObserver().start(root instanceof Document ? root.body : root);
|
|
99
|
+
}
|
|
100
|
+
return wcPromise;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export {
|
|
104
|
+
COMPONENT_LOADERS,
|
|
105
|
+
whenDefined,
|
|
106
|
+
lazyDefine,
|
|
107
|
+
register,
|
|
108
|
+
bootFromDOM
|
|
109
|
+
};
|