use-wc 1.0.0-pre.82 → 1.0.0-pre.84
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/custom-elements.json +1 -1
- package/dist/design-system.css +447 -178
- package/dist/docs/use-control-set.md +18 -1
- package/dist/tokens.css +43 -0
- package/package.json +1 -1
- package/vscode.html-custom-data.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -843,7 +843,7 @@
|
|
|
843
843
|
"declarations": [
|
|
844
844
|
{
|
|
845
845
|
"kind": "class",
|
|
846
|
-
"description": "Groups adjacent controls — buttons and text-style inputs alike — into one visual unit: shared\nborders between touching children, rounded corners only on the two outer ends, and a hovered\nor focused child's border lifted above its neighbors so the whole border reads clearly.\n\n`use-control-set` renders no shadow DOM and no template of its own — it exists only as a\ndedicated tag for `theme/control-set.css` to style, the same way `use-layout` is a bare\nprimitive rather than a specific look. A classic split button is a text button followed by an\nicon-only trigger for a `use-menu`:\n\n```html\n<use-control-set>\n <button type=\"button\">Save</button>\n <button type=\"button\" popovertarget=\"save-options\" aria-label=\"More save options\">\n <use-caret></use-caret>\n </button>\n</use-control-set>\n<use-menu id=\"save-options\" aria-label=\"More save options\">\n <button role=\"menuitem\">Save as…</button>\n</use-menu>\n```\n\nA search box with an attached submit button follows the same shape, mixing a text input with a\nbutton:\n\n```html\n<use-control-set>\n <input type=\"search\" placeholder=\"Search\" />\n <button type=\"submit\">Go</button>\n</use-control-set>\n```\n\nA child is a `<button>`, anything wearing `.appearance-button`, an `<input>` (other than a\ncheckbox/radio/range/file), a `<select>`, a `<textarea>`, or anything wearing\n`.appearance-input` — see `theme/control-set.css` for exactly which selectors read which\nradius/border tokens.\n\nHow the touching sides render is themeable rather than fixed: `--usewc-layout-control-set-gap`\n(default: a negative overlap equal to the child's own border, for a seamless merged line) and\n`--usewc-effect-control-set-border-radius-sequential` (default: `0`, for square touching\ncorners) can both be overridden — a positive gap and a small radius reads as a looser, softer\nset instead of a fused one.",
|
|
846
|
+
"description": "Groups adjacent controls — buttons and text-style inputs alike — into one visual unit: shared\nborders between touching children, rounded corners only on the two outer ends, and a hovered\nor focused child's border lifted above its neighbors so the whole border reads clearly.\n\n`use-control-set` renders no shadow DOM and no template of its own — it exists only as a\ndedicated tag for `theme/control-set.css` to style, the same way `use-layout` is a bare\nprimitive rather than a specific look. A classic split button is a text button followed by an\nicon-only trigger for a `use-menu`:\n\n```html\n<use-control-set>\n <button type=\"button\">Save</button>\n <button type=\"button\" popovertarget=\"save-options\" aria-label=\"More save options\">\n <use-caret></use-caret>\n </button>\n</use-control-set>\n<use-menu id=\"save-options\" aria-label=\"More save options\">\n <button role=\"menuitem\">Save as…</button>\n</use-menu>\n```\n\nA search box with an attached submit button follows the same shape, mixing a text input with a\nbutton:\n\n```html\n<use-control-set>\n <input type=\"search\" placeholder=\"Search\" />\n <button type=\"submit\">Go</button>\n</use-control-set>\n```\n\nA child is a `<button>`, anything wearing `.appearance-button`, an `<input>` (other than a\ncheckbox/radio/range/file), a `<select>`, a `<textarea>`, or anything wearing\n`.appearance-input` — see `theme/control-set.css` for exactly which selectors read which\nradius/border tokens. A plain `span` renders as a static text cell between controls.\n\nPagination follows the same shape, with `a.appearance-button` links and `aria-current=\"page\"`\nholding the current page in its pressed look:\n\n```html\n<nav aria-label=\"Pagination\">\n <use-control-set>\n <a class=\"appearance-button\" href=\"?page=1\">1</a>\n <a class=\"appearance-button\" href=\"?page=2\" aria-current=\"page\">2</a>\n <span aria-hidden=\"true\">…</span>\n <a class=\"appearance-button\" href=\"?page=10\">10</a>\n </use-control-set>\n</nav>\n```\n\nA formatting toolbar works the same way with toggle buttons: `aria-pressed=\"true\"` (or `\"mixed\"`,\nfor a selection it only partly covers) holds a format that's on in its pressed look.\n\nHow the touching sides render is themeable rather than fixed: `--usewc-layout-control-set-gap`\n(default: a negative overlap equal to the child's own border, for a seamless merged line) and\n`--usewc-effect-control-set-border-radius-sequential` (default: `0`, for square touching\ncorners) can both be overridden — a positive gap and a small radius reads as a looser, softer\nset instead of a fused one.",
|
|
847
847
|
"name": "UseControlSet",
|
|
848
848
|
"slots": [
|
|
849
849
|
{
|
package/dist/design-system.css
CHANGED
|
@@ -370,22 +370,49 @@
|
|
|
370
370
|
text exactly here instead of staying a lighter tint of it. */
|
|
371
371
|
--usewc-local-link-decoration-opacity: 1;
|
|
372
372
|
}
|
|
373
|
+
}
|
|
374
|
+
}
|
|
373
375
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
376
|
+
/* `nav.breadcrumb` lays an `ol` of links out as a single wrapping trail. The separator is
|
|
377
|
+
generated content on every item after the first, reading its glyph from
|
|
378
|
+
`--usewc-effect-breadcrumb-separator` with empty alt text (`/ ""`), so assistive tech hears the
|
|
379
|
+
list structure rather than a run of slashes.
|
|
380
|
+
|
|
381
|
+
The current page is marked with `aria-current="page"` on its link. Rather than restyling
|
|
382
|
+
`color` directly, it swaps the link's own source tokens — the same approach `nav.sidebar` takes
|
|
383
|
+
in `link.css` — so every link state resolves to the document's ink instead of link blue. The
|
|
384
|
+
link's underline is already off here, since `link.css` treats every link inside a `nav` as
|
|
385
|
+
chrome. */
|
|
386
|
+
@layer use-theme.breadcrumb {
|
|
387
|
+
nav.breadcrumb > ol {
|
|
388
|
+
display: flex;
|
|
389
|
+
flex-wrap: wrap;
|
|
390
|
+
align-items: center;
|
|
391
|
+
gap: var(--usewc-layout-breadcrumb-gap);
|
|
392
|
+
margin: 0;
|
|
393
|
+
padding: 0;
|
|
394
|
+
list-style: none;
|
|
385
395
|
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
396
|
+
> li {
|
|
397
|
+
display: inline-flex;
|
|
398
|
+
align-items: center;
|
|
399
|
+
gap: var(--usewc-layout-breadcrumb-gap);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
> li + li::before {
|
|
403
|
+
content: var(--usewc-effect-breadcrumb-separator) / "";
|
|
404
|
+
color: var(--usewc-color-breadcrumb-separator);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
[aria-current="page"] {
|
|
408
|
+
--usewc-color-link-text-static: var(--usewc-color-breadcrumb-current-text);
|
|
409
|
+
--usewc-color-link-text-hover: var(--usewc-color-breadcrumb-current-text);
|
|
410
|
+
--usewc-color-link-text-active: var(--usewc-color-breadcrumb-current-text);
|
|
411
|
+
cursor: default;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
use-theme-escape & {
|
|
415
|
+
all: revert-layer;
|
|
389
416
|
}
|
|
390
417
|
}
|
|
391
418
|
}
|
|
@@ -399,56 +426,62 @@
|
|
|
399
426
|
display: inline-flex;
|
|
400
427
|
}
|
|
401
428
|
|
|
402
|
-
--usewc-
|
|
403
|
-
--usewc-
|
|
404
|
-
--usewc-
|
|
405
|
-
--usewc-
|
|
406
|
-
--usewc-
|
|
407
|
-
--usewc-
|
|
408
|
-
--usewc-
|
|
409
|
-
--usewc-
|
|
410
|
-
--usewc-
|
|
411
|
-
--usewc-
|
|
412
|
-
--usewc-
|
|
413
|
-
--usewc-
|
|
414
|
-
--usewc-
|
|
415
|
-
--usewc-
|
|
416
|
-
--usewc-
|
|
417
|
-
|
|
418
|
-
--usewc-
|
|
419
|
-
--usewc-
|
|
420
|
-
--usewc-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
429
|
+
--usewc-local-button-text-static: var(--usewc-color-button-base-text-static);
|
|
430
|
+
--usewc-local-button-text-static-auxiliary: var(--usewc-color-button-base-text-static-auxiliary);
|
|
431
|
+
--usewc-local-button-background-static: var(--usewc-color-button-base-background-static);
|
|
432
|
+
--usewc-local-button-background-static-auxiliary: var(--usewc-color-button-base-background-static-auxiliary);
|
|
433
|
+
--usewc-local-button-border-static: var(--usewc-color-button-base-border-static);
|
|
434
|
+
--usewc-local-button-border-static-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
|
|
435
|
+
--usewc-local-button-text-hover: var(--usewc-color-button-base-text-hover);
|
|
436
|
+
--usewc-local-button-background-hover: var(--usewc-color-button-base-background-hover);
|
|
437
|
+
--usewc-local-button-border-hover: var(--usewc-color-button-base-border-hover);
|
|
438
|
+
--usewc-local-button-background-hover-auxiliary: var(--usewc-color-button-base-background-hover-auxiliary);
|
|
439
|
+
--usewc-local-button-border-hover-auxiliary: var(--usewc-color-button-base-border-hover-auxiliary);
|
|
440
|
+
--usewc-local-button-text-active: var(--usewc-color-button-base-text-active);
|
|
441
|
+
--usewc-local-button-background-active: var(--usewc-color-button-base-background-active);
|
|
442
|
+
--usewc-local-button-border-active: var(--usewc-color-button-base-border-active);
|
|
443
|
+
--usewc-local-button-background-active-auxiliary: var(--usewc-color-button-base-background-active-auxiliary);
|
|
444
|
+
--usewc-local-button-text-pressed: var(--usewc-color-button-base-text-pressed);
|
|
445
|
+
--usewc-local-button-background-pressed: var(--usewc-color-button-base-background-pressed);
|
|
446
|
+
--usewc-local-button-border-pressed: var(--usewc-color-button-base-border-pressed);
|
|
447
|
+
--usewc-local-button-background-pressed-auxiliary: var(--usewc-color-button-base-background-pressed-auxiliary);
|
|
448
|
+
|
|
449
|
+
--usewc-local-button-shadow-tint: var(--usewc-color-button-base-shadow-tint);
|
|
450
|
+
--usewc-local-button-shadow-chroma-multiplier: var(--usewc-effect-button-base-shadow-chroma-multiplier);
|
|
451
|
+
--usewc-local-button-shadow-alpha-multiplier: var(--usewc-effect-button-base-shadow-alpha-multiplier);
|
|
452
|
+
--usewc-local-button-shadow-outset: oklch(
|
|
453
|
+
from var(--usewc-local-button-shadow-tint) var(--usewc-color-button-shadow-lightness)
|
|
454
|
+
calc(var(--usewc-color-button-shadow-chroma) * var(--usewc-local-button-shadow-chroma-multiplier)) h /
|
|
455
|
+
calc(var(--usewc-color-button-shadow-alpha) * var(--usewc-local-button-shadow-alpha-multiplier))
|
|
425
456
|
);
|
|
426
|
-
--usewc-
|
|
427
|
-
from var(--usewc-
|
|
428
|
-
calc(var(--usewc-color-button-shadow-chroma) * var(--usewc-
|
|
457
|
+
--usewc-local-button-shadow-outset-hover: oklch(
|
|
458
|
+
from var(--usewc-local-button-shadow-tint) var(--usewc-color-button-shadow-lightness)
|
|
459
|
+
calc(var(--usewc-color-button-shadow-chroma) * var(--usewc-local-button-shadow-chroma-multiplier)) h /
|
|
429
460
|
calc(
|
|
430
|
-
var(--usewc-color-button-shadow-alpha) * var(--usewc-
|
|
461
|
+
var(--usewc-color-button-shadow-alpha) * var(--usewc-local-button-shadow-alpha-multiplier) *
|
|
431
462
|
var(--usewc-color-button-shadow-alpha-hover-multiplier)
|
|
432
463
|
)
|
|
433
464
|
);
|
|
434
|
-
--usewc-
|
|
435
|
-
--usewc-
|
|
436
|
-
--usewc-
|
|
437
|
-
--usewc-
|
|
438
|
-
var(--usewc-
|
|
439
|
-
--usewc-
|
|
440
|
-
var(--usewc-
|
|
441
|
-
--usewc-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
--usewc-
|
|
445
|
-
--usewc-
|
|
446
|
-
--usewc-
|
|
447
|
-
--usewc-
|
|
448
|
-
--usewc-
|
|
449
|
-
--usewc-
|
|
450
|
-
--usewc-
|
|
451
|
-
--usewc-
|
|
465
|
+
--usewc-local-button-box-shadow-outset: 0 1px 2px 0 var(--usewc-local-button-shadow-outset);
|
|
466
|
+
--usewc-local-button-box-shadow-outset-hover: 0 2px 4px 0 var(--usewc-local-button-shadow-outset-hover);
|
|
467
|
+
--usewc-local-button-box-shadow-layer: var(--usewc-effect-button-box-shadow-none);
|
|
468
|
+
--usewc-local-button-box-shadow-static:
|
|
469
|
+
var(--usewc-local-button-box-shadow-layer), var(--usewc-local-button-box-shadow-outset);
|
|
470
|
+
--usewc-local-button-box-shadow-hover:
|
|
471
|
+
var(--usewc-local-button-box-shadow-layer), var(--usewc-local-button-box-shadow-outset-hover);
|
|
472
|
+
--usewc-local-button-box-shadow-active: var(--usewc-local-button-box-shadow-layer);
|
|
473
|
+
--usewc-local-button-box-shadow-pressed: var(--usewc-local-button-box-shadow-active);
|
|
474
|
+
|
|
475
|
+
--usewc-local-button-padding-block: var(--usewc-layout-button-base-padding-block);
|
|
476
|
+
--usewc-local-button-padding-inline: var(--usewc-layout-button-base-padding-inline);
|
|
477
|
+
--usewc-local-button-gap: var(--usewc-layout-button-base-gap);
|
|
478
|
+
--usewc-local-button-line-height: var(--usewc-layout-button-line-height);
|
|
479
|
+
--usewc-local-button-font-size: var(--usewc-font-button-base-size);
|
|
480
|
+
--usewc-local-button-radius: var(--usewc-effect-button-border-radius);
|
|
481
|
+
--usewc-local-button-text: var(--usewc-local-button-text-static);
|
|
482
|
+
--usewc-local-button-background: var(--usewc-local-button-background-static);
|
|
483
|
+
--usewc-local-button-border: var(--usewc-local-button-border-static);
|
|
484
|
+
--usewc-local-button-box-shadow: var(--usewc-local-button-box-shadow-static);
|
|
452
485
|
--usewc-effect-outline-width: 0;
|
|
453
486
|
--usewc-effect-opacity: 1;
|
|
454
487
|
--usewc-effect-pointer-events: auto;
|
|
@@ -458,23 +491,23 @@
|
|
|
458
491
|
display: inline-flex;
|
|
459
492
|
align-items: center;
|
|
460
493
|
justify-content: center;
|
|
461
|
-
gap: var(--usewc-
|
|
462
|
-
border-radius: var(--usewc-
|
|
463
|
-
line-height: var(--usewc-
|
|
464
|
-
padding-block: var(--usewc-
|
|
465
|
-
padding-inline: var(--usewc-
|
|
494
|
+
gap: var(--usewc-local-button-gap);
|
|
495
|
+
border-radius: var(--usewc-local-button-radius);
|
|
496
|
+
line-height: var(--usewc-local-button-line-height);
|
|
497
|
+
padding-block: var(--usewc-local-button-padding-block);
|
|
498
|
+
padding-inline: var(--usewc-local-button-padding-inline);
|
|
466
499
|
font-family: var(--usewc-font-button-family);
|
|
467
|
-
font-size: var(--usewc-
|
|
500
|
+
font-size: var(--usewc-local-button-font-size);
|
|
468
501
|
font-weight: var(--usewc-font-button-weight);
|
|
469
502
|
white-space: nowrap;
|
|
470
503
|
cursor: default;
|
|
471
|
-
color: var(--usewc-
|
|
472
|
-
background: var(--usewc-
|
|
504
|
+
color: var(--usewc-local-button-text);
|
|
505
|
+
background: var(--usewc-local-button-background);
|
|
473
506
|
background-size: var(--usewc-effect-button-background-size);
|
|
474
507
|
background-position: var(--usewc-effect-button-background-position);
|
|
475
508
|
background-repeat: var(--usewc-effect-button-background-repeat);
|
|
476
|
-
border: var(--usewc-layout-button-border) var(--usewc-effect-button-border-style) var(--usewc-
|
|
477
|
-
box-shadow: var(--usewc-
|
|
509
|
+
border: var(--usewc-layout-button-border) var(--usewc-effect-button-border-style) var(--usewc-local-button-border);
|
|
510
|
+
box-shadow: var(--usewc-local-button-box-shadow);
|
|
478
511
|
opacity: var(--usewc-effect-opacity);
|
|
479
512
|
pointer-events: var(--usewc-effect-pointer-events);
|
|
480
513
|
outline: var(--usewc-effect-outline-width) var(--usewc-effect-outline-style) var(--usewc-color-outline);
|
|
@@ -501,7 +534,7 @@
|
|
|
501
534
|
* never actually shrinks.
|
|
502
535
|
*/
|
|
503
536
|
padding-inline-end: calc(
|
|
504
|
-
var(--usewc-
|
|
537
|
+
var(--usewc-local-button-padding-inline) - var(--usewc-layout-dropdown-trigger-icon-size) / 4
|
|
505
538
|
);
|
|
506
539
|
|
|
507
540
|
use-theme-escape & {
|
|
@@ -528,12 +561,12 @@
|
|
|
528
561
|
button's natural height, is a real square by construction — and it keeps this button the
|
|
529
562
|
same height as a text sibling in the same use-control-set, rather than shrinking to 1lh. */
|
|
530
563
|
padding-inline: 0;
|
|
531
|
-
--usewc-
|
|
532
|
-
var(--usewc-
|
|
533
|
-
(var(--usewc-
|
|
564
|
+
--usewc-local-button-icon-only-size: calc(
|
|
565
|
+
var(--usewc-local-button-line-height) +
|
|
566
|
+
(var(--usewc-local-button-padding-block) + var(--usewc-layout-button-border)) * 2
|
|
534
567
|
);
|
|
535
|
-
inline-size: var(--usewc-
|
|
536
|
-
block-size: var(--usewc-
|
|
568
|
+
inline-size: var(--usewc-local-button-icon-only-size);
|
|
569
|
+
block-size: var(--usewc-local-button-icon-only-size);
|
|
537
570
|
|
|
538
571
|
/* The default caret glyph is a 50% tint of currentColor for a caret beside a label — as
|
|
539
572
|
the button's only content, it reads better at full strength, so this overrides the token
|
|
@@ -551,10 +584,10 @@
|
|
|
551
584
|
|
|
552
585
|
&:where(:hover, :focus-visible),
|
|
553
586
|
&:hover::file-selector-button {
|
|
554
|
-
--usewc-
|
|
555
|
-
--usewc-
|
|
556
|
-
--usewc-
|
|
557
|
-
--usewc-
|
|
587
|
+
--usewc-local-button-text: var(--usewc-local-button-text-hover);
|
|
588
|
+
--usewc-local-button-background: var(--usewc-local-button-background-hover);
|
|
589
|
+
--usewc-local-button-border: var(--usewc-local-button-border-hover);
|
|
590
|
+
--usewc-local-button-box-shadow: var(--usewc-local-button-box-shadow-hover);
|
|
558
591
|
}
|
|
559
592
|
|
|
560
593
|
&:focus-visible {
|
|
@@ -563,10 +596,10 @@
|
|
|
563
596
|
|
|
564
597
|
&:active,
|
|
565
598
|
&:active::file-selector-button {
|
|
566
|
-
--usewc-
|
|
567
|
-
--usewc-
|
|
568
|
-
--usewc-
|
|
569
|
-
--usewc-
|
|
599
|
+
--usewc-local-button-text: var(--usewc-local-button-text-active);
|
|
600
|
+
--usewc-local-button-background: var(--usewc-local-button-background-active);
|
|
601
|
+
--usewc-local-button-border: var(--usewc-local-button-border-active);
|
|
602
|
+
--usewc-local-button-box-shadow: var(--usewc-local-button-box-shadow-active);
|
|
570
603
|
}
|
|
571
604
|
|
|
572
605
|
&:disabled,
|
|
@@ -576,113 +609,145 @@
|
|
|
576
609
|
}
|
|
577
610
|
|
|
578
611
|
&.primary {
|
|
579
|
-
--usewc-
|
|
580
|
-
--usewc-
|
|
581
|
-
--usewc-
|
|
582
|
-
--usewc-
|
|
583
|
-
--usewc-
|
|
584
|
-
--usewc-
|
|
585
|
-
--usewc-
|
|
586
|
-
--usewc-
|
|
587
|
-
--usewc-
|
|
588
|
-
--usewc-
|
|
589
|
-
--usewc-
|
|
590
|
-
--usewc-
|
|
591
|
-
--usewc-
|
|
592
|
-
--usewc-
|
|
593
|
-
--usewc-
|
|
594
|
-
--usewc-
|
|
595
|
-
--usewc-
|
|
596
|
-
--usewc-
|
|
597
|
-
--usewc-
|
|
612
|
+
--usewc-local-button-text-static: var(--usewc-color-button-primary-text-static);
|
|
613
|
+
--usewc-local-button-text-static-auxiliary: var(--usewc-color-button-primary-text-static-auxiliary);
|
|
614
|
+
--usewc-local-button-background-static: var(--usewc-color-button-primary-background-static);
|
|
615
|
+
--usewc-local-button-background-static-auxiliary: var(--usewc-color-button-primary-background-static-auxiliary);
|
|
616
|
+
--usewc-local-button-border-static: var(--usewc-color-button-primary-border-static);
|
|
617
|
+
--usewc-local-button-border-static-auxiliary: var(--usewc-color-button-primary-border-static-auxiliary);
|
|
618
|
+
--usewc-local-button-text-hover: var(--usewc-color-button-primary-text-hover);
|
|
619
|
+
--usewc-local-button-background-hover: var(--usewc-color-button-primary-background-hover);
|
|
620
|
+
--usewc-local-button-border-hover: var(--usewc-color-button-primary-border-hover);
|
|
621
|
+
--usewc-local-button-background-hover-auxiliary: var(--usewc-color-button-primary-background-hover-auxiliary);
|
|
622
|
+
--usewc-local-button-border-hover-auxiliary: var(--usewc-color-button-primary-border-hover-auxiliary);
|
|
623
|
+
--usewc-local-button-text-active: var(--usewc-color-button-primary-text-active);
|
|
624
|
+
--usewc-local-button-background-active: var(--usewc-color-button-primary-background-active);
|
|
625
|
+
--usewc-local-button-border-active: var(--usewc-color-button-primary-border-active);
|
|
626
|
+
--usewc-local-button-background-active-auxiliary: var(--usewc-color-button-primary-background-active-auxiliary);
|
|
627
|
+
--usewc-local-button-text-pressed: var(--usewc-color-button-primary-text-pressed);
|
|
628
|
+
--usewc-local-button-background-pressed: var(--usewc-color-button-primary-background-pressed);
|
|
629
|
+
--usewc-local-button-border-pressed: var(--usewc-color-button-primary-border-pressed);
|
|
630
|
+
--usewc-local-button-background-pressed-auxiliary: var(--usewc-color-button-primary-background-pressed-auxiliary);
|
|
631
|
+
--usewc-local-button-shadow-tint: var(--usewc-color-button-primary-shadow-tint);
|
|
632
|
+
--usewc-local-button-shadow-chroma-multiplier: var(--usewc-effect-button-primary-shadow-chroma-multiplier);
|
|
633
|
+
--usewc-local-button-shadow-alpha-multiplier: var(--usewc-effect-button-primary-shadow-alpha-multiplier);
|
|
634
|
+
--usewc-local-button-box-shadow-layer: var(--usewc-effect-button-box-shadow-inset);
|
|
598
635
|
}
|
|
599
636
|
|
|
600
637
|
&.danger {
|
|
601
|
-
--usewc-
|
|
602
|
-
--usewc-
|
|
603
|
-
--usewc-
|
|
604
|
-
--usewc-
|
|
605
|
-
--usewc-
|
|
606
|
-
--usewc-
|
|
607
|
-
--usewc-
|
|
608
|
-
--usewc-
|
|
609
|
-
--usewc-
|
|
610
|
-
--usewc-
|
|
611
|
-
--usewc-
|
|
612
|
-
--usewc-
|
|
613
|
-
--usewc-
|
|
614
|
-
--usewc-
|
|
615
|
-
--usewc-
|
|
616
|
-
--usewc-
|
|
617
|
-
--usewc-
|
|
618
|
-
--usewc-
|
|
619
|
-
--usewc-
|
|
638
|
+
--usewc-local-button-text-static: var(--usewc-color-button-danger-text-static);
|
|
639
|
+
--usewc-local-button-text-static-auxiliary: var(--usewc-color-button-danger-text-static-auxiliary);
|
|
640
|
+
--usewc-local-button-background-static: var(--usewc-color-button-danger-background-static);
|
|
641
|
+
--usewc-local-button-background-static-auxiliary: var(--usewc-color-button-danger-background-static-auxiliary);
|
|
642
|
+
--usewc-local-button-border-static: var(--usewc-color-button-danger-border-static);
|
|
643
|
+
--usewc-local-button-border-static-auxiliary: var(--usewc-color-button-danger-border-static-auxiliary);
|
|
644
|
+
--usewc-local-button-text-hover: var(--usewc-color-button-danger-text-hover);
|
|
645
|
+
--usewc-local-button-background-hover: var(--usewc-color-button-danger-background-hover);
|
|
646
|
+
--usewc-local-button-border-hover: var(--usewc-color-button-danger-border-hover);
|
|
647
|
+
--usewc-local-button-background-hover-auxiliary: var(--usewc-color-button-danger-background-hover-auxiliary);
|
|
648
|
+
--usewc-local-button-border-hover-auxiliary: var(--usewc-color-button-danger-border-hover-auxiliary);
|
|
649
|
+
--usewc-local-button-text-active: var(--usewc-color-button-danger-text-active);
|
|
650
|
+
--usewc-local-button-background-active: var(--usewc-color-button-danger-background-active);
|
|
651
|
+
--usewc-local-button-border-active: var(--usewc-color-button-danger-border-active);
|
|
652
|
+
--usewc-local-button-background-active-auxiliary: var(--usewc-color-button-danger-background-active-auxiliary);
|
|
653
|
+
--usewc-local-button-text-pressed: var(--usewc-color-button-danger-text-pressed);
|
|
654
|
+
--usewc-local-button-background-pressed: var(--usewc-color-button-danger-background-pressed);
|
|
655
|
+
--usewc-local-button-border-pressed: var(--usewc-color-button-danger-border-pressed);
|
|
656
|
+
--usewc-local-button-background-pressed-auxiliary: var(--usewc-color-button-danger-background-pressed-auxiliary);
|
|
657
|
+
--usewc-local-button-shadow-tint: var(--usewc-color-button-danger-shadow-tint);
|
|
658
|
+
--usewc-local-button-shadow-chroma-multiplier: var(--usewc-effect-button-danger-shadow-chroma-multiplier);
|
|
659
|
+
--usewc-local-button-shadow-alpha-multiplier: var(--usewc-effect-button-danger-shadow-alpha-multiplier);
|
|
660
|
+
--usewc-local-button-box-shadow-layer: var(--usewc-effect-button-box-shadow-inset);
|
|
620
661
|
}
|
|
621
662
|
|
|
622
663
|
&.clear {
|
|
623
|
-
--usewc-
|
|
624
|
-
--usewc-
|
|
625
|
-
--usewc-
|
|
626
|
-
--usewc-
|
|
627
|
-
--usewc-
|
|
628
|
-
--usewc-
|
|
629
|
-
--usewc-
|
|
630
|
-
--usewc-
|
|
631
|
-
--usewc-
|
|
632
|
-
--usewc-
|
|
633
|
-
--usewc-
|
|
634
|
-
--usewc-
|
|
635
|
-
--usewc-
|
|
636
|
-
--usewc-
|
|
637
|
-
--usewc-
|
|
638
|
-
--usewc-
|
|
639
|
-
--usewc-
|
|
640
|
-
--usewc-
|
|
664
|
+
--usewc-local-button-text-static: var(--usewc-color-button-clear-text-static);
|
|
665
|
+
--usewc-local-button-text-static-auxiliary: var(--usewc-color-button-clear-text-static-auxiliary);
|
|
666
|
+
--usewc-local-button-background-static: var(--usewc-color-button-clear-background-static);
|
|
667
|
+
--usewc-local-button-background-static-auxiliary: var(--usewc-color-button-clear-background-static-auxiliary);
|
|
668
|
+
--usewc-local-button-border-static: var(--usewc-color-button-clear-border-static);
|
|
669
|
+
--usewc-local-button-border-static-auxiliary: var(--usewc-color-button-clear-border-static-auxiliary);
|
|
670
|
+
--usewc-local-button-text-hover: var(--usewc-color-button-clear-text-hover);
|
|
671
|
+
--usewc-local-button-background-hover: var(--usewc-color-button-clear-background-hover);
|
|
672
|
+
--usewc-local-button-border-hover: var(--usewc-color-button-clear-border-hover);
|
|
673
|
+
--usewc-local-button-background-hover-auxiliary: var(--usewc-color-button-clear-background-hover-auxiliary);
|
|
674
|
+
--usewc-local-button-border-hover-auxiliary: var(--usewc-color-button-clear-border-hover-auxiliary);
|
|
675
|
+
--usewc-local-button-text-active: var(--usewc-color-button-clear-text-active);
|
|
676
|
+
--usewc-local-button-background-active: var(--usewc-color-button-clear-background-active);
|
|
677
|
+
--usewc-local-button-border-active: var(--usewc-color-button-clear-border-active);
|
|
678
|
+
--usewc-local-button-background-active-auxiliary: var(--usewc-color-button-clear-background-active-auxiliary);
|
|
679
|
+
--usewc-local-button-text-pressed: var(--usewc-color-button-clear-text-pressed);
|
|
680
|
+
--usewc-local-button-background-pressed: var(--usewc-color-button-clear-background-pressed);
|
|
681
|
+
--usewc-local-button-border-pressed: var(--usewc-color-button-clear-border-pressed);
|
|
682
|
+
--usewc-local-button-background-pressed-auxiliary: var(--usewc-color-button-clear-background-pressed-auxiliary);
|
|
683
|
+
--usewc-local-button-box-shadow-static: none;
|
|
684
|
+
--usewc-local-button-box-shadow-hover: none;
|
|
685
|
+
--usewc-local-button-box-shadow-active: none;
|
|
641
686
|
}
|
|
642
687
|
|
|
643
688
|
&.auxiliary {
|
|
644
|
-
--usewc-
|
|
645
|
-
--usewc-
|
|
646
|
-
--usewc-
|
|
647
|
-
--usewc-
|
|
648
|
-
--usewc-
|
|
649
|
-
--usewc-
|
|
650
|
-
--usewc-
|
|
651
|
-
--usewc-
|
|
652
|
-
--usewc-
|
|
653
|
-
--usewc-
|
|
654
|
-
--usewc-
|
|
655
|
-
--usewc-
|
|
689
|
+
--usewc-local-button-background-static: var(--usewc-local-button-background-static-auxiliary);
|
|
690
|
+
--usewc-local-button-text-static: var(--usewc-local-button-text-static-auxiliary);
|
|
691
|
+
--usewc-local-button-border-static: var(--usewc-local-button-border-static-auxiliary);
|
|
692
|
+
--usewc-local-button-text-hover: var(--usewc-local-button-text-static-auxiliary);
|
|
693
|
+
--usewc-local-button-background-hover: var(--usewc-local-button-background-hover-auxiliary);
|
|
694
|
+
--usewc-local-button-border-hover: var(--usewc-local-button-border-hover-auxiliary);
|
|
695
|
+
--usewc-local-button-text-active: var(--usewc-local-button-text-static-auxiliary);
|
|
696
|
+
--usewc-local-button-background-active: var(--usewc-local-button-background-active-auxiliary);
|
|
697
|
+
--usewc-local-button-border-active: var(--usewc-local-button-border-hover-auxiliary);
|
|
698
|
+
--usewc-local-button-text-pressed: var(--usewc-local-button-text-static-auxiliary);
|
|
699
|
+
--usewc-local-button-background-pressed: var(--usewc-local-button-background-pressed-auxiliary);
|
|
700
|
+
--usewc-local-button-border-pressed: var(--usewc-local-button-border-hover-auxiliary);
|
|
701
|
+
--usewc-local-button-box-shadow-static: none;
|
|
702
|
+
--usewc-local-button-box-shadow-hover: none;
|
|
703
|
+
--usewc-local-button-box-shadow-active: none;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
/* A current or pressed button holds its variant's own `-pressed` look at rest and on hover —
|
|
707
|
+
the current page in a pagination `use-control-set`, or a toggle that's on. A `mixed` toggle
|
|
708
|
+
(bold over a partly bold selection) reads as on too. The `-pressed` tokens default to the
|
|
709
|
+
variant's `-active` ones, but stay separate so a theme can tell a held toggle apart from a
|
|
710
|
+
click. It comes after the variant blocks so it re-points whichever `-pressed` values they
|
|
711
|
+
set, rather than the base ones. */
|
|
712
|
+
&:is([aria-current]:not([aria-current="false"]), [aria-pressed="true"], [aria-pressed="mixed"]) {
|
|
713
|
+
--usewc-local-button-text-static: var(--usewc-local-button-text-pressed);
|
|
714
|
+
--usewc-local-button-background-static: var(--usewc-local-button-background-pressed);
|
|
715
|
+
--usewc-local-button-border-static: var(--usewc-local-button-border-pressed);
|
|
716
|
+
--usewc-local-button-text-hover: var(--usewc-local-button-text-pressed);
|
|
717
|
+
--usewc-local-button-background-hover: var(--usewc-local-button-background-pressed);
|
|
718
|
+
--usewc-local-button-border-hover: var(--usewc-local-button-border-pressed);
|
|
719
|
+
--usewc-local-button-box-shadow-static: var(--usewc-local-button-box-shadow-pressed);
|
|
720
|
+
--usewc-local-button-box-shadow-hover: var(--usewc-local-button-box-shadow-pressed);
|
|
656
721
|
}
|
|
657
722
|
|
|
658
723
|
&.extra-small {
|
|
659
|
-
--usewc-
|
|
660
|
-
--usewc-
|
|
661
|
-
--usewc-
|
|
662
|
-
--usewc-
|
|
663
|
-
--usewc-
|
|
724
|
+
--usewc-local-button-padding-block: var(--usewc-layout-button-extra-small-padding-block);
|
|
725
|
+
--usewc-local-button-padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
|
|
726
|
+
--usewc-local-button-font-size: var(--usewc-font-button-extra-small-size);
|
|
727
|
+
--usewc-local-button-line-height: var(--usewc-layout-button-extra-small-line-height);
|
|
728
|
+
--usewc-local-button-radius: var(--usewc-effect-button-extra-small-border-radius);
|
|
664
729
|
}
|
|
665
730
|
|
|
666
731
|
&.small {
|
|
667
|
-
--usewc-
|
|
668
|
-
--usewc-
|
|
669
|
-
--usewc-
|
|
670
|
-
--usewc-
|
|
671
|
-
--usewc-
|
|
732
|
+
--usewc-local-button-padding-block: var(--usewc-layout-button-small-padding-block);
|
|
733
|
+
--usewc-local-button-padding-inline: var(--usewc-layout-button-small-padding-inline);
|
|
734
|
+
--usewc-local-button-font-size: var(--usewc-font-button-small-size);
|
|
735
|
+
--usewc-local-button-line-height: var(--usewc-layout-button-small-line-height);
|
|
736
|
+
--usewc-local-button-radius: var(--usewc-effect-button-small-border-radius);
|
|
672
737
|
}
|
|
673
738
|
|
|
674
739
|
&.large {
|
|
675
|
-
--usewc-
|
|
676
|
-
--usewc-
|
|
677
|
-
--usewc-
|
|
678
|
-
--usewc-
|
|
740
|
+
--usewc-local-button-padding-block: var(--usewc-layout-button-large-padding-block);
|
|
741
|
+
--usewc-local-button-padding-inline: var(--usewc-layout-button-large-padding-inline);
|
|
742
|
+
--usewc-local-button-font-size: var(--usewc-font-button-large-size);
|
|
743
|
+
--usewc-local-button-line-height: var(--usewc-layout-button-large-line-height);
|
|
679
744
|
}
|
|
680
745
|
|
|
681
746
|
&.extra-large {
|
|
682
|
-
--usewc-
|
|
683
|
-
--usewc-
|
|
684
|
-
--usewc-
|
|
685
|
-
--usewc-
|
|
747
|
+
--usewc-local-button-padding-block: var(--usewc-layout-button-extra-large-padding-block);
|
|
748
|
+
--usewc-local-button-padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
|
|
749
|
+
--usewc-local-button-font-size: var(--usewc-font-button-extra-large-size);
|
|
750
|
+
--usewc-local-button-line-height: var(--usewc-layout-button-extra-large-line-height);
|
|
686
751
|
}
|
|
687
752
|
}
|
|
688
753
|
|
|
@@ -752,6 +817,25 @@
|
|
|
752
817
|
all: revert-layer;
|
|
753
818
|
}
|
|
754
819
|
}
|
|
820
|
+
|
|
821
|
+
/* A plain `span` is a static text cell rather than a control — pagination's ellipsis, or a
|
|
822
|
+
unit beside an input. It borrows a base button's border, face, and inline padding so the
|
|
823
|
+
strip's outline stays unbroken through it, and stretches to its neighbors' height through
|
|
824
|
+
the container's default `align-items: stretch` instead of needing its own block padding. */
|
|
825
|
+
use-control-set > span:not([class*="appearance-"]) {
|
|
826
|
+
display: inline-flex;
|
|
827
|
+
align-items: center;
|
|
828
|
+
padding-inline: var(--usewc-layout-button-base-padding-inline);
|
|
829
|
+
font-size: var(--usewc-font-button-base-size);
|
|
830
|
+
color: var(--usewc-color-document-text-muted);
|
|
831
|
+
background: var(--usewc-color-button-base-background-static);
|
|
832
|
+
border: var(--usewc-layout-button-border) var(--usewc-effect-button-border-style)
|
|
833
|
+
var(--usewc-color-button-base-border-static);
|
|
834
|
+
|
|
835
|
+
use-theme-escape & {
|
|
836
|
+
all: revert-layer;
|
|
837
|
+
}
|
|
838
|
+
}
|
|
755
839
|
}
|
|
756
840
|
|
|
757
841
|
@layer use-theme.code {
|
|
@@ -853,7 +937,7 @@
|
|
|
853
937
|
all: unset;
|
|
854
938
|
display: inline-flex;
|
|
855
939
|
align-items: center;
|
|
856
|
-
gap: var(--usewc-
|
|
940
|
+
gap: var(--usewc-local-button-gap);
|
|
857
941
|
}
|
|
858
942
|
|
|
859
943
|
/* Both the plain and button-styled summary share the same masked-icon disclosure indicator
|
|
@@ -873,8 +957,8 @@
|
|
|
873
957
|
mask-position: center;
|
|
874
958
|
}
|
|
875
959
|
|
|
876
|
-
&:is([open], :open) summary:not([class*="appearance-"])::before,
|
|
877
|
-
&:is([open], :open) summary.appearance-button::before {
|
|
960
|
+
&:is([open], :open) > summary:not([class*="appearance-"])::before,
|
|
961
|
+
&:is([open], :open) > summary.appearance-button::before {
|
|
878
962
|
mask-image: var(--usewc-effect-dropdown-trigger-icon-mask-image, none);
|
|
879
963
|
}
|
|
880
964
|
|
|
@@ -883,7 +967,7 @@
|
|
|
883
967
|
outranks button outright. */
|
|
884
968
|
summary.appearance-button {
|
|
885
969
|
padding-inline-start: calc(
|
|
886
|
-
var(--usewc-
|
|
970
|
+
var(--usewc-local-button-padding-inline) - var(--usewc-layout-dropdown-trigger-icon-size) / 4
|
|
887
971
|
);
|
|
888
972
|
}
|
|
889
973
|
|
|
@@ -896,6 +980,191 @@
|
|
|
896
980
|
}
|
|
897
981
|
}
|
|
898
982
|
|
|
983
|
+
/* `nav.sidebar` turns every link inside it, at any depth, into a padded row with a hover
|
|
984
|
+
background — a nested `a` would be invalid HTML anyway, so matching descendants can't reach
|
|
985
|
+
anything that isn't a nav item. It lives in its own layer after `link.css` and `details.css` so
|
|
986
|
+
its plain selectors outrank both without a specificity fight.
|
|
987
|
+
|
|
988
|
+
Links keep `link.css`'s own state machinery: this swaps the source tokens it reads through
|
|
989
|
+
(`--usewc-color-link-text-static`/`-hover`/`-active`) rather than setting `color` directly, so
|
|
990
|
+
every existing state recolors at once. `aria-current="page"` swaps the same tokens again for the
|
|
991
|
+
current page.
|
|
992
|
+
|
|
993
|
+
A `details` inside the sidebar is a collapsible group: its `summary` renders as the same kind of
|
|
994
|
+
row, keeping `details.css`'s caret. When the summary starts with an icon (`svg` or `.icon`), the
|
|
995
|
+
icon shows at rest and the caret takes its place on hover or keyboard focus — both share
|
|
996
|
+
`--usewc-layout-sidebar-item-icon-size`, so the swap never shifts the label.
|
|
997
|
+
|
|
998
|
+
Everything after the summary hangs off a guide line centered under the summary's icon column,
|
|
999
|
+
drawn once on the group's `::details-content` rather than on each row, so the rows' own rounded
|
|
1000
|
+
corners never bend it, and nested rows get just enough inline padding to land their text under
|
|
1001
|
+
the summary's text.
|
|
1002
|
+
Rows below the top level all share one derived padding, which is why a group nested two deep
|
|
1003
|
+
reads its offset from that padding instead of the top-level one.
|
|
1004
|
+
|
|
1005
|
+
Rows can sit directly in the nav or in `ul`/`ol` lists — lists are recommended, since assistive
|
|
1006
|
+
tech announces their item count — and lists lose their bullets and indentation here so both
|
|
1007
|
+
shapes render the same. That's also why a top-level group is found as a `details` with no
|
|
1008
|
+
`details` ancestor rather than as a direct child of the nav.
|
|
1009
|
+
|
|
1010
|
+
Headings that are direct children of the nav are group labels. Only direct children count,
|
|
1011
|
+
since a sidebar row can hold its own heading inside a nested `use-pattern`. */
|
|
1012
|
+
@layer use-theme.sidebar {
|
|
1013
|
+
nav.sidebar {
|
|
1014
|
+
--usewc-local-sidebar-nested-padding-inline-start: calc(
|
|
1015
|
+
var(--usewc-layout-sidebar-item-icon-size) / 2 + var(--usewc-layout-sidebar-item-gap) -
|
|
1016
|
+
var(--usewc-layout-sidebar-nested-guide-width) / 2 - var(--usewc-layout-sidebar-nested-guide-gap)
|
|
1017
|
+
);
|
|
1018
|
+
|
|
1019
|
+
:is(a, summary):not([class*="appearance-"]) {
|
|
1020
|
+
display: flex;
|
|
1021
|
+
align-items: center;
|
|
1022
|
+
gap: var(--usewc-layout-sidebar-item-gap);
|
|
1023
|
+
padding: var(--usewc-layout-sidebar-item-padding-block) var(--usewc-layout-sidebar-item-padding-inline);
|
|
1024
|
+
border-radius: var(--usewc-effect-sidebar-item-border-radius);
|
|
1025
|
+
|
|
1026
|
+
&:is(:hover, :focus-visible) {
|
|
1027
|
+
background-color: var(--usewc-color-sidebar-item-background-hover);
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
> :is(svg, .icon):first-child {
|
|
1031
|
+
display: inline-flex;
|
|
1032
|
+
align-items: center;
|
|
1033
|
+
justify-content: center;
|
|
1034
|
+
flex: none;
|
|
1035
|
+
inline-size: var(--usewc-layout-sidebar-item-icon-size);
|
|
1036
|
+
block-size: var(--usewc-layout-sidebar-item-icon-size);
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
> :only-child:not(svg, .icon) {
|
|
1040
|
+
flex: auto;
|
|
1041
|
+
min-inline-size: 0;
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
use-theme-escape & {
|
|
1045
|
+
all: revert-layer;
|
|
1046
|
+
}
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
a:not([class*="appearance-"]) {
|
|
1050
|
+
--usewc-color-link-text-static: var(--usewc-color-sidebar-item-text-static);
|
|
1051
|
+
--usewc-color-link-text-hover: var(--usewc-color-sidebar-item-text-hover);
|
|
1052
|
+
--usewc-color-link-text-active: var(--usewc-color-sidebar-item-text-active);
|
|
1053
|
+
|
|
1054
|
+
&[aria-current="page"] {
|
|
1055
|
+
--usewc-color-link-text-static: var(--usewc-color-sidebar-item-text-current);
|
|
1056
|
+
--usewc-color-link-text-hover: var(--usewc-color-sidebar-item-text-current);
|
|
1057
|
+
--usewc-color-link-text-active: var(--usewc-color-sidebar-item-text-current);
|
|
1058
|
+
background-color: var(--usewc-color-sidebar-item-background-current);
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
|
|
1062
|
+
summary:not([class*="appearance-"]) {
|
|
1063
|
+
color: var(--usewc-color-sidebar-item-text-static);
|
|
1064
|
+
cursor: pointer;
|
|
1065
|
+
outline-offset: var(--usewc-effect-outline-offset);
|
|
1066
|
+
|
|
1067
|
+
&:hover {
|
|
1068
|
+
color: var(--usewc-color-sidebar-item-text-hover);
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
&:active {
|
|
1072
|
+
color: var(--usewc-color-sidebar-item-text-active);
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
&:focus-visible {
|
|
1076
|
+
outline: var(--usewc-effect-outline-size) var(--usewc-effect-outline-style) var(--usewc-color-outline);
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
&::before {
|
|
1080
|
+
flex: none;
|
|
1081
|
+
inline-size: var(--usewc-layout-sidebar-item-icon-size);
|
|
1082
|
+
block-size: var(--usewc-layout-sidebar-item-icon-size);
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
&:has(> :is(svg, .icon):first-child) {
|
|
1086
|
+
&::before {
|
|
1087
|
+
display: none;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
&:is(:hover, :focus-visible) {
|
|
1091
|
+
&::before {
|
|
1092
|
+
display: inline-block;
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
> :is(svg, .icon):first-child {
|
|
1096
|
+
display: none;
|
|
1097
|
+
}
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
use-theme-escape &,
|
|
1102
|
+
use-theme-escape &::before {
|
|
1103
|
+
all: revert-layer;
|
|
1104
|
+
}
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
:is(ul, ol) {
|
|
1108
|
+
margin: 0;
|
|
1109
|
+
padding: 0;
|
|
1110
|
+
list-style: none;
|
|
1111
|
+
|
|
1112
|
+
use-theme-escape & {
|
|
1113
|
+
all: revert-layer;
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
details:has(a[aria-current="page"]) > summary:not([class*="appearance-"]) {
|
|
1118
|
+
color: var(--usewc-color-sidebar-item-text-current);
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
details::details-content {
|
|
1122
|
+
padding-inline-start: var(--usewc-layout-sidebar-nested-guide-gap);
|
|
1123
|
+
border-inline-start: var(--usewc-layout-sidebar-nested-guide-width) solid var(--usewc-color-sidebar-nested-guide);
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
details:not(details details)::details-content {
|
|
1127
|
+
margin-inline-start: calc(
|
|
1128
|
+
var(--usewc-layout-sidebar-item-padding-inline) + var(--usewc-layout-sidebar-item-icon-size) / 2 -
|
|
1129
|
+
var(--usewc-layout-sidebar-nested-guide-width) / 2
|
|
1130
|
+
);
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
details details::details-content {
|
|
1134
|
+
margin-inline-start: calc(
|
|
1135
|
+
var(--usewc-local-sidebar-nested-padding-inline-start) + var(--usewc-layout-sidebar-item-icon-size) / 2 -
|
|
1136
|
+
var(--usewc-layout-sidebar-nested-guide-width) / 2
|
|
1137
|
+
);
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
use-theme-escape & details::details-content {
|
|
1141
|
+
all: revert-layer;
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
details > a:not([class*="appearance-"]),
|
|
1145
|
+
details > :not(summary) :is(a, summary):not([class*="appearance-"]) {
|
|
1146
|
+
padding-inline-start: var(--usewc-local-sidebar-nested-padding-inline-start);
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
> :is(h1, h2, h3, h4, h5, h6) {
|
|
1150
|
+
margin: var(--usewc-layout-sidebar-group-label-spacing) 0 var(--usewc-space-4);
|
|
1151
|
+
padding-inline: var(--usewc-layout-sidebar-item-padding-inline);
|
|
1152
|
+
font-size: var(--usewc-font-sidebar-group-label-size);
|
|
1153
|
+
font-weight: var(--usewc-font-sidebar-group-label-weight);
|
|
1154
|
+
line-height: var(--usewc-layout-sidebar-group-label-line-height);
|
|
1155
|
+
color: var(--usewc-color-sidebar-group-label-text);
|
|
1156
|
+
|
|
1157
|
+
&:first-child {
|
|
1158
|
+
margin-block-start: 0;
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1161
|
+
use-theme-escape & {
|
|
1162
|
+
all: revert-layer;
|
|
1163
|
+
}
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
|
|
899
1168
|
@layer use-theme.segment-input {
|
|
900
1169
|
:is(use-datetime-input, use-date-input, use-time-input, use-duration-input):not(.appearance-native) {
|
|
901
1170
|
display: inline-flex;
|
|
@@ -2051,9 +2320,9 @@
|
|
|
2051
2320
|
and rounded to the pill's radius, so it reads as part of the chip rather than a stray
|
|
2052
2321
|
button. `1lh` (its own line-height) drives a clean square that scales with the text. */
|
|
2053
2322
|
use-gridcell button {
|
|
2054
|
-
--usewc-
|
|
2055
|
-
--usewc-
|
|
2056
|
-
--usewc-
|
|
2323
|
+
--usewc-local-button-padding-inline: 0;
|
|
2324
|
+
--usewc-local-button-padding-block: 0;
|
|
2325
|
+
--usewc-local-button-radius: var(--usewc-effect-grid-chip-border-radius);
|
|
2057
2326
|
|
|
2058
2327
|
inline-size: 1lh;
|
|
2059
2328
|
block-size: 1lh;
|
|
@@ -2883,11 +3152,11 @@
|
|
|
2883
3152
|
& > header > button,
|
|
2884
3153
|
& > header > section:last-child > button {
|
|
2885
3154
|
&.clear:is([aria-label], [aria-labelledby]):last-child {
|
|
2886
|
-
margin-inline-end: calc(-1 * (var(--usewc-
|
|
3155
|
+
margin-inline-end: calc(-1 * (var(--usewc-local-button-padding-inline) + var(--usewc-layout-button-border)));
|
|
2887
3156
|
}
|
|
2888
3157
|
|
|
2889
3158
|
&.clear:is([aria-label], [aria-labelledby]):last-child:has(> use-caret:empty, > :is(svg, .icon):only-child) {
|
|
2890
|
-
margin-inline-end: calc(-1 * (var(--usewc-
|
|
3159
|
+
margin-inline-end: calc(-1 * (var(--usewc-local-button-padding-block) + var(--usewc-layout-button-border)));
|
|
2891
3160
|
}
|
|
2892
3161
|
}
|
|
2893
3162
|
|
|
@@ -34,7 +34,24 @@ button:
|
|
|
34
34
|
A child is a `<button>`, anything wearing `.appearance-button`, an `<input>` (other than a
|
|
35
35
|
checkbox/radio/range/file), a `<select>`, a `<textarea>`, or anything wearing
|
|
36
36
|
`.appearance-input` — see `theme/control-set.css` for exactly which selectors read which
|
|
37
|
-
radius/border tokens.
|
|
37
|
+
radius/border tokens. A plain `span` renders as a static text cell between controls.
|
|
38
|
+
|
|
39
|
+
Pagination follows the same shape, with `a.appearance-button` links and `aria-current="page"`
|
|
40
|
+
holding the current page in its pressed look:
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<nav aria-label="Pagination">
|
|
44
|
+
<use-control-set>
|
|
45
|
+
<a class="appearance-button" href="?page=1">1</a>
|
|
46
|
+
<a class="appearance-button" href="?page=2" aria-current="page">2</a>
|
|
47
|
+
<span aria-hidden="true">…</span>
|
|
48
|
+
<a class="appearance-button" href="?page=10">10</a>
|
|
49
|
+
</use-control-set>
|
|
50
|
+
</nav>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
A formatting toolbar works the same way with toggle buttons: `aria-pressed="true"` (or `"mixed"`,
|
|
54
|
+
for a selection it only partly covers) holds a format that's on in its pressed look.
|
|
38
55
|
|
|
39
56
|
How the touching sides render is themeable rather than fixed: `--usewc-layout-control-set-gap`
|
|
40
57
|
(default: a negative overlap equal to the child's own border, for a seamless merged line) and
|
package/dist/tokens.css
CHANGED
|
@@ -222,6 +222,29 @@
|
|
|
222
222
|
--usewc-effect-sidebar-item-border-radius: var(--usewc-effect-border-radius-6);
|
|
223
223
|
--usewc-layout-sidebar-item-padding-block: var(--usewc-space-8);
|
|
224
224
|
--usewc-layout-sidebar-item-padding-inline: var(--usewc-space-12);
|
|
225
|
+
--usewc-color-sidebar-item-text-current: var(--usewc-color-brand-primary);
|
|
226
|
+
--usewc-color-sidebar-item-background-current: oklch(from var(--usewc-color-brand-primary) l c h / 0.1);
|
|
227
|
+
/* A leading icon and the group caret share one box, so the caret can stand in for the icon on
|
|
228
|
+
hover without shifting the label, and one indent lines nested text up under either. */
|
|
229
|
+
--usewc-layout-sidebar-item-icon-size: 1em;
|
|
230
|
+
--usewc-layout-sidebar-item-gap: var(--usewc-space-8);
|
|
231
|
+
/* The guide is a tint of the document's own ink rather than a fixed gray, so it stays equally
|
|
232
|
+
faint against either theme's background without a dark-mode override. */
|
|
233
|
+
--usewc-color-sidebar-nested-guide: oklch(from var(--usewc-color-document-text) l c h / 0.15);
|
|
234
|
+
--usewc-layout-sidebar-nested-guide-width: var(--usewc-space-1);
|
|
235
|
+
--usewc-layout-sidebar-nested-guide-gap: var(--usewc-space-4);
|
|
236
|
+
--usewc-color-sidebar-group-label-text: var(--usewc-color-document-text-muted);
|
|
237
|
+
--usewc-font-sidebar-group-label-size: var(--usewc-font-size-12);
|
|
238
|
+
--usewc-font-sidebar-group-label-weight: var(--usewc-font-weight-semibold);
|
|
239
|
+
--usewc-layout-sidebar-group-label-line-height: var(--usewc-line-height-18);
|
|
240
|
+
--usewc-layout-sidebar-group-label-spacing: var(--usewc-space-16);
|
|
241
|
+
/* - Breadcrumb */
|
|
242
|
+
/* The separator is decoration rather than meaning, the same way a link's underline is, so it
|
|
243
|
+
lives under `effect` — `breadcrumb.css` gives it empty alt text so it's never announced. */
|
|
244
|
+
--usewc-effect-breadcrumb-separator: "/";
|
|
245
|
+
--usewc-color-breadcrumb-separator: var(--usewc-color-document-text-muted);
|
|
246
|
+
--usewc-color-breadcrumb-current-text: var(--usewc-color-document-text);
|
|
247
|
+
--usewc-layout-breadcrumb-gap: var(--usewc-space-8);
|
|
225
248
|
|
|
226
249
|
/* Form */
|
|
227
250
|
/* - Color */
|
|
@@ -379,8 +402,12 @@
|
|
|
379
402
|
--usewc-color-button-base-text-static-auxiliary: var(--usewc-color-document-text);
|
|
380
403
|
--usewc-color-button-base-text-hover: var(--usewc-color-document-text);
|
|
381
404
|
--usewc-color-button-base-text-active: var(--usewc-color-document-text);
|
|
405
|
+
--usewc-color-button-base-text-pressed: var(--usewc-color-button-base-text-active);
|
|
406
|
+
--usewc-color-button-base-background-pressed: var(--usewc-color-button-base-background-active);
|
|
407
|
+
--usewc-color-button-base-border-pressed: var(--usewc-color-button-base-border-active);
|
|
382
408
|
--usewc-color-button-base-background-hover-auxiliary: oklch(from var(--usewc-color-document-text) l c h / 0.07);
|
|
383
409
|
--usewc-color-button-base-background-active-auxiliary: oklch(from var(--usewc-color-document-text) l c h / 0.13);
|
|
410
|
+
--usewc-color-button-base-background-pressed-auxiliary: var(--usewc-color-button-base-background-active-auxiliary);
|
|
384
411
|
--usewc-color-button-base-border-hover-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
|
|
385
412
|
/* -- Primary color: derived */
|
|
386
413
|
--usewc-color-button-primary-background-hover: oklch(
|
|
@@ -410,12 +437,18 @@
|
|
|
410
437
|
--usewc-color-button-primary-text-static-auxiliary: var(--usewc-color-button-primary-background-static);
|
|
411
438
|
--usewc-color-button-primary-text-hover: var(--usewc-color-white);
|
|
412
439
|
--usewc-color-button-primary-text-active: var(--usewc-color-white);
|
|
440
|
+
--usewc-color-button-primary-text-pressed: var(--usewc-color-button-primary-text-active);
|
|
441
|
+
--usewc-color-button-primary-background-pressed: var(--usewc-color-button-primary-background-active);
|
|
442
|
+
--usewc-color-button-primary-border-pressed: var(--usewc-color-button-primary-border-active);
|
|
413
443
|
--usewc-color-button-primary-background-hover-auxiliary: oklch(
|
|
414
444
|
from var(--usewc-color-button-primary-background-static) l c h / 0.09
|
|
415
445
|
);
|
|
416
446
|
--usewc-color-button-primary-background-active-auxiliary: oklch(
|
|
417
447
|
from var(--usewc-color-button-primary-background-static) l c h / 0.15
|
|
418
448
|
);
|
|
449
|
+
--usewc-color-button-primary-background-pressed-auxiliary: var(
|
|
450
|
+
--usewc-color-button-primary-background-active-auxiliary
|
|
451
|
+
);
|
|
419
452
|
--usewc-color-button-primary-border-hover-auxiliary: oklch(
|
|
420
453
|
from var(--usewc-color-button-primary-background-static) l c h / 0.85
|
|
421
454
|
);
|
|
@@ -445,12 +478,18 @@
|
|
|
445
478
|
--usewc-color-button-danger-text-static-auxiliary: var(--usewc-color-button-danger-background-static);
|
|
446
479
|
--usewc-color-button-danger-text-hover: var(--usewc-color-white);
|
|
447
480
|
--usewc-color-button-danger-text-active: var(--usewc-color-white);
|
|
481
|
+
--usewc-color-button-danger-text-pressed: var(--usewc-color-button-danger-text-active);
|
|
482
|
+
--usewc-color-button-danger-background-pressed: var(--usewc-color-button-danger-background-active);
|
|
483
|
+
--usewc-color-button-danger-border-pressed: var(--usewc-color-button-danger-border-active);
|
|
448
484
|
--usewc-color-button-danger-background-hover-auxiliary: oklch(
|
|
449
485
|
from var(--usewc-color-button-danger-background-static) l c h / 0.09
|
|
450
486
|
);
|
|
451
487
|
--usewc-color-button-danger-background-active-auxiliary: oklch(
|
|
452
488
|
from var(--usewc-color-button-danger-background-static) l c h / 0.15
|
|
453
489
|
);
|
|
490
|
+
--usewc-color-button-danger-background-pressed-auxiliary: var(
|
|
491
|
+
--usewc-color-button-danger-background-active-auxiliary
|
|
492
|
+
);
|
|
454
493
|
--usewc-color-button-danger-border-hover-auxiliary: oklch(
|
|
455
494
|
from var(--usewc-color-button-danger-background-static) l c h / 0.85
|
|
456
495
|
);
|
|
@@ -465,8 +504,12 @@
|
|
|
465
504
|
--usewc-color-button-clear-text-static-auxiliary: var(--usewc-color-document-text);
|
|
466
505
|
--usewc-color-button-clear-text-hover: var(--usewc-color-document-text);
|
|
467
506
|
--usewc-color-button-clear-text-active: var(--usewc-color-document-text);
|
|
507
|
+
--usewc-color-button-clear-text-pressed: var(--usewc-color-button-clear-text-active);
|
|
508
|
+
--usewc-color-button-clear-background-pressed: var(--usewc-color-button-clear-background-active);
|
|
509
|
+
--usewc-color-button-clear-border-pressed: var(--usewc-color-button-clear-border-active);
|
|
468
510
|
--usewc-color-button-clear-background-hover-auxiliary: var(--usewc-color-button-clear-background-hover);
|
|
469
511
|
--usewc-color-button-clear-background-active-auxiliary: var(--usewc-color-button-clear-background-active);
|
|
512
|
+
--usewc-color-button-clear-background-pressed-auxiliary: var(--usewc-color-button-clear-background-active-auxiliary);
|
|
470
513
|
--usewc-color-button-clear-border-hover-auxiliary: var(--usewc-color-gray-500);
|
|
471
514
|
/* -- Shadow color */
|
|
472
515
|
--usewc-color-button-shadow-lightness: 0.25;
|
package/package.json
CHANGED
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
"name": "use-control-set",
|
|
80
|
-
"description": "Groups adjacent controls — buttons and text-style inputs alike — into one visual unit: shared\nborders between touching children, rounded corners only on the two outer ends, and a hovered\nor focused child's border lifted above its neighbors so the whole border reads clearly.\n\n`use-control-set` renders no shadow DOM and no template of its own — it exists only as a\ndedicated tag for `theme/control-set.css` to style, the same way `use-layout` is a bare\nprimitive rather than a specific look. A classic split button is a text button followed by an\nicon-only trigger for a `use-menu`:\n\n```html\n<use-control-set>\n <button type=\"button\">Save</button>\n <button type=\"button\" popovertarget=\"save-options\" aria-label=\"More save options\">\n <use-caret></use-caret>\n </button>\n</use-control-set>\n<use-menu id=\"save-options\" aria-label=\"More save options\">\n <button role=\"menuitem\">Save as…</button>\n</use-menu>\n```\n\nA search box with an attached submit button follows the same shape, mixing a text input with a\nbutton:\n\n```html\n<use-control-set>\n <input type=\"search\" placeholder=\"Search\" />\n <button type=\"submit\">Go</button>\n</use-control-set>\n```\n\nA child is a `<button>`, anything wearing `.appearance-button`, an `<input>` (other than a\ncheckbox/radio/range/file), a `<select>`, a `<textarea>`, or anything wearing\n`.appearance-input` — see `theme/control-set.css` for exactly which selectors read which\nradius/border tokens.\n\nHow the touching sides render is themeable rather than fixed: `--usewc-layout-control-set-gap`\n(default: a negative overlap equal to the child's own border, for a seamless merged line) and\n`--usewc-effect-control-set-border-radius-sequential` (default: `0`, for square touching\ncorners) can both be overridden — a positive gap and a small radius reads as a looser, softer\nset instead of a fused one.\n---\n\n\n### **Slots:**\n - _default_ - The grouped controls.",
|
|
80
|
+
"description": "Groups adjacent controls — buttons and text-style inputs alike — into one visual unit: shared\nborders between touching children, rounded corners only on the two outer ends, and a hovered\nor focused child's border lifted above its neighbors so the whole border reads clearly.\n\n`use-control-set` renders no shadow DOM and no template of its own — it exists only as a\ndedicated tag for `theme/control-set.css` to style, the same way `use-layout` is a bare\nprimitive rather than a specific look. A classic split button is a text button followed by an\nicon-only trigger for a `use-menu`:\n\n```html\n<use-control-set>\n <button type=\"button\">Save</button>\n <button type=\"button\" popovertarget=\"save-options\" aria-label=\"More save options\">\n <use-caret></use-caret>\n </button>\n</use-control-set>\n<use-menu id=\"save-options\" aria-label=\"More save options\">\n <button role=\"menuitem\">Save as…</button>\n</use-menu>\n```\n\nA search box with an attached submit button follows the same shape, mixing a text input with a\nbutton:\n\n```html\n<use-control-set>\n <input type=\"search\" placeholder=\"Search\" />\n <button type=\"submit\">Go</button>\n</use-control-set>\n```\n\nA child is a `<button>`, anything wearing `.appearance-button`, an `<input>` (other than a\ncheckbox/radio/range/file), a `<select>`, a `<textarea>`, or anything wearing\n`.appearance-input` — see `theme/control-set.css` for exactly which selectors read which\nradius/border tokens. A plain `span` renders as a static text cell between controls.\n\nPagination follows the same shape, with `a.appearance-button` links and `aria-current=\"page\"`\nholding the current page in its pressed look:\n\n```html\n<nav aria-label=\"Pagination\">\n <use-control-set>\n <a class=\"appearance-button\" href=\"?page=1\">1</a>\n <a class=\"appearance-button\" href=\"?page=2\" aria-current=\"page\">2</a>\n <span aria-hidden=\"true\">…</span>\n <a class=\"appearance-button\" href=\"?page=10\">10</a>\n </use-control-set>\n</nav>\n```\n\nA formatting toolbar works the same way with toggle buttons: `aria-pressed=\"true\"` (or `\"mixed\"`,\nfor a selection it only partly covers) holds a format that's on in its pressed look.\n\nHow the touching sides render is themeable rather than fixed: `--usewc-layout-control-set-gap`\n(default: a negative overlap equal to the child's own border, for a seamless merged line) and\n`--usewc-effect-control-set-border-radius-sequential` (default: `0`, for square touching\ncorners) can both be overridden — a positive gap and a small radius reads as a looser, softer\nset instead of a fused one.\n---\n\n\n### **Slots:**\n - _default_ - The grouped controls.",
|
|
81
81
|
"attributes": [],
|
|
82
82
|
"references": []
|
|
83
83
|
},
|