@getvitops/core 8.3.0-alpha.3 → 8.3.0-alpha.4
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 +34 -0
- package/css/layout-utilities.css +13 -0
- package/css/layout.css +23 -0
- package/css/patterns/carousel.css +9 -2
- package/css/patterns/details.css +14 -0
- package/css/patterns/forms.css +14 -1
- package/css/patterns/logos.css +14 -0
- package/css/patterns/section.css +10 -0
- package/css/patterns/sitenav.css +8 -0
- package/css/patterns/steps.css +85 -3
- package/css/patterns/subgrid.css +9 -0
- package/css/patterns/tone.css +16 -4
- package/dist/elements.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
# @getvitops/core
|
|
2
2
|
|
|
3
|
+
## 8.3.0-alpha.4
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 99e66a2: Fixes from the vitops.ca build (alpha.3 findings 1–5, 19, 29).
|
|
8
|
+
|
|
9
|
+
- **Scaffold patterns.** Both templates now define `cta`, `link` and `details` in `patterns.items` (a `content` group too), and a `ui-accent` role. `.cta` had no CSS at all, so every hero, card and callout button rendered as plain text; a test now fails if a template omits a pattern the blocks emit. `vitops_accordion` renders a sprite chevron like `vitops_details`, and `details.css` styles an `.accordion` group (a divider and padded summaries from the `details` pattern tokens) — all formats.
|
|
10
|
+
- **Tone paints only on surfaces.** `.tone` now sets colour variables and `border-color`; the background comes from `.tone--tint` (callout, panel card, hero card, toned section/hero/nav/reviews, `theme`) or `.tone--solid`. A steps, stats or form block with a tone is no longer turned into a band. `ResolvedTone` gains `surface` (`tone tone--tint`). **If you styled `.tone` directly,** add `tone--tint` where you want the background. A `.cta` inside a tinted or filled tone takes the tone's solid. all formats.
|
|
11
|
+
- **`colors.tint: { mix: "8%" }`** derives the tint from the role's solid (`--tone-tint`) instead of its `muted` step, which turns brown for amber on a dark page. Off by default; not covered by the contrast contract.
|
|
12
|
+
- **Per-card backdrop.** `vitops_cards` and `vitops_hero` rows take a `theme` (tint or fill of a site colour), so one card of a pair can be tinted.
|
|
13
|
+
- **`colors.roles.<r>.acknowledgeContrast`**: a number of Lc a pairing may miss its APCA bar by and still only warn (e.g. pine's solid at Lc 59.5 against 60). A larger miss still fails.
|
|
14
|
+
- **Select:** where `appearance: base-select` is supported the wrapper's own chevron is hidden, so a select no longer shows two arrows, and the wrapper and control fill the field (`.custom-select` is `display: block`; add `display: inline-block` if you used it inline). all formats.
|
|
15
|
+
|
|
16
|
+
- d64fb20: Layout and spacing fixes from the vitops.ca build (findings 6–9).
|
|
17
|
+
|
|
18
|
+
- **`vitops_section` is the page opener.** New fields `cta_label`/`cta_href`/`secondary_label`/`secondary_href` (a `.cta` and a `.link` in the head), `*accent*` runs in the heading, and `stack: rhythm`, which puts `.rhythm` on `.section__inner` so head and body use the vertical-rhythm scale. With level 1 it replaces nesting a `vitops_hero` in a section, which rendered `section > .centered > … > section > .centered`. `vitops_hero` stays for a stand-alone hero with option cards. A plain (`stack: grid`) section also puts a gap between head and body now (`--section-gap`, default 2rem) instead of sitting flush. css/bricks/tailwind.
|
|
19
|
+
- **`.rhythm` spaces blocks.** A card row (`wc-cards`, classed `ul`/`ol`), accordion, `details`, form, table, figure or `.section__body` directly under a `.rhythm` is `--rhythm-block` (2) apart, not a paragraph apart; a button row (`p.cluster`) is `--rhythm-block-action` (1.6). Classless lists stay prose and a form's own field spacing is unchanged. A bare `<a>` that is a direct child of `.rhythm` is now `display: block; inline-size: fit-content`, since an inline box ignored `margin-top` and sat flush under the paragraph above (`.cta` and `.btn` are unaffected). all formats.
|
|
20
|
+
- **`rhythm-flex`** utility: an opt-in flex-column stack for the case the margin stack does not suit; margins apply to any child. all formats (`@utility` in tailwind).
|
|
21
|
+
|
|
22
|
+
- 322dd6a: Block fixes from the vitops.ca build (findings 11–13, 15, 17, 18, 21).
|
|
23
|
+
|
|
24
|
+
- **Steps.** The marker is an outlined disc in the tone (number and ring in `--tone-solid`, falling back to `currentColor`), so a steps block with no tone no longer shows black discs with no number. Items keep `align-content: start` and no `.rhythm li + li` margin, so markers in a row line up. Two modifiers through the block's `className`: `steps--cards` (each step in a card) and `steps--animated` (the connector draws and the marker fills as each step scrolls in; static under reduced motion or without scroll-driven animations). `steps` is now a config pattern: `patterns.items.steps` in `site.json` owns the card geometry (`content` group tokens) and the marker size (`--steps-marker-size`, `--steps-line-width`); both templates and the reference config ship an entry. all formats.
|
|
25
|
+
- **Stats.** `<wc-counter>` leaves a figure it cannot count as authored (`"1 in 6"`, `"24/7"`, `"—"`) instead of counting down from zero to a wrong value. `animate: false` on the block still turns the count-up off for a whole block.
|
|
26
|
+
- **Logos.** `vitops_logos` takes an optional `kicker`, `note` and `linkLabel`/`linkHref`; with any of them set, the row is wrapped in `.logos-block`. The list keeps the block's attributes either way.
|
|
27
|
+
- **Pricing.** Plans take `yearly` (a second price line) and `note` (under the plan name).
|
|
28
|
+
- **`<SiteFooter>`** has a `brand` named slot, rendered as the first column (`.sitefooter__brand`) in the site's own markup.
|
|
29
|
+
|
|
30
|
+
### Patch Changes
|
|
31
|
+
|
|
32
|
+
- 00a9d86: - **`vitops audit` lets the page settle before axe reads colours.** At `load` Chromium can still be running the CSS transitions every pattern declares, so axe measured a filled button mid-way from its unstyled colour and reported ten `color-contrast` failures no visitor sees. The audit now waits (up to 2 s) for CSS transitions to finish first.
|
|
33
|
+
- `.carousel__hint` reads `text-surface-muted` instead of `x-muted` (the placeholder tier the contrast contract exempts), and its scroll-driven fade ends hidden instead of at 0.2 opacity (`--carousel-hint-dimmed` now defaults to 0): a hint parked at 20% was still text to an audit (1.34:1). all formats.
|
|
34
|
+
- The templates' `button` pattern becomes the toolkit's `btn` affordance (`fill: false`, transparent, text colour inherited), as `defaultSiteConfig()` already shipped: the old filled entry lost its white text to the new `link` pattern on `<a class="btn">` (dark green on green, 1.36:1). A filled call to action is `.cta`.
|
|
35
|
+
- The templates move the `info` and `danger` solids to step 700. Their step-600 solids (sky, rose) clear the generator's APCA bar for `text-on-<role>` (Lc 60) but not WCAG AA's 4.5:1 that axe and Lighthouse apply (4.2:1 and 4.4:1), so a `.cta-info` or a CTA inside an `info` callout failed the audit. Step 700 reads at 6.4:1 and 6.8:1 with the recomputed text. The APCA/WCAG gap in the contract itself is logged in TODO.md.
|
|
36
|
+
|
|
3
37
|
## 8.3.0-alpha.3
|
|
4
38
|
|
|
5
39
|
## 8.3.0-alpha.2
|
package/css/layout-utilities.css
CHANGED
|
@@ -283,6 +283,19 @@
|
|
|
283
283
|
margin-top: 0;
|
|
284
284
|
}
|
|
285
285
|
|
|
286
|
+
/* Opt-in second stack: add `rhythm-flex` beside `rhythm` (a block's `className`) where the margin
|
|
287
|
+
stack fails. Flex items are blockified, so margins apply to every child, bare links included.
|
|
288
|
+
No `gap`: the `.rhythm` pair rules still decide the spacing. */
|
|
289
|
+
.rhythm-flex {
|
|
290
|
+
display: flex;
|
|
291
|
+
flex-direction: column;
|
|
292
|
+
align-items: flex-start;
|
|
293
|
+
}
|
|
294
|
+
.rhythm-flex
|
|
295
|
+
> :is(wc-cards, ul[class], ol[class], details, form, table, figure, .accordion, .section__body) {
|
|
296
|
+
align-self: stretch;
|
|
297
|
+
}
|
|
298
|
+
|
|
286
299
|
/* ── Flex direction (display + direction; tiered classes set both) ── */
|
|
287
300
|
.flex {
|
|
288
301
|
display: flex;
|
package/css/layout.css
CHANGED
|
@@ -36,6 +36,8 @@
|
|
|
36
36
|
--rhythm-li-li: 0.3;
|
|
37
37
|
--rhythm-text-media: 1.2;
|
|
38
38
|
--rhythm-media-text: 1.2;
|
|
39
|
+
--rhythm-block: 2; /* a card row, list, accordion or form under prose */
|
|
40
|
+
--rhythm-block-action: 1.6; /* a button row after the lead */
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
/* .rhythm establishes a flow-root: contains child top-margins (no collapse-out)
|
|
@@ -174,6 +176,27 @@
|
|
|
174
176
|
margin-top: calc(var(--rhythm-base) * var(--rhythm-media-text));
|
|
175
177
|
}
|
|
176
178
|
|
|
179
|
+
/* Block-level children are a block gap apart, not a paragraph apart: a card row, a stats list, an
|
|
180
|
+
accordion or a form under a lead sat flush at the prose spacing. `:is()` takes its most specific
|
|
181
|
+
argument (0-1-1), so this beats the paragraph-to-list pairs above (0-1-2 would not tie it).
|
|
182
|
+
Classless `ul`/`ol` stay prose. A form's own `.rhythm` holds `div` fields, which are not listed,
|
|
183
|
+
so its tight field spacing is untouched. */
|
|
184
|
+
.rhythm
|
|
185
|
+
> *
|
|
186
|
+
+ :is(wc-cards, ul[class], ol[class], details, form, table, figure, .accordion, .section__body) {
|
|
187
|
+
margin-top: calc(var(--rhythm-base) * var(--rhythm-block));
|
|
188
|
+
}
|
|
189
|
+
/* A row of buttons after the lead. */
|
|
190
|
+
.rhythm > * + p.cluster {
|
|
191
|
+
margin-top: calc(var(--rhythm-base) * var(--rhythm-block-action));
|
|
192
|
+
}
|
|
193
|
+
/* A bare link is inline, and an inline box ignores `margin-top`, so it sat flush under the
|
|
194
|
+
paragraph above. Buttons (`.cta`, `.btn`) are inline-flex and already space. */
|
|
195
|
+
.rhythm > :where(a:not(.cta, .btn)) {
|
|
196
|
+
display: block;
|
|
197
|
+
inline-size: fit-content;
|
|
198
|
+
}
|
|
199
|
+
|
|
177
200
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
178
201
|
4. CENTERED SECTIONS — named-track grid
|
|
179
202
|
Put .centered on a Div. Children default to the measure (reading) track;
|
|
@@ -529,13 +529,20 @@ wc-carousel {
|
|
|
529
529
|
margin: var(--carousel-hint-inset, 0.5rem);
|
|
530
530
|
z-index: var(--z-tier-raised);
|
|
531
531
|
pointer-events: none;
|
|
532
|
-
|
|
532
|
+
/* `muted`, not `x-muted`: the hint is visible text, and `x-muted` is the placeholder tier the
|
|
533
|
+
contrast contract exempts (axe flagged it at 1.34:1). */
|
|
534
|
+
color: var(--color-text-surface-muted);
|
|
533
535
|
transition: opacity 0.3s ease;
|
|
534
536
|
}
|
|
535
537
|
|
|
538
|
+
/* The hint fades out over the first 12% of scroll and is then hidden outright: an element left at
|
|
539
|
+
0.2 opacity is still text to an audit (axe reported 1.34:1), and once the visitor has scrolled it
|
|
540
|
+
has nothing left to say. `visibility` flips only at the end of the range, so the fade still shows.
|
|
541
|
+
Set --carousel-hint-dimmed above 0 to keep a ghost of it instead. */
|
|
536
542
|
@keyframes carousel-hint-dim {
|
|
537
543
|
to {
|
|
538
|
-
opacity: var(--carousel-hint-dimmed, 0
|
|
544
|
+
opacity: var(--carousel-hint-dimmed, 0);
|
|
545
|
+
visibility: hidden;
|
|
539
546
|
}
|
|
540
547
|
}
|
|
541
548
|
|
package/css/patterns/details.css
CHANGED
|
@@ -116,3 +116,17 @@ details,
|
|
|
116
116
|
rotate: none;
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
|
+
|
|
120
|
+
/* ── Accordion group (`vitops_accordion`) ───────────────────────────────────
|
|
121
|
+
A stack of `<details>`: a divider between items and padded summaries, both from the
|
|
122
|
+
`details` pattern's group tokens so a site restyles them through `patterns.items.details`. */
|
|
123
|
+
.accordion {
|
|
124
|
+
> details + details {
|
|
125
|
+
border-block-start: var(--b-details-group, var(--b-default, 1px solid currentColor));
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
> details > summary {
|
|
129
|
+
padding-block: var(--p-details-group, var(--p-default, 1rem));
|
|
130
|
+
gap: 0.75rem;
|
|
131
|
+
}
|
|
132
|
+
}
|
package/css/patterns/forms.css
CHANGED
|
@@ -333,7 +333,7 @@ input[type='color'] {
|
|
|
333
333
|
* `select` (`select.custom-select`); style both so the control radius applies. */
|
|
334
334
|
.custom-select {
|
|
335
335
|
position: relative;
|
|
336
|
-
display:
|
|
336
|
+
display: block;
|
|
337
337
|
|
|
338
338
|
&::after {
|
|
339
339
|
content: '';
|
|
@@ -349,6 +349,19 @@ input[type='color'] {
|
|
|
349
349
|
pointer-events: none;
|
|
350
350
|
opacity: 0.5;
|
|
351
351
|
}
|
|
352
|
+
|
|
353
|
+
/* The wrapper fills its field, and so does the control inside it. */
|
|
354
|
+
> select {
|
|
355
|
+
inline-size: 100%;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* `appearance: base-select` draws its own arrow (`::picker-icon`); the wrapper's would be a second
|
|
360
|
+
chevron at the far edge. It only stands in where base-select is unsupported. */
|
|
361
|
+
@supports (appearance: base-select) {
|
|
362
|
+
.custom-select:has(> select)::after {
|
|
363
|
+
content: none;
|
|
364
|
+
}
|
|
352
365
|
}
|
|
353
366
|
|
|
354
367
|
.custom-select select,
|
package/css/patterns/logos.css
CHANGED
|
@@ -63,3 +63,17 @@
|
|
|
63
63
|
opacity: 1;
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
/* The optional frame: a line above the row, and a closing note and link below it. */
|
|
68
|
+
.logos-block {
|
|
69
|
+
display: grid;
|
|
70
|
+
justify-items: center;
|
|
71
|
+
gap: var(--logos-block-gap, 1.25rem);
|
|
72
|
+
text-align: center;
|
|
73
|
+
|
|
74
|
+
.logos__kicker,
|
|
75
|
+
.logos__note,
|
|
76
|
+
.logos__link {
|
|
77
|
+
margin: 0;
|
|
78
|
+
}
|
|
79
|
+
}
|
package/css/patterns/section.css
CHANGED
|
@@ -59,3 +59,13 @@
|
|
|
59
59
|
.block-anchor {
|
|
60
60
|
scroll-margin-top: var(--header-offset, 5rem);
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
/* Head and body of a plain (stack) section sit a gap apart; split already has a grid gap and a
|
|
64
|
+
`rhythm` stack its own scale. */
|
|
65
|
+
.section:not(.section--split) .section__inner:not(.rhythm) > .section__head + .section__body {
|
|
66
|
+
margin-block-start: var(--section-gap, 2rem);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.section .section__actions {
|
|
70
|
+
align-items: center;
|
|
71
|
+
}
|
package/css/patterns/sitenav.css
CHANGED
|
@@ -638,6 +638,14 @@
|
|
|
638
638
|
justify-content: space-between;
|
|
639
639
|
}
|
|
640
640
|
|
|
641
|
+
.sitefooter__brand {
|
|
642
|
+
flex: 1 1 16rem;
|
|
643
|
+
max-inline-size: 26rem;
|
|
644
|
+
display: grid;
|
|
645
|
+
gap: 0.75rem;
|
|
646
|
+
align-content: start;
|
|
647
|
+
}
|
|
648
|
+
|
|
641
649
|
.sitefooter__list {
|
|
642
650
|
list-style: none;
|
|
643
651
|
margin: 0;
|
package/css/patterns/steps.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* the list is simply a numbered list. Vertical by default, side by side with `--row`
|
|
8
8
|
* once the container has room.
|
|
9
9
|
*
|
|
10
|
-
* The marker takes its
|
|
10
|
+
* The marker takes its colour from `.tone` (`--tone-solid` / `--tone-on-solid`), so one
|
|
11
11
|
* `tone` field recolours the whole sequence.
|
|
12
12
|
*/
|
|
13
13
|
.steps {
|
|
@@ -25,6 +25,8 @@
|
|
|
25
25
|
.steps__item {
|
|
26
26
|
position: relative;
|
|
27
27
|
display: grid;
|
|
28
|
+
align-content: start; /* a row's items stretch to its height; the marker stays at the top */
|
|
29
|
+
margin-block-start: 0; /* not `.rhythm li + li`'s step gap: the grid `gap` already spaces them */
|
|
28
30
|
grid-template-columns: var(--_marker) minmax(0, 1fr);
|
|
29
31
|
column-gap: 1rem;
|
|
30
32
|
align-items: start;
|
|
@@ -40,8 +42,11 @@
|
|
|
40
42
|
block-size: var(--_marker);
|
|
41
43
|
border-radius: 50%;
|
|
42
44
|
font-weight: 700;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
/* An outlined disc in the tone, so it reads with no tone set (a filled one on Canvas text was
|
|
46
|
+
a black disc with no number). `--steps-p` fills it for `steps--animated`. */
|
|
47
|
+
background-color: transparent;
|
|
48
|
+
color: var(--tone-solid, currentColor);
|
|
49
|
+
border: var(--_line) solid var(--tone-solid, currentColor);
|
|
45
50
|
position: relative;
|
|
46
51
|
z-index: 1;
|
|
47
52
|
}
|
|
@@ -78,6 +83,77 @@
|
|
|
78
83
|
}
|
|
79
84
|
}
|
|
80
85
|
|
|
86
|
+
/* Each step in a card (`className: steps--cards`). The card's geometry is the `steps` pattern's
|
|
87
|
+
(`patterns.items.steps` in site.json: padding, border, radius, shadow), so a site restyles it
|
|
88
|
+
there. The connector then runs in the gap between cards, at the marker's height. */
|
|
89
|
+
.steps.steps--cards {
|
|
90
|
+
.steps__item {
|
|
91
|
+
padding: var(--p-steps-group, 1.5rem);
|
|
92
|
+
border: var(--b-steps-group, 1px solid var(--color-border-surface-muted));
|
|
93
|
+
border-radius: var(--br-steps-group, 0.75rem);
|
|
94
|
+
box-shadow: var(--ds-steps-group, none);
|
|
95
|
+
background-color: var(--color-bg-surface, transparent);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.steps__item:not(:last-child)::after {
|
|
99
|
+
opacity: 0.7;
|
|
100
|
+
background-color: var(--tone-solid, currentColor);
|
|
101
|
+
inset-block-start: calc(var(--p-steps-group, 1.5rem) + var(--_marker) / 2 - var(--_line) / 2);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* The connector draws and the marker fills as each step scrolls in (`className: steps--animated`).
|
|
106
|
+
CSS only: one `view()` timeline per item drives `--steps-p` (0 to 1) and the marker and connector
|
|
107
|
+
read it. Without scroll-driven animations, or with reduced motion, `--steps-p` stays 1: the static
|
|
108
|
+
pattern. */
|
|
109
|
+
@property --steps-p {
|
|
110
|
+
syntax: '<number>';
|
|
111
|
+
inherits: true;
|
|
112
|
+
initial-value: 1;
|
|
113
|
+
}
|
|
114
|
+
@keyframes steps-progress {
|
|
115
|
+
from {
|
|
116
|
+
--steps-p: 0;
|
|
117
|
+
}
|
|
118
|
+
to {
|
|
119
|
+
--steps-p: 1;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
@supports (animation-timeline: view()) {
|
|
123
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
124
|
+
.steps.steps--animated {
|
|
125
|
+
.steps__item {
|
|
126
|
+
animation: steps-progress linear both;
|
|
127
|
+
animation-timeline: view();
|
|
128
|
+
animation-range: entry 15% cover 40%;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.steps__item::after {
|
|
132
|
+
transform-origin: top;
|
|
133
|
+
transform: scaleY(var(--steps-p));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&.steps--row .steps__item::after {
|
|
137
|
+
transform-origin: left;
|
|
138
|
+
transform: scaleX(var(--steps-p));
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.steps__item::before {
|
|
142
|
+
background-color: color-mix(
|
|
143
|
+
in oklab,
|
|
144
|
+
var(--tone-solid, currentColor) calc(var(--steps-p) * 100%),
|
|
145
|
+
transparent
|
|
146
|
+
);
|
|
147
|
+
color: color-mix(
|
|
148
|
+
in oklab,
|
|
149
|
+
var(--tone-on-solid, Canvas) calc(var(--steps-p) * 100%),
|
|
150
|
+
var(--tone-solid, currentColor)
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
81
157
|
/* Side by side once there is room: the marker sits above its text and the line runs across. */
|
|
82
158
|
@container (min-width: 48rem) {
|
|
83
159
|
.steps.steps--row {
|
|
@@ -93,6 +169,12 @@
|
|
|
93
169
|
grid-column: 1;
|
|
94
170
|
}
|
|
95
171
|
|
|
172
|
+
&.steps--cards .steps__item:not(:last-child)::after {
|
|
173
|
+
inset-inline-start: 100%;
|
|
174
|
+
inset-inline-end: calc(var(--_gap) * -1);
|
|
175
|
+
inset-block-start: calc(var(--p-steps-group, 1.5rem) + var(--_marker) / 2 - var(--_line) / 2);
|
|
176
|
+
}
|
|
177
|
+
|
|
96
178
|
.steps__item:not(:last-child)::after {
|
|
97
179
|
inset-inline-start: var(--_marker);
|
|
98
180
|
inset-inline-end: calc(var(--_gap) * -1);
|
package/css/patterns/subgrid.css
CHANGED
|
@@ -174,6 +174,15 @@
|
|
|
174
174
|
font-weight: 700;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
+
/* A note under the plan name, and a second price line (the yearly price) under the price. */
|
|
178
|
+
.pricing-card__note {
|
|
179
|
+
margin: 0.25rem 0 0;
|
|
180
|
+
}
|
|
181
|
+
.pricing-card__yearly {
|
|
182
|
+
display: block;
|
|
183
|
+
font-weight: 400;
|
|
184
|
+
}
|
|
185
|
+
|
|
177
186
|
.pricing-card__features {
|
|
178
187
|
padding: var(--pricing-features-padding, 1.5rem);
|
|
179
188
|
list-style: none;
|
package/css/patterns/tone.css
CHANGED
|
@@ -15,20 +15,32 @@
|
|
|
15
15
|
* tone a site never defined degrades to a neutral surface instead of to nothing.
|
|
16
16
|
* `@getvitops/emdash`'s `resolveTone()` writes the chains. Unset, `.tone` is inert.
|
|
17
17
|
*
|
|
18
|
-
* `.tone--tint`
|
|
18
|
+
* `.tone--tint` paints the tint (surfaces only); `--solid` fills with the role's solid and its `on`
|
|
19
|
+
* colour. `--tone-tint` overrides the tint's colour.
|
|
19
20
|
*/
|
|
20
21
|
.tone {
|
|
21
|
-
--_bg: var(--tone-bg, transparent);
|
|
22
22
|
--_fg: var(--tone-fg, inherit);
|
|
23
23
|
|
|
24
|
-
background-color: var(--_bg);
|
|
25
24
|
color: var(--_fg);
|
|
26
25
|
border-color: var(--tone-border, currentColor);
|
|
27
26
|
|
|
27
|
+
/* A tone is colour variables first. Only a surface paints, so a steps list, a stat row or a
|
|
28
|
+
form that carries a tone is not turned into a padding-less band. A site can swap the tint for
|
|
29
|
+
something else (a mix of the solid, glass, …) through `--tone-tint`; see `colors.tint`. */
|
|
30
|
+
&.tone--tint {
|
|
31
|
+
background-color: var(--tone-tint, var(--tone-bg, transparent));
|
|
32
|
+
}
|
|
33
|
+
|
|
28
34
|
&.tone--solid {
|
|
29
|
-
background-color: var(--tone-solid, var(--
|
|
35
|
+
background-color: var(--tone-solid, var(--tone-bg, transparent));
|
|
30
36
|
color: var(--tone-on-solid, var(--_fg));
|
|
31
37
|
}
|
|
38
|
+
|
|
39
|
+
/* A filled call to action inside a toned surface (the classes are only added with a tone set) takes that block's colour. */
|
|
40
|
+
&:is(.tone--tint, .tone--solid) .cta {
|
|
41
|
+
background-color: var(--tone-solid);
|
|
42
|
+
color: var(--tone-on-solid);
|
|
43
|
+
}
|
|
32
44
|
}
|
|
33
45
|
|
|
34
46
|
/* An accent run inside a heading (`<em class="accent">`): colour, not italics. */
|
package/dist/elements.js
CHANGED
|
@@ -47,4 +47,4 @@ const e=globalThis,t=e.ShadowRoot&&(e.ShadyCSS===void 0||e.ShadyCSS.nativeShadow
|
|
|
47
47
|
:host{--_offset:var(--offset, 0.5);--_handle-size:var(--handle-size, 40px);--_handle-color:var(--handle-color, #fff);--_line-color:var(--line-color, #fff);--_line-width:var(--line-width, 2px);display:block;position:relative;overflow:hidden;touch-action:pan-y;user-select:none}:host([vertical]){touch-action:pan-x}.container{position:relative;display:grid}.after,.before{grid-area:1/1}.after ::slotted(img),.before ::slotted(img){display:block;inline-size:100%;block-size:auto}.before{clip-path:inset(0 calc((1 - var(--_offset))*100%) 0 0)}:host([vertical]) .before{clip-path:inset(0 0 calc((1 - var(--_offset))*100%) 0)}.handle{position:absolute;inset-block:0;inset-inline-start:calc(var(--_offset)*100%);translate:-50% 0;inline-size:var(--_handle-size);display:flex;flex-direction:column;align-items:center;cursor:ew-resize;z-index:1}:host([vertical]) .handle{inset-block:auto;inset-block-start:calc(var(--_offset)*100%);inset-inline:0;translate:0 -50%;flex-direction:row;cursor:ns-resize;block-size:var(--_handle-size);inline-size:100%}.handle:before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;inline-size:var(--_line-width);background:var(--_line-color);box-shadow:0 0 4px oklch(0 0 0/.3);pointer-events:none}:host([vertical]) .handle:before{inset-inline:0;inset-block:auto;inset-block-start:50%;translate:0 -50%;inline-size:100%;block-size:var(--_line-width)}.grip{position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;inline-size:var(--_handle-size);block-size:var(--_handle-size);background:var(--_handle-color);border-radius:50%;box-shadow:0 2px 8px oklch(0 0 0/.2);display:flex;align-items:center;justify-content:center;transition:scale .15s ease,box-shadow .15s ease}.grip:after,.grip:before{content:"";position:absolute;border:5px solid transparent}.grip:before{border-inline-end-color:oklch(.3 0 0);inset-inline-start:6px}.grip:after{border-inline-start-color:oklch(.3 0 0);inset-inline-end:6px}:host([vertical]) .grip:before{border-inline-end-color:transparent;border-block-end-color:oklch(.3 0 0);inset-inline-start:auto;inset-block-start:6px}:host([vertical]) .grip:after{border-inline-start-color:transparent;border-block-start-color:oklch(.3 0 0);inset-inline-end:auto;inset-block-end:6px}.handle:focus-visible .grip,.handle:hover .grip{scale:1.1;box-shadow:0 4px 12px oklch(0 0 0/.3)}.handle:focus-visible{outline:none}.handle:focus-visible .grip{outline:2px solid oklch(.6 .2 250);outline-offset:2px}.handle.dragging .grip{scale:1.15;box-shadow:0 6px 16px oklch(0 0 0/.35)}@media (prefers-reduced-motion:reduce){.grip{transition:none}}@media (any-pointer:coarse){.handle{min-inline-size:44px}:host([vertical]) .handle{min-block-size:44px}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`]}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 Mt(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 be` <div class="container" part="container" style="--_offset:${this._offset}"> <div class="after" part="after" role="group" aria-label="${this.afterLabel}"> <slot name="after"></slot> </div> <div class="before" part="before" role="group" aria-label="${this.beforeLabel}"> <slot name="before"></slot> </div> <div class="handle" part="handle" role="separator" aria-label="Image comparison handle" aria-orientation="${this.vertical?`vertical`:`horizontal`}"> <div class="grip" part="grip"> <span class="visually-hidden">Drag to compare</span> </div> </div> </div> `}};customElements.get(`wc-image-compare`)||customElements.define(`wc-image-compare`,Pt);var Ft=class extends X{static{this.properties={duration:{type:Number,reflect:!0},exit:{type:Number}}}createRenderRoot(){return this}render(){return T}#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`,Ft);var It=class extends X{static{this.styles=[X.styles,o`
|
|
48
48
|
:host{display:inline-flex;align-items:center;gap:.5rem}.copy__button{display:none;align-items:center;justify-content:center;min-inline-size:var(--copy-size,2.5rem);min-block-size:var(--copy-size,2.5rem);padding:var(--copy-padding,.5rem);background:var(--copy-bg,transparent);border:var(--copy-border,none);border-radius:var(--copy-radius,.375rem);cursor:pointer;transition:background-color .15s ease,transform .1s ease}:host(wc-copy:defined) .copy__button{display:inline-flex}.copy__button:hover{background:var(--copy-hover-bg,oklch(.9 0 0))}.copy__button:active{transform:scale(.95)}.copy__button:focus-visible{outline:2px solid var(--copy-focus-color,oklch(.6 .2 250));outline-offset:2px}.copy__icon{inline-size:1.25em;block-size:1.25em;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}.copy__icon--copy{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M208%200h124.1C344.8%200%20357%205.1%20366%2014.1L433.9%2082c9%209%2014.1%2021.2%2014.1%2033.9V336c0%2026.5-21.5%2048-48%2048H208c-26.5%200-48-21.5-48-48V48c0-26.5%2021.5-48%2048-48M48%20128h80v64H64v256h192v-32h64v48c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V176c0-26.5%2021.5-48%2048-48%22%2F%3E%3C%2Fsvg%3E")}.copy__icon--success{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7l233.4-233.3c12.5-12.5%2032.8-12.5%2045.3%200z%22%2F%3E%3C%2Fsvg%3E");color:var(--copy-success-color,oklch(.6 .2 145))}`]}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`,t=this._copied?`Copied!`:this.label;return Y` <slot></slot> <button class="copy__button" part="button" type="button" aria-label="${t}" @click="${this._handleCopy}"> <span class="${e}" part="icon" aria-hidden="true"></span> </button> `}};customElements.get(`wc-copy`)||customElements.define(`wc-copy`,It);function Lt(e){let t=t=>e(t).trim()===`1`;return{nativeNav:t(`--carousel-native-nav`),scrollTimeline:t(`--carousel-scroll-timeline`)}}function Rt(e,t){let n=e.slides>=2;return{clone:n&&!e.paged&&(e.loop||e.autoplay>0),play:e.autoplay>0&&!e.reducedMotion,buildButtons:n&&e.wantsButtons&&!t.nativeNav,buildMarkers:n&&e.wantsMarkers&&!t.nativeNav,trackScrolled:!t.scrollTimeline}}function zt(e){return Math.abs(e)>4}function Bt(e,t,n=`Slide`){return`${n} ${e+1} of ${t}`}const Vt=Object.freeze({loading:`lazy`,fetchpriority:`low`,decoding:`async`});function Z(e,t){t()||queueMicrotask(()=>{e.isConnected&&t()})}function Q(){return typeof matchMedia==`function`&&matchMedia(`(prefers-reduced-motion: reduce)`).matches?`auto`:`smooth`}function Ht(e){let{index:t,total:n,delta:r,loop:i}=e;if(n<=0)return t;let a=t+r;return i?(a%n+n)%n:Math.min(Math.max(a,0),n-1)}function Ut(e,t){let{orientation:n,rtl:r=!1}=t,i=n===`horizontal`||n===`both`,a=n===`vertical`||n===`both`;if(i){if(e===`ArrowLeft`)return{type:`step`,delta:r?1:-1};if(e===`ArrowRight`)return{type:`step`,delta:r?-1:1}}if(a){if(e===`ArrowUp`)return{type:`step`,delta:-1};if(e===`ArrowDown`)return{type:`step`,delta:1}}return e===`Home`?{type:`first`}:e===`End`?{type:`last`}:null}function Wt(e,t,n,r=1e3){let i=!e||n-e.lastTime>r?t:e.buffer+t;return{buffer:i,query:i.length>1&&Array.from(i).every(e=>e===i[0])?i[0]:i,lastTime:n}}function Gt(e,t,n,r){let i=t.toLowerCase();if(!i)return null;let a=e.length;if(!a)return null;let o=Math.max(0,e.findIndex(e=>e.key===n));for(let t=1;t<=a;t++){let n=e[(o+t)%a];if(!r?.(n.key)&&n.text.toLowerCase().startsWith(i))return n.key}return null}const Kt=e=>!e.hidden&&!e.closest(`[hidden]`);var qt=class{#e;#t=null;#n=null;#r=null;constructor(e,t){this.#e=t,e.addController(this)}get active(){return this.#n}#i=e=>(this.#e.isFocusable??Kt)(e);attach(e){this.#t!==e&&(this.detach(),this.#t=e,e.addEventListener(`keydown`,this.#o),e.addEventListener(`focusin`,this.#a),this.sync())}detach(){this.#t&&=(this.#t.removeEventListener(`keydown`,this.#o),this.#t.removeEventListener(`focusin`,this.#a),null)}sync(){let e=this.#e.items(),t=e.filter(this.#i),n=this.#n,r=n!==null&&document.activeElement===n,i=n!==null&&t.includes(n),a=i?n:t[0]??null;for(let t of e)t.tabIndex=t===a?0:-1;this.#n=a,r&&!i&&a&&(a.focus({preventScroll:!0}),this.#e.onMove?.(a,n,`sync`))}setActive(e,t={}){let{focus:n=!0,cause:r=`api`,silent:i=!1}=t,a=this.#n;this.#n=e;for(let t of this.#e.items())t.tabIndex=t===e?0:-1;e&&(n&&e.focus({preventScroll:!0}),i||this.#e.onMove?.(e,a,r))}#a=e=>{let t=e.target;t instanceof HTMLElement&&t!==this.#n&&this.#e.items().includes(t)&&this.setActive(t,{focus:!1,cause:`pointer`})};#o=e=>{let{ignoreWithin:t,textFor:n}=this.#e,r=e.target;if(t&&r instanceof Element&&r.closest(t))return;if(n&&e.key.length===1&&e.key!==` `&&!e.ctrlKey&&!e.metaKey&&!e.altKey){this.#s(e,n);return}let i=this.#t;if(!i)return;let a=this.#e.items(),o={items:a,active:this.#n,index:this.#n?a.indexOf(this.#n):-1,rtl:getComputedStyle(i).direction===`rtl`},s=this.#e.keyToMove?this.#e.keyToMove(e,o):this.#c(e,o);s&&(e.preventDefault(),this.#l(s,o))};#s=(e,t)=>{this.#r=Wt(this.#r,e.key,performance.now());let n=Gt(this.#e.items().filter(this.#i).map(e=>({key:e,text:t(e)})),this.#r.query,this.#n);n&&(e.preventDefault(),this.setActive(n,{focus:!0,cause:`key`}))};#c=(e,t)=>{let{orientation:n}=this.#e;return n?Ut(e.key,{orientation:n,rtl:t.rtl}):null};#l(e,t){if(e.type===`handled`)return;let n=t.items.filter(this.#i);if(!n.length)return;if(e.type===`to`){this.setActive(e.item,{focus:!0,cause:`key`});return}if(e.type===`first`){this.setActive(n[0],{focus:!0,cause:`key`});return}if(e.type===`last`){this.setActive(n[n.length-1],{focus:!0,cause:`key`});return}let r=t.active?n.indexOf(t.active):-1,i=Ht({index:r<0?0:r,total:n.length,delta:e.delta,loop:this.#e.loop??!1});this.setActive(n[i],{focus:!0,cause:`key`})}hostConnected(){}hostDisconnected(){this.detach()}},Jt=class extends X{static{this.properties={autoplay:{type:Number,reflect:!0},loop:{type:Boolean,reflect:!0}}}createRenderRoot(){return this}render(){return T}#e=!1;#t=null;#n=[];#r=[];#i=null;#a=[];#o=null;#s=[];#c=null;#l=!1;#u;#d=null;#f=null;#p=null;#m=!1;#h=!1;#g=!1;#_=null;constructor(){super(),this.autoplay=0,this.loop=!1,this.#u=new qt(this,{items:()=>this.#s,orientation:`both`,loop:!0,onMove:(e,t,n)=>{n===`key`&&e.click()}})}connectedCallback(){super.connectedCallback(),Z(this,()=>this.#v())}#v(){if(this.parentElement?.closest(`wc-carousel`)||this.#e)return!0;let e=this.#y();if(!e||(this.#t=e,this.#n=[...e.children].filter(e=>e instanceof HTMLElement&&!e.hasAttribute(`slot`)),this.#n.length<2))return!1;!this.autoplay&&this.hasAttribute(`autoplay`)&&(this.autoplay=Number(this.getAttribute(`autoplay`))||0),!this.loop&&this.hasAttribute(`loop`)&&(this.loop=!0),this.#h=matchMedia(`(prefers-reduced-motion: reduce)`).matches;let t=Lt(e=>getComputedStyle(this).getPropertyValue(e)),n=Rt({loop:this.loop,autoplay:this.autoplay,paged:this.classList.contains(`carousel--auto-pages`),wantsButtons:this.classList.contains(`carousel--scroll-buttons`),wantsMarkers:this.classList.contains(`carousel--scroll-markers`),slides:this.#n.length,reducedMotion:this.#h},t);return this.#i=n,this.#b(e),n.clone&&this.#x(),n.buildButtons&&this.#A(),n.buildMarkers&&this.#j(),(n.trackScrolled||n.clone||this.#a.length||this.#s.length)&&(e.addEventListener(`scroll`,this.#D,{passive:!0}),e.addEventListener(`scrollsnapchange`,this.#O),e.addEventListener(`scrollend`,this.#O)),n.clone&&this.#E(),this.autoplay>0&&this.#N(n),this.#d=new ResizeObserver(this.#M),this.#d.observe(e),this.#M(),this.#e=!0,!0}#y(){let e=this.querySelector(`:scope > .carousel__track`);if(e)return e;if(!this.classList.contains(`carousel`)||!this.children.length)return null;let t=document.createElement(`div`);return t.className=`carousel__track`,t.append(...this.childNodes),this.append(t),t}#b(e){this.hasAttribute(`role`)||this.setAttribute(`role`,`group`),this.hasAttribute(`aria-roledescription`)||this.setAttribute(`aria-roledescription`,`carousel`),e.hasAttribute(`tabindex`)||(e.tabIndex=0)}disconnectedCallback(){super.disconnectedCallback();let e=this.#t;this.#d?.disconnect(),this.#d=null,e&&(e.removeEventListener(`scroll`,this.#D),e.removeEventListener(`scrollsnapchange`,this.#O),e.removeEventListener(`scrollend`,this.#O)),this.#p&&clearTimeout(this.#p),this.#p=null,this.#L(),this.removeEventListener(`pointerenter`,this.#R),this.removeEventListener(`pointerleave`,this.#z),this.removeEventListener(`focusin`,this.#R),this.removeEventListener(`focusout`,this.#z),this.#c&&(this.#c.removeEventListener(`click`,this.#B),this.#l&&this.#c.remove(),this.#c=null,this.#l=!1);for(let e of this.#a)e.remove();this.#a=[],this.#u.detach(),this.#o?.remove(),this.#o=null,this.#s=[];for(let e of this.#r)e.remove();this.#r=[],this.removeAttribute(`data-scrolled`),this.removeAttribute(`aria-live`),this.#n=[],this.#i=null,this.#e=!1,this.#_=null}#x(){let e=this.#n.map((e,t)=>this.#S(e,t)),t=this.#n.map((e,t)=>this.#S(e,t));for(let t=e.length-1;t>=0;t--)this.#t?.prepend(e[t]);for(let e of t)this.#t?.append(e);this.#r=[...e,...t]}#S(e,t){let n=e.cloneNode(!0);n.setAttribute(`data-carousel-clone`,String(t)),n.setAttribute(`aria-hidden`,`true`),n.setAttribute(`inert`,``),n.removeAttribute(`id`);for(let e of n.querySelectorAll(`[id]`))e.removeAttribute(`id`);for(let e of n.querySelectorAll(`img`))for(let[t,n]of Object.entries(Vt))e.setAttribute(t,n);return n}#C(){return this.#t?[...this.#t.children].filter(e=>e instanceof HTMLElement&&!e.hasAttribute(`slot`)):[]}#w(){let e=this.#t,t=this.#C();if(!e||!t.length)return 0;let n=e.getBoundingClientRect(),r=n.left+n.width/2,i=0,a=1/0;return t.forEach((e,t)=>{let n=e.getBoundingClientRect(),o=Math.abs(n.left+n.width/2-r);o<a&&(a=o,i=t)}),i}#T(e){let t=this.#C();if(!t.length)return;let n=this.#w()+e;t[Math.max(0,Math.min(t.length-1,n))]?.scrollIntoView({inline:`center`,block:`nearest`,behavior:Q()})}#E(){requestAnimationFrame(()=>{let e=this.#n[0];e&&(this.#g=!0,e.scrollIntoView({inline:`center`,block:`nearest`,behavior:`instant`}),requestAnimationFrame(()=>{this.#g=!1,this.#k()}))})}#D=()=>{this.#i?.trackScrolled&&!this.hasAttribute(`data-scrolled`)&&zt(this.#t?.scrollLeft??0)&&this.setAttribute(`data-scrolled`,``),this.#k(),this.#p&&clearTimeout(this.#p),this.#p=setTimeout(this.#O,150)};#O=()=>{this.#p&&clearTimeout(this.#p),this.#p=null,this.#k();let e=this.#t;if(!e||!this.#i?.clone||this.#g)return;let t=this.#C()[this.#w()],n=t?.getAttribute(`data-carousel-clone`);if(!t||n==null)return;let r=this.#n[Number(n)];if(!r)return;let i=r.getBoundingClientRect().left-t.getBoundingClientRect().left;if(!i)return;this.#g=!0;let a=e.style.scrollBehavior;e.style.scrollBehavior=`auto`,e.scrollLeft+=i,requestAnimationFrame(()=>{e.style.scrollBehavior=a,this.#g=!1,this.#k()})};#k(){let e=this.#C();if(!e.length)return;let t=this.#w(),n=this.#i?.clone?t%this.#n.length:t;this.#s.forEach((e,t)=>e.setAttribute(`aria-selected`,String(t===n)));let r=this.#s[n];if(r&&this.#u.setActive(r,{focus:!1,silent:!0}),this.#a.length&&!this.#i?.clone){let[n,r]=this.#a;n&&(n.disabled=t<=0),r&&(r.disabled=t>=e.length-1)}n!==this.#_&&(this.#_=n,this.dispatchEvent(new CustomEvent(`carousel-change`,{bubbles:!0,composed:!0,detail:{index:n,total:this.#n.length}})))}#A(){let e=(e,t,n,r)=>{let i=document.createElement(`button`);return i.type=`button`,i.className=`carousel__button carousel__button--${e}`,i.setAttribute(`aria-label`,t),i.textContent=n,i.addEventListener(`click`,()=>this.#T(r)),i},t=getComputedStyle(this).direction===`rtl`;this.#a=[e(`prev`,`Previous`,t?`›`:`‹`,-1),e(`next`,`Next`,t?`‹`:`›`,1)],this.append(...this.#a)}#j(){let e=document.createElement(`div`);e.className=`carousel__markers`,e.setAttribute(`role`,`tablist`),e.setAttribute(`aria-label`,this.getAttribute(`aria-label`)??`Slides`),this.#s=this.#n.map((e,t)=>{let n=document.createElement(`button`);return n.type=`button`,n.className=`carousel__marker`,n.setAttribute(`role`,`tab`),n.setAttribute(`aria-label`,Bt(t,this.#n.length)),n.setAttribute(`aria-selected`,String(t===0)),e.id&&n.setAttribute(`aria-controls`,e.id),n.addEventListener(`click`,()=>{e.scrollIntoView({inline:`center`,block:`nearest`,behavior:Q()})}),n}),e.append(...this.#s),this.append(e),this.#o=e,this.#u.attach(e)}#M=()=>{let e=this.#t;if(!e)return;let t=this.querySelector(`:scope > .carousel__hint`);t&&(t.hidden=e.scrollWidth<=e.clientWidth+1)};#N(e){this.#P(),e.play?this.#I():(this.#m=!0,this.setAttribute(`aria-live`,`polite`),this.#F()),this.addEventListener(`pointerenter`,this.#R),this.addEventListener(`pointerleave`,this.#z),this.addEventListener(`focusin`,this.#R),this.addEventListener(`focusout`,this.#z)}#P(){let e=this.querySelector(`[slot="autoplay"]`);if(e)this.#c=e,this.#l=!1;else{let e=document.createElement(`button`);e.type=`button`,e.className=`carousel__autoplay`,this.append(e),this.#c=e,this.#l=!0}this.#c.addEventListener(`click`,this.#B),this.#F()}#F(){let e=this.#c;e&&(e.setAttribute(`aria-label`,this.#m?`Play`:`Pause`),e.setAttribute(`aria-pressed`,String(!this.#m)),this.#l&&(e.textContent=this.#m?`▶`:`⏸`))}#I(){this.#f||this.autoplay<=0||(this.#m=!1,this.#f=setInterval(()=>this.#T(1),this.autoplay),this.setAttribute(`aria-live`,`off`),this.#F())}#L(){this.#f&&clearInterval(this.#f),this.#f=null}#R=()=>{!this.#f&&this.#m||(this.#L(),this.#m=!0,this.setAttribute(`aria-live`,`polite`),this.#F())};#z=()=>{this.#h||this.#I()};#B=()=>{this.#m?(this.#h=!1,this.#I()):this.#R()}};customElements.get(`wc-carousel`)||customElements.define(`wc-carousel`,Jt);var Yt=class extends X{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(),Z(this,()=>this.#f())}#f(){return this.#r?!0:(this.#p(),this.#e.length!==0&&(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=/* @__PURE__ */ new Set,t=/* @__PURE__ */ 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=/* @__PURE__ */ 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`),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:Q(),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`,Yt);const Xt=`vitops:consent`;var Zt=class e extends X{static{this.styles=[X.styles,o`
|
|
49
49
|
:host{display:none}:host(:defined){display:inline-flex}.toggle__group{display:inline-flex;border-radius:var(--color-scheme-toggle-radius,.5rem);overflow:hidden;border:var(--color-scheme-toggle-border,1px solid oklch(.5 0 0/.2))}.toggle__segment{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:var(--color-scheme-toggle-padding,.5rem .75rem);border:none;background:var(--color-scheme-toggle-bg,oklch(.95 0 0));color:var(--color-scheme-toggle-color,oklch(.3 0 0));font-size:var(--color-scheme-toggle-font-size,.875rem);font-family:inherit;cursor:pointer;transition:background-color .15s ease,color .15s ease}.toggle__segment:not(:last-child){border-inline-end:1px solid oklch(.5 0 0/.15)}.toggle__segment:hover{background:var(--color-scheme-toggle-hover-bg,oklch(.9 0 0))}.toggle__segment[aria-pressed=true]{background:var(--color-scheme-toggle-active-bg,oklch(.25 .02 260));color:var(--color-scheme-toggle-active-color,oklch(.95 0 0))}.toggle__segment:focus-visible{outline:2px solid var(--color-scheme-toggle-focus-color,oklch(.6 .2 250));outline-offset:2px;z-index:1;position:relative}.toggle__icon{inline-size:1em;block-size:1em;flex-shrink:0}.toggle__icon--light{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M12%201v2M12%2021v2M4.22%204.22l1.42%201.42M18.36%2018.36l1.42%201.42M1%2012h2M21%2012h2M4.22%2019.78l1.42-1.42M18.36%205.64l1.42-1.42%22%2F%3E%3C%2Fsvg%3E")}.toggle__icon--dark,.toggle__icon--light{background:currentColor;mask-size:contain;mask-repeat:no-repeat}.toggle__icon--dark{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79%22%2F%3E%3C%2Fsvg%3E")}.toggle__icon--system{background:currentColor;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2021h8M12%2017v4%22%2F%3E%3C%2Fsvg%3E");mask-size:contain;mask-repeat:no-repeat}.toggle__label{display:none}@container (min-width: 400px){.toggle__label{display:inline}}@media (prefers-reduced-motion:reduce){.toggle__segment{transition:none}}`]}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(Xt,this._onConsent),this._applyColorScheme()}disconnectedCallback(){super.disconnectedCallback(),this._mediaQuery&&this._boundMediaHandler&&this._mediaQuery.removeEventListener(`change`,this._boundMediaHandler),document.removeEventListener(Xt,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 Y` <div class="toggle__group" role="group" aria-label="Color scheme" part="group"> <button class="toggle__segment" part="system" type="button" aria-pressed="${this.scheme===`system`}" @click="${()=>this._handleSegmentClick(`system`)}"> <span class="toggle__icon toggle__icon--system" aria-hidden="true"></span> <span class="toggle__label">System</span> </button> <button class="toggle__segment" part="light" type="button" aria-pressed="${this.scheme===`light`}" @click="${()=>this._handleSegmentClick(`light`)}"> <span class="toggle__icon toggle__icon--light" aria-hidden="true"></span> <span class="toggle__label">Light</span> </button> <button class="toggle__segment" part="dark" type="button" aria-pressed="${this.scheme===`dark`}" @click="${()=>this._handleSegmentClick(`dark`)}"> <span class="toggle__icon toggle__icon--dark" aria-hidden="true"></span> <span class="toggle__label">Dark</span> </button> </div> `}};customElements.get(`wc-color-scheme-toggle`)||customElements.define(`wc-color-scheme-toggle`,Zt);var Qt=class extends X{static{this.styles=[X.styles,o`
|
|
50
|
-
:host{--_gap:var(--multi-field-gap, 0.5rem);--_input-padding:var(--multi-field-input-padding, 0.5rem 0.75rem);--_radius:var(--multi-field-border-radius, 0.375rem);--_border-color:var(--multi-field-border-color, oklch(0.8 0 0));--_focus-color:var(--multi-field-focus-color, oklch(0.6 0.2 250));--_button-bg:var(--multi-field-button-bg, oklch(0.95 0 0));--_button-hover-bg:var(--multi-field-button-hover-bg, oklch(0.9 0 0));--_delete-color:var(--multi-field-delete-color, oklch(0.6 0.2 25));--_delete-hover-bg:var(--multi-field-delete-hover-bg, oklch(0.95 0.05 25));display:block}.container,.entries{flex-direction:column}.container,.entries,.entry{display:flex;gap:var(--_gap)}.entry{align-items:center}.entry__input{flex:1;padding:var(--_input-padding);border:1px solid var(--_border-color);border-radius:var(--_radius);font:inherit;background:transparent}.entry__input:focus-visible{outline:2px solid var(--_focus-color);outline-offset:2px}.entry__input:disabled{opacity:.6;cursor:not-allowed}.entry__delete{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2rem;min-block-size:2rem;padding:.25rem;background:transparent;border:1px solid transparent;border-radius:var(--_radius);color:var(--_delete-color);cursor:pointer;transition:background-color .15s ease}.entry__delete:hover:not(:disabled){background:var(--_delete-hover-bg)}.entry__delete:focus-visible{outline:2px solid var(--_focus-color);outline-offset:2px}.entry__delete:disabled{opacity:.3;cursor:not-allowed}.entry__delete-icon{inline-size:1rem;block-size:1rem;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M135.2%2017.7%20128%2032H32C14.3%2032%200%2046.3%200%2064s14.3%2032%2032%2032h384c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-96l-7.2-14.3C307.4%206.8%20296.3%200%20284.2%200H163.8c-12.1%200-23.2%206.8-28.6%2017.7M416%20128H32l21.2%20339c1.6%2025.3%2022.6%2045%2047.9%2045h245.8c25.3%200%2046.3-19.7%2047.9-45z%22%2F%3E%3C%2Fsvg%3E")}.actions{display:flex;gap:var(--_gap);flex-wrap:wrap}.action-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:var(--_button-bg);border:1px solid var(--_border-color);border-radius:var(--_radius);font:inherit;font-size:.875em;cursor:pointer;transition:background-color .15s ease}.action-button:hover:not(:disabled){background:var(--_button-hover-bg)}.action-button:focus-visible{outline:2px solid var(--_focus-color);outline-offset:2px}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button__icon{inline-size:.875rem;block-size:.875rem;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}.action-button__icon--add{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M256%2080c0-17.7-14.3-32-32-32s-32%2014.3-32%2032v144H48c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h144v144c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V288h144c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H256z%22%2F%3E%3C%2Fsvg%3E")}.action-button__icon--clear{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M290.7%2057.4%2057.4%20290.7c-25%2025-25%2065.5%200%2090.5l80%2080c12%2012%2028.3%2018.7%2045.3%2018.7H512c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H387.9l130.7-130.6c25-25%2025-65.5%200-90.5L381.3%2057.4c-25-25-65.5-25-90.5%200zm6.7%20358.6H182.6l-80-80%20124.7-124.7%20137.4%20137.4z%22%2F%3E%3C%2Fsvg%3E")}.initial-slot{display:none}@media (prefers-reduced-motion:reduce){.action-button,.entry__delete{transition:none}}`]}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 Y` <div class="container" part="container"> <div class="initial-slot"> <slot @slotchange="${this._initializeFromSlot}"></slot> </div> <div class="entries" part="entries" role="list"> ${this._entries.map(e=>Y` <div class="entry" part="entry" role="listitem"> <input class="entry__input" part="input" type="${this.type}" name="${this.name?`${this.name}[]`:``}" placeholder="${this.placeholder}" .value="${e.value}" @input="${t=>this._handleInput(e.id,t)}" ?data-default="${e.isDefault}"> <button type="button" class="entry__delete" part="delete-button" aria-label="${this.deleteLabel}" ?disabled="${!this._canDelete(e)}" @click="${()=>this._handleDelete(e.id)}"> <span class="entry__delete-icon" aria-hidden="true"></span> </button> </div> `)} </div> <div class="actions" part="actions"> <button type="button" class="action-button" part="add-button" ?disabled="${!this._canAdd()}" @click="${this._handleAdd}"> <span class="action-button__icon action-button__icon--add" aria-hidden="true"></span> <slot name="add-label">${this.addLabel}</slot> </button> <button type="button" class="action-button" part="clear-button" ?disabled="${!this._canClear()}" @click="${this._handleClear}"> <span class="action-button__icon action-button__icon--clear" aria-hidden="true"></span> <slot name="clear-label">${this.clearLabel}</slot> </button> </div> </div> `}};customElements.get(`wc-multi-field`)||customElements.define(`wc-multi-field`,Qt);var $t=class extends X{createRenderRoot(){return this}#e=null;#t;#n;#r;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#i())}#i(){if(this.#e)return!0;let e=this.querySelectorAll(`.marquee__content`),t=e[0];if(!t)return!1;this.#e=t;for(let t of Array.from(e).slice(1))t.dataset.marqueeClone=``;return this.style.setProperty(`--_marquee-min`,`auto`),this.#a(),this.#o(),this.#t=new ResizeObserver(()=>this.#o()),this.#t.observe(this),this.#t.observe(t),!0}#a(){if(this.#n)return;let e=document.createElement(`button`);e.type=`button`,e.className=`marquee__toggle`,e.setAttribute(`aria-pressed`,`false`),e.textContent=`Pause animation`,e.addEventListener(`click`,()=>{let t=this.toggleAttribute(`data-paused`);e.setAttribute(`aria-pressed`,String(t)),e.textContent=t?`Play animation`:`Pause animation`}),this.after(e),this.#n=e}disconnectedCallback(){this.#n?.remove(),this.#n=void 0,this.#t?.disconnect(),super.disconnectedCallback()}#o(){let e=this.#e;if(!e)return;let t=getComputedStyle(this),n=t.flexDirection.startsWith(`column`),r=Number.parseFloat(n?t.rowGap:t.columnGap)||0,i=e.getBoundingClientRect(),a=n?i.height:i.width;if(a<=0)return;let o=this.getBoundingClientRect(),s=n?o.height:o.width;if(this.#r&&this.#r.one===a&&this.#r.gap===r&&this.#r.container===s&&this.#r.vertical===n)return;this.#r={one:a,gap:r,container:s,vertical:n};for(let e of this.querySelectorAll(`[data-marquee-clone]`))e.remove();this.style.setProperty(`--_marquee-distance`,`${a+r}px`);let c=Math.ceil((s+r)/(a+r))+1;for(let t=0;t<c;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`,$t);function en(e,t){let n=t.trim().toLowerCase();if(!n)return{keep:/* @__PURE__ */ new Set,hits:0};let r=/* @__PURE__ */ new Map,i=/* @__PURE__ */ 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=/* @__PURE__ */ 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=/* @__PURE__ */ 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}}function tn(e){let t=/* @__PURE__ */ new Map;for(let n of e)t.set(n.key,n);return e.filter(e=>{if(e.hidden)return!1;let n=/* @__PURE__ */ new Set([e.key]),r=e.parent===null||e.parent===void 0?void 0:t.get(e.parent);for(;r;){if(r.hidden||r.expanded===!1)return!1;if(n.has(r.key))break;n.add(r.key),r=r.parent===null||r.parent===void 0?void 0:t.get(r.parent)}return!0})}function nn(e,t,n){let r=tn(e);if(!r.length)return null;let i=r.findIndex(e=>e.key===t),a=i>=0?r[i]:void 0;switch(n){case`first`:return{type:`to`,key:r[0].key};case`last`:return{type:`to`,key:r[r.length-1].key};case`next`:return i<0?{type:`to`,key:r[0].key}:i<r.length-1?{type:`to`,key:r[i+1].key}:null;case`prev`:return i<0?{type:`to`,key:r[0].key}:i>0?{type:`to`,key:r[i-1].key}:null;case`in`:{if(!a||a.expanded===null)return null;if(a.expanded===!1)return{type:`expand`,key:a.key};let e=r[i+1];return e&&e.parent===a.key?{type:`to`,key:e.key}:null}case`out`:return a?a.expanded===!0?{type:`collapse`,key:a.key}:a.parent===null||a.parent===void 0?null:{type:`to`,key:a.parent}:null}}function rn(e,t){let n=e.find(e=>e.key===t);return n?e.filter(e=>e.parent===n.parent&&e.expanded!==null).map(e=>e.key):[]}function an(e,t,n){let r=e;typeof r.moveBefore==`function`?r.moveBefore(t,n):e.insertBefore(t,n)}function $(e,t,n){for(;e.firstChild;)an(t,e.firstChild,n)}var on=class extends X{static{this.properties={label:{type:String,reflect:!0},nofilter:{type:Boolean,reflect:!0}}}createRenderRoot(){return this}render(){return T}#e=null;#t=[];#n=[];#r=null;#i=null;#a=null;#o=/* @__PURE__ */ new WeakMap;#s=!1;#c;constructor(){super(),this.label=`Filter`,this.nofilter=!1,this.#c=new qt(this,{items:()=>this.#t.map(e=>e.key),keyToMove:this.#w,textFor:e=>this.#t.find(t=>t.key===e)?.label??``,ignoreWithin:`a, button, input, select, textarea, [contenteditable]`,onMove:(e,t,n)=>{n===`key`&&this.#e?.setAttribute(`data-tree-keyboard`,``),e.querySelector(`:scope > .tree__summary, :scope > .tree__content`)?.scrollIntoView({block:`nearest`})}})}connectedCallback(){super.connectedCallback(),Z(this,()=>this.#l())}#l(){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||!e.querySelector(`.tree__item`)?!1:(this.#u(e),this.#e=e,this.#p(),this.#b(),this.#c.attach(e),e.addEventListener(`click`,this.#S),e.addEventListener(`beforematch`,this.#k),e.addEventListener(`pointerdown`,this.#C),window.addEventListener(`hashchange`,this.#D),requestAnimationFrame(()=>this.#O()),!0)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`hashchange`,this.#D),this.#e?.removeEventListener(`click`,this.#S),this.#e?.removeEventListener(`beforematch`,this.#k),this.#e?.removeEventListener(`pointerdown`,this.#C),this.#c.detach(),this.#r?.remove(),this.#r=null,this.#i=null,this.#a=null,this.#t=[],this.#n=[],this.#e=null}#u(e){for(let t of e.querySelectorAll(`details`))try{t.classList.contains(`tree__item`)?this.#f(t):t.parentElement&&this.#d(t.parentElement,t)}catch{}for(let t of e.querySelectorAll(`.tree__item`))t.setAttribute(`role`,`treeitem`);for(let t of e.querySelectorAll(`.tree`))t.setAttribute(`role`,`group`);e.setAttribute(`role`,`tree`),!e.hasAttribute(`aria-label`)&&!e.hasAttribute(`aria-labelledby`)&&e.setAttribute(`aria-label`,this.label)}#d(e,t){let n=t.open,r=t.querySelector(`:scope > summary`),i=document.createElement(`span`);i.className=`tree__summary`,e.insertBefore(i,t),r&&($(r,i,null),r.remove()),$(t,e,t),t.remove(),this.#v(e,n)}#f(e){let t=e.open,n=e.parentElement;if(!n)return;let r=n.tagName===`UL`||n.tagName===`OL`?`li`:`div`,i=document.createElement(r);i.id=e.id,i.className=e.className,n.insertBefore(i,e);let a=e.querySelector(`:scope > summary`),o=document.createElement(`span`);o.className=`tree__summary`,i.appendChild(o),a&&($(a,o,null),a.remove()),$(e,i,null),e.remove(),this.#v(i,t)}#p(){let e=this.#e?.querySelectorAll(`.tree__item`)??[];this.#t=[...e].map(e=>({key:e,parent:e.parentElement?.closest(`.tree__item`)??null,own:this.#h(e),label:this.#m(e)})),this.#n=this.#t.filter(e=>this.#g(e.key)!==null)}#m(e){return(e.querySelector(`:scope > .tree__summary, :scope > .tree__content`)?.textContent??``).trim().toLowerCase()}#h(e){let t=[],n=e.querySelector(`:scope > .tree__summary, :scope > .tree__content`);n?.textContent&&t.push(n.textContent);let r=e.querySelector(`:scope > .tree__desc, :scope > p`);return r?.textContent&&t.push(r.textContent),t.join(` `).toLowerCase()}#g(e){return e.querySelector(`:scope > .tree`)}#_(){return this.#t.map(e=>({...e,hidden:e.key.hidden===!0,expanded:this.#g(e.key)?e.key.getAttribute(`aria-expanded`)===`true`:null}))}#v(e,t){let n=this.#g(e);n&&(e.setAttribute(`aria-expanded`,String(t)),t?n.removeAttribute(`hidden`):n.setAttribute(`hidden`,`until-found`))}#y(e,t){e.hidden=t}#b(){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.#i=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.#a=t,this.#e?.before(e),this.#r=e}toggleAll(e){for(let t of this.#n)this.#v(t.key,e);this.#c.sync()}filter(e){let t=e.trim().toLowerCase();if(!t){for(let{key:e}of this.#t)this.#y(e,!1);if(this.#s){for(let e of this.#n)this.#v(e.key,this.#o.get(e.key)??!1);this.#s=!1}this.#x(``),this.#c.sync();return}if(!this.#s){for(let e of this.#n)this.#o.set(e.key,e.key.getAttribute(`aria-expanded`)===`true`);this.#s=!0}let{keep:n,hits:r}=en(this.#t,t);for(let{key:e}of this.#t)this.#y(e,!n.has(e));for(let e of n){let t=e;this.#g(t)&&this.#v(t,!0)}this.#x(r===1?`1 match`:`${r} matches`),this.#c.sync(),this.dispatchEvent(new CustomEvent(`tree-filter`,{detail:{query:t,matches:r},bubbles:!0}))}#x(e){this.#a&&(this.#a.textContent=e)}#S=e=>{let t=e.target;if(!t||t.closest(`.tree__actions`))return;let n=t.closest(`.tree__summary`);if(!n)return;let r=n.parentElement;r instanceof HTMLElement&&r.classList.contains(`tree__item`)&&this.#g(r)&&(this.#v(r,r.getAttribute(`aria-expanded`)!==`true`),this.#c.sync())};#C=()=>{this.#e?.removeAttribute(`data-tree-keyboard`)};#w=(e,t)=>{let n=t.active;if(!n)return null;let r=this.#T(e.key,t.rtl);if(r)return this.#E(n,r);if(e.key===`Enter`||e.key===` `)return this.#g(n)?(this.#v(n,n.getAttribute(`aria-expanded`)!==`true`),this.#c.sync()):n.querySelector(`:scope > .tree__summary a, :scope > .tree__content a`)?.click(),{type:`handled`};if(e.key===`*`){for(let e of rn(this.#_(),n))this.#v(e,!0);return this.#c.sync(),{type:`handled`}}return null};#T(e,t){switch(e){case`ArrowDown`:return`next`;case`ArrowUp`:return`prev`;case`ArrowRight`:return t?`out`:`in`;case`ArrowLeft`:return t?`in`:`out`;case`Home`:return`first`;case`End`:return`last`;default:return null}}#E(e,t){let n=nn(this.#_(),e,t);return n?n.type===`to`?{type:`to`,item:n.key}:(this.#v(n.key,n.type===`expand`),this.#c.sync(),{type:`handled`}):null}#D=()=>this.#O();#O(){let e=decodeURIComponent(location.hash.slice(1));if(!e)return;let t=this.#e?.ownerDocument.getElementById(e);if(t&&this.contains(t)){this.#g(t)&&this.#v(t,!0);for(let e=t.parentElement;e&&(e.classList.contains(`tree__item`)&&this.#v(e,!0),e!==this);e=e.parentElement);this.#i?.value&&this.filter(this.#i.value=``),this.#c.setActive(t,{focus:!1,cause:`api`}),(t.querySelector(`:scope > .tree__summary, :scope > .tree__content`)??t).scrollIntoView({block:`start`,behavior:Q()})}}#k=e=>{let t=e.target;if(!(t instanceof HTMLElement))return;let n=t.parentElement;n instanceof HTMLElement&&n.classList.contains(`tree__item`)&&n.setAttribute(`aria-expanded`,`true`)}};customElements.get(`wc-tree`)||customElements.define(`wc-tree`,on);function sn(e){return!e.hasLink||e.onInteractive||e.platformHandled?!1:e.moved<=6}function cn(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}var ln=class extends X{static{this.properties={item:{type:String,reflect:!0}}}createRenderRoot(){return this}render(){return T}#e=[];#t;constructor(){super(),this.item=`.card`}connectedCallback(){super.connectedCallback(),Z(this,()=>this.#n())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`pointerdown`,this.#i),this.removeEventListener(`click`,this.#a);for(let e of this.#e)e.removeAttribute(`data-card-link`);this.#e=[]}#n(){if(this.parentElement?.closest(`wc-cards`)||this.#e.length)return!0;let e=[...this.querySelectorAll(this.item)];if(!e.length)return!1;if(this.#e=e.filter(e=>this.#r(e)),!this.#e.length)return!0;for(let e of this.#e)e.setAttribute(`data-card-link`,``);return this.addEventListener(`pointerdown`,this.#i),this.addEventListener(`click`,this.#a),!0}#r(e){return e.querySelector(`a[href][data-card-link-target]`)??e.querySelector(`a[href]`)}#i=e=>{this.#t={x:e.clientX,y:e.clientY}};#a=e=>{let t=e.target,n=t?.closest(`[data-card-link]`);if(!n||!this.contains(n))return;let r=this.#r(n);if(r&&t?.closest(`a[href]`)===r)return;let i=sn({moved:this.#t?cn(this.#t,{x:e.clientX,y:e.clientY}):0,onInteractive:!!t?.closest(`a[href],button,input,select,textarea,label,summary,details,audio[controls],video[controls],[contenteditable],[role="button"],[role="link"],[onclick],[data-no-card-link]`),platformHandled:e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button!==0,hasLink:!!r});this.#t=void 0,i&&r&&r.click()}};customElements.get(`wc-cards`)||customElements.define(`wc-cards`,ln);function un(e,t,n){if(t<=1)return[];let r=[Ht({index:e,total:t,delta:-1,loop:n}),Ht({index:e,total:t,delta:1,loop:n})];return[...new Set(r)].filter(t=>t!==e)}var dn=class extends X{createRenderRoot(){return this}render(){return T}#e=!1;#t=null;#n=null;#r=null;#i=[];#a=!1;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#o())}disconnectedCallback(){super.disconnectedCallback();for(let e of this.#i)e.trigger.removeEventListener(`click`,this.#s);this.#r?.removeEventListener(`click`,this.#u),this.#n?.removeEventListener(`carousel-change`,this.#d),this.#i=[],this.#t=null,this.#n=null,this.#r=null,this.#e=!1}#o(){if(this.parentElement?.closest(`wc-gallery`)||this.#e)return!0;let e=[...this.querySelectorAll(`.gallery__trigger[href^="#"]`)],t=this.querySelector(`dialog.lightbox-dialog`);if(!e.length||!t)return!1;let n=t.querySelector(`.lightbox-dialog__track`);if(!n)return!1;let r=[];for(let t of e){let e=t.getAttribute(`href`)?.slice(1),n=e?this.querySelector(`#${CSS.escape(e)}`):null;if(!n)return!1;r.push({trigger:t,slide:n})}this.#a=matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.#t=t,this.#n=n,this.#r=t.querySelector(`.lightbox-dialog__close`),this.#i=r;for(let e of r)e.trigger.addEventListener(`click`,this.#s);return this.#r?.addEventListener(`click`,this.#u),n.addEventListener(`carousel-change`,this.#d),this.#e=!0,!0}#s=e=>{let t=e.currentTarget,n=this.#i.find(e=>e.trigger===t);n&&this.#t&&(e.preventDefault(),this.#c(n))};#c(e){let t=this.#i.indexOf(e),n=this.#i.length,r=()=>{this.#t.showModal(),e.slide.scrollIntoView({inline:`center`,block:`nearest`,behavior:`instant`}),this.#l(t),this.dispatchEvent(new CustomEvent(`gallery-open`,{bubbles:!0,composed:!0,detail:{index:t,total:n}}))},i=e.trigger.querySelector(`.gallery__thumb`),a=e.slide.querySelector(`img`);this.#a||!(`startViewTransition`in document)||!i||!a?r():(i.style.viewTransitionName=`lightbox-active`,document.startViewTransition(()=>{i.style.viewTransitionName=``,a.style.viewTransitionName=`lightbox-active`,r()}).finished.finally(()=>{a.style.viewTransitionName=``}))}#l(e){let t=this.#n?.hasAttribute(`loop`)??!1;for(let n of un(e,this.#i.length,t)){let e=this.#i[n]?.slide.querySelector(`img`),t=e?.currentSrc||e?.src;t&&(new Image().src=t)}}#u=e=>{e.preventDefault(),this.#t?.close()};#d=e=>{this.dispatchEvent(new CustomEvent(`gallery-change`,{bubbles:!0,composed:!0,detail:e.detail}))}};customElements.get(`wc-gallery`)||customElements.define(`wc-gallery`,dn);const fn=/^([^0-9-]*)(-?[0-9,]*\.?[0-9]*)([^0-9]*)$/;function pn(e,t){let n=fn.exec(e.trim()),r=n?.[2]||`0`,i=r.split(`.`)[1];return{prefix:n?.[1]??``,suffix:n?.[3]??``,value:Number.parseFloat(r.replace(/,/g,``))||0,decimals:t??i?.length??0,grouping:r.includes(`,`)}}function mn(e){return new Intl.NumberFormat(void 0,{minimumFractionDigits:e.decimals,maximumFractionDigits:e.decimals,useGrouping:e.grouping})}const hn={linear:`linear`,"ease-in":`var(--custom-ease-in)`,"ease-out":`var(--custom-ease-out)`,"float-sine":`var(--ease-float-sine)`,"float-bounce":`var(--ease-float-bounce)`};function gn(e){return e?hn[e]:void 0}const _n=/* @__PURE__ */ new WeakMap;let vn;function yn(){return vn??=new IntersectionObserver((e,t)=>{for(let n of e)n.isIntersecting&&(t.unobserve(n.target),_n.get(n.target)?.())})}var bn=class extends X{createRenderRoot(){return this}render(){return T}#e=!1;#t=null;#n=null;#r=null;#i=``;#a=``;#o=0;#s=0;#c=0;#l=!1;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#u())}disconnectedCallback(){super.disconnectedCallback(),yn().unobserve(this),_n.delete(this),this.#h(),this.#n?.remove(),this.#n=null,this.#t?.classList.remove(`sr-only`),this.#t=null,this.#e=!1}#u(){if(this.parentElement?.closest(`wc-counter`)||this.#e)return!0;let e=this.querySelector(`.counter__value`);if(!e)return!1;this.#t=e;let t=this.getAttribute(`data-decimals`),n=pn(e.textContent??``,t?Number(t):void 0);if(this.#i=n.prefix,this.#a=n.suffix,this.#o=n.value,this.#r=mn(n),this.#e=!0,matchMedia(`(prefers-reduced-motion: reduce)`).matches)return!0;let r=document.createElement(`span`);r.className=`counter__presentation`,r.setAttribute(`aria-hidden`,`true`),r.textContent=e.textContent,e.insertAdjacentElement(`afterend`,r),this.#n=r,this.setAttribute(`aria-live`,`off`);let i=this.getAttribute(`data-from`)??`0`,a=Number(this.getAttribute(`data-duration`)??`1200`);this.style.setProperty(`--counter-from`,i),this.style.setProperty(`--counter-to`,String(this.#o)),this.style.setProperty(`--counter-duration`,`${a}ms`);let o=gn(this.getAttribute(`data-easing`));return o&&this.style.setProperty(`--counter-easing`,o),_n.set(this,()=>this.#d(a)),yn().observe(this),!0}#d(e){this.#n&&(this.#l=!1,this.setAttribute(`running`,``),this.#t?.classList.add(`sr-only`),this.#n.addEventListener(`animationend`,this.#m,{once:!0}),this.#c=window.setTimeout(this.#m,e+100),this.#s=requestAnimationFrame(this.#f))}#f=()=>{if(!this.#n||!this.#r)return;let e=Number.parseFloat(getComputedStyle(this.#n).getPropertyValue(`--_n`));this.#p(Number.isFinite(e)?e:this.#o),this.#s=requestAnimationFrame(this.#f)};#p(e){this.#n&&this.#r&&(this.#n.textContent=`${this.#i}${this.#r.format(e)}${this.#a}`)}#m=()=>{this.#l||(this.#l=!0,this.#p(this.#o),this.#h(),this.#t?.classList.remove(`sr-only`),this.removeAttribute(`running`))};#h(){this.#s&&cancelAnimationFrame(this.#s),this.#s=0,this.#c&&clearTimeout(this.#c),this.#c=0,this.#n?.removeEventListener(`animationend`,this.#m)}};customElements.get(`wc-counter`)||customElements.define(`wc-counter`,bn);function xn(e){return typeof e==`string`&&/^[0-9A-Za-z_-]{8,64}$/.test(e)}function Sn(e){return`https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=${encodeURIComponent(e)}`}function Cn(e){return e.live&&!e.token}const wn=`__vitopsTurnstileReady`;let Tn;function En(){let e=window.turnstile;return e?Promise.resolve(e):Tn??=new Promise((e,t)=>{window[wn]=()=>e(window.turnstile);let n=document.createElement(`script`);n.src=Sn(wn),n.async=!0,n.onerror=()=>{Tn=void 0,t(/* @__PURE__ */ Error(`turnstile script failed to load`))},document.head.append(n)})}var Dn=class extends X{createRenderRoot(){return this}render(){return T}#e=null;#t=!1;#n=!1;#r=``;#i=!1;#a;#o=null;#s=null;#c=null;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#l())}disconnectedCallback(){super.disconnectedCallback(),this.#u()}#l(){if(this.#n||this.#e)return!0;let e=this.closest(`form`);if(!e)return!1;if(!xn(this.getAttribute(`sitekey`)))return!0;this.#e=e,this.#o=this.querySelector(`[data-turnstile-fallback]`);for(let t of[`focusin`,`pointerdown`,`input`])e.addEventListener(t,this.#d,{once:!0,passive:!0});return e.addEventListener(`submit`,this.#f),this.#n=!0,this.#o?.setAttribute(`hidden`,``),this.#c=document.createElement(`div`),this.#c.className=`turnstile__widget`,this.#s=document.createElement(`p`),this.#s.className=`form-group__helper turnstile__status`,this.#s.setAttribute(`role`,`status`),this.#s.hidden=!0,this.append(this.#c,this.#s),!0}#u(){if(this.#e){for(let e of[`focusin`,`pointerdown`,`input`])this.#e.removeEventListener(e,this.#d);this.#e.removeEventListener(`submit`,this.#f),this.#a&&window.turnstile?.remove(this.#a),this.#e=null,this.#n=!1,this.#t=!1,this.#a=void 0,this.#c?.remove(),this.#s?.remove(),this.#o?.removeAttribute(`hidden`)}}#d=()=>{if(this.#t)return;this.#t=!0;let e=this.getAttribute(`sitekey`);En().then(t=>{this.isConnected&&this.#c&&(this.#a=t.render(this.#c,{sitekey:e,callback:e=>{this.#r=e,this.#p(``),this.#i&&(this.#i=!1,this.#e?.requestSubmit())},"expired-callback":()=>{this.#r=``},"error-callback":()=>{this.#r=``,this.#p(`The spam check could not run. Reload the page, or contact us another way.`)}}))},()=>{this.#t=!1,this.#p(`The spam check could not load. Check your connection and try again.`)})};#f=e=>{Cn({live:this.#n,token:this.#r})&&(e.preventDefault(),this.#i=!0,this.#p(`Checking that you are human. Your message will send in a moment.`),this.#d())};#p(e){this.#s&&(this.#s.textContent=e,this.#s.hidden=!e)}};customElements.get(`wc-turnstile`)||customElements.define(`wc-turnstile`,Dn);
|
|
50
|
+
:host{--_gap:var(--multi-field-gap, 0.5rem);--_input-padding:var(--multi-field-input-padding, 0.5rem 0.75rem);--_radius:var(--multi-field-border-radius, 0.375rem);--_border-color:var(--multi-field-border-color, oklch(0.8 0 0));--_focus-color:var(--multi-field-focus-color, oklch(0.6 0.2 250));--_button-bg:var(--multi-field-button-bg, oklch(0.95 0 0));--_button-hover-bg:var(--multi-field-button-hover-bg, oklch(0.9 0 0));--_delete-color:var(--multi-field-delete-color, oklch(0.6 0.2 25));--_delete-hover-bg:var(--multi-field-delete-hover-bg, oklch(0.95 0.05 25));display:block}.container,.entries{flex-direction:column}.container,.entries,.entry{display:flex;gap:var(--_gap)}.entry{align-items:center}.entry__input{flex:1;padding:var(--_input-padding);border:1px solid var(--_border-color);border-radius:var(--_radius);font:inherit;background:transparent}.entry__input:focus-visible{outline:2px solid var(--_focus-color);outline-offset:2px}.entry__input:disabled{opacity:.6;cursor:not-allowed}.entry__delete{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2rem;min-block-size:2rem;padding:.25rem;background:transparent;border:1px solid transparent;border-radius:var(--_radius);color:var(--_delete-color);cursor:pointer;transition:background-color .15s ease}.entry__delete:hover:not(:disabled){background:var(--_delete-hover-bg)}.entry__delete:focus-visible{outline:2px solid var(--_focus-color);outline-offset:2px}.entry__delete:disabled{opacity:.3;cursor:not-allowed}.entry__delete-icon{inline-size:1rem;block-size:1rem;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M135.2%2017.7%20128%2032H32C14.3%2032%200%2046.3%200%2064s14.3%2032%2032%2032h384c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-96l-7.2-14.3C307.4%206.8%20296.3%200%20284.2%200H163.8c-12.1%200-23.2%206.8-28.6%2017.7M416%20128H32l21.2%20339c1.6%2025.3%2022.6%2045%2047.9%2045h245.8c25.3%200%2046.3-19.7%2047.9-45z%22%2F%3E%3C%2Fsvg%3E")}.actions{display:flex;gap:var(--_gap);flex-wrap:wrap}.action-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:var(--_button-bg);border:1px solid var(--_border-color);border-radius:var(--_radius);font:inherit;font-size:.875em;cursor:pointer;transition:background-color .15s ease}.action-button:hover:not(:disabled){background:var(--_button-hover-bg)}.action-button:focus-visible{outline:2px solid var(--_focus-color);outline-offset:2px}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button__icon{inline-size:.875rem;block-size:.875rem;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}.action-button__icon--add{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M256%2080c0-17.7-14.3-32-32-32s-32%2014.3-32%2032v144H48c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h144v144c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V288h144c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H256z%22%2F%3E%3C%2Fsvg%3E")}.action-button__icon--clear{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M290.7%2057.4%2057.4%20290.7c-25%2025-25%2065.5%200%2090.5l80%2080c12%2012%2028.3%2018.7%2045.3%2018.7H512c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H387.9l130.7-130.6c25-25%2025-65.5%200-90.5L381.3%2057.4c-25-25-65.5-25-90.5%200zm6.7%20358.6H182.6l-80-80%20124.7-124.7%20137.4%20137.4z%22%2F%3E%3C%2Fsvg%3E")}.initial-slot{display:none}@media (prefers-reduced-motion:reduce){.action-button,.entry__delete{transition:none}}`]}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 Y` <div class="container" part="container"> <div class="initial-slot"> <slot @slotchange="${this._initializeFromSlot}"></slot> </div> <div class="entries" part="entries" role="list"> ${this._entries.map(e=>Y` <div class="entry" part="entry" role="listitem"> <input class="entry__input" part="input" type="${this.type}" name="${this.name?`${this.name}[]`:``}" placeholder="${this.placeholder}" .value="${e.value}" @input="${t=>this._handleInput(e.id,t)}" ?data-default="${e.isDefault}"> <button type="button" class="entry__delete" part="delete-button" aria-label="${this.deleteLabel}" ?disabled="${!this._canDelete(e)}" @click="${()=>this._handleDelete(e.id)}"> <span class="entry__delete-icon" aria-hidden="true"></span> </button> </div> `)} </div> <div class="actions" part="actions"> <button type="button" class="action-button" part="add-button" ?disabled="${!this._canAdd()}" @click="${this._handleAdd}"> <span class="action-button__icon action-button__icon--add" aria-hidden="true"></span> <slot name="add-label">${this.addLabel}</slot> </button> <button type="button" class="action-button" part="clear-button" ?disabled="${!this._canClear()}" @click="${this._handleClear}"> <span class="action-button__icon action-button__icon--clear" aria-hidden="true"></span> <slot name="clear-label">${this.clearLabel}</slot> </button> </div> </div> `}};customElements.get(`wc-multi-field`)||customElements.define(`wc-multi-field`,Qt);var $t=class extends X{createRenderRoot(){return this}#e=null;#t;#n;#r;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#i())}#i(){if(this.#e)return!0;let e=this.querySelectorAll(`.marquee__content`),t=e[0];if(!t)return!1;this.#e=t;for(let t of Array.from(e).slice(1))t.dataset.marqueeClone=``;return this.style.setProperty(`--_marquee-min`,`auto`),this.#a(),this.#o(),this.#t=new ResizeObserver(()=>this.#o()),this.#t.observe(this),this.#t.observe(t),!0}#a(){if(this.#n)return;let e=document.createElement(`button`);e.type=`button`,e.className=`marquee__toggle`,e.setAttribute(`aria-pressed`,`false`),e.textContent=`Pause animation`,e.addEventListener(`click`,()=>{let t=this.toggleAttribute(`data-paused`);e.setAttribute(`aria-pressed`,String(t)),e.textContent=t?`Play animation`:`Pause animation`}),this.after(e),this.#n=e}disconnectedCallback(){this.#n?.remove(),this.#n=void 0,this.#t?.disconnect(),super.disconnectedCallback()}#o(){let e=this.#e;if(!e)return;let t=getComputedStyle(this),n=t.flexDirection.startsWith(`column`),r=Number.parseFloat(n?t.rowGap:t.columnGap)||0,i=e.getBoundingClientRect(),a=n?i.height:i.width;if(a<=0)return;let o=this.getBoundingClientRect(),s=n?o.height:o.width;if(this.#r&&this.#r.one===a&&this.#r.gap===r&&this.#r.container===s&&this.#r.vertical===n)return;this.#r={one:a,gap:r,container:s,vertical:n};for(let e of this.querySelectorAll(`[data-marquee-clone]`))e.remove();this.style.setProperty(`--_marquee-distance`,`${a+r}px`);let c=Math.ceil((s+r)/(a+r))+1;for(let t=0;t<c;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`,$t);function en(e,t){let n=t.trim().toLowerCase();if(!n)return{keep:/* @__PURE__ */ new Set,hits:0};let r=/* @__PURE__ */ new Map,i=/* @__PURE__ */ 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=/* @__PURE__ */ 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=/* @__PURE__ */ 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}}function tn(e){let t=/* @__PURE__ */ new Map;for(let n of e)t.set(n.key,n);return e.filter(e=>{if(e.hidden)return!1;let n=/* @__PURE__ */ new Set([e.key]),r=e.parent===null||e.parent===void 0?void 0:t.get(e.parent);for(;r;){if(r.hidden||r.expanded===!1)return!1;if(n.has(r.key))break;n.add(r.key),r=r.parent===null||r.parent===void 0?void 0:t.get(r.parent)}return!0})}function nn(e,t,n){let r=tn(e);if(!r.length)return null;let i=r.findIndex(e=>e.key===t),a=i>=0?r[i]:void 0;switch(n){case`first`:return{type:`to`,key:r[0].key};case`last`:return{type:`to`,key:r[r.length-1].key};case`next`:return i<0?{type:`to`,key:r[0].key}:i<r.length-1?{type:`to`,key:r[i+1].key}:null;case`prev`:return i<0?{type:`to`,key:r[0].key}:i>0?{type:`to`,key:r[i-1].key}:null;case`in`:{if(!a||a.expanded===null)return null;if(a.expanded===!1)return{type:`expand`,key:a.key};let e=r[i+1];return e&&e.parent===a.key?{type:`to`,key:e.key}:null}case`out`:return a?a.expanded===!0?{type:`collapse`,key:a.key}:a.parent===null||a.parent===void 0?null:{type:`to`,key:a.parent}:null}}function rn(e,t){let n=e.find(e=>e.key===t);return n?e.filter(e=>e.parent===n.parent&&e.expanded!==null).map(e=>e.key):[]}function an(e,t,n){let r=e;typeof r.moveBefore==`function`?r.moveBefore(t,n):e.insertBefore(t,n)}function $(e,t,n){for(;e.firstChild;)an(t,e.firstChild,n)}var on=class extends X{static{this.properties={label:{type:String,reflect:!0},nofilter:{type:Boolean,reflect:!0}}}createRenderRoot(){return this}render(){return T}#e=null;#t=[];#n=[];#r=null;#i=null;#a=null;#o=/* @__PURE__ */ new WeakMap;#s=!1;#c;constructor(){super(),this.label=`Filter`,this.nofilter=!1,this.#c=new qt(this,{items:()=>this.#t.map(e=>e.key),keyToMove:this.#w,textFor:e=>this.#t.find(t=>t.key===e)?.label??``,ignoreWithin:`a, button, input, select, textarea, [contenteditable]`,onMove:(e,t,n)=>{n===`key`&&this.#e?.setAttribute(`data-tree-keyboard`,``),e.querySelector(`:scope > .tree__summary, :scope > .tree__content`)?.scrollIntoView({block:`nearest`})}})}connectedCallback(){super.connectedCallback(),Z(this,()=>this.#l())}#l(){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||!e.querySelector(`.tree__item`)?!1:(this.#u(e),this.#e=e,this.#p(),this.#b(),this.#c.attach(e),e.addEventListener(`click`,this.#S),e.addEventListener(`beforematch`,this.#k),e.addEventListener(`pointerdown`,this.#C),window.addEventListener(`hashchange`,this.#D),requestAnimationFrame(()=>this.#O()),!0)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`hashchange`,this.#D),this.#e?.removeEventListener(`click`,this.#S),this.#e?.removeEventListener(`beforematch`,this.#k),this.#e?.removeEventListener(`pointerdown`,this.#C),this.#c.detach(),this.#r?.remove(),this.#r=null,this.#i=null,this.#a=null,this.#t=[],this.#n=[],this.#e=null}#u(e){for(let t of e.querySelectorAll(`details`))try{t.classList.contains(`tree__item`)?this.#f(t):t.parentElement&&this.#d(t.parentElement,t)}catch{}for(let t of e.querySelectorAll(`.tree__item`))t.setAttribute(`role`,`treeitem`);for(let t of e.querySelectorAll(`.tree`))t.setAttribute(`role`,`group`);e.setAttribute(`role`,`tree`),!e.hasAttribute(`aria-label`)&&!e.hasAttribute(`aria-labelledby`)&&e.setAttribute(`aria-label`,this.label)}#d(e,t){let n=t.open,r=t.querySelector(`:scope > summary`),i=document.createElement(`span`);i.className=`tree__summary`,e.insertBefore(i,t),r&&($(r,i,null),r.remove()),$(t,e,t),t.remove(),this.#v(e,n)}#f(e){let t=e.open,n=e.parentElement;if(!n)return;let r=n.tagName===`UL`||n.tagName===`OL`?`li`:`div`,i=document.createElement(r);i.id=e.id,i.className=e.className,n.insertBefore(i,e);let a=e.querySelector(`:scope > summary`),o=document.createElement(`span`);o.className=`tree__summary`,i.appendChild(o),a&&($(a,o,null),a.remove()),$(e,i,null),e.remove(),this.#v(i,t)}#p(){let e=this.#e?.querySelectorAll(`.tree__item`)??[];this.#t=[...e].map(e=>({key:e,parent:e.parentElement?.closest(`.tree__item`)??null,own:this.#h(e),label:this.#m(e)})),this.#n=this.#t.filter(e=>this.#g(e.key)!==null)}#m(e){return(e.querySelector(`:scope > .tree__summary, :scope > .tree__content`)?.textContent??``).trim().toLowerCase()}#h(e){let t=[],n=e.querySelector(`:scope > .tree__summary, :scope > .tree__content`);n?.textContent&&t.push(n.textContent);let r=e.querySelector(`:scope > .tree__desc, :scope > p`);return r?.textContent&&t.push(r.textContent),t.join(` `).toLowerCase()}#g(e){return e.querySelector(`:scope > .tree`)}#_(){return this.#t.map(e=>({...e,hidden:e.key.hidden===!0,expanded:this.#g(e.key)?e.key.getAttribute(`aria-expanded`)===`true`:null}))}#v(e,t){let n=this.#g(e);n&&(e.setAttribute(`aria-expanded`,String(t)),t?n.removeAttribute(`hidden`):n.setAttribute(`hidden`,`until-found`))}#y(e,t){e.hidden=t}#b(){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.#i=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.#a=t,this.#e?.before(e),this.#r=e}toggleAll(e){for(let t of this.#n)this.#v(t.key,e);this.#c.sync()}filter(e){let t=e.trim().toLowerCase();if(!t){for(let{key:e}of this.#t)this.#y(e,!1);if(this.#s){for(let e of this.#n)this.#v(e.key,this.#o.get(e.key)??!1);this.#s=!1}this.#x(``),this.#c.sync();return}if(!this.#s){for(let e of this.#n)this.#o.set(e.key,e.key.getAttribute(`aria-expanded`)===`true`);this.#s=!0}let{keep:n,hits:r}=en(this.#t,t);for(let{key:e}of this.#t)this.#y(e,!n.has(e));for(let e of n){let t=e;this.#g(t)&&this.#v(t,!0)}this.#x(r===1?`1 match`:`${r} matches`),this.#c.sync(),this.dispatchEvent(new CustomEvent(`tree-filter`,{detail:{query:t,matches:r},bubbles:!0}))}#x(e){this.#a&&(this.#a.textContent=e)}#S=e=>{let t=e.target;if(!t||t.closest(`.tree__actions`))return;let n=t.closest(`.tree__summary`);if(!n)return;let r=n.parentElement;r instanceof HTMLElement&&r.classList.contains(`tree__item`)&&this.#g(r)&&(this.#v(r,r.getAttribute(`aria-expanded`)!==`true`),this.#c.sync())};#C=()=>{this.#e?.removeAttribute(`data-tree-keyboard`)};#w=(e,t)=>{let n=t.active;if(!n)return null;let r=this.#T(e.key,t.rtl);if(r)return this.#E(n,r);if(e.key===`Enter`||e.key===` `)return this.#g(n)?(this.#v(n,n.getAttribute(`aria-expanded`)!==`true`),this.#c.sync()):n.querySelector(`:scope > .tree__summary a, :scope > .tree__content a`)?.click(),{type:`handled`};if(e.key===`*`){for(let e of rn(this.#_(),n))this.#v(e,!0);return this.#c.sync(),{type:`handled`}}return null};#T(e,t){switch(e){case`ArrowDown`:return`next`;case`ArrowUp`:return`prev`;case`ArrowRight`:return t?`out`:`in`;case`ArrowLeft`:return t?`in`:`out`;case`Home`:return`first`;case`End`:return`last`;default:return null}}#E(e,t){let n=nn(this.#_(),e,t);return n?n.type===`to`?{type:`to`,item:n.key}:(this.#v(n.key,n.type===`expand`),this.#c.sync(),{type:`handled`}):null}#D=()=>this.#O();#O(){let e=decodeURIComponent(location.hash.slice(1));if(!e)return;let t=this.#e?.ownerDocument.getElementById(e);if(t&&this.contains(t)){this.#g(t)&&this.#v(t,!0);for(let e=t.parentElement;e&&(e.classList.contains(`tree__item`)&&this.#v(e,!0),e!==this);e=e.parentElement);this.#i?.value&&this.filter(this.#i.value=``),this.#c.setActive(t,{focus:!1,cause:`api`}),(t.querySelector(`:scope > .tree__summary, :scope > .tree__content`)??t).scrollIntoView({block:`start`,behavior:Q()})}}#k=e=>{let t=e.target;if(!(t instanceof HTMLElement))return;let n=t.parentElement;n instanceof HTMLElement&&n.classList.contains(`tree__item`)&&n.setAttribute(`aria-expanded`,`true`)}};customElements.get(`wc-tree`)||customElements.define(`wc-tree`,on);function sn(e){return!e.hasLink||e.onInteractive||e.platformHandled?!1:e.moved<=6}function cn(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}var ln=class extends X{static{this.properties={item:{type:String,reflect:!0}}}createRenderRoot(){return this}render(){return T}#e=[];#t;constructor(){super(),this.item=`.card`}connectedCallback(){super.connectedCallback(),Z(this,()=>this.#n())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`pointerdown`,this.#i),this.removeEventListener(`click`,this.#a);for(let e of this.#e)e.removeAttribute(`data-card-link`);this.#e=[]}#n(){if(this.parentElement?.closest(`wc-cards`)||this.#e.length)return!0;let e=[...this.querySelectorAll(this.item)];if(!e.length)return!1;if(this.#e=e.filter(e=>this.#r(e)),!this.#e.length)return!0;for(let e of this.#e)e.setAttribute(`data-card-link`,``);return this.addEventListener(`pointerdown`,this.#i),this.addEventListener(`click`,this.#a),!0}#r(e){return e.querySelector(`a[href][data-card-link-target]`)??e.querySelector(`a[href]`)}#i=e=>{this.#t={x:e.clientX,y:e.clientY}};#a=e=>{let t=e.target,n=t?.closest(`[data-card-link]`);if(!n||!this.contains(n))return;let r=this.#r(n);if(r&&t?.closest(`a[href]`)===r)return;let i=sn({moved:this.#t?cn(this.#t,{x:e.clientX,y:e.clientY}):0,onInteractive:!!t?.closest(`a[href],button,input,select,textarea,label,summary,details,audio[controls],video[controls],[contenteditable],[role="button"],[role="link"],[onclick],[data-no-card-link]`),platformHandled:e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button!==0,hasLink:!!r});this.#t=void 0,i&&r&&r.click()}};customElements.get(`wc-cards`)||customElements.define(`wc-cards`,ln);function un(e,t,n){if(t<=1)return[];let r=[Ht({index:e,total:t,delta:-1,loop:n}),Ht({index:e,total:t,delta:1,loop:n})];return[...new Set(r)].filter(t=>t!==e)}var dn=class extends X{createRenderRoot(){return this}render(){return T}#e=!1;#t=null;#n=null;#r=null;#i=[];#a=!1;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#o())}disconnectedCallback(){super.disconnectedCallback();for(let e of this.#i)e.trigger.removeEventListener(`click`,this.#s);this.#r?.removeEventListener(`click`,this.#u),this.#n?.removeEventListener(`carousel-change`,this.#d),this.#i=[],this.#t=null,this.#n=null,this.#r=null,this.#e=!1}#o(){if(this.parentElement?.closest(`wc-gallery`)||this.#e)return!0;let e=[...this.querySelectorAll(`.gallery__trigger[href^="#"]`)],t=this.querySelector(`dialog.lightbox-dialog`);if(!e.length||!t)return!1;let n=t.querySelector(`.lightbox-dialog__track`);if(!n)return!1;let r=[];for(let t of e){let e=t.getAttribute(`href`)?.slice(1),n=e?this.querySelector(`#${CSS.escape(e)}`):null;if(!n)return!1;r.push({trigger:t,slide:n})}this.#a=matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.#t=t,this.#n=n,this.#r=t.querySelector(`.lightbox-dialog__close`),this.#i=r;for(let e of r)e.trigger.addEventListener(`click`,this.#s);return this.#r?.addEventListener(`click`,this.#u),n.addEventListener(`carousel-change`,this.#d),this.#e=!0,!0}#s=e=>{let t=e.currentTarget,n=this.#i.find(e=>e.trigger===t);n&&this.#t&&(e.preventDefault(),this.#c(n))};#c(e){let t=this.#i.indexOf(e),n=this.#i.length,r=()=>{this.#t.showModal(),e.slide.scrollIntoView({inline:`center`,block:`nearest`,behavior:`instant`}),this.#l(t),this.dispatchEvent(new CustomEvent(`gallery-open`,{bubbles:!0,composed:!0,detail:{index:t,total:n}}))},i=e.trigger.querySelector(`.gallery__thumb`),a=e.slide.querySelector(`img`);this.#a||!(`startViewTransition`in document)||!i||!a?r():(i.style.viewTransitionName=`lightbox-active`,document.startViewTransition(()=>{i.style.viewTransitionName=``,a.style.viewTransitionName=`lightbox-active`,r()}).finished.finally(()=>{a.style.viewTransitionName=``}))}#l(e){let t=this.#n?.hasAttribute(`loop`)??!1;for(let n of un(e,this.#i.length,t)){let e=this.#i[n]?.slide.querySelector(`img`),t=e?.currentSrc||e?.src;t&&(new Image().src=t)}}#u=e=>{e.preventDefault(),this.#t?.close()};#d=e=>{this.dispatchEvent(new CustomEvent(`gallery-change`,{bubbles:!0,composed:!0,detail:e.detail}))}};customElements.get(`wc-gallery`)||customElements.define(`wc-gallery`,dn);const fn=/^([^0-9-]*)(-?[0-9,]*\.?[0-9]*)([^0-9]*)$/;function pn(e){let t=fn.exec(e.trim());return!!t&&/[0-9]/.test(t[2]??``)}function mn(e,t){let n=fn.exec(e.trim()),r=n?.[2]||`0`,i=r.split(`.`)[1];return{prefix:n?.[1]??``,suffix:n?.[3]??``,value:Number.parseFloat(r.replace(/,/g,``))||0,decimals:t??i?.length??0,grouping:r.includes(`,`)}}function hn(e){return new Intl.NumberFormat(void 0,{minimumFractionDigits:e.decimals,maximumFractionDigits:e.decimals,useGrouping:e.grouping})}const gn={linear:`linear`,"ease-in":`var(--custom-ease-in)`,"ease-out":`var(--custom-ease-out)`,"float-sine":`var(--ease-float-sine)`,"float-bounce":`var(--ease-float-bounce)`};function _n(e){return e?gn[e]:void 0}const vn=/* @__PURE__ */ new WeakMap;let yn;function bn(){return yn??=new IntersectionObserver((e,t)=>{for(let n of e)n.isIntersecting&&(t.unobserve(n.target),vn.get(n.target)?.())})}var xn=class extends X{createRenderRoot(){return this}render(){return T}#e=!1;#t=null;#n=null;#r=null;#i=``;#a=``;#o=0;#s=0;#c=0;#l=!1;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#u())}disconnectedCallback(){super.disconnectedCallback(),bn().unobserve(this),vn.delete(this),this.#h(),this.#n?.remove(),this.#n=null,this.#t?.classList.remove(`sr-only`),this.#t=null,this.#e=!1}#u(){if(this.parentElement?.closest(`wc-counter`)||this.#e)return!0;let e=this.querySelector(`.counter__value`);if(!e)return!1;if(this.#t=e,!pn(e.textContent??``))return!0;let t=this.getAttribute(`data-decimals`),n=mn(e.textContent??``,t?Number(t):void 0);if(this.#i=n.prefix,this.#a=n.suffix,this.#o=n.value,this.#r=hn(n),this.#e=!0,matchMedia(`(prefers-reduced-motion: reduce)`).matches)return!0;let r=document.createElement(`span`);r.className=`counter__presentation`,r.setAttribute(`aria-hidden`,`true`),r.textContent=e.textContent,e.insertAdjacentElement(`afterend`,r),this.#n=r,this.setAttribute(`aria-live`,`off`);let i=this.getAttribute(`data-from`)??`0`,a=Number(this.getAttribute(`data-duration`)??`1200`);this.style.setProperty(`--counter-from`,i),this.style.setProperty(`--counter-to`,String(this.#o)),this.style.setProperty(`--counter-duration`,`${a}ms`);let o=_n(this.getAttribute(`data-easing`));return o&&this.style.setProperty(`--counter-easing`,o),vn.set(this,()=>this.#d(a)),bn().observe(this),!0}#d(e){this.#n&&(this.#l=!1,this.setAttribute(`running`,``),this.#t?.classList.add(`sr-only`),this.#n.addEventListener(`animationend`,this.#m,{once:!0}),this.#c=window.setTimeout(this.#m,e+100),this.#s=requestAnimationFrame(this.#f))}#f=()=>{if(!this.#n||!this.#r)return;let e=Number.parseFloat(getComputedStyle(this.#n).getPropertyValue(`--_n`));this.#p(Number.isFinite(e)?e:this.#o),this.#s=requestAnimationFrame(this.#f)};#p(e){this.#n&&this.#r&&(this.#n.textContent=`${this.#i}${this.#r.format(e)}${this.#a}`)}#m=()=>{this.#l||(this.#l=!0,this.#p(this.#o),this.#h(),this.#t?.classList.remove(`sr-only`),this.removeAttribute(`running`))};#h(){this.#s&&cancelAnimationFrame(this.#s),this.#s=0,this.#c&&clearTimeout(this.#c),this.#c=0,this.#n?.removeEventListener(`animationend`,this.#m)}};customElements.get(`wc-counter`)||customElements.define(`wc-counter`,xn);function Sn(e){return typeof e==`string`&&/^[0-9A-Za-z_-]{8,64}$/.test(e)}function Cn(e){return`https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=${encodeURIComponent(e)}`}function wn(e){return e.live&&!e.token}const Tn=`__vitopsTurnstileReady`;let En;function Dn(){let e=window.turnstile;return e?Promise.resolve(e):En??=new Promise((e,t)=>{window[Tn]=()=>e(window.turnstile);let n=document.createElement(`script`);n.src=Cn(Tn),n.async=!0,n.onerror=()=>{En=void 0,t(/* @__PURE__ */ Error(`turnstile script failed to load`))},document.head.append(n)})}var On=class extends X{createRenderRoot(){return this}render(){return T}#e=null;#t=!1;#n=!1;#r=``;#i=!1;#a;#o=null;#s=null;#c=null;connectedCallback(){super.connectedCallback(),Z(this,()=>this.#l())}disconnectedCallback(){super.disconnectedCallback(),this.#u()}#l(){if(this.#n||this.#e)return!0;let e=this.closest(`form`);if(!e)return!1;if(!Sn(this.getAttribute(`sitekey`)))return!0;this.#e=e,this.#o=this.querySelector(`[data-turnstile-fallback]`);for(let t of[`focusin`,`pointerdown`,`input`])e.addEventListener(t,this.#d,{once:!0,passive:!0});return e.addEventListener(`submit`,this.#f),this.#n=!0,this.#o?.setAttribute(`hidden`,``),this.#c=document.createElement(`div`),this.#c.className=`turnstile__widget`,this.#s=document.createElement(`p`),this.#s.className=`form-group__helper turnstile__status`,this.#s.setAttribute(`role`,`status`),this.#s.hidden=!0,this.append(this.#c,this.#s),!0}#u(){if(this.#e){for(let e of[`focusin`,`pointerdown`,`input`])this.#e.removeEventListener(e,this.#d);this.#e.removeEventListener(`submit`,this.#f),this.#a&&window.turnstile?.remove(this.#a),this.#e=null,this.#n=!1,this.#t=!1,this.#a=void 0,this.#c?.remove(),this.#s?.remove(),this.#o?.removeAttribute(`hidden`)}}#d=()=>{if(this.#t)return;this.#t=!0;let e=this.getAttribute(`sitekey`);Dn().then(t=>{this.isConnected&&this.#c&&(this.#a=t.render(this.#c,{sitekey:e,callback:e=>{this.#r=e,this.#p(``),this.#i&&(this.#i=!1,this.#e?.requestSubmit())},"expired-callback":()=>{this.#r=``},"error-callback":()=>{this.#r=``,this.#p(`The spam check could not run. Reload the page, or contact us another way.`)}}))},()=>{this.#t=!1,this.#p(`The spam check could not load. Check your connection and try again.`)})};#f=e=>{wn({live:this.#n,token:this.#r})&&(e.preventDefault(),this.#i=!0,this.#p(`Checking that you are human. Your message will send in a moment.`),this.#d())};#p(e){this.#s&&(this.#s.textContent=e,this.#s.hidden=!e)}};customElements.get(`wc-turnstile`)||customElements.define(`wc-turnstile`,On);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getvitops/core",
|
|
3
|
-
"version": "8.3.0-alpha.
|
|
3
|
+
"version": "8.3.0-alpha.4",
|
|
4
4
|
"description": "The Vitops design-system framework — CSS partials, Lit web components, and browser polyfills.",
|
|
5
5
|
"homepage": "https://docs.vitops.ca",
|
|
6
6
|
"bugs": "https://github.com/getvitops/design-system/issues",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@getvitops/utils": "8.3.0-alpha.
|
|
32
|
+
"@getvitops/utils": "8.3.0-alpha.4",
|
|
33
33
|
"@lit-labs/signals": "^0.3.0",
|
|
34
34
|
"@oddbird/css-anchor-positioning": "^0.9.0",
|
|
35
35
|
"@oddbird/popover-polyfill": "^0.7.0",
|