use-wc 1.0.0-pre.76 → 1.0.0-pre.78
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 +221 -209
- package/dist/design-system.css +105 -3
- package/dist/docs/use-grid.md +1 -0
- package/dist/tokens.css +23 -0
- package/dist/use-wc.d.mts +1 -0
- package/dist/use-wc.mjs +6 -3
- package/package.json +1 -1
- package/vscode.html-custom-data.json +30 -30
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",
|
|
@@ -1841,88 +1841,6 @@
|
|
|
1841
1841
|
}
|
|
1842
1842
|
]
|
|
1843
1843
|
},
|
|
1844
|
-
{
|
|
1845
|
-
"kind": "javascript-module",
|
|
1846
|
-
"path": "src/elements/use-focusgroup/use-focusgroup.ts",
|
|
1847
|
-
"declarations": [
|
|
1848
|
-
{
|
|
1849
|
-
"kind": "class",
|
|
1850
|
-
"description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)",
|
|
1851
|
-
"name": "UseFocusgroup",
|
|
1852
|
-
"members": [
|
|
1853
|
-
{
|
|
1854
|
-
"kind": "field",
|
|
1855
|
-
"name": "features",
|
|
1856
|
-
"type": {
|
|
1857
|
-
"text": "string"
|
|
1858
|
-
},
|
|
1859
|
-
"default": "\"\"",
|
|
1860
|
-
"description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
|
|
1861
|
-
"attribute": "features"
|
|
1862
|
-
},
|
|
1863
|
-
{
|
|
1864
|
-
"kind": "field",
|
|
1865
|
-
"name": "focusedElement",
|
|
1866
|
-
"type": {
|
|
1867
|
-
"text": "HTMLElement | null"
|
|
1868
|
-
},
|
|
1869
|
-
"default": "null",
|
|
1870
|
-
"description": "The most recently focused element in the focusgroup."
|
|
1871
|
-
},
|
|
1872
|
-
{
|
|
1873
|
-
"kind": "method",
|
|
1874
|
-
"name": "focus"
|
|
1875
|
-
},
|
|
1876
|
-
{
|
|
1877
|
-
"kind": "field",
|
|
1878
|
-
"name": "promoted",
|
|
1879
|
-
"description": "Whether the use-focusgroup is promoted to the top of the tab order inside a parent use-focusgroup.",
|
|
1880
|
-
"readonly": true,
|
|
1881
|
-
"default": "false"
|
|
1882
|
-
},
|
|
1883
|
-
{
|
|
1884
|
-
"kind": "method",
|
|
1885
|
-
"name": "promote",
|
|
1886
|
-
"description": "Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup."
|
|
1887
|
-
}
|
|
1888
|
-
],
|
|
1889
|
-
"attributes": [
|
|
1890
|
-
{
|
|
1891
|
-
"name": "features",
|
|
1892
|
-
"type": {
|
|
1893
|
-
"text": "string"
|
|
1894
|
-
},
|
|
1895
|
-
"default": "\"\"",
|
|
1896
|
-
"description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
|
|
1897
|
-
"fieldName": "features"
|
|
1898
|
-
}
|
|
1899
|
-
],
|
|
1900
|
-
"superclass": {
|
|
1901
|
-
"name": "HTMLElement"
|
|
1902
|
-
},
|
|
1903
|
-
"tagName": "use-focusgroup",
|
|
1904
|
-
"customElement": true
|
|
1905
|
-
}
|
|
1906
|
-
],
|
|
1907
|
-
"exports": [
|
|
1908
|
-
{
|
|
1909
|
-
"kind": "js",
|
|
1910
|
-
"name": "UseFocusgroup",
|
|
1911
|
-
"declaration": {
|
|
1912
|
-
"name": "UseFocusgroup",
|
|
1913
|
-
"module": "src/elements/use-focusgroup/use-focusgroup.ts"
|
|
1914
|
-
}
|
|
1915
|
-
},
|
|
1916
|
-
{
|
|
1917
|
-
"kind": "custom-element-definition",
|
|
1918
|
-
"name": "use-focusgroup",
|
|
1919
|
-
"declaration": {
|
|
1920
|
-
"name": "UseFocusgroup",
|
|
1921
|
-
"module": "src/elements/use-focusgroup/use-focusgroup.ts"
|
|
1922
|
-
}
|
|
1923
|
-
}
|
|
1924
|
-
]
|
|
1925
|
-
},
|
|
1926
1844
|
{
|
|
1927
1845
|
"kind": "javascript-module",
|
|
1928
1846
|
"path": "src/elements/use-duration-input/use-duration-input.ts",
|
|
@@ -2237,6 +2155,88 @@
|
|
|
2237
2155
|
}
|
|
2238
2156
|
]
|
|
2239
2157
|
},
|
|
2158
|
+
{
|
|
2159
|
+
"kind": "javascript-module",
|
|
2160
|
+
"path": "src/elements/use-focusgroup/use-focusgroup.ts",
|
|
2161
|
+
"declarations": [
|
|
2162
|
+
{
|
|
2163
|
+
"kind": "class",
|
|
2164
|
+
"description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)",
|
|
2165
|
+
"name": "UseFocusgroup",
|
|
2166
|
+
"members": [
|
|
2167
|
+
{
|
|
2168
|
+
"kind": "field",
|
|
2169
|
+
"name": "features",
|
|
2170
|
+
"type": {
|
|
2171
|
+
"text": "string"
|
|
2172
|
+
},
|
|
2173
|
+
"default": "\"\"",
|
|
2174
|
+
"description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
|
|
2175
|
+
"attribute": "features"
|
|
2176
|
+
},
|
|
2177
|
+
{
|
|
2178
|
+
"kind": "field",
|
|
2179
|
+
"name": "focusedElement",
|
|
2180
|
+
"type": {
|
|
2181
|
+
"text": "HTMLElement | null"
|
|
2182
|
+
},
|
|
2183
|
+
"default": "null",
|
|
2184
|
+
"description": "The most recently focused element in the focusgroup."
|
|
2185
|
+
},
|
|
2186
|
+
{
|
|
2187
|
+
"kind": "method",
|
|
2188
|
+
"name": "focus"
|
|
2189
|
+
},
|
|
2190
|
+
{
|
|
2191
|
+
"kind": "field",
|
|
2192
|
+
"name": "promoted",
|
|
2193
|
+
"description": "Whether the use-focusgroup is promoted to the top of the tab order inside a parent use-focusgroup.",
|
|
2194
|
+
"readonly": true,
|
|
2195
|
+
"default": "false"
|
|
2196
|
+
},
|
|
2197
|
+
{
|
|
2198
|
+
"kind": "method",
|
|
2199
|
+
"name": "promote",
|
|
2200
|
+
"description": "Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup."
|
|
2201
|
+
}
|
|
2202
|
+
],
|
|
2203
|
+
"attributes": [
|
|
2204
|
+
{
|
|
2205
|
+
"name": "features",
|
|
2206
|
+
"type": {
|
|
2207
|
+
"text": "string"
|
|
2208
|
+
},
|
|
2209
|
+
"default": "\"\"",
|
|
2210
|
+
"description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
|
|
2211
|
+
"fieldName": "features"
|
|
2212
|
+
}
|
|
2213
|
+
],
|
|
2214
|
+
"superclass": {
|
|
2215
|
+
"name": "HTMLElement"
|
|
2216
|
+
},
|
|
2217
|
+
"tagName": "use-focusgroup",
|
|
2218
|
+
"customElement": true
|
|
2219
|
+
}
|
|
2220
|
+
],
|
|
2221
|
+
"exports": [
|
|
2222
|
+
{
|
|
2223
|
+
"kind": "js",
|
|
2224
|
+
"name": "UseFocusgroup",
|
|
2225
|
+
"declaration": {
|
|
2226
|
+
"name": "UseFocusgroup",
|
|
2227
|
+
"module": "src/elements/use-focusgroup/use-focusgroup.ts"
|
|
2228
|
+
}
|
|
2229
|
+
},
|
|
2230
|
+
{
|
|
2231
|
+
"kind": "custom-element-definition",
|
|
2232
|
+
"name": "use-focusgroup",
|
|
2233
|
+
"declaration": {
|
|
2234
|
+
"name": "UseFocusgroup",
|
|
2235
|
+
"module": "src/elements/use-focusgroup/use-focusgroup.ts"
|
|
2236
|
+
}
|
|
2237
|
+
}
|
|
2238
|
+
]
|
|
2239
|
+
},
|
|
2240
2240
|
{
|
|
2241
2241
|
"kind": "javascript-module",
|
|
2242
2242
|
"path": "src/elements/use-grid/constants.ts",
|
|
@@ -2440,6 +2440,18 @@
|
|
|
2440
2440
|
"type": {
|
|
2441
2441
|
"text": "string[] | string | null"
|
|
2442
2442
|
}
|
|
2443
|
+
},
|
|
2444
|
+
{
|
|
2445
|
+
"kind": "method",
|
|
2446
|
+
"name": "claimRovingTabStop",
|
|
2447
|
+
"parameters": [
|
|
2448
|
+
{
|
|
2449
|
+
"name": "cell",
|
|
2450
|
+
"type": {
|
|
2451
|
+
"text": "HTMLElement"
|
|
2452
|
+
}
|
|
2453
|
+
}
|
|
2454
|
+
]
|
|
2443
2455
|
}
|
|
2444
2456
|
],
|
|
2445
2457
|
"attributes": [
|
|
@@ -4016,6 +4028,63 @@
|
|
|
4016
4028
|
}
|
|
4017
4029
|
]
|
|
4018
4030
|
},
|
|
4031
|
+
{
|
|
4032
|
+
"kind": "javascript-module",
|
|
4033
|
+
"path": "src/elements/use-scrollarea/index.ts",
|
|
4034
|
+
"declarations": [],
|
|
4035
|
+
"exports": [
|
|
4036
|
+
{
|
|
4037
|
+
"kind": "js",
|
|
4038
|
+
"name": "UseScrollarea",
|
|
4039
|
+
"declaration": {
|
|
4040
|
+
"name": "UseScrollarea",
|
|
4041
|
+
"module": "./use-scrollarea"
|
|
4042
|
+
}
|
|
4043
|
+
}
|
|
4044
|
+
]
|
|
4045
|
+
},
|
|
4046
|
+
{
|
|
4047
|
+
"kind": "javascript-module",
|
|
4048
|
+
"path": "src/elements/use-scrollarea/use-scrollarea.ts",
|
|
4049
|
+
"declarations": [
|
|
4050
|
+
{
|
|
4051
|
+
"kind": "class",
|
|
4052
|
+
"description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)",
|
|
4053
|
+
"name": "UseScrollarea",
|
|
4054
|
+
"slots": [
|
|
4055
|
+
{
|
|
4056
|
+
"description": "Scrollable content",
|
|
4057
|
+
"name": ""
|
|
4058
|
+
}
|
|
4059
|
+
],
|
|
4060
|
+
"members": [],
|
|
4061
|
+
"superclass": {
|
|
4062
|
+
"name": "LitElement",
|
|
4063
|
+
"package": "lit"
|
|
4064
|
+
},
|
|
4065
|
+
"tagName": "use-scrollarea",
|
|
4066
|
+
"customElement": true
|
|
4067
|
+
}
|
|
4068
|
+
],
|
|
4069
|
+
"exports": [
|
|
4070
|
+
{
|
|
4071
|
+
"kind": "js",
|
|
4072
|
+
"name": "UseScrollarea",
|
|
4073
|
+
"declaration": {
|
|
4074
|
+
"name": "UseScrollarea",
|
|
4075
|
+
"module": "src/elements/use-scrollarea/use-scrollarea.ts"
|
|
4076
|
+
}
|
|
4077
|
+
},
|
|
4078
|
+
{
|
|
4079
|
+
"kind": "custom-element-definition",
|
|
4080
|
+
"name": "use-scrollarea",
|
|
4081
|
+
"declaration": {
|
|
4082
|
+
"name": "UseScrollarea",
|
|
4083
|
+
"module": "src/elements/use-scrollarea/use-scrollarea.ts"
|
|
4084
|
+
}
|
|
4085
|
+
}
|
|
4086
|
+
]
|
|
4087
|
+
},
|
|
4019
4088
|
{
|
|
4020
4089
|
"kind": "javascript-module",
|
|
4021
4090
|
"path": "src/elements/use-time-input/use-time-input.ts",
|
|
@@ -4281,63 +4350,6 @@
|
|
|
4281
4350
|
}
|
|
4282
4351
|
]
|
|
4283
4352
|
},
|
|
4284
|
-
{
|
|
4285
|
-
"kind": "javascript-module",
|
|
4286
|
-
"path": "src/elements/use-scrollarea/index.ts",
|
|
4287
|
-
"declarations": [],
|
|
4288
|
-
"exports": [
|
|
4289
|
-
{
|
|
4290
|
-
"kind": "js",
|
|
4291
|
-
"name": "UseScrollarea",
|
|
4292
|
-
"declaration": {
|
|
4293
|
-
"name": "UseScrollarea",
|
|
4294
|
-
"module": "./use-scrollarea"
|
|
4295
|
-
}
|
|
4296
|
-
}
|
|
4297
|
-
]
|
|
4298
|
-
},
|
|
4299
|
-
{
|
|
4300
|
-
"kind": "javascript-module",
|
|
4301
|
-
"path": "src/elements/use-scrollarea/use-scrollarea.ts",
|
|
4302
|
-
"declarations": [
|
|
4303
|
-
{
|
|
4304
|
-
"kind": "class",
|
|
4305
|
-
"description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)",
|
|
4306
|
-
"name": "UseScrollarea",
|
|
4307
|
-
"slots": [
|
|
4308
|
-
{
|
|
4309
|
-
"description": "Scrollable content",
|
|
4310
|
-
"name": ""
|
|
4311
|
-
}
|
|
4312
|
-
],
|
|
4313
|
-
"members": [],
|
|
4314
|
-
"superclass": {
|
|
4315
|
-
"name": "LitElement",
|
|
4316
|
-
"package": "lit"
|
|
4317
|
-
},
|
|
4318
|
-
"tagName": "use-scrollarea",
|
|
4319
|
-
"customElement": true
|
|
4320
|
-
}
|
|
4321
|
-
],
|
|
4322
|
-
"exports": [
|
|
4323
|
-
{
|
|
4324
|
-
"kind": "js",
|
|
4325
|
-
"name": "UseScrollarea",
|
|
4326
|
-
"declaration": {
|
|
4327
|
-
"name": "UseScrollarea",
|
|
4328
|
-
"module": "src/elements/use-scrollarea/use-scrollarea.ts"
|
|
4329
|
-
}
|
|
4330
|
-
},
|
|
4331
|
-
{
|
|
4332
|
-
"kind": "custom-element-definition",
|
|
4333
|
-
"name": "use-scrollarea",
|
|
4334
|
-
"declaration": {
|
|
4335
|
-
"name": "UseScrollarea",
|
|
4336
|
-
"module": "src/elements/use-scrollarea/use-scrollarea.ts"
|
|
4337
|
-
}
|
|
4338
|
-
}
|
|
4339
|
-
]
|
|
4340
|
-
},
|
|
4341
4353
|
{
|
|
4342
4354
|
"kind": "javascript-module",
|
|
4343
4355
|
"path": "src/elements/use-tree/use-tree.ts",
|
package/dist/design-system.css
CHANGED
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
--usewc-local-link-decoration-line: var(--usewc-effect-link-chrome-text-decoration);
|
|
323
323
|
}
|
|
324
324
|
|
|
325
|
-
:
|
|
325
|
+
:where(a:not([class*="appearance-"]), .appearance-a) {
|
|
326
326
|
&:where(:not(a)) {
|
|
327
327
|
all: unset;
|
|
328
328
|
}
|
|
@@ -1429,8 +1429,10 @@
|
|
|
1429
1429
|
blue-600/700/800 — `currentColor` alone can't step down like that, so each state is the
|
|
1430
1430
|
cell's own color with its lightness nudged instead. `link.css`'s own decoration-color rule
|
|
1431
1431
|
already derives from `--usewc-local-link-text`, so the underline follows every step here for
|
|
1432
|
-
free, staying a lighter tint of whichever shade the text itself is in.
|
|
1433
|
-
|
|
1432
|
+
free, staying a lighter tint of whichever shade the text itself is in. `.control` is excluded
|
|
1433
|
+
the same as `appearance-*` — it's header chrome with its own complete treatment below, not
|
|
1434
|
+
content that should read as a link. */
|
|
1435
|
+
use-gridcell :is(a:not([class*="appearance-"], .control), .appearance-a) {
|
|
1434
1436
|
--usewc-color-link-text-static: currentColor;
|
|
1435
1437
|
--usewc-color-link-text-hover: oklch(
|
|
1436
1438
|
from currentColor calc(l + var(--usewc-color-grid-cell-link-hover-lightness-shift)) c h
|
|
@@ -1587,6 +1589,106 @@
|
|
|
1587
1589
|
}
|
|
1588
1590
|
}
|
|
1589
1591
|
|
|
1592
|
+
/* Marks the row's primary identifying column (a name, say, beside secondary detail columns)
|
|
1593
|
+
so it reads heavier than the rest of the row without going all the way to a heading. */
|
|
1594
|
+
use-gridcell.primary {
|
|
1595
|
+
font-weight: var(--usewc-font-grid-cell-primary-weight);
|
|
1596
|
+
|
|
1597
|
+
use-theme-escape & {
|
|
1598
|
+
all: revert-layer;
|
|
1599
|
+
}
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
/* A column header can host a sortable label alongside a further control (a trailing
|
|
1603
|
+
filter/menu button, say) instead of just plain text — `.control` opts a native button or
|
|
1604
|
+
link into reading as that label, in place of detecting one by DOM shape (a lone child),
|
|
1605
|
+
which doesn't hold once a second control joins it. The cell becomes their flex row; its own
|
|
1606
|
+
padding moves onto `.control` below so its hover band fills exactly its own clickable area,
|
|
1607
|
+
and what's left on the cell becomes the gap held clear of the divider beside it. */
|
|
1608
|
+
use-gridhead use-gridcell[role="columnheader"]:has(> .control) {
|
|
1609
|
+
display: flex;
|
|
1610
|
+
align-items: center;
|
|
1611
|
+
gap: var(--usewc-layout-grid-header-control-gap);
|
|
1612
|
+
padding: 0;
|
|
1613
|
+
padding-inline: var(--usewc-layout-grid-header-control-gap);
|
|
1614
|
+
|
|
1615
|
+
use-theme-escape & {
|
|
1616
|
+
all: revert-layer;
|
|
1617
|
+
}
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1620
|
+
/* `all: unset` strips the control's native chrome (button chrome, link color/underline); only
|
|
1621
|
+
what's needed to lay it out and read as header text is re-declared. It grows to fill the
|
|
1622
|
+
row, the same as a plain text label would — a further control alongside it (a filter/menu
|
|
1623
|
+
icon, say) is a plain themed button instead, not `.control`, so it keeps its own natural
|
|
1624
|
+
size and chrome rather than stretching or reading as header text itself. */
|
|
1625
|
+
use-gridhead use-gridcell[role="columnheader"] > .control {
|
|
1626
|
+
all: unset;
|
|
1627
|
+
box-sizing: border-box;
|
|
1628
|
+
display: inline-flex;
|
|
1629
|
+
align-items: center;
|
|
1630
|
+
flex: 1 1 auto;
|
|
1631
|
+
block-size: var(--usewc-layout-grid-header-control-height);
|
|
1632
|
+
padding-inline: var(--usewc-layout-grid-cell-padding-inline);
|
|
1633
|
+
border-radius: var(--usewc-effect-grid-header-control-border-radius);
|
|
1634
|
+
color: inherit;
|
|
1635
|
+
font: inherit;
|
|
1636
|
+
cursor: pointer;
|
|
1637
|
+
--usewc-effect-outline-width: 0;
|
|
1638
|
+
outline: var(--usewc-effect-outline-width) var(--usewc-effect-outline-style) var(--usewc-color-outline);
|
|
1639
|
+
/* Flush rather than the default offset — the control already sits inset from the divider
|
|
1640
|
+
by its own gap, and an outset ring would eat into that gap and paint under the divider,
|
|
1641
|
+
the same reason the plain cell outline below stays flush against its own edge. */
|
|
1642
|
+
outline-offset: var(--usewc-effect-outline-offset-flush);
|
|
1643
|
+
transition: var(--usewc-transition-control), var(--usewc-effect-outline-transition);
|
|
1644
|
+
|
|
1645
|
+
&:is(:hover, :focus-visible) {
|
|
1646
|
+
background-color: var(--usewc-color-grid-header-control-background-hover);
|
|
1647
|
+
}
|
|
1648
|
+
|
|
1649
|
+
&:focus-visible {
|
|
1650
|
+
--usewc-effect-outline-width: var(--usewc-effect-outline-size);
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1653
|
+
use-theme-escape & {
|
|
1654
|
+
all: revert-layer;
|
|
1655
|
+
}
|
|
1656
|
+
}
|
|
1657
|
+
|
|
1658
|
+
/* A sort direction glyph after a `.control` label — only the WAI-ARIA grid pattern's own
|
|
1659
|
+
`aria-sort="ascending"/"descending"` on the header cell paints one, so a plain sortable
|
|
1660
|
+
column (no sort applied yet, or `aria-sort="none"`) stays glyph-free rather than reserving
|
|
1661
|
+
dead space for it. */
|
|
1662
|
+
use-gridhead
|
|
1663
|
+
use-gridcell[role="columnheader"]:is([aria-sort="ascending"], [aria-sort="descending"])
|
|
1664
|
+
> .control::after {
|
|
1665
|
+
content: "";
|
|
1666
|
+
display: inline-block;
|
|
1667
|
+
flex: none;
|
|
1668
|
+
inline-size: var(--usewc-layout-grid-sort-indicator-size);
|
|
1669
|
+
block-size: var(--usewc-layout-grid-sort-indicator-size);
|
|
1670
|
+
margin-inline-start: var(--usewc-layout-grid-sort-indicator-gap);
|
|
1671
|
+
background-color: var(--usewc-effect-grid-sort-indicator-color);
|
|
1672
|
+
mask-size: contain;
|
|
1673
|
+
mask-repeat: no-repeat;
|
|
1674
|
+
mask-position: center;
|
|
1675
|
+
}
|
|
1676
|
+
|
|
1677
|
+
use-theme-escape
|
|
1678
|
+
use-gridhead
|
|
1679
|
+
use-gridcell[role="columnheader"]:is([aria-sort="ascending"], [aria-sort="descending"])
|
|
1680
|
+
> .control::after {
|
|
1681
|
+
all: revert-layer;
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1684
|
+
use-gridhead use-gridcell[role="columnheader"][aria-sort="ascending"] > .control::after {
|
|
1685
|
+
mask-image: var(--usewc-effect-grid-sort-indicator-ascending-mask-image);
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1688
|
+
use-gridhead use-gridcell[role="columnheader"][aria-sort="descending"] > .control::after {
|
|
1689
|
+
mask-image: var(--usewc-effect-grid-sort-indicator-descending-mask-image);
|
|
1690
|
+
}
|
|
1691
|
+
|
|
1590
1692
|
/* A cell whose only content is a selection control sizes to that control instead of taking
|
|
1591
1693
|
an equal flex share like a data column (use-gridrow's shadow makes every cell `flex: 1 1 0`
|
|
1592
1694
|
by default), and tightens its inline padding so the checkbox doesn't sit in a wide gutter.
|
package/dist/docs/use-grid.md
CHANGED
|
@@ -40,6 +40,7 @@ generated id. Lazily created so single-select grids without a `name` still group
|
|
|
40
40
|
| Name | Signature | Description |
|
|
41
41
|
| --- | --- | --- |
|
|
42
42
|
| isRowDisabled | `(row: Element \| null \| undefined)` | - |
|
|
43
|
+
| claimRovingTabStop | `(cell: HTMLElement)` | - |
|
|
43
44
|
|
|
44
45
|
## Slots
|
|
45
46
|
|
package/dist/tokens.css
CHANGED
|
@@ -624,6 +624,29 @@
|
|
|
624
624
|
--usewc-layout-grid-selector-cell-padding-inline: var(--usewc-space-4);
|
|
625
625
|
--usewc-font-grid-header-weight: var(--usewc-font-weight-medium);
|
|
626
626
|
--usewc-effect-grid-border-radius: var(--usewc-effect-border-radius-8);
|
|
627
|
+
/* A sortable/actionable header — a bare button or link filling the whole header cell — reads as
|
|
628
|
+
plain header text at rest and only reveals itself as interactive on hover, the same wash
|
|
629
|
+
`popover-menu-item` and the selector controls already share. */
|
|
630
|
+
--usewc-color-grid-header-control-background-hover: var(--usewc-color-selector-background-hover);
|
|
631
|
+
--usewc-effect-grid-header-control-border-radius: var(--usewc-effect-border-radius-4);
|
|
632
|
+
/* Shorter than a data cell's own block padding would produce — the hover band reads as a tight
|
|
633
|
+
label chip, not a second, taller row stacked under the divider. */
|
|
634
|
+
--usewc-layout-grid-header-control-height: var(--usewc-space-32);
|
|
635
|
+
/* Keeps the hover band's rounded corners clear of the column divider beside it, so the two
|
|
636
|
+
never visually merge. */
|
|
637
|
+
--usewc-layout-grid-header-control-gap: var(--usewc-space-4);
|
|
638
|
+
/* A sortable column's own direction glyph — reuses the same caret shapes `dropdown-trigger` and
|
|
639
|
+
`tree-item` already mask in, rather than rotating a single icon, so up/down stay crisp at any
|
|
640
|
+
angle. Only paints when the header cell carries a real `aria-sort="ascending"/"descending"`,
|
|
641
|
+
the same WAI-ARIA grid pattern a consumer's own sort handler would already be setting. */
|
|
642
|
+
--usewc-effect-grid-sort-indicator-ascending-mask-image: var(--usewc-icon-caret-block-start);
|
|
643
|
+
--usewc-effect-grid-sort-indicator-descending-mask-image: var(--usewc-icon-caret-block-end);
|
|
644
|
+
--usewc-effect-grid-sort-indicator-color: currentColor;
|
|
645
|
+
--usewc-layout-grid-sort-indicator-size: 1em;
|
|
646
|
+
--usewc-layout-grid-sort-indicator-gap: var(--usewc-space-4);
|
|
647
|
+
/* A cell marking the row's primary identifying column (a name, say, next to secondary detail
|
|
648
|
+
columns) — heavier than the surrounding body text without reading as a heading. */
|
|
649
|
+
--usewc-font-grid-cell-primary-weight: var(--usewc-font-weight-medium);
|
|
627
650
|
/* -- Compact variant (`.compact`): a shorter line-height and tighter block padding / row gap,
|
|
628
651
|
the same way button's small size steps down from its base. */
|
|
629
652
|
--usewc-layout-grid-compact-cell-line-height: var(--usewc-line-height-20);
|
package/dist/use-wc.d.mts
CHANGED
|
@@ -1654,6 +1654,7 @@ export declare class UseGrid extends LitElement {
|
|
|
1654
1654
|
updated(changedProps: Map<string, unknown>): void;
|
|
1655
1655
|
connectedCallback(): void;
|
|
1656
1656
|
disconnectedCallback(): void;
|
|
1657
|
+
claimRovingTabStop(cell: HTMLElement): void;
|
|
1657
1658
|
firstUpdated(): void;
|
|
1658
1659
|
render(): TemplateResult$1<1>;
|
|
1659
1660
|
static styles: import("lit").CSSResult;
|
package/dist/use-wc.mjs
CHANGED
|
@@ -4892,11 +4892,13 @@ let UseGrid = class UseGrid extends LitElement {
|
|
|
4892
4892
|
this.#unwatchMutations();
|
|
4893
4893
|
super.disconnectedCallback();
|
|
4894
4894
|
}
|
|
4895
|
-
|
|
4895
|
+
claimRovingTabStop(cell) {
|
|
4896
4896
|
this.#getCellCache().cells.forEach((candidate) => {
|
|
4897
|
-
candidate.tabIndex = -1;
|
|
4897
|
+
candidate.tabIndex = candidate === cell ? 0 : -1;
|
|
4898
4898
|
});
|
|
4899
|
-
|
|
4899
|
+
}
|
|
4900
|
+
#focusGridCell(cell) {
|
|
4901
|
+
this.claimRovingTabStop(cell);
|
|
4900
4902
|
cell.focus();
|
|
4901
4903
|
}
|
|
4902
4904
|
firstUpdated() {
|
|
@@ -5225,6 +5227,7 @@ let UseGridCell = class UseGridCell extends UseWidget {
|
|
|
5225
5227
|
this.#handleFocusIn = () => {
|
|
5226
5228
|
this.#initializeAction();
|
|
5227
5229
|
if (this.#action) {
|
|
5230
|
+
this.closest("use-grid")?.claimRovingTabStop(this);
|
|
5228
5231
|
this.#action.focus();
|
|
5229
5232
|
this.tabIndex = -1;
|
|
5230
5233
|
}
|
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)",
|
|
@@ -139,18 +139,6 @@
|
|
|
139
139
|
],
|
|
140
140
|
"references": []
|
|
141
141
|
},
|
|
142
|
-
{
|
|
143
|
-
"name": "use-focusgroup",
|
|
144
|
-
"description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)\n---\n\n\n### **Methods:**\n - **promote()** - Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup.",
|
|
145
|
-
"attributes": [
|
|
146
|
-
{
|
|
147
|
-
"name": "features",
|
|
148
|
-
"description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
|
|
149
|
-
"values": []
|
|
150
|
-
}
|
|
151
|
-
],
|
|
152
|
-
"references": []
|
|
153
|
-
},
|
|
154
142
|
{
|
|
155
143
|
"name": "use-duration-input",
|
|
156
144
|
"description": "Displays the parts of an ISO 8601 duration string using [`Intl.DurationFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat).\n\nUses the [`duration-fns`](https://www.npmjs.com/package/duration-fns) library for parsing ISO 8601 values.\n\n<baseline-status featureId=\"intl-duration-format\"></baseline-status>\n---\n",
|
|
@@ -179,6 +167,18 @@
|
|
|
179
167
|
],
|
|
180
168
|
"references": []
|
|
181
169
|
},
|
|
170
|
+
{
|
|
171
|
+
"name": "use-focusgroup",
|
|
172
|
+
"description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)\n---\n\n\n### **Methods:**\n - **promote()** - Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup.",
|
|
173
|
+
"attributes": [
|
|
174
|
+
{
|
|
175
|
+
"name": "features",
|
|
176
|
+
"description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
|
|
177
|
+
"values": []
|
|
178
|
+
}
|
|
179
|
+
],
|
|
180
|
+
"references": []
|
|
181
|
+
},
|
|
182
182
|
{
|
|
183
183
|
"name": "use-grid",
|
|
184
184
|
"description": "Accessible grid component following [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\n\n## Grid Cell Modes\nThe `mode` attribute of the `use-gridcell` element determines how the cell behaves in terms of focus and interaction. The possible values are:\n\n- `'none'` - the cell itself is focusable and it does not contain any interactive elements.\n- `'widget'` - the cell itself is focusable and it contains more than one interactive element. To access the interactive elements, the user must press `Enter` or `F2`, and to restore focus to the cell, the user must press `Esc` or `F2`.\n- `'action'` - the cell itself is not focusable and it contains a single interactive element. The user can tab to the interactive elements directly.\n\n## Accessible Label\nProvide `aria-label` or `aria-labelledby` on the `use-grid` element so screen readers can identify the grid.\n---\n\n\n### **Slots:**\n - _default_ - Grid content (use-gridhead/use-gridbody rows)",
|
|
@@ -452,6 +452,12 @@
|
|
|
452
452
|
],
|
|
453
453
|
"references": []
|
|
454
454
|
},
|
|
455
|
+
{
|
|
456
|
+
"name": "use-scrollarea",
|
|
457
|
+
"description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)\n---\n\n\n### **Slots:**\n - _default_ - Scrollable content",
|
|
458
|
+
"attributes": [],
|
|
459
|
+
"references": []
|
|
460
|
+
},
|
|
455
461
|
{
|
|
456
462
|
"name": "use-time-input",
|
|
457
463
|
"description": "Displays time picker using [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).\n\nAllows users to pick time values with proper localization and formatting.\n---\n\n\n### **Events:**\n - **input**",
|
|
@@ -481,12 +487,6 @@
|
|
|
481
487
|
],
|
|
482
488
|
"references": []
|
|
483
489
|
},
|
|
484
|
-
{
|
|
485
|
-
"name": "use-scrollarea",
|
|
486
|
-
"description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)\n---\n\n\n### **Slots:**\n - _default_ - Scrollable content",
|
|
487
|
-
"attributes": [],
|
|
488
|
-
"references": []
|
|
489
|
-
},
|
|
490
490
|
{
|
|
491
491
|
"name": "use-tree",
|
|
492
492
|
"description": "Custom input control for managing selected values in a hierarchy.\n\nA convenience for distributing a custom indicator to every item at once: slot an icon into\n`use-tree` itself under `expanded-indicator`, `collapsed-indicator`, `selected-indicator`, or\n`deselected-indicator`, and it's cloned into each lazily-discovered `use-treeitem`'s matching\nslot. This is per-item slotting, just done once for the whole tree — it doesn't replace\n`use-treeitem`'s own static hooks (`expandedIcon`, `collapsedIcon`, `selectedIcon`,\n`deselectedIcon`), which still apply for indicators the tree hasn't cloned one over.\n---\n\n\n### **Slots:**\n - **default** - NodeList of `use-treeitem` elements\n- **expanded-indicator** - Cloned into every item's `expanded-indicator` slot.\n- **collapsed-indicator** - Cloned into every item's `collapsed-indicator` slot.\n- **selected-indicator** - Cloned into every item's `selected-indicator` slot.\n- **deselected-indicator** - Cloned into every item's `deselected-indicator` slot.",
|