use-wc 1.0.0-pre.83 → 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 +71 -71
- package/dist/design-system.css +200 -177
- package/dist/docs/use-control-set.md +3 -0
- package/dist/tokens.css +20 -0
- package/package.json +1 -1
- package/vscode.html-custom-data.json +13 -13
package/custom-elements.json
CHANGED
|
@@ -89,6 +89,76 @@
|
|
|
89
89
|
}
|
|
90
90
|
]
|
|
91
91
|
},
|
|
92
|
+
{
|
|
93
|
+
"kind": "javascript-module",
|
|
94
|
+
"path": "src/elements/use-avatar/use-avatar.ts",
|
|
95
|
+
"declarations": [
|
|
96
|
+
{
|
|
97
|
+
"kind": "class",
|
|
98
|
+
"description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
|
|
99
|
+
"name": "UseAvatar",
|
|
100
|
+
"cssParts": [
|
|
101
|
+
{
|
|
102
|
+
"description": "The span that renders the `name` fallback.",
|
|
103
|
+
"name": "initials"
|
|
104
|
+
}
|
|
105
|
+
],
|
|
106
|
+
"slots": [
|
|
107
|
+
{
|
|
108
|
+
"description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
|
|
109
|
+
"name": ""
|
|
110
|
+
}
|
|
111
|
+
],
|
|
112
|
+
"members": [
|
|
113
|
+
{
|
|
114
|
+
"kind": "field",
|
|
115
|
+
"name": "name",
|
|
116
|
+
"type": {
|
|
117
|
+
"text": "string"
|
|
118
|
+
},
|
|
119
|
+
"default": "\"\"",
|
|
120
|
+
"attribute": "name",
|
|
121
|
+
"reflects": true
|
|
122
|
+
}
|
|
123
|
+
],
|
|
124
|
+
"attributes": [
|
|
125
|
+
{
|
|
126
|
+
"description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
|
|
127
|
+
"name": "name",
|
|
128
|
+
"type": {
|
|
129
|
+
"text": "string"
|
|
130
|
+
},
|
|
131
|
+
"default": "\"\"",
|
|
132
|
+
"fieldName": "name"
|
|
133
|
+
}
|
|
134
|
+
],
|
|
135
|
+
"superclass": {
|
|
136
|
+
"name": "LitElement",
|
|
137
|
+
"package": "lit"
|
|
138
|
+
},
|
|
139
|
+
"tagName": "use-avatar",
|
|
140
|
+
"customElement": true
|
|
141
|
+
}
|
|
142
|
+
],
|
|
143
|
+
"exports": [
|
|
144
|
+
{
|
|
145
|
+
"kind": "js",
|
|
146
|
+
"name": "UseAvatar",
|
|
147
|
+
"declaration": {
|
|
148
|
+
"name": "UseAvatar",
|
|
149
|
+
"module": "src/elements/use-avatar/use-avatar.ts"
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"kind": "custom-element-definition",
|
|
154
|
+
"name": "use-avatar",
|
|
155
|
+
"declaration": {
|
|
156
|
+
"name": "UseAvatar",
|
|
157
|
+
"module": "src/elements/use-avatar/use-avatar.ts"
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
]
|
|
161
|
+
},
|
|
92
162
|
{
|
|
93
163
|
"kind": "javascript-module",
|
|
94
164
|
"path": "src/elements/use-badge/use-badge.ts",
|
|
@@ -232,76 +302,6 @@
|
|
|
232
302
|
}
|
|
233
303
|
]
|
|
234
304
|
},
|
|
235
|
-
{
|
|
236
|
-
"kind": "javascript-module",
|
|
237
|
-
"path": "src/elements/use-avatar/use-avatar.ts",
|
|
238
|
-
"declarations": [
|
|
239
|
-
{
|
|
240
|
-
"kind": "class",
|
|
241
|
-
"description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
|
|
242
|
-
"name": "UseAvatar",
|
|
243
|
-
"cssParts": [
|
|
244
|
-
{
|
|
245
|
-
"description": "The span that renders the `name` fallback.",
|
|
246
|
-
"name": "initials"
|
|
247
|
-
}
|
|
248
|
-
],
|
|
249
|
-
"slots": [
|
|
250
|
-
{
|
|
251
|
-
"description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
|
|
252
|
-
"name": ""
|
|
253
|
-
}
|
|
254
|
-
],
|
|
255
|
-
"members": [
|
|
256
|
-
{
|
|
257
|
-
"kind": "field",
|
|
258
|
-
"name": "name",
|
|
259
|
-
"type": {
|
|
260
|
-
"text": "string"
|
|
261
|
-
},
|
|
262
|
-
"default": "\"\"",
|
|
263
|
-
"attribute": "name",
|
|
264
|
-
"reflects": true
|
|
265
|
-
}
|
|
266
|
-
],
|
|
267
|
-
"attributes": [
|
|
268
|
-
{
|
|
269
|
-
"description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
|
|
270
|
-
"name": "name",
|
|
271
|
-
"type": {
|
|
272
|
-
"text": "string"
|
|
273
|
-
},
|
|
274
|
-
"default": "\"\"",
|
|
275
|
-
"fieldName": "name"
|
|
276
|
-
}
|
|
277
|
-
],
|
|
278
|
-
"superclass": {
|
|
279
|
-
"name": "LitElement",
|
|
280
|
-
"package": "lit"
|
|
281
|
-
},
|
|
282
|
-
"tagName": "use-avatar",
|
|
283
|
-
"customElement": true
|
|
284
|
-
}
|
|
285
|
-
],
|
|
286
|
-
"exports": [
|
|
287
|
-
{
|
|
288
|
-
"kind": "js",
|
|
289
|
-
"name": "UseAvatar",
|
|
290
|
-
"declaration": {
|
|
291
|
-
"name": "UseAvatar",
|
|
292
|
-
"module": "src/elements/use-avatar/use-avatar.ts"
|
|
293
|
-
}
|
|
294
|
-
},
|
|
295
|
-
{
|
|
296
|
-
"kind": "custom-element-definition",
|
|
297
|
-
"name": "use-avatar",
|
|
298
|
-
"declaration": {
|
|
299
|
-
"name": "UseAvatar",
|
|
300
|
-
"module": "src/elements/use-avatar/use-avatar.ts"
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
]
|
|
304
|
-
},
|
|
305
305
|
{
|
|
306
306
|
"kind": "javascript-module",
|
|
307
307
|
"path": "src/elements/use-calendar-base/use-calendar-base.ts",
|
|
@@ -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. 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\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
|
@@ -426,56 +426,62 @@
|
|
|
426
426
|
display: inline-flex;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
|
-
--usewc-
|
|
430
|
-
--usewc-
|
|
431
|
-
--usewc-
|
|
432
|
-
--usewc-
|
|
433
|
-
--usewc-
|
|
434
|
-
--usewc-
|
|
435
|
-
--usewc-
|
|
436
|
-
--usewc-
|
|
437
|
-
--usewc-
|
|
438
|
-
--usewc-
|
|
439
|
-
--usewc-
|
|
440
|
-
--usewc-
|
|
441
|
-
--usewc-
|
|
442
|
-
--usewc-
|
|
443
|
-
--usewc-
|
|
444
|
-
|
|
445
|
-
--usewc-
|
|
446
|
-
--usewc-
|
|
447
|
-
--usewc-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
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))
|
|
452
456
|
);
|
|
453
|
-
--usewc-
|
|
454
|
-
from var(--usewc-
|
|
455
|
-
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 /
|
|
456
460
|
calc(
|
|
457
|
-
var(--usewc-color-button-shadow-alpha) * var(--usewc-
|
|
461
|
+
var(--usewc-color-button-shadow-alpha) * var(--usewc-local-button-shadow-alpha-multiplier) *
|
|
458
462
|
var(--usewc-color-button-shadow-alpha-hover-multiplier)
|
|
459
463
|
)
|
|
460
464
|
);
|
|
461
|
-
--usewc-
|
|
462
|
-
--usewc-
|
|
463
|
-
--usewc-
|
|
464
|
-
--usewc-
|
|
465
|
-
var(--usewc-
|
|
466
|
-
--usewc-
|
|
467
|
-
var(--usewc-
|
|
468
|
-
--usewc-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
--usewc-
|
|
472
|
-
--usewc-
|
|
473
|
-
--usewc-
|
|
474
|
-
--usewc-
|
|
475
|
-
--usewc-
|
|
476
|
-
--usewc-
|
|
477
|
-
--usewc-
|
|
478
|
-
--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);
|
|
479
485
|
--usewc-effect-outline-width: 0;
|
|
480
486
|
--usewc-effect-opacity: 1;
|
|
481
487
|
--usewc-effect-pointer-events: auto;
|
|
@@ -485,23 +491,23 @@
|
|
|
485
491
|
display: inline-flex;
|
|
486
492
|
align-items: center;
|
|
487
493
|
justify-content: center;
|
|
488
|
-
gap: var(--usewc-
|
|
489
|
-
border-radius: var(--usewc-
|
|
490
|
-
line-height: var(--usewc-
|
|
491
|
-
padding-block: var(--usewc-
|
|
492
|
-
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);
|
|
493
499
|
font-family: var(--usewc-font-button-family);
|
|
494
|
-
font-size: var(--usewc-
|
|
500
|
+
font-size: var(--usewc-local-button-font-size);
|
|
495
501
|
font-weight: var(--usewc-font-button-weight);
|
|
496
502
|
white-space: nowrap;
|
|
497
503
|
cursor: default;
|
|
498
|
-
color: var(--usewc-
|
|
499
|
-
background: var(--usewc-
|
|
504
|
+
color: var(--usewc-local-button-text);
|
|
505
|
+
background: var(--usewc-local-button-background);
|
|
500
506
|
background-size: var(--usewc-effect-button-background-size);
|
|
501
507
|
background-position: var(--usewc-effect-button-background-position);
|
|
502
508
|
background-repeat: var(--usewc-effect-button-background-repeat);
|
|
503
|
-
border: var(--usewc-layout-button-border) var(--usewc-effect-button-border-style) var(--usewc-
|
|
504
|
-
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);
|
|
505
511
|
opacity: var(--usewc-effect-opacity);
|
|
506
512
|
pointer-events: var(--usewc-effect-pointer-events);
|
|
507
513
|
outline: var(--usewc-effect-outline-width) var(--usewc-effect-outline-style) var(--usewc-color-outline);
|
|
@@ -528,7 +534,7 @@
|
|
|
528
534
|
* never actually shrinks.
|
|
529
535
|
*/
|
|
530
536
|
padding-inline-end: calc(
|
|
531
|
-
var(--usewc-
|
|
537
|
+
var(--usewc-local-button-padding-inline) - var(--usewc-layout-dropdown-trigger-icon-size) / 4
|
|
532
538
|
);
|
|
533
539
|
|
|
534
540
|
use-theme-escape & {
|
|
@@ -555,12 +561,12 @@
|
|
|
555
561
|
button's natural height, is a real square by construction — and it keeps this button the
|
|
556
562
|
same height as a text sibling in the same use-control-set, rather than shrinking to 1lh. */
|
|
557
563
|
padding-inline: 0;
|
|
558
|
-
--usewc-
|
|
559
|
-
var(--usewc-
|
|
560
|
-
(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
|
|
561
567
|
);
|
|
562
|
-
inline-size: var(--usewc-
|
|
563
|
-
block-size: var(--usewc-
|
|
568
|
+
inline-size: var(--usewc-local-button-icon-only-size);
|
|
569
|
+
block-size: var(--usewc-local-button-icon-only-size);
|
|
564
570
|
|
|
565
571
|
/* The default caret glyph is a 50% tint of currentColor for a caret beside a label — as
|
|
566
572
|
the button's only content, it reads better at full strength, so this overrides the token
|
|
@@ -578,10 +584,10 @@
|
|
|
578
584
|
|
|
579
585
|
&:where(:hover, :focus-visible),
|
|
580
586
|
&:hover::file-selector-button {
|
|
581
|
-
--usewc-
|
|
582
|
-
--usewc-
|
|
583
|
-
--usewc-
|
|
584
|
-
--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);
|
|
585
591
|
}
|
|
586
592
|
|
|
587
593
|
&:focus-visible {
|
|
@@ -590,10 +596,10 @@
|
|
|
590
596
|
|
|
591
597
|
&:active,
|
|
592
598
|
&:active::file-selector-button {
|
|
593
|
-
--usewc-
|
|
594
|
-
--usewc-
|
|
595
|
-
--usewc-
|
|
596
|
-
--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);
|
|
597
603
|
}
|
|
598
604
|
|
|
599
605
|
&:disabled,
|
|
@@ -603,128 +609,145 @@
|
|
|
603
609
|
}
|
|
604
610
|
|
|
605
611
|
&.primary {
|
|
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-
|
|
620
|
-
--usewc-
|
|
621
|
-
--usewc-
|
|
622
|
-
--usewc-
|
|
623
|
-
--usewc-
|
|
624
|
-
--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);
|
|
625
635
|
}
|
|
626
636
|
|
|
627
637
|
&.danger {
|
|
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-
|
|
641
|
-
--usewc-
|
|
642
|
-
--usewc-
|
|
643
|
-
--usewc-
|
|
644
|
-
--usewc-
|
|
645
|
-
--usewc-
|
|
646
|
-
--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);
|
|
647
661
|
}
|
|
648
662
|
|
|
649
663
|
&.clear {
|
|
650
|
-
--usewc-
|
|
651
|
-
--usewc-
|
|
652
|
-
--usewc-
|
|
653
|
-
--usewc-
|
|
654
|
-
--usewc-
|
|
655
|
-
--usewc-
|
|
656
|
-
--usewc-
|
|
657
|
-
--usewc-
|
|
658
|
-
--usewc-
|
|
659
|
-
--usewc-
|
|
660
|
-
--usewc-
|
|
661
|
-
--usewc-
|
|
662
|
-
--usewc-
|
|
663
|
-
--usewc-
|
|
664
|
-
--usewc-
|
|
665
|
-
--usewc-
|
|
666
|
-
--usewc-
|
|
667
|
-
--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;
|
|
668
686
|
}
|
|
669
687
|
|
|
670
688
|
&.auxiliary {
|
|
671
|
-
--usewc-
|
|
672
|
-
--usewc-
|
|
673
|
-
--usewc-
|
|
674
|
-
--usewc-
|
|
675
|
-
--usewc-
|
|
676
|
-
--usewc-
|
|
677
|
-
--usewc-
|
|
678
|
-
--usewc-
|
|
679
|
-
--usewc-
|
|
680
|
-
--usewc-
|
|
681
|
-
--usewc-
|
|
682
|
-
--usewc-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
--usewc-
|
|
696
|
-
--usewc-
|
|
697
|
-
--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);
|
|
698
721
|
}
|
|
699
722
|
|
|
700
723
|
&.extra-small {
|
|
701
|
-
--usewc-
|
|
702
|
-
--usewc-
|
|
703
|
-
--usewc-
|
|
704
|
-
--usewc-
|
|
705
|
-
--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);
|
|
706
729
|
}
|
|
707
730
|
|
|
708
731
|
&.small {
|
|
709
|
-
--usewc-
|
|
710
|
-
--usewc-
|
|
711
|
-
--usewc-
|
|
712
|
-
--usewc-
|
|
713
|
-
--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);
|
|
714
737
|
}
|
|
715
738
|
|
|
716
739
|
&.large {
|
|
717
|
-
--usewc-
|
|
718
|
-
--usewc-
|
|
719
|
-
--usewc-
|
|
720
|
-
--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);
|
|
721
744
|
}
|
|
722
745
|
|
|
723
746
|
&.extra-large {
|
|
724
|
-
--usewc-
|
|
725
|
-
--usewc-
|
|
726
|
-
--usewc-
|
|
727
|
-
--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);
|
|
728
751
|
}
|
|
729
752
|
}
|
|
730
753
|
|
|
@@ -914,7 +937,7 @@
|
|
|
914
937
|
all: unset;
|
|
915
938
|
display: inline-flex;
|
|
916
939
|
align-items: center;
|
|
917
|
-
gap: var(--usewc-
|
|
940
|
+
gap: var(--usewc-local-button-gap);
|
|
918
941
|
}
|
|
919
942
|
|
|
920
943
|
/* Both the plain and button-styled summary share the same masked-icon disclosure indicator
|
|
@@ -944,7 +967,7 @@
|
|
|
944
967
|
outranks button outright. */
|
|
945
968
|
summary.appearance-button {
|
|
946
969
|
padding-inline-start: calc(
|
|
947
|
-
var(--usewc-
|
|
970
|
+
var(--usewc-local-button-padding-inline) - var(--usewc-layout-dropdown-trigger-icon-size) / 4
|
|
948
971
|
);
|
|
949
972
|
}
|
|
950
973
|
|
|
@@ -2297,9 +2320,9 @@
|
|
|
2297
2320
|
and rounded to the pill's radius, so it reads as part of the chip rather than a stray
|
|
2298
2321
|
button. `1lh` (its own line-height) drives a clean square that scales with the text. */
|
|
2299
2322
|
use-gridcell button {
|
|
2300
|
-
--usewc-
|
|
2301
|
-
--usewc-
|
|
2302
|
-
--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);
|
|
2303
2326
|
|
|
2304
2327
|
inline-size: 1lh;
|
|
2305
2328
|
block-size: 1lh;
|
|
@@ -3129,11 +3152,11 @@
|
|
|
3129
3152
|
& > header > button,
|
|
3130
3153
|
& > header > section:last-child > button {
|
|
3131
3154
|
&.clear:is([aria-label], [aria-labelledby]):last-child {
|
|
3132
|
-
margin-inline-end: calc(-1 * (var(--usewc-
|
|
3155
|
+
margin-inline-end: calc(-1 * (var(--usewc-local-button-padding-inline) + var(--usewc-layout-button-border)));
|
|
3133
3156
|
}
|
|
3134
3157
|
|
|
3135
3158
|
&.clear:is([aria-label], [aria-labelledby]):last-child:has(> use-caret:empty, > :is(svg, .icon):only-child) {
|
|
3136
|
-
margin-inline-end: calc(-1 * (var(--usewc-
|
|
3159
|
+
margin-inline-end: calc(-1 * (var(--usewc-local-button-padding-block) + var(--usewc-layout-button-border)));
|
|
3137
3160
|
}
|
|
3138
3161
|
}
|
|
3139
3162
|
|
|
@@ -50,6 +50,9 @@ holding the current page in its pressed look:
|
|
|
50
50
|
</nav>
|
|
51
51
|
```
|
|
52
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.
|
|
55
|
+
|
|
53
56
|
How the touching sides render is themeable rather than fixed: `--usewc-layout-control-set-gap`
|
|
54
57
|
(default: a negative overlap equal to the child's own border, for a seamless merged line) and
|
|
55
58
|
`--usewc-effect-control-set-border-radius-sequential` (default: `0`, for square touching
|
package/dist/tokens.css
CHANGED
|
@@ -402,8 +402,12 @@
|
|
|
402
402
|
--usewc-color-button-base-text-static-auxiliary: var(--usewc-color-document-text);
|
|
403
403
|
--usewc-color-button-base-text-hover: var(--usewc-color-document-text);
|
|
404
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);
|
|
405
408
|
--usewc-color-button-base-background-hover-auxiliary: oklch(from var(--usewc-color-document-text) l c h / 0.07);
|
|
406
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);
|
|
407
411
|
--usewc-color-button-base-border-hover-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
|
|
408
412
|
/* -- Primary color: derived */
|
|
409
413
|
--usewc-color-button-primary-background-hover: oklch(
|
|
@@ -433,12 +437,18 @@
|
|
|
433
437
|
--usewc-color-button-primary-text-static-auxiliary: var(--usewc-color-button-primary-background-static);
|
|
434
438
|
--usewc-color-button-primary-text-hover: var(--usewc-color-white);
|
|
435
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);
|
|
436
443
|
--usewc-color-button-primary-background-hover-auxiliary: oklch(
|
|
437
444
|
from var(--usewc-color-button-primary-background-static) l c h / 0.09
|
|
438
445
|
);
|
|
439
446
|
--usewc-color-button-primary-background-active-auxiliary: oklch(
|
|
440
447
|
from var(--usewc-color-button-primary-background-static) l c h / 0.15
|
|
441
448
|
);
|
|
449
|
+
--usewc-color-button-primary-background-pressed-auxiliary: var(
|
|
450
|
+
--usewc-color-button-primary-background-active-auxiliary
|
|
451
|
+
);
|
|
442
452
|
--usewc-color-button-primary-border-hover-auxiliary: oklch(
|
|
443
453
|
from var(--usewc-color-button-primary-background-static) l c h / 0.85
|
|
444
454
|
);
|
|
@@ -468,12 +478,18 @@
|
|
|
468
478
|
--usewc-color-button-danger-text-static-auxiliary: var(--usewc-color-button-danger-background-static);
|
|
469
479
|
--usewc-color-button-danger-text-hover: var(--usewc-color-white);
|
|
470
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);
|
|
471
484
|
--usewc-color-button-danger-background-hover-auxiliary: oklch(
|
|
472
485
|
from var(--usewc-color-button-danger-background-static) l c h / 0.09
|
|
473
486
|
);
|
|
474
487
|
--usewc-color-button-danger-background-active-auxiliary: oklch(
|
|
475
488
|
from var(--usewc-color-button-danger-background-static) l c h / 0.15
|
|
476
489
|
);
|
|
490
|
+
--usewc-color-button-danger-background-pressed-auxiliary: var(
|
|
491
|
+
--usewc-color-button-danger-background-active-auxiliary
|
|
492
|
+
);
|
|
477
493
|
--usewc-color-button-danger-border-hover-auxiliary: oklch(
|
|
478
494
|
from var(--usewc-color-button-danger-background-static) l c h / 0.85
|
|
479
495
|
);
|
|
@@ -488,8 +504,12 @@
|
|
|
488
504
|
--usewc-color-button-clear-text-static-auxiliary: var(--usewc-color-document-text);
|
|
489
505
|
--usewc-color-button-clear-text-hover: var(--usewc-color-document-text);
|
|
490
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);
|
|
491
510
|
--usewc-color-button-clear-background-hover-auxiliary: var(--usewc-color-button-clear-background-hover);
|
|
492
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);
|
|
493
513
|
--usewc-color-button-clear-border-hover-auxiliary: var(--usewc-color-gray-500);
|
|
494
514
|
/* -- Shadow color */
|
|
495
515
|
--usewc-color-button-shadow-lightness: 0.25;
|
package/package.json
CHANGED
|
@@ -19,6 +19,18 @@
|
|
|
19
19
|
],
|
|
20
20
|
"references": []
|
|
21
21
|
},
|
|
22
|
+
{
|
|
23
|
+
"name": "use-avatar",
|
|
24
|
+
"description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.\n---\n\n\n### **Slots:**\n - _default_ - The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.\n\n### **CSS Parts:**\n - **initials** - The span that renders the `name` fallback.",
|
|
25
|
+
"attributes": [
|
|
26
|
+
{
|
|
27
|
+
"name": "name",
|
|
28
|
+
"description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
|
|
29
|
+
"values": []
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"references": []
|
|
33
|
+
},
|
|
22
34
|
{
|
|
23
35
|
"name": "use-badge",
|
|
24
36
|
"description": "`use-badge` renders a small indicator anchored to another element's corner, using\n[CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)\ninstead of the classic `position: absolute` + negative-offset trick. This lets the badge live\nanywhere in the DOM rather than being a child of the element it decorates. A badge's shape,\ncolor, and positioning ship built in — reading from the design system's tokens when\n`tokens.css` is loaded, and falling back to sensible defaults otherwise — so no theme is\nrequired to get a working, visible badge.\n\nPoint a badge at its target with the `anchortarget` attribute, set to the target's `id`\n(named to avoid colliding with the `anchor` content attribute HTML is gaining natively):\n\n```html\n<button type=\"button\" id=\"inbox\">Inbox</button>\n<use-badge anchortarget=\"inbox\">99+</use-badge>\n```\n\nThe badge and its anchor must live in the same DOM tree — a badge cannot reach an anchor\ninside another component's shadow root, and an anchor's `anchor-name` set inside a shadow\ntree's stylesheet is not visible here. No positioned ancestor or shared containing block is\nrequired: anchor positioning resolves the badge's location straight from the anchor's own\ngeometry, so the badge can sit anywhere else in the DOM tree.\n\nWithout a resolved anchor — `anchortarget` unset, pointing at a missing id, or `anchorElement`\nnever assigned — the badge has no `:state(anchored)` and renders as a plain inline chip in\nnormal document flow, still using the same color/shape styling.\n\nSome components render their host as `display: contents`, which has no box of its own for CSS\nanchor positioning to resolve against. If the anchor computes a non-empty `--usewc-anchor-name`\ncustom property, the badge uses that dashed-ident as its `position-anchor` directly instead of\ngenerating and writing its own onto the anchor — letting a component publish the name of a\nreal, box-generating part of itself (already established for its own purposes) for badges to\ntarget instead of its host, even though that part lives inside the component's own shadow root.\nThis mechanism is shared with `use-menu`/`use-anchored` via `AnchorController`; components\nwithout a `display: contents` host don't need to publish anything.\n\n**Known Firefox limitation:** anchoring across a shadow root boundary this way — the case\n`--usewc-anchor-name` exists for — is mispositioned in Firefox as of this writing. Verified\ndirectly: `anchor()`'s logical `start`/`end` keywords resolve backwards on both axes\nspecifically for a cross-shadow-root anchor reference, in Firefox only — the same anchor()\ncalls resolve correctly for a same-tree anchor in Firefox, and cross-shadow anchoring resolves\ncorrectly in Chromium and Safari. A badge anchored to a plain element (button, input, anything\nthat isn't itself relying on this escape hatch) is unaffected in every engine, including\nFirefox.\n\n## Side effects\n\nThe badge is a sibling of its anchor rather than a child, so **as a side effect, a badge\nmutates its anchor element**: it appends its own id to the anchor's `aria-describedby`\n(preserving any ids already there, the same way `anchor-name` is appended rather than\nreplaced) to keep its content connected to the anchor for assistive technology. This means a\nbadge's content, or its `aria-label` when set, is announced as part of interacting with the\nanchor, e.g. \"Inbox button, 3\". A `dot` badge has no content of its own, so set `aria-label`\ndirectly on `<use-badge>` for a meaningful description (e.g. `aria-label=\"3 unread messages\"`);\nwithout one, the description contributes nothing and the anchor announces as before.\n\nAvoid adding `aria-hidden` to `<use-badge>` if you rely on this: while the description\ncomputation is specified to still read a hidden node when it's the direct target of\n`aria-describedby`, support for that specific case is inconsistent across browsers and screen\nreaders.\n\nSet `options=\"noaria\"` to opt a badge out of this and leave the anchor's `aria-describedby`\nuntouched, e.g. when the anchor already documents the badge's meaning some other way.\n---\n\n\n### **Slots:**\n - _default_ - Badge content, e.g. a count or short label. Ignored when `dot` is set.",
|
|
@@ -51,18 +63,6 @@
|
|
|
51
63
|
],
|
|
52
64
|
"references": []
|
|
53
65
|
},
|
|
54
|
-
{
|
|
55
|
-
"name": "use-avatar",
|
|
56
|
-
"description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.\n---\n\n\n### **Slots:**\n - _default_ - The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.\n\n### **CSS Parts:**\n - **initials** - The span that renders the `name` fallback.",
|
|
57
|
-
"attributes": [
|
|
58
|
-
{
|
|
59
|
-
"name": "name",
|
|
60
|
-
"description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
|
|
61
|
-
"values": []
|
|
62
|
-
}
|
|
63
|
-
],
|
|
64
|
-
"references": []
|
|
65
|
-
},
|
|
66
66
|
{
|
|
67
67
|
"name": "use-calendarday",
|
|
68
68
|
"description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
|
|
@@ -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. 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\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
|
},
|