use-wc 1.0.0-pre.93 → 1.0.0-pre.95
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 +4 -5
- package/dist/docs/use-pattern.md +1 -1
- package/dist/tokens.css +92 -66
- package/package.json +1 -1
- package/vscode.html-custom-data.json +13 -13
package/custom-elements.json
CHANGED
|
@@ -89,76 +89,6 @@
|
|
|
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
|
-
},
|
|
162
92
|
{
|
|
163
93
|
"kind": "javascript-module",
|
|
164
94
|
"path": "src/elements/use-badge/use-badge.ts",
|
|
@@ -302,6 +232,76 @@
|
|
|
302
232
|
}
|
|
303
233
|
]
|
|
304
234
|
},
|
|
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",
|
|
@@ -4533,7 +4533,7 @@
|
|
|
4533
4533
|
"declarations": [
|
|
4534
4534
|
{
|
|
4535
4535
|
"kind": "class",
|
|
4536
|
-
"description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.
|
|
4536
|
+
"description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.elevated`, `.flush`) are plain classes rather than properties, the same as any\nother themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex\narrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.\n\n```html\n<use-pattern class=\"card\">\n <header>\n <hgroup><h3>Title</h3><p>Subtitle</p></hgroup>\n </header>\n <main><p>Body</p></main>\n <footer><button type=\"button\">Done</button></footer>\n</use-pattern>\n```",
|
|
4537
4537
|
"name": "UsePattern",
|
|
4538
4538
|
"slots": [
|
|
4539
4539
|
{
|
package/dist/design-system.css
CHANGED
|
@@ -3971,8 +3971,8 @@
|
|
|
3971
3971
|
|
|
3972
3972
|
/* Card chrome — the one bit of floating surface treatment that isn't layout, and the only
|
|
3973
3973
|
thing separating `.card` from the other three variants: they arrange regions, this also
|
|
3974
|
-
paints a
|
|
3975
|
-
|
|
3974
|
+
paints a panel. It's flat by default; `.elevated` lifts it with a shadow, for a card that
|
|
3975
|
+
floats above the content around it.
|
|
3976
3976
|
|
|
3977
3977
|
A card nested directly in a `dialog` or `[popover]` skips the chrome: the overlay already
|
|
3978
3978
|
paints a surface, and stacking a second border and shadow inside it reads as a panel within
|
|
@@ -3984,12 +3984,11 @@
|
|
|
3984
3984
|
background: var(--usewc-color-surface-background);
|
|
3985
3985
|
border: var(--usewc-layout-surface-border) solid var(--usewc-color-surface-border);
|
|
3986
3986
|
border-radius: var(--usewc-effect-surface-border-radius);
|
|
3987
|
-
box-shadow: var(--usewc-effect-surface-shadow);
|
|
3988
3987
|
color: var(--usewc-color-document-text);
|
|
3989
3988
|
}
|
|
3990
3989
|
|
|
3991
|
-
use-pattern.card.
|
|
3992
|
-
box-shadow:
|
|
3990
|
+
use-pattern.card.elevated:not(:is(dialog, [popover]) > *) {
|
|
3991
|
+
box-shadow: var(--usewc-effect-surface-shadow);
|
|
3993
3992
|
}
|
|
3994
3993
|
}
|
|
3995
3994
|
|
package/dist/docs/use-pattern.md
CHANGED
|
@@ -6,7 +6,7 @@ message, a media object — styled entirely by the design system's theme layer
|
|
|
6
6
|
exactly as given.
|
|
7
7
|
|
|
8
8
|
Its variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,
|
|
9
|
-
`.compact`, `.
|
|
9
|
+
`.compact`, `.elevated`, `.flush`) are plain classes rather than properties, the same as any
|
|
10
10
|
other themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex
|
|
11
11
|
arrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.
|
|
12
12
|
|
package/dist/tokens.css
CHANGED
|
@@ -79,6 +79,19 @@
|
|
|
79
79
|
--usewc-color-gray-200: oklch(0.917 0.006 264);
|
|
80
80
|
--usewc-color-gray-100: oklch(0.955 0.004 264);
|
|
81
81
|
--usewc-color-gray-50: oklch(0.974 0.003 264);
|
|
82
|
+
--usewc-color-graphite-950: oklch(0.22 0.005 264);
|
|
83
|
+
--usewc-color-graphite-900: oklch(0.25 0.005 264);
|
|
84
|
+
--usewc-color-graphite-850: oklch(0.285 0.005 264);
|
|
85
|
+
--usewc-color-graphite-800: oklch(0.31 0.005 264);
|
|
86
|
+
--usewc-color-graphite-750: oklch(0.35 0.005 264);
|
|
87
|
+
--usewc-color-graphite-700: oklch(0.39 0.005 264);
|
|
88
|
+
--usewc-color-graphite-600: oklch(0.465 0.005 264);
|
|
89
|
+
--usewc-color-graphite-550: oklch(0.505 0.005 264);
|
|
90
|
+
--usewc-color-graphite-500: oklch(0.585 0.005 264);
|
|
91
|
+
--usewc-color-graphite-400: oklch(0.725 0.004 264);
|
|
92
|
+
--usewc-color-graphite-200: oklch(0.885 0.003 264);
|
|
93
|
+
--usewc-color-graphite-100: oklch(0.95 0.002 264);
|
|
94
|
+
--usewc-color-graphite-50: oklch(0.985 0.002 264);
|
|
82
95
|
--usewc-color-blue-900: oklch(0.3 0.115 258);
|
|
83
96
|
--usewc-color-blue-800: oklch(0.395 0.15 258);
|
|
84
97
|
--usewc-color-blue-700: oklch(0.478 0.18 258);
|
|
@@ -348,7 +361,7 @@
|
|
|
348
361
|
/* Button */
|
|
349
362
|
/* - Color */
|
|
350
363
|
/* -- Base color: fills, everything else derives from the fill below */
|
|
351
|
-
--usewc-color-button-base-background-static: var(--usewc-color-
|
|
364
|
+
--usewc-color-button-base-background-static: var(--usewc-color-graphite-50);
|
|
352
365
|
--usewc-color-button-base-background-static-auxiliary: transparent;
|
|
353
366
|
--usewc-color-button-primary-background-static: var(--usewc-color-brand-primary);
|
|
354
367
|
--usewc-color-button-primary-background-static-auxiliary: transparent;
|
|
@@ -422,9 +435,7 @@
|
|
|
422
435
|
from var(--usewc-color-button-primary-background-static)
|
|
423
436
|
calc(l + var(--usewc-effect-button-primary-border-step) * var(--usewc-effect-button-primary-border-direction)) c h
|
|
424
437
|
);
|
|
425
|
-
--usewc-color-button-primary-border-static-auxiliary:
|
|
426
|
-
from var(--usewc-color-button-primary-background-static) l c h / 0.55
|
|
427
|
-
);
|
|
438
|
+
--usewc-color-button-primary-border-static-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
|
|
428
439
|
--usewc-color-button-primary-border-hover: oklch(
|
|
429
440
|
from var(--usewc-color-button-primary-background-hover)
|
|
430
441
|
calc(
|
|
@@ -434,7 +445,9 @@
|
|
|
434
445
|
);
|
|
435
446
|
--usewc-color-button-primary-border-active: var(--usewc-color-button-primary-border-hover);
|
|
436
447
|
--usewc-color-button-primary-text-static: var(--usewc-color-white);
|
|
437
|
-
--usewc-color-button-primary-text-static-auxiliary:
|
|
448
|
+
--usewc-color-button-primary-text-static-auxiliary: oklch(
|
|
449
|
+
from var(--usewc-color-button-primary-background-static) calc(l - 0.07) c h
|
|
450
|
+
);
|
|
438
451
|
--usewc-color-button-primary-text-hover: var(--usewc-color-white);
|
|
439
452
|
--usewc-color-button-primary-text-active: var(--usewc-color-white);
|
|
440
453
|
--usewc-color-button-primary-text-pressed: var(--usewc-color-button-primary-text-active);
|
|
@@ -449,8 +462,10 @@
|
|
|
449
462
|
--usewc-color-button-primary-background-pressed-auxiliary: var(
|
|
450
463
|
--usewc-color-button-primary-background-active-auxiliary
|
|
451
464
|
);
|
|
452
|
-
--usewc-color-button-primary-border-hover-auxiliary:
|
|
453
|
-
|
|
465
|
+
--usewc-color-button-primary-border-hover-auxiliary: color-mix(
|
|
466
|
+
in oklab,
|
|
467
|
+
var(--usewc-color-button-base-border-hover-auxiliary),
|
|
468
|
+
var(--usewc-color-button-primary-text-static-auxiliary) 55%
|
|
454
469
|
);
|
|
455
470
|
/* -- Danger color: derived */
|
|
456
471
|
--usewc-color-button-danger-background-hover: oklch(
|
|
@@ -465,9 +480,7 @@
|
|
|
465
480
|
from var(--usewc-color-button-danger-background-static)
|
|
466
481
|
calc(l + var(--usewc-effect-button-danger-border-step) * var(--usewc-effect-button-danger-border-direction)) c h
|
|
467
482
|
);
|
|
468
|
-
--usewc-color-button-danger-border-static-auxiliary:
|
|
469
|
-
from var(--usewc-color-button-danger-background-static) l c h / 0.55
|
|
470
|
-
);
|
|
483
|
+
--usewc-color-button-danger-border-static-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
|
|
471
484
|
--usewc-color-button-danger-border-hover: oklch(
|
|
472
485
|
from var(--usewc-color-button-danger-background-hover)
|
|
473
486
|
calc(l + var(--usewc-effect-button-danger-border-step-hover) * var(--usewc-effect-button-danger-border-direction))
|
|
@@ -475,7 +488,9 @@
|
|
|
475
488
|
);
|
|
476
489
|
--usewc-color-button-danger-border-active: var(--usewc-color-button-danger-border-hover);
|
|
477
490
|
--usewc-color-button-danger-text-static: var(--usewc-color-white);
|
|
478
|
-
--usewc-color-button-danger-text-static-auxiliary:
|
|
491
|
+
--usewc-color-button-danger-text-static-auxiliary: oklch(
|
|
492
|
+
from var(--usewc-color-button-danger-background-static) calc(l - 0.07) c h
|
|
493
|
+
);
|
|
479
494
|
--usewc-color-button-danger-text-hover: var(--usewc-color-white);
|
|
480
495
|
--usewc-color-button-danger-text-active: var(--usewc-color-white);
|
|
481
496
|
--usewc-color-button-danger-text-pressed: var(--usewc-color-button-danger-text-active);
|
|
@@ -490,8 +505,10 @@
|
|
|
490
505
|
--usewc-color-button-danger-background-pressed-auxiliary: var(
|
|
491
506
|
--usewc-color-button-danger-background-active-auxiliary
|
|
492
507
|
);
|
|
493
|
-
--usewc-color-button-danger-border-hover-auxiliary:
|
|
494
|
-
|
|
508
|
+
--usewc-color-button-danger-border-hover-auxiliary: color-mix(
|
|
509
|
+
in oklab,
|
|
510
|
+
var(--usewc-color-button-base-border-hover-auxiliary),
|
|
511
|
+
var(--usewc-color-button-danger-text-static-auxiliary) 55%
|
|
495
512
|
);
|
|
496
513
|
/* -- Cancel color: no fill to derive from, so it tints from the ink color instead */
|
|
497
514
|
--usewc-color-button-clear-background-hover: oklch(from var(--usewc-color-document-text) l c h / 0.07);
|
|
@@ -633,7 +650,7 @@
|
|
|
633
650
|
|
|
634
651
|
/* Grid — `.table` is the default treatment a bare `use-grid` gets; `.chips` and `.list`
|
|
635
652
|
(the latter still being defined) opt into their own layouts instead. */
|
|
636
|
-
--usewc-color-grid-border: var(--usewc-color-
|
|
653
|
+
--usewc-color-grid-border: var(--usewc-color-surface-border);
|
|
637
654
|
/* The table itself and its header paint no fill — only the hover and selected row bands do. */
|
|
638
655
|
--usewc-color-grid-background: transparent;
|
|
639
656
|
--usewc-color-grid-header-background: transparent;
|
|
@@ -733,7 +750,7 @@
|
|
|
733
750
|
--usewc-layout-popover-menu-border: var(--usewc-space-1-relative);
|
|
734
751
|
--usewc-effect-popover-menu-border-style: var(--usewc-effect-border-solid);
|
|
735
752
|
--usewc-color-popover-menu-background: var(--usewc-color-canvas-background);
|
|
736
|
-
--usewc-color-popover-menu-border: var(--usewc-color-
|
|
753
|
+
--usewc-color-popover-menu-border: var(--usewc-color-surface-border);
|
|
737
754
|
--usewc-effect-popover-menu-border-radius: var(--usewc-effect-border-radius-8);
|
|
738
755
|
--usewc-effect-popover-menu-shadow: var(--usewc-effect-surface-shadow);
|
|
739
756
|
--usewc-font-popover-menu-header-size: var(--usewc-font-size-14);
|
|
@@ -892,7 +909,7 @@
|
|
|
892
909
|
`dialog`/`[popover]` keeps from the viewport edge when sizing itself, not region padding —
|
|
893
910
|
the regions inside one come from whichever `use-pattern` variant is nested there. */
|
|
894
911
|
--usewc-color-surface-background: var(--usewc-color-canvas-background);
|
|
895
|
-
--usewc-color-surface-border: var(--usewc-color-
|
|
912
|
+
--usewc-color-surface-border: var(--usewc-color-gray-200);
|
|
896
913
|
--usewc-color-surface-backdrop: oklch(0% 0 0 / 0.4);
|
|
897
914
|
--usewc-layout-surface-anchor-offset: var(--usewc-space-4);
|
|
898
915
|
--usewc-layout-surface-border: var(--usewc-space-1);
|
|
@@ -905,30 +922,33 @@
|
|
|
905
922
|
|
|
906
923
|
@media (prefers-color-scheme: dark) {
|
|
907
924
|
:root {
|
|
908
|
-
--usewc-color-document-text: var(--usewc-color-
|
|
909
|
-
--usewc-color-document-text-muted: var(--usewc-color-
|
|
910
|
-
--usewc-color-document-background: var(--usewc-color-
|
|
911
|
-
--usewc-color-canvas-background: var(--usewc-color-
|
|
925
|
+
--usewc-color-document-text: var(--usewc-color-graphite-200);
|
|
926
|
+
--usewc-color-document-text-muted: var(--usewc-color-graphite-400);
|
|
927
|
+
--usewc-color-document-background: var(--usewc-color-graphite-900);
|
|
928
|
+
--usewc-color-canvas-background: var(--usewc-color-graphite-850);
|
|
912
929
|
/* The primary/danger fill stays the same shade in both themes — only the
|
|
913
930
|
focus ring lightens in the dark. */
|
|
914
931
|
--usewc-color-outline: var(--usewc-color-blue-400);
|
|
915
|
-
--usewc-color-prose-code-background: var(--usewc-color-
|
|
916
|
-
--usewc-color-input-background-static:
|
|
917
|
-
--usewc-color-input-border-static: var(--usewc-color-
|
|
918
|
-
--usewc-color-input-text-static: var(--usewc-color-
|
|
919
|
-
--usewc-color-input-text-placeholder: var(--usewc-color-
|
|
920
|
-
--usewc-color-form-label-text: var(--usewc-color-
|
|
921
|
-
--usewc-color-form-helper-text: var(--usewc-color-
|
|
932
|
+
--usewc-color-prose-code-background: var(--usewc-color-graphite-950);
|
|
933
|
+
--usewc-color-input-background-static: var(--usewc-color-graphite-950);
|
|
934
|
+
--usewc-color-input-border-static: var(--usewc-color-graphite-700);
|
|
935
|
+
--usewc-color-input-text-static: var(--usewc-color-graphite-200);
|
|
936
|
+
--usewc-color-input-text-placeholder: var(--usewc-color-graphite-500);
|
|
937
|
+
--usewc-color-form-label-text: var(--usewc-color-graphite-100);
|
|
938
|
+
--usewc-color-form-helper-text: var(--usewc-color-graphite-400);
|
|
922
939
|
--usewc-color-form-helper-text-invalid: var(--usewc-color-red-400);
|
|
923
940
|
/* A dark control is lighter than what surrounds it, so interaction has to
|
|
924
941
|
move lightness the opposite way, and its border has to run lighter
|
|
925
|
-
than its own face rather than darker.
|
|
926
|
-
|
|
942
|
+
than its own face rather than darker. It also sits a full step above
|
|
943
|
+
the card surface, since dark shadows barely read and the fill alone has
|
|
944
|
+
to separate the two. */
|
|
945
|
+
--usewc-color-button-base-background-static: var(--usewc-color-graphite-750);
|
|
946
|
+
--usewc-color-surface-border: var(--usewc-color-graphite-700);
|
|
927
947
|
--usewc-effect-button-base-shift: 1;
|
|
928
948
|
--usewc-effect-button-base-border-direction: 1;
|
|
929
|
-
--usewc-effect-button-base-border-step: 0.
|
|
930
|
-
--usewc-effect-button-base-border-step-hover: 0.
|
|
931
|
-
--usewc-color-button-base-border-static-auxiliary: var(--usewc-color-
|
|
949
|
+
--usewc-effect-button-base-border-step: 0.085;
|
|
950
|
+
--usewc-effect-button-base-border-step-hover: 0.11;
|
|
951
|
+
--usewc-color-button-base-border-static-auxiliary: var(--usewc-color-graphite-700);
|
|
932
952
|
/* Solid fills are already lighter than the dark surface, so they keep the
|
|
933
953
|
light-mode direction — darkening still reads as pressing toward it —
|
|
934
954
|
but need a shallower border step or the derived border overpowers the
|
|
@@ -937,65 +957,71 @@
|
|
|
937
957
|
--usewc-effect-button-primary-border-step-hover: 0.1;
|
|
938
958
|
--usewc-effect-button-danger-border-step: 0.08;
|
|
939
959
|
--usewc-effect-button-danger-border-step-hover: 0.1;
|
|
940
|
-
/* A low-alpha wash of the fill barely lifts off a
|
|
960
|
+
/* A low-alpha wash of the fill barely lifts off a dark page — it
|
|
941
961
|
needs more alpha here than on white to read as a hover state at all. */
|
|
942
962
|
--usewc-color-button-primary-background-hover-auxiliary: oklch(
|
|
943
|
-
from var(--usewc-color-button-primary-background-static) l c h / 0.
|
|
963
|
+
from var(--usewc-color-button-primary-background-static) l c h / 0.14
|
|
944
964
|
);
|
|
945
965
|
--usewc-color-button-primary-background-active-auxiliary: oklch(
|
|
946
|
-
from var(--usewc-color-button-primary-background-static) l c h / 0.
|
|
947
|
-
);
|
|
948
|
-
--usewc-color-button-primary-border-static-auxiliary: oklch(
|
|
949
|
-
from var(--usewc-color-button-primary-background-static) l c h / 0.65
|
|
950
|
-
);
|
|
951
|
-
--usewc-color-button-primary-border-hover-auxiliary: oklch(
|
|
952
|
-
from var(--usewc-color-button-primary-background-static) l c h / 0.9
|
|
966
|
+
from var(--usewc-color-button-primary-background-static) l c h / 0.2
|
|
953
967
|
);
|
|
954
968
|
--usewc-color-button-danger-background-hover-auxiliary: oklch(
|
|
955
|
-
from var(--usewc-color-button-danger-background-static) l c h / 0.
|
|
969
|
+
from var(--usewc-color-button-danger-background-static) l c h / 0.14
|
|
956
970
|
);
|
|
957
971
|
--usewc-color-button-danger-background-active-auxiliary: oklch(
|
|
958
|
-
from var(--usewc-color-button-danger-background-static) l c h / 0.
|
|
972
|
+
from var(--usewc-color-button-danger-background-static) l c h / 0.2
|
|
959
973
|
);
|
|
960
|
-
--usewc-color-button-
|
|
961
|
-
from var(--usewc-color-button-
|
|
974
|
+
--usewc-color-button-primary-text-static-auxiliary: oklch(
|
|
975
|
+
from var(--usewc-color-button-primary-background-static) 0.72 0.19 h
|
|
962
976
|
);
|
|
963
|
-
--usewc-color-button-danger-
|
|
964
|
-
from var(--usewc-color-button-danger-background-static)
|
|
977
|
+
--usewc-color-button-danger-text-static-auxiliary: oklch(
|
|
978
|
+
from var(--usewc-color-button-danger-background-static) 0.72 0.19 h
|
|
965
979
|
);
|
|
966
|
-
--usewc-color-button-clear-border-static-auxiliary: var(--usewc-color-
|
|
967
|
-
--usewc-color-button-clear-border-hover-auxiliary: var(--usewc-color-
|
|
980
|
+
--usewc-color-button-clear-border-static-auxiliary: var(--usewc-color-graphite-700);
|
|
981
|
+
--usewc-color-button-clear-border-hover-auxiliary: var(--usewc-color-graphite-600);
|
|
968
982
|
--usewc-color-button-shadow-lightness: 0;
|
|
969
983
|
--usewc-color-button-shadow-chroma: 0;
|
|
970
|
-
--usewc-color-button-shadow-alpha: 0.
|
|
984
|
+
--usewc-color-button-shadow-alpha: 0.22;
|
|
971
985
|
--usewc-color-button-shadow-inset: oklch(from var(--usewc-color-white) l c h / 0.08);
|
|
972
986
|
--usewc-color-link-text-static: var(--usewc-color-blue-400);
|
|
973
|
-
--usewc-color-link-text-hover: var(--usewc-color-blue-
|
|
974
|
-
--usewc-color-link-text-active: var(--usewc-color-blue-
|
|
987
|
+
--usewc-color-link-text-hover: var(--usewc-color-blue-300);
|
|
988
|
+
--usewc-color-link-text-active: var(--usewc-color-blue-300);
|
|
989
|
+
--usewc-color-link-text-visited: var(--usewc-color-indigo-400);
|
|
990
|
+
--usewc-color-link-text-visited-hover: var(--usewc-color-indigo-300);
|
|
991
|
+
--usewc-color-link-text-visited-active: var(--usewc-color-indigo-300);
|
|
992
|
+
--usewc-color-sidebar-item-text-active: var(--usewc-color-blue-400);
|
|
993
|
+
--usewc-color-sidebar-item-text-current: var(--usewc-color-blue-400);
|
|
994
|
+
--usewc-color-sidebar-item-background-current: oklch(from var(--usewc-color-blue-400) l c h / 0.14);
|
|
975
995
|
--usewc-effect-link-decoration-opacity: 0.5;
|
|
976
996
|
--usewc-color-code-text: var(--usewc-color-red-200);
|
|
977
|
-
--usewc-color-input-border-hover: var(--usewc-color-
|
|
997
|
+
--usewc-color-input-border-hover: var(--usewc-color-graphite-600);
|
|
978
998
|
--usewc-color-input-border-focus: var(--usewc-color-blue-400);
|
|
979
999
|
--usewc-color-input-border-invalid: var(--usewc-color-red-300);
|
|
980
|
-
--usewc-color-input-segment-background-focus: var(--usewc-color-blue-
|
|
981
|
-
--usewc-color-input-segment-text-focus: var(--usewc-color-
|
|
1000
|
+
--usewc-color-input-segment-background-focus: oklch(from var(--usewc-color-blue-400) l c h / 0.3);
|
|
1001
|
+
--usewc-color-input-segment-text-focus: var(--usewc-color-graphite-100);
|
|
982
1002
|
--usewc-color-range-thumb-background-static: var(--usewc-color-blue-500);
|
|
983
1003
|
--usewc-color-range-thumb-background-hover: var(--usewc-color-blue-400);
|
|
984
1004
|
--usewc-color-range-thumb-background-active: var(--usewc-color-blue-300);
|
|
985
|
-
--usewc-color-range-track-background-static: var(--usewc-color-
|
|
986
|
-
--usewc-color-range-track-border-static: var(--usewc-color-
|
|
987
|
-
--usewc-color-range-track-border-hover: var(--usewc-color-
|
|
988
|
-
--usewc-color-selector-background-
|
|
1005
|
+
--usewc-color-range-track-background-static: var(--usewc-color-graphite-950);
|
|
1006
|
+
--usewc-color-range-track-border-static: var(--usewc-color-graphite-700);
|
|
1007
|
+
--usewc-color-range-track-border-hover: var(--usewc-color-graphite-600);
|
|
1008
|
+
--usewc-color-selector-background-focus: var(--usewc-color-graphite-800);
|
|
1009
|
+
--usewc-color-selector-background-hover: oklch(from var(--usewc-color-graphite-700) l c h / 0.5);
|
|
1010
|
+
--usewc-color-selector-border-static: var(--usewc-color-graphite-550);
|
|
1011
|
+
--usewc-color-selector-border-hover: var(--usewc-color-graphite-400);
|
|
989
1012
|
--usewc-effect-select-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgb(229,231,235)' /%3E%3C/svg%3E");
|
|
990
1013
|
--usewc-color-surface-backdrop: oklch(0% 0 0 / 0.6);
|
|
991
|
-
|
|
1014
|
+
--usewc-effect-surface-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 8px 24px oklch(0% 0 0 / 0.32);
|
|
1015
|
+
--usewc-color-popover-menu-header-text: var(--usewc-color-graphite-400);
|
|
1016
|
+
--usewc-color-popover-menu-shortcut: var(--usewc-color-graphite-400);
|
|
1017
|
+
/* "Super light" can't float up on a dark page — hold the primary's hue and chroma
|
|
992
1018
|
but drop the lightness so the tint reads as a dark primary wash instead. */
|
|
993
|
-
--usewc-color-grid-row-background-selected: oklch(from var(--usewc-color-brand-primary) 0.
|
|
994
|
-
--usewc-color-grid-row-background-selected-hover: oklch(from var(--usewc-color-brand-primary) 0.
|
|
995
|
-
--usewc-color-grid-row-background-hover: oklch(from var(--usewc-color-
|
|
996
|
-
--usewc-color-grid-header-text: var(--usewc-color-
|
|
997
|
-
--usewc-color-avatar-background: var(--usewc-color-
|
|
998
|
-
--usewc-color-avatar-text: var(--usewc-color-
|
|
1019
|
+
--usewc-color-grid-row-background-selected: oklch(from var(--usewc-color-brand-primary) 0.34 0.055 h);
|
|
1020
|
+
--usewc-color-grid-row-background-selected-hover: oklch(from var(--usewc-color-brand-primary) 0.38 0.065 h);
|
|
1021
|
+
--usewc-color-grid-row-background-hover: oklch(from var(--usewc-color-graphite-700) l c h / 0.35);
|
|
1022
|
+
--usewc-color-grid-header-text: var(--usewc-color-graphite-400);
|
|
1023
|
+
--usewc-color-avatar-background: var(--usewc-color-graphite-700);
|
|
1024
|
+
--usewc-color-avatar-text: var(--usewc-color-graphite-200);
|
|
999
1025
|
/* A cell's own text is usually light against a dark page, so hover/active need to lighten it
|
|
1000
1026
|
further instead of darkening it toward the background — the opposite direction from light
|
|
1001
1027
|
mode, same as the sign flip below. */
|
package/package.json
CHANGED
|
@@ -19,18 +19,6 @@
|
|
|
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
|
-
},
|
|
34
22
|
{
|
|
35
23
|
"name": "use-badge",
|
|
36
24
|
"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.",
|
|
@@ -63,6 +51,18 @@
|
|
|
63
51
|
],
|
|
64
52
|
"references": []
|
|
65
53
|
},
|
|
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)",
|
|
@@ -479,7 +479,7 @@
|
|
|
479
479
|
},
|
|
480
480
|
{
|
|
481
481
|
"name": "use-pattern",
|
|
482
|
-
"description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.
|
|
482
|
+
"description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.elevated`, `.flush`) are plain classes rather than properties, the same as any\nother themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex\narrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.\n\n```html\n<use-pattern class=\"card\">\n <header>\n <hgroup><h3>Title</h3><p>Subtitle</p></hgroup>\n </header>\n <main><p>Body</p></main>\n <footer><button type=\"button\">Done</button></footer>\n</use-pattern>\n```\n---\n\n\n### **Slots:**\n - _default_ - The pattern's regions — `figure`, `header`, `main`, `footer`, or any other element.",
|
|
483
483
|
"attributes": [],
|
|
484
484
|
"references": []
|
|
485
485
|
},
|