@vanduo-oss/framework 1.4.5 → 1.5.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/CHANGELOG.md +82 -0
- package/README.md +23 -9
- package/css/primitives/primitives.css +257 -0
- package/css/utilities/print.css +19 -17
- package/css/vanduo.css +9 -3
- package/dist/build-info.json +3 -3
- package/dist/vanduo-core.css +19701 -0
- package/dist/vanduo-core.css.map +1 -0
- package/dist/vanduo-core.min.css +2 -0
- package/dist/vanduo-core.min.css.map +1 -0
- package/dist/vanduo.cjs.js +39 -19
- package/dist/vanduo.cjs.js.map +2 -2
- package/dist/vanduo.cjs.min.js +5 -5
- package/dist/vanduo.cjs.min.js.map +3 -3
- package/dist/vanduo.css +628 -33585
- package/dist/vanduo.css.map +1 -1
- package/dist/vanduo.d.ts +77 -0
- package/dist/vanduo.esm.js +39 -19
- package/dist/vanduo.esm.js.map +2 -2
- package/dist/vanduo.esm.min.js +5 -5
- package/dist/vanduo.esm.min.js.map +3 -3
- package/dist/vanduo.js +39 -19
- package/dist/vanduo.js.map +2 -2
- package/dist/vanduo.min.css +2 -2
- package/dist/vanduo.min.css.map +1 -1
- package/dist/vanduo.min.js +5 -5
- package/dist/vanduo.min.js.map +3 -3
- package/js/components/parallax.js +13 -7
- package/js/components/spotlight.js +46 -16
- package/package.json +7 -3
- package/css/components/doc-tabs.css +0 -38
- package/dist/icons/phosphor/bold/Phosphor-Bold.svg +0 -3057
- package/dist/icons/phosphor/bold/Phosphor-Bold.ttf +0 -0
- package/dist/icons/phosphor/bold/Phosphor-Bold.woff +0 -0
- package/dist/icons/phosphor/bold/Phosphor-Bold.woff2 +0 -0
- package/dist/icons/phosphor/bold/style.css +0 -4627
- package/dist/icons/phosphor/duotone/Phosphor-Duotone.svg +0 -3054
- package/dist/icons/phosphor/duotone/Phosphor-Duotone.ttf +0 -0
- package/dist/icons/phosphor/duotone/Phosphor-Duotone.woff +0 -0
- package/dist/icons/phosphor/duotone/Phosphor-Duotone.woff2 +0 -0
- package/dist/icons/phosphor/duotone/style.css +0 -12115
- package/dist/icons/phosphor/light/Phosphor-Light.svg +0 -3057
- package/dist/icons/phosphor/light/Phosphor-Light.ttf +0 -0
- package/dist/icons/phosphor/light/Phosphor-Light.woff +0 -0
- package/dist/icons/phosphor/light/Phosphor-Light.woff2 +0 -0
- package/dist/icons/phosphor/light/style.css +0 -4627
- package/dist/icons/phosphor/thin/Phosphor-Thin.svg +0 -3057
- package/dist/icons/phosphor/thin/Phosphor-Thin.ttf +0 -0
- package/dist/icons/phosphor/thin/Phosphor-Thin.woff +0 -0
- package/dist/icons/phosphor/thin/Phosphor-Thin.woff2 +0 -0
- package/dist/icons/phosphor/thin/style.css +0 -4627
- package/js/components/vd-hex.js +0 -838
- package/js/utils/hex-math.js +0 -233
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to the Vanduo Framework are documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
Full release notes — covering the framework, the documentation site, and
|
|
9
|
+
ecosystem packages side by side — live at <https://vanduo.dev/#changelog>.
|
|
10
|
+
|
|
11
|
+
## [1.5.0] - 2026-06-18
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
- **Layout primitives** — CSS-only `.vd-box`, `.vd-stack`, `.vd-inline`, `.vd-center`, `.vd-frame` (golden-ratio aspect box), `.vd-cover`, and `.vd-switcher` (responsive row→column without a media query) containers (`css/primitives/primitives.css`) with a `data-*` API consuming the existing Fibonacci spacing/radius and semantic tokens. The composition layer between utilities and components; zero JS, no new public tokens. Unit specs in `tests/unit/primitives.spec.ts`.
|
|
15
|
+
|
|
16
|
+
### Removed
|
|
17
|
+
- **Hex grid source** (`js/components/vd-hex.js`, `js/utils/hex-math.js`) and its tests. `VdHexGrid` was never bundled; it now ships solely as the standalone `@vanduo-oss/hex-grid` package.
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
- Removed the unused empty `packages/` workspace and `pnpm-workspace.yaml` (the esbuild build-approval remains in `package.json` `pnpm.allowedBuilds`).
|
|
21
|
+
|
|
22
|
+
## [1.4.6] - 2026-06-12
|
|
23
|
+
|
|
24
|
+
### Added
|
|
25
|
+
- Hand-written `dist/vanduo.d.ts` declaring the `Vanduo` runtime, exposed via the package `types` field.
|
|
26
|
+
- No-icons `vanduo-core.css` / `vanduo-core.min.css` build artifact (`@vanduo-oss/framework/css/core`) for consumers who ship their own icon set.
|
|
27
|
+
- This `CHANGELOG.md`.
|
|
28
|
+
- Playwright regression coverage for the parallax component and the print stylesheet.
|
|
29
|
+
|
|
30
|
+
### Changed
|
|
31
|
+
- `css/vanduo.css` now bundles only the `regular` + `fill` icon weights, cutting the minified stylesheet ~47%. Import `css/icons/icons-all.css` for all six weights.
|
|
32
|
+
- The build now ships only the icon weights the bundle references into `dist/icons/`; the full six-weight set still ships under `icons/` for `icons-all.css` consumers.
|
|
33
|
+
- `check:versions` now also validates `README.md`, `SECURITY.md`, `llms.txt`, and this changelog — not just the dist banners.
|
|
34
|
+
|
|
35
|
+
### Fixed
|
|
36
|
+
- Parallax speed/direction modifiers and the print stylesheet's element hide-list now use the canonical `vd-` prefix left behind by the 1.4.1 rename. The parallax JS still accepts the legacy unprefixed `parallax-*` / `data-speed` forms for back-compat.
|
|
37
|
+
|
|
38
|
+
### Removed
|
|
39
|
+
- Unused internal `doc-tabs` styles dropped from the bundle.
|
|
40
|
+
|
|
41
|
+
### Security
|
|
42
|
+
- Documented Subresource Integrity (`integrity` + `crossorigin`) for CDN tags; an ESLint rule now flags raw `innerHTML` assignment. The docs site ships a Content Security Policy restricting origins to self + jsDelivr.
|
|
43
|
+
|
|
44
|
+
## [1.4.5] - 2026-06-11
|
|
45
|
+
|
|
46
|
+
### Fixed
|
|
47
|
+
- Rounded-corner background bleed on draggable surfaces and input-group addons (`background-clip: padding-box`) at large `data-radius` presets.
|
|
48
|
+
|
|
49
|
+
## [1.4.4] - 2026-06-07
|
|
50
|
+
|
|
51
|
+
### Added
|
|
52
|
+
- Theme Switcher icon-menu variant (System / Light / Dark) with tooltips and keyboard navigation; cycle and select variants remain available.
|
|
53
|
+
|
|
54
|
+
## [1.4.3] - 2026-05-27
|
|
55
|
+
|
|
56
|
+
### Changed
|
|
57
|
+
- Music Player moved out of the core bundle into the ecosystem.
|
|
58
|
+
|
|
59
|
+
### Fixed
|
|
60
|
+
- Suggest autocomplete uses DOM-safe match highlighting.
|
|
61
|
+
- Code Snippet HTML highlighting no longer corrupts extracted markup.
|
|
62
|
+
|
|
63
|
+
## [1.4.2] - 2026-05-23
|
|
64
|
+
|
|
65
|
+
### Fixed
|
|
66
|
+
- Modal and dialog size tiers render as real desktop width steps matching the documented API.
|
|
67
|
+
|
|
68
|
+
## [1.4.1] - 2026-05-23
|
|
69
|
+
|
|
70
|
+
### Changed
|
|
71
|
+
- Strict `--vd-*` token API: legacy unprefixed token aliases removed (see [TOKENS.md](TOKENS.md) for migration).
|
|
72
|
+
- Removed the legacy font-preference migration path.
|
|
73
|
+
|
|
74
|
+
## [1.4.0] - 2026-05-19
|
|
75
|
+
|
|
76
|
+
### Changed
|
|
77
|
+
- Scoped runtime and lifecycle architecture; canonical `lowerCamelCase` registry names.
|
|
78
|
+
- Security and hygiene hardening across components.
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
Releases prior to 1.4.0 are documented at <https://vanduo.dev/#changelog>.
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Vanduo Framework v1.
|
|
1
|
+
# Vanduo Framework v1.5.0
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
4
|
<img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
|
|
@@ -25,29 +25,42 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
|
|
|
25
25
|
- Theme Switcher menu variant for icon-only light/dark/system selection in navbars
|
|
26
26
|
- Playwright-based browser coverage across Chromium, Firefox, and WebKit
|
|
27
27
|
|
|
28
|
-
## What's New in 1.
|
|
28
|
+
## What's New in 1.5.0
|
|
29
|
+
|
|
30
|
+
- **Layout primitives** — new CSS-only layout containers — `.vd-box`, `.vd-stack`, `.vd-inline`, `.vd-center`, `.vd-frame` (golden-ratio aspect box), `.vd-cover`, and `.vd-switcher` (container-query-free responsive row→column) — with a `data-*` API (`data-pad`, `data-gap`, `data-align`, `data-justify`, `data-round`, `data-ratio`…) that consumes the existing Fibonacci spacing/radius and semantic tokens. They are the composition layer between utilities and components — *utilities style an element; primitives arrange elements*. Zero JS, zero new public tokens.
|
|
31
|
+
- **Hex grid is now a standalone package** — `VdHexGrid` was never part of the bundle; its source has moved out of the framework tree. Install [`@vanduo-oss/hex-grid`](https://www.npmjs.com/package/@vanduo-oss/hex-grid) directly.
|
|
32
|
+
|
|
33
|
+
## Previous: 1.4.6
|
|
34
|
+
|
|
35
|
+
- **Leaner default CSS** — `css/vanduo.css` now bundles the `regular` + `fill` icon weights only (~45% smaller minified CSS). Need all six weights? Import `css/icons/icons-all.css`.
|
|
36
|
+
- **No-icons core build** — new `dist/vanduo-core.min.css` (`@vanduo-oss/framework/css/core`) drops the bundled icons entirely (~123 KB lighter) for consumers who ship their own icon set.
|
|
37
|
+
- **Smaller package** — the build ships only the icon weights the bundle actually uses into `dist/icons/`, instead of all six.
|
|
38
|
+
- **TypeScript types** — a hand-written `dist/vanduo.d.ts` for the `Vanduo` runtime, exposed via the `types` field.
|
|
39
|
+
- **In-repo changelog** — a new [CHANGELOG.md](CHANGELOG.md) (Keep a Changelog), now validated by `check:versions`.
|
|
40
|
+
- **Version-consistency now covers prose** — `pnpm check:versions` validates README, `SECURITY.md`, `llms.txt`, and `CHANGELOG.md`, not just the dist banners.
|
|
41
|
+
- **Lint guard** — raw `innerHTML` assignment is now flagged by ESLint outside the sanitization helpers.
|
|
42
|
+
- **Parallax & print fixes (now tested)** — speed/direction classes and the print stylesheet's hide-list now use the canonical `vd-` prefix, with new Playwright regression specs; removed the unused internal `doc-tabs` styles from the bundle.
|
|
43
|
+
|
|
44
|
+
## Previous: 1.4.5
|
|
29
45
|
|
|
30
46
|
- **Rounded-corner background fixes** — draggable surfaces and input-group addons use `background-clip: padding-box` so opaque fills no longer bleed past border arcs at large `data-radius` presets.
|
|
31
47
|
- **Background-clip audit** — Playwright `@audit` harness at `tests/audit/background-clip-audit.spec.ts` for regression checks.
|
|
32
48
|
- Normative API: [openspec/specs/draggable/spec.md](openspec/specs/draggable/spec.md).
|
|
33
49
|
|
|
34
|
-
## Previous: 1.4.4
|
|
35
|
-
|
|
36
|
-
- **Theme Switcher menu variant** — `.vd-theme-switcher[data-theme-ui="menu"]` opens an icon-only picker; option click applies the theme without cycling on toggle.
|
|
37
|
-
- Normative API: [openspec/specs/theme-switcher/spec.md](openspec/specs/theme-switcher/spec.md).
|
|
38
|
-
|
|
39
50
|
## Quick Start
|
|
40
51
|
|
|
41
52
|
### CDN
|
|
42
53
|
|
|
43
54
|
```html
|
|
44
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.
|
|
45
|
-
<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.
|
|
55
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.5.0/dist/vanduo.min.css">
|
|
56
|
+
<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.5.0/dist/vanduo.min.js"></script>
|
|
46
57
|
<script>
|
|
47
58
|
Vanduo.init();
|
|
48
59
|
</script>
|
|
49
60
|
```
|
|
50
61
|
|
|
62
|
+
> **Production tip:** harden CDN tags with Subresource Integrity — add `integrity="sha384-…" crossorigin="anonymous"`. Copy the hash from [jsdelivr.com](https://www.jsdelivr.com/) (per-file "SRI" button) or generate it with `openssl dgst -sha384 -binary dist/vanduo.min.js | openssl base64 -A`.
|
|
63
|
+
|
|
51
64
|
### Local Dist Files
|
|
52
65
|
|
|
53
66
|
```html
|
|
@@ -146,6 +159,7 @@ CI runs **Chromium Desktop smoke tests on pull requests** and the **full cross-b
|
|
|
146
159
|
|
|
147
160
|
## Release Notes
|
|
148
161
|
|
|
162
|
+
- Changelog: [CHANGELOG.md](CHANGELOG.md)
|
|
149
163
|
- Architecture notes: [ARCHITECTURE.md](ARCHITECTURE.md)
|
|
150
164
|
- Token model: [TOKENS.md](TOKENS.md)
|
|
151
165
|
- Theme Switcher spec: [openspec/specs/theme-switcher/spec.md](openspec/specs/theme-switcher/spec.md)
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Vanduo Framework - Layout Primitives
|
|
3
|
+
*
|
|
4
|
+
* Unstyled, single-responsibility layout containers that consume design tokens.
|
|
5
|
+
* They express a layout INTENT (vertical rhythm, wrapping row, centered column)
|
|
6
|
+
* rather than a single property — the composition layer between utilities and
|
|
7
|
+
* components: tokens -> (utilities | primitives) -> components.
|
|
8
|
+
*
|
|
9
|
+
* Override semantics: this file is imported BEFORE core/helpers.css and the
|
|
10
|
+
* utilities layer, so a spacing/gap/padding/radius utility on the same element
|
|
11
|
+
* (e.g. .vd-gap-5) always wins over a primitive's default on equal specificity.
|
|
12
|
+
* Each primitive sets a vd-prefixed internal custom property defaulted from a
|
|
13
|
+
* token; data-* attributes remap that property.
|
|
14
|
+
*
|
|
15
|
+
* .vd-box data-pad data-bg data-round data-border
|
|
16
|
+
* .vd-stack data-gap data-align
|
|
17
|
+
* .vd-inline data-gap data-align data-justify data-wrap
|
|
18
|
+
* .vd-center data-axis data-max
|
|
19
|
+
* .vd-frame data-ratio
|
|
20
|
+
* .vd-cover data-min data-gap
|
|
21
|
+
* .vd-switcher data-threshold data-gap
|
|
22
|
+
*
|
|
23
|
+
* @since 1.5.0
|
|
24
|
+
* @license MIT
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
28
|
+
* BOX — a single padded / optionally skinned surface
|
|
29
|
+
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
30
|
+
|
|
31
|
+
.vd-box {
|
|
32
|
+
--vd-box-pad: 0;
|
|
33
|
+
--vd-box-radius: 0;
|
|
34
|
+
|
|
35
|
+
display: block;
|
|
36
|
+
padding: var(--vd-box-pad);
|
|
37
|
+
border-radius: var(--vd-box-radius);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.vd-box[data-pad="0"] { --vd-box-pad: 0; }
|
|
41
|
+
.vd-box[data-pad="fib-1"] { --vd-box-pad: var(--vd-space-fib-1); }
|
|
42
|
+
.vd-box[data-pad="fib-2"] { --vd-box-pad: var(--vd-space-fib-2); }
|
|
43
|
+
.vd-box[data-pad="fib-3"] { --vd-box-pad: var(--vd-space-fib-3); }
|
|
44
|
+
.vd-box[data-pad="fib-5"] { --vd-box-pad: var(--vd-space-fib-5); }
|
|
45
|
+
.vd-box[data-pad="fib-8"] { --vd-box-pad: var(--vd-space-fib-8); }
|
|
46
|
+
.vd-box[data-pad="fib-13"] { --vd-box-pad: var(--vd-space-fib-13); }
|
|
47
|
+
.vd-box[data-pad="fib-21"] { --vd-box-pad: var(--vd-space-fib-21); }
|
|
48
|
+
.vd-box[data-pad="fib-34"] { --vd-box-pad: var(--vd-space-fib-34); }
|
|
49
|
+
.vd-box[data-pad="fib-55"] { --vd-box-pad: var(--vd-space-fib-55); }
|
|
50
|
+
|
|
51
|
+
/* Background — canonical semantic surfaces */
|
|
52
|
+
.vd-box[data-bg="primary"] { background-color: var(--vd-bg-primary); }
|
|
53
|
+
.vd-box[data-bg="secondary"] { background-color: var(--vd-bg-secondary); }
|
|
54
|
+
.vd-box[data-bg="tertiary"] { background-color: var(--vd-bg-tertiary); }
|
|
55
|
+
.vd-box[data-bg="dark"] { background-color: var(--vd-bg-dark); }
|
|
56
|
+
.vd-box[data-bg="darker"] { background-color: var(--vd-bg-darker); }
|
|
57
|
+
|
|
58
|
+
/* Radius — mirrors the .vd-rounded-* scale (uses data-round, NOT data-radius,
|
|
59
|
+
which is the global theme-customizer radius hook). */
|
|
60
|
+
.vd-box[data-round="none"] { --vd-box-radius: 0; }
|
|
61
|
+
.vd-box[data-round="sm"] { --vd-box-radius: var(--vd-radius-fib-2); }
|
|
62
|
+
.vd-box[data-round="md"] { --vd-box-radius: var(--vd-radius-fib-5); }
|
|
63
|
+
.vd-box[data-round="lg"] { --vd-box-radius: var(--vd-radius-fib-8); }
|
|
64
|
+
.vd-box[data-round="xl"] { --vd-box-radius: var(--vd-radius-fib-13); }
|
|
65
|
+
.vd-box[data-round="2xl"] { --vd-box-radius: var(--vd-radius-fib-21); }
|
|
66
|
+
.vd-box[data-round="full"] { --vd-box-radius: 9999px; }
|
|
67
|
+
|
|
68
|
+
.vd-box[data-border] { border: 1px solid var(--vd-border-color); }
|
|
69
|
+
|
|
70
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
71
|
+
* STACK — vertical rhythm (flex column with token-driven gap)
|
|
72
|
+
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
73
|
+
|
|
74
|
+
.vd-stack {
|
|
75
|
+
--vd-stack-gap: 0;
|
|
76
|
+
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
gap: var(--vd-stack-gap);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.vd-stack[data-gap="0"] { --vd-stack-gap: 0; }
|
|
83
|
+
.vd-stack[data-gap="fib-1"] { --vd-stack-gap: var(--vd-space-fib-1); }
|
|
84
|
+
.vd-stack[data-gap="fib-2"] { --vd-stack-gap: var(--vd-space-fib-2); }
|
|
85
|
+
.vd-stack[data-gap="fib-3"] { --vd-stack-gap: var(--vd-space-fib-3); }
|
|
86
|
+
.vd-stack[data-gap="fib-5"] { --vd-stack-gap: var(--vd-space-fib-5); }
|
|
87
|
+
.vd-stack[data-gap="fib-8"] { --vd-stack-gap: var(--vd-space-fib-8); }
|
|
88
|
+
.vd-stack[data-gap="fib-13"] { --vd-stack-gap: var(--vd-space-fib-13); }
|
|
89
|
+
.vd-stack[data-gap="fib-21"] { --vd-stack-gap: var(--vd-space-fib-21); }
|
|
90
|
+
.vd-stack[data-gap="fib-34"] { --vd-stack-gap: var(--vd-space-fib-34); }
|
|
91
|
+
.vd-stack[data-gap="fib-55"] { --vd-stack-gap: var(--vd-space-fib-55); }
|
|
92
|
+
|
|
93
|
+
.vd-stack[data-align="start"] { align-items: flex-start; }
|
|
94
|
+
.vd-stack[data-align="center"] { align-items: center; }
|
|
95
|
+
.vd-stack[data-align="end"] { align-items: flex-end; }
|
|
96
|
+
.vd-stack[data-align="stretch"] { align-items: stretch; }
|
|
97
|
+
|
|
98
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
99
|
+
* INLINE — horizontal cluster (wrapping flex row with token-driven gap)
|
|
100
|
+
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
101
|
+
|
|
102
|
+
.vd-inline {
|
|
103
|
+
--vd-inline-gap: 0;
|
|
104
|
+
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: row;
|
|
107
|
+
flex-wrap: wrap;
|
|
108
|
+
align-items: center;
|
|
109
|
+
gap: var(--vd-inline-gap);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.vd-inline[data-gap="0"] { --vd-inline-gap: 0; }
|
|
113
|
+
.vd-inline[data-gap="fib-1"] { --vd-inline-gap: var(--vd-space-fib-1); }
|
|
114
|
+
.vd-inline[data-gap="fib-2"] { --vd-inline-gap: var(--vd-space-fib-2); }
|
|
115
|
+
.vd-inline[data-gap="fib-3"] { --vd-inline-gap: var(--vd-space-fib-3); }
|
|
116
|
+
.vd-inline[data-gap="fib-5"] { --vd-inline-gap: var(--vd-space-fib-5); }
|
|
117
|
+
.vd-inline[data-gap="fib-8"] { --vd-inline-gap: var(--vd-space-fib-8); }
|
|
118
|
+
.vd-inline[data-gap="fib-13"] { --vd-inline-gap: var(--vd-space-fib-13); }
|
|
119
|
+
.vd-inline[data-gap="fib-21"] { --vd-inline-gap: var(--vd-space-fib-21); }
|
|
120
|
+
.vd-inline[data-gap="fib-34"] { --vd-inline-gap: var(--vd-space-fib-34); }
|
|
121
|
+
.vd-inline[data-gap="fib-55"] { --vd-inline-gap: var(--vd-space-fib-55); }
|
|
122
|
+
|
|
123
|
+
.vd-inline[data-align="start"] { align-items: flex-start; }
|
|
124
|
+
.vd-inline[data-align="center"] { align-items: center; }
|
|
125
|
+
.vd-inline[data-align="end"] { align-items: flex-end; }
|
|
126
|
+
.vd-inline[data-align="baseline"] { align-items: baseline; }
|
|
127
|
+
.vd-inline[data-align="stretch"] { align-items: stretch; }
|
|
128
|
+
|
|
129
|
+
.vd-inline[data-justify="start"] { justify-content: flex-start; }
|
|
130
|
+
.vd-inline[data-justify="center"] { justify-content: center; }
|
|
131
|
+
.vd-inline[data-justify="end"] { justify-content: flex-end; }
|
|
132
|
+
.vd-inline[data-justify="between"] { justify-content: space-between; }
|
|
133
|
+
.vd-inline[data-justify="around"] { justify-content: space-around; }
|
|
134
|
+
.vd-inline[data-justify="evenly"] { justify-content: space-evenly; }
|
|
135
|
+
|
|
136
|
+
.vd-inline[data-wrap="nowrap"] { flex-wrap: nowrap; }
|
|
137
|
+
|
|
138
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
139
|
+
* CENTER — center a column horizontally (data-max) and/or its content (data-axis)
|
|
140
|
+
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
141
|
+
|
|
142
|
+
.vd-center {
|
|
143
|
+
--vd-center-max: none;
|
|
144
|
+
|
|
145
|
+
display: block;
|
|
146
|
+
max-width: var(--vd-center-max);
|
|
147
|
+
margin-inline: auto;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.vd-center[data-max="fib-377"] { --vd-center-max: 377px; }
|
|
151
|
+
.vd-center[data-max="fib-610"] { --vd-center-max: 610px; }
|
|
152
|
+
.vd-center[data-max="fib-987"] { --vd-center-max: 987px; }
|
|
153
|
+
|
|
154
|
+
.vd-center[data-axis="both"] {
|
|
155
|
+
display: flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
justify-content: center;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.vd-center[data-axis="horizontal"] {
|
|
161
|
+
display: flex;
|
|
162
|
+
justify-content: center;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.vd-center[data-axis="vertical"] {
|
|
166
|
+
display: flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
171
|
+
* FRAME — a fixed aspect-ratio box (golden by default); media children cover it
|
|
172
|
+
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
173
|
+
|
|
174
|
+
.vd-frame {
|
|
175
|
+
--vd-frame-ratio: 1.618;
|
|
176
|
+
|
|
177
|
+
display: block;
|
|
178
|
+
overflow: hidden;
|
|
179
|
+
aspect-ratio: var(--vd-frame-ratio);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.vd-frame > img,
|
|
183
|
+
.vd-frame > video,
|
|
184
|
+
.vd-frame > canvas,
|
|
185
|
+
.vd-frame > svg,
|
|
186
|
+
.vd-frame > iframe {
|
|
187
|
+
display: block;
|
|
188
|
+
width: 100%;
|
|
189
|
+
height: 100%;
|
|
190
|
+
object-fit: cover;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.vd-frame[data-ratio="golden"] { --vd-frame-ratio: 1.618; }
|
|
194
|
+
.vd-frame[data-ratio="golden-portrait"] { --vd-frame-ratio: 0.618; }
|
|
195
|
+
.vd-frame[data-ratio="square"] { --vd-frame-ratio: 1; }
|
|
196
|
+
.vd-frame[data-ratio="16-9"] { --vd-frame-ratio: 1.7778; }
|
|
197
|
+
.vd-frame[data-ratio="4-3"] { --vd-frame-ratio: 1.3333; }
|
|
198
|
+
.vd-frame[data-ratio="3-2"] { --vd-frame-ratio: 1.5; }
|
|
199
|
+
.vd-frame[data-ratio="21-9"] { --vd-frame-ratio: 2.3333; }
|
|
200
|
+
|
|
201
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
202
|
+
* COVER — a min-height region that vertically centers its content
|
|
203
|
+
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
204
|
+
|
|
205
|
+
.vd-cover {
|
|
206
|
+
--vd-cover-min: 100vh;
|
|
207
|
+
--vd-cover-gap: 0;
|
|
208
|
+
|
|
209
|
+
display: flex;
|
|
210
|
+
flex-direction: column;
|
|
211
|
+
justify-content: center;
|
|
212
|
+
gap: var(--vd-cover-gap);
|
|
213
|
+
min-height: var(--vd-cover-min);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.vd-cover[data-min="screen"] { --vd-cover-min: 100vh; }
|
|
217
|
+
.vd-cover[data-min="half"] { --vd-cover-min: 50vh; }
|
|
218
|
+
.vd-cover[data-min="fib-610"] { --vd-cover-min: 610px; }
|
|
219
|
+
.vd-cover[data-min="fib-987"] { --vd-cover-min: 987px; }
|
|
220
|
+
|
|
221
|
+
.vd-cover[data-gap="fib-3"] { --vd-cover-gap: var(--vd-space-fib-3); }
|
|
222
|
+
.vd-cover[data-gap="fib-5"] { --vd-cover-gap: var(--vd-space-fib-5); }
|
|
223
|
+
.vd-cover[data-gap="fib-8"] { --vd-cover-gap: var(--vd-space-fib-8); }
|
|
224
|
+
.vd-cover[data-gap="fib-13"] { --vd-cover-gap: var(--vd-space-fib-13); }
|
|
225
|
+
.vd-cover[data-gap="fib-21"] { --vd-cover-gap: var(--vd-space-fib-21); }
|
|
226
|
+
.vd-cover[data-gap="fib-34"] { --vd-cover-gap: var(--vd-space-fib-34); }
|
|
227
|
+
|
|
228
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
229
|
+
* SWITCHER — auto row→column at a container-width threshold (no media query).
|
|
230
|
+
* When the container is wider than the threshold the children share a row;
|
|
231
|
+
* narrower and they each take a full row. Thresholds are Fibonacci by design.
|
|
232
|
+
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
233
|
+
|
|
234
|
+
.vd-switcher {
|
|
235
|
+
--vd-switcher-threshold: 610px;
|
|
236
|
+
--vd-switcher-gap: 0;
|
|
237
|
+
|
|
238
|
+
display: flex;
|
|
239
|
+
flex-wrap: wrap;
|
|
240
|
+
gap: var(--vd-switcher-gap);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.vd-switcher > * {
|
|
244
|
+
flex-grow: 1;
|
|
245
|
+
flex-basis: calc((var(--vd-switcher-threshold) - 100%) * 999);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.vd-switcher[data-threshold="fib-377"] { --vd-switcher-threshold: 377px; }
|
|
249
|
+
.vd-switcher[data-threshold="fib-610"] { --vd-switcher-threshold: 610px; }
|
|
250
|
+
.vd-switcher[data-threshold="fib-987"] { --vd-switcher-threshold: 987px; }
|
|
251
|
+
|
|
252
|
+
.vd-switcher[data-gap="fib-3"] { --vd-switcher-gap: var(--vd-space-fib-3); }
|
|
253
|
+
.vd-switcher[data-gap="fib-5"] { --vd-switcher-gap: var(--vd-space-fib-5); }
|
|
254
|
+
.vd-switcher[data-gap="fib-8"] { --vd-switcher-gap: var(--vd-space-fib-8); }
|
|
255
|
+
.vd-switcher[data-gap="fib-13"] { --vd-switcher-gap: var(--vd-space-fib-13); }
|
|
256
|
+
.vd-switcher[data-gap="fib-21"] { --vd-switcher-gap: var(--vd-space-fib-21); }
|
|
257
|
+
.vd-switcher[data-gap="fib-34"] { --vd-switcher-gap: var(--vd-space-fib-34); }
|
package/css/utilities/print.css
CHANGED
|
@@ -61,38 +61,40 @@
|
|
|
61
61
|
page-break-inside: avoid;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
/* Hide non-essential
|
|
65
|
-
.navbar,
|
|
66
|
-
.navbar-menu,
|
|
67
|
-
.navbar-toggle,
|
|
68
|
-
.navbar-overlay,
|
|
69
|
-
.sidenav,
|
|
70
|
-
.
|
|
71
|
-
.modal
|
|
72
|
-
.
|
|
73
|
-
.
|
|
74
|
-
.
|
|
75
|
-
.
|
|
64
|
+
/* Hide non-essential UI chrome */
|
|
65
|
+
.vd-navbar,
|
|
66
|
+
.vd-navbar-menu,
|
|
67
|
+
.vd-navbar-toggle,
|
|
68
|
+
.vd-navbar-overlay,
|
|
69
|
+
.vd-sidenav,
|
|
70
|
+
.vd-sidenav-overlay,
|
|
71
|
+
.vd-modal,
|
|
72
|
+
.vd-modal-backdrop,
|
|
73
|
+
.vd-tooltip,
|
|
74
|
+
.vd-dropdown-menu,
|
|
75
|
+
.vd-btn-group,
|
|
76
|
+
.vd-pagination,
|
|
76
77
|
.skip-link,
|
|
77
|
-
.d-print-none {
|
|
78
|
+
.vd-d-print-none {
|
|
78
79
|
display: none !important;
|
|
79
80
|
}
|
|
80
81
|
|
|
81
82
|
/* Show print-only elements */
|
|
82
|
-
.d-print-block {
|
|
83
|
+
.vd-d-print-block {
|
|
83
84
|
display: block !important;
|
|
84
85
|
}
|
|
85
86
|
|
|
86
|
-
.d-print-inline {
|
|
87
|
+
.vd-d-print-inline {
|
|
87
88
|
display: inline !important;
|
|
88
89
|
}
|
|
89
90
|
|
|
90
|
-
.d-print-inline-block {
|
|
91
|
+
.vd-d-print-inline-block {
|
|
91
92
|
display: inline-block !important;
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
/* Container adjustments */
|
|
95
|
-
.container
|
|
96
|
+
.vd-container,
|
|
97
|
+
.vd-container-responsive {
|
|
96
98
|
width: 100% !important;
|
|
97
99
|
max-width: none !important;
|
|
98
100
|
padding: 0 !important;
|
package/css/vanduo.css
CHANGED
|
@@ -12,10 +12,17 @@
|
|
|
12
12
|
@import url('core/typography.css');
|
|
13
13
|
@import url('core/tokens.css');
|
|
14
14
|
@import url('core/grid.css');
|
|
15
|
+
|
|
16
|
+
/* Layer 1.5: Layout primitives (Box, Stack, Inline, Center).
|
|
17
|
+
Imported BEFORE helpers so the spacing/gap/padding/radius utilities that follow
|
|
18
|
+
override a primitive default on equal specificity (utilities stay the escape
|
|
19
|
+
hatch). Primitive token references resolve order-independently from :root. */
|
|
20
|
+
@import url('primitives/primitives.css');
|
|
21
|
+
|
|
15
22
|
@import url('core/helpers.css');
|
|
16
23
|
|
|
17
|
-
/* Layer 2: Icons */
|
|
18
|
-
@import url('icons/icons
|
|
24
|
+
/* Layer 2: Icons (regular + fill; import css/icons/icons-all.css for all 6 weights) */
|
|
25
|
+
@import url('icons/icons.css');
|
|
19
26
|
|
|
20
27
|
/* Layer 3: Utilities */
|
|
21
28
|
@import url('utilities/shadow.css');
|
|
@@ -55,7 +62,6 @@
|
|
|
55
62
|
@import url('components/theme-customizer.css');
|
|
56
63
|
@import url('components/theme-switcher.css');
|
|
57
64
|
@import url('components/image-box.css');
|
|
58
|
-
@import url('components/doc-tabs.css');
|
|
59
65
|
@import url('components/doc-search.css');
|
|
60
66
|
@import url('components/draggable.css');
|
|
61
67
|
@import url('components/flow.css');
|
package/dist/build-info.json
CHANGED