@getvitops/core 3.0.0 → 4.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/CHANGELOG.md +182 -0
- package/css/patterns/consent.css +14 -3
- package/css/patterns/sitenav.css +145 -79
- package/css/patterns/tree.css +118 -8
- package/dist/consent.js +1 -1
- package/dist/elements.js +25 -25
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,187 @@
|
|
|
1
1
|
# @getvitops/core
|
|
2
2
|
|
|
3
|
+
## 4.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- c6b99e7: Consent is now demand-driven: the banner appears when something actually needs permission, not on every first visit.
|
|
8
|
+
|
|
9
|
+
Previously, enabling the gate showed a banner to every new visitor regardless of what the site did — including sites whose only analytics provider was cookieless, where there was nothing to consent to. The build decided whether the machinery shipped and the runtime showed the banner because no cookie existed yet.
|
|
10
|
+
|
|
11
|
+
Now those are two separate facts. The build decides what the banner _can_ ask (rows in the markup); the runtime decides what it _does_ ask. A gated tag registers its demand when it reaches its loading strategy, and `<color-scheme-toggle>` registers `preferences` when a visitor picks a scheme. A site that gates nothing never interrupts anyone.
|
|
12
|
+
|
|
13
|
+
**Breaking — consent cookie schema (v1 → v2).** Consent is now recorded per category as granted / declined / **not yet asked**. The third state is what lets a later demand ask about a category an earlier prompt didn't cover: accepting an analytics banner no longer silently declines preferences. Every stored v1 choice is invalid and re-prompts once — a v1 cookie asserted a definite answer for categories the visitor was never shown.
|
|
14
|
+
|
|
15
|
+
**Breaking — `ConsentApi`.**
|
|
16
|
+
- `needed()` now means "something demanded a category the visitor hasn't answered", not "no cookie yet". A custom banner calling it will now stay hidden until something asks.
|
|
17
|
+
- `ConsentState.decided` (a single boolean) is gone. Use `decidedFor(state, category)`, or `undecidedCategories(state)`.
|
|
18
|
+
- New: `require(category)` registers a demand and reports whether it is granted; `request(category)` resolves once the visitor answers it; `demanded()` lists what has asked so far.
|
|
19
|
+
- `acceptAll()` / `rejectAll()` still mean every optional category. The banner no longer routes its buttons through them — "Accept" applies to the categories on screen.
|
|
20
|
+
|
|
21
|
+
**Breaking — `<color-scheme-toggle>` persistence.** The chosen scheme still applies immediately, but writing it to `localStorage` now waits on the `preferences` category **when the site has a consent gate**. Sites without `consent` enabled are unaffected and keep storing as before. If your site enables consent and offers a theme toggle, make sure `preferences` is among the offered categories (it is by default).
|
|
22
|
+
|
|
23
|
+
**Changed — offered categories.** `consent.categories` defaults to `['analytics', 'preferences']` (plus `marketing` when a configured tag needs it) rather than only what analytics detection could see. An unused row is hidden markup, so offering broadly costs nothing and covers `data-consent` markup no build-time scan can find. Pass `categories` explicitly to narrow it.
|
|
24
|
+
|
|
25
|
+
**Added — `<Head />` emits a small inline consent stub** when the gate is on. `consent.js` and `elements.js` are both deferred with no ordering between them, so without it a theme toggle could be clicked before the gate existed, read "no gate", and store. The stub answers `false` and queues, and the runtime replays the queue on load.
|
|
26
|
+
|
|
27
|
+
**Fixed — the generated cookie notice** now discloses the stored display preference when `preferences` is offered, and no longer promises a banner "shown when you first visit", which is no longer how the banner works.
|
|
28
|
+
|
|
29
|
+
- Every custom element now carries the `wc-` prefix. **Two renames affect existing markup:**
|
|
30
|
+
- `<color-scheme-toggle>` → **`<wc-color-scheme-toggle>`**
|
|
31
|
+
- `<wc-multifield>` → **`<wc-multi-field>`**
|
|
32
|
+
|
|
33
|
+
Update your templates. An unknown element name is not an error — the browser treats it as an
|
|
34
|
+
inert `HTMLUnknownElement` — so a missed rename shows up as a control that renders and simply
|
|
35
|
+
never works, with nothing in the console.
|
|
36
|
+
|
|
37
|
+
`<wc-multifield>` was itself renamed in 3.0 (from `<multi-field>`), and hyphenating it now
|
|
38
|
+
means the tag matches its pattern name and its Bricks element everywhere else in the toolchain;
|
|
39
|
+
`3.0` shipped the inconsistency by accident.
|
|
40
|
+
|
|
41
|
+
**Unchanged:** the Bricks element keys (`vitops-color-scheme-toggle`, `vitops-multi-field`), so
|
|
42
|
+
elements already placed on a Bricks page keep working; the custom properties; and the events.
|
|
43
|
+
|
|
44
|
+
The remaining renames are prefix-only and reach no consumer: `<color-wheel>`, `<icon-picker>`,
|
|
45
|
+
`<oklch-color-picker>` and `<typography-config>` are registered but shipped in **no bundle** (the
|
|
46
|
+
editor-v2 track), so those tags were already inert in a consumer project — `vitops docs components`
|
|
47
|
+
now says so per element rather than leaving it to be discovered.
|
|
48
|
+
|
|
49
|
+
### Minor Changes
|
|
50
|
+
|
|
51
|
+
- 14813fa: Add `<wc-tree>`, and a schema walker that feeds it.
|
|
52
|
+
|
|
53
|
+
`<wc-tree>` is progressive enhancement for the existing `.tree` pattern: given a nested
|
|
54
|
+
`<details>` disclosure tree it adds a filter, expand-all / collapse-all, and hash deep-linking.
|
|
55
|
+
It ships in `elements.js`.
|
|
56
|
+
|
|
57
|
+
`@getvitops/astro` gains `./components/Tree.astro` and `./components/tree.ts` (its `TreeItem`
|
|
58
|
+
type) to build that markup from data. As with every wrapper over a web component, `<Tree />`
|
|
59
|
+
emits the `<wc-tree>` tag itself with the accessible fallback inside — so `<Tree items={…} />`
|
|
60
|
+
is the whole call, and wrapping it in your own `<wc-tree>` nests two elements on one tree.
|
|
61
|
+
|
|
62
|
+
The slotted markup is the whole content and works without it — every node readable, expandable
|
|
63
|
+
and linkable — so the element only adds what CSS cannot do. Four things worth knowing:
|
|
64
|
+
- **The toolbar is generated, never authored.** A search field that does nothing is worse than
|
|
65
|
+
no search field, so the controls exist only once the element upgrades.
|
|
66
|
+
- **Deep-linking is the non-obvious one.** A node inside a closed `<details>` has no layout box,
|
|
67
|
+
so the browser's own fragment navigation finds nothing and silently stays at the top of the
|
|
68
|
+
page. `<wc-tree>` opens the target's ancestors — and the target's own disclosure — then scrolls.
|
|
69
|
+
- **Filtering matches a node's own label and description, never its subtree's text.** The obvious
|
|
70
|
+
`textContent` implementation makes every ancestor of a hit match, so the root matches any query
|
|
71
|
+
and the filter narrows nothing. That decision lives in a pure, tested module (`matchTree`)
|
|
72
|
+
rather than in the DOM wiring.
|
|
73
|
+
- **It initialises even when upgraded mid-insertion.** An element connected during an
|
|
74
|
+
`innerHTML` write — a view-transition swap, a client-side navigation — has no children yet
|
|
75
|
+
(measured: zero). Setup retries once the insertion completes, because the failure mode was
|
|
76
|
+
silent: no toolbar, no filter, no deep link, no error.
|
|
77
|
+
|
|
78
|
+
`patterns/tree.css` now supports two markup shapes: the item may be the `<details>` (the
|
|
79
|
+
pattern's original contract) or an `<li class="tree__item">` wrapping one, which is what gives
|
|
80
|
+
assistive tech list position and depth.
|
|
81
|
+
|
|
82
|
+
**`.tree` indent is fixed and now fluid**, which matters for any deep tree. Three separate leaks
|
|
83
|
+
compounded, each invisible in the CSS and each charging roughly one extra indent per level:
|
|
84
|
+
- the rule set both `margin-inline-start` and `padding-inline-start` to `--tree-indent`;
|
|
85
|
+
- `.tree { padding: var(--_p) }` applied to every nested `.tree`, not just the outermost — on all
|
|
86
|
+
four sides, so it narrowed from the end as well;
|
|
87
|
+
- `patterns/details.css` gives every non-summary child of a `<details>`
|
|
88
|
+
`margin-inline: var(--_content-margin)`, and its `details, .details` selector takes `:is()`
|
|
89
|
+
specificity under CSS nesting (**0-1-1**), so `.tree { margin: 0 }` at 0-1-0 _loses_ to it. A
|
|
90
|
+
nested tree is exactly such a child.
|
|
91
|
+
|
|
92
|
+
Measured in a browser: **41px per level against a 24px design**, so a 9-deep tree spent 382px on
|
|
93
|
+
indent and left its deepest label 162px wide. Now 24px per level, 198px total, and 653px of label.
|
|
94
|
+
The nested rule resets both box axes before applying the one indent it owes, and the default is
|
|
95
|
+
`clamp(0.75rem, 2.5vw, 1.5rem)` — 12px on a phone, 24px on a desktop — because a tree's depth is a
|
|
96
|
+
property of the data and cannot be known when the pattern is written. `--tree-indent` still
|
|
97
|
+
overrides it, and the `--lines` elbow derives from the same resolved value so the two cannot
|
|
98
|
+
disagree.
|
|
99
|
+
|
|
100
|
+
**Leaf rows now align with their branch siblings.** A branch spends a toggle column on its chevron
|
|
101
|
+
before its label; a leaf has none, so every leaf label sat one full column (24px, measured) to the
|
|
102
|
+
inline-start of its siblings and nothing at a given depth lined up. `.tree` exposes
|
|
103
|
+
`--_node-indent` (the toggle column) and `--_leaf-indent` (what a row without a toggle owes to
|
|
104
|
+
reach the same label column); `.tree__content` and `.tree__desc` both read the latter rather than
|
|
105
|
+
re-deriving the sum.
|
|
106
|
+
|
|
107
|
+
`<wc-tree>` also wraps its generated filter in `.input-group`, because `forms.css` styles text
|
|
108
|
+
controls as `.form-group > input` / `.input-group > input` — a bare `<input>` rendered with the
|
|
109
|
+
browser's 2px inset border and square corners next to the framework's own rounded controls.
|
|
110
|
+
|
|
111
|
+
`schemaTreeNodes(schema, { idPrefix, maxDepth, prune })` is new in `@getvitops/generator`: it walks
|
|
112
|
+
a JSON Schema — the same walk behind the `authoring.md` / `config.md` references — and returns tree
|
|
113
|
+
**data**, not markup, so each medium renders it (markdown for agents, an accessible `<details>`
|
|
114
|
+
tree for a site). Field ids are dotted config paths (`site.analytics.clarityId`), so any field can
|
|
115
|
+
be linked to directly.
|
|
116
|
+
|
|
117
|
+
`prune` exists for a specific hazard. The project config declares `designSystem.themes` as a
|
|
118
|
+
looser shape than `DesignSystemSchema`, because the full one is applied separately by
|
|
119
|
+
`resolveTheme` — so its embedded copy is an **approximation**, and measurably missing the
|
|
120
|
+
descriptions for `colors`, `colors.palette`, `colors.roles` and `colors.utilities`. Anything
|
|
121
|
+
rendering that copy as the token reference would silently document the colour system less well
|
|
122
|
+
than the toolchain already does; `prune` lets a caller stop at the wrapper and render `jsonSchema`
|
|
123
|
+
alongside instead.
|
|
124
|
+
|
|
125
|
+
`renderInlineMarkdown()` is exported for schema description text. It **lifts code spans out before
|
|
126
|
+
applying emphasis**, and that ordering is load-bearing rather than tidy: `colors.utilities`
|
|
127
|
+
describes its families as `` `bg-*` ``, `` `text-*` ``, `` `border-*` `` — literal asterisk
|
|
128
|
+
_wildcards_. Run emphasis over the raw string and the `*` closing `bg-*` pairs with the one
|
|
129
|
+
closing `text-*`, italicising the text between two unrelated utilities and eating both asterisks,
|
|
130
|
+
leaving prose that names families which don't exist. It also now renders single-asterisk emphasis,
|
|
131
|
+
which the schema does use (`*presentation*`, `*domain properties*`) and which previously printed
|
|
132
|
+
the asterisks literally.
|
|
133
|
+
|
|
134
|
+
Also fixed: `config.md` claimed "Only the wrapper is listed here" under `designSystem` and then
|
|
135
|
+
emitted the entire token schema anyway — `themes.<name>` _is_ a design system, so the walk
|
|
136
|
+
descended into it. It now stops at the wrapper and delegates to `authoring.md` as it always said
|
|
137
|
+
it did.
|
|
138
|
+
|
|
139
|
+
### Patch Changes
|
|
140
|
+
|
|
141
|
+
- 14813fa: Fix `<wc-entries>`, `<wc-carousel>` and `<wc-marquee>` silently failing to enhance when inserted
|
|
142
|
+
dynamically.
|
|
143
|
+
|
|
144
|
+
All three parse their slotted markup in `connectedCallback` and return early when they find
|
|
145
|
+
nothing. That is fine when `elements.js` loads as a deferred module, because the document is
|
|
146
|
+
fully parsed before any definition registers. But an element upgraded _during_ insertion is
|
|
147
|
+
connected **before its children exist** — verified: an `innerHTML` write runs
|
|
148
|
+
`connectedCallback` with zero children.
|
|
149
|
+
|
|
150
|
+
So on an Astro view-transition swap, a client-side navigation, an `innerHTML` write or a cloned
|
|
151
|
+
template, `<wc-entries>` never built its table, `<wc-carousel>` never cloned its slides or
|
|
152
|
+
started autoplay, and `<wc-marquee>` never took over from the CSS-only path. Nothing errored;
|
|
153
|
+
the un-enhanced fallback just stayed on screen, which is why this went unnoticed.
|
|
154
|
+
|
|
155
|
+
Initialisation is now expressed as a function that reports whether it found its markup, and is
|
|
156
|
+
retried once the insertion completes (`initFromLightDom`). Setup is guarded so a retry after a
|
|
157
|
+
genuinely empty state can't double-apply — an `<wc-entries>` building its table twice would
|
|
158
|
+
have been the obvious way to fix this badly.
|
|
159
|
+
|
|
160
|
+
`<wc-tree>` uses the same helper. If you write a light-DOM component, use it too; the hazard is
|
|
161
|
+
documented in `web-components/utils/upgrade.ts`.
|
|
162
|
+
|
|
163
|
+
- a9d7916: Fix `sitenav` shipping its drawer geometry into its navbar state.
|
|
164
|
+
|
|
165
|
+
A `.sitenav` carrying both a drawer-direction modifier and a breakpoint promotion rendered its navbar one full panel-width toward the inline-end at and above the promotion width — off the page, with a horizontal scrollbar and anything laid out after the panel pushed out of view. Reported downstream against `sitenav--bp-lg sitenav--drawer-end`; it affected every `--bp-*` value and both drawer directions.
|
|
166
|
+
|
|
167
|
+
One cause, three symptoms. `@container` contributes no specificity, so when the four per-breakpoint blocks were consolidated into a single style query in 3.0.0, the wide-state reset lost the `.sitenav--bp-*` class that had been winning it the tie. Every narrow-state rule with a heavier selector then won _inside the wide state_:
|
|
168
|
+
- `.sitenav--drawer-end .sitenav__panel` (0,2,0) beat the navbar's `translate: none` (0,1,0) — the reported bug.
|
|
169
|
+
- The mobile accordion's `.sitenav__item--branch > .sitenav__submenu { overflow: hidden }` (0,2,0) beat the dropdown's `overflow: visible`, which **clipped away every third-level megamenu** at width. Its `padding-inline-start: 1rem` leaked in the same way.
|
|
170
|
+
- The wide block's counter-rule for depth caps beat the base `.sitenav__submenu { display: flex }`, so a `sitenav__item--desktop-branch` dropdown lost its column direction and gap.
|
|
171
|
+
|
|
172
|
+
The drawer and the navbar are now mutually exclusive branches of the same style query — `@container style(--_sitenav-wide: 0)` alongside the existing `: 1` — so there is no cascade contest to lose rather than a contest that is currently being won. A new test in core asserts the invariant across every two-state pattern.
|
|
173
|
+
|
|
174
|
+
**Two visible changes at width, both intended:** dropdown padding is now symmetric `0.5rem` (it was `1rem` on the inline-start side only), and depth-capped dropdowns regain their `0.25rem` gap.
|
|
175
|
+
|
|
176
|
+
Also fixed in the same pattern: `.sitenav__panel` never undid the UA `[popover]` sheet's `margin: auto` and `height: fit-content`, so `inset-block: 0` bought nothing and the drawer rendered as a content-height card floating in the vertical centre instead of filling the edge. It is now a full-height drawer, and the auto margins no longer absorb free space when a promoted `.sitenav` is stretched rather than content-sized.
|
|
177
|
+
|
|
178
|
+
Note the narrow state now also depends on `@container style()` (Chrome 111 / Safari 18 / Firefox 128), which the wide state already required. On an older engine the sitenav degrades to a popover holding an expanded link list — usable and accessible, but neither drawer nor navbar.
|
|
179
|
+
|
|
180
|
+
- Updated dependencies [c6b99e7]
|
|
181
|
+
- Updated dependencies [f7bc0a0]
|
|
182
|
+
- Updated dependencies [ceed51f]
|
|
183
|
+
- @getvitops/utils@4.0.0
|
|
184
|
+
|
|
3
185
|
## 3.0.0
|
|
4
186
|
|
|
5
187
|
### Major Changes
|
package/css/patterns/consent.css
CHANGED
|
@@ -75,15 +75,26 @@
|
|
|
75
75
|
margin-inline-start: auto;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
/* The per-category checkboxes.
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
/* The per-category checkboxes. A row is hidden unless this showing is about it,
|
|
79
|
+
so the markup can carry every category the site might ever need while the
|
|
80
|
+
banner still only asks what was actually demanded. */
|
|
81
81
|
.consent__options {
|
|
82
82
|
flex-basis: 100%;
|
|
83
83
|
display: flex;
|
|
84
84
|
flex-wrap: wrap;
|
|
85
85
|
gap: 1rem;
|
|
86
86
|
}
|
|
87
|
+
|
|
88
|
+
/* One category is a yes/no question and the Reject/Accept buttons already ask
|
|
89
|
+
it — a lone checkbox would be a third control for the same decision, and the
|
|
90
|
+
Save button a second way to press Accept. `<wc-consent>` sets this class at
|
|
91
|
+
show time because how many rows are on offer is now a runtime fact. */
|
|
92
|
+
&.consent--single {
|
|
93
|
+
.consent__options,
|
|
94
|
+
[data-consent-save] {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
87
98
|
}
|
|
88
99
|
|
|
89
100
|
/* Open, in the top layer. */
|
package/css/patterns/sitenav.css
CHANGED
|
@@ -17,10 +17,32 @@
|
|
|
17
17
|
* OR click (native `[open]` pins it). Top-level submenus drop below their item;
|
|
18
18
|
* deeper (megamenu) submenus fly out to the inline-end side.
|
|
19
19
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* the
|
|
23
|
-
*
|
|
20
|
+
* The `<details>` is grid-placed at column 2 and the submenu `<ul>` is its SIBLING,
|
|
21
|
+
* a real grid child of the branch item — that is what lets the caret sit inline with
|
|
22
|
+
* the link while the submenu spans full width on its own row.
|
|
23
|
+
*
|
|
24
|
+
* ── TWO BRANCHES, NOT BASE-PLUS-OVERRIDE ──
|
|
25
|
+
*
|
|
26
|
+
* `@container` contributes ZERO specificity, so a rule inside the wide block competes
|
|
27
|
+
* at its bare selector weight. A bare `.sitenav--drawer-end .sitenav__panel` (0,2,0)
|
|
28
|
+
* therefore beat the wide block's `.sitenav__panel` (0,1,0) reset *in the wide state*:
|
|
29
|
+
* the promoted navbar shipped translated a full panel-width off-screen, and the
|
|
30
|
+
* accordion's `overflow: hidden` clipped away every third-level megamenu. Before the
|
|
31
|
+
* four per-breakpoint blocks were folded into one style query, those resets carried a
|
|
32
|
+
* `.sitenav--bp-*` class and won the tie on source order; folding them removed it.
|
|
33
|
+
*
|
|
34
|
+
* So the rule is: **a narrow-state rule that is MORE SPECIFIC than its wide-state
|
|
35
|
+
* counterpart lives inside `@container style(--_sitenav-wide: 0)`.** Rules at (0,1,0)
|
|
36
|
+
* — the panel's box, the lists, the links — stay unscoped, because that same work is
|
|
37
|
+
* what neutralises the UA `[popover]` sheet, which applies in BOTH states; scoping it
|
|
38
|
+
* would mean writing it twice. `src/css/state-branch.test.ts` asserts the invariant.
|
|
39
|
+
*
|
|
40
|
+
* Both branches read an INHERITED flag, so every part must live inside `.sitenav`,
|
|
41
|
+
* which declares it. Note the file mixes two unnamed query kinds that resolve against
|
|
42
|
+
* DIFFERENT containers: `style()` against the nearest ancestor ELEMENT (every element
|
|
43
|
+
* is a style container — no `container-type` needed, and it resolves for a panel
|
|
44
|
+
* promoted to the top layer), the `(min-width:)` queries below against `body`
|
|
45
|
+
* (layout.css). That asymmetry is why the flag has to be a custom property.
|
|
24
46
|
*
|
|
25
47
|
* Per-breakpoint depth caps come pre-resolved from PHP as item classes:
|
|
26
48
|
* `.sitenav__item--desktop-branch` — caret + submenu shown only ≥ breakpoint;
|
|
@@ -75,6 +97,19 @@
|
|
|
75
97
|
inset-block: 0;
|
|
76
98
|
inline-size: min(100dvw, var(--sitenav-drawer-size, 20rem));
|
|
77
99
|
max-inline-size: 100dvw;
|
|
100
|
+
|
|
101
|
+
/* The UA `[popover]` sheet supplies `margin: auto` and `height: fit-content`, and
|
|
102
|
+
neither was being undone — so `inset-block: 0` bought nothing and the "drawer"
|
|
103
|
+
rendered as a content-height card floating in the vertical centre, while at
|
|
104
|
+
width the auto margins absorbed the free space of any stretched `.sitenav`.
|
|
105
|
+
`drawer.css` resets margin for exactly this reason; this panel doesn't compose
|
|
106
|
+
it. Both live in the base block because the UA sheet applies in BOTH states:
|
|
107
|
+
against `position: fixed` + `inset-block: 0` an auto block-size stretches to
|
|
108
|
+
the drawer's full height, and against the wide branch's `position: static` the
|
|
109
|
+
same declaration sizes the navbar to its content. */
|
|
110
|
+
margin: 0;
|
|
111
|
+
block-size: auto;
|
|
112
|
+
|
|
78
113
|
padding: 1.5rem;
|
|
79
114
|
padding-block-start: 3.5rem; /* clearance for the close button */
|
|
80
115
|
background: var(--color-bg-surface);
|
|
@@ -106,30 +141,42 @@
|
|
|
106
141
|
}
|
|
107
142
|
}
|
|
108
143
|
|
|
109
|
-
/*
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
translate: 0 0;
|
|
123
|
-
}
|
|
124
|
-
@starting-style {
|
|
125
|
-
.sitenav--drawer-end .sitenav__panel:popover-open {
|
|
126
|
-
opacity: 0;
|
|
144
|
+
/* ── Drawer geometry + transition — NARROW ONLY ─────────────────────────────
|
|
145
|
+
Scoped rather than bare because these are (0,2,0)/(0,3,0) and would outrank the
|
|
146
|
+
wide block's (0,1,0) panel reset. `:popover-open` and the `@starting-style`
|
|
147
|
+
pair are one transition system with the edge modifiers, so they travel with
|
|
148
|
+
them: both are inert at width only by coincidence (the panel is always
|
|
149
|
+
displayed there, and their values happen to match the reset's), which is the
|
|
150
|
+
same shape of accident as the bug itself. ── */
|
|
151
|
+
@container style(--_sitenav-wide: 0) {
|
|
152
|
+
/* Slide from the chosen edge (default inline-end). The insets also undo the UA
|
|
153
|
+
`[popover] { inset: 0 }`; the wide branch does that job with `inset: auto`. */
|
|
154
|
+
.sitenav--drawer-end .sitenav__panel {
|
|
155
|
+
inset-inline-end: 0;
|
|
156
|
+
inset-inline-start: auto;
|
|
127
157
|
translate: 100% 0;
|
|
128
158
|
}
|
|
129
|
-
.sitenav--drawer-start .sitenav__panel
|
|
130
|
-
|
|
159
|
+
.sitenav--drawer-start .sitenav__panel {
|
|
160
|
+
inset-inline-start: 0;
|
|
161
|
+
inset-inline-end: auto;
|
|
131
162
|
translate: -100% 0;
|
|
132
163
|
}
|
|
164
|
+
|
|
165
|
+
.sitenav__panel:popover-open {
|
|
166
|
+
opacity: 1;
|
|
167
|
+
translate: 0 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@starting-style {
|
|
171
|
+
.sitenav--drawer-end .sitenav__panel:popover-open {
|
|
172
|
+
opacity: 0;
|
|
173
|
+
translate: 100% 0;
|
|
174
|
+
}
|
|
175
|
+
.sitenav--drawer-start .sitenav__panel:popover-open {
|
|
176
|
+
opacity: 0;
|
|
177
|
+
translate: -100% 0;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
133
180
|
}
|
|
134
181
|
|
|
135
182
|
/* ── Lists + links ─────────────────────────────────────────────────────────── */
|
|
@@ -167,31 +214,7 @@
|
|
|
167
214
|
font-style: italic;
|
|
168
215
|
}
|
|
169
216
|
|
|
170
|
-
/* ── Branch item —
|
|
171
|
-
The item is a grid: [link | caret] on row 1, the submenu spanning row 2. The
|
|
172
|
-
<details> holds only the caret <summary>; the submenu <ul> is its sibling and a
|
|
173
|
-
real grid child of the item. The row-2 track animates 0fr→1fr when the details is
|
|
174
|
-
open (the classic no-JS accordion, driven by `:has`), so the submenu pushes the
|
|
175
|
-
content below rather than overlaying it. */
|
|
176
|
-
.sitenav__item--branch {
|
|
177
|
-
display: grid;
|
|
178
|
-
grid-template-columns: 1fr auto;
|
|
179
|
-
grid-template-rows: auto 0fr;
|
|
180
|
-
align-items: center;
|
|
181
|
-
column-gap: 0.5rem;
|
|
182
|
-
transition: grid-template-rows 0.25s ease;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.sitenav__item--branch > .split-link__link {
|
|
186
|
-
grid-column: 1;
|
|
187
|
-
grid-row: 1;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/* <details> is only the caret; keep its box out of the flow's height. */
|
|
191
|
-
.sitenav__disclosure {
|
|
192
|
-
grid-column: 2;
|
|
193
|
-
grid-row: 1;
|
|
194
|
-
}
|
|
217
|
+
/* ── Branch item — the two rules both presentations share ──────────────────── */
|
|
195
218
|
|
|
196
219
|
/* The <summary>. `.split-link__toggle` supplies the flush look, hover + focus, and
|
|
197
220
|
the caret transition; only the disclosure-marker reset is added here. */
|
|
@@ -204,31 +227,68 @@
|
|
|
204
227
|
}
|
|
205
228
|
}
|
|
206
229
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
/* Stretch to the row-2 track (not content-sized) so the 0fr collapsed state
|
|
211
|
-
actually clips to 0 — the item's own align-self must beat the grid's
|
|
212
|
-
`align-items: center`, or overflow:hidden has nothing to clip against. */
|
|
213
|
-
align-self: stretch;
|
|
214
|
-
min-block-size: 0;
|
|
215
|
-
overflow: hidden;
|
|
216
|
-
padding-inline-start: 1rem;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.sitenav__item--branch:has(> .sitenav__disclosure[open]) {
|
|
220
|
-
grid-template-rows: auto 1fr;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
/* Caret flips while the disclosure is open (summary carries no aria-expanded). */
|
|
230
|
+
/* Caret flips while the disclosure is open (summary carries no aria-expanded).
|
|
231
|
+
Unscoped: at width the same native `[open]` pins a dropdown, so the flip is
|
|
232
|
+
wanted in both states. */
|
|
224
233
|
.sitenav__disclosure[open] > .sitenav__subtoggle .split-link__caret {
|
|
225
234
|
rotate: 180deg;
|
|
226
235
|
}
|
|
227
236
|
|
|
228
|
-
/*
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
237
|
+
/* ── Mobile accordion — NARROW ONLY ─────────────────────────────────────────
|
|
238
|
+
The item is a grid: [link | caret] on row 1, the submenu spanning row 2. The
|
|
239
|
+
<details> holds only the caret <summary>; the submenu <ul> is its sibling and a
|
|
240
|
+
real grid child of the item. The row-2 track animates 0fr→1fr when the details is
|
|
241
|
+
open (the classic no-JS accordion, driven by `:has`), so the submenu pushes the
|
|
242
|
+
content below rather than overlaying it.
|
|
243
|
+
|
|
244
|
+
Scoped because these selectors are (0,2,0)/(0,3,0). Most of what is in here is
|
|
245
|
+
inert at width anyway — grid placement on a flex item, `align-self` on an
|
|
246
|
+
absolutely positioned box, `min-block-size: 0` where `auto` already computes to
|
|
247
|
+
0 — but `overflow: hidden` and `padding-inline-start` are NOT, and leaking them
|
|
248
|
+
into the navbar is what clipped the megamenus. ── */
|
|
249
|
+
@container style(--_sitenav-wide: 0) {
|
|
250
|
+
.sitenav__item--branch {
|
|
251
|
+
display: grid;
|
|
252
|
+
grid-template-columns: 1fr auto;
|
|
253
|
+
grid-template-rows: auto 0fr;
|
|
254
|
+
align-items: center;
|
|
255
|
+
column-gap: 0.5rem;
|
|
256
|
+
transition: grid-template-rows 0.25s ease;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.sitenav__item--branch > .split-link__link {
|
|
260
|
+
grid-column: 1;
|
|
261
|
+
grid-row: 1;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* <details> is only the caret; keep its box out of the flow's height. */
|
|
265
|
+
.sitenav__disclosure {
|
|
266
|
+
grid-column: 2;
|
|
267
|
+
grid-row: 1;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.sitenav__item--branch > .sitenav__submenu {
|
|
271
|
+
grid-column: 1 / -1;
|
|
272
|
+
grid-row: 2;
|
|
273
|
+
/* Stretch to the row-2 track (not content-sized) so the 0fr collapsed state
|
|
274
|
+
actually clips to 0 — the item's own align-self must beat the grid's
|
|
275
|
+
`align-items: center`, or overflow:hidden has nothing to clip against. */
|
|
276
|
+
align-self: stretch;
|
|
277
|
+
min-block-size: 0;
|
|
278
|
+
overflow: hidden;
|
|
279
|
+
padding-inline-start: 1rem;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.sitenav__item--branch:has(> .sitenav__disclosure[open]) {
|
|
283
|
+
grid-template-rows: auto 1fr;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/* Depth cap (mobile side): a desktop-only branch shows just its parent link.
|
|
287
|
+
Scoped, so the wide branch needs no counter-rule — it simply stops applying. */
|
|
288
|
+
.sitenav__item--desktop-branch > .sitenav__disclosure,
|
|
289
|
+
.sitenav__item--desktop-branch > .sitenav__submenu {
|
|
290
|
+
display: none;
|
|
291
|
+
}
|
|
232
292
|
}
|
|
233
293
|
/* ── Desktop promotion.
|
|
234
294
|
*
|
|
@@ -310,8 +370,9 @@
|
|
|
310
370
|
position: relative;
|
|
311
371
|
display: flex;
|
|
312
372
|
align-items: center;
|
|
313
|
-
|
|
314
|
-
|
|
373
|
+
/* Restated, not inherited: this used to leak in from the accordion rule, which
|
|
374
|
+
is now narrow-scoped. Without it the caret hugs the link at width. */
|
|
375
|
+
column-gap: 0.5rem;
|
|
315
376
|
}
|
|
316
377
|
.sitenav__submenu {
|
|
317
378
|
position: absolute;
|
|
@@ -319,7 +380,6 @@
|
|
|
319
380
|
inset-inline-start: 0;
|
|
320
381
|
min-inline-size: 13rem;
|
|
321
382
|
padding: 0.5rem;
|
|
322
|
-
overflow: visible;
|
|
323
383
|
background: var(--color-bg-surface);
|
|
324
384
|
color: var(--color-text-surface);
|
|
325
385
|
border: var(--b-panel);
|
|
@@ -335,6 +395,12 @@
|
|
|
335
395
|
translate 0.15s ease,
|
|
336
396
|
visibility 0.15s allow-discrete;
|
|
337
397
|
}
|
|
398
|
+
/* Third level (megamenu) flies out to the inline-end side. Its containing block
|
|
399
|
+
is the inner `.sitenav__item--branch` (position: relative, above), which sits
|
|
400
|
+
INSIDE the parent submenu — so nothing between the two may clip. The
|
|
401
|
+
accordion's `overflow: hidden` used to leak in here at (0,2,0) and beat this
|
|
402
|
+
branch's (0,1,0) reset, and every megamenu was invisible at width. It is now
|
|
403
|
+
scoped to `style(--_sitenav-wide: 0)` and cannot. */
|
|
338
404
|
.sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
|
|
339
405
|
inset-block-start: 0;
|
|
340
406
|
inset-inline-start: 100%;
|
|
@@ -348,12 +414,12 @@
|
|
|
348
414
|
pointer-events: auto;
|
|
349
415
|
translate: 0 0;
|
|
350
416
|
}
|
|
351
|
-
/*
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
417
|
+
/* Depth cap (desktop side): a mobile-only branch collapses to a plain link. Its
|
|
418
|
+
mirror — hiding a DESKTOP-only branch below the breakpoint — lives in the
|
|
419
|
+
narrow branch, so there is nothing to undo here. A `display: block`
|
|
420
|
+
counter-rule used to sit alongside this one and, at (0,2,0), beat the base
|
|
421
|
+
`.sitenav__submenu`'s `display: flex` (0,1,0) — costing every desktop-only
|
|
422
|
+
dropdown its column direction and gap. */
|
|
357
423
|
.sitenav__item--mobile-branch > .sitenav__disclosure,
|
|
358
424
|
.sitenav__item--mobile-branch > .sitenav__submenu {
|
|
359
425
|
display: none;
|
package/css/patterns/tree.css
CHANGED
|
@@ -3,9 +3,38 @@
|
|
|
3
3
|
* Consumes the generated token cascade (src/css/generated/tokens.css).
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
/* An unregistered custom element is `display: inline`, and `<wc-tree>` wraps a
|
|
7
|
+
`<ul>` — a block child in an inline box, which forces an anonymous block and
|
|
8
|
+
leaves the element unable to take sizing or spacing. It must be block whether
|
|
9
|
+
or not `elements.js` ever loads, because the tag is in the SSR'd markup either
|
|
10
|
+
way. (Same gap exists on most other `wc-*` tags; see the note in
|
|
11
|
+
`src/js/elements.ts`.) */
|
|
12
|
+
wc-tree {
|
|
13
|
+
display: block;
|
|
14
|
+
}
|
|
15
|
+
|
|
6
16
|
/* ── Tree — hierarchical view over nested lists / <details> ───────────────── */
|
|
7
17
|
.tree {
|
|
8
18
|
--_p: var(--p-tree, var(--p-tree-group, var(--p-default)));
|
|
19
|
+
/* Resolved once here so the indent and the `--lines` elbow that must align to
|
|
20
|
+
it cannot disagree. Read through `--tree-indent` rather than assigning it, so
|
|
21
|
+
a consumer setting `--tree-indent` on an ancestor still wins — assigning the
|
|
22
|
+
default directly to `--tree-indent` on `.tree` would out-specify the hook and
|
|
23
|
+
silently ignore it. */
|
|
24
|
+
--_indent: var(--tree-indent, clamp(0.75rem, 2.5vw, 1.5rem));
|
|
25
|
+
|
|
26
|
+
/* The toggle column. A branch spends this on its chevron before its label; a
|
|
27
|
+
leaf has no chevron, so without compensation a leaf label sits one whole
|
|
28
|
+
column to the INLINE-START of its branch siblings and nothing at a given
|
|
29
|
+
depth lines up. Measured: 24px of misalignment at every level.
|
|
30
|
+
|
|
31
|
+
Two vars rather than one because they answer different questions —
|
|
32
|
+
`--_node-indent` is how wide the toggle column is, `--_leaf-indent` is what a
|
|
33
|
+
row without a toggle owes to sit in the same label column. Anything that
|
|
34
|
+
needs to align to the label (the description, a future `.tree__actions`
|
|
35
|
+
offset) reads `--_leaf-indent` rather than re-deriving the sum. */
|
|
36
|
+
--_node-indent: var(--tree-icon-size, 1.25rem);
|
|
37
|
+
--_leaf-indent: calc(var(--_node-indent) + var(--tree-gap, 0.25rem));
|
|
9
38
|
|
|
10
39
|
list-style: none;
|
|
11
40
|
margin: 0;
|
|
@@ -15,14 +44,49 @@
|
|
|
15
44
|
position: relative;
|
|
16
45
|
}
|
|
17
46
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
47
|
+
/* Nested list indent. Two shapes are supported: the item may BE the
|
|
48
|
+
`<details>`, or be an `<li>` wrapping one — the latter is what `<Tree />`
|
|
49
|
+
emits, because `<ul>`/`<li>` is what gives assistive tech list position and
|
|
50
|
+
depth. Keep both; the flat shape is the pattern's original contract.
|
|
51
|
+
|
|
52
|
+
Indent is ONE `--tree-indent` per level, not two. This used to set both
|
|
53
|
+
`margin-inline-start` and `padding-inline-start` to it, putting the guide
|
|
54
|
+
border between them and costing 2× per level — 3rem × 10 levels = 480px on
|
|
55
|
+
the config schema, which is wider than a 390px viewport, so the deepest
|
|
56
|
+
fields sat entirely off-screen. The border now hugs the parent's edge and
|
|
57
|
+
the padding alone carries the offset, which looks the same at one level and
|
|
58
|
+
stays on screen at ten.
|
|
59
|
+
|
|
60
|
+
Fluid, because a tree's depth is a property of the DATA and can't be known
|
|
61
|
+
when the pattern is written: `2ch`-ish on a narrow screen, the full step on
|
|
62
|
+
a wide one. Deep trees stay usable on a phone without flattening the
|
|
63
|
+
hierarchy visually on a desktop. */
|
|
64
|
+
.tree__item > .tree,
|
|
65
|
+
.tree__item > details > .tree {
|
|
66
|
+
/* Reset BOTH box axes before re-applying the one indent this level owes.
|
|
67
|
+
Two separate leaks compounded here, each adding ~16px per level and each
|
|
68
|
+
invisible in the CSS:
|
|
69
|
+
|
|
70
|
+
1. `.tree { padding: var(--_p) }` applies to every nested `.tree`, not just
|
|
71
|
+
the outermost, so the container padding was charged once per level — on
|
|
72
|
+
all four sides, narrowing from the end as well.
|
|
73
|
+
2. `patterns/details.css` gives every non-summary child of a `<details>`
|
|
74
|
+
`margin-inline: var(--_content-margin)`. Its selector is
|
|
75
|
+
`details, .details`, which under CSS nesting takes `:is()` specificity
|
|
76
|
+
(0-1-1), so `.tree { margin: 0 }` at 0-1-0 LOSES to it. A nested tree is
|
|
77
|
+
exactly such a child.
|
|
78
|
+
|
|
79
|
+
Measured before this: 41px per level against a 24px design, so a 9-deep
|
|
80
|
+
tree spent 382px on indent and left its deepest label 162px wide. */
|
|
81
|
+
margin-inline: 0;
|
|
82
|
+
padding: 0;
|
|
83
|
+
padding-inline-start: var(--_indent);
|
|
21
84
|
border-inline-start: 1px solid var(--color-bg-surface-muted);
|
|
22
85
|
}
|
|
23
86
|
|
|
24
87
|
.tree__content,
|
|
25
|
-
details.tree__item > summary
|
|
88
|
+
details.tree__item > summary,
|
|
89
|
+
.tree__item > details > summary {
|
|
26
90
|
display: flex;
|
|
27
91
|
align-items: center;
|
|
28
92
|
gap: var(--tree-gap, 0.25rem);
|
|
@@ -31,9 +95,13 @@
|
|
|
31
95
|
|
|
32
96
|
.tree__content {
|
|
33
97
|
cursor: default;
|
|
98
|
+
/* Sit in the same label column as a branch sibling, which spends this much on
|
|
99
|
+
its chevron. Without it a leaf reads as out-dented by one toggle width. */
|
|
100
|
+
padding-inline-start: var(--_leaf-indent);
|
|
34
101
|
}
|
|
35
102
|
|
|
36
|
-
details.tree__item > summary
|
|
103
|
+
details.tree__item > summary,
|
|
104
|
+
.tree__item > details > summary {
|
|
37
105
|
cursor: pointer;
|
|
38
106
|
list-style: none;
|
|
39
107
|
|
|
@@ -59,7 +127,8 @@
|
|
|
59
127
|
transition: transform 0.2s ease;
|
|
60
128
|
}
|
|
61
129
|
|
|
62
|
-
details.tree__item[open] > summary .tree__toggle
|
|
130
|
+
details.tree__item[open] > summary .tree__toggle,
|
|
131
|
+
.tree__item > details[open] > summary .tree__toggle {
|
|
63
132
|
transform: rotate(90deg);
|
|
64
133
|
}
|
|
65
134
|
|
|
@@ -111,10 +180,10 @@
|
|
|
111
180
|
&::before {
|
|
112
181
|
content: '';
|
|
113
182
|
position: absolute;
|
|
114
|
-
inset-inline-start: calc(-1 * var(--
|
|
183
|
+
inset-inline-start: calc(-1 * var(--_indent) + 0.5rem);
|
|
115
184
|
inset-block-start: 0;
|
|
116
185
|
block-size: 1rem;
|
|
117
|
-
inline-size: calc(var(--
|
|
186
|
+
inline-size: calc(var(--_indent) - 0.5rem);
|
|
118
187
|
border-inline-start: 1px solid var(--color-bg-surface-muted);
|
|
119
188
|
border-block-end: 1px solid var(--color-bg-surface-muted);
|
|
120
189
|
}
|
|
@@ -123,4 +192,45 @@
|
|
|
123
192
|
&.tree--lines > .tree__item::before {
|
|
124
193
|
display: none;
|
|
125
194
|
}
|
|
195
|
+
|
|
196
|
+
/* A node's own prose. `.tree__label` is `nowrap` + ellipsis for file-tree-style
|
|
197
|
+
single-line names, so a description can't live in it — it sits below the
|
|
198
|
+
summary row and wraps. Indented to the label, past the toggle. */
|
|
199
|
+
.tree__desc {
|
|
200
|
+
margin-block: 0.125rem 0.25rem;
|
|
201
|
+
margin-inline-start: var(--_leaf-indent);
|
|
202
|
+
color: var(--color-text-surface-muted);
|
|
203
|
+
text-wrap: pretty;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* ── Tree toolbar — generated by <wc-tree>, never authored ─────────────────── */
|
|
208
|
+
/*
|
|
209
|
+
* These controls only exist once the element upgrades, so they are styled but
|
|
210
|
+
* never present in a no-JS render. Kept out of the `.tree` block because the
|
|
211
|
+
* toolbar is a SIBLING of the tree, not a node in it — nesting it there would
|
|
212
|
+
* inherit `.tree`'s padding and the `.tree__item` positioning context.
|
|
213
|
+
*/
|
|
214
|
+
.tree__toolbar {
|
|
215
|
+
align-items: center;
|
|
216
|
+
margin-block-end: var(--p-tree, var(--p-tree-group, var(--p-default)));
|
|
217
|
+
|
|
218
|
+
/* The filter is wrapped in `.input-group` so forms.css styles it; the group is
|
|
219
|
+
what flexes, and the input fills it. */
|
|
220
|
+
.tree__filter-group {
|
|
221
|
+
flex: 1 1 12rem;
|
|
222
|
+
min-inline-size: 0;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.tree__filter {
|
|
226
|
+
inline-size: 100%;
|
|
227
|
+
min-inline-size: 0;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.tree__count {
|
|
231
|
+
color: var(--color-text-surface-muted);
|
|
232
|
+
/* Hold the row height whether or not a count is showing, so typing into the
|
|
233
|
+
filter doesn't reflow the tree by a line. */
|
|
234
|
+
min-inline-size: 6ch;
|
|
235
|
+
}
|
|
126
236
|
}
|
package/dist/consent.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops_consent`,
|
|
1
|
+
const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops:consent`,n=`vitops:consent-open`,r=`vitops_consent`,i=[`analytics`,`marketing`,`preferences`];function a(e){return{analytics:e,marketing:e,preferences:e}}function o(){return{ts:null,choices:a(null)}}function s(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function c(e){if(!e)return o();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return o()}if(typeof t!=`object`||!t)return o();let n=t;if(n.v!==2||typeof n.c!=`object`||n.c===null)return o();let r=n.c,s=a(null);for(let e of i){let t=r[e];typeof t==`boolean`&&(s[e]=t)}return{ts:typeof n.ts==`number`?n.ts:null,choices:s}}function l(e){let t={};for(let n of i){let r=e.choices[n];typeof r==`boolean`&&(t[n]=r)}return encodeURIComponent(JSON.stringify({v:2,ts:e.ts??0,c:t}))}function u(e,t){return t===`necessary`?!0:e.choices[t]===!0}function d(e,t){return t===`necessary`?!0:e.choices[t]!==null}function f(e,t){for(let n of t)if(!d(e,n))return!0;return!1}function p(e,t){return{ts:t,choices:a(e)}}function m(e,t,n){let r={...e.choices};for(let e of i){let n=t[e];typeof n==`boolean`&&(r[e]=n)}return{ts:n,choices:r}}function h(e,t){return i.filter(n=>u(e,n)&&!u(t,n))}function g(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const _=location.protocol===`https:`;let v=c(s(document.cookie,r));const y=new Set,b=new WeakSet,x=new Set,S=new Set,C=new Map;function w(e){S.has(e)||(S.add(e),R())}function T(){for(let[e,t]of C)if(d(v,e)){C.delete(e);for(let n of t)n(u(v,e))}}const E={idle:[],async:[],interaction:[]},D={idle:!1,async:!0,interaction:!1};function O(e){if(D[e])return;D[e]=!0;let t=E[e];E[e]=[];for(let e of t)e()}function k(e,t){D[e]?t():E[e].push(t)}function A(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}A(()=>{let e=globalThis.requestIdleCallback;e?e(()=>O(`idle`),{timeout:3e3}):setTimeout(()=>O(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);O(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});A(()=>setTimeout(()=>O(`interaction`),8e3))}const j=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function M(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function N(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))j.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function P(e){if(!b.has(e)){if(b.add(e),x.add(M(e)),e instanceof HTMLScriptElement)N(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function F(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){let e=t.getAttribute(`data-strategy`);k(e===`async`||e===`interaction`?e:`idle`,()=>{let e=M(t);u(v,e)?P(t):w(e)})}}function I(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function L(e,t){let n=h(v,e),i=v;v=e,t?document.cookie=`${r}=${l(e)}${g(_)}`:document.cookie=`${r}=; path=/; max-age=0`,R(),F(),n.length&&(I(n),n.some(e=>x.has(e)&&u(i,e))&&z.reloadOnRevoke&&location.reload())}function R(){T();for(let e of y)e(v);document.dispatchEvent(new CustomEvent(t,{detail:v}))}const z={categories:e,reloadOnRevoke:!0,get:()=>v,granted:e=>u(v,e),needed:()=>f(v,S),demanded:()=>e.filter(e=>S.has(e)),require(e){return w(e),u(v,e)},request(e){return w(e),d(v,e)?Promise.resolve(u(v,e)):new Promise(t=>{let n=C.get(e);n?n.push(t):C.set(e,[t])})},set:e=>L(m(v,e,Date.now()),!0),acceptAll:()=>L(p(!0,Date.now()),!0),rejectAll:()=>L(p(!1,Date.now()),!0),reset:()=>L(o(),!1),open:()=>document.dispatchEvent(new CustomEvent(n)),subscribe(e){return y.add(e),e(v),()=>void y.delete(e)}},B=window.vitopsConsent?.q;if(window.vitopsConsent=z,B)for(let[e,t]of B)t?z.request(e).then(t):z.require(e);document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),z.open())}),document.addEventListener(`astro:page-load`,F),F(),R();var V=class extends HTMLElement{#e;#t=`prompt`;#n=!1;get#r(){return window.vitopsConsent}get#i(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#r;if(!e)return;let t=this.#i;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#p),this.addEventListener(`submit`,this.#o),document.addEventListener(n,this.#a),this.#e=e.subscribe(()=>{this.#n&&this.#t===`settings`?this.#f():e.needed()?this.#u(`prompt`):this.#d()})}disconnectedCallback(){this.removeEventListener(`click`,this.#p),this.removeEventListener(`submit`,this.#o),document.removeEventListener(n,this.#a),this.#e?.()}#a=()=>this.#u(`settings`);#o=e=>e.preventDefault();#s(e){return this.querySelector(`[data-consent-row="${e}"]`)??this.#c(e)?.closest(`label`)??null}#c(e){return this.querySelector(`input[name="${e}"]`)}#l(e){let t=this.#r;if(!t)return[];if(e===`settings`){let e=i.filter(e=>this.#s(e));return e.length?e:[...i]}let n=t.get();return i.filter(e=>t.demanded().includes(e)&&!d(n,e))}#u(e){if(!this.#l(e).length)return;this.#t=e,this.#f(),this.hidden=!1,this.#n=!0;let t=this.#i;t?.isConnected&&!t.matches(`:popover-open`)&&t.showPopover()}#d(){this.#n=!1,this.#i?.hidePopover?.(),this.hidden=!0}#f(){let e=this.#r;if(!e)return;let t=this.#l(this.#t);for(let n of i){let r=this.#s(n);r&&(r.hidden=!t.includes(n));let i=this.#c(n);i&&(i.checked=e.granted(n))}this.#i?.classList.toggle(`consent--single`,t.length<2)}#p=e=>{let t=this.#r,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);if(!t||!n)return;e.preventDefault();let r=this.#l(this.#t);n.hasAttribute(`data-consent-accept`)?t.set(this.#m(r,()=>!0)):n.hasAttribute(`data-consent-reject`)?t.set(this.#m(r,()=>!1)):t.set(this.#m(r,e=>this.#c(e)?.checked===!0)),this.#d()};#m(e,t){let n={};for(let r of e)n[r]=t(r);return n}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,V);export{e as CATEGORIES,t as CONSENT_EVENT,n as CONSENT_OPEN_EVENT,r as COOKIE_NAME,z as consent};
|
package/dist/elements.js
CHANGED
|
@@ -16,13 +16,13 @@ switch(t){case Boolean:e=e?ie:null;break;case Object:case Array:e=e==null?e:JSON
|
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
17
|
*/
|
|
18
18
|
const g=globalThis,ce=e=>e,_=g.trustedTypes,le=_?_.createPolicy(`lit-html`,{createHTML:e=>e}):void 0,ue=`$lit$`,v=`lit$${Math.random().toFixed(9).slice(2)}$`,y=`?`+v,de=`<${y}>`,b=document,x=()=>b.createComment(``),S=e=>e===null||typeof e!=`object`&&typeof e!=`function`,fe=Array.isArray,pe=e=>fe(e)||typeof e?.[Symbol.iterator]==`function`,me=`[
|
|
19
|
-
\f\r]`,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,he=/-->/g,ge=/>/g,w=RegExp(`>|${me}(?:([^\\s"'>=/]+)(${me}*=${me}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),_e=/'/g,ve=/"/g,ye=/^(?:script|style|textarea|title)$/i,T=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),E=Symbol.for(`lit-noChange`),D=Symbol.for(`lit-nothing`),be=new WeakMap,O=b.createTreeWalker(b,129);function xe(e,t){if(!fe(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return le===void 0?t:le.createHTML(t)}const Se=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=C;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===C?c[1]===`!--`?o=he:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=w):(ye.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=w):o=ge:o===w?c[0]===`>`?(o=i??C,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?w:c[3]===`"`?ve:_e):o===ve||o===_e?o=w:o===he||o===ge?o=C:(o=w,i=void 0);let d=o===w&&e[t+1].startsWith(`/>`)?` `:``;a+=o===C?n+de:l>=0?(r.push(s),n.slice(0,l)+ue+n.slice(l)+v+d):n+v+(l===-2?t:d)}return[xe(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]};var
|
|
19
|
+
\f\r]`,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,he=/-->/g,ge=/>/g,w=RegExp(`>|${me}(?:([^\\s"'>=/]+)(${me}*=${me}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),_e=/'/g,ve=/"/g,ye=/^(?:script|style|textarea|title)$/i,T=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),E=Symbol.for(`lit-noChange`),D=Symbol.for(`lit-nothing`),be=new WeakMap,O=b.createTreeWalker(b,129);function xe(e,t){if(!fe(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return le===void 0?t:le.createHTML(t)}const Se=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=C;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===C?c[1]===`!--`?o=he:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=w):(ye.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=w):o=ge:o===w?c[0]===`>`?(o=i??C,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?w:c[3]===`"`?ve:_e):o===ve||o===_e?o=w:o===he||o===ge?o=C:(o=w,i=void 0);let d=o===w&&e[t+1].startsWith(`/>`)?` `:``;a+=o===C?n+de:l>=0?(r.push(s),n.slice(0,l)+ue+n.slice(l)+v+d):n+v+(l===-2?t:d)}return[xe(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]};var Ce=class e{constructor({strings:t,_$litType$:n},r){let i;this.parts=[];let a=0,o=0,s=t.length-1,c=this.parts,[l,u]=Se(t,n);if(this.el=e.createElement(l,r),O.currentNode=this.el.content,n===2||n===3){let e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;(i=O.nextNode())!==null&&c.length<s;){if(i.nodeType===1){if(i.hasAttributes())for(let e of i.getAttributeNames())if(e.endsWith(ue)){let t=u[o++],n=i.getAttribute(e).split(v),r=/([.?@])?(.*)/.exec(t);c.push({type:1,index:a,name:r[2],strings:n,ctor:r[1]===`.`?Te:r[1]===`?`?Ee:r[1]===`@`?De:j}),i.removeAttribute(e)}else e.startsWith(v)&&(c.push({type:6,index:a}),i.removeAttribute(e));if(ye.test(i.tagName)){let e=i.textContent.split(v),t=e.length-1;if(t>0){i.textContent=_?_.emptyScript:``;for(let n=0;n<t;n++)i.append(e[n],x()),O.nextNode(),c.push({type:2,index:++a});i.append(e[t],x())}}}else if(i.nodeType===8)if(i.data===y)c.push({type:2,index:a});else{let e=-1;for(;(e=i.data.indexOf(v,e+1))!==-1;)c.push({type:7,index:a}),e+=v.length-1}a++}}static createElement(e,t){let n=b.createElement(`template`);return n.innerHTML=e,n}};function k(e,t,n=e,r){if(t===E)return t;let i=r===void 0?n._$Cl:n._$Co?.[r],a=S(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),a===void 0?i=void 0:(i=new a(e),i._$AT(e,n,r)),r===void 0?n._$Cl=i:(n._$Co??=[])[r]=i),i!==void 0&&(t=k(e,i._$AS(e,t.values),i,r)),t}var we=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:n}=this._$AD,r=(e?.creationScope??b).importNode(t,!0);O.currentNode=r;let i=O.nextNode(),a=0,o=0,s=n[0];for(;s!==void 0;){if(a===s.index){let t;s.type===2?t=new A(i,i.nextSibling,this,e):s.type===1?t=new s.ctor(i,s.name,s.strings,this,e):s.type===6&&(t=new Oe(i,this,e)),this._$AV.push(t),s=n[++o]}a!==s?.index&&(i=O.nextNode(),a++)}return O.currentNode=b,r}p(e){let t=0;for(let n of this._$AV)n!==void 0&&(n.strings===void 0?n._$AI(e[t]):(n._$AI(e,n,t),t+=n.strings.length-2)),t++}},A=class e{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,n,r){this.type=2,this._$AH=D,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=k(this,e,t),S(e)?e===D||e==null||e===``?(this._$AH!==D&&this._$AR(),this._$AH=D):e!==this._$AH&&e!==E&&this._(e):e._$litType$===void 0?e.nodeType===void 0?pe(e)?this.k(e):this._(e):this.T(e):this.$(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==D&&S(this._$AH)?this._$AA.nextSibling.data=e:this.T(b.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:n}=e,r=typeof n==`number`?this._$AC(e):(n.el===void 0&&(n.el=Ce.createElement(xe(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(t);else{let e=new we(r,this),n=e.u(this.options);e.p(t),this.T(n),this._$AH=e}}_$AC(e){let t=be.get(e.strings);return t===void 0&&be.set(e.strings,t=new Ce(e)),t}k(t){fe(this._$AH)||(this._$AH=[],this._$AR());let n=this._$AH,r,i=0;for(let a of t)i===n.length?n.push(r=new e(this.O(x()),this.O(x()),this,this.options)):r=n[i],r._$AI(a),i++;i<n.length&&(this._$AR(r&&r._$AB.nextSibling,i),n.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=ce(e).nextSibling;ce(e).remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},j=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,r,i){this.type=1,this._$AH=D,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,n.length>2||n[0]!==``||n[1]!==``?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=D}_$AI(e,t=this,n,r){let i=this.strings,a=!1;if(i===void 0)e=k(this,e,t,0),a=!S(e)||e!==this._$AH&&e!==E,a&&(this._$AH=e);else{let r=e,o,s;for(e=i[0],o=0;o<i.length-1;o++)s=k(this,r[n+o],t,o),s===E&&(s=this._$AH[o]),a||=!S(s)||s!==this._$AH[o],s===D?e=D:e!==D&&(e+=(s??``)+i[o+1]),this._$AH[o]=s}a&&!r&&this.j(e)}j(e){e===D?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??``)}},Te=class extends j{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===D?void 0:e}},Ee=class extends j{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==D)}},De=class extends j{constructor(e,t,n,r,i){super(e,t,n,r,i),this.type=5}_$AI(e,t=this){if((e=k(this,e,t,0)??D)===E)return;let n=this._$AH,r=e===D&&n!==D||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,i=e!==D&&(n===D||r);r&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH==`function`?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},Oe=class{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){k(this,e)}};const ke={M:ue,P:v,A:y,C:1,L:Se,R:we,D:pe,V:k,I:A,H:j,N:Ee,U:De,B:Te,F:Oe},Ae=g.litHtmlPolyfillSupport;Ae?.(Ce,A),(g.litHtmlVersions??=[]).push(`3.3.3`);const je=(e,t,n)=>{let r=n?.renderBefore??t,i=r._$litPart$;if(i===void 0){let e=n?.renderBefore??null;r._$litPart$=i=new A(t.insertBefore(x(),e),e,void 0,n??{})}return i._$AI(e),i},M=globalThis
|
|
20
20
|
/**
|
|
21
21
|
* @license
|
|
22
22
|
* Copyright 2017 Google LLC
|
|
23
23
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
24
24
|
*/
|
|
25
|
-
;var
|
|
25
|
+
;var N=class extends h{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=je(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return E}};N._$litElement$=!0,N.finalized=!0,M.litElementHydrateSupport?.({LitElement:N});const Me=M.litElementPolyfillSupport;Me?.({LitElement:N}),(M.litElementVersions??=[]).push(`4.2.2`);var Ne=Object.defineProperty,Pe=(e,t,n)=>t in e?Ne(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,P=(e,t,n)=>(Pe(e,typeof t==`symbol`?t:t+``,n),n),Fe=(e,t,n)=>{if(!t.has(e))throw TypeError(`Cannot `+n)},F=(e,t)=>{if(Object(t)!==t)throw TypeError(`Cannot use the "in" operator on this value`);return e.has(t)},I=(e,t,n)=>{if(t.has(e))throw TypeError(`Cannot add the same private member more than once`);t instanceof WeakSet?t.add(e):t.set(e,n)},Ie=(e,t,n)=>(Fe(e,t,`access private method`),n);
|
|
26
26
|
/**
|
|
27
27
|
* @license
|
|
28
28
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -30,7 +30,7 @@ const g=globalThis,ce=e=>e,_=g.trustedTypes,le=_?_.createPolicy(`lit-html`,{crea
|
|
|
30
30
|
* Use of this source code is governed by an MIT-style license that can be
|
|
31
31
|
* found in the LICENSE file at https://angular.io/license
|
|
32
32
|
*/
|
|
33
|
-
function
|
|
33
|
+
function Le(e,t){return Object.is(e,t)}
|
|
34
34
|
/**
|
|
35
35
|
* @license
|
|
36
36
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -38,7 +38,7 @@ function Ie(e,t){return Object.is(e,t)}
|
|
|
38
38
|
* Use of this source code is governed by an MIT-style license that can be
|
|
39
39
|
* found in the LICENSE file at https://angular.io/license
|
|
40
40
|
*/
|
|
41
|
-
let
|
|
41
|
+
let L=null,R=!1,z=1;const B=Symbol(`SIGNAL`);function V(e){let t=L;return L=e,t}function Re(){return L}function ze(){return R}const H={version:0,lastCleanEpoch:0,dirty:!1,producerNode:void 0,producerLastReadVersion:void 0,producerIndexOfThis:void 0,nextProducerIndex:0,liveConsumerNode:void 0,liveConsumerIndexOfThis:void 0,consumerAllowSignalWrites:!1,consumerIsAlwaysLive:!1,producerMustRecompute:()=>!1,producerRecomputeValue:()=>{},consumerMarkedDirty:()=>{},consumerOnSignalRead:()=>{}};function U(e){if(R)throw Error(typeof ngDevMode<`u`&&ngDevMode?`Assertion error: signal read during notification phase`:``);if(L===null)return;L.consumerOnSignalRead(e);let t=L.nextProducerIndex++;if(K(L),t<L.producerNode.length&&L.producerNode[t]!==e&&G(L)){let e=L.producerNode[t];W(e,L.producerIndexOfThis[t])}L.producerNode[t]!==e&&(L.producerNode[t]=e,L.producerIndexOfThis[t]=G(L)?Je(e,L,t):0),L.producerLastReadVersion[t]=e.version}function Be(){z++}function Ve(e){if(!(!e.dirty&&e.lastCleanEpoch===z)){if(!e.producerMustRecompute(e)&&!qe(e)){e.dirty=!1,e.lastCleanEpoch=z;return}e.producerRecomputeValue(e),e.dirty=!1,e.lastCleanEpoch=z}}function He(e){if(e.liveConsumerNode===void 0)return;let t=R;R=!0;try{for(let t of e.liveConsumerNode)t.dirty||We(t)}finally{R=t}}function Ue(){return L?.consumerAllowSignalWrites!==!1}function We(e){var t;e.dirty=!0,He(e),(t=e.consumerMarkedDirty)==null||t.call(e.wrapper??e)}function Ge(e){return e&&(e.nextProducerIndex=0),V(e)}function Ke(e,t){if(V(t),!(!e||e.producerNode===void 0||e.producerIndexOfThis===void 0||e.producerLastReadVersion===void 0)){if(G(e))for(let t=e.nextProducerIndex;t<e.producerNode.length;t++)W(e.producerNode[t],e.producerIndexOfThis[t]);for(;e.producerNode.length>e.nextProducerIndex;)e.producerNode.pop(),e.producerLastReadVersion.pop(),e.producerIndexOfThis.pop()}}function qe(e){K(e);for(let t=0;t<e.producerNode.length;t++){let n=e.producerNode[t],r=e.producerLastReadVersion[t];if(r!==n.version||(Ve(n),r!==n.version))return!0}return!1}function Je(e,t,n){var r;if(Ye(e),K(e),e.liveConsumerNode.length===0){(r=e.watched)==null||r.call(e.wrapper);for(let t=0;t<e.producerNode.length;t++)e.producerIndexOfThis[t]=Je(e.producerNode[t],e,t)}return e.liveConsumerIndexOfThis.push(n),e.liveConsumerNode.push(t)-1}function W(e,t){var n;if(Ye(e),K(e),typeof ngDevMode<`u`&&ngDevMode&&t>=e.liveConsumerNode.length)throw Error(`Assertion error: active consumer index ${t} is out of bounds of ${e.liveConsumerNode.length} consumers)`);if(e.liveConsumerNode.length===1){(n=e.unwatched)==null||n.call(e.wrapper);for(let t=0;t<e.producerNode.length;t++)W(e.producerNode[t],e.producerIndexOfThis[t])}let r=e.liveConsumerNode.length-1;if(e.liveConsumerNode[t]=e.liveConsumerNode[r],e.liveConsumerIndexOfThis[t]=e.liveConsumerIndexOfThis[r],e.liveConsumerNode.length--,e.liveConsumerIndexOfThis.length--,t<e.liveConsumerNode.length){let n=e.liveConsumerIndexOfThis[t],r=e.liveConsumerNode[t];K(r),r.producerIndexOfThis[n]=t}}function G(e){return e.consumerIsAlwaysLive||(e?.liveConsumerNode?.length??0)>0}function K(e){e.producerNode??=[],e.producerIndexOfThis??=[],e.producerLastReadVersion??=[]}function Ye(e){e.liveConsumerNode??=[],e.liveConsumerIndexOfThis??=[]}
|
|
42
42
|
/**
|
|
43
43
|
* @license
|
|
44
44
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -46,7 +46,7 @@ let R=null,z=!1,B=1;const V=Symbol(`SIGNAL`);function H(e){let t=R;return R=e,t}
|
|
|
46
46
|
* Use of this source code is governed by an MIT-style license that can be
|
|
47
47
|
* found in the LICENSE file at https://angular.io/license
|
|
48
48
|
*/
|
|
49
|
-
function
|
|
49
|
+
function Xe(e){if(Ve(e),U(e),e.value===et)throw e.error;return e.value}function Ze(e){let t=Object.create(tt);t.computation=e;let n=()=>Xe(t);return n[B]=t,n}const Qe=Symbol(`UNSET`),$e=Symbol(`COMPUTING`),et=Symbol(`ERRORED`),tt={...H,value:Qe,dirty:!0,error:null,equal:Le,producerMustRecompute(e){return e.value===Qe||e.value===$e},producerRecomputeValue(e){if(e.value===$e)throw Error(`Detected cycle in computations.`);let t=e.value;e.value=$e;let n=Ge(e),r,i=!1;try{r=e.computation.call(e.wrapper),i=t!==Qe&&t!==et&&e.equal.call(e.wrapper,t,r)}catch(t){r=et,e.error=t}finally{Ke(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};
|
|
50
50
|
/**
|
|
51
51
|
* @license
|
|
52
52
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -54,7 +54,7 @@ function Ye(e){if(Be(e),W(e),e.value===$e)throw e.error;return e.value}function
|
|
|
54
54
|
* Use of this source code is governed by an MIT-style license that can be
|
|
55
55
|
* found in the LICENSE file at https://angular.io/license
|
|
56
56
|
*/
|
|
57
|
-
function
|
|
57
|
+
function nt(){throw Error()}let rt=nt;function it(){rt()}
|
|
58
58
|
/**
|
|
59
59
|
* @license
|
|
60
60
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -62,7 +62,7 @@ function tt(){throw Error()}let nt=tt;function rt(){nt()}
|
|
|
62
62
|
* Use of this source code is governed by an MIT-style license that can be
|
|
63
63
|
* found in the LICENSE file at https://angular.io/license
|
|
64
64
|
*/
|
|
65
|
-
function
|
|
65
|
+
function at(e){let t=Object.create(ct);t.value=e;let n=()=>(U(t),t.value);return n[B]=t,n}function ot(){return U(this),this.value}function st(e,t){Ue()||it(),e.equal.call(e.wrapper,e.value,t)||(e.value=t,lt(e))}const ct={...H,equal:Le,value:void 0};function lt(e){e.version++,Be(),He(e)}
|
|
66
66
|
/**
|
|
67
67
|
* @license
|
|
68
68
|
* Copyright 2024 Bloomberg Finance L.P.
|
|
@@ -79,35 +79,35 @@ function it(e){let t=Object.create(st);t.value=e;let n=()=>(W(t),t.value);return
|
|
|
79
79
|
* See the License for the specific language governing permissions and
|
|
80
80
|
* limitations under the License.
|
|
81
81
|
*/
|
|
82
|
-
const
|
|
82
|
+
const q=Symbol(`node`);var J;(e=>{var t,n,r,i;class a{constructor(r,i={}){I(this,n),P(this,t);let a=at(r)[B];if(this[q]=a,a.wrapper=this,i){let t=i.equals;t&&(a.equal=t),a.watched=i[e.subtle.watched],a.unwatched=i[e.subtle.unwatched]}}get(){if(!(0,e.isState)(this))throw TypeError(`Wrong receiver type for Signal.State.prototype.get`);return ot.call(this[q])}set(t){if(!(0,e.isState)(this))throw TypeError(`Wrong receiver type for Signal.State.prototype.set`);if(ze())throw Error(`Writes to signals not permitted during Watcher callback`);let n=this[q];st(n,t)}}t=q,n=new WeakSet,e.isState=e=>typeof e==`object`&&F(n,e),e.State=a;class o{constructor(t,n){I(this,i),P(this,r);let a=Ze(t)[B];if(a.consumerAllowSignalWrites=!0,this[q]=a,a.wrapper=this,n){let t=n.equals;t&&(a.equal=t),a.watched=n[e.subtle.watched],a.unwatched=n[e.subtle.unwatched]}}get(){if(!(0,e.isComputed)(this))throw TypeError(`Wrong receiver type for Signal.Computed.prototype.get`);return Xe(this[q])}}r=q,i=new WeakSet,e.isComputed=e=>typeof e==`object`&&F(i,e),e.Computed=o,(t=>{var n,r,i,a;function o(e){let t,n=null;try{n=V(null),t=e()}finally{V(n)}return t}t.untrack=o;function s(t){if(!(0,e.isComputed)(t)&&!(0,e.isWatcher)(t))throw TypeError(`Called introspectSources without a Computed or Watcher argument`);return t[q].producerNode?.map(e=>e.wrapper)??[]}t.introspectSources=s;function c(t){if(!(0,e.isComputed)(t)&&!(0,e.isState)(t))throw TypeError(`Called introspectSinks without a Signal argument`);return t[q].liveConsumerNode?.map(e=>e.wrapper)??[]}t.introspectSinks=c;function l(t){if(!(0,e.isComputed)(t)&&!(0,e.isState)(t))throw TypeError(`Called hasSinks without a Signal argument`);let n=t[q].liveConsumerNode;return n?n.length>0:!1}t.hasSinks=l;function u(t){if(!(0,e.isComputed)(t)&&!(0,e.isWatcher)(t))throw TypeError(`Called hasSources without a Computed or Watcher argument`);let n=t[q].producerNode;return n?n.length>0:!1}t.hasSources=u;class d{constructor(e){I(this,r),I(this,i),P(this,n);let t=Object.create(H);t.wrapper=this,t.consumerMarkedDirty=e,t.consumerIsAlwaysLive=!0,t.consumerAllowSignalWrites=!1,t.producerNode=[],this[q]=t}watch(...t){if(!(0,e.isWatcher)(this))throw TypeError(`Called unwatch without Watcher receiver`);Ie(this,i,a).call(this,t);let n=this[q];n.dirty=!1;let r=V(n);for(let e of t)U(e[q]);V(r)}unwatch(...t){if(!(0,e.isWatcher)(this))throw TypeError(`Called unwatch without Watcher receiver`);Ie(this,i,a).call(this,t);let n=this[q];K(n);for(let e=n.producerNode.length-1;e>=0;e--)if(t.includes(n.producerNode[e].wrapper)){W(n.producerNode[e],n.producerIndexOfThis[e]);let t=n.producerNode.length-1;if(n.producerNode[e]=n.producerNode[t],n.producerIndexOfThis[e]=n.producerIndexOfThis[t],n.producerNode.length--,n.producerIndexOfThis.length--,n.nextProducerIndex--,e<n.producerNode.length){let t=n.producerIndexOfThis[e],r=n.producerNode[e];Ye(r),r.liveConsumerIndexOfThis[t]=e}}}getPending(){if(!(0,e.isWatcher)(this))throw TypeError(`Called getPending without Watcher receiver`);return this[q].producerNode.filter(e=>e.dirty).map(e=>e.wrapper)}}n=q,r=new WeakSet,i=new WeakSet,a=function(t){for(let n of t)if(!(0,e.isComputed)(n)&&!(0,e.isState)(n))throw TypeError(`Called watch/unwatch without a Computed or State argument`)},e.isWatcher=e=>F(r,e),t.Watcher=d;function ee(){return Re()?.wrapper}t.currentComputed=ee,t.watched=Symbol(`watched`),t.unwatched=Symbol(`unwatched`)})(e.subtle||={})})(J||={});
|
|
83
83
|
/**
|
|
84
84
|
* @license
|
|
85
85
|
* Copyright 2023 Google LLC
|
|
86
86
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
87
|
-
*/let
|
|
87
|
+
*/let ut=!1;const dt=new J.subtle.Watcher(()=>{ut||(ut=!0,queueMicrotask(()=>{ut=!1;for(let e of dt.getPending())e.get();dt.watch()}))}),ft=Symbol(`SignalWatcherBrand`),pt=new FinalizationRegistry(e=>{e.unwatch(...J.subtle.introspectSources(e))}),mt=new WeakMap;function ht(e){return!0===e[ft]?(console.warn(`SignalWatcher should not be applied to the same class more than once.`),e):class extends e{constructor(){super(...arguments),this._$St=new Map,this._$So=new J.State(0),this._$Si=!1}_$Sl(){var e;let t=[],n=[];this._$St.forEach((e,r)=>{(e?.beforeUpdate?t:n).push(r)});let r=this.h?.getPending().filter(e=>e!==this._$Su&&!this._$St.has(e));t.forEach(e=>e.get()),(e=this._$Su)==null||e.get(),r.forEach(e=>e.get()),n.forEach(e=>e.get())}_$Sv(){this.isUpdatePending||queueMicrotask(()=>{this.isUpdatePending||this._$Sl()})}_$S_(){if(this.h!==void 0)return;this._$Su=new J.Computed(()=>{this._$So.get(),super.performUpdate()});let e=this.h=new J.subtle.Watcher(function(){let e=mt.get(this);e!==void 0&&(!1===e._$Si&&(new Set(this.getPending()).has(e._$Su)?e.requestUpdate():e._$Sv()),this.watch())});mt.set(e,this),pt.register(this,e),e.watch(this._$Su),e.watch(...Array.from(this._$St).map(([e])=>e))}_$Sp(){if(this.h===void 0)return;let e=!1;this.h.unwatch(...J.subtle.introspectSources(this.h).filter(t=>{let n=!0!==this._$St.get(t)?.manualDispose;return n&&this._$St.delete(t),e||=!n,n})),e||(this._$Su=void 0,this.h=void 0,this._$St.clear())}updateEffect(e,t){var n;this._$S_();let r=new J.Computed(()=>{e()});return this.h.watch(r),this._$St.set(r,t),(n=t?.beforeUpdate)!=null&&n?J.subtle.untrack(()=>r.get()):this.updateComplete.then(()=>J.subtle.untrack(()=>r.get())),()=>{this._$St.delete(r),this.h.unwatch(r),!1===this.isConnected&&this._$Sp()}}performUpdate(){this.isUpdatePending&&(this._$S_(),this._$Si=!0,this._$So.set(this._$So.get()+1),this._$Si=!1,this._$Sl())}connectedCallback(){super.connectedCallback(),this.requestUpdate()}disconnectedCallback(){super.disconnectedCallback(),queueMicrotask(()=>{!1===this.isConnected&&this._$Sp()})}}}
|
|
88
88
|
/**
|
|
89
89
|
* @license
|
|
90
90
|
* Copyright 2017 Google LLC
|
|
91
91
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
92
92
|
*/
|
|
93
|
-
const
|
|
93
|
+
const gt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},_t=e=>(...t)=>({_$litDirective$:e,values:t});var vt=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,n){this._$Ct=e,this._$AM=t,this._$Ci=n}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}};
|
|
94
94
|
/**
|
|
95
95
|
* @license
|
|
96
96
|
* Copyright 2020 Google LLC
|
|
97
97
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
98
|
-
*/const{I:
|
|
98
|
+
*/const{I:yt}=ke,bt=e=>e.strings===void 0,Y=(e,t)=>{
|
|
99
99
|
/**
|
|
100
100
|
* @license
|
|
101
101
|
* Copyright 2017 Google LLC
|
|
102
102
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
103
103
|
*/
|
|
104
|
-
let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),
|
|
104
|
+
let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),Y(e,t);return!0},X=e=>{let t,n;do{if((t=e._$AM)===void 0)break;n=t._$AN,n.delete(e),e=t}while(n?.size===0)},xt=e=>{for(let t;t=e._$AM;e=t){let n=t._$AN;if(n===void 0)t._$AN=n=new Set;else if(n.has(e))break;n.add(e),wt(t)}};function St(e){this._$AN===void 0?this._$AM=e:(X(this),this._$AM=e,xt(this))}function Ct(e,t=!1,n=0){let r=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(r))for(let e=n;e<r.length;e++)Y(r[e],!1),X(r[e]);else r!=null&&(Y(r,!1),X(r));else Y(this,e)}const wt=e=>{e.type==gt.CHILD&&(e._$AP??=Ct,e._$AQ??=St)};var Tt=class extends vt{constructor(){super(...arguments),this._$AN=void 0}_$AT(e,t,n){super._$AT(e,t,n),xt(this),this.isConnected=e._$AU}_$AO(e,t=!0){e!==this.isConnected&&(this.isConnected=e,e?this.reconnected?.():this.disconnected?.()),t&&(Y(this,e),X(this))}setValue(e){if(bt(this._$Ct))this._$Ct._$AI(e,this);else{let t=[...this._$Ct._$AH];t[this._$Ci]=e,this._$Ct._$AI(t,this,0)}}disconnected(){}reconnected(){}};
|
|
105
105
|
/**
|
|
106
106
|
* @license
|
|
107
107
|
* Copyright 2023 Google LLC
|
|
108
108
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
109
109
|
*/
|
|
110
|
-
let
|
|
110
|
+
let Et=!1;const Dt=new J.subtle.Watcher(async()=>{Et||(Et=!0,queueMicrotask(()=>{Et=!1;for(let e of Dt.getPending())e.get();Dt.watch()}))}),Ot=_t(class extends Tt{_$S_(){this._$Sm===void 0&&(this._$Sj=new J.Computed(()=>{let e=this._$SW?.get();return this.setValue(e),e}),this._$Sm=this._$Sk?.h??Dt,this._$Sm.watch(this._$Sj),J.subtle.untrack(()=>this._$Sj?.get()))}_$Sp(){this._$Sm!==void 0&&(this._$Sm.unwatch(this._$SW),this._$Sm=void 0)}render(e){return J.subtle.untrack(()=>e.get())}update(e,[t]){return this._$Sk??=e.options?.host,t!==this._$SW&&this._$SW!==void 0&&this._$Sp(),this._$SW=t,this._$S_(),J.subtle.untrack(()=>this._$SW.get())}disconnected(){this._$Sp()}reconnected(){this._$S_()}}),Z=(e=>(t,...n)=>e(t,...n.map(e=>e instanceof J.State||e instanceof J.Computed?Ot(e):e)))(T)
|
|
111
111
|
/**
|
|
112
112
|
* @license
|
|
113
113
|
* Copyright 2023 Google LLC
|
|
@@ -118,7 +118,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
118
118
|
* Copyright 2023 Google LLC
|
|
119
119
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
120
120
|
*/
|
|
121
|
-
;
|
|
121
|
+
;J.State,J.Computed;const kt=ht(N);var Q=class extends kt{static{this.styles=[]}getSlottedNodes(e=[]){let t=this.shadowRoot?.querySelector(`slot`);if(!t)return[];let n=t.assignedNodes({flatten:!0});return e.length===0?n:n.filter(t=>e.includes(t.tagName.toLowerCase()))}},At=class{constructor(e,t){this.handleEl=null,this.isDragging=!1,this.rafId=null,this.pendingPosition=null,this.containerRect=null,this.currentPosition=.5,this.prefersReducedMotion=!1,this.onPointerDown=e=>{if(e.button!==0)return;e.preventDefault(),this.isDragging=!0,this.handleEl?.setPointerCapture(e.pointerId);let t=this.handleEl?.parentElement;this.containerRect=t?.getBoundingClientRect()??null,document.addEventListener(`pointermove`,this.onPointerMove),document.addEventListener(`pointerup`,this.onPointerUp),document.addEventListener(`pointercancel`,this.onPointerUp),this.handleEl?.classList.add(`dragging`),this.options.onDragStart(),this.processPointerEvent(e)},this.onPointerMove=e=>{this.isDragging&&this.processPointerEvent(e)},this.flushPosition=()=>{this.rafId=null,this.pendingPosition!==null&&this.isDragging&&(this.currentPosition=this.pendingPosition,this.updateAriaValue(this.currentPosition),this.options.onDrag(this.currentPosition))},this.onPointerUp=e=>{if(!this.isDragging)return;this.isDragging=!1,this.handleEl?.releasePointerCapture(e.pointerId),this.containerRect=null,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null);let t=this.pendingPosition??this.currentPosition;this.currentPosition=t,this.pendingPosition=null,this.updateAriaValue(t),this.options.onDragEnd(t),document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp),this.handleEl?.classList.remove(`dragging`)},this.onKeyDown=e=>{let{orientation:t,keyboardStep:n,keyboardLargeStep:r}=this.options,i=e.shiftKey?r:n,a=0;if(t===`horizontal`?e.key===`ArrowLeft`?a=-i:e.key===`ArrowRight`&&(a=i):e.key===`ArrowUp`?a=-i:e.key===`ArrowDown`&&(a=i),e.key===`Home`){e.preventDefault(),this.currentPosition=0,this.updateAriaValue(0),this.options.onDrag(0),this.options.onDragEnd(0);return}if(e.key===`End`){e.preventDefault(),this.currentPosition=1,this.updateAriaValue(1),this.options.onDrag(1),this.options.onDragEnd(1);return}if(a!==0){e.preventDefault();let t=Math.max(0,Math.min(1,this.currentPosition+a));this.currentPosition=t,this.updateAriaValue(t),this.options.onDrag(t),this.options.onDragEnd(t)}},this.host=e,this.options={handleSelector:t.handleSelector,orientation:t.orientation??`horizontal`,smooth:t.smooth??!0,onDrag:t.onDrag??(()=>{}),onDragStart:t.onDragStart??(()=>{}),onDragEnd:t.onDragEnd??(()=>{}),keyboardStep:t.keyboardStep??.01,keyboardLargeStep:t.keyboardLargeStep??.1},e.addController(this)}hostConnected(){this.prefersReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches}hostUpdated(){this.setupHandle()}hostDisconnected(){this.cleanup()}get shouldSmooth(){return this.options.smooth&&!this.prefersReducedMotion}setupHandle(){let e=this.host.renderRoot.querySelector(this.options.handleSelector);e!==this.handleEl&&(this.handleEl&&(this.handleEl.removeEventListener(`pointerdown`,this.onPointerDown),this.handleEl.removeEventListener(`keydown`,this.onKeyDown)),this.handleEl=e,this.handleEl&&(this.handleEl.addEventListener(`pointerdown`,this.onPointerDown),this.handleEl.addEventListener(`keydown`,this.onKeyDown),this.handleEl.hasAttribute(`tabindex`)||this.handleEl.setAttribute(`tabindex`,`0`),this.handleEl.hasAttribute(`role`)||this.handleEl.setAttribute(`role`,`separator`),this.handleEl.setAttribute(`aria-valuemin`,`0`),this.handleEl.setAttribute(`aria-valuemax`,`100`),this.updateAriaValue(this.currentPosition)))}processPointerEvent(e){if(!this.containerRect)return;let{orientation:t}=this.options,n=this.containerRect,r;if(t===`horizontal`){let t=e.clientX-n.left;r=Math.max(0,Math.min(1,t/n.width))}else{let t=e.clientY-n.top;r=Math.max(0,Math.min(1,t/n.height))}this.pendingPosition=r,this.shouldSmooth&&this.rafId===null&&(this.rafId=requestAnimationFrame(this.flushPosition))}updateAriaValue(e){let t=Math.round(e*100);this.handleEl?.setAttribute(`aria-valuenow`,String(t))}cleanup(){this.handleEl&&(this.handleEl.removeEventListener(`pointerdown`,this.onPointerDown),this.handleEl.removeEventListener(`keydown`,this.onKeyDown)),document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp),this.rafId!==null&&cancelAnimationFrame(this.rafId)}setPosition(e){this.currentPosition=Math.max(0,Math.min(1,e)),this.updateAriaValue(this.currentPosition)}getPosition(){return this.currentPosition}updateOptions(e){Object.assign(this.options,e)}},jt=class extends Q{static{this.styles=[Q.styles,o`
|
|
122
122
|
:host {
|
|
123
123
|
--_offset: var(--offset, 0.5);
|
|
124
124
|
--_handle-size: var(--handle-size, 8px);
|
|
@@ -245,7 +245,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
245
245
|
transition: none;
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
|
-
`]}static{this.properties={position:{type:Number},vertical:{type:Boolean,reflect:!0},discrete:{type:Boolean,reflect:!0},minSize:{type:Number,attribute:`min-size`},maxSize:{type:Number,attribute:`max-size`},keyboardStep:{type:Number,attribute:`keyboard-step`},collapseThreshold:{type:Number,attribute:`collapse-threshold`},snapPoints:{type:String,attribute:`snap-points`},snapDistance:{type:Number,attribute:`snap-distance`},_offset:{state:!0}}}constructor(){super(),this.containerSize=0,this.position=50,this.vertical=!1,this.discrete=!1,this.minSize=100,this.maxSize=0,this.keyboardStep=1,this.collapseThreshold=0,this.snapPoints=``,this.snapDistance=10,this._offset=.5,this.initDragController()}initDragController(){this.dragController=new
|
|
248
|
+
`]}static{this.properties={position:{type:Number},vertical:{type:Boolean,reflect:!0},discrete:{type:Boolean,reflect:!0},minSize:{type:Number,attribute:`min-size`},maxSize:{type:Number,attribute:`max-size`},keyboardStep:{type:Number,attribute:`keyboard-step`},collapseThreshold:{type:Number,attribute:`collapse-threshold`},snapPoints:{type:String,attribute:`snap-points`},snapDistance:{type:Number,attribute:`snap-distance`},_offset:{state:!0}}}constructor(){super(),this.containerSize=0,this.position=50,this.vertical=!1,this.discrete=!1,this.minSize=100,this.maxSize=0,this.keyboardStep=1,this.collapseThreshold=0,this.snapPoints=``,this.snapDistance=10,this._offset=.5,this.initDragController()}initDragController(){this.dragController=new At(this,{handleSelector:`[part="handle"]`,orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,onDragStart:()=>this.handleDragStart(),onDrag:e=>this.handleDrag(e),onDragEnd:e=>this.handleDragEnd(e),keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}willUpdate(e){e.has(`position`)&&!e.has(`_offset`)&&(this._offset=this.position/100,this.dragController.setPosition(this._offset)),(e.has(`vertical`)||e.has(`discrete`)||e.has(`keyboardStep`))&&this.dragController.updateOptions({orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}handleDragStart(){let e=this.renderRoot.querySelector(`.splitter`);if(e){let t=e.getBoundingClientRect();this.containerSize=this.vertical?t.height:t.width}}applyConstraints(e){let t=e;if(this.containerSize>0){let e=this.minSize/this.containerSize,n=this.maxSize>0?this.maxSize/this.containerSize:1-e;t=Math.max(e,Math.min(1-e,t)),t=Math.min(n,t)}if(this.snapPoints&&this.containerSize>0){let e=this.snapPoints.split(`,`).map(e=>parseFloat(e.trim())/100),n=this.snapDistance/this.containerSize;for(let r of e)if(Math.abs(t-r)<n){t=r;break}}if(this.collapseThreshold>0){let e=this.collapseThreshold/100;t<e?t=0:t>1-e&&(t=1)}return t}handleDrag(e){let t=this.applyConstraints(e);this._offset=t,this.style.setProperty(`--_offset`,String(this._offset))}handleDragEnd(e){let t=this.applyConstraints(e);this._offset=t,this.style.setProperty(`--_offset`,String(this._offset)),this.dispatchEvent(new CustomEvent(`split-change`,{detail:{position:this._offset*100},bubbles:!0,composed:!0}))}render(){return T`
|
|
249
249
|
<div class="splitter" part="container" style="--_offset: ${this._offset}">
|
|
250
250
|
<div class="panel panel--start" part="panel-start">
|
|
251
251
|
<slot name="start"></slot>
|
|
@@ -261,7 +261,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
261
261
|
<slot name="end"></slot>
|
|
262
262
|
</div>
|
|
263
263
|
</div>
|
|
264
|
-
`}};customElements.get(`wc-split-panel`)||customElements.define(`wc-split-panel`,
|
|
264
|
+
`}};customElements.get(`wc-split-panel`)||customElements.define(`wc-split-panel`,jt);var Mt=class extends Q{static{this.styles=[Q.styles,o`
|
|
265
265
|
:host {
|
|
266
266
|
--_offset: var(--offset, 0.5);
|
|
267
267
|
--_handle-size: var(--handle-size, 40px);
|
|
@@ -455,7 +455,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
455
455
|
white-space: nowrap;
|
|
456
456
|
border: 0;
|
|
457
457
|
}
|
|
458
|
-
`]}static{this.properties={position:{type:Number},vertical:{type:Boolean,reflect:!0},discrete:{type:Boolean,reflect:!0},keyboardStep:{type:Number,attribute:`keyboard-step`},beforeLabel:{type:String,attribute:`before-label`},afterLabel:{type:String,attribute:`after-label`},_offset:{type:Number,state:!0}}}constructor(){super(),this.init(),this.initDragController()}init(){this.position=50,this.vertical=!1,this.discrete=!1,this.keyboardStep=1,this.beforeLabel=`Before`,this.afterLabel=`After`,this._offset=.5}initDragController(){this.dragController=new
|
|
458
|
+
`]}static{this.properties={position:{type:Number},vertical:{type:Boolean,reflect:!0},discrete:{type:Boolean,reflect:!0},keyboardStep:{type:Number,attribute:`keyboard-step`},beforeLabel:{type:String,attribute:`before-label`},afterLabel:{type:String,attribute:`after-label`},_offset:{type:Number,state:!0}}}constructor(){super(),this.init(),this.initDragController()}init(){this.position=50,this.vertical=!1,this.discrete=!1,this.keyboardStep=1,this.beforeLabel=`Before`,this.afterLabel=`After`,this._offset=.5}initDragController(){this.dragController=new At(this,{handleSelector:`[part="handle"]`,orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,onDrag:e=>this.handleDrag(e),onDragEnd:e=>this.handleDragEnd(e),keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}willUpdate(e){e.has(`position`)&&!e.has(`_offset`)&&(this._offset=this.position/100,this.dragController.setPosition(this._offset)),(e.has(`vertical`)||e.has(`discrete`)||e.has(`keyboardStep`))&&this.dragController.updateOptions({orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}handleDrag(e){this._offset=e,this.style.setProperty(`--_offset`,String(this._offset))}handleDragEnd(e){this._offset=e,this.style.setProperty(`--_offset`,String(this._offset)),this.dispatchEvent(new CustomEvent(`compare-change`,{detail:{position:this._offset*100},bubbles:!0,composed:!0}))}render(){return T`
|
|
459
459
|
<div class="container" part="container" style="--_offset: ${this._offset}">
|
|
460
460
|
<div class="after" part="after" aria-label="${this.afterLabel}">
|
|
461
461
|
<slot name="after"></slot>
|
|
@@ -475,7 +475,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
475
475
|
</div>
|
|
476
476
|
</div>
|
|
477
477
|
</div>
|
|
478
|
-
`}};customElements.get(`wc-image-compare`)||customElements.define(`wc-image-compare`,
|
|
478
|
+
`}};customElements.get(`wc-image-compare`)||customElements.define(`wc-image-compare`,Mt);var Nt=class extends Q{static{this.properties={duration:{type:Number,reflect:!0},exit:{type:Number}}}createRenderRoot(){return this}render(){return E}#e;constructor(){super(),this.duration=0,this.exit=200}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,this.#t),this.duration>0&&(this.#e=setTimeout(()=>this.dismiss(),this.duration))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`click`,this.#t),this.#e&&clearTimeout(this.#e)}#t=e=>{e.target?.closest(`[data-dismiss]`)&&(e.preventDefault(),this.dismiss())};dismiss(){this.#e&&=(clearTimeout(this.#e),void 0);let e=new CustomEvent(`dismiss`,{bubbles:!0,cancelable:!0});if(!this.dispatchEvent(e))return;let t=matchMedia(`(prefers-reduced-motion: reduce)`).matches;if(this.exit<=0||t){this.remove();return}this.style.transition=`opacity ${this.exit}ms ease, scale ${this.exit}ms ease`,this.style.opacity=`0`,this.style.scale=`0.97`;let n=!1,r=()=>{n||(n=!0,this.remove())};this.addEventListener(`transitionend`,r,{once:!0}),setTimeout(r,this.exit+50)}};customElements.get(`wc-dismissable`)||customElements.define(`wc-dismissable`,Nt);var Pt=class extends Q{static{this.styles=[Q.styles,o`
|
|
479
479
|
:host {
|
|
480
480
|
display: inline-flex;
|
|
481
481
|
align-items: center;
|
|
@@ -532,7 +532,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
532
532
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
|
|
533
533
|
color: var(--copy-success-color, oklch(0.6 0.2 145));
|
|
534
534
|
}
|
|
535
|
-
`]}static{this.properties={value:{type:String},label:{type:String},_copied:{type:Boolean,state:!0}}}constructor(){super(),this._handleCopy=async()=>{let e=this.value??this.getSlottedNodes().map(e=>e.textContent).join(``).trim();if(!(e==null||e===``)){console.log(`copying value:`,e);try{await navigator.clipboard.writeText(e),this._copied=!0,this._timeoutId=setTimeout(()=>{this._copied=!1},2e3),this.dispatchEvent(new CustomEvent(`copy`,{detail:{value:this.value},bubbles:!0,composed:!0}))}catch(e){console.error(`Failed to copy:`,e),this.dispatchEvent(new CustomEvent(`copy-error`,{detail:{error:e},bubbles:!0,composed:!0}))}}},this.init()}init(){this.value=void 0,this.label=`Copy to clipboard`,this._copied=!1}disconnectedCallback(){super.disconnectedCallback(),this._timeoutId&&clearTimeout(this._timeoutId)}render(){let e=this._copied?`copy__icon copy__icon--success`:`copy__icon copy__icon--copy`;return
|
|
535
|
+
`]}static{this.properties={value:{type:String},label:{type:String},_copied:{type:Boolean,state:!0}}}constructor(){super(),this._handleCopy=async()=>{let e=this.value??this.getSlottedNodes().map(e=>e.textContent).join(``).trim();if(!(e==null||e===``)){console.log(`copying value:`,e);try{await navigator.clipboard.writeText(e),this._copied=!0,this._timeoutId=setTimeout(()=>{this._copied=!1},2e3),this.dispatchEvent(new CustomEvent(`copy`,{detail:{value:this.value},bubbles:!0,composed:!0}))}catch(e){console.error(`Failed to copy:`,e),this.dispatchEvent(new CustomEvent(`copy-error`,{detail:{error:e},bubbles:!0,composed:!0}))}}},this.init()}init(){this.value=void 0,this.label=`Copy to clipboard`,this._copied=!1}disconnectedCallback(){super.disconnectedCallback(),this._timeoutId&&clearTimeout(this._timeoutId)}render(){let e=this._copied?`copy__icon copy__icon--success`:`copy__icon copy__icon--copy`;return Z`
|
|
536
536
|
<slot></slot>
|
|
537
537
|
<button
|
|
538
538
|
class="copy__button"
|
|
@@ -543,7 +543,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
543
543
|
>
|
|
544
544
|
<span class=${e} part="icon" aria-hidden="true"></span>
|
|
545
545
|
</button>
|
|
546
|
-
`}};customElements.get(`wc-copy`)||customElements.define(`wc-copy`,
|
|
546
|
+
`}};customElements.get(`wc-copy`)||customElements.define(`wc-copy`,Pt);function $(e,t){t()||queueMicrotask(()=>{e.isConnected&&t()})}var Ft=class extends Q{static{this.properties={autoplay:{type:Number,reflect:!0}}}createRenderRoot(){return this}#e=[];#t=[];#n=!1;#r=!1;#i=null;#a=!1;#o=null;#s=!1;init(){this.autoplay=0}constructor(){super(),this.init()}connectedCallback(){super.connectedCallback(),this.hasAttribute(`role`)||this.setAttribute(`role`,`region`),this.hasAttribute(`aria-roledescription`)||this.setAttribute(`aria-roledescription`,`carousel`),$(this,()=>this.#c())}#c(){return this.#e.length>=2?!0:(this.#e=[...this.children].filter(e=>!e.hasAttribute(`slot`)),this.#e.length<2?!1:(this.#n=this.classList.contains(`carousel--auto-pages`),this.#n||(this.#l(),this.#f(),this.addEventListener(`scrollsnapchange`,this.#m)),!this.autoplay&&this.hasAttribute(`autoplay`)&&(this.autoplay=Number(this.getAttribute(`autoplay`))||0),this.#s=matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.autoplay>0&&(this.#b(),this.#s?(this.#a=!0,this.setAttribute(`aria-live`,`polite`),this.#x()):this.#h(),this.addEventListener(`pointerenter`,this.#_),this.addEventListener(`pointerleave`,this.#v),this.addEventListener(`focusin`,this.#_),this.addEventListener(`focusout`,this.#v)),!0))}disconnectedCallback(){super.disconnectedCallback(),this.#n||(this.removeEventListener(`scrollsnapchange`,this.#m),this.#d()),this.removeEventListener(`pointerenter`,this.#_),this.removeEventListener(`pointerleave`,this.#v),this.removeEventListener(`focusin`,this.#_),this.removeEventListener(`focusout`,this.#v),this.#g(),this.#o&&=(this.#o.removeEventListener(`click`,this.#y),this.#o.hasAttribute(`slot`)||this.#o.remove(),null),this.removeAttribute(`aria-live`)}#l(){let e=[],t=[];for(let n=0;n<this.#e.length;n++){let r=this.#e[n];e.push(this.#u(r,n)),t.push(this.#u(r,n))}for(let t=e.length-1;t>=0;t--)this.prepend(e[t]);for(let e of t)this.append(e);this.#t=[...e,...t]}#u(e,t){let n=e.cloneNode(!0);n.setAttribute(`data-carousel-clone`,String(t)),n.setAttribute(`aria-hidden`,`true`);for(let e of[n,...n.querySelectorAll(`[tabindex], a, button, input, select, textarea`)])e.tabIndex=-1;return n}#d(){for(let e of this.#t)e.remove();this.#t=[]}#f(){requestAnimationFrame(()=>{let e=this.#e[0];e&&(this.style.scrollBehavior=`auto`,this.scrollLeft=e.offsetLeft-this.offsetLeft-(parseFloat(getComputedStyle(this).scrollPaddingLeft)||0)+(parseFloat(getComputedStyle(this).paddingLeft)||0),requestAnimationFrame(()=>{this.style.scrollBehavior=``}))})}#p(){this.scrollBy({left:this.clientWidth,behavior:`smooth`})}#m=e=>{if(this.#r){this.#r=!1;return}let t=e.snapTargetInline;if(!t||!t.hasAttribute(`data-carousel-clone`))return;let n=Number(t.getAttribute(`data-carousel-clone`)),r=this.#e[n];if(!r)return;let i=r.offsetLeft-t.offsetLeft;this.#r=!0,this.style.scrollBehavior=`auto`,this.scrollLeft+=i,requestAnimationFrame(()=>{this.style.scrollBehavior=``})};#h(){this.#i||this.autoplay<=0||(this.#a=!1,this.#i=setInterval(()=>this.#p(),this.autoplay),this.setAttribute(`aria-live`,`off`),this.#x())}#g(){this.#i&&=(clearInterval(this.#i),null)}#_=()=>{this.#g(),this.#a=!0,this.setAttribute(`aria-live`,`polite`),this.#x()};#v=()=>{this.#s||this.#h()};#y=()=>{this.#a?(this.#s=!1,this.#h()):this.#_()};#b(){let e=this.querySelector(`[slot="autoplay"]`);if(e)this.#o=e;else{let e=document.createElement(`button`);e.type=`button`,this.append(e),this.#o=e}this.#o.setAttribute(`part`,`autoplay`),this.#o.addEventListener(`click`,this.#y),this.#x()}#x(){this.#o&&(this.#o.setAttribute(`aria-label`,this.#a?`Play`:`Pause`),this.#o.setAttribute(`aria-pressed`,String(!this.#a)),this.#o.hasAttribute(`slot`)||(this.#o.textContent=this.#a?`▶`:`⏸`))}};customElements.get(`wc-carousel`)||customElements.define(`wc-carousel`,Ft);var It=class extends Q{static{this.properties={breakpoint:{type:String,reflect:!0},projection:{type:Boolean,reflect:!0},singular:{type:Boolean,reflect:!0}}}createRenderRoot(){return this}#e=[];#t=[];#n=[];#r=null;#i=null;#a=null;#o=[];#s=[];#c=0;#l=!1;#u=null;#d=0;init(){this.breakpoint=`40rem`,this.projection=!1,this.singular=!1}constructor(){super(),this.init()}connectedCallback(){super.connectedCallback(),$(this,()=>this.#f())}#f(){return this.#r?!0:(this.#p(),this.#e.length===0?!1:(this.#h(),this.projection&&(this.#m(),this.#g(),this.#_(),this.singular&&(this.classList.add(`entries--singular`),this.#y(0))),this.#d=this.#x(),this.#S(),!0))}disconnectedCallback(){super.disconnectedCallback(),this.#u?.disconnect(),this.#u=null,this.#a?.remove(),this.#a=null,this.#o=[],this.#i?this.#i.remove():this.#r?.remove(),this.#r=null,this.#i=null,this.#s=[],this.classList.remove(`entries--wide`,`entries--projection`,`entries--singular`)}#p(){this.#e=[];let e=new Set,t=new Map,n=null;for(let r of this.children){let i=r.tagName.toLowerCase();if(/^h[1-6]$/.test(i))n=r;else if(i===`dl`&&n){let i=new Map,a=r.querySelectorAll(`dt`),o=r.querySelectorAll(`dd`);for(let n=0;n<a.length;n++){let r=a[n],s=r.textContent?.trim()??``,c=o[n]?.innerHTML??``;if(s){i.set(s,c),e.add(s);let n=r.getAttribute(`data-label`);n&&!t.has(s)&&t.set(s,n)}}this.#e.push({title:n.innerHTML,heading:n,dl:r,properties:i}),n=null}}this.#t=[...e],this.#n=this.#t.map(e=>t.get(e)??e)}#m(){this.classList.add(`entries--projection`)}#h(){let e=document.createElement(`table`);e.classList.add(`entries__table`),e.setAttribute(`aria-hidden`,`true`);let t=document.createElement(`thead`),n=document.createElement(`tr`),r=document.createElement(`th`);r.textContent=``,n.appendChild(r),this.#s=[];for(let e of this.#t){let t=document.createElement(`th`);t.textContent=e,n.appendChild(t),this.#s.push(t)}t.appendChild(n),e.appendChild(t);let i=document.createElement(`tbody`);for(let e of this.#e){let t=document.createElement(`tr`),n=document.createElement(`td`);n.innerHTML=e.title,n.style.fontWeight=`600`,t.appendChild(n);for(let n of this.#t){let r=document.createElement(`td`);r.innerHTML=e.properties.get(n)??``,t.appendChild(r)}i.appendChild(t)}e.appendChild(i),this.appendChild(e),this.#r=e}#g(){if(!this.#r)return;let e=document.createElement(`div`);e.classList.add(`entries__scroll`),this.#r.replaceWith(e),e.appendChild(this.#r),this.#i=e}#_(){let e=document.createElement(`nav`);e.classList.add(`entries__nav`),e.setAttribute(`aria-label`,`Column selector`),e.setAttribute(`aria-hidden`,`true`),this.#o=this.#t.map((t,n)=>{let r=document.createElement(`button`);return r.type=`button`,r.classList.add(`entries__nav-btn`),r.textContent=this.#n[n]??t,r.setAttribute(`aria-pressed`,String(n===0)),r.addEventListener(`click`,()=>this.#v(n)),e.appendChild(r),r}),this.#i.before(e),this.#a=e}#v(e){this.#c=e;for(let t=0;t<this.#o.length;t++)this.#o[t]?.setAttribute(`aria-pressed`,String(t===e));if(this.singular)this.#y(e);else{let t=this.#s[e];t&&this.#i&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`start`})}this.dispatchEvent(new CustomEvent(`entries-column-change`,{detail:{column:e,header:this.#t[e]},bubbles:!0,composed:!0}))}#y(e){if(!this.#r)return;let t=e+1;for(let e of this.#r.rows)for(let n=1;n<e.cells.length;n++){let r=e.cells[n];r&&(r.hidden=n!==t)}}#b(){if(this.#r)for(let e of this.#r.rows)for(let t=1;t<e.cells.length;t++){let n=e.cells[t];n&&(n.hidden=!1)}}#x(){let e=this.breakpoint||`40rem`,t=document.createElement(`div`);t.style.width=e,t.style.position=`absolute`,t.style.visibility=`hidden`,this.appendChild(t);let n=t.offsetWidth;return t.remove(),n}#S(){this.#u=new ResizeObserver(this.#C),this.#u.observe(this)}#C=e=>{let t=e[0];if(!t)return;let n=t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width;this.#l=n>=this.#d,this.#l?(this.classList.add(`entries--wide`),this.singular&&this.projection&&this.#b()):(this.classList.remove(`entries--wide`),this.singular&&this.projection&&this.#y(this.#c))}};customElements.get(`wc-entries`)||customElements.define(`wc-entries`,It);const Lt=`vitops:consent`;var Rt=class e extends Q{static{this.styles=[Q.styles,o`
|
|
547
547
|
:host {
|
|
548
548
|
display: none;
|
|
549
549
|
}
|
|
@@ -641,7 +641,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
641
641
|
transition: none;
|
|
642
642
|
}
|
|
643
643
|
}
|
|
644
|
-
`]}static{this.properties={scheme:{type:String,reflect:!0}}}constructor(){super(),this._mediaQuery=null,this._boundMediaHandler=null,this.init()}init(){this.scheme=e.readStored()??`system`}static{this.STORAGE_KEY=`vitops-color-scheme`}static readStored(){try{let t=localStorage.getItem(e.STORAGE_KEY);return t===`light`||t===`dark`||t===`system`?t:null}catch{return null}}_persist(){try{this.scheme===`system`?localStorage.removeItem(e.STORAGE_KEY):localStorage.setItem(e.STORAGE_KEY,this.scheme)}catch{}}connectedCallback(){super.connectedCallback(),this._mediaQuery=window.matchMedia(`(prefers-color-scheme: dark)`),this._boundMediaHandler=this._handleMediaChange.bind(this),this._mediaQuery.addEventListener(`change`,this._boundMediaHandler),this._applyColorScheme()}disconnectedCallback(){super.disconnectedCallback(),this._mediaQuery&&this._boundMediaHandler&&this._mediaQuery.removeEventListener(`change`,this._boundMediaHandler)}_handleMediaChange(e){this.scheme===`system`&&this.requestUpdate()}_applyColorScheme(){let e=document.documentElement;this.scheme===`system`?(e.style.removeProperty(`color-scheme`),delete e.dataset.theme):(e.style.colorScheme=`${this.scheme} only`,e.dataset.theme=this.scheme)}_handleSegmentClick(e){this.scheme!==e&&(this.scheme=e,this._applyColorScheme(),this._persist(),this.dispatchEvent(new CustomEvent(`scheme-change`,{detail:{scheme:this.scheme},bubbles:!0,composed:!0})))}updated(e){e.has(`scheme`)&&this._applyColorScheme()}render(){return
|
|
644
|
+
`]}static{this.properties={scheme:{type:String,reflect:!0}}}constructor(){super(),this._mediaQuery=null,this._boundMediaHandler=null,this._onConsent=()=>{window.vitopsConsent?.granted(`preferences`)&&this._write()},this.init()}init(){this.scheme=e.readStored()??`system`}static{this.STORAGE_KEY=`vitops-color-scheme`}static readStored(){try{let t=localStorage.getItem(e.STORAGE_KEY);return t===`light`||t===`dark`||t===`system`?t:null}catch{return null}}_persist(){let e=window.vitopsConsent;(!e||e.require(`preferences`))&&this._write()}_write(){try{this.scheme===`system`?localStorage.removeItem(e.STORAGE_KEY):localStorage.setItem(e.STORAGE_KEY,this.scheme)}catch{}}connectedCallback(){super.connectedCallback(),this._mediaQuery=window.matchMedia(`(prefers-color-scheme: dark)`),this._boundMediaHandler=this._handleMediaChange.bind(this),this._mediaQuery.addEventListener(`change`,this._boundMediaHandler),document.addEventListener(Lt,this._onConsent),this._applyColorScheme()}disconnectedCallback(){super.disconnectedCallback(),this._mediaQuery&&this._boundMediaHandler&&this._mediaQuery.removeEventListener(`change`,this._boundMediaHandler),document.removeEventListener(Lt,this._onConsent)}_handleMediaChange(e){this.scheme===`system`&&this.requestUpdate()}_applyColorScheme(){let e=document.documentElement;this.scheme===`system`?(e.style.removeProperty(`color-scheme`),delete e.dataset.theme):(e.style.colorScheme=`${this.scheme} only`,e.dataset.theme=this.scheme)}_handleSegmentClick(e){this.scheme!==e&&(this.scheme=e,this._applyColorScheme(),this._persist(),this.dispatchEvent(new CustomEvent(`scheme-change`,{detail:{scheme:this.scheme},bubbles:!0,composed:!0})))}updated(e){e.has(`scheme`)&&this._applyColorScheme()}render(){return Z`
|
|
645
645
|
<div class="toggle__group" role="group" aria-label="Color scheme" part="group">
|
|
646
646
|
<button
|
|
647
647
|
class="toggle__segment"
|
|
@@ -674,7 +674,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
674
674
|
<span class="toggle__label">Dark</span>
|
|
675
675
|
</button>
|
|
676
676
|
</div>
|
|
677
|
-
`}};customElements.get(`color-scheme-toggle`)||customElements.define(`color-scheme-toggle`,
|
|
677
|
+
`}};customElements.get(`wc-color-scheme-toggle`)||customElements.define(`wc-color-scheme-toggle`,Rt);var zt=class extends Q{static{this.styles=[Q.styles,o`
|
|
678
678
|
:host {
|
|
679
679
|
--_gap: var(--multi-field-gap, 0.5rem);
|
|
680
680
|
--_input-padding: var(--multi-field-input-padding, 0.5rem 0.75rem);
|
|
@@ -828,14 +828,14 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
828
828
|
transition: none;
|
|
829
829
|
}
|
|
830
830
|
}
|
|
831
|
-
`]}static{this.properties={name:{type:String},type:{type:String},placeholder:{type:String},protectDefaults:{type:Boolean,attribute:`protect-defaults`},min:{type:Number},max:{type:Number},addLabel:{type:String,attribute:`add-label`},clearLabel:{type:String,attribute:`clear-label`},deleteLabel:{type:String,attribute:`delete-label`},_entries:{type:Array,state:!0},_initialized:{type:Boolean,state:!0}}}constructor(){super(),this._handleAdd=()=>{if(this.max>0&&this._entries.length>=this.max)return;let e={id:this._generateId(),value:``,isDefault:!1};this._entries=[...this._entries,e],this.dispatchEvent(new CustomEvent(`multi-field-add`,{bubbles:!0,composed:!0})),this._dispatchChange(),this.updateComplete.then(()=>{let e=this.renderRoot.querySelectorAll(`.entry__input`);e[e.length-1]?.focus()})},this._handleClear=()=>{let e;for(e=this.protectDefaults?this._entries.filter(e=>e.isDefault):[];e.length<this.min;)e.push({id:this._generateId(),value:``,isDefault:!1});this._entries=e,this.dispatchEvent(new CustomEvent(`multi-field-clear`,{bubbles:!0,composed:!0})),this._dispatchChange()},this.init()}init(){this.name=void 0,this.type=`text`,this.placeholder=``,this.protectDefaults=!1,this.min=1,this.max=0,this.addLabel=`Add`,this.clearLabel=`Clear`,this.deleteLabel=`Delete`,this._entries=[],this._initialized=!1,this._idCounter=0}_generateId(){return`entry-${++this._idCounter}`}_initializeFromSlot(){if(this._initialized)return;let e=this.getSlottedNodes([`input`]),t=[];for(let n of e){let e=n,r=e.value||e.getAttribute(`value`)||``;t.push({id:this._generateId(),value:r,isDefault:!0})}for(;t.length<this.min;)t.push({id:this._generateId(),value:``,isDefault:!1});t.length===0&&t.push({id:this._generateId(),value:``,isDefault:!1}),this._entries=t,this._initialized=!0}firstUpdated(){this._initializeFromSlot()}willUpdate(e){if(e.has(`min`)&&this._initialized)for(;this._entries.length<this.min;)this._entries=[...this._entries,{id:this._generateId(),value:``,isDefault:!1}]}_getValues(){return this._entries.map(e=>e.value)}_dispatchChange(){this.dispatchEvent(new CustomEvent(`multi-field-change`,{detail:{values:this._getValues()},bubbles:!0,composed:!0}))}_handleInput(e,t){let n=t.target;this._entries=this._entries.map(t=>t.id===e?{...t,value:n.value}:t),this._dispatchChange()}_handleDelete(e){let t=this._entries.find(t=>t.id===e);if(!t||this.protectDefaults&&t.isDefault||this._entries.length<=this.min)return;let n=t.value;this._entries=this._entries.filter(t=>t.id!==e),this.dispatchEvent(new CustomEvent(`multi-field-delete`,{detail:{value:n},bubbles:!0,composed:!0})),this._dispatchChange()}_canDelete(e){return!(this._entries.length<=this.min||this.protectDefaults&&e.isDefault)}_canAdd(){return!(this.max>0&&this._entries.length>=this.max)}_canClear(){return this.protectDefaults?this._entries.some(e=>!e.isDefault):this._entries.length>this.min}render(){return
|
|
831
|
+
`]}static{this.properties={name:{type:String},type:{type:String},placeholder:{type:String},protectDefaults:{type:Boolean,attribute:`protect-defaults`},min:{type:Number},max:{type:Number},addLabel:{type:String,attribute:`add-label`},clearLabel:{type:String,attribute:`clear-label`},deleteLabel:{type:String,attribute:`delete-label`},_entries:{type:Array,state:!0},_initialized:{type:Boolean,state:!0}}}constructor(){super(),this._handleAdd=()=>{if(this.max>0&&this._entries.length>=this.max)return;let e={id:this._generateId(),value:``,isDefault:!1};this._entries=[...this._entries,e],this.dispatchEvent(new CustomEvent(`multi-field-add`,{bubbles:!0,composed:!0})),this._dispatchChange(),this.updateComplete.then(()=>{let e=this.renderRoot.querySelectorAll(`.entry__input`);e[e.length-1]?.focus()})},this._handleClear=()=>{let e;for(e=this.protectDefaults?this._entries.filter(e=>e.isDefault):[];e.length<this.min;)e.push({id:this._generateId(),value:``,isDefault:!1});this._entries=e,this.dispatchEvent(new CustomEvent(`multi-field-clear`,{bubbles:!0,composed:!0})),this._dispatchChange()},this.init()}init(){this.name=void 0,this.type=`text`,this.placeholder=``,this.protectDefaults=!1,this.min=1,this.max=0,this.addLabel=`Add`,this.clearLabel=`Clear`,this.deleteLabel=`Delete`,this._entries=[],this._initialized=!1,this._idCounter=0}_generateId(){return`entry-${++this._idCounter}`}_initializeFromSlot(){if(this._initialized)return;let e=this.getSlottedNodes([`input`]),t=[];for(let n of e){let e=n,r=e.value||e.getAttribute(`value`)||``;t.push({id:this._generateId(),value:r,isDefault:!0})}for(;t.length<this.min;)t.push({id:this._generateId(),value:``,isDefault:!1});t.length===0&&t.push({id:this._generateId(),value:``,isDefault:!1}),this._entries=t,this._initialized=!0}firstUpdated(){this._initializeFromSlot()}willUpdate(e){if(e.has(`min`)&&this._initialized)for(;this._entries.length<this.min;)this._entries=[...this._entries,{id:this._generateId(),value:``,isDefault:!1}]}_getValues(){return this._entries.map(e=>e.value)}_dispatchChange(){this.dispatchEvent(new CustomEvent(`multi-field-change`,{detail:{values:this._getValues()},bubbles:!0,composed:!0}))}_handleInput(e,t){let n=t.target;this._entries=this._entries.map(t=>t.id===e?{...t,value:n.value}:t),this._dispatchChange()}_handleDelete(e){let t=this._entries.find(t=>t.id===e);if(!t||this.protectDefaults&&t.isDefault||this._entries.length<=this.min)return;let n=t.value;this._entries=this._entries.filter(t=>t.id!==e),this.dispatchEvent(new CustomEvent(`multi-field-delete`,{detail:{value:n},bubbles:!0,composed:!0})),this._dispatchChange()}_canDelete(e){return!(this._entries.length<=this.min||this.protectDefaults&&e.isDefault)}_canAdd(){return!(this.max>0&&this._entries.length>=this.max)}_canClear(){return this.protectDefaults?this._entries.some(e=>!e.isDefault):this._entries.length>this.min}render(){return Z`
|
|
832
832
|
<div class="container" part="container">
|
|
833
833
|
<div class="initial-slot">
|
|
834
834
|
<slot @slotchange=${this._initializeFromSlot}></slot>
|
|
835
835
|
</div>
|
|
836
836
|
|
|
837
837
|
<div class="entries" part="entries" role="list">
|
|
838
|
-
${this._entries.map(e=>
|
|
838
|
+
${this._entries.map(e=>Z`
|
|
839
839
|
<div class="entry" part="entry" role="listitem">
|
|
840
840
|
<input
|
|
841
841
|
class="entry__input"
|
|
@@ -884,4 +884,4 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
884
884
|
</button>
|
|
885
885
|
</div>
|
|
886
886
|
</div>
|
|
887
|
-
`}};customElements.get(`wc-
|
|
887
|
+
`}};customElements.get(`wc-multi-field`)||customElements.define(`wc-multi-field`,zt);var Bt=class extends Q{createRenderRoot(){return this}#e=null;#t;connectedCallback(){super.connectedCallback(),$(this,()=>this.#n())}#n(){if(this.#e)return!0;let e=this.querySelector(`.marquee__content`);return e?(this.#e=e,this.style.setProperty(`--_marquee-min`,`auto`),this.#r(),this.#t=new ResizeObserver(()=>this.#r()),this.#t.observe(this),!0):!1}disconnectedCallback(){this.#t?.disconnect(),super.disconnectedCallback()}#r(){let e=this.#e;if(!e)return;for(let e of this.querySelectorAll(`[data-marquee-clone]`))e.remove();let t=Number.parseFloat(getComputedStyle(this).columnGap)||0,n=e.getBoundingClientRect().width;if(n<=0)return;this.style.setProperty(`--_marquee-distance`,`${n+t}px`);let r=Math.ceil(this.getBoundingClientRect().width/(n+t))+1;for(let t=0;t<r;t++){let t=e.cloneNode(!0);t.dataset.marqueeClone=``,t.setAttribute(`aria-hidden`,`true`),this.append(t)}}};customElements.get(`wc-marquee`)||customElements.define(`wc-marquee`,Bt);function Vt(e,t){let n=t.trim().toLowerCase();if(!n)return{keep:new Set,hits:0};let r=new Map,i=new Map;for(let t of e){r.set(t.key,t);let e=i.get(t.parent);e?e.push(t):i.set(t.parent,[t])}let a=new Set,o=0,s=e=>{for(let t of i.get(e)??[])a.has(t.key)||(a.add(t.key),s(t.key))};for(let t of e){if(!t.own.includes(n))continue;o++,a.add(t.key),s(t.key);let e=new Set([t.key]),i=r.get(t.parent);for(;i&&!e.has(i.key);)a.add(i.key),e.add(i.key),i=r.get(i.parent)}return{keep:a,hits:o}}var Ht=class extends Q{static{this.properties={label:{type:String,reflect:!0},nofilter:{type:Boolean,reflect:!0}}}createRenderRoot(){return this}render(){return E}#e=null;#t=[];#n=null;#r=null;#i=null;#a=new WeakMap;#o=!1;constructor(){super(),this.label=`Filter`,this.nofilter=!1}connectedCallback(){super.connectedCallback(),$(this,()=>this.#s())}#s(){if(this.#e)return!0;if(!this.isConnected)return!1;if(this.parentElement?.closest(`wc-tree`))return!0;let e=this.querySelector(`.tree`);return e?(this.#e=e,this.#c(),this.#t.length?(this.#f(),window.addEventListener(`hashchange`,this.#m),requestAnimationFrame(()=>this.#h()),!0):(this.#e=null,!1)):!1}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`hashchange`,this.#m),this.#n?.remove(),this.#n=null,this.#r=null,this.#i=null,this.#t=[],this.#e=null}#c(){let e=this.#e?.querySelectorAll(`.tree__item`)??[];this.#t=[...e].map(e=>({key:e,own:this.#l(e),parent:e.parentElement?.closest(`.tree__item`)??null}))}#l(e){let t=[];for(let n of[`:scope > summary`,`:scope > .tree__content`,`:scope > details > summary`]){let r=e.querySelector(n);r?.textContent&&t.push(r.textContent)}for(let n of e.querySelectorAll(`:scope > .tree__desc, :scope > p, :scope > details > .tree__desc, :scope > details > p`))n.textContent&&t.push(n.textContent);return t.join(` `).toLowerCase()}#u(e){return e instanceof HTMLDetailsElement?e:e.querySelector(`:scope > details`)}#d(){return[...this.#e?.querySelectorAll(`details`)??[]]}#f(){let e=document.createElement(`div`);if(e.className=`tree__toolbar cluster`,!this.nofilter){let t=document.createElement(`input`);t.type=`search`,t.className=`tree__filter`,t.placeholder=this.label,t.setAttribute(`aria-label`,this.label),t.addEventListener(`input`,()=>this.filter(t.value));let n=document.createElement(`div`);n.className=`input-group tree__filter-group`,n.appendChild(t),e.appendChild(n),this.#r=t}for(let[t,n]of[[`Expand all`,!0],[`Collapse all`,!1]]){let r=document.createElement(`button`);r.type=`button`,r.className=`btn`,r.textContent=t,r.addEventListener(`click`,()=>this.toggleAll(n)),e.appendChild(r)}let t=document.createElement(`span`);t.className=`tree__count font-footnote`,t.setAttribute(`role`,`status`),t.setAttribute(`aria-live`,`polite`),e.appendChild(t),this.#i=t,this.#e?.before(e),this.#n=e}toggleAll(e){for(let t of this.#d())t.open=e}filter(e){let t=e.trim().toLowerCase();if(!t){for(let{key:e}of this.#t)e.hidden=!1;if(this.#o){for(let e of this.#d())e.open=this.#a.get(e)??!1;this.#o=!1}this.#p(``);return}if(!this.#o){for(let e of this.#d())this.#a.set(e,e.open);this.#o=!0}let{keep:n,hits:r}=Vt(this.#t,t);for(let{key:e}of this.#t)e.hidden=!n.has(e);for(let e of n){let t=this.#u(e);t&&(t.open=!0)}this.#p(r===1?`1 match`:`${r} matches`),this.dispatchEvent(new CustomEvent(`tree-filter`,{detail:{query:t,matches:r},bubbles:!0}))}#p(e){this.#i&&(this.#i.textContent=e)}#m=()=>this.#h();#h(){let e=decodeURIComponent(location.hash.slice(1));if(!e)return;let t=this.#e?.ownerDocument.getElementById(e);if(!t||!this.contains(t))return;let n=this.#u(t);n&&(n.open=!0);for(let e=t;e&&(e instanceof HTMLDetailsElement&&(e.open=!0),e!==this);e=e.parentElement);this.#r?.value&&this.filter(this.#r.value=``),t.scrollIntoView({block:`start`,behavior:`smooth`})}};customElements.get(`wc-tree`)||customElements.define(`wc-tree`,Ht);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getvitops/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "The Vitops design-system framework — CSS partials, Lit web components, and browser polyfills.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -32,9 +32,10 @@
|
|
|
32
32
|
"lit": "^3.3.3",
|
|
33
33
|
"scroll-timeline-polyfill": "^1.1.0",
|
|
34
34
|
"temporal-polyfill": "^1.0.1",
|
|
35
|
-
"@getvitops/utils": "
|
|
35
|
+
"@getvitops/utils": "4.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
+
"happy-dom": "^20.0.0",
|
|
38
39
|
"vitest": "^4.1.9"
|
|
39
40
|
}
|
|
40
41
|
}
|