@getvitops/generator 2.0.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +246 -0
- package/assets/bricks/elements/copy-button.php +3 -3
- package/assets/bricks/elements/multi-field.php +3 -3
- package/assets/css/animation.css +90 -0
- package/assets/css/global.css +10 -0
- package/assets/css/index.css +5 -0
- package/assets/css/layout-utilities.css +46 -0
- package/assets/css/layout.css +87 -2
- package/assets/css/patterns/anchor-link.css +36 -0
- package/assets/css/patterns/code.css +24 -0
- package/assets/css/patterns/details.css +28 -16
- package/assets/css/patterns/dialog.css +13 -31
- package/assets/css/patterns/drawer.css +27 -66
- package/assets/css/patterns/dropdown.css +15 -1
- package/assets/css/patterns/lightbox.css +3 -3
- package/assets/css/patterns/marquee.css +33 -5
- package/assets/css/patterns/nav.css +27 -79
- package/assets/css/patterns/navbar.css +86 -0
- package/assets/css/patterns/navshell.css +383 -0
- package/assets/css/patterns/popover.css +56 -8
- package/assets/css/patterns/scroll-target.css +18 -4
- package/assets/css/patterns/sitenav.css +117 -338
- package/assets/css/patterns/split-link.css +3 -3
- package/assets/js/elements.js +3 -3
- package/{site.schema.json → config.schema.json} +2320 -2240
- package/dist/index.d.mts +947 -412
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +3278 -3045
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
|
@@ -30,6 +30,10 @@
|
|
|
30
30
|
|
|
31
31
|
/* ── Container + mobile chrome ─────────────────────────────────────────────── */
|
|
32
32
|
.sitenav {
|
|
33
|
+
/* Reset first — the flag inherits, so a nested sitenav must resolve against
|
|
34
|
+
itself rather than an outer instance's promoted state. */
|
|
35
|
+
--_sitenav-wide: 0;
|
|
36
|
+
|
|
33
37
|
display: flex;
|
|
34
38
|
align-items: center;
|
|
35
39
|
}
|
|
@@ -226,357 +230,132 @@
|
|
|
226
230
|
.sitenav__item--desktop-branch > .sitenav__submenu {
|
|
227
231
|
display: none;
|
|
228
232
|
}
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
/* ── Desktop promotion.
|
|
234
|
+
*
|
|
235
|
+
* Four thresholds, ONE ruleset. This used to be four ~86-line blocks that had to
|
|
236
|
+
* be kept in step by hand, and the file said so: "CSS has no mixins, so the four
|
|
237
|
+
* blocks are intentionally parallel — edit them together."
|
|
238
|
+
*
|
|
239
|
+
* They were not in step. `md`, `lg` and `xl` were byte-identical; `sm` had drifted
|
|
240
|
+
* onto an older markup shape, selecting `.sitenav__disclosure > .sitenav__submenu`
|
|
241
|
+
* where the submenu is actually the disclosure's SIBLING (see the accordion
|
|
242
|
+
* comment above, and bricks/elements/sitenav.php). So `.sitenav--bp-sm` shipped a
|
|
243
|
+
* navbar whose dropdowns could never open, and nothing failed loudly enough to
|
|
244
|
+
* notice. One shared block makes that class of drift unrepresentable.
|
|
245
|
+
*
|
|
246
|
+
* The mechanism is a style query on an inherited flag, the same one
|
|
247
|
+
* patterns/navshell.css uses. `.sitenav` resets the flag so a nested sitenav
|
|
248
|
+
* resolves against ITSELF rather than inheriting an outer instance's "I'm wide".
|
|
249
|
+
*
|
|
250
|
+
* Note the wide state is a navbar in everything but name — a horizontal row of
|
|
251
|
+
* links. It does not literally compose `patterns/navbar.css`, because the panel
|
|
252
|
+
* has to be a COLUMN in its drawer state, and a class can't be conditional; the
|
|
253
|
+
* flip would have to be undone at mobile, which costs more than the two
|
|
254
|
+
* declarations it saves. Use `.navbar` directly for a link row that is only ever
|
|
255
|
+
* a row.
|
|
256
|
+
* ── */
|
|
235
257
|
@container (min-width: 30rem) {
|
|
236
258
|
.sitenav--bp-sm {
|
|
237
|
-
|
|
238
|
-
& .sitenav__close {
|
|
239
|
-
display: none;
|
|
240
|
-
}
|
|
241
|
-
/* [popover] is UA/polyfill display:none while closed; !important forces the
|
|
242
|
-
navbar body back inline (the hamburger is gone, so it never re-hides). */
|
|
243
|
-
& .sitenav__panel {
|
|
244
|
-
display: flex !important;
|
|
245
|
-
flex-direction: row;
|
|
246
|
-
align-items: center;
|
|
247
|
-
position: static;
|
|
248
|
-
inset: auto;
|
|
249
|
-
inline-size: auto;
|
|
250
|
-
max-inline-size: none;
|
|
251
|
-
block-size: auto;
|
|
252
|
-
padding: 0;
|
|
253
|
-
translate: none;
|
|
254
|
-
opacity: 1;
|
|
255
|
-
overflow: visible;
|
|
256
|
-
background: none;
|
|
257
|
-
color: inherit;
|
|
258
|
-
box-shadow: none;
|
|
259
|
-
z-index: auto;
|
|
260
|
-
}
|
|
261
|
-
& .sitenav__panel::backdrop {
|
|
262
|
-
display: none;
|
|
263
|
-
}
|
|
264
|
-
& .sitenav__list {
|
|
265
|
-
flex-direction: row;
|
|
266
|
-
flex-wrap: wrap;
|
|
267
|
-
align-items: center;
|
|
268
|
-
}
|
|
269
|
-
& .sitenav__item--branch {
|
|
270
|
-
position: relative;
|
|
271
|
-
display: flex;
|
|
272
|
-
align-items: center;
|
|
273
|
-
grid-template-columns: none;
|
|
274
|
-
grid-template-rows: none;
|
|
275
|
-
}
|
|
276
|
-
& .sitenav__submenu {
|
|
277
|
-
position: absolute;
|
|
278
|
-
inset-block-start: 100%;
|
|
279
|
-
inset-inline-start: 0;
|
|
280
|
-
min-inline-size: 13rem;
|
|
281
|
-
padding: 0.5rem;
|
|
282
|
-
overflow: visible;
|
|
283
|
-
background: var(--color-bg-surface);
|
|
284
|
-
color: var(--color-text-surface);
|
|
285
|
-
border: var(--b-panel);
|
|
286
|
-
border-radius: var(--br-panel);
|
|
287
|
-
box-shadow: var(--ds-panel);
|
|
288
|
-
z-index: var(--z-tier-overlay);
|
|
289
|
-
opacity: 0;
|
|
290
|
-
visibility: hidden;
|
|
291
|
-
pointer-events: none;
|
|
292
|
-
translate: 0 0.25rem;
|
|
293
|
-
transition:
|
|
294
|
-
opacity 0.15s ease,
|
|
295
|
-
translate 0.15s ease,
|
|
296
|
-
visibility 0.15s allow-discrete;
|
|
297
|
-
}
|
|
298
|
-
/* deeper submenus (inside a panel) fly out to the side, not downward */
|
|
299
|
-
& .sitenav__submenu .sitenav__item--branch > .sitenav__disclosure > .sitenav__submenu {
|
|
300
|
-
inset-block-start: 0;
|
|
301
|
-
inset-inline-start: 100%;
|
|
302
|
-
translate: 0.25rem 0;
|
|
303
|
-
}
|
|
304
|
-
& .sitenav__item--branch:hover > .sitenav__disclosure > .sitenav__submenu,
|
|
305
|
-
& .sitenav__item--branch:focus-within > .sitenav__disclosure > .sitenav__submenu,
|
|
306
|
-
& .sitenav__item--branch > .sitenav__disclosure[open] > .sitenav__submenu {
|
|
307
|
-
opacity: 1;
|
|
308
|
-
visibility: visible;
|
|
309
|
-
pointer-events: auto;
|
|
310
|
-
translate: 0 0;
|
|
311
|
-
}
|
|
312
|
-
/* depth caps flip at the breakpoint */
|
|
313
|
-
& .sitenav__item--desktop-branch > .sitenav__disclosure > .sitenav__subtoggle {
|
|
314
|
-
display: inline-flex;
|
|
315
|
-
}
|
|
316
|
-
& .sitenav__item--mobile-branch > .sitenav__disclosure > .sitenav__subtoggle,
|
|
317
|
-
& .sitenav__item--mobile-branch > .sitenav__disclosure > .sitenav__submenu {
|
|
318
|
-
display: none;
|
|
319
|
-
}
|
|
259
|
+
--_sitenav-wide: 1;
|
|
320
260
|
}
|
|
321
261
|
}
|
|
322
|
-
|
|
323
262
|
@container (min-width: 48rem) {
|
|
324
263
|
.sitenav--bp-md {
|
|
325
|
-
|
|
326
|
-
& .sitenav__close {
|
|
327
|
-
display: none;
|
|
328
|
-
}
|
|
329
|
-
& .sitenav__panel {
|
|
330
|
-
display: flex !important;
|
|
331
|
-
flex-direction: row;
|
|
332
|
-
align-items: center;
|
|
333
|
-
position: static;
|
|
334
|
-
inset: auto;
|
|
335
|
-
inline-size: auto;
|
|
336
|
-
max-inline-size: none;
|
|
337
|
-
block-size: auto;
|
|
338
|
-
padding: 0;
|
|
339
|
-
translate: none;
|
|
340
|
-
opacity: 1;
|
|
341
|
-
overflow: visible;
|
|
342
|
-
background: none;
|
|
343
|
-
color: inherit;
|
|
344
|
-
box-shadow: none;
|
|
345
|
-
z-index: auto;
|
|
346
|
-
}
|
|
347
|
-
& .sitenav__panel::backdrop {
|
|
348
|
-
display: none;
|
|
349
|
-
}
|
|
350
|
-
& .sitenav__list {
|
|
351
|
-
flex-direction: row;
|
|
352
|
-
flex-wrap: wrap;
|
|
353
|
-
align-items: center;
|
|
354
|
-
}
|
|
355
|
-
& .sitenav__item--branch {
|
|
356
|
-
position: relative;
|
|
357
|
-
display: flex;
|
|
358
|
-
align-items: center;
|
|
359
|
-
grid-template-columns: none;
|
|
360
|
-
grid-template-rows: none;
|
|
361
|
-
}
|
|
362
|
-
& .sitenav__submenu {
|
|
363
|
-
position: absolute;
|
|
364
|
-
inset-block-start: 100%;
|
|
365
|
-
inset-inline-start: 0;
|
|
366
|
-
min-inline-size: 13rem;
|
|
367
|
-
padding: 0.5rem;
|
|
368
|
-
overflow: visible;
|
|
369
|
-
background: var(--color-bg-surface);
|
|
370
|
-
color: var(--color-text-surface);
|
|
371
|
-
border: var(--b-panel);
|
|
372
|
-
border-radius: var(--br-panel);
|
|
373
|
-
box-shadow: var(--ds-panel);
|
|
374
|
-
z-index: var(--z-tier-overlay);
|
|
375
|
-
opacity: 0;
|
|
376
|
-
visibility: hidden;
|
|
377
|
-
pointer-events: none;
|
|
378
|
-
translate: 0 0.25rem;
|
|
379
|
-
transition:
|
|
380
|
-
opacity 0.15s ease,
|
|
381
|
-
translate 0.15s ease,
|
|
382
|
-
visibility 0.15s allow-discrete;
|
|
383
|
-
}
|
|
384
|
-
& .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
|
|
385
|
-
inset-block-start: 0;
|
|
386
|
-
inset-inline-start: 100%;
|
|
387
|
-
translate: 0.25rem 0;
|
|
388
|
-
}
|
|
389
|
-
& .sitenav__item--branch:hover > .sitenav__submenu,
|
|
390
|
-
& .sitenav__item--branch:focus-within > .sitenav__submenu,
|
|
391
|
-
& .sitenav__item--branch:has(> .sitenav__disclosure[open]) > .sitenav__submenu {
|
|
392
|
-
opacity: 1;
|
|
393
|
-
visibility: visible;
|
|
394
|
-
pointer-events: auto;
|
|
395
|
-
translate: 0 0;
|
|
396
|
-
}
|
|
397
|
-
/* depth caps flip at the breakpoint: desktop-only branches reveal their caret +
|
|
398
|
-
dropdown; mobile-only branches collapse to a plain link. */
|
|
399
|
-
& .sitenav__item--desktop-branch > .sitenav__disclosure,
|
|
400
|
-
& .sitenav__item--desktop-branch > .sitenav__submenu {
|
|
401
|
-
display: block;
|
|
402
|
-
}
|
|
403
|
-
& .sitenav__item--mobile-branch > .sitenav__disclosure,
|
|
404
|
-
& .sitenav__item--mobile-branch > .sitenav__submenu {
|
|
405
|
-
display: none;
|
|
406
|
-
}
|
|
264
|
+
--_sitenav-wide: 1;
|
|
407
265
|
}
|
|
408
266
|
}
|
|
409
|
-
|
|
410
267
|
@container (min-width: 64rem) {
|
|
411
268
|
.sitenav--bp-lg {
|
|
412
|
-
|
|
413
|
-
& .sitenav__close {
|
|
414
|
-
display: none;
|
|
415
|
-
}
|
|
416
|
-
& .sitenav__panel {
|
|
417
|
-
display: flex !important;
|
|
418
|
-
flex-direction: row;
|
|
419
|
-
align-items: center;
|
|
420
|
-
position: static;
|
|
421
|
-
inset: auto;
|
|
422
|
-
inline-size: auto;
|
|
423
|
-
max-inline-size: none;
|
|
424
|
-
block-size: auto;
|
|
425
|
-
padding: 0;
|
|
426
|
-
translate: none;
|
|
427
|
-
opacity: 1;
|
|
428
|
-
overflow: visible;
|
|
429
|
-
background: none;
|
|
430
|
-
color: inherit;
|
|
431
|
-
box-shadow: none;
|
|
432
|
-
z-index: auto;
|
|
433
|
-
}
|
|
434
|
-
& .sitenav__panel::backdrop {
|
|
435
|
-
display: none;
|
|
436
|
-
}
|
|
437
|
-
& .sitenav__list {
|
|
438
|
-
flex-direction: row;
|
|
439
|
-
flex-wrap: wrap;
|
|
440
|
-
align-items: center;
|
|
441
|
-
}
|
|
442
|
-
& .sitenav__item--branch {
|
|
443
|
-
position: relative;
|
|
444
|
-
display: flex;
|
|
445
|
-
align-items: center;
|
|
446
|
-
grid-template-columns: none;
|
|
447
|
-
grid-template-rows: none;
|
|
448
|
-
}
|
|
449
|
-
& .sitenav__submenu {
|
|
450
|
-
position: absolute;
|
|
451
|
-
inset-block-start: 100%;
|
|
452
|
-
inset-inline-start: 0;
|
|
453
|
-
min-inline-size: 13rem;
|
|
454
|
-
padding: 0.5rem;
|
|
455
|
-
overflow: visible;
|
|
456
|
-
background: var(--color-bg-surface);
|
|
457
|
-
color: var(--color-text-surface);
|
|
458
|
-
border: var(--b-panel);
|
|
459
|
-
border-radius: var(--br-panel);
|
|
460
|
-
box-shadow: var(--ds-panel);
|
|
461
|
-
z-index: var(--z-tier-overlay);
|
|
462
|
-
opacity: 0;
|
|
463
|
-
visibility: hidden;
|
|
464
|
-
pointer-events: none;
|
|
465
|
-
translate: 0 0.25rem;
|
|
466
|
-
transition:
|
|
467
|
-
opacity 0.15s ease,
|
|
468
|
-
translate 0.15s ease,
|
|
469
|
-
visibility 0.15s allow-discrete;
|
|
470
|
-
}
|
|
471
|
-
& .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
|
|
472
|
-
inset-block-start: 0;
|
|
473
|
-
inset-inline-start: 100%;
|
|
474
|
-
translate: 0.25rem 0;
|
|
475
|
-
}
|
|
476
|
-
& .sitenav__item--branch:hover > .sitenav__submenu,
|
|
477
|
-
& .sitenav__item--branch:focus-within > .sitenav__submenu,
|
|
478
|
-
& .sitenav__item--branch:has(> .sitenav__disclosure[open]) > .sitenav__submenu {
|
|
479
|
-
opacity: 1;
|
|
480
|
-
visibility: visible;
|
|
481
|
-
pointer-events: auto;
|
|
482
|
-
translate: 0 0;
|
|
483
|
-
}
|
|
484
|
-
/* depth caps flip at the breakpoint: desktop-only branches reveal their caret +
|
|
485
|
-
dropdown; mobile-only branches collapse to a plain link. */
|
|
486
|
-
& .sitenav__item--desktop-branch > .sitenav__disclosure,
|
|
487
|
-
& .sitenav__item--desktop-branch > .sitenav__submenu {
|
|
488
|
-
display: block;
|
|
489
|
-
}
|
|
490
|
-
& .sitenav__item--mobile-branch > .sitenav__disclosure,
|
|
491
|
-
& .sitenav__item--mobile-branch > .sitenav__submenu {
|
|
492
|
-
display: none;
|
|
493
|
-
}
|
|
269
|
+
--_sitenav-wide: 1;
|
|
494
270
|
}
|
|
495
271
|
}
|
|
496
|
-
|
|
497
272
|
@container (min-width: 80rem) {
|
|
498
273
|
.sitenav--bp-xl {
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
274
|
+
--_sitenav-wide: 1;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@container style(--_sitenav-wide: 1) {
|
|
279
|
+
.sitenav > .sitenav__toggle,
|
|
280
|
+
.sitenav__close {
|
|
281
|
+
display: none;
|
|
282
|
+
}
|
|
283
|
+
.sitenav__panel {
|
|
284
|
+
display: flex !important;
|
|
285
|
+
flex-direction: row;
|
|
286
|
+
align-items: center;
|
|
287
|
+
position: static;
|
|
288
|
+
inset: auto;
|
|
289
|
+
inline-size: auto;
|
|
290
|
+
max-inline-size: none;
|
|
291
|
+
block-size: auto;
|
|
292
|
+
padding: 0;
|
|
293
|
+
translate: none;
|
|
294
|
+
opacity: 1;
|
|
295
|
+
overflow: visible;
|
|
296
|
+
background: none;
|
|
297
|
+
color: inherit;
|
|
298
|
+
box-shadow: none;
|
|
299
|
+
z-index: auto;
|
|
300
|
+
}
|
|
301
|
+
.sitenav__panel::backdrop {
|
|
302
|
+
display: none;
|
|
303
|
+
}
|
|
304
|
+
.sitenav__list {
|
|
305
|
+
flex-direction: row;
|
|
306
|
+
flex-wrap: wrap;
|
|
307
|
+
align-items: center;
|
|
308
|
+
}
|
|
309
|
+
.sitenav__item--branch {
|
|
310
|
+
position: relative;
|
|
311
|
+
display: flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
grid-template-columns: none;
|
|
314
|
+
grid-template-rows: none;
|
|
315
|
+
}
|
|
316
|
+
.sitenav__submenu {
|
|
317
|
+
position: absolute;
|
|
318
|
+
inset-block-start: 100%;
|
|
319
|
+
inset-inline-start: 0;
|
|
320
|
+
min-inline-size: 13rem;
|
|
321
|
+
padding: 0.5rem;
|
|
322
|
+
overflow: visible;
|
|
323
|
+
background: var(--color-bg-surface);
|
|
324
|
+
color: var(--color-text-surface);
|
|
325
|
+
border: var(--b-panel);
|
|
326
|
+
border-radius: var(--br-panel);
|
|
327
|
+
box-shadow: var(--ds-panel);
|
|
328
|
+
z-index: var(--z-tier-overlay);
|
|
329
|
+
opacity: 0;
|
|
330
|
+
visibility: hidden;
|
|
331
|
+
pointer-events: none;
|
|
332
|
+
translate: 0 0.25rem;
|
|
333
|
+
transition:
|
|
334
|
+
opacity 0.15s ease,
|
|
335
|
+
translate 0.15s ease,
|
|
336
|
+
visibility 0.15s allow-discrete;
|
|
337
|
+
}
|
|
338
|
+
.sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
|
|
339
|
+
inset-block-start: 0;
|
|
340
|
+
inset-inline-start: 100%;
|
|
341
|
+
translate: 0.25rem 0;
|
|
342
|
+
}
|
|
343
|
+
.sitenav__item--branch:hover > .sitenav__submenu,
|
|
344
|
+
.sitenav__item--branch:focus-within > .sitenav__submenu,
|
|
345
|
+
.sitenav__item--branch:has(> .sitenav__disclosure[open]) > .sitenav__submenu {
|
|
346
|
+
opacity: 1;
|
|
347
|
+
visibility: visible;
|
|
348
|
+
pointer-events: auto;
|
|
349
|
+
translate: 0 0;
|
|
350
|
+
}
|
|
351
|
+
/* depth caps flip at the breakpoint: desktop-only branches reveal their caret +
|
|
352
|
+
dropdown; mobile-only branches collapse to a plain link. */
|
|
353
|
+
.sitenav__item--desktop-branch > .sitenav__disclosure,
|
|
354
|
+
.sitenav__item--desktop-branch > .sitenav__submenu {
|
|
355
|
+
display: block;
|
|
356
|
+
}
|
|
357
|
+
.sitenav__item--mobile-branch > .sitenav__disclosure,
|
|
358
|
+
.sitenav__item--mobile-branch > .sitenav__submenu {
|
|
359
|
+
display: none;
|
|
581
360
|
}
|
|
582
361
|
}
|
|
@@ -101,9 +101,9 @@
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
/* No scrim. Stated through popover.css's token rather than overriding its
|
|
105
|
+
::backdrop rule, so it keeps the shared fade timing. */
|
|
106
|
+
--scrim: transparent;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
/* Builder-only: rendered without the `popover` attribute so nested content is
|
package/assets/js/elements.js
CHANGED
|
@@ -498,7 +498,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
498
498
|
transform 0.1s ease;
|
|
499
499
|
}
|
|
500
500
|
|
|
501
|
-
:host(copy
|
|
501
|
+
:host(wc-copy:defined) .copy__button {
|
|
502
502
|
display: inline-flex;
|
|
503
503
|
}
|
|
504
504
|
|
|
@@ -543,7 +543,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
543
543
|
>
|
|
544
544
|
<span class=${e} part="icon" aria-hidden="true"></span>
|
|
545
545
|
</button>
|
|
546
|
-
`}};customElements.get(`copy
|
|
546
|
+
`}};customElements.get(`wc-copy`)||customElements.define(`wc-copy`,Nt);var Pt=class extends ${static{this.properties={autoplay:{type:Number,reflect:!0}}}createRenderRoot(){return this}#e=[];#t=[];#n=!1;#r=!1;#i=null;#a=!1;#o=null;#s=!1;init(){this.autoplay=0}constructor(){super(),this.init()}connectedCallback(){super.connectedCallback(),this.hasAttribute(`role`)||this.setAttribute(`role`,`region`),this.hasAttribute(`aria-roledescription`)||this.setAttribute(`aria-roledescription`,`carousel`),this.#e=[...this.children].filter(e=>!e.hasAttribute(`slot`)),!(this.#e.length<2)&&(this.#n=this.classList.contains(`carousel--auto-pages`),this.#n||(this.#c(),this.#d(),this.addEventListener(`scrollsnapchange`,this.#p)),!this.autoplay&&this.hasAttribute(`autoplay`)&&(this.autoplay=Number(this.getAttribute(`autoplay`))||0),this.#s=matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.autoplay>0&&(this.#y(),this.#s?(this.#a=!0,this.setAttribute(`aria-live`,`polite`),this.#b()):this.#m(),this.addEventListener(`pointerenter`,this.#g),this.addEventListener(`pointerleave`,this.#_),this.addEventListener(`focusin`,this.#g),this.addEventListener(`focusout`,this.#_)))}disconnectedCallback(){super.disconnectedCallback(),this.#n||(this.removeEventListener(`scrollsnapchange`,this.#p),this.#u()),this.removeEventListener(`pointerenter`,this.#g),this.removeEventListener(`pointerleave`,this.#_),this.removeEventListener(`focusin`,this.#g),this.removeEventListener(`focusout`,this.#_),this.#h(),this.#o&&=(this.#o.removeEventListener(`click`,this.#v),this.#o.hasAttribute(`slot`)||this.#o.remove(),null),this.removeAttribute(`aria-live`)}#c(){let e=[],t=[];for(let n=0;n<this.#e.length;n++){let r=this.#e[n];e.push(this.#l(r,n)),t.push(this.#l(r,n))}for(let t=e.length-1;t>=0;t--)this.prepend(e[t]);for(let e of t)this.append(e);this.#t=[...e,...t]}#l(e,t){let n=e.cloneNode(!0);n.setAttribute(`data-carousel-clone`,String(t)),n.setAttribute(`aria-hidden`,`true`);for(let e of[n,...n.querySelectorAll(`[tabindex], a, button, input, select, textarea`)])e.tabIndex=-1;return n}#u(){for(let e of this.#t)e.remove();this.#t=[]}#d(){requestAnimationFrame(()=>{let e=this.#e[0];e&&(this.style.scrollBehavior=`auto`,this.scrollLeft=e.offsetLeft-this.offsetLeft-(parseFloat(getComputedStyle(this).scrollPaddingLeft)||0)+(parseFloat(getComputedStyle(this).paddingLeft)||0),requestAnimationFrame(()=>{this.style.scrollBehavior=``}))})}#f(){this.scrollBy({left:this.clientWidth,behavior:`smooth`})}#p=e=>{if(this.#r){this.#r=!1;return}let t=e.snapTargetInline;if(!t||!t.hasAttribute(`data-carousel-clone`))return;let n=Number(t.getAttribute(`data-carousel-clone`)),r=this.#e[n];if(!r)return;let i=r.offsetLeft-t.offsetLeft;this.#r=!0,this.style.scrollBehavior=`auto`,this.scrollLeft+=i,requestAnimationFrame(()=>{this.style.scrollBehavior=``})};#m(){this.#i||this.autoplay<=0||(this.#a=!1,this.#i=setInterval(()=>this.#f(),this.autoplay),this.setAttribute(`aria-live`,`off`),this.#b())}#h(){this.#i&&=(clearInterval(this.#i),null)}#g=()=>{this.#h(),this.#a=!0,this.setAttribute(`aria-live`,`polite`),this.#b()};#_=()=>{this.#s||this.#m()};#v=()=>{this.#a?(this.#s=!1,this.#m()):this.#g()};#y(){let e=this.querySelector(`[slot="autoplay"]`);if(e)this.#o=e;else{let e=document.createElement(`button`);e.type=`button`,this.append(e),this.#o=e}this.#o.setAttribute(`part`,`autoplay`),this.#o.addEventListener(`click`,this.#v),this.#b()}#b(){this.#o&&(this.#o.setAttribute(`aria-label`,this.#a?`Play`:`Pause`),this.#o.setAttribute(`aria-pressed`,String(!this.#a)),this.#o.hasAttribute(`slot`)||(this.#o.textContent=this.#a?`▶`:`⏸`))}};customElements.get(`wc-carousel`)||customElements.define(`wc-carousel`,Pt);var Ft=class extends ${static{this.properties={breakpoint:{type:String,reflect:!0},projection:{type:Boolean,reflect:!0},singular:{type:Boolean,reflect:!0}}}createRenderRoot(){return this}#e=[];#t=[];#n=[];#r=null;#i=null;#a=null;#o=[];#s=[];#c=0;#l=!1;#u=null;#d=0;init(){this.breakpoint=`40rem`,this.projection=!1,this.singular=!1}constructor(){super(),this.init()}connectedCallback(){super.connectedCallback(),this.#f(),this.#e.length!==0&&(this.#m(),this.projection&&(this.#p(),this.#h(),this.#g(),this.singular&&(this.classList.add(`entries--singular`),this.#v(0))),this.#d=this.#b(),this.#x())}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`)}#f(){this.#e=[];let e=new Set,t=new Map,n=null;for(let r of this.children){let i=r.tagName.toLowerCase();if(/^h[1-6]$/.test(i))n=r;else if(i===`dl`&&n){let i=new Map,a=r.querySelectorAll(`dt`),o=r.querySelectorAll(`dd`);for(let n=0;n<a.length;n++){let r=a[n],s=r.textContent?.trim()??``,c=o[n]?.innerHTML??``;if(s){i.set(s,c),e.add(s);let n=r.getAttribute(`data-label`);n&&!t.has(s)&&t.set(s,n)}}this.#e.push({title:n.innerHTML,heading:n,dl:r,properties:i}),n=null}}this.#t=[...e],this.#n=this.#t.map(e=>t.get(e)??e)}#p(){this.classList.add(`entries--projection`)}#m(){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}#h(){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}#g(){let e=document.createElement(`nav`);e.classList.add(`entries__nav`),e.setAttribute(`aria-label`,`Column selector`),e.setAttribute(`aria-hidden`,`true`),this.#o=this.#t.map((t,n)=>{let r=document.createElement(`button`);return r.type=`button`,r.classList.add(`entries__nav-btn`),r.textContent=this.#n[n]??t,r.setAttribute(`aria-pressed`,String(n===0)),r.addEventListener(`click`,()=>this.#_(n)),e.appendChild(r),r}),this.#i.before(e),this.#a=e}#_(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.#v(e);else{let t=this.#s[e];t&&this.#i&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`start`})}this.dispatchEvent(new CustomEvent(`entries-column-change`,{detail:{column:e,header:this.#t[e]},bubbles:!0,composed:!0}))}#v(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)}}#y(){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)}}#b(){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}#x(){this.#u=new ResizeObserver(this.#S),this.#u.observe(this)}#S=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.#y()):(this.classList.remove(`entries--wide`),this.singular&&this.projection&&this.#v(this.#c))}};customElements.get(`wc-entries`)||customElements.define(`wc-entries`,Ft);var It=class e extends ${static{this.styles=[$.styles,o`
|
|
547
547
|
:host {
|
|
548
548
|
display: none;
|
|
549
549
|
}
|
|
@@ -884,4 +884,4 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
884
884
|
</button>
|
|
885
885
|
</div>
|
|
886
886
|
</div>
|
|
887
|
-
`}};customElements.get(`
|
|
887
|
+
`}};customElements.get(`wc-multifield`)||customElements.define(`wc-multifield`,Lt);var Rt=class extends ${createRenderRoot(){return this}#e=null;#t;connectedCallback(){super.connectedCallback(),this.#e=this.querySelector(`.marquee__content`),this.#e&&(this.style.setProperty(`--_marquee-min`,`auto`),this.#n(),this.#t=new ResizeObserver(()=>this.#n()),this.#t.observe(this))}disconnectedCallback(){this.#t?.disconnect(),super.disconnectedCallback()}#n(){let e=this.#e;if(!e)return;for(let e of this.querySelectorAll(`[data-marquee-clone]`))e.remove();let t=Number.parseFloat(getComputedStyle(this).columnGap)||0,n=e.getBoundingClientRect().width;if(n<=0)return;this.style.setProperty(`--_marquee-distance`,`${n+t}px`);let r=Math.ceil(this.getBoundingClientRect().width/(n+t))+1;for(let t=0;t<r;t++){let t=e.cloneNode(!0);t.dataset.marqueeClone=``,t.setAttribute(`aria-hidden`,`true`),this.append(t)}}};customElements.get(`wc-marquee`)||customElements.define(`wc-marquee`,Rt);
|