@fusion.dev/helix-headless 0.53.0 → 0.53.2
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 +141 -141
- package/dist/accordion/item/accordion-item.d.ts +13 -13
- package/dist/accordion/root/accordion-root.d.ts +1 -1
- package/dist/area-chart/root/area-chart-root.js +1 -1
- package/dist/avatar/group/avatar-group.d.ts +11 -11
- package/dist/bar-chart/root/bar-chart-root.d.ts +1 -1
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +6 -6
- package/dist/button/root/button-root.d.ts +1 -1
- package/dist/card/root/card-root.d.ts +1 -1
- package/dist/carousel/root/carousel-root.d.ts +14 -14
- package/dist/chat/composer/chat-composer.d.ts +6 -6
- package/dist/chat/root/chat-root.d.ts +9 -9
- package/dist/checkbox/root/checkbox-root.d.ts +2 -2
- package/dist/checkbox/root/checkbox-root.js +1 -1
- package/dist/code-block/root/code-block-root.d.ts +5 -5
- package/dist/color-input/root/color-input-root.d.ts +3 -3
- package/dist/color-picker/root/color-picker-root.d.ts +14 -14
- package/dist/combobox/root/combobox-root.d.ts +25 -5
- package/dist/combobox/root/combobox-root.js +6 -4
- package/dist/command/root/command-root.d.ts +6 -7
- package/dist/data-table/root/data-table-root.d.ts +61 -38
- package/dist/data-table/root/data-table-root.js +8 -3
- package/dist/data-table/root/order.d.ts +3 -3
- package/dist/date-input/root/date-input-root.d.ts +12 -11
- package/dist/dialog/root/dialog-root.d.ts +4 -4
- package/dist/drawer/root/drawer-root.d.ts +5 -5
- package/dist/filter-input/menu/filter-menu.d.ts +7 -1
- package/dist/filter-input/menu/filter-menu.js +2 -1
- package/dist/filter-input/root/filter-input-root.d.ts +6 -6
- package/dist/format-date/root/format-date-root.d.ts +6 -5
- package/dist/heatmap/root/heatmap-root.d.ts +11 -16
- package/dist/image/root/image-root.d.ts +4 -4
- package/dist/input/root/input-root.d.ts +7 -7
- package/dist/line-chart/root/line-chart-root.d.ts +1 -2
- package/dist/list/item/list-item.d.ts +6 -7
- package/dist/list/root/list-root.d.ts +4 -4
- package/dist/megamenu/root/megamenu-root.d.ts +4 -4
- package/dist/notifications/notification/notification.d.ts +10 -10
- package/dist/notifications/root/notifications-root.d.ts +1 -1
- package/dist/option/root/option-root.d.ts +3 -3
- package/dist/pagination/root/pagination-root.d.ts +2 -2
- package/dist/pin-input/root/pin-input-root.d.ts +4 -4
- package/dist/popover/root/popover-root.d.ts +7 -6
- package/dist/radio/root/radio-root.d.ts +12 -2
- package/dist/radio/root/radio-root.js +5 -1
- package/dist/select/root/select-root.d.ts +24 -0
- package/dist/select/root/select-root.js +4 -1
- package/dist/speed-dial/root/speed-dial-root.d.ts +8 -9
- package/dist/stat/root/stat-root.d.ts +3 -3
- package/dist/steps/root/steps-root.d.ts +1 -1
- package/dist/steps/step/step.d.ts +5 -5
- package/dist/switch/root/switch-root.js +1 -1
- package/dist/table/column/table-column.d.ts +28 -28
- package/dist/table/root/table-root.d.ts +14 -17
- package/dist/table/row/table-row.d.ts +4 -4
- package/dist/tabs/panel/tab-panel.d.ts +2 -2
- package/dist/tabs/root/tabs-root.js +11 -4
- package/dist/tabs/tab/tab.d.ts +11 -1
- package/dist/tabs/tab/tab.js +5 -1
- package/dist/time-input/root/time-input-root.d.ts +13 -13
- package/dist/time-picker/root/time-picker-root.d.ts +8 -8
- package/dist/toast/root/toast-root.d.ts +2 -2
- package/dist/toggle/root/toggle-root.d.ts +16 -6
- package/dist/toggle/root/toggle-root.js +5 -1
- package/dist/tooltip/root/tooltip-root.d.ts +2 -2
- package/dist/tour/stop/tour-stop.d.ts +3 -3
- package/dist/tree/item/tree-item.d.ts +2 -2
- package/dist/tree/item/tree-item.js +4 -3
- package/dist/tree/root/tree-root.d.ts +8 -7
- package/dist/tree/root/tree-root.js +9 -5
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +7 -1
- package/dist/video-playlist/menu/video-playlist-menu.js +4 -2
- package/dist/video-playlist/root/video-playlist-root.d.ts +5 -5
- package/dist/video-playlist/root/video-playlist-root.js +2 -3
- package/package.json +5 -5
- package/types/jsx.d.ts +754 -780
- package/types/vue.d.ts +172 -185
package/types/jsx.d.ts
CHANGED
|
@@ -860,13 +860,13 @@ export type HelixHeadlessAvatarGroupProps = {
|
|
|
860
860
|
Unset shows all of them, which is what no limit means and is more useful
|
|
861
861
|
than refusing to render.
|
|
862
862
|
|
|
863
|
-
**Reflected, because the fold is a stylesheet rule and nothing else.**
|
|
864
|
-
|
|
865
|
-
so the attribute *is* the mechanism: a `max` that reaches this
|
|
866
|
-
never reaches the host matches no rule, and every avatar is
|
|
867
|
-
count claiming some are hidden. Markup is the safe path and
|
|
868
|
-
a script is the broken one, and React takes it for
|
|
869
|
-
matching property rather than an attribute.
|
|
863
|
+
**Reflected, because the fold is a stylesheet rule and nothing else.** A
|
|
864
|
+
sheet hides past the limit one selector per value, as `FOLDS_UP_TO`
|
|
865
|
+
describes, so the attribute *is* the mechanism: a `max` that reaches this
|
|
866
|
+
property and never reaches the host matches no rule, and every avatar is
|
|
867
|
+
drawn beside a count claiming some are hidden. Markup is the safe path and
|
|
868
|
+
hides the fault; a script is the broken one, and React takes it for
|
|
869
|
+
everyone, assigning a matching property rather than an attribute.
|
|
870
870
|
|
|
871
871
|
**Optional rather than defaulted, per the rule that a reflected property
|
|
872
872
|
takes no default**: `max = 0` would stamp `max="0"` onto every host that
|
|
@@ -882,13 +882,13 @@ export type HelixHeadlessAvatarGroupSolidJsProps = {
|
|
|
882
882
|
Unset shows all of them, which is what no limit means and is more useful
|
|
883
883
|
than refusing to render.
|
|
884
884
|
|
|
885
|
-
**Reflected, because the fold is a stylesheet rule and nothing else.**
|
|
886
|
-
|
|
887
|
-
so the attribute *is* the mechanism: a `max` that reaches this
|
|
888
|
-
never reaches the host matches no rule, and every avatar is
|
|
889
|
-
count claiming some are hidden. Markup is the safe path and
|
|
890
|
-
a script is the broken one, and React takes it for
|
|
891
|
-
matching property rather than an attribute.
|
|
885
|
+
**Reflected, because the fold is a stylesheet rule and nothing else.** A
|
|
886
|
+
sheet hides past the limit one selector per value, as `FOLDS_UP_TO`
|
|
887
|
+
describes, so the attribute *is* the mechanism: a `max` that reaches this
|
|
888
|
+
property and never reaches the host matches no rule, and every avatar is
|
|
889
|
+
drawn beside a count claiming some are hidden. Markup is the safe path and
|
|
890
|
+
hides the fault; a script is the broken one, and React takes it for
|
|
891
|
+
everyone, assigning a matching property rather than an attribute.
|
|
892
892
|
|
|
893
893
|
**Optional rather than defaulted, per the rule that a reflected property
|
|
894
894
|
takes no default**: `max = 0` would stamp `max="0"` onto every host that
|
|
@@ -1237,12 +1237,12 @@ export type HelixHeadlessBreadcrumbProps = {
|
|
|
1237
1237
|
current?: (HelixHeadlessBreadcrumb["current"]) | undefined;
|
|
1238
1238
|
/** Where the crumb goes, and nothing where it is the current page.
|
|
1239
1239
|
|
|
1240
|
-
**Optional and reflected, because a stylesheet does select on it.**
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
the
|
|
1245
|
-
|
|
1240
|
+
**Optional and reflected, because a stylesheet does select on it.** A sheet
|
|
1241
|
+
writes `:host(:not([href])) [part="link"]` to take the block padding off a
|
|
1242
|
+
crumb that is not a link, so the attribute is what decides how tall a crumb
|
|
1243
|
+
is. Unreflected, an `href` set from script reached the property, rendered
|
|
1244
|
+
the anchor, and left the host looking unlinked: the crumb drew at 20px
|
|
1245
|
+
where a markup twin drew at 28.
|
|
1246
1246
|
|
|
1247
1247
|
Optional rather than defaulted, which is the general rule that a reflected
|
|
1248
1248
|
property takes no default: an `href` written onto every host would be a link
|
|
@@ -1265,12 +1265,12 @@ export type HelixHeadlessBreadcrumbSolidJsProps = {
|
|
|
1265
1265
|
"prop:current"?: (HelixHeadlessBreadcrumb["current"]) | undefined;
|
|
1266
1266
|
/** Where the crumb goes, and nothing where it is the current page.
|
|
1267
1267
|
|
|
1268
|
-
**Optional and reflected, because a stylesheet does select on it.**
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
the
|
|
1273
|
-
|
|
1268
|
+
**Optional and reflected, because a stylesheet does select on it.** A sheet
|
|
1269
|
+
writes `:host(:not([href])) [part="link"]` to take the block padding off a
|
|
1270
|
+
crumb that is not a link, so the attribute is what decides how tall a crumb
|
|
1271
|
+
is. Unreflected, an `href` set from script reached the property, rendered
|
|
1272
|
+
the anchor, and left the host looking unlinked: the crumb drew at 20px
|
|
1273
|
+
where a markup twin drew at 28.
|
|
1274
1274
|
|
|
1275
1275
|
Optional rather than defaulted, which is the general rule that a reflected
|
|
1276
1276
|
property takes no default: an `href` written onto every host would be a link
|
|
@@ -1369,7 +1369,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
1369
1369
|
the same way `label` becomes `aria-label` in there.
|
|
1370
1370
|
|
|
1371
1371
|
```html
|
|
1372
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
1372
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
1373
1373
|
```
|
|
1374
1374
|
|
|
1375
1375
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -1530,7 +1530,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
1530
1530
|
the same way `label` becomes `aria-label` in there.
|
|
1531
1531
|
|
|
1532
1532
|
```html
|
|
1533
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
1533
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
1534
1534
|
```
|
|
1535
1535
|
|
|
1536
1536
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -1857,13 +1857,13 @@ end while the slides stop moving a third of the way through.
|
|
|
1857
1857
|
**The number is published to the styles rather than enumerated by them**,
|
|
1858
1858
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
1859
1859
|
count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
1860
|
-
so
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
three dots, a pane taking the whole track and five slides
|
|
1864
|
-
dragging.
|
|
1865
|
-
|
|
1866
|
-
|
|
1860
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
1861
|
+
above it the pane falls back to one across while this file goes on counting
|
|
1862
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
1863
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
1864
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
1865
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
1866
|
+
correction the same way and for the same reason.
|
|
1867
1867
|
|
|
1868
1868
|
**On the track and not on the host.** A custom property on the host is a
|
|
1869
1869
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -1888,8 +1888,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
1888
1888
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
1889
1889
|
exactly three.
|
|
1890
1890
|
|
|
1891
|
-
|
|
1892
|
-
|
|
1891
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
1892
|
+
three lines for a consumer writing their own.
|
|
1893
1893
|
|
|
1894
1894
|
**A value rather than the resting behavior**, which is what the
|
|
1895
1895
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -1917,13 +1917,13 @@ end while the slides stop moving a third of the way through.
|
|
|
1917
1917
|
**The number is published to the styles rather than enumerated by them**,
|
|
1918
1918
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
1919
1919
|
count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
1920
|
-
so
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
three dots, a pane taking the whole track and five slides
|
|
1924
|
-
dragging.
|
|
1925
|
-
|
|
1926
|
-
|
|
1920
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
1921
|
+
above it the pane falls back to one across while this file goes on counting
|
|
1922
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
1923
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
1924
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
1925
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
1926
|
+
correction the same way and for the same reason.
|
|
1927
1927
|
|
|
1928
1928
|
**On the track and not on the host.** A custom property on the host is a
|
|
1929
1929
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -1948,8 +1948,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
1948
1948
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
1949
1949
|
exactly three.
|
|
1950
1950
|
|
|
1951
|
-
|
|
1952
|
-
|
|
1951
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
1952
|
+
three lines for a consumer writing their own.
|
|
1953
1953
|
|
|
1954
1954
|
**A value rather than the resting behavior**, which is what the
|
|
1955
1955
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -2046,13 +2046,13 @@ end while the slides stop moving a third of the way through.
|
|
|
2046
2046
|
**The number is published to the styles rather than enumerated by them**,
|
|
2047
2047
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
2048
2048
|
count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
2049
|
-
so
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
three dots, a pane taking the whole track and five slides
|
|
2053
|
-
dragging.
|
|
2054
|
-
|
|
2055
|
-
|
|
2049
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
2050
|
+
above it the pane falls back to one across while this file goes on counting
|
|
2051
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
2052
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
2053
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
2054
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
2055
|
+
correction the same way and for the same reason.
|
|
2056
2056
|
|
|
2057
2057
|
**On the track and not on the host.** A custom property on the host is a
|
|
2058
2058
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -2077,8 +2077,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
2077
2077
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
2078
2078
|
exactly three.
|
|
2079
2079
|
|
|
2080
|
-
|
|
2081
|
-
|
|
2080
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
2081
|
+
three lines for a consumer writing their own.
|
|
2082
2082
|
|
|
2083
2083
|
**A value rather than the resting behavior**, which is what the
|
|
2084
2084
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -2106,13 +2106,13 @@ end while the slides stop moving a third of the way through.
|
|
|
2106
2106
|
**The number is published to the styles rather than enumerated by them**,
|
|
2107
2107
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
2108
2108
|
count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
2109
|
-
so
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
three dots, a pane taking the whole track and five slides
|
|
2113
|
-
dragging.
|
|
2114
|
-
|
|
2115
|
-
|
|
2109
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
2110
|
+
above it the pane falls back to one across while this file goes on counting
|
|
2111
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
2112
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
2113
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
2114
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
2115
|
+
correction the same way and for the same reason.
|
|
2116
2116
|
|
|
2117
2117
|
**On the track and not on the host.** A custom property on the host is a
|
|
2118
2118
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -2137,8 +2137,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
2137
2137
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
2138
2138
|
exactly three.
|
|
2139
2139
|
|
|
2140
|
-
|
|
2141
|
-
|
|
2140
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
2141
|
+
three lines for a consumer writing their own.
|
|
2142
2142
|
|
|
2143
2143
|
**A value rather than the resting behavior**, which is what the
|
|
2144
2144
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -2387,13 +2387,13 @@ pinned because a conversation opens at its most recent turn.
|
|
|
2387
2387
|
|
|
2388
2388
|
**Not reflected, and the default is why.** A reflected property that
|
|
2389
2389
|
defaults to true writes its attribute on upgrade whether or not the
|
|
2390
|
-
consumer wrote one, so the server serves `<helix-chat label="x">`
|
|
2391
|
-
client turns it into `<helix-chat label="x" pinned>`: a
|
|
2392
|
-
React consumer reports and does not patch up. Nothing
|
|
2393
|
-
either, because the one thing that changes with the pin
|
|
2394
|
-
that is a part inside the shadow tree where a
|
|
2395
|
-
it. Measured rather than assumed: `label,
|
|
2396
|
-
`label` from the server. */
|
|
2390
|
+
consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
2391
|
+
and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
2392
|
+
hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
2393
|
+
needs the attribute either, because the one thing that changes with the pin
|
|
2394
|
+
is the way back, and that is a part inside the shadow tree where a
|
|
2395
|
+
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
2396
|
+
pinned` after upgrade against `label` from the server. */
|
|
2397
2397
|
pinned?: (HelixHeadlessChat["pinned"]) | undefined;
|
|
2398
2398
|
/** How near the bottom still counts as being at it, in pixels.
|
|
2399
2399
|
|
|
@@ -2464,13 +2464,13 @@ pinned because a conversation opens at its most recent turn.
|
|
|
2464
2464
|
|
|
2465
2465
|
**Not reflected, and the default is why.** A reflected property that
|
|
2466
2466
|
defaults to true writes its attribute on upgrade whether or not the
|
|
2467
|
-
consumer wrote one, so the server serves `<helix-chat label="x">`
|
|
2468
|
-
client turns it into `<helix-chat label="x" pinned>`: a
|
|
2469
|
-
React consumer reports and does not patch up. Nothing
|
|
2470
|
-
either, because the one thing that changes with the pin
|
|
2471
|
-
that is a part inside the shadow tree where a
|
|
2472
|
-
it. Measured rather than assumed: `label,
|
|
2473
|
-
`label` from the server. */
|
|
2467
|
+
consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
2468
|
+
and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
2469
|
+
hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
2470
|
+
needs the attribute either, because the one thing that changes with the pin
|
|
2471
|
+
is the way back, and that is a part inside the shadow tree where a
|
|
2472
|
+
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
2473
|
+
pinned` after upgrade against `label` from the server. */
|
|
2474
2474
|
"prop:pinned"?: (HelixHeadlessChat["pinned"]) | undefined;
|
|
2475
2475
|
/** How near the bottom still counts as being at it, in pixels.
|
|
2476
2476
|
|
|
@@ -2790,11 +2790,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2790
2790
|
round. The platform already writes booleans like this for the same reason,
|
|
2791
2791
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2792
2792
|
|
|
2793
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2793
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2794
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2795
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2796
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2797
|
+
the 40px it stood in reserved.
|
|
2798
2798
|
|
|
2799
2799
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2800
2800
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2810,11 +2810,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2810
2810
|
round. The platform already writes booleans like this for the same reason,
|
|
2811
2811
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2812
2812
|
|
|
2813
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2813
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2814
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2815
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2816
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2817
|
+
the 40px it stood in reserved.
|
|
2818
2818
|
|
|
2819
2819
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2820
2820
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2849,11 +2849,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2849
2849
|
round. The platform already writes booleans like this for the same reason,
|
|
2850
2850
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2851
2851
|
|
|
2852
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2852
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2853
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2854
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2855
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2856
|
+
the 40px it stood in reserved.
|
|
2857
2857
|
|
|
2858
2858
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2859
2859
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2869,11 +2869,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2869
2869
|
round. The platform already writes booleans like this for the same reason,
|
|
2870
2870
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2871
2871
|
|
|
2872
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2872
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2873
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2874
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2875
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2876
|
+
the 40px it stood in reserved.
|
|
2877
2877
|
|
|
2878
2878
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2879
2879
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -3315,10 +3315,10 @@ letting it open would take a color from the reader and drop it. */
|
|
|
3315
3315
|
|
|
3316
3316
|
**A color is exactly as requirable as a date**, which is the comparison
|
|
3317
3317
|
that settles it: this element extends `HelixFormElement`, carries `name`
|
|
3318
|
-
and reports its value, so a consumer writing
|
|
3319
|
-
|
|
3320
|
-
to
|
|
3321
|
-
|
|
3318
|
+
and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
3319
|
+
name="brand" required>` inside a form has every reason to expect the form
|
|
3320
|
+
to refuse an empty one. Its two siblings in the same composition position,
|
|
3321
|
+
Date Picker and Time Picker, both check it.
|
|
3322
3322
|
|
|
3323
3323
|
Written out rather than taken from `MixinField`, for the reason those two
|
|
3324
3324
|
record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -3508,10 +3508,10 @@ letting it open would take a color from the reader and drop it. */
|
|
|
3508
3508
|
|
|
3509
3509
|
**A color is exactly as requirable as a date**, which is the comparison
|
|
3510
3510
|
that settles it: this element extends `HelixFormElement`, carries `name`
|
|
3511
|
-
and reports its value, so a consumer writing
|
|
3512
|
-
|
|
3513
|
-
to
|
|
3514
|
-
|
|
3511
|
+
and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
3512
|
+
name="brand" required>` inside a form has every reason to expect the form
|
|
3513
|
+
to refuse an empty one. Its two siblings in the same composition position,
|
|
3514
|
+
Date Picker and Time Picker, both check it.
|
|
3515
3515
|
|
|
3516
3516
|
Written out rather than taken from `MixinField`, for the reason those two
|
|
3517
3517
|
record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -4123,7 +4123,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
4123
4123
|
the same way `label` becomes `aria-label` in there.
|
|
4124
4124
|
|
|
4125
4125
|
```html
|
|
4126
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
4126
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
4127
4127
|
```
|
|
4128
4128
|
|
|
4129
4129
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -4292,7 +4292,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
4292
4292
|
the same way `label` becomes `aria-label` in there.
|
|
4293
4293
|
|
|
4294
4294
|
```html
|
|
4295
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
4295
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
4296
4296
|
```
|
|
4297
4297
|
|
|
4298
4298
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -4569,17 +4569,17 @@ refusing it leaves the selection as it was. */
|
|
|
4569
4569
|
|
|
4570
4570
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4571
4571
|
element ever asks for a different page size: a size selector is
|
|
4572
|
-
`
|
|
4573
|
-
|
|
4574
|
-
|
|
4572
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4573
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4574
|
+
the element never has cause to fire. */
|
|
4575
4575
|
"page-size"?: (HelixHeadlessDataTable["pageSize"] | `${number}`) | undefined;
|
|
4576
4576
|
/** How many rows a page holds. Zero is every row, which is what "no paging" means.
|
|
4577
4577
|
|
|
4578
4578
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4579
4579
|
element ever asks for a different page size: a size selector is
|
|
4580
|
-
`
|
|
4581
|
-
|
|
4582
|
-
|
|
4580
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4581
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4582
|
+
the element never has cause to fire. */
|
|
4583
4583
|
pageSize?: (HelixHeadlessDataTable["pageSize"]) | undefined;
|
|
4584
4584
|
/** How many rows the whole result has, where this element cannot count them.
|
|
4585
4585
|
|
|
@@ -4772,17 +4772,17 @@ refusing it leaves the selection as it was. */
|
|
|
4772
4772
|
|
|
4773
4773
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4774
4774
|
element ever asks for a different page size: a size selector is
|
|
4775
|
-
`
|
|
4776
|
-
|
|
4777
|
-
|
|
4775
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4776
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4777
|
+
the element never has cause to fire. */
|
|
4778
4778
|
"attr:page-size"?: (HelixHeadlessDataTable["pageSize"] | `${number}`) | undefined;
|
|
4779
4779
|
/** How many rows a page holds. Zero is every row, which is what "no paging" means.
|
|
4780
4780
|
|
|
4781
4781
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4782
4782
|
element ever asks for a different page size: a size selector is
|
|
4783
|
-
`
|
|
4784
|
-
|
|
4785
|
-
|
|
4783
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4784
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4785
|
+
the element never has cause to fire. */
|
|
4786
4786
|
"prop:pageSize"?: (HelixHeadlessDataTable["pageSize"]) | undefined;
|
|
4787
4787
|
/** How many rows the whole result has, where this element cannot count them.
|
|
4788
4788
|
|
|
@@ -6147,10 +6147,10 @@ not, rather than shown or hidden by CSS. */
|
|
|
6147
6147
|
modal?: (HelixHeadlessDrawer["modal"]) | undefined;
|
|
6148
6148
|
/** Which edge the drawer comes from.
|
|
6149
6149
|
|
|
6150
|
-
Unset is `end`,
|
|
6151
|
-
beside `:host([placement="end"])` rather than as a value written here: a
|
|
6150
|
+
Unset is `end`, and it stays unset rather than being written down: a
|
|
6152
6151
|
default assigned to the property would reflect onto every host and put a
|
|
6153
|
-
`placement="end"` into markup no consumer wrote.
|
|
6152
|
+
`placement="end"` into markup no consumer wrote. So what this tier
|
|
6153
|
+
guarantees is the absence, and a sheet selects on it. */
|
|
6154
6154
|
placement?: (HelixHeadlessDrawer["placement"]) | undefined;
|
|
6155
6155
|
/** Whether the element is open.
|
|
6156
6156
|
|
|
@@ -6238,10 +6238,10 @@ not, rather than shown or hidden by CSS. */
|
|
|
6238
6238
|
"prop:modal"?: (HelixHeadlessDrawer["modal"]) | undefined;
|
|
6239
6239
|
/** Which edge the drawer comes from.
|
|
6240
6240
|
|
|
6241
|
-
Unset is `end`,
|
|
6242
|
-
beside `:host([placement="end"])` rather than as a value written here: a
|
|
6241
|
+
Unset is `end`, and it stays unset rather than being written down: a
|
|
6243
6242
|
default assigned to the property would reflect onto every host and put a
|
|
6244
|
-
`placement="end"` into markup no consumer wrote.
|
|
6243
|
+
`placement="end"` into markup no consumer wrote. So what this tier
|
|
6244
|
+
guarantees is the absence, and a sheet selects on it. */
|
|
6245
6245
|
"prop:placement"?: (HelixHeadlessDrawer["placement"]) | undefined;
|
|
6246
6246
|
/** Whether the element is open.
|
|
6247
6247
|
|
|
@@ -7217,11 +7217,12 @@ renders nothing rather than the epoch, which is what parsing an empty string
|
|
|
7217
7217
|
would give.
|
|
7218
7218
|
|
|
7219
7219
|
**The element's own text is read as a fallback, and only in a browser.**
|
|
7220
|
-
`<helix-
|
|
7221
|
-
|
|
7222
|
-
|
|
7223
|
-
|
|
7224
|
-
|
|
7220
|
+
`<helix-headless-format-date
|
|
7221
|
+
elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
7222
|
+
that reads best in markup, and it cannot be the only one: measured against
|
|
7223
|
+
Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
7224
|
+
`querySelector` are all `undefined` there, so a server has no way to see
|
|
7225
|
+
it. An element rendered on a server needs the attribute; one rendered in a
|
|
7225
7226
|
browser may use either. */
|
|
7226
7227
|
date?: (HelixHeadlessFormatDate["date"]) | undefined;
|
|
7227
7228
|
/** How the day of the month is written, where a date is shown. */
|
|
@@ -7271,11 +7272,12 @@ renders nothing rather than the epoch, which is what parsing an empty string
|
|
|
7271
7272
|
would give.
|
|
7272
7273
|
|
|
7273
7274
|
**The element's own text is read as a fallback, and only in a browser.**
|
|
7274
|
-
`<helix-
|
|
7275
|
-
|
|
7276
|
-
|
|
7277
|
-
|
|
7278
|
-
|
|
7275
|
+
`<helix-headless-format-date
|
|
7276
|
+
elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
7277
|
+
that reads best in markup, and it cannot be the only one: measured against
|
|
7278
|
+
Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
7279
|
+
`querySelector` are all `undefined` there, so a server has no way to see
|
|
7280
|
+
it. An element rendered on a server needs the attribute; one rendered in a
|
|
7279
7281
|
browser may use either. */
|
|
7280
7282
|
"prop:date"?: (HelixHeadlessFormatDate["date"]) | undefined;
|
|
7281
7283
|
/** How the day of the month is written, where a date is shown. */
|
|
@@ -7352,12 +7354,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7352
7354
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7353
7355
|
is the one it gets wrong.
|
|
7354
7356
|
|
|
7355
|
-
The strip measures itself, so
|
|
7356
|
-
|
|
7357
|
-
|
|
7358
|
-
|
|
7359
|
-
|
|
7360
|
-
|
|
7357
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7358
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7359
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7360
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7361
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7362
|
+
plan around.
|
|
7361
7363
|
|
|
7362
7364
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7363
7365
|
container that cannot get narrow. */
|
|
@@ -7370,12 +7372,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7370
7372
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7371
7373
|
is the one it gets wrong.
|
|
7372
7374
|
|
|
7373
|
-
The strip measures itself, so
|
|
7374
|
-
|
|
7375
|
-
|
|
7376
|
-
|
|
7377
|
-
|
|
7378
|
-
|
|
7375
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7376
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7377
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7378
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7379
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7380
|
+
plan around.
|
|
7379
7381
|
|
|
7380
7382
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7381
7383
|
container that cannot get narrow. */
|
|
@@ -7447,12 +7449,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7447
7449
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7448
7450
|
is the one it gets wrong.
|
|
7449
7451
|
|
|
7450
|
-
The strip measures itself, so
|
|
7451
|
-
|
|
7452
|
-
|
|
7453
|
-
|
|
7454
|
-
|
|
7455
|
-
|
|
7452
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7453
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7454
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7455
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7456
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7457
|
+
plan around.
|
|
7456
7458
|
|
|
7457
7459
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7458
7460
|
container that cannot get narrow. */
|
|
@@ -7465,12 +7467,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7465
7467
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7466
7468
|
is the one it gets wrong.
|
|
7467
7469
|
|
|
7468
|
-
The strip measures itself, so
|
|
7469
|
-
|
|
7470
|
-
|
|
7471
|
-
|
|
7472
|
-
|
|
7473
|
-
|
|
7470
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7471
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7472
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7473
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7474
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7475
|
+
plan around.
|
|
7474
7476
|
|
|
7475
7477
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7476
7478
|
container that cannot get narrow. */
|
|
@@ -7534,7 +7536,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
7534
7536
|
the same way `label` becomes `aria-label` in there.
|
|
7535
7537
|
|
|
7536
7538
|
```html
|
|
7537
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
7539
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
7538
7540
|
```
|
|
7539
7541
|
|
|
7540
7542
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -7695,7 +7697,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
7695
7697
|
the same way `label` becomes `aria-label` in there.
|
|
7696
7698
|
|
|
7697
7699
|
```html
|
|
7698
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
7700
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
7699
7701
|
```
|
|
7700
7702
|
|
|
7701
7703
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -7945,10 +7947,10 @@ Read-only to a consumer: it is a report rather than a setting.
|
|
|
7945
7947
|
**Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
7946
7948
|
state, so reflecting it puts the element's own bookkeeping into the markup
|
|
7947
7949
|
a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
7948
|
-
hydration mismatch, and a
|
|
7949
|
-
|
|
7950
|
-
|
|
7951
|
-
|
|
7950
|
+
hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
7951
|
+
declares that a picture has arrived which this element has never fetched.
|
|
7952
|
+
The `data-` name is the library's answer to both, being a name a re-parse
|
|
7953
|
+
cannot mistake for a declaration, and it is what `data-closed` on
|
|
7952
7954
|
`Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
7953
7955
|
which puts this on the safe side of hydration: a fact that can be true on
|
|
7954
7956
|
the *first* update mirrors to a custom state instead, which is what
|
|
@@ -8021,10 +8023,10 @@ Read-only to a consumer: it is a report rather than a setting.
|
|
|
8021
8023
|
**Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
8022
8024
|
state, so reflecting it puts the element's own bookkeeping into the markup
|
|
8023
8025
|
a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
8024
|
-
hydration mismatch, and a
|
|
8025
|
-
|
|
8026
|
-
|
|
8027
|
-
|
|
8026
|
+
hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
8027
|
+
declares that a picture has arrived which this element has never fetched.
|
|
8028
|
+
The `data-` name is the library's answer to both, being a name a re-parse
|
|
8029
|
+
cannot mistake for a declaration, and it is what `data-closed` on
|
|
8028
8030
|
`Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
8029
8031
|
which puts this on the safe side of hydration: a fact that can be true on
|
|
8030
8032
|
the *first* update mirrors to a custom state instead, which is what
|
|
@@ -8093,20 +8095,20 @@ Not a label: it goes when typing starts. */
|
|
|
8093
8095
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8094
8096
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8095
8097
|
HTML writes as one costs what an attribute always costs here: nothing
|
|
8096
|
-
warns. `<helix-input readonly>` is what anybody who has written
|
|
8097
|
-
against `read-only` it parses to no property at all, and the
|
|
8098
|
-
editable with no error anywhere. Measured on the dash-cased
|
|
8099
|
-
came back `false`. */
|
|
8098
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8099
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8100
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8101
|
+
form, `readOnly` came back `false`. */
|
|
8100
8102
|
readonly?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8101
8103
|
/** Whether the field refuses input while still submitting its value.
|
|
8102
8104
|
|
|
8103
8105
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8104
8106
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8105
8107
|
HTML writes as one costs what an attribute always costs here: nothing
|
|
8106
|
-
warns. `<helix-input readonly>` is what anybody who has written
|
|
8107
|
-
against `read-only` it parses to no property at all, and the
|
|
8108
|
-
editable with no error anywhere. Measured on the dash-cased
|
|
8109
|
-
came back `false`. */
|
|
8108
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8109
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8110
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8111
|
+
form, `readOnly` came back `false`. */
|
|
8110
8112
|
readOnly?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8111
8113
|
/** Whether a password field offers a toggle that shows what was typed.
|
|
8112
8114
|
|
|
@@ -8127,9 +8129,9 @@ The state is `aria-pressed`, not this. */
|
|
|
8127
8129
|
|
|
8128
8130
|
**Not reflected.** Reflection exists so a selector can reach a value, and
|
|
8129
8131
|
no stylesheet in this repository selects on `type`. Reflecting it writes
|
|
8130
|
-
`type="text"` onto every `<helix-input>` ever rendered, an
|
|
8131
|
-
consumer's markup has, which is the fault the area rules write
|
|
8132
|
-
`Button`'s `href`, `target` and `rel`.
|
|
8132
|
+
`type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
8133
|
+
attribute no consumer's markup has, which is the fault the area rules write
|
|
8134
|
+
up under `Button`'s `href`, `target` and `rel`.
|
|
8133
8135
|
|
|
8134
8136
|
Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
8135
8137
|
it as a property binding, which is what makes the keyboard and the
|
|
@@ -8247,20 +8249,20 @@ Not a label: it goes when typing starts. */
|
|
|
8247
8249
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8248
8250
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8249
8251
|
HTML writes as one costs what an attribute always costs here: nothing
|
|
8250
|
-
warns. `<helix-input readonly>` is what anybody who has written
|
|
8251
|
-
against `read-only` it parses to no property at all, and the
|
|
8252
|
-
editable with no error anywhere. Measured on the dash-cased
|
|
8253
|
-
came back `false`. */
|
|
8252
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8253
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8254
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8255
|
+
form, `readOnly` came back `false`. */
|
|
8254
8256
|
"bool:readonly"?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8255
8257
|
/** Whether the field refuses input while still submitting its value.
|
|
8256
8258
|
|
|
8257
8259
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8258
8260
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8259
8261
|
HTML writes as one costs what an attribute always costs here: nothing
|
|
8260
|
-
warns. `<helix-input readonly>` is what anybody who has written
|
|
8261
|
-
against `read-only` it parses to no property at all, and the
|
|
8262
|
-
editable with no error anywhere. Measured on the dash-cased
|
|
8263
|
-
came back `false`. */
|
|
8262
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8263
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8264
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8265
|
+
form, `readOnly` came back `false`. */
|
|
8264
8266
|
"prop:readOnly"?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8265
8267
|
/** Whether a password field offers a toggle that shows what was typed.
|
|
8266
8268
|
|
|
@@ -8281,9 +8283,9 @@ The state is `aria-pressed`, not this. */
|
|
|
8281
8283
|
|
|
8282
8284
|
**Not reflected.** Reflection exists so a selector can reach a value, and
|
|
8283
8285
|
no stylesheet in this repository selects on `type`. Reflecting it writes
|
|
8284
|
-
`type="text"` onto every `<helix-input>` ever rendered, an
|
|
8285
|
-
consumer's markup has, which is the fault the area rules write
|
|
8286
|
-
`Button`'s `href`, `target` and `rel`.
|
|
8286
|
+
`type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
8287
|
+
attribute no consumer's markup has, which is the fault the area rules write
|
|
8288
|
+
up under `Button`'s `href`, `target` and `rel`.
|
|
8287
8289
|
|
|
8288
8290
|
Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
8289
8291
|
it as a property binding, which is what makes the keyboard and the
|
|
@@ -8556,8 +8558,7 @@ beside it for instance. `ring` lets the ground through, for a chart drawn
|
|
|
8556
8558
|
over something busy. `triangle` points along the axis and reads as "and
|
|
8557
8559
|
onward" rather than as a second claim about the data.
|
|
8558
8560
|
|
|
8559
|
-
The shapes come from
|
|
8560
|
-
`helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
8561
|
+
The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
8561
8562
|
the set is identical wherever one appears. **Which is why every value is
|
|
8562
8563
|
named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
8563
8564
|
undocumented until the cohort before this one; this family reads the same
|
|
@@ -8667,8 +8668,7 @@ beside it for instance. `ring` lets the ground through, for a chart drawn
|
|
|
8667
8668
|
over something busy. `triangle` points along the axis and reads as "and
|
|
8668
8669
|
onward" rather than as a second claim about the data.
|
|
8669
8670
|
|
|
8670
|
-
The shapes come from
|
|
8671
|
-
`helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
8671
|
+
The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
8672
8672
|
the set is identical wherever one appears. **Which is why every value is
|
|
8673
8673
|
named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
8674
8674
|
undocumented until the cohort before this one; this family reads the same
|
|
@@ -8769,10 +8769,10 @@ has to survive with the stylesheet turned off.
|
|
|
8769
8769
|
label?: (HelixHeadlessList["label"]) | undefined;
|
|
8770
8770
|
/** Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
8771
8771
|
|
|
8772
|
-
Reflected, because this is one of the things a stylesheet selects on
|
|
8773
|
-
|
|
8774
|
-
|
|
8775
|
-
|
|
8772
|
+
Reflected, because this is one of the things a stylesheet selects on, each
|
|
8773
|
+
value mapping to a `list-style-type`. The platform's spellings rather than
|
|
8774
|
+
the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
8775
|
+
consumer would have written on an `<ol>`.
|
|
8776
8776
|
|
|
8777
8777
|
**`start` and `reversed` are both absent and neither can be done here.**
|
|
8778
8778
|
This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -8811,10 +8811,10 @@ has to survive with the stylesheet turned off.
|
|
|
8811
8811
|
"prop:label"?: (HelixHeadlessList["label"]) | undefined;
|
|
8812
8812
|
/** Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
8813
8813
|
|
|
8814
|
-
Reflected, because this is one of the things a stylesheet selects on
|
|
8815
|
-
|
|
8816
|
-
|
|
8817
|
-
|
|
8814
|
+
Reflected, because this is one of the things a stylesheet selects on, each
|
|
8815
|
+
value mapping to a `list-style-type`. The platform's spellings rather than
|
|
8816
|
+
the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
8817
|
+
consumer would have written on an `<ol>`.
|
|
8818
8818
|
|
|
8819
8819
|
**`start` and `reversed` are both absent and neither can be done here.**
|
|
8820
8820
|
This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -9995,10 +9995,10 @@ this element then owns.
|
|
|
9995
9995
|
|
|
9996
9996
|
**Not reflected.** Unread is a visual state, which is why the four mixins
|
|
9997
9997
|
mirror theirs, but the mirror may not be the property's own attribute:
|
|
9998
|
-
`<helix-notification default-read>` comes back from a server
|
|
9999
|
-
and would gain it on the first update, which React reports
|
|
10000
|
-
mismatch, and which a copy of the serialized element
|
|
10001
|
-
declaration. `:state(read)` is what the stylesheet reads.
|
|
9998
|
+
`<helix-headless-notification default-read>` comes back from a server
|
|
9999
|
+
without `read` and would gain it on the first update, which React reports
|
|
10000
|
+
as a hydration mismatch, and which a copy of the serialized element
|
|
10001
|
+
re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
10002
10002
|
`hydration.dom.spec.ts` holds it. */
|
|
10003
10003
|
read?: (HelixHeadlessNotification["read"]) | undefined;
|
|
10004
10004
|
/** State to open with, where nothing declared one. */
|
|
@@ -10050,10 +10050,10 @@ this element then owns.
|
|
|
10050
10050
|
|
|
10051
10051
|
**Not reflected.** Unread is a visual state, which is why the four mixins
|
|
10052
10052
|
mirror theirs, but the mirror may not be the property's own attribute:
|
|
10053
|
-
`<helix-notification default-read>` comes back from a server
|
|
10054
|
-
and would gain it on the first update, which React reports
|
|
10055
|
-
mismatch, and which a copy of the serialized element
|
|
10056
|
-
declaration. `:state(read)` is what the stylesheet reads.
|
|
10053
|
+
`<helix-headless-notification default-read>` comes back from a server
|
|
10054
|
+
without `read` and would gain it on the first update, which React reports
|
|
10055
|
+
as a hydration mismatch, and which a copy of the serialized element
|
|
10056
|
+
re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
10057
10057
|
`hydration.dom.spec.ts` holds it. */
|
|
10058
10058
|
"prop:read"?: (HelixHeadlessNotification["read"]) | undefined;
|
|
10059
10059
|
/** State to open with, where nothing declared one. */
|
|
@@ -10677,7 +10677,7 @@ attribute and the state is the property.
|
|
|
10677
10677
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
10678
10678
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
10679
10679
|
parser created has none of its attributes yet at that moment: measured on
|
|
10680
|
-
this element, on `Radio` and on `Toggle`, `<helix-option value="a"
|
|
10680
|
+
this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
10681
10681
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
10682
10682
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
10683
10683
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -10784,7 +10784,7 @@ attribute and the state is the property.
|
|
|
10784
10784
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
10785
10785
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
10786
10786
|
parser created has none of its attributes yet at that moment: measured on
|
|
10787
|
-
this element, on `Radio` and on `Toggle`, `<helix-option value="a"
|
|
10787
|
+
this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
10788
10788
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
10789
10789
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
10790
10790
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -11387,10 +11387,10 @@ other end is going to reject. A consumer whose codes really do carry
|
|
|
11387
11387
|
marked letters wants `text`, which judges nothing.
|
|
11388
11388
|
|
|
11389
11389
|
**Not reflected**: nothing selects on it, so reflecting only writes
|
|
11390
|
-
`type="numeric"` onto every `<helix-pin-input>` ever rendered, an
|
|
11391
|
-
no consumer's markup had. The area rules carry the sentence
|
|
11392
|
-
what CSS selects on". The real inputs take it as a binding,
|
|
11393
|
-
makes the keyboard follow. */
|
|
11390
|
+
`type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
11391
|
+
attribute no consumer's markup had. The area rules carry the sentence
|
|
11392
|
+
"reflect only what CSS selects on". The real inputs take it as a binding,
|
|
11393
|
+
which is what makes the keyboard follow. */
|
|
11394
11394
|
type?: (HelixHeadlessPinInput["type"]) | undefined;
|
|
11395
11395
|
/** The value the markup declared, which is where a reset returns to. */
|
|
11396
11396
|
"default-value"?: (HelixHeadlessPinInput["defaultValue"]) | undefined;
|
|
@@ -11498,10 +11498,10 @@ other end is going to reject. A consumer whose codes really do carry
|
|
|
11498
11498
|
marked letters wants `text`, which judges nothing.
|
|
11499
11499
|
|
|
11500
11500
|
**Not reflected**: nothing selects on it, so reflecting only writes
|
|
11501
|
-
`type="numeric"` onto every `<helix-pin-input>` ever rendered, an
|
|
11502
|
-
no consumer's markup had. The area rules carry the sentence
|
|
11503
|
-
what CSS selects on". The real inputs take it as a binding,
|
|
11504
|
-
makes the keyboard follow. */
|
|
11501
|
+
`type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
11502
|
+
attribute no consumer's markup had. The area rules carry the sentence
|
|
11503
|
+
"reflect only what CSS selects on". The real inputs take it as a binding,
|
|
11504
|
+
which is what makes the keyboard follow. */
|
|
11505
11505
|
"prop:type"?: (HelixHeadlessPinInput["type"]) | undefined;
|
|
11506
11506
|
/** The value the markup declared, which is where a reset returns to. */
|
|
11507
11507
|
"attr:default-value"?: (HelixHeadlessPinInput["defaultValue"]) | undefined;
|
|
@@ -12080,7 +12080,7 @@ attribute and the state is the property.
|
|
|
12080
12080
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
12081
12081
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
12082
12082
|
parser created has none of its attributes yet at that moment: measured on
|
|
12083
|
-
this element, on `Option` and on `Toggle`, `<helix-radio value="a"
|
|
12083
|
+
this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
12084
12084
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
12085
12085
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
12086
12086
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -12137,7 +12137,7 @@ attribute and the state is the property.
|
|
|
12137
12137
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
12138
12138
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
12139
12139
|
parser created has none of its attributes yet at that moment: measured on
|
|
12140
|
-
this element, on `Option` and on `Toggle`, `<helix-radio value="a"
|
|
12140
|
+
this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
12141
12141
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
12142
12142
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
12143
12143
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -13661,9 +13661,9 @@ the headline and the label is a caption under it.
|
|
|
13661
13661
|
The row directions set them side by side, for a figure in a line of text or
|
|
13662
13662
|
a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
13663
13663
|
|
|
13664
|
-
A property rather than a `
|
|
13665
|
-
|
|
13666
|
-
|
|
13664
|
+
A property rather than a `Flex` around it, because the unit has to stay on
|
|
13665
|
+
the value's baseline whichever way the pair goes, and only this element
|
|
13666
|
+
knows which of its children the unit belongs to.
|
|
13667
13667
|
|
|
13668
13668
|
**Optional rather than defaulted to `column`, which is not a style
|
|
13669
13669
|
preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -13686,9 +13686,9 @@ the headline and the label is a caption under it.
|
|
|
13686
13686
|
The row directions set them side by side, for a figure in a line of text or
|
|
13687
13687
|
a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
13688
13688
|
|
|
13689
|
-
A property rather than a `
|
|
13690
|
-
|
|
13691
|
-
|
|
13689
|
+
A property rather than a `Flex` around it, because the unit has to stay on
|
|
13690
|
+
the value's baseline whichever way the pair goes, and only this element
|
|
13691
|
+
knows which of its children the unit belongs to.
|
|
13692
13692
|
|
|
13693
13693
|
**Optional rather than defaulted to `column`, which is not a style
|
|
13694
13694
|
preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -14043,15 +14043,15 @@ export type HelixHeadlessTableColumnHelixBeforeResizeElementEvent =
|
|
|
14043
14043
|
export type HelixHeadlessTableColumnProps = {
|
|
14044
14044
|
/** Which edge the values line up against.
|
|
14045
14045
|
|
|
14046
|
-
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
14047
|
-
above each other. Left unset the cell inherits the table's own
|
|
14048
|
-
which is `start` for text in either writing direction.
|
|
14049
|
-
aligns the cells it draws. A `
|
|
14050
|
-
wrote, so the table writes nothing onto them: it publishes the
|
|
14051
|
-
cell under this column as `--table-cell-align`, which
|
|
14052
|
-
reads. The heading is this element's own, and
|
|
14053
|
-
the same edge in either table. `end` is the
|
|
14054
|
-
right-to-left table it is the left.
|
|
14046
|
+
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
14047
|
+
sit above each other. Left unset the cell inherits the table's own
|
|
14048
|
+
alignment, which is `start` for text in either writing direction.
|
|
14049
|
+
`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
14050
|
+
consumer wrote, so the table writes nothing onto them: it publishes the
|
|
14051
|
+
edge to each cell under this column as `--table-cell-align`, which
|
|
14052
|
+
`@fusion.dev/helix` reads. The heading is this element's own, and
|
|
14053
|
+
`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
14054
|
+
inline end, so in a right-to-left table it is the left.
|
|
14055
14055
|
|
|
14056
14056
|
**Reflected, because the heading is drawn by a stylesheet and has no other
|
|
14057
14057
|
way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -14098,8 +14098,8 @@ onto its host. */
|
|
|
14098
14098
|
/** The track this column takes, as CSS.
|
|
14099
14099
|
|
|
14100
14100
|
A single track value, so anything valid in `grid-template-columns` works:
|
|
14101
|
-
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
|
|
14102
|
-
|
|
14101
|
+
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
14102
|
+
its place in a `Table`'s `columns`, where that table sets one, and
|
|
14103
14103
|
otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
14104
14104
|
Set here, it wins over that list, which is what lets a reader resize a
|
|
14105
14105
|
column in a table that set one.
|
|
@@ -14145,15 +14145,15 @@ correct default: the raw value is what an API sorted by. */
|
|
|
14145
14145
|
export type HelixHeadlessTableColumnSolidJsProps = {
|
|
14146
14146
|
/** Which edge the values line up against.
|
|
14147
14147
|
|
|
14148
|
-
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
14149
|
-
above each other. Left unset the cell inherits the table's own
|
|
14150
|
-
which is `start` for text in either writing direction.
|
|
14151
|
-
aligns the cells it draws. A `
|
|
14152
|
-
wrote, so the table writes nothing onto them: it publishes the
|
|
14153
|
-
cell under this column as `--table-cell-align`, which
|
|
14154
|
-
reads. The heading is this element's own, and
|
|
14155
|
-
the same edge in either table. `end` is the
|
|
14156
|
-
right-to-left table it is the left.
|
|
14148
|
+
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
14149
|
+
sit above each other. Left unset the cell inherits the table's own
|
|
14150
|
+
alignment, which is `start` for text in either writing direction.
|
|
14151
|
+
`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
14152
|
+
consumer wrote, so the table writes nothing onto them: it publishes the
|
|
14153
|
+
edge to each cell under this column as `--table-cell-align`, which
|
|
14154
|
+
`@fusion.dev/helix` reads. The heading is this element's own, and
|
|
14155
|
+
`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
14156
|
+
inline end, so in a right-to-left table it is the left.
|
|
14157
14157
|
|
|
14158
14158
|
**Reflected, because the heading is drawn by a stylesheet and has no other
|
|
14159
14159
|
way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -14200,8 +14200,8 @@ onto its host. */
|
|
|
14200
14200
|
/** The track this column takes, as CSS.
|
|
14201
14201
|
|
|
14202
14202
|
A single track value, so anything valid in `grid-template-columns` works:
|
|
14203
|
-
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
|
|
14204
|
-
|
|
14203
|
+
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
14204
|
+
its place in a `Table`'s `columns`, where that table sets one, and
|
|
14205
14205
|
otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
14206
14206
|
Set here, it wins over that list, which is what lets a reader resize a
|
|
14207
14207
|
column in a table that set one.
|
|
@@ -14251,15 +14251,14 @@ correct default: the raw value is what an API sorted by. */
|
|
|
14251
14251
|
export type HelixHeadlessTableProps = {
|
|
14252
14252
|
/** The column widths as one track list, written once on the table.
|
|
14253
14253
|
|
|
14254
|
-
With `
|
|
14255
|
-
|
|
14256
|
-
|
|
14257
|
-
|
|
14258
|
-
|
|
14259
|
-
|
|
14260
|
-
|
|
14261
|
-
|
|
14262
|
-
down to one column.
|
|
14254
|
+
With `TableColumn` children, each track sizes the column in its place, a
|
|
14255
|
+
hidden column counted, so hiding one takes its track with it and the rest
|
|
14256
|
+
keep theirs. The columns decide how many tracks there are and this list
|
|
14257
|
+
only how wide: a track past the last column is dropped, and a column past
|
|
14258
|
+
the last track shares what is left. With no columns declared it is the
|
|
14259
|
+
whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
14260
|
+
is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
14261
|
+
its column at the default rather than taking the table down to one column.
|
|
14263
14262
|
|
|
14264
14263
|
**A column's own `width` wins over its track here.** The width is written
|
|
14265
14264
|
on the column it sizes, which is the more particular statement, and it is
|
|
@@ -14273,13 +14272,11 @@ to walk, so a render there knows of no columns and this attribute is the
|
|
|
14273
14272
|
whole answer: a table given one lays its grid out in the first paint, and a
|
|
14274
14273
|
table sized only by its columns is one track wide until it upgrades.
|
|
14275
14274
|
|
|
14276
|
-
|
|
14277
|
-
|
|
14278
|
-
|
|
14279
|
-
|
|
14280
|
-
|
|
14281
|
-
take the same CSS hook, `--table-columns` and `--data-table-columns`, which
|
|
14282
|
-
wins over whichever list the element worked out. */
|
|
14275
|
+
**Data Table has none of this, and should not.** Its columns are its schema
|
|
14276
|
+
rather than an option, so there is always a column to write a `width` on
|
|
14277
|
+
and a list here would be a second way to say what that says. This table's
|
|
14278
|
+
cells are markup, and a table written as rows of cells with no column
|
|
14279
|
+
declared in it has nowhere else to be sized from. */
|
|
14283
14280
|
columns?: (HelixHeadlessTable["columns"]) | undefined;
|
|
14284
14281
|
/** Accessible name for the table. */
|
|
14285
14282
|
label?: (HelixHeadlessTable["label"]) | undefined;
|
|
@@ -14302,15 +14299,14 @@ say that without the component knowing what a row looks like. */
|
|
|
14302
14299
|
export type HelixHeadlessTableSolidJsProps = {
|
|
14303
14300
|
/** The column widths as one track list, written once on the table.
|
|
14304
14301
|
|
|
14305
|
-
With `
|
|
14306
|
-
|
|
14307
|
-
|
|
14308
|
-
|
|
14309
|
-
|
|
14310
|
-
|
|
14311
|
-
|
|
14312
|
-
|
|
14313
|
-
down to one column.
|
|
14302
|
+
With `TableColumn` children, each track sizes the column in its place, a
|
|
14303
|
+
hidden column counted, so hiding one takes its track with it and the rest
|
|
14304
|
+
keep theirs. The columns decide how many tracks there are and this list
|
|
14305
|
+
only how wide: a track past the last column is dropped, and a column past
|
|
14306
|
+
the last track shares what is left. With no columns declared it is the
|
|
14307
|
+
whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
14308
|
+
is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
14309
|
+
its column at the default rather than taking the table down to one column.
|
|
14314
14310
|
|
|
14315
14311
|
**A column's own `width` wins over its track here.** The width is written
|
|
14316
14312
|
on the column it sizes, which is the more particular statement, and it is
|
|
@@ -14324,13 +14320,11 @@ to walk, so a render there knows of no columns and this attribute is the
|
|
|
14324
14320
|
whole answer: a table given one lays its grid out in the first paint, and a
|
|
14325
14321
|
table sized only by its columns is one track wide until it upgrades.
|
|
14326
14322
|
|
|
14327
|
-
|
|
14328
|
-
|
|
14329
|
-
|
|
14330
|
-
|
|
14331
|
-
|
|
14332
|
-
take the same CSS hook, `--table-columns` and `--data-table-columns`, which
|
|
14333
|
-
wins over whichever list the element worked out. */
|
|
14323
|
+
**Data Table has none of this, and should not.** Its columns are its schema
|
|
14324
|
+
rather than an option, so there is always a column to write a `width` on
|
|
14325
|
+
and a list here would be a second way to say what that says. This table's
|
|
14326
|
+
cells are markup, and a table written as rows of cells with no column
|
|
14327
|
+
declared in it has nowhere else to be sized from. */
|
|
14334
14328
|
"prop:columns"?: (HelixHeadlessTable["columns"]) | undefined;
|
|
14335
14329
|
/** Accessible name for the table. */
|
|
14336
14330
|
"prop:label"?: (HelixHeadlessTable["label"]) | undefined;
|
|
@@ -14956,8 +14950,8 @@ Absent uses the runtime's own. */
|
|
|
14956
14950
|
|
|
14957
14951
|
Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
14958
14952
|
number, and both are carried as one comma-separated value, which is what a
|
|
14959
|
-
form submits. `
|
|
14960
|
-
why a wheel cannot do either. */
|
|
14953
|
+
form submits. `TimePicker` carries the longer note on the interaction and
|
|
14954
|
+
on why a wheel cannot do either. */
|
|
14961
14955
|
mode?: (HelixHeadlessTimeInput["mode"]) | undefined;
|
|
14962
14956
|
/** What the field says before a time is in it. */
|
|
14963
14957
|
placeholder?: (HelixHeadlessTimeInput["placeholder"]) | undefined;
|
|
@@ -14986,7 +14980,7 @@ never something this element would refuse to read back. */
|
|
|
14986
14980
|
`list` offers whole times, which is what a product with slots or opening
|
|
14987
14981
|
hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
14988
14982
|
the locale uses one, which is the only way to reach `23:45` without
|
|
14989
|
-
scrolling most of a day. `
|
|
14983
|
+
scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
14990
14984
|
|
|
14991
14985
|
**Optional rather than defaulted, which is not a style preference.** A
|
|
14992
14986
|
reflecting property with a default writes its attribute onto every host the
|
|
@@ -15144,8 +15138,8 @@ Absent uses the runtime's own. */
|
|
|
15144
15138
|
|
|
15145
15139
|
Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
15146
15140
|
number, and both are carried as one comma-separated value, which is what a
|
|
15147
|
-
form submits. `
|
|
15148
|
-
why a wheel cannot do either. */
|
|
15141
|
+
form submits. `TimePicker` carries the longer note on the interaction and
|
|
15142
|
+
on why a wheel cannot do either. */
|
|
15149
15143
|
"prop:mode"?: (HelixHeadlessTimeInput["mode"]) | undefined;
|
|
15150
15144
|
/** What the field says before a time is in it. */
|
|
15151
15145
|
"prop:placeholder"?: (HelixHeadlessTimeInput["placeholder"]) | undefined;
|
|
@@ -15174,7 +15168,7 @@ never something this element would refuse to read back. */
|
|
|
15174
15168
|
`list` offers whole times, which is what a product with slots or opening
|
|
15175
15169
|
hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
15176
15170
|
the locale uses one, which is the only way to reach `23:45` without
|
|
15177
|
-
scrolling most of a day. `
|
|
15171
|
+
scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
15178
15172
|
|
|
15179
15173
|
**Optional rather than defaulted, which is not a style preference.** A
|
|
15180
15174
|
reflecting property with a default writes its attribute onto every host the
|
|
@@ -15372,7 +15366,7 @@ Absent uses the runtime's own. */
|
|
|
15372
15366
|
|
|
15373
15367
|
Absent is one. `range` holds a start and an end with everything between
|
|
15374
15368
|
them shown as part of the answer, `multiple` holds any number, and both are
|
|
15375
|
-
carried as one comma-separated value: the same shape `
|
|
15369
|
+
carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
15376
15370
|
because it is the same question asked of a different unit.
|
|
15377
15371
|
|
|
15378
15372
|
**A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -15546,7 +15540,7 @@ Absent uses the runtime's own. */
|
|
|
15546
15540
|
|
|
15547
15541
|
Absent is one. `range` holds a start and an end with everything between
|
|
15548
15542
|
them shown as part of the answer, `multiple` holds any number, and both are
|
|
15549
|
-
carried as one comma-separated value: the same shape `
|
|
15543
|
+
carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
15550
15544
|
because it is the same question asked of a different unit.
|
|
15551
15545
|
|
|
15552
15546
|
**A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -15845,7 +15839,7 @@ where they were would not be a stack.
|
|
|
15845
15839
|
**Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
15846
15840
|
defaulting is the pair that writes onto a host: every toast region anybody
|
|
15847
15841
|
rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
15848
|
-
consumer's server markup does not have.
|
|
15842
|
+
consumer's server markup does not have. A sheet carries the resting
|
|
15849
15843
|
arrangement in its own `:host` rule and the selectors describe only the
|
|
15850
15844
|
departures, which is what `orientation` does. */
|
|
15851
15845
|
placement?: (HelixHeadlessToast["placement"]) | undefined;
|
|
@@ -15866,7 +15860,7 @@ where they were would not be a stack.
|
|
|
15866
15860
|
**Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
15867
15861
|
defaulting is the pair that writes onto a host: every toast region anybody
|
|
15868
15862
|
rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
15869
|
-
consumer's server markup does not have.
|
|
15863
|
+
consumer's server markup does not have. A sheet carries the resting
|
|
15870
15864
|
arrangement in its own `:host` rule and the selectors describe only the
|
|
15871
15865
|
departures, which is what `orientation` does. */
|
|
15872
15866
|
"prop:placement"?: (HelixHeadlessToast["placement"]) | undefined;
|
|
@@ -16107,11 +16101,11 @@ attribute and the state is the property.
|
|
|
16107
16101
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
16108
16102
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
16109
16103
|
parser created has none of its attributes yet at that moment: measured on
|
|
16110
|
-
this element, on `Option` and on `Radio`, `<helix-toggle
|
|
16111
|
-
selected>` reported `defaultSelected` as `false` both from
|
|
16112
|
-
and from `createElement` followed by `setAttribute`, which is
|
|
16113
|
-
consumer writes one. The snapshot could only ever be true for
|
|
16114
|
-
already in the document when `customElements.define` ran.
|
|
16104
|
+
this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
16105
|
+
value="light" selected>` reported `defaultSelected` as `false` both from
|
|
16106
|
+
parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
16107
|
+
every way a consumer writes one. The snapshot could only ever be true for
|
|
16108
|
+
an element already in the document when `customElements.define` ran.
|
|
16115
16109
|
|
|
16116
16110
|
Nothing overwrites it either, which is what makes reading it late correct
|
|
16117
16111
|
rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -16157,11 +16151,11 @@ attribute and the state is the property.
|
|
|
16157
16151
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
16158
16152
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
16159
16153
|
parser created has none of its attributes yet at that moment: measured on
|
|
16160
|
-
this element, on `Option` and on `Radio`, `<helix-toggle
|
|
16161
|
-
selected>` reported `defaultSelected` as `false` both from
|
|
16162
|
-
and from `createElement` followed by `setAttribute`, which is
|
|
16163
|
-
consumer writes one. The snapshot could only ever be true for
|
|
16164
|
-
already in the document when `customElements.define` ran.
|
|
16154
|
+
this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
16155
|
+
value="light" selected>` reported `defaultSelected` as `false` both from
|
|
16156
|
+
parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
16157
|
+
every way a consumer writes one. The snapshot could only ever be true for
|
|
16158
|
+
an element already in the document when `customElements.define` ran.
|
|
16165
16159
|
|
|
16166
16160
|
Nothing overwrites it either, which is what makes reading it late correct
|
|
16167
16161
|
rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -17962,7 +17956,7 @@ export type CustomElements = {
|
|
|
17962
17956
|
* item added a second after render coordinates on its first click.
|
|
17963
17957
|
*
|
|
17964
17958
|
* Items are matched with `instanceof HelixHeadlessAccordionItem`, never by tag
|
|
17965
|
-
* name
|
|
17959
|
+
* name, so this tier does not learn about the styled one.
|
|
17966
17960
|
*
|
|
17967
17961
|
* The keyboard listener is the controller's and is attached on connect, so
|
|
17968
17962
|
* none of it runs on the server, where there is no tree to walk and no events
|
|
@@ -18450,13 +18444,13 @@ export type CustomElements = {
|
|
|
18450
18444
|
* Unset shows all of them, which is what no limit means and is more useful
|
|
18451
18445
|
* than refusing to render.
|
|
18452
18446
|
*
|
|
18453
|
-
* **Reflected, because the fold is a stylesheet rule and nothing else.**
|
|
18454
|
-
*
|
|
18455
|
-
* so the attribute *is* the mechanism: a `max` that reaches this
|
|
18456
|
-
* never reaches the host matches no rule, and every avatar is
|
|
18457
|
-
* count claiming some are hidden. Markup is the safe path and
|
|
18458
|
-
* a script is the broken one, and React takes it for
|
|
18459
|
-
* matching property rather than an attribute.
|
|
18447
|
+
* **Reflected, because the fold is a stylesheet rule and nothing else.** A
|
|
18448
|
+
* sheet hides past the limit one selector per value, as `FOLDS_UP_TO`
|
|
18449
|
+
* describes, so the attribute *is* the mechanism: a `max` that reaches this
|
|
18450
|
+
* property and never reaches the host matches no rule, and every avatar is
|
|
18451
|
+
* drawn beside a count claiming some are hidden. Markup is the safe path and
|
|
18452
|
+
* hides the fault; a script is the broken one, and React takes it for
|
|
18453
|
+
* everyone, assigning a matching property rather than an attribute.
|
|
18460
18454
|
*
|
|
18461
18455
|
* **Optional rather than defaulted, per the rule that a reflected property
|
|
18462
18456
|
* takes no default**: `max = 0` would stamp `max="0"` onto every host that
|
|
@@ -18869,7 +18863,7 @@ export type CustomElements = {
|
|
|
18869
18863
|
* CSS variables available for styling the component.
|
|
18870
18864
|
*
|
|
18871
18865
|
* - `--bar-chart-axis`: How wide an axis column is drawn, in `ch`, from the widest number on it. Written on the axis itself, and only where the categories run along the bottom: turned sideways an axis is a row and takes a line's height instead. (default: `undefined`)
|
|
18872
|
-
* - `--bar-chart-secondary`: The color of the secondary axis
|
|
18866
|
+
* - `--bar-chart-secondary`: The color of the secondary axis, where one series owns it. Written by the component from that series' `--chart-series-*`, so it promises the series color and nothing more: whatever that hook resolves to is what the axis is drawn in. (default: `undefined`)
|
|
18873
18867
|
* - `--chart-bar-wash`: The gradient a bar would take, named per bar so the styled tier can point `fill` at it. Drawn whatever the treatment and used only where `wash="gradient"` asks for it. (default: `undefined`)
|
|
18874
18868
|
*
|
|
18875
18869
|
* ## CSS Parts
|
|
@@ -19012,12 +19006,12 @@ export type CustomElements = {
|
|
|
19012
19006
|
* - `current`: Whether this item is the page the reader is on.
|
|
19013
19007
|
* - `href`: Where the crumb goes, and nothing where it is the current page.
|
|
19014
19008
|
*
|
|
19015
|
-
* **Optional and reflected, because a stylesheet does select on it.**
|
|
19016
|
-
*
|
|
19017
|
-
*
|
|
19018
|
-
*
|
|
19019
|
-
* the
|
|
19020
|
-
*
|
|
19009
|
+
* **Optional and reflected, because a stylesheet does select on it.** A sheet
|
|
19010
|
+
* writes `:host(:not([href])) [part="link"]` to take the block padding off a
|
|
19011
|
+
* crumb that is not a link, so the attribute is what decides how tall a crumb
|
|
19012
|
+
* is. Unreflected, an `href` set from script reached the property, rendered
|
|
19013
|
+
* the anchor, and left the host looking unlinked: the crumb drew at 20px
|
|
19014
|
+
* where a markup twin drew at 28.
|
|
19021
19015
|
*
|
|
19022
19016
|
* Optional rather than defaulted, which is the general rule that a reflected
|
|
19023
19017
|
* property takes no default: an `href` written onto every host would be a link
|
|
@@ -19254,7 +19248,7 @@ export type CustomElements = {
|
|
|
19254
19248
|
* the same way `label` becomes `aria-label` in there.
|
|
19255
19249
|
*
|
|
19256
19250
|
* ```html
|
|
19257
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
19251
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
19258
19252
|
* ```
|
|
19259
19253
|
*
|
|
19260
19254
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -19530,7 +19524,7 @@ export type CustomElements = {
|
|
|
19530
19524
|
*
|
|
19531
19525
|
* The host is the surface. A wrapper `<div part="container">` would be a second
|
|
19532
19526
|
* box doing nothing the host cannot: the element itself takes the border, the
|
|
19533
|
-
* radius, and the grid, and a consumer styles `
|
|
19527
|
+
* radius, and the grid, and a consumer styles `Card` rather than reaching
|
|
19534
19528
|
* through `::part`. One node instead of two, on every card on the page.
|
|
19535
19529
|
*
|
|
19536
19530
|
* Name the card with `aria-label` or `aria-labelledby`. That is the only
|
|
@@ -19679,13 +19673,13 @@ export type CustomElements = {
|
|
|
19679
19673
|
* **The number is published to the styles rather than enumerated by them**,
|
|
19680
19674
|
* as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
19681
19675
|
* count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
19682
|
-
* so
|
|
19683
|
-
*
|
|
19684
|
-
*
|
|
19685
|
-
* three dots, a pane taking the whole track and five slides
|
|
19686
|
-
* dragging.
|
|
19687
|
-
*
|
|
19688
|
-
*
|
|
19676
|
+
* so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
19677
|
+
* above it the pane falls back to one across while this file goes on counting
|
|
19678
|
+
* positions. Measured in Chromium over eight slides against such a sheet, six
|
|
19679
|
+
* across gave three dots, a pane taking the whole track and five slides
|
|
19680
|
+
* reachable only by dragging. Published from here there is no ceiling to
|
|
19681
|
+
* exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
19682
|
+
* correction the same way and for the same reason.
|
|
19689
19683
|
*
|
|
19690
19684
|
* **On the track and not on the host.** A custom property on the host is a
|
|
19691
19685
|
* reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -19710,8 +19704,8 @@ export type CustomElements = {
|
|
|
19710
19704
|
* `auto` track is handed nothing. A count stays for the design that calls for
|
|
19711
19705
|
* exactly three.
|
|
19712
19706
|
*
|
|
19713
|
-
*
|
|
19714
|
-
*
|
|
19707
|
+
* A sheet says how it divides, and the `auto` example here carries the same
|
|
19708
|
+
* three lines for a consumer writing their own.
|
|
19715
19709
|
*
|
|
19716
19710
|
* **A value rather than the resting behavior**, which is what the
|
|
19717
19711
|
* responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -20085,13 +20079,13 @@ export type CustomElements = {
|
|
|
20085
20079
|
*
|
|
20086
20080
|
* **Not reflected, and the default is why.** A reflected property that
|
|
20087
20081
|
* defaults to true writes its attribute on upgrade whether or not the
|
|
20088
|
-
* consumer wrote one, so the server serves `<helix-chat label="x">`
|
|
20089
|
-
* client turns it into `<helix-chat label="x" pinned>`: a
|
|
20090
|
-
* React consumer reports and does not patch up. Nothing
|
|
20091
|
-
* either, because the one thing that changes with the pin
|
|
20092
|
-
* that is a part inside the shadow tree where a
|
|
20093
|
-
* it. Measured rather than assumed: `label,
|
|
20094
|
-
* `label` from the server.
|
|
20082
|
+
* consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
20083
|
+
* and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
20084
|
+
* hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
20085
|
+
* needs the attribute either, because the one thing that changes with the pin
|
|
20086
|
+
* is the way back, and that is a part inside the shadow tree where a
|
|
20087
|
+
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
20088
|
+
* pinned` after upgrade against `label` from the server.
|
|
20095
20089
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
20096
20090
|
*
|
|
20097
20091
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -20148,7 +20142,7 @@ export type CustomElements = {
|
|
|
20148
20142
|
*
|
|
20149
20143
|
* Areas where markup can be added to the component.
|
|
20150
20144
|
*
|
|
20151
|
-
* - `(default)`: The turns
|
|
20145
|
+
* - `(default)`: The turns.
|
|
20152
20146
|
* - `actions`: Beside the header: what can be done to the conversation itself.
|
|
20153
20147
|
* - `composer`: Below the transcript, where the reader writes.
|
|
20154
20148
|
* - `header`: Above the transcript: what this conversation is.
|
|
@@ -20611,11 +20605,11 @@ export type CustomElements = {
|
|
|
20611
20605
|
* round. The platform already writes booleans like this for the same reason,
|
|
20612
20606
|
* `novalidate` and `nomodule` and `noreferrer` among them.
|
|
20613
20607
|
*
|
|
20614
|
-
* **Reflected, because the gutter is a stylesheet rule.**
|
|
20615
|
-
*
|
|
20616
|
-
*
|
|
20617
|
-
*
|
|
20618
|
-
*
|
|
20608
|
+
* **Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
20609
|
+
* the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
20610
|
+
* what decides whether the block pays for a control. Unreflected, setting it
|
|
20611
|
+
* from script takes the button away (`render` reads the property) and leaves
|
|
20612
|
+
* the 40px it stood in reserved.
|
|
20619
20613
|
*
|
|
20620
20614
|
* A false boolean reflects as the attribute's absence, so this costs no
|
|
20621
20615
|
* `no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -20759,11 +20753,11 @@ export type CustomElements = {
|
|
|
20759
20753
|
>;
|
|
20760
20754
|
|
|
20761
20755
|
/**
|
|
20762
|
-
* **The picker is `
|
|
20756
|
+
* **The picker is `ColorPicker`, not a second one written here.** It owns the
|
|
20763
20757
|
* square, the ramps, the eyedropper and the syntax toggle, and it is worth
|
|
20764
20758
|
* having on its own: a settings pane wants a picker flat on the page with
|
|
20765
20759
|
* nothing to open. This element is the field, the overlay, and the form.
|
|
20766
|
-
* Exactly the arrangement Date Input has with `
|
|
20760
|
+
* Exactly the arrangement Date Input has with `DatePicker`.
|
|
20767
20761
|
*
|
|
20768
20762
|
* **Typed as well as picked, and the typing is the reason this is not
|
|
20769
20763
|
* `<input type="color">`.** The native control gives a free picker and takes
|
|
@@ -21123,10 +21117,10 @@ export type CustomElements = {
|
|
|
21123
21117
|
*
|
|
21124
21118
|
* **A color is exactly as requirable as a date**, which is the comparison
|
|
21125
21119
|
* that settles it: this element extends `HelixFormElement`, carries `name`
|
|
21126
|
-
* and reports its value, so a consumer writing
|
|
21127
|
-
*
|
|
21128
|
-
* to
|
|
21129
|
-
*
|
|
21120
|
+
* and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
21121
|
+
* name="brand" required>` inside a form has every reason to expect the form
|
|
21122
|
+
* to refuse an empty one. Its two siblings in the same composition position,
|
|
21123
|
+
* Date Picker and Time Picker, both check it.
|
|
21130
21124
|
*
|
|
21131
21125
|
* Written out rather than taken from `MixinField`, for the reason those two
|
|
21132
21126
|
* record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -21317,10 +21311,10 @@ export type CustomElements = {
|
|
|
21317
21311
|
>;
|
|
21318
21312
|
|
|
21319
21313
|
/**
|
|
21320
|
-
* **The list is `
|
|
21321
|
-
*
|
|
21322
|
-
*
|
|
21323
|
-
* the
|
|
21314
|
+
* **The list is `Listbox`, and the filtering is its own.** It owns narrowing,
|
|
21315
|
+
* the empty state, the highlight, `aria-activedescendant` and scrolling an
|
|
21316
|
+
* option into view. What is left for this element is the field, the panel and
|
|
21317
|
+
* the traffic between them.
|
|
21324
21318
|
*
|
|
21325
21319
|
* **The text and the value are two things.** What a reader types is a filter:
|
|
21326
21320
|
* it narrows the list and is thrown away. The value is whichever option they
|
|
@@ -21491,7 +21485,7 @@ export type CustomElements = {
|
|
|
21491
21485
|
*
|
|
21492
21486
|
* Areas where markup can be added to the component.
|
|
21493
21487
|
*
|
|
21494
|
-
* - `(default)`: The options
|
|
21488
|
+
* - `(default)`: The options.
|
|
21495
21489
|
* - `end`: After it, for a unit or a clear button.
|
|
21496
21490
|
* - `indicator`: Replaces the caret saying the field opens.
|
|
21497
21491
|
* - `start`: Before the text, for an icon.
|
|
@@ -21602,12 +21596,11 @@ export type CustomElements = {
|
|
|
21602
21596
|
>;
|
|
21603
21597
|
|
|
21604
21598
|
/**
|
|
21605
|
-
* **The list is `
|
|
21606
|
-
*
|
|
21607
|
-
*
|
|
21608
|
-
*
|
|
21609
|
-
*
|
|
21610
|
-
* and a key that summons it.
|
|
21599
|
+
* **The list is `Listbox`, filtering and all.** Listbox already owns narrowing,
|
|
21600
|
+
* the empty state, the highlight over what matched, `aria-activedescendant`,
|
|
21601
|
+
* scrolling an option into view and the keyboard that moves between them. Its
|
|
21602
|
+
* own note says a command palette is that list again with something different
|
|
21603
|
+
* opening it, and this is that something: a dialog, and a key that summons it.
|
|
21611
21604
|
*
|
|
21612
21605
|
* **The value is not kept.** A palette runs a command and forgets it: nothing
|
|
21613
21606
|
* here is a form control and nothing is submitted, so what it reports is that
|
|
@@ -21684,7 +21677,7 @@ export type CustomElements = {
|
|
|
21684
21677
|
*
|
|
21685
21678
|
* Areas where markup can be added to the component.
|
|
21686
21679
|
*
|
|
21687
|
-
* - `(default)`: The commands,
|
|
21680
|
+
* - `(default)`: The commands, and any groups of them.
|
|
21688
21681
|
* - `footer`: Under the list, for the keys a reader can press.
|
|
21689
21682
|
*
|
|
21690
21683
|
* ## Methods
|
|
@@ -21771,7 +21764,7 @@ export type CustomElements = {
|
|
|
21771
21764
|
* the same way `label` becomes `aria-label` in there.
|
|
21772
21765
|
*
|
|
21773
21766
|
* ```html
|
|
21774
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
21767
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
21775
21768
|
* ```
|
|
21776
21769
|
*
|
|
21777
21770
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -21969,19 +21962,19 @@ export type CustomElements = {
|
|
|
21969
21962
|
|
|
21970
21963
|
/**
|
|
21971
21964
|
* **The schema is markup and the data is a property.** Columns are declared as
|
|
21972
|
-
* `
|
|
21973
|
-
*
|
|
21974
|
-
*
|
|
21965
|
+
* `TableColumn` children, because a schema is small and something a reader
|
|
21966
|
+
* should see in the HTML; rows are handed over as an array, because a table
|
|
21967
|
+
* that draws ten thousand elements cannot window them.
|
|
21975
21968
|
*
|
|
21976
21969
|
* ```html
|
|
21977
|
-
* <helix-data-table .rows=${rows} sort="name:asc" page-size="20">
|
|
21978
|
-
* <helix-table-column field="name" sortable>Name</helix-table-column>
|
|
21979
|
-
* <helix-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-table-column>
|
|
21980
|
-
* </helix-data-table>
|
|
21970
|
+
* <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
|
|
21971
|
+
* <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
|
|
21972
|
+
* <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
|
|
21973
|
+
* </helix-headless-data-table>
|
|
21981
21974
|
* ```
|
|
21982
21975
|
*
|
|
21983
|
-
* `
|
|
21984
|
-
*
|
|
21976
|
+
* `Table` takes rows as markup and is the right component for a table of twelve
|
|
21977
|
+
* things a person wrote out.
|
|
21985
21978
|
*
|
|
21986
21979
|
* **Sort and filter apply to the whole set, never the page.** Sorting the drawn
|
|
21987
21980
|
* window is correct on the first screen and wrong on every other one.
|
|
@@ -21990,7 +21983,7 @@ export type CustomElements = {
|
|
|
21990
21983
|
* elements do, but reading a cell needs the columns, and the columns are markup
|
|
21991
21984
|
* children Lit SSR does not hand this element. So a crawler sees a table of the
|
|
21992
21985
|
* right shape with nothing in it. That is the cost of the first paragraph: use
|
|
21993
|
-
* `
|
|
21986
|
+
* `Table` where the served HTML has to carry the values.
|
|
21994
21987
|
*
|
|
21995
21988
|
* **`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is
|
|
21996
21989
|
* selected by its identity rather than its position, so a selection survives a
|
|
@@ -22011,14 +22004,13 @@ export type CustomElements = {
|
|
|
22011
22004
|
* in the order on screen, in the columns on screen. Saving it is the page's
|
|
22012
22005
|
* business, the same as any other file.
|
|
22013
22006
|
*
|
|
22014
|
-
* **There is no `columns` attribute here, and
|
|
22015
|
-
*
|
|
22016
|
-
*
|
|
22017
|
-
*
|
|
22018
|
-
*
|
|
22019
|
-
*
|
|
22020
|
-
*
|
|
22021
|
-
* `--data-table-columns` here and `--table-columns` there.
|
|
22007
|
+
* **There is no `columns` attribute here, and Table has one.** The difference
|
|
22008
|
+
* is what a column is in each: here it is the schema, so a table without one
|
|
22009
|
+
* has nothing to read a row with, and every column is a place to write a
|
|
22010
|
+
* `width`. A Table holds cells a consumer wrote and can be written with no
|
|
22011
|
+
* column at all, so its `columns` is where such a table is sized from. Written
|
|
22012
|
+
* on this element the attribute is inert, which is the trap worth knowing when
|
|
22013
|
+
* moving between the two.
|
|
22022
22014
|
*
|
|
22023
22015
|
* ## Attributes & Properties
|
|
22024
22016
|
*
|
|
@@ -22099,9 +22091,9 @@ export type CustomElements = {
|
|
|
22099
22091
|
*
|
|
22100
22092
|
* **It announces nothing, and that is not an omission.** Nothing in this
|
|
22101
22093
|
* element ever asks for a different page size: a size selector is
|
|
22102
|
-
* `
|
|
22103
|
-
*
|
|
22104
|
-
*
|
|
22094
|
+
* `PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
22095
|
+
* themselves. Routing this through `requestChange` would announce an event
|
|
22096
|
+
* the element never has cause to fire.
|
|
22105
22097
|
* - `total`: How many rows the whole result has, where this element cannot count them.
|
|
22106
22098
|
*
|
|
22107
22099
|
* Only read in `server` mode, where `rows` is one page and its length says
|
|
@@ -22188,7 +22180,7 @@ export type CustomElements = {
|
|
|
22188
22180
|
*
|
|
22189
22181
|
* Areas where markup can be added to the component.
|
|
22190
22182
|
*
|
|
22191
|
-
* - `(default)`: The columns, declared
|
|
22183
|
+
* - `(default)`: The columns, declared rather than drawn.
|
|
22192
22184
|
* - `footer`: Below the grid, replacing the pagination this would otherwise draw.
|
|
22193
22185
|
* - `toolbar`: Above the grid, for a search field or actions.
|
|
22194
22186
|
*
|
|
@@ -22224,8 +22216,8 @@ export type CustomElements = {
|
|
|
22224
22216
|
*
|
|
22225
22217
|
* CSS variables available for styling the component.
|
|
22226
22218
|
*
|
|
22227
|
-
* - `--data-table-cell-align`: The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one;
|
|
22228
|
-
* - `--data-table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet.
|
|
22219
|
+
* - `--data-table-cell-align`: The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; Table publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. (default: `undefined`)
|
|
22220
|
+
* - `--data-table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. A column's `width` is the one to set. (default: `undefined`)
|
|
22229
22221
|
*
|
|
22230
22222
|
* ## CSS Parts
|
|
22231
22223
|
*
|
|
@@ -22280,9 +22272,9 @@ export type CustomElements = {
|
|
|
22280
22272
|
>;
|
|
22281
22273
|
|
|
22282
22274
|
/**
|
|
22283
|
-
* **The calendar is `
|
|
22284
|
-
*
|
|
22285
|
-
*
|
|
22275
|
+
* **The calendar is `DatePicker`, not a second one written here.** It already
|
|
22276
|
+
* knows about months, ranges, disabled days, the first day of the week and
|
|
22277
|
+
* every keyboard rule a grid owes a reader. This element is the field, the
|
|
22286
22278
|
* overlay, and the translation between them.
|
|
22287
22279
|
*
|
|
22288
22280
|
* **Typed as well as picked, and the typing is why it is not
|
|
@@ -23386,8 +23378,8 @@ export type CustomElements = {
|
|
|
23386
23378
|
* Opened declaratively with the platform's invoker attributes:
|
|
23387
23379
|
*
|
|
23388
23380
|
* ```html
|
|
23389
|
-
* <helix-button commandfor="nav" command="--toggle">Menu</helix-button>
|
|
23390
|
-
* <helix-drawer id="nav">…</helix-drawer>
|
|
23381
|
+
* <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button>
|
|
23382
|
+
* <helix-headless-drawer id="nav">…</helix-headless-drawer>
|
|
23391
23383
|
* ```
|
|
23392
23384
|
*
|
|
23393
23385
|
* ## Attributes & Properties
|
|
@@ -23418,10 +23410,10 @@ export type CustomElements = {
|
|
|
23418
23410
|
* not, rather than shown or hidden by CSS.
|
|
23419
23411
|
* - `placement`: Which edge the drawer comes from.
|
|
23420
23412
|
*
|
|
23421
|
-
* Unset is `end`,
|
|
23422
|
-
* beside `:host([placement="end"])` rather than as a value written here: a
|
|
23413
|
+
* Unset is `end`, and it stays unset rather than being written down: a
|
|
23423
23414
|
* default assigned to the property would reflect onto every host and put a
|
|
23424
|
-
* `placement="end"` into markup no consumer wrote.
|
|
23415
|
+
* `placement="end"` into markup no consumer wrote. So what this tier
|
|
23416
|
+
* guarantees is the absence, and a sheet selects on it.
|
|
23425
23417
|
* - `open`: Whether the element is open.
|
|
23426
23418
|
*
|
|
23427
23419
|
* One property, not two, so `dialog.open` answers the question anyone
|
|
@@ -24304,7 +24296,13 @@ export type CustomElements = {
|
|
|
24304
24296
|
* - `fields`: The fields declared inside this, in the order they were written.
|
|
24305
24297
|
*
|
|
24306
24298
|
* What a render may know of them: none on a server, whose shim has no tree
|
|
24307
|
-
* and threw here, and none while hydrating what one sent.
|
|
24299
|
+
* and threw here, and none while hydrating what one sent.
|
|
24300
|
+
*
|
|
24301
|
+
* By identity rather than by tag. A list of names can only hold the tags this
|
|
24302
|
+
* package knows about, so it misses any third one, which is what subclassing
|
|
24303
|
+
* a headless element produces, and it is also how a headless package learns a
|
|
24304
|
+
* styled tag. `instanceof` answers for every one of them and proves the type
|
|
24305
|
+
* the signature claims. (property only) (readonly)
|
|
24308
24306
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
24309
24307
|
*
|
|
24310
24308
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -24541,12 +24539,12 @@ export type CustomElements = {
|
|
|
24541
24539
|
* `FilterField` already plays on its own children.
|
|
24542
24540
|
*
|
|
24543
24541
|
* **It can suggest what to type next, and deciding what to suggest is still the
|
|
24544
|
-
* consumer's.** Slot
|
|
24545
|
-
*
|
|
24546
|
-
*
|
|
24547
|
-
*
|
|
24548
|
-
*
|
|
24549
|
-
*
|
|
24542
|
+
* consumer's.** Slot options into `suggestions` and the field shows them, moves
|
|
24543
|
+
* through them with the arrows, and lets Enter press one; the option fires its
|
|
24544
|
+
* own `helix-select` and the consumer decides what choosing meant. Keys before
|
|
24545
|
+
* a colon and values after it are the same panel with different contents, and
|
|
24546
|
+
* `readFilterText` is exported for a consumer narrowing that panel against what
|
|
24547
|
+
* a reader has half typed.
|
|
24550
24548
|
*
|
|
24551
24549
|
* **The panel opens when there is something in it and closes when there is
|
|
24552
24550
|
* not**, rather than on a choice. A reader who picks a key wants its values
|
|
@@ -24844,11 +24842,12 @@ export type CustomElements = {
|
|
|
24844
24842
|
* would give.
|
|
24845
24843
|
*
|
|
24846
24844
|
* **The element's own text is read as a fallback, and only in a browser.**
|
|
24847
|
-
* `<helix-
|
|
24848
|
-
*
|
|
24849
|
-
*
|
|
24850
|
-
*
|
|
24851
|
-
*
|
|
24845
|
+
* `<helix-headless-format-date
|
|
24846
|
+
* elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
24847
|
+
* that reads best in markup, and it cannot be the only one: measured against
|
|
24848
|
+
* Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
24849
|
+
* `querySelector` are all `undefined` there, so a server has no way to see
|
|
24850
|
+
* it. An element rendered on a server needs the attribute; one rendered in a
|
|
24852
24851
|
* browser may use either.
|
|
24853
24852
|
* - `day`: How the day of the month is written, where a date is shown.
|
|
24854
24853
|
* - `elapsed`: Show how long ago it was, compactly, instead of the date.
|
|
@@ -24948,12 +24947,12 @@ export type CustomElements = {
|
|
|
24948
24947
|
* consumer has to keep by hand, and the one number a summary is told to trust
|
|
24949
24948
|
* is the one it gets wrong.
|
|
24950
24949
|
*
|
|
24951
|
-
* The strip measures itself, so
|
|
24952
|
-
*
|
|
24953
|
-
*
|
|
24954
|
-
*
|
|
24955
|
-
*
|
|
24956
|
-
*
|
|
24950
|
+
* The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
24951
|
+
* own and these two are the estimate used until the first measurement lands.
|
|
24952
|
+
* Writing the attribute pins the value and stops the measurement being
|
|
24953
|
+
* consulted, which is what a container query or a transition on the cell size
|
|
24954
|
+
* wants, where what is drawn this frame is not what the arithmetic should
|
|
24955
|
+
* plan around.
|
|
24957
24956
|
*
|
|
24958
24957
|
* Zero turns the dropping off altogether, which is right for a strip in a
|
|
24959
24958
|
* container that cannot get narrow.
|
|
@@ -25097,11 +25096,6 @@ export type CustomElements = {
|
|
|
25097
25096
|
*
|
|
25098
25097
|
* CSS variables available for styling the component.
|
|
25099
25098
|
*
|
|
25100
|
-
* - `--heatmap-cell-height`: How tall a cell is. A row of a tall thin cell is what a status page draws. (default: `undefined`)
|
|
25101
|
-
* - `--heatmap-cell-inline-size`: How wide a cell is. The strip fits as many as the container allows. (default: `undefined`)
|
|
25102
|
-
* - `--heatmap-cell-radius`: How far a cell's corners are rounded. (default: `undefined`)
|
|
25103
|
-
* - `--heatmap-cell-size`: The size a cell wants on both axes, where neither is given its own. (default: `undefined`)
|
|
25104
|
-
* - `--heatmap-gap`: Space between cells. Zero is a continuous field rather than a grid of tiles. (default: `undefined`)
|
|
25105
25099
|
* - `--heatmap-rows`: How many rows the strip lays out. Written by the component from the data, read by the tier that draws it. (default: `undefined`)
|
|
25106
25100
|
* - `--heatmap-tone`: The tone of the cell this is set on. Written by the component, read by the sheet that paints. (default: `undefined`)
|
|
25107
25101
|
* - `--heatmap-tone-1`: The quietest step of the magnitude ramp, reached by `tones="1 …"`. (default: `undefined`)
|
|
@@ -25185,7 +25179,7 @@ export type CustomElements = {
|
|
|
25185
25179
|
* the same way `label` becomes `aria-label` in there.
|
|
25186
25180
|
*
|
|
25187
25181
|
* ```html
|
|
25188
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
25182
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
25189
25183
|
* ```
|
|
25190
25184
|
*
|
|
25191
25185
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -25502,10 +25496,10 @@ export type CustomElements = {
|
|
|
25502
25496
|
* **Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
25503
25497
|
* state, so reflecting it puts the element's own bookkeeping into the markup
|
|
25504
25498
|
* a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
25505
|
-
* hydration mismatch, and a
|
|
25506
|
-
*
|
|
25507
|
-
*
|
|
25508
|
-
*
|
|
25499
|
+
* hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
25500
|
+
* declares that a picture has arrived which this element has never fetched.
|
|
25501
|
+
* The `data-` name is the library's answer to both, being a name a re-parse
|
|
25502
|
+
* cannot mistake for a declaration, and it is what `data-closed` on
|
|
25509
25503
|
* `Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
25510
25504
|
* which puts this on the safe side of hydration: a fact that can be true on
|
|
25511
25505
|
* the *first* update mirrors to a custom state instead, which is what
|
|
@@ -25618,10 +25612,10 @@ export type CustomElements = {
|
|
|
25618
25612
|
* **The attribute is `readonly`, which is the platform's spelling.** A
|
|
25619
25613
|
* camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
25620
25614
|
* HTML writes as one costs what an attribute always costs here: nothing
|
|
25621
|
-
* warns. `<helix-input readonly>` is what anybody who has written
|
|
25622
|
-
* against `read-only` it parses to no property at all, and the
|
|
25623
|
-
* editable with no error anywhere. Measured on the dash-cased
|
|
25624
|
-
* came back `false`.
|
|
25615
|
+
* warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
25616
|
+
* HTML types; against `read-only` it parses to no property at all, and the
|
|
25617
|
+
* field stays editable with no error anywhere. Measured on the dash-cased
|
|
25618
|
+
* form, `readOnly` came back `false`.
|
|
25625
25619
|
* - `reveal`: Whether a password field offers a toggle that shows what was typed.
|
|
25626
25620
|
*
|
|
25627
25621
|
* Ignored on every other type. A reveal on an email field would be a button
|
|
@@ -25635,9 +25629,9 @@ export type CustomElements = {
|
|
|
25635
25629
|
*
|
|
25636
25630
|
* **Not reflected.** Reflection exists so a selector can reach a value, and
|
|
25637
25631
|
* no stylesheet in this repository selects on `type`. Reflecting it writes
|
|
25638
|
-
* `type="text"` onto every `<helix-input>` ever rendered, an
|
|
25639
|
-
* consumer's markup has, which is the fault the area rules write
|
|
25640
|
-
* `Button`'s `href`, `target` and `rel`.
|
|
25632
|
+
* `type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
25633
|
+
* attribute no consumer's markup has, which is the fault the area rules write
|
|
25634
|
+
* up under `Button`'s `href`, `target` and `rel`.
|
|
25641
25635
|
*
|
|
25642
25636
|
* Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
25643
25637
|
* it as a property binding, which is what makes the keyboard and the
|
|
@@ -26083,8 +26077,7 @@ export type CustomElements = {
|
|
|
26083
26077
|
* over something busy. `triangle` points along the axis and reads as "and
|
|
26084
26078
|
* onward" rather than as a second claim about the data.
|
|
26085
26079
|
*
|
|
26086
|
-
* The shapes come from
|
|
26087
|
-
* `helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
26080
|
+
* The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
26088
26081
|
* the set is identical wherever one appears. **Which is why every value is
|
|
26089
26082
|
* named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
26090
26083
|
* undocumented until the cohort before this one; this family reads the same
|
|
@@ -26349,10 +26342,10 @@ export type CustomElements = {
|
|
|
26349
26342
|
* - `label`: Accessible name for the set.
|
|
26350
26343
|
* - `type`: Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
26351
26344
|
*
|
|
26352
|
-
* Reflected, because this is one of the things a stylesheet selects on
|
|
26353
|
-
*
|
|
26354
|
-
*
|
|
26355
|
-
*
|
|
26345
|
+
* Reflected, because this is one of the things a stylesheet selects on, each
|
|
26346
|
+
* value mapping to a `list-style-type`. The platform's spellings rather than
|
|
26347
|
+
* the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
26348
|
+
* consumer would have written on an `<ol>`.
|
|
26356
26349
|
*
|
|
26357
26350
|
* **`start` and `reversed` are both absent and neither can be done here.**
|
|
26358
26351
|
* This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -27511,9 +27504,9 @@ export type CustomElements = {
|
|
|
27511
27504
|
>;
|
|
27512
27505
|
|
|
27513
27506
|
/**
|
|
27514
|
-
* A notification is a toast that did not go away. `
|
|
27515
|
-
*
|
|
27516
|
-
*
|
|
27507
|
+
* A notification is a toast that did not go away. `Toast` is deliberately the
|
|
27508
|
+
* opposite of this: a live region whose items carry a `duration` and whose root
|
|
27509
|
+
* never creates or destroys anything. What makes this its own family is the
|
|
27517
27510
|
* state each item carries rather than the arrangement it sits in: read and
|
|
27518
27511
|
* unread, a timestamp that has to stay correct, and an action a reader can take
|
|
27519
27512
|
* later.
|
|
@@ -27525,9 +27518,9 @@ export type CustomElements = {
|
|
|
27525
27518
|
* reader wants exactly one of them at a time: the time while they are scanning,
|
|
27526
27519
|
* and what they can do about it once they have stopped on a row.
|
|
27527
27520
|
*
|
|
27528
|
-
* **The timestamp is `
|
|
27529
|
-
*
|
|
27530
|
-
*
|
|
27521
|
+
* **The timestamp is `FormatDate`**, which is where the reading, the `<time
|
|
27522
|
+
* datetime>` and the shared timer now live. It was implemented here, and a
|
|
27523
|
+
* component that formats a date is not a fact about notifications: Chat wanted
|
|
27531
27524
|
* the same thing and had its own copy of half of it.
|
|
27532
27525
|
*
|
|
27533
27526
|
* **Read state is reported, not invented.** Marking something read is usually a
|
|
@@ -27553,10 +27546,10 @@ export type CustomElements = {
|
|
|
27553
27546
|
*
|
|
27554
27547
|
* **Not reflected.** Unread is a visual state, which is why the four mixins
|
|
27555
27548
|
* mirror theirs, but the mirror may not be the property's own attribute:
|
|
27556
|
-
* `<helix-notification default-read>` comes back from a server
|
|
27557
|
-
* and would gain it on the first update, which React reports
|
|
27558
|
-
* mismatch, and which a copy of the serialized element
|
|
27559
|
-
* declaration. `:state(read)` is what the stylesheet reads.
|
|
27549
|
+
* `<helix-headless-notification default-read>` comes back from a server
|
|
27550
|
+
* without `read` and would gain it on the first update, which React reports
|
|
27551
|
+
* as a hydration mismatch, and which a copy of the serialized element
|
|
27552
|
+
* re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
27560
27553
|
* `hydration.dom.spec.ts` holds it.
|
|
27561
27554
|
* - `default-read`/`defaultRead`: State to open with, where nothing declared one.
|
|
27562
27555
|
* - `locale`: Locale for the timestamp.
|
|
@@ -27748,7 +27741,7 @@ export type CustomElements = {
|
|
|
27748
27741
|
*
|
|
27749
27742
|
* Areas where markup can be added to the component.
|
|
27750
27743
|
*
|
|
27751
|
-
* - `(default)`: The notifications
|
|
27744
|
+
* - `(default)`: The notifications.
|
|
27752
27745
|
* - `footer`: Below the list, for a link to everything.
|
|
27753
27746
|
* - `header`: Above the list, for a title and the mark-all control.
|
|
27754
27747
|
*
|
|
@@ -28338,7 +28331,7 @@ export type CustomElements = {
|
|
|
28338
28331
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
28339
28332
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
28340
28333
|
* parser created has none of its attributes yet at that moment: measured on
|
|
28341
|
-
* this element, on `Radio` and on `Toggle`, `<helix-option value="a"
|
|
28334
|
+
* this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
28342
28335
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
28343
28336
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
28344
28337
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -28556,8 +28549,8 @@ export type CustomElements = {
|
|
|
28556
28549
|
/**
|
|
28557
28550
|
* **The component is the truncation.** Given a page and a total it works out
|
|
28558
28551
|
* which numbers to show and where the runs break, so this is data-driven rather
|
|
28559
|
-
* than composed: `<helix-pagination page="4" pages="12">` rather than
|
|
28560
|
-
* slotted children a consumer keeps in step with their own query.
|
|
28552
|
+
* than composed: `<helix-headless-pagination page="4" pages="12">` rather than
|
|
28553
|
+
* twelve slotted children a consumer keeps in step with their own query.
|
|
28561
28554
|
*
|
|
28562
28555
|
* **The width does not change as you page.** The run around the current page is
|
|
28563
28556
|
* `siblings` either side, and grows to absorb a gap slot at a boundary, so the
|
|
@@ -28995,10 +28988,10 @@ export type CustomElements = {
|
|
|
28995
28988
|
* marked letters wants `text`, which judges nothing.
|
|
28996
28989
|
*
|
|
28997
28990
|
* **Not reflected**: nothing selects on it, so reflecting only writes
|
|
28998
|
-
* `type="numeric"` onto every `<helix-pin-input>` ever rendered, an
|
|
28999
|
-
* no consumer's markup had. The area rules carry the sentence
|
|
29000
|
-
* what CSS selects on". The real inputs take it as a binding,
|
|
29001
|
-
* makes the keyboard follow.
|
|
28991
|
+
* `type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
28992
|
+
* attribute no consumer's markup had. The area rules carry the sentence
|
|
28993
|
+
* "reflect only what CSS selects on". The real inputs take it as a binding,
|
|
28994
|
+
* which is what makes the keyboard follow.
|
|
29002
28995
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
29003
28996
|
* - `value`: What the control holds now, and what its form submits.
|
|
29004
28997
|
*
|
|
@@ -29741,7 +29734,7 @@ export type CustomElements = {
|
|
|
29741
29734
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
29742
29735
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
29743
29736
|
* parser created has none of its attributes yet at that moment: measured on
|
|
29744
|
-
* this element, on `Option` and on `Toggle`, `<helix-radio value="a"
|
|
29737
|
+
* this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
29745
29738
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
29746
29739
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
29747
29740
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -31190,11 +31183,10 @@ export type CustomElements = {
|
|
|
31190
31183
|
* mean defining what a dial with a submenu in it does.
|
|
31191
31184
|
*
|
|
31192
31185
|
* **The trigger is a control the consumer slots**, and the floating action
|
|
31193
|
-
* button is the usual one: `
|
|
31194
|
-
*
|
|
31195
|
-
* `
|
|
31196
|
-
*
|
|
31197
|
-
* layer.
|
|
31186
|
+
* button is the usual one: `IconButton` with `shape="circle"` and `raised`.
|
|
31187
|
+
* There is no `helix-fab`, because it would re-declare `emphasis`, `tone`,
|
|
31188
|
+
* `label` and a size around a control that already has all four. A round raised
|
|
31189
|
+
* button is a shape, and where it sits is `data-dock` in the base layer.
|
|
31198
31190
|
*
|
|
31199
31191
|
* **Nothing is reserved from the keyboard.** A menu that drills has to keep the
|
|
31200
31192
|
* horizontal pair for going in and coming back; a dial goes nowhere, so all four
|
|
@@ -31553,9 +31545,9 @@ export type CustomElements = {
|
|
|
31553
31545
|
* The row directions set them side by side, for a figure in a line of text or
|
|
31554
31546
|
* a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
31555
31547
|
*
|
|
31556
|
-
* A property rather than a `
|
|
31557
|
-
*
|
|
31558
|
-
*
|
|
31548
|
+
* A property rather than a `Flex` around it, because the unit has to stay on
|
|
31549
|
+
* the value's baseline whichever way the pair goes, and only this element
|
|
31550
|
+
* knows which of its children the unit belongs to.
|
|
31559
31551
|
*
|
|
31560
31552
|
* **Optional rather than defaulted to `column`, which is not a style
|
|
31561
31553
|
* preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -31688,7 +31680,7 @@ export type CustomElements = {
|
|
|
31688
31680
|
*
|
|
31689
31681
|
* Areas where markup can be added to the component.
|
|
31690
31682
|
*
|
|
31691
|
-
* - `(default)`: The steps
|
|
31683
|
+
* - `(default)`: The steps.
|
|
31692
31684
|
*
|
|
31693
31685
|
* ## Methods
|
|
31694
31686
|
*
|
|
@@ -31715,9 +31707,9 @@ export type CustomElements = {
|
|
|
31715
31707
|
|
|
31716
31708
|
/**
|
|
31717
31709
|
* **The name is a button, and only the name.** The marker is `aria-hidden`
|
|
31718
|
-
* decoration, so wrapping it would add hit area and no meaning. It is
|
|
31719
|
-
*
|
|
31720
|
-
*
|
|
31710
|
+
* decoration, so wrapping it would add hit area and no meaning. It is `Button`
|
|
31711
|
+
* rather than a `<button>` this element resets: the hover wash, the focus ring
|
|
31712
|
+
* and the disabled treatment are decisions the button carries.
|
|
31721
31713
|
*
|
|
31722
31714
|
* **It says nothing about where a reader may go.** Every step is pressable and
|
|
31723
31715
|
* announces itself with `helix-select`; refusing the ones ahead is `disabled`,
|
|
@@ -31770,7 +31762,7 @@ export type CustomElements = {
|
|
|
31770
31762
|
* Areas where markup can be added to the component.
|
|
31771
31763
|
*
|
|
31772
31764
|
* - `(default)`: The step's name.
|
|
31773
|
-
* - `content`: What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with
|
|
31765
|
+
* - `content`: What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with, so whether it is folded away is the sheet's answer and not this tier's.
|
|
31774
31766
|
* - `description`: A line under the name, for what the stage is for.
|
|
31775
31767
|
* - `marker`: Replaces the number, or the check a complete step shows.
|
|
31776
31768
|
*
|
|
@@ -31787,7 +31779,7 @@ export type CustomElements = {
|
|
|
31787
31779
|
* - `body`: The name and its description.
|
|
31788
31780
|
* - `content`: What the stage holds, while it is open.
|
|
31789
31781
|
* - `description`: The line under it.
|
|
31790
|
-
* - `label`: The step's name, which is a
|
|
31782
|
+
* - `label`: The step's name, which is a control.
|
|
31791
31783
|
* - `label-button`: The inner control.
|
|
31792
31784
|
* - `lead`: The half line arriving from the step before.
|
|
31793
31785
|
* - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
|
|
@@ -32047,23 +32039,23 @@ export type CustomElements = {
|
|
|
32047
32039
|
* the table has another track; remove one and it does not. That is what ties
|
|
32048
32040
|
* the two together, and a table-level track list on its own does not: a list
|
|
32049
32041
|
* that is accidentally the headings is invalid CSS a grid ignores in silence,
|
|
32050
|
-
* drawing the whole table as one column. `
|
|
32051
|
-
*
|
|
32052
|
-
*
|
|
32053
|
-
*
|
|
32054
|
-
*
|
|
32042
|
+
* drawing the whole table as one column. `Table`'s `columns` is dealt out a
|
|
32043
|
+
* track at a time against the columns declared under it, so a heading among the
|
|
32044
|
+
* widths costs its own column a width and no more, and a list longer or shorter
|
|
32045
|
+
* than the columns is trimmed or shared rather than being a second count of
|
|
32046
|
+
* them. A column's own `width` wins over the track in its place.
|
|
32055
32047
|
*
|
|
32056
32048
|
* **It is also where every per-column fact goes**, which is the reason
|
|
32057
|
-
* `
|
|
32058
|
-
*
|
|
32059
|
-
*
|
|
32049
|
+
* `DataTable` needs no column config object. `field` names the key the cell
|
|
32050
|
+
* reads, `sortable` says a reader may reorder by it, `align` says which edge
|
|
32051
|
+
* the values line up against, and `cell` takes a function for anything the
|
|
32060
32052
|
* field alone cannot express. The schema is markup and the data is a property:
|
|
32061
32053
|
* a schema is small, declarative, and something a reader should be able to see
|
|
32062
32054
|
* in the HTML, and data is large and windowed.
|
|
32063
32055
|
*
|
|
32064
32056
|
* **The same element serves both tables**, the markup one and the data one. It
|
|
32065
|
-
* is identified by a flag rather than by `instanceof`, so a `
|
|
32066
|
-
*
|
|
32057
|
+
* is identified by a flag rather than by `instanceof`, so a `TableColumn` works
|
|
32058
|
+
* inside either without the two roots sharing anything else.
|
|
32067
32059
|
*
|
|
32068
32060
|
* **It generates no box of its own**, the same as a row: the heading is a grid
|
|
32069
32061
|
* item of the table, so it lines up with the cells under it rather than sitting
|
|
@@ -32073,10 +32065,10 @@ export type CustomElements = {
|
|
|
32073
32065
|
* both, so the columns after it keep their own widths and every row keeps its
|
|
32074
32066
|
* cells under their headings. `hidden="until-found"` keeps its track, the
|
|
32075
32067
|
* heading being left drawn, as every Helix element leaves one with that value.
|
|
32076
|
-
* `
|
|
32077
|
-
*
|
|
32078
|
-
*
|
|
32079
|
-
*
|
|
32068
|
+
* `DataTable` draws the cells, so it leaves out the ones under a hidden column.
|
|
32069
|
+
* A `Table`'s cells are markup the consumer wrote, so hide them with the
|
|
32070
|
+
* column, as removing a column means removing its cells: a row with a cell more
|
|
32071
|
+
* than the table has tracks wraps into the next.
|
|
32080
32072
|
*
|
|
32081
32073
|
* **A heading that does something holds a control that does it.** The host is
|
|
32082
32074
|
* the column header, and a header is not focusable, so a sortable heading is a
|
|
@@ -32092,15 +32084,15 @@ export type CustomElements = {
|
|
|
32092
32084
|
*
|
|
32093
32085
|
* - `align`: Which edge the values line up against.
|
|
32094
32086
|
*
|
|
32095
|
-
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
32096
|
-
* above each other. Left unset the cell inherits the table's own
|
|
32097
|
-
* which is `start` for text in either writing direction.
|
|
32098
|
-
* aligns the cells it draws. A `
|
|
32099
|
-
* wrote, so the table writes nothing onto them: it publishes the
|
|
32100
|
-
* cell under this column as `--table-cell-align`, which
|
|
32101
|
-
* reads. The heading is this element's own, and
|
|
32102
|
-
* the same edge in either table. `end` is the
|
|
32103
|
-
* right-to-left table it is the left.
|
|
32087
|
+
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
32088
|
+
* sit above each other. Left unset the cell inherits the table's own
|
|
32089
|
+
* alignment, which is `start` for text in either writing direction.
|
|
32090
|
+
* `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
32091
|
+
* consumer wrote, so the table writes nothing onto them: it publishes the
|
|
32092
|
+
* edge to each cell under this column as `--table-cell-align`, which
|
|
32093
|
+
* `@fusion.dev/helix` reads. The heading is this element's own, and
|
|
32094
|
+
* `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
32095
|
+
* inline end, so in a right-to-left table it is the left.
|
|
32104
32096
|
*
|
|
32105
32097
|
* **Reflected, because the heading is drawn by a stylesheet and has no other
|
|
32106
32098
|
* way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -32143,8 +32135,8 @@ export type CustomElements = {
|
|
|
32143
32135
|
* - `width`: The track this column takes, as CSS.
|
|
32144
32136
|
*
|
|
32145
32137
|
* A single track value, so anything valid in `grid-template-columns` works:
|
|
32146
|
-
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
|
|
32147
|
-
*
|
|
32138
|
+
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
32139
|
+
* its place in a `Table`'s `columns`, where that table sets one, and
|
|
32148
32140
|
* otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
32149
32141
|
* Set here, it wins over that list, which is what lets a reader resize a
|
|
32150
32142
|
* column in a table that set one.
|
|
@@ -32269,15 +32261,14 @@ export type CustomElements = {
|
|
|
32269
32261
|
*
|
|
32270
32262
|
* - `columns`: The column widths as one track list, written once on the table.
|
|
32271
32263
|
*
|
|
32272
|
-
* With `
|
|
32273
|
-
*
|
|
32274
|
-
*
|
|
32275
|
-
*
|
|
32276
|
-
*
|
|
32277
|
-
*
|
|
32278
|
-
*
|
|
32279
|
-
*
|
|
32280
|
-
* down to one column.
|
|
32264
|
+
* With `TableColumn` children, each track sizes the column in its place, a
|
|
32265
|
+
* hidden column counted, so hiding one takes its track with it and the rest
|
|
32266
|
+
* keep theirs. The columns decide how many tracks there are and this list
|
|
32267
|
+
* only how wide: a track past the last column is dropped, and a column past
|
|
32268
|
+
* the last track shares what is left. With no columns declared it is the
|
|
32269
|
+
* whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
32270
|
+
* is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
32271
|
+
* its column at the default rather than taking the table down to one column.
|
|
32281
32272
|
*
|
|
32282
32273
|
* **A column's own `width` wins over its track here.** The width is written
|
|
32283
32274
|
* on the column it sizes, which is the more particular statement, and it is
|
|
@@ -32291,13 +32282,11 @@ export type CustomElements = {
|
|
|
32291
32282
|
* whole answer: a table given one lays its grid out in the first paint, and a
|
|
32292
32283
|
* table sized only by its columns is one track wide until it upgrades.
|
|
32293
32284
|
*
|
|
32294
|
-
*
|
|
32295
|
-
*
|
|
32296
|
-
*
|
|
32297
|
-
*
|
|
32298
|
-
*
|
|
32299
|
-
* take the same CSS hook, `--table-columns` and `--data-table-columns`, which
|
|
32300
|
-
* wins over whichever list the element worked out.
|
|
32285
|
+
* **Data Table has none of this, and should not.** Its columns are its schema
|
|
32286
|
+
* rather than an option, so there is always a column to write a `width` on
|
|
32287
|
+
* and a list here would be a second way to say what that says. This table's
|
|
32288
|
+
* cells are markup, and a table written as rows of cells with no column
|
|
32289
|
+
* declared in it has nowhere else to be sized from.
|
|
32301
32290
|
* - `label`: Accessible name for the table.
|
|
32302
32291
|
* - `empty-text`/`emptyText`: What is said where there are none, and none are coming.
|
|
32303
32292
|
* - `loading`: Whether the rows are still on their way.
|
|
@@ -32338,7 +32327,7 @@ export type CustomElements = {
|
|
|
32338
32327
|
*
|
|
32339
32328
|
* CSS variables available for styling the component.
|
|
32340
32329
|
*
|
|
32341
|
-
* - `--table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet.
|
|
32330
|
+
* - `--table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `columns` is the one to set. (default: `undefined`)
|
|
32342
32331
|
*
|
|
32343
32332
|
* ## CSS Parts
|
|
32344
32333
|
*
|
|
@@ -32360,10 +32349,10 @@ export type CustomElements = {
|
|
|
32360
32349
|
>;
|
|
32361
32350
|
|
|
32362
32351
|
/**
|
|
32363
|
-
*
|
|
32364
|
-
* the table's own grid and every column lines up
|
|
32365
|
-
* still exists as an element, which is what a
|
|
32366
|
-
* cells are laid out by the table algorithm.
|
|
32352
|
+
* The row renders its cells straight through and lays out none of them, so a
|
|
32353
|
+
* sheet can take them into the table's own grid and every column lines up
|
|
32354
|
+
* across every row. The row still exists as an element, which is what a
|
|
32355
|
+
* `<table>` gives away when its cells are laid out by the table algorithm.
|
|
32367
32356
|
*
|
|
32368
32357
|
* ## Attributes & Properties
|
|
32369
32358
|
*
|
|
@@ -32964,10 +32953,10 @@ export type CustomElements = {
|
|
|
32964
32953
|
>;
|
|
32965
32954
|
|
|
32966
32955
|
/**
|
|
32967
|
-
* **The list is `
|
|
32956
|
+
* **The list is `TimePicker`, not a second one written here.** It is worth
|
|
32968
32957
|
* having on its own, flat in a settings pane with nothing to open, and this
|
|
32969
32958
|
* element is the field, the overlay and the form. Exactly the arrangement Input
|
|
32970
|
-
* Date has with `
|
|
32959
|
+
* Date has with `DatePicker` and Color Input with `ColorPicker`.
|
|
32971
32960
|
*
|
|
32972
32961
|
* **Typed as well as picked, and that is the division the list depends on.** A
|
|
32973
32962
|
* list at a step offers the times a product actually has, and the field is how a
|
|
@@ -32998,8 +32987,8 @@ export type CustomElements = {
|
|
|
32998
32987
|
*
|
|
32999
32988
|
* Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
33000
32989
|
* number, and both are carried as one comma-separated value, which is what a
|
|
33001
|
-
* form submits. `
|
|
33002
|
-
* why a wheel cannot do either.
|
|
32990
|
+
* form submits. `TimePicker` carries the longer note on the interaction and
|
|
32991
|
+
* on why a wheel cannot do either.
|
|
33003
32992
|
* - `placeholder`: What the field says before a time is in it.
|
|
33004
32993
|
* - `step`: How far apart the offered times are, in minutes.
|
|
33005
32994
|
* - `time-style`/`timeStyle`: Whether the field writes the time out, or holds the value as it is.
|
|
@@ -33014,7 +33003,7 @@ export type CustomElements = {
|
|
|
33014
33003
|
* `list` offers whole times, which is what a product with slots or opening
|
|
33015
33004
|
* hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
33016
33005
|
* the locale uses one, which is the only way to reach `23:45` without
|
|
33017
|
-
* scrolling most of a day. `
|
|
33006
|
+
* scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
33018
33007
|
*
|
|
33019
33008
|
* **Optional rather than defaulted, which is not a style preference.** A
|
|
33020
33009
|
* reflecting property with a default writes its attribute onto every host the
|
|
@@ -33258,8 +33247,8 @@ export type CustomElements = {
|
|
|
33258
33247
|
|
|
33259
33248
|
/**
|
|
33260
33249
|
* **A list rather than three wheels**, and the reason is what a list already
|
|
33261
|
-
* is. `
|
|
33262
|
-
*
|
|
33250
|
+
* is. `Listbox` brings the keyboard, the typeahead, the scroll into view and
|
|
33251
|
+
* the announcement of a set of options, and a time at a step is a set of
|
|
33263
33252
|
* options. Three little wheels for hours, minutes and a meridiem are three
|
|
33264
33253
|
* controls to build, three to test, and a tab stop each for something a reader
|
|
33265
33254
|
* answers once.
|
|
@@ -33320,7 +33309,7 @@ export type CustomElements = {
|
|
|
33320
33309
|
*
|
|
33321
33310
|
* Absent is one. `range` holds a start and an end with everything between
|
|
33322
33311
|
* them shown as part of the answer, `multiple` holds any number, and both are
|
|
33323
|
-
* carried as one comma-separated value: the same shape `
|
|
33312
|
+
* carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
33324
33313
|
* because it is the same question asked of a different unit.
|
|
33325
33314
|
*
|
|
33326
33315
|
* **A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -33869,7 +33858,7 @@ export type CustomElements = {
|
|
|
33869
33858
|
* **Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
33870
33859
|
* defaulting is the pair that writes onto a host: every toast region anybody
|
|
33871
33860
|
* rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
33872
|
-
* consumer's server markup does not have.
|
|
33861
|
+
* consumer's server markup does not have. A sheet carries the resting
|
|
33873
33862
|
* arrangement in its own `:host` rule and the selectors describe only the
|
|
33874
33863
|
* departures, which is what `orientation` does.
|
|
33875
33864
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -33903,7 +33892,7 @@ export type CustomElements = {
|
|
|
33903
33892
|
*
|
|
33904
33893
|
* Areas where markup can be added to the component.
|
|
33905
33894
|
*
|
|
33906
|
-
* - `(default)`: The messages
|
|
33895
|
+
* - `(default)`: The messages.
|
|
33907
33896
|
*
|
|
33908
33897
|
* ## CSS Parts
|
|
33909
33898
|
*
|
|
@@ -34133,11 +34122,11 @@ export type CustomElements = {
|
|
|
34133
34122
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
34134
34123
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
34135
34124
|
* parser created has none of its attributes yet at that moment: measured on
|
|
34136
|
-
* this element, on `Option` and on `Radio`, `<helix-toggle
|
|
34137
|
-
* selected>` reported `defaultSelected` as `false` both from
|
|
34138
|
-
* and from `createElement` followed by `setAttribute`, which is
|
|
34139
|
-
* consumer writes one. The snapshot could only ever be true for
|
|
34140
|
-
* already in the document when `customElements.define` ran.
|
|
34125
|
+
* this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
34126
|
+
* value="light" selected>` reported `defaultSelected` as `false` both from
|
|
34127
|
+
* parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
34128
|
+
* every way a consumer writes one. The snapshot could only ever be true for
|
|
34129
|
+
* an element already in the document when `customElements.define` ran.
|
|
34141
34130
|
*
|
|
34142
34131
|
* Nothing overwrites it either, which is what makes reading it late correct
|
|
34143
34132
|
* rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -34293,8 +34282,8 @@ export type CustomElements = {
|
|
|
34293
34282
|
* the ordinary way:
|
|
34294
34283
|
*
|
|
34295
34284
|
* ```html
|
|
34296
|
-
* <helix-button id="save" aria-describedby="save-tip">Save</helix-button>
|
|
34297
|
-
* <helix-tooltip id="save-tip" for="save" content="Save your work"></helix-tooltip>
|
|
34285
|
+
* <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button>
|
|
34286
|
+
* <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip>
|
|
34298
34287
|
* ```
|
|
34299
34288
|
*
|
|
34300
34289
|
* The reference points at *this host*, not at the bubble in its shadow root:
|
|
@@ -34603,9 +34592,9 @@ export type CustomElements = {
|
|
|
34603
34592
|
* - **When it shows.** Which is `current`, and which the root decides.
|
|
34604
34593
|
*
|
|
34605
34594
|
* What it does not own is the heading, the paragraph, the picture and the
|
|
34606
|
-
* layout. Slot a `
|
|
34607
|
-
*
|
|
34608
|
-
*
|
|
34595
|
+
* layout. Slot a `Card`, or a heading and a line of prose, or anything else.
|
|
34596
|
+
* Fixed `title` and `body` parts would be a component deciding what a tour is
|
|
34597
|
+
* allowed to say.
|
|
34609
34598
|
*
|
|
34610
34599
|
* **The buttons are slot fallback, so the common case costs nothing and the
|
|
34611
34600
|
* uncommon one is possible.** Write nothing and get Back, Next and Skip already
|
|
@@ -35352,7 +35341,7 @@ export type CustomElements = {
|
|
|
35352
35341
|
* Areas where markup can be added to the component.
|
|
35353
35342
|
*
|
|
35354
35343
|
* - `(default)`: The entries.
|
|
35355
|
-
* - `player`: The
|
|
35344
|
+
* - `player`: The player the entries take turns in.
|
|
35356
35345
|
*
|
|
35357
35346
|
* ## Methods
|
|
35358
35347
|
*
|
|
@@ -35906,7 +35895,7 @@ export type CustomElementsSolidJs = {
|
|
|
35906
35895
|
* item added a second after render coordinates on its first click.
|
|
35907
35896
|
*
|
|
35908
35897
|
* Items are matched with `instanceof HelixHeadlessAccordionItem`, never by tag
|
|
35909
|
-
* name
|
|
35898
|
+
* name, so this tier does not learn about the styled one.
|
|
35910
35899
|
*
|
|
35911
35900
|
* The keyboard listener is the controller's and is attached on connect, so
|
|
35912
35901
|
* none of it runs on the server, where there is no tree to walk and no events
|
|
@@ -36404,13 +36393,13 @@ export type CustomElementsSolidJs = {
|
|
|
36404
36393
|
* Unset shows all of them, which is what no limit means and is more useful
|
|
36405
36394
|
* than refusing to render.
|
|
36406
36395
|
*
|
|
36407
|
-
* **Reflected, because the fold is a stylesheet rule and nothing else.**
|
|
36408
|
-
*
|
|
36409
|
-
* so the attribute *is* the mechanism: a `max` that reaches this
|
|
36410
|
-
* never reaches the host matches no rule, and every avatar is
|
|
36411
|
-
* count claiming some are hidden. Markup is the safe path and
|
|
36412
|
-
* a script is the broken one, and React takes it for
|
|
36413
|
-
* matching property rather than an attribute.
|
|
36396
|
+
* **Reflected, because the fold is a stylesheet rule and nothing else.** A
|
|
36397
|
+
* sheet hides past the limit one selector per value, as `FOLDS_UP_TO`
|
|
36398
|
+
* describes, so the attribute *is* the mechanism: a `max` that reaches this
|
|
36399
|
+
* property and never reaches the host matches no rule, and every avatar is
|
|
36400
|
+
* drawn beside a count claiming some are hidden. Markup is the safe path and
|
|
36401
|
+
* hides the fault; a script is the broken one, and React takes it for
|
|
36402
|
+
* everyone, assigning a matching property rather than an attribute.
|
|
36414
36403
|
*
|
|
36415
36404
|
* **Optional rather than defaulted, per the rule that a reflected property
|
|
36416
36405
|
* takes no default**: `max = 0` would stamp `max="0"` onto every host that
|
|
@@ -36830,7 +36819,7 @@ export type CustomElementsSolidJs = {
|
|
|
36830
36819
|
* CSS variables available for styling the component.
|
|
36831
36820
|
*
|
|
36832
36821
|
* - `--bar-chart-axis`: How wide an axis column is drawn, in `ch`, from the widest number on it. Written on the axis itself, and only where the categories run along the bottom: turned sideways an axis is a row and takes a line's height instead. (default: `undefined`)
|
|
36833
|
-
* - `--bar-chart-secondary`: The color of the secondary axis
|
|
36822
|
+
* - `--bar-chart-secondary`: The color of the secondary axis, where one series owns it. Written by the component from that series' `--chart-series-*`, so it promises the series color and nothing more: whatever that hook resolves to is what the axis is drawn in. (default: `undefined`)
|
|
36834
36823
|
* - `--chart-bar-wash`: The gradient a bar would take, named per bar so the styled tier can point `fill` at it. Drawn whatever the treatment and used only where `wash="gradient"` asks for it. (default: `undefined`)
|
|
36835
36824
|
*
|
|
36836
36825
|
* ## CSS Parts
|
|
@@ -36977,12 +36966,12 @@ export type CustomElementsSolidJs = {
|
|
|
36977
36966
|
* - `current`: Whether this item is the page the reader is on.
|
|
36978
36967
|
* - `href`: Where the crumb goes, and nothing where it is the current page.
|
|
36979
36968
|
*
|
|
36980
|
-
* **Optional and reflected, because a stylesheet does select on it.**
|
|
36981
|
-
*
|
|
36982
|
-
*
|
|
36983
|
-
*
|
|
36984
|
-
* the
|
|
36985
|
-
*
|
|
36969
|
+
* **Optional and reflected, because a stylesheet does select on it.** A sheet
|
|
36970
|
+
* writes `:host(:not([href])) [part="link"]` to take the block padding off a
|
|
36971
|
+
* crumb that is not a link, so the attribute is what decides how tall a crumb
|
|
36972
|
+
* is. Unreflected, an `href` set from script reached the property, rendered
|
|
36973
|
+
* the anchor, and left the host looking unlinked: the crumb drew at 20px
|
|
36974
|
+
* where a markup twin drew at 28.
|
|
36986
36975
|
*
|
|
36987
36976
|
* Optional rather than defaulted, which is the general rule that a reflected
|
|
36988
36977
|
* property takes no default: an `href` written onto every host would be a link
|
|
@@ -37222,7 +37211,7 @@ export type CustomElementsSolidJs = {
|
|
|
37222
37211
|
* the same way `label` becomes `aria-label` in there.
|
|
37223
37212
|
*
|
|
37224
37213
|
* ```html
|
|
37225
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
37214
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
37226
37215
|
* ```
|
|
37227
37216
|
*
|
|
37228
37217
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -37504,7 +37493,7 @@ export type CustomElementsSolidJs = {
|
|
|
37504
37493
|
*
|
|
37505
37494
|
* The host is the surface. A wrapper `<div part="container">` would be a second
|
|
37506
37495
|
* box doing nothing the host cannot: the element itself takes the border, the
|
|
37507
|
-
* radius, and the grid, and a consumer styles `
|
|
37496
|
+
* radius, and the grid, and a consumer styles `Card` rather than reaching
|
|
37508
37497
|
* through `::part`. One node instead of two, on every card on the page.
|
|
37509
37498
|
*
|
|
37510
37499
|
* Name the card with `aria-label` or `aria-labelledby`. That is the only
|
|
@@ -37656,13 +37645,13 @@ export type CustomElementsSolidJs = {
|
|
|
37656
37645
|
* **The number is published to the styles rather than enumerated by them**,
|
|
37657
37646
|
* as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
37658
37647
|
* count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
37659
|
-
* so
|
|
37660
|
-
*
|
|
37661
|
-
*
|
|
37662
|
-
* three dots, a pane taking the whole track and five slides
|
|
37663
|
-
* dragging.
|
|
37664
|
-
*
|
|
37665
|
-
*
|
|
37648
|
+
* so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
37649
|
+
* above it the pane falls back to one across while this file goes on counting
|
|
37650
|
+
* positions. Measured in Chromium over eight slides against such a sheet, six
|
|
37651
|
+
* across gave three dots, a pane taking the whole track and five slides
|
|
37652
|
+
* reachable only by dragging. Published from here there is no ceiling to
|
|
37653
|
+
* exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
37654
|
+
* correction the same way and for the same reason.
|
|
37666
37655
|
*
|
|
37667
37656
|
* **On the track and not on the host.** A custom property on the host is a
|
|
37668
37657
|
* reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -37687,8 +37676,8 @@ export type CustomElementsSolidJs = {
|
|
|
37687
37676
|
* `auto` track is handed nothing. A count stays for the design that calls for
|
|
37688
37677
|
* exactly three.
|
|
37689
37678
|
*
|
|
37690
|
-
*
|
|
37691
|
-
*
|
|
37679
|
+
* A sheet says how it divides, and the `auto` example here carries the same
|
|
37680
|
+
* three lines for a consumer writing their own.
|
|
37692
37681
|
*
|
|
37693
37682
|
* **A value rather than the resting behavior**, which is what the
|
|
37694
37683
|
* responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -38067,13 +38056,13 @@ export type CustomElementsSolidJs = {
|
|
|
38067
38056
|
*
|
|
38068
38057
|
* **Not reflected, and the default is why.** A reflected property that
|
|
38069
38058
|
* defaults to true writes its attribute on upgrade whether or not the
|
|
38070
|
-
* consumer wrote one, so the server serves `<helix-chat label="x">`
|
|
38071
|
-
* client turns it into `<helix-chat label="x" pinned>`: a
|
|
38072
|
-
* React consumer reports and does not patch up. Nothing
|
|
38073
|
-
* either, because the one thing that changes with the pin
|
|
38074
|
-
* that is a part inside the shadow tree where a
|
|
38075
|
-
* it. Measured rather than assumed: `label,
|
|
38076
|
-
* `label` from the server.
|
|
38059
|
+
* consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
38060
|
+
* and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
38061
|
+
* hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
38062
|
+
* needs the attribute either, because the one thing that changes with the pin
|
|
38063
|
+
* is the way back, and that is a part inside the shadow tree where a
|
|
38064
|
+
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
38065
|
+
* pinned` after upgrade against `label` from the server.
|
|
38077
38066
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
38078
38067
|
*
|
|
38079
38068
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -38130,7 +38119,7 @@ export type CustomElementsSolidJs = {
|
|
|
38130
38119
|
*
|
|
38131
38120
|
* Areas where markup can be added to the component.
|
|
38132
38121
|
*
|
|
38133
|
-
* - `(default)`: The turns
|
|
38122
|
+
* - `(default)`: The turns.
|
|
38134
38123
|
* - `actions`: Beside the header: what can be done to the conversation itself.
|
|
38135
38124
|
* - `composer`: Below the transcript, where the reader writes.
|
|
38136
38125
|
* - `header`: Above the transcript: what this conversation is.
|
|
@@ -38600,11 +38589,11 @@ export type CustomElementsSolidJs = {
|
|
|
38600
38589
|
* round. The platform already writes booleans like this for the same reason,
|
|
38601
38590
|
* `novalidate` and `nomodule` and `noreferrer` among them.
|
|
38602
38591
|
*
|
|
38603
|
-
* **Reflected, because the gutter is a stylesheet rule.**
|
|
38604
|
-
*
|
|
38605
|
-
*
|
|
38606
|
-
*
|
|
38607
|
-
*
|
|
38592
|
+
* **Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
38593
|
+
* the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
38594
|
+
* what decides whether the block pays for a control. Unreflected, setting it
|
|
38595
|
+
* from script takes the button away (`render` reads the property) and leaves
|
|
38596
|
+
* the 40px it stood in reserved.
|
|
38608
38597
|
*
|
|
38609
38598
|
* A false boolean reflects as the attribute's absence, so this costs no
|
|
38610
38599
|
* `no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -38754,11 +38743,11 @@ export type CustomElementsSolidJs = {
|
|
|
38754
38743
|
>;
|
|
38755
38744
|
|
|
38756
38745
|
/**
|
|
38757
|
-
* **The picker is `
|
|
38746
|
+
* **The picker is `ColorPicker`, not a second one written here.** It owns the
|
|
38758
38747
|
* square, the ramps, the eyedropper and the syntax toggle, and it is worth
|
|
38759
38748
|
* having on its own: a settings pane wants a picker flat on the page with
|
|
38760
38749
|
* nothing to open. This element is the field, the overlay, and the form.
|
|
38761
|
-
* Exactly the arrangement Date Input has with `
|
|
38750
|
+
* Exactly the arrangement Date Input has with `DatePicker`.
|
|
38762
38751
|
*
|
|
38763
38752
|
* **Typed as well as picked, and the typing is the reason this is not
|
|
38764
38753
|
* `<input type="color">`.** The native control gives a free picker and takes
|
|
@@ -39119,10 +39108,10 @@ export type CustomElementsSolidJs = {
|
|
|
39119
39108
|
*
|
|
39120
39109
|
* **A color is exactly as requirable as a date**, which is the comparison
|
|
39121
39110
|
* that settles it: this element extends `HelixFormElement`, carries `name`
|
|
39122
|
-
* and reports its value, so a consumer writing
|
|
39123
|
-
*
|
|
39124
|
-
* to
|
|
39125
|
-
*
|
|
39111
|
+
* and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
39112
|
+
* name="brand" required>` inside a form has every reason to expect the form
|
|
39113
|
+
* to refuse an empty one. Its two siblings in the same composition position,
|
|
39114
|
+
* Date Picker and Time Picker, both check it.
|
|
39126
39115
|
*
|
|
39127
39116
|
* Written out rather than taken from `MixinField`, for the reason those two
|
|
39128
39117
|
* record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -39314,10 +39303,10 @@ export type CustomElementsSolidJs = {
|
|
|
39314
39303
|
>;
|
|
39315
39304
|
|
|
39316
39305
|
/**
|
|
39317
|
-
* **The list is `
|
|
39318
|
-
*
|
|
39319
|
-
*
|
|
39320
|
-
* the
|
|
39306
|
+
* **The list is `Listbox`, and the filtering is its own.** It owns narrowing,
|
|
39307
|
+
* the empty state, the highlight, `aria-activedescendant` and scrolling an
|
|
39308
|
+
* option into view. What is left for this element is the field, the panel and
|
|
39309
|
+
* the traffic between them.
|
|
39321
39310
|
*
|
|
39322
39311
|
* **The text and the value are two things.** What a reader types is a filter:
|
|
39323
39312
|
* it narrows the list and is thrown away. The value is whichever option they
|
|
@@ -39488,7 +39477,7 @@ export type CustomElementsSolidJs = {
|
|
|
39488
39477
|
*
|
|
39489
39478
|
* Areas where markup can be added to the component.
|
|
39490
39479
|
*
|
|
39491
|
-
* - `(default)`: The options
|
|
39480
|
+
* - `(default)`: The options.
|
|
39492
39481
|
* - `end`: After it, for a unit or a clear button.
|
|
39493
39482
|
* - `indicator`: Replaces the caret saying the field opens.
|
|
39494
39483
|
* - `start`: Before the text, for an icon.
|
|
@@ -39602,12 +39591,11 @@ export type CustomElementsSolidJs = {
|
|
|
39602
39591
|
>;
|
|
39603
39592
|
|
|
39604
39593
|
/**
|
|
39605
|
-
* **The list is `
|
|
39606
|
-
*
|
|
39607
|
-
*
|
|
39608
|
-
*
|
|
39609
|
-
*
|
|
39610
|
-
* and a key that summons it.
|
|
39594
|
+
* **The list is `Listbox`, filtering and all.** Listbox already owns narrowing,
|
|
39595
|
+
* the empty state, the highlight over what matched, `aria-activedescendant`,
|
|
39596
|
+
* scrolling an option into view and the keyboard that moves between them. Its
|
|
39597
|
+
* own note says a command palette is that list again with something different
|
|
39598
|
+
* opening it, and this is that something: a dialog, and a key that summons it.
|
|
39611
39599
|
*
|
|
39612
39600
|
* **The value is not kept.** A palette runs a command and forgets it: nothing
|
|
39613
39601
|
* here is a form control and nothing is submitted, so what it reports is that
|
|
@@ -39684,7 +39672,7 @@ export type CustomElementsSolidJs = {
|
|
|
39684
39672
|
*
|
|
39685
39673
|
* Areas where markup can be added to the component.
|
|
39686
39674
|
*
|
|
39687
|
-
* - `(default)`: The commands,
|
|
39675
|
+
* - `(default)`: The commands, and any groups of them.
|
|
39688
39676
|
* - `footer`: Under the list, for the keys a reader can press.
|
|
39689
39677
|
*
|
|
39690
39678
|
* ## Methods
|
|
@@ -39774,7 +39762,7 @@ export type CustomElementsSolidJs = {
|
|
|
39774
39762
|
* the same way `label` becomes `aria-label` in there.
|
|
39775
39763
|
*
|
|
39776
39764
|
* ```html
|
|
39777
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
39765
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
39778
39766
|
* ```
|
|
39779
39767
|
*
|
|
39780
39768
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -39973,19 +39961,19 @@ export type CustomElementsSolidJs = {
|
|
|
39973
39961
|
|
|
39974
39962
|
/**
|
|
39975
39963
|
* **The schema is markup and the data is a property.** Columns are declared as
|
|
39976
|
-
* `
|
|
39977
|
-
*
|
|
39978
|
-
*
|
|
39964
|
+
* `TableColumn` children, because a schema is small and something a reader
|
|
39965
|
+
* should see in the HTML; rows are handed over as an array, because a table
|
|
39966
|
+
* that draws ten thousand elements cannot window them.
|
|
39979
39967
|
*
|
|
39980
39968
|
* ```html
|
|
39981
|
-
* <helix-data-table .rows=${rows} sort="name:asc" page-size="20">
|
|
39982
|
-
* <helix-table-column field="name" sortable>Name</helix-table-column>
|
|
39983
|
-
* <helix-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-table-column>
|
|
39984
|
-
* </helix-data-table>
|
|
39969
|
+
* <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
|
|
39970
|
+
* <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
|
|
39971
|
+
* <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
|
|
39972
|
+
* </helix-headless-data-table>
|
|
39985
39973
|
* ```
|
|
39986
39974
|
*
|
|
39987
|
-
* `
|
|
39988
|
-
*
|
|
39975
|
+
* `Table` takes rows as markup and is the right component for a table of twelve
|
|
39976
|
+
* things a person wrote out.
|
|
39989
39977
|
*
|
|
39990
39978
|
* **Sort and filter apply to the whole set, never the page.** Sorting the drawn
|
|
39991
39979
|
* window is correct on the first screen and wrong on every other one.
|
|
@@ -39994,7 +39982,7 @@ export type CustomElementsSolidJs = {
|
|
|
39994
39982
|
* elements do, but reading a cell needs the columns, and the columns are markup
|
|
39995
39983
|
* children Lit SSR does not hand this element. So a crawler sees a table of the
|
|
39996
39984
|
* right shape with nothing in it. That is the cost of the first paragraph: use
|
|
39997
|
-
* `
|
|
39985
|
+
* `Table` where the served HTML has to carry the values.
|
|
39998
39986
|
*
|
|
39999
39987
|
* **`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is
|
|
40000
39988
|
* selected by its identity rather than its position, so a selection survives a
|
|
@@ -40015,14 +40003,13 @@ export type CustomElementsSolidJs = {
|
|
|
40015
40003
|
* in the order on screen, in the columns on screen. Saving it is the page's
|
|
40016
40004
|
* business, the same as any other file.
|
|
40017
40005
|
*
|
|
40018
|
-
* **There is no `columns` attribute here, and
|
|
40019
|
-
*
|
|
40020
|
-
*
|
|
40021
|
-
*
|
|
40022
|
-
*
|
|
40023
|
-
*
|
|
40024
|
-
*
|
|
40025
|
-
* `--data-table-columns` here and `--table-columns` there.
|
|
40006
|
+
* **There is no `columns` attribute here, and Table has one.** The difference
|
|
40007
|
+
* is what a column is in each: here it is the schema, so a table without one
|
|
40008
|
+
* has nothing to read a row with, and every column is a place to write a
|
|
40009
|
+
* `width`. A Table holds cells a consumer wrote and can be written with no
|
|
40010
|
+
* column at all, so its `columns` is where such a table is sized from. Written
|
|
40011
|
+
* on this element the attribute is inert, which is the trap worth knowing when
|
|
40012
|
+
* moving between the two.
|
|
40026
40013
|
*
|
|
40027
40014
|
* ## Attributes & Properties
|
|
40028
40015
|
*
|
|
@@ -40103,9 +40090,9 @@ export type CustomElementsSolidJs = {
|
|
|
40103
40090
|
*
|
|
40104
40091
|
* **It announces nothing, and that is not an omission.** Nothing in this
|
|
40105
40092
|
* element ever asks for a different page size: a size selector is
|
|
40106
|
-
* `
|
|
40107
|
-
*
|
|
40108
|
-
*
|
|
40093
|
+
* `PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
40094
|
+
* themselves. Routing this through `requestChange` would announce an event
|
|
40095
|
+
* the element never has cause to fire.
|
|
40109
40096
|
* - `total`: How many rows the whole result has, where this element cannot count them.
|
|
40110
40097
|
*
|
|
40111
40098
|
* Only read in `server` mode, where `rows` is one page and its length says
|
|
@@ -40192,7 +40179,7 @@ export type CustomElementsSolidJs = {
|
|
|
40192
40179
|
*
|
|
40193
40180
|
* Areas where markup can be added to the component.
|
|
40194
40181
|
*
|
|
40195
|
-
* - `(default)`: The columns, declared
|
|
40182
|
+
* - `(default)`: The columns, declared rather than drawn.
|
|
40196
40183
|
* - `footer`: Below the grid, replacing the pagination this would otherwise draw.
|
|
40197
40184
|
* - `toolbar`: Above the grid, for a search field or actions.
|
|
40198
40185
|
*
|
|
@@ -40228,8 +40215,8 @@ export type CustomElementsSolidJs = {
|
|
|
40228
40215
|
*
|
|
40229
40216
|
* CSS variables available for styling the component.
|
|
40230
40217
|
*
|
|
40231
|
-
* - `--data-table-cell-align`: The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one;
|
|
40232
|
-
* - `--data-table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet.
|
|
40218
|
+
* - `--data-table-cell-align`: The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; Table publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. (default: `undefined`)
|
|
40219
|
+
* - `--data-table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. A column's `width` is the one to set. (default: `undefined`)
|
|
40233
40220
|
*
|
|
40234
40221
|
* ## CSS Parts
|
|
40235
40222
|
*
|
|
@@ -40287,9 +40274,9 @@ export type CustomElementsSolidJs = {
|
|
|
40287
40274
|
>;
|
|
40288
40275
|
|
|
40289
40276
|
/**
|
|
40290
|
-
* **The calendar is `
|
|
40291
|
-
*
|
|
40292
|
-
*
|
|
40277
|
+
* **The calendar is `DatePicker`, not a second one written here.** It already
|
|
40278
|
+
* knows about months, ranges, disabled days, the first day of the week and
|
|
40279
|
+
* every keyboard rule a grid owes a reader. This element is the field, the
|
|
40293
40280
|
* overlay, and the translation between them.
|
|
40294
40281
|
*
|
|
40295
40282
|
* **Typed as well as picked, and the typing is why it is not
|
|
@@ -41406,8 +41393,8 @@ export type CustomElementsSolidJs = {
|
|
|
41406
41393
|
* Opened declaratively with the platform's invoker attributes:
|
|
41407
41394
|
*
|
|
41408
41395
|
* ```html
|
|
41409
|
-
* <helix-button commandfor="nav" command="--toggle">Menu</helix-button>
|
|
41410
|
-
* <helix-drawer id="nav">…</helix-drawer>
|
|
41396
|
+
* <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button>
|
|
41397
|
+
* <helix-headless-drawer id="nav">…</helix-headless-drawer>
|
|
41411
41398
|
* ```
|
|
41412
41399
|
*
|
|
41413
41400
|
* ## Attributes & Properties
|
|
@@ -41438,10 +41425,10 @@ export type CustomElementsSolidJs = {
|
|
|
41438
41425
|
* not, rather than shown or hidden by CSS.
|
|
41439
41426
|
* - `placement`: Which edge the drawer comes from.
|
|
41440
41427
|
*
|
|
41441
|
-
* Unset is `end`,
|
|
41442
|
-
* beside `:host([placement="end"])` rather than as a value written here: a
|
|
41428
|
+
* Unset is `end`, and it stays unset rather than being written down: a
|
|
41443
41429
|
* default assigned to the property would reflect onto every host and put a
|
|
41444
|
-
* `placement="end"` into markup no consumer wrote.
|
|
41430
|
+
* `placement="end"` into markup no consumer wrote. So what this tier
|
|
41431
|
+
* guarantees is the absence, and a sheet selects on it.
|
|
41445
41432
|
* - `open`: Whether the element is open.
|
|
41446
41433
|
*
|
|
41447
41434
|
* One property, not two, so `dialog.open` answers the question anyone
|
|
@@ -42339,7 +42326,13 @@ export type CustomElementsSolidJs = {
|
|
|
42339
42326
|
* - `fields`: The fields declared inside this, in the order they were written.
|
|
42340
42327
|
*
|
|
42341
42328
|
* What a render may know of them: none on a server, whose shim has no tree
|
|
42342
|
-
* and threw here, and none while hydrating what one sent.
|
|
42329
|
+
* and threw here, and none while hydrating what one sent.
|
|
42330
|
+
*
|
|
42331
|
+
* By identity rather than by tag. A list of names can only hold the tags this
|
|
42332
|
+
* package knows about, so it misses any third one, which is what subclassing
|
|
42333
|
+
* a headless element produces, and it is also how a headless package learns a
|
|
42334
|
+
* styled tag. `instanceof` answers for every one of them and proves the type
|
|
42335
|
+
* the signature claims. (property only) (readonly)
|
|
42343
42336
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
42344
42337
|
*
|
|
42345
42338
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -42578,12 +42571,12 @@ export type CustomElementsSolidJs = {
|
|
|
42578
42571
|
* `FilterField` already plays on its own children.
|
|
42579
42572
|
*
|
|
42580
42573
|
* **It can suggest what to type next, and deciding what to suggest is still the
|
|
42581
|
-
* consumer's.** Slot
|
|
42582
|
-
*
|
|
42583
|
-
*
|
|
42584
|
-
*
|
|
42585
|
-
*
|
|
42586
|
-
*
|
|
42574
|
+
* consumer's.** Slot options into `suggestions` and the field shows them, moves
|
|
42575
|
+
* through them with the arrows, and lets Enter press one; the option fires its
|
|
42576
|
+
* own `helix-select` and the consumer decides what choosing meant. Keys before
|
|
42577
|
+
* a colon and values after it are the same panel with different contents, and
|
|
42578
|
+
* `readFilterText` is exported for a consumer narrowing that panel against what
|
|
42579
|
+
* a reader has half typed.
|
|
42587
42580
|
*
|
|
42588
42581
|
* **The panel opens when there is something in it and closes when there is
|
|
42589
42582
|
* not**, rather than on a choice. A reader who picks a key wants its values
|
|
@@ -42882,11 +42875,12 @@ export type CustomElementsSolidJs = {
|
|
|
42882
42875
|
* would give.
|
|
42883
42876
|
*
|
|
42884
42877
|
* **The element's own text is read as a fallback, and only in a browser.**
|
|
42885
|
-
* `<helix-
|
|
42886
|
-
*
|
|
42887
|
-
*
|
|
42888
|
-
*
|
|
42889
|
-
*
|
|
42878
|
+
* `<helix-headless-format-date
|
|
42879
|
+
* elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
42880
|
+
* that reads best in markup, and it cannot be the only one: measured against
|
|
42881
|
+
* Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
42882
|
+
* `querySelector` are all `undefined` there, so a server has no way to see
|
|
42883
|
+
* it. An element rendered on a server needs the attribute; one rendered in a
|
|
42890
42884
|
* browser may use either.
|
|
42891
42885
|
* - `day`: How the day of the month is written, where a date is shown.
|
|
42892
42886
|
* - `elapsed`: Show how long ago it was, compactly, instead of the date.
|
|
@@ -42987,12 +42981,12 @@ export type CustomElementsSolidJs = {
|
|
|
42987
42981
|
* consumer has to keep by hand, and the one number a summary is told to trust
|
|
42988
42982
|
* is the one it gets wrong.
|
|
42989
42983
|
*
|
|
42990
|
-
* The strip measures itself, so
|
|
42991
|
-
*
|
|
42992
|
-
*
|
|
42993
|
-
*
|
|
42994
|
-
*
|
|
42995
|
-
*
|
|
42984
|
+
* The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
42985
|
+
* own and these two are the estimate used until the first measurement lands.
|
|
42986
|
+
* Writing the attribute pins the value and stops the measurement being
|
|
42987
|
+
* consulted, which is what a container query or a transition on the cell size
|
|
42988
|
+
* wants, where what is drawn this frame is not what the arithmetic should
|
|
42989
|
+
* plan around.
|
|
42996
42990
|
*
|
|
42997
42991
|
* Zero turns the dropping off altogether, which is right for a strip in a
|
|
42998
42992
|
* container that cannot get narrow.
|
|
@@ -43136,11 +43130,6 @@ export type CustomElementsSolidJs = {
|
|
|
43136
43130
|
*
|
|
43137
43131
|
* CSS variables available for styling the component.
|
|
43138
43132
|
*
|
|
43139
|
-
* - `--heatmap-cell-height`: How tall a cell is. A row of a tall thin cell is what a status page draws. (default: `undefined`)
|
|
43140
|
-
* - `--heatmap-cell-inline-size`: How wide a cell is. The strip fits as many as the container allows. (default: `undefined`)
|
|
43141
|
-
* - `--heatmap-cell-radius`: How far a cell's corners are rounded. (default: `undefined`)
|
|
43142
|
-
* - `--heatmap-cell-size`: The size a cell wants on both axes, where neither is given its own. (default: `undefined`)
|
|
43143
|
-
* - `--heatmap-gap`: Space between cells. Zero is a continuous field rather than a grid of tiles. (default: `undefined`)
|
|
43144
43133
|
* - `--heatmap-rows`: How many rows the strip lays out. Written by the component from the data, read by the tier that draws it. (default: `undefined`)
|
|
43145
43134
|
* - `--heatmap-tone`: The tone of the cell this is set on. Written by the component, read by the sheet that paints. (default: `undefined`)
|
|
43146
43135
|
* - `--heatmap-tone-1`: The quietest step of the magnitude ramp, reached by `tones="1 …"`. (default: `undefined`)
|
|
@@ -43227,7 +43216,7 @@ export type CustomElementsSolidJs = {
|
|
|
43227
43216
|
* the same way `label` becomes `aria-label` in there.
|
|
43228
43217
|
*
|
|
43229
43218
|
* ```html
|
|
43230
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
43219
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
43231
43220
|
* ```
|
|
43232
43221
|
*
|
|
43233
43222
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -43548,10 +43537,10 @@ export type CustomElementsSolidJs = {
|
|
|
43548
43537
|
* **Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
43549
43538
|
* state, so reflecting it puts the element's own bookkeeping into the markup
|
|
43550
43539
|
* a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
43551
|
-
* hydration mismatch, and a
|
|
43552
|
-
*
|
|
43553
|
-
*
|
|
43554
|
-
*
|
|
43540
|
+
* hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
43541
|
+
* declares that a picture has arrived which this element has never fetched.
|
|
43542
|
+
* The `data-` name is the library's answer to both, being a name a re-parse
|
|
43543
|
+
* cannot mistake for a declaration, and it is what `data-closed` on
|
|
43555
43544
|
* `Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
43556
43545
|
* which puts this on the safe side of hydration: a fact that can be true on
|
|
43557
43546
|
* the *first* update mirrors to a custom state instead, which is what
|
|
@@ -43667,10 +43656,10 @@ export type CustomElementsSolidJs = {
|
|
|
43667
43656
|
* **The attribute is `readonly`, which is the platform's spelling.** A
|
|
43668
43657
|
* camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
43669
43658
|
* HTML writes as one costs what an attribute always costs here: nothing
|
|
43670
|
-
* warns. `<helix-input readonly>` is what anybody who has written
|
|
43671
|
-
* against `read-only` it parses to no property at all, and the
|
|
43672
|
-
* editable with no error anywhere. Measured on the dash-cased
|
|
43673
|
-
* came back `false`.
|
|
43659
|
+
* warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
43660
|
+
* HTML types; against `read-only` it parses to no property at all, and the
|
|
43661
|
+
* field stays editable with no error anywhere. Measured on the dash-cased
|
|
43662
|
+
* form, `readOnly` came back `false`.
|
|
43674
43663
|
* - `reveal`: Whether a password field offers a toggle that shows what was typed.
|
|
43675
43664
|
*
|
|
43676
43665
|
* Ignored on every other type. A reveal on an email field would be a button
|
|
@@ -43684,9 +43673,9 @@ export type CustomElementsSolidJs = {
|
|
|
43684
43673
|
*
|
|
43685
43674
|
* **Not reflected.** Reflection exists so a selector can reach a value, and
|
|
43686
43675
|
* no stylesheet in this repository selects on `type`. Reflecting it writes
|
|
43687
|
-
* `type="text"` onto every `<helix-input>` ever rendered, an
|
|
43688
|
-
* consumer's markup has, which is the fault the area rules write
|
|
43689
|
-
* `Button`'s `href`, `target` and `rel`.
|
|
43676
|
+
* `type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
43677
|
+
* attribute no consumer's markup has, which is the fault the area rules write
|
|
43678
|
+
* up under `Button`'s `href`, `target` and `rel`.
|
|
43690
43679
|
*
|
|
43691
43680
|
* Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
43692
43681
|
* it as a property binding, which is what makes the keyboard and the
|
|
@@ -44141,8 +44130,7 @@ export type CustomElementsSolidJs = {
|
|
|
44141
44130
|
* over something busy. `triangle` points along the axis and reads as "and
|
|
44142
44131
|
* onward" rather than as a second claim about the data.
|
|
44143
44132
|
*
|
|
44144
|
-
* The shapes come from
|
|
44145
|
-
* `helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
44133
|
+
* The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
44146
44134
|
* the set is identical wherever one appears. **Which is why every value is
|
|
44147
44135
|
* named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
44148
44136
|
* undocumented until the cohort before this one; this family reads the same
|
|
@@ -44413,10 +44401,10 @@ export type CustomElementsSolidJs = {
|
|
|
44413
44401
|
* - `label`: Accessible name for the set.
|
|
44414
44402
|
* - `type`: Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
44415
44403
|
*
|
|
44416
|
-
* Reflected, because this is one of the things a stylesheet selects on
|
|
44417
|
-
*
|
|
44418
|
-
*
|
|
44419
|
-
*
|
|
44404
|
+
* Reflected, because this is one of the things a stylesheet selects on, each
|
|
44405
|
+
* value mapping to a `list-style-type`. The platform's spellings rather than
|
|
44406
|
+
* the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
44407
|
+
* consumer would have written on an `<ol>`.
|
|
44420
44408
|
*
|
|
44421
44409
|
* **`start` and `reversed` are both absent and neither can be done here.**
|
|
44422
44410
|
* This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -45598,9 +45586,9 @@ export type CustomElementsSolidJs = {
|
|
|
45598
45586
|
>;
|
|
45599
45587
|
|
|
45600
45588
|
/**
|
|
45601
|
-
* A notification is a toast that did not go away. `
|
|
45602
|
-
*
|
|
45603
|
-
*
|
|
45589
|
+
* A notification is a toast that did not go away. `Toast` is deliberately the
|
|
45590
|
+
* opposite of this: a live region whose items carry a `duration` and whose root
|
|
45591
|
+
* never creates or destroys anything. What makes this its own family is the
|
|
45604
45592
|
* state each item carries rather than the arrangement it sits in: read and
|
|
45605
45593
|
* unread, a timestamp that has to stay correct, and an action a reader can take
|
|
45606
45594
|
* later.
|
|
@@ -45612,9 +45600,9 @@ export type CustomElementsSolidJs = {
|
|
|
45612
45600
|
* reader wants exactly one of them at a time: the time while they are scanning,
|
|
45613
45601
|
* and what they can do about it once they have stopped on a row.
|
|
45614
45602
|
*
|
|
45615
|
-
* **The timestamp is `
|
|
45616
|
-
*
|
|
45617
|
-
*
|
|
45603
|
+
* **The timestamp is `FormatDate`**, which is where the reading, the `<time
|
|
45604
|
+
* datetime>` and the shared timer now live. It was implemented here, and a
|
|
45605
|
+
* component that formats a date is not a fact about notifications: Chat wanted
|
|
45618
45606
|
* the same thing and had its own copy of half of it.
|
|
45619
45607
|
*
|
|
45620
45608
|
* **Read state is reported, not invented.** Marking something read is usually a
|
|
@@ -45640,10 +45628,10 @@ export type CustomElementsSolidJs = {
|
|
|
45640
45628
|
*
|
|
45641
45629
|
* **Not reflected.** Unread is a visual state, which is why the four mixins
|
|
45642
45630
|
* mirror theirs, but the mirror may not be the property's own attribute:
|
|
45643
|
-
* `<helix-notification default-read>` comes back from a server
|
|
45644
|
-
* and would gain it on the first update, which React reports
|
|
45645
|
-
* mismatch, and which a copy of the serialized element
|
|
45646
|
-
* declaration. `:state(read)` is what the stylesheet reads.
|
|
45631
|
+
* `<helix-headless-notification default-read>` comes back from a server
|
|
45632
|
+
* without `read` and would gain it on the first update, which React reports
|
|
45633
|
+
* as a hydration mismatch, and which a copy of the serialized element
|
|
45634
|
+
* re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
45647
45635
|
* `hydration.dom.spec.ts` holds it.
|
|
45648
45636
|
* - `default-read`/`defaultRead`: State to open with, where nothing declared one.
|
|
45649
45637
|
* - `locale`: Locale for the timestamp.
|
|
@@ -45836,7 +45824,7 @@ export type CustomElementsSolidJs = {
|
|
|
45836
45824
|
*
|
|
45837
45825
|
* Areas where markup can be added to the component.
|
|
45838
45826
|
*
|
|
45839
|
-
* - `(default)`: The notifications
|
|
45827
|
+
* - `(default)`: The notifications.
|
|
45840
45828
|
* - `footer`: Below the list, for a link to everything.
|
|
45841
45829
|
* - `header`: Above the list, for a title and the mark-all control.
|
|
45842
45830
|
*
|
|
@@ -46430,7 +46418,7 @@ export type CustomElementsSolidJs = {
|
|
|
46430
46418
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
46431
46419
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
46432
46420
|
* parser created has none of its attributes yet at that moment: measured on
|
|
46433
|
-
* this element, on `Radio` and on `Toggle`, `<helix-option value="a"
|
|
46421
|
+
* this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
46434
46422
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
46435
46423
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
46436
46424
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -46654,8 +46642,8 @@ export type CustomElementsSolidJs = {
|
|
|
46654
46642
|
/**
|
|
46655
46643
|
* **The component is the truncation.** Given a page and a total it works out
|
|
46656
46644
|
* which numbers to show and where the runs break, so this is data-driven rather
|
|
46657
|
-
* than composed: `<helix-pagination page="4" pages="12">` rather than
|
|
46658
|
-
* slotted children a consumer keeps in step with their own query.
|
|
46645
|
+
* than composed: `<helix-headless-pagination page="4" pages="12">` rather than
|
|
46646
|
+
* twelve slotted children a consumer keeps in step with their own query.
|
|
46659
46647
|
*
|
|
46660
46648
|
* **The width does not change as you page.** The run around the current page is
|
|
46661
46649
|
* `siblings` either side, and grows to absorb a gap slot at a boundary, so the
|
|
@@ -47096,10 +47084,10 @@ export type CustomElementsSolidJs = {
|
|
|
47096
47084
|
* marked letters wants `text`, which judges nothing.
|
|
47097
47085
|
*
|
|
47098
47086
|
* **Not reflected**: nothing selects on it, so reflecting only writes
|
|
47099
|
-
* `type="numeric"` onto every `<helix-pin-input>` ever rendered, an
|
|
47100
|
-
* no consumer's markup had. The area rules carry the sentence
|
|
47101
|
-
* what CSS selects on". The real inputs take it as a binding,
|
|
47102
|
-
* makes the keyboard follow.
|
|
47087
|
+
* `type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
47088
|
+
* attribute no consumer's markup had. The area rules carry the sentence
|
|
47089
|
+
* "reflect only what CSS selects on". The real inputs take it as a binding,
|
|
47090
|
+
* which is what makes the keyboard follow.
|
|
47103
47091
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
47104
47092
|
* - `value`: What the control holds now, and what its form submits.
|
|
47105
47093
|
*
|
|
@@ -47858,7 +47846,7 @@ export type CustomElementsSolidJs = {
|
|
|
47858
47846
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
47859
47847
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
47860
47848
|
* parser created has none of its attributes yet at that moment: measured on
|
|
47861
|
-
* this element, on `Option` and on `Toggle`, `<helix-radio value="a"
|
|
47849
|
+
* this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
47862
47850
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
47863
47851
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
47864
47852
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -49331,11 +49319,10 @@ export type CustomElementsSolidJs = {
|
|
|
49331
49319
|
* mean defining what a dial with a submenu in it does.
|
|
49332
49320
|
*
|
|
49333
49321
|
* **The trigger is a control the consumer slots**, and the floating action
|
|
49334
|
-
* button is the usual one: `
|
|
49335
|
-
*
|
|
49336
|
-
* `
|
|
49337
|
-
*
|
|
49338
|
-
* layer.
|
|
49322
|
+
* button is the usual one: `IconButton` with `shape="circle"` and `raised`.
|
|
49323
|
+
* There is no `helix-fab`, because it would re-declare `emphasis`, `tone`,
|
|
49324
|
+
* `label` and a size around a control that already has all four. A round raised
|
|
49325
|
+
* button is a shape, and where it sits is `data-dock` in the base layer.
|
|
49339
49326
|
*
|
|
49340
49327
|
* **Nothing is reserved from the keyboard.** A menu that drills has to keep the
|
|
49341
49328
|
* horizontal pair for going in and coming back; a dial goes nowhere, so all four
|
|
@@ -49703,9 +49690,9 @@ export type CustomElementsSolidJs = {
|
|
|
49703
49690
|
* The row directions set them side by side, for a figure in a line of text or
|
|
49704
49691
|
* a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
49705
49692
|
*
|
|
49706
|
-
* A property rather than a `
|
|
49707
|
-
*
|
|
49708
|
-
*
|
|
49693
|
+
* A property rather than a `Flex` around it, because the unit has to stay on
|
|
49694
|
+
* the value's baseline whichever way the pair goes, and only this element
|
|
49695
|
+
* knows which of its children the unit belongs to.
|
|
49709
49696
|
*
|
|
49710
49697
|
* **Optional rather than defaulted to `column`, which is not a style
|
|
49711
49698
|
* preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -49841,7 +49828,7 @@ export type CustomElementsSolidJs = {
|
|
|
49841
49828
|
*
|
|
49842
49829
|
* Areas where markup can be added to the component.
|
|
49843
49830
|
*
|
|
49844
|
-
* - `(default)`: The steps
|
|
49831
|
+
* - `(default)`: The steps.
|
|
49845
49832
|
*
|
|
49846
49833
|
* ## Methods
|
|
49847
49834
|
*
|
|
@@ -49871,9 +49858,9 @@ export type CustomElementsSolidJs = {
|
|
|
49871
49858
|
|
|
49872
49859
|
/**
|
|
49873
49860
|
* **The name is a button, and only the name.** The marker is `aria-hidden`
|
|
49874
|
-
* decoration, so wrapping it would add hit area and no meaning. It is
|
|
49875
|
-
*
|
|
49876
|
-
*
|
|
49861
|
+
* decoration, so wrapping it would add hit area and no meaning. It is `Button`
|
|
49862
|
+
* rather than a `<button>` this element resets: the hover wash, the focus ring
|
|
49863
|
+
* and the disabled treatment are decisions the button carries.
|
|
49877
49864
|
*
|
|
49878
49865
|
* **It says nothing about where a reader may go.** Every step is pressable and
|
|
49879
49866
|
* announces itself with `helix-select`; refusing the ones ahead is `disabled`,
|
|
@@ -49926,7 +49913,7 @@ export type CustomElementsSolidJs = {
|
|
|
49926
49913
|
* Areas where markup can be added to the component.
|
|
49927
49914
|
*
|
|
49928
49915
|
* - `(default)`: The step's name.
|
|
49929
|
-
* - `content`: What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with
|
|
49916
|
+
* - `content`: What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with, so whether it is folded away is the sheet's answer and not this tier's.
|
|
49930
49917
|
* - `description`: A line under the name, for what the stage is for.
|
|
49931
49918
|
* - `marker`: Replaces the number, or the check a complete step shows.
|
|
49932
49919
|
*
|
|
@@ -49943,7 +49930,7 @@ export type CustomElementsSolidJs = {
|
|
|
49943
49930
|
* - `body`: The name and its description.
|
|
49944
49931
|
* - `content`: What the stage holds, while it is open.
|
|
49945
49932
|
* - `description`: The line under it.
|
|
49946
|
-
* - `label`: The step's name, which is a
|
|
49933
|
+
* - `label`: The step's name, which is a control.
|
|
49947
49934
|
* - `label-button`: The inner control.
|
|
49948
49935
|
* - `lead`: The half line arriving from the step before.
|
|
49949
49936
|
* - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
|
|
@@ -50212,23 +50199,23 @@ export type CustomElementsSolidJs = {
|
|
|
50212
50199
|
* the table has another track; remove one and it does not. That is what ties
|
|
50213
50200
|
* the two together, and a table-level track list on its own does not: a list
|
|
50214
50201
|
* that is accidentally the headings is invalid CSS a grid ignores in silence,
|
|
50215
|
-
* drawing the whole table as one column. `
|
|
50216
|
-
*
|
|
50217
|
-
*
|
|
50218
|
-
*
|
|
50219
|
-
*
|
|
50202
|
+
* drawing the whole table as one column. `Table`'s `columns` is dealt out a
|
|
50203
|
+
* track at a time against the columns declared under it, so a heading among the
|
|
50204
|
+
* widths costs its own column a width and no more, and a list longer or shorter
|
|
50205
|
+
* than the columns is trimmed or shared rather than being a second count of
|
|
50206
|
+
* them. A column's own `width` wins over the track in its place.
|
|
50220
50207
|
*
|
|
50221
50208
|
* **It is also where every per-column fact goes**, which is the reason
|
|
50222
|
-
* `
|
|
50223
|
-
*
|
|
50224
|
-
*
|
|
50209
|
+
* `DataTable` needs no column config object. `field` names the key the cell
|
|
50210
|
+
* reads, `sortable` says a reader may reorder by it, `align` says which edge
|
|
50211
|
+
* the values line up against, and `cell` takes a function for anything the
|
|
50225
50212
|
* field alone cannot express. The schema is markup and the data is a property:
|
|
50226
50213
|
* a schema is small, declarative, and something a reader should be able to see
|
|
50227
50214
|
* in the HTML, and data is large and windowed.
|
|
50228
50215
|
*
|
|
50229
50216
|
* **The same element serves both tables**, the markup one and the data one. It
|
|
50230
|
-
* is identified by a flag rather than by `instanceof`, so a `
|
|
50231
|
-
*
|
|
50217
|
+
* is identified by a flag rather than by `instanceof`, so a `TableColumn` works
|
|
50218
|
+
* inside either without the two roots sharing anything else.
|
|
50232
50219
|
*
|
|
50233
50220
|
* **It generates no box of its own**, the same as a row: the heading is a grid
|
|
50234
50221
|
* item of the table, so it lines up with the cells under it rather than sitting
|
|
@@ -50238,10 +50225,10 @@ export type CustomElementsSolidJs = {
|
|
|
50238
50225
|
* both, so the columns after it keep their own widths and every row keeps its
|
|
50239
50226
|
* cells under their headings. `hidden="until-found"` keeps its track, the
|
|
50240
50227
|
* heading being left drawn, as every Helix element leaves one with that value.
|
|
50241
|
-
* `
|
|
50242
|
-
*
|
|
50243
|
-
*
|
|
50244
|
-
*
|
|
50228
|
+
* `DataTable` draws the cells, so it leaves out the ones under a hidden column.
|
|
50229
|
+
* A `Table`'s cells are markup the consumer wrote, so hide them with the
|
|
50230
|
+
* column, as removing a column means removing its cells: a row with a cell more
|
|
50231
|
+
* than the table has tracks wraps into the next.
|
|
50245
50232
|
*
|
|
50246
50233
|
* **A heading that does something holds a control that does it.** The host is
|
|
50247
50234
|
* the column header, and a header is not focusable, so a sortable heading is a
|
|
@@ -50257,15 +50244,15 @@ export type CustomElementsSolidJs = {
|
|
|
50257
50244
|
*
|
|
50258
50245
|
* - `align`: Which edge the values line up against.
|
|
50259
50246
|
*
|
|
50260
|
-
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
50261
|
-
* above each other. Left unset the cell inherits the table's own
|
|
50262
|
-
* which is `start` for text in either writing direction.
|
|
50263
|
-
* aligns the cells it draws. A `
|
|
50264
|
-
* wrote, so the table writes nothing onto them: it publishes the
|
|
50265
|
-
* cell under this column as `--table-cell-align`, which
|
|
50266
|
-
* reads. The heading is this element's own, and
|
|
50267
|
-
* the same edge in either table. `end` is the
|
|
50268
|
-
* right-to-left table it is the left.
|
|
50247
|
+
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
50248
|
+
* sit above each other. Left unset the cell inherits the table's own
|
|
50249
|
+
* alignment, which is `start` for text in either writing direction.
|
|
50250
|
+
* `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
50251
|
+
* consumer wrote, so the table writes nothing onto them: it publishes the
|
|
50252
|
+
* edge to each cell under this column as `--table-cell-align`, which
|
|
50253
|
+
* `@fusion.dev/helix` reads. The heading is this element's own, and
|
|
50254
|
+
* `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
50255
|
+
* inline end, so in a right-to-left table it is the left.
|
|
50269
50256
|
*
|
|
50270
50257
|
* **Reflected, because the heading is drawn by a stylesheet and has no other
|
|
50271
50258
|
* way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -50308,8 +50295,8 @@ export type CustomElementsSolidJs = {
|
|
|
50308
50295
|
* - `width`: The track this column takes, as CSS.
|
|
50309
50296
|
*
|
|
50310
50297
|
* A single track value, so anything valid in `grid-template-columns` works:
|
|
50311
|
-
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
|
|
50312
|
-
*
|
|
50298
|
+
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
50299
|
+
* its place in a `Table`'s `columns`, where that table sets one, and
|
|
50313
50300
|
* otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
50314
50301
|
* Set here, it wins over that list, which is what lets a reader resize a
|
|
50315
50302
|
* column in a table that set one.
|
|
@@ -50435,15 +50422,14 @@ export type CustomElementsSolidJs = {
|
|
|
50435
50422
|
*
|
|
50436
50423
|
* - `columns`: The column widths as one track list, written once on the table.
|
|
50437
50424
|
*
|
|
50438
|
-
* With `
|
|
50439
|
-
*
|
|
50440
|
-
*
|
|
50441
|
-
*
|
|
50442
|
-
*
|
|
50443
|
-
*
|
|
50444
|
-
*
|
|
50445
|
-
*
|
|
50446
|
-
* down to one column.
|
|
50425
|
+
* With `TableColumn` children, each track sizes the column in its place, a
|
|
50426
|
+
* hidden column counted, so hiding one takes its track with it and the rest
|
|
50427
|
+
* keep theirs. The columns decide how many tracks there are and this list
|
|
50428
|
+
* only how wide: a track past the last column is dropped, and a column past
|
|
50429
|
+
* the last track shares what is left. With no columns declared it is the
|
|
50430
|
+
* whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
50431
|
+
* is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
50432
|
+
* its column at the default rather than taking the table down to one column.
|
|
50447
50433
|
*
|
|
50448
50434
|
* **A column's own `width` wins over its track here.** The width is written
|
|
50449
50435
|
* on the column it sizes, which is the more particular statement, and it is
|
|
@@ -50457,13 +50443,11 @@ export type CustomElementsSolidJs = {
|
|
|
50457
50443
|
* whole answer: a table given one lays its grid out in the first paint, and a
|
|
50458
50444
|
* table sized only by its columns is one track wide until it upgrades.
|
|
50459
50445
|
*
|
|
50460
|
-
*
|
|
50461
|
-
*
|
|
50462
|
-
*
|
|
50463
|
-
*
|
|
50464
|
-
*
|
|
50465
|
-
* take the same CSS hook, `--table-columns` and `--data-table-columns`, which
|
|
50466
|
-
* wins over whichever list the element worked out.
|
|
50446
|
+
* **Data Table has none of this, and should not.** Its columns are its schema
|
|
50447
|
+
* rather than an option, so there is always a column to write a `width` on
|
|
50448
|
+
* and a list here would be a second way to say what that says. This table's
|
|
50449
|
+
* cells are markup, and a table written as rows of cells with no column
|
|
50450
|
+
* declared in it has nowhere else to be sized from.
|
|
50467
50451
|
* - `label`: Accessible name for the table.
|
|
50468
50452
|
* - `empty-text`/`emptyText`: What is said where there are none, and none are coming.
|
|
50469
50453
|
* - `loading`: Whether the rows are still on their way.
|
|
@@ -50504,7 +50488,7 @@ export type CustomElementsSolidJs = {
|
|
|
50504
50488
|
*
|
|
50505
50489
|
* CSS variables available for styling the component.
|
|
50506
50490
|
*
|
|
50507
|
-
* - `--table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet.
|
|
50491
|
+
* - `--table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `columns` is the one to set. (default: `undefined`)
|
|
50508
50492
|
*
|
|
50509
50493
|
* ## CSS Parts
|
|
50510
50494
|
*
|
|
@@ -50529,10 +50513,10 @@ export type CustomElementsSolidJs = {
|
|
|
50529
50513
|
>;
|
|
50530
50514
|
|
|
50531
50515
|
/**
|
|
50532
|
-
*
|
|
50533
|
-
* the table's own grid and every column lines up
|
|
50534
|
-
* still exists as an element, which is what a
|
|
50535
|
-
* cells are laid out by the table algorithm.
|
|
50516
|
+
* The row renders its cells straight through and lays out none of them, so a
|
|
50517
|
+
* sheet can take them into the table's own grid and every column lines up
|
|
50518
|
+
* across every row. The row still exists as an element, which is what a
|
|
50519
|
+
* `<table>` gives away when its cells are laid out by the table algorithm.
|
|
50536
50520
|
*
|
|
50537
50521
|
* ## Attributes & Properties
|
|
50538
50522
|
*
|
|
@@ -51151,10 +51135,10 @@ export type CustomElementsSolidJs = {
|
|
|
51151
51135
|
>;
|
|
51152
51136
|
|
|
51153
51137
|
/**
|
|
51154
|
-
* **The list is `
|
|
51138
|
+
* **The list is `TimePicker`, not a second one written here.** It is worth
|
|
51155
51139
|
* having on its own, flat in a settings pane with nothing to open, and this
|
|
51156
51140
|
* element is the field, the overlay and the form. Exactly the arrangement Input
|
|
51157
|
-
* Date has with `
|
|
51141
|
+
* Date has with `DatePicker` and Color Input with `ColorPicker`.
|
|
51158
51142
|
*
|
|
51159
51143
|
* **Typed as well as picked, and that is the division the list depends on.** A
|
|
51160
51144
|
* list at a step offers the times a product actually has, and the field is how a
|
|
@@ -51185,8 +51169,8 @@ export type CustomElementsSolidJs = {
|
|
|
51185
51169
|
*
|
|
51186
51170
|
* Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
51187
51171
|
* number, and both are carried as one comma-separated value, which is what a
|
|
51188
|
-
* form submits. `
|
|
51189
|
-
* why a wheel cannot do either.
|
|
51172
|
+
* form submits. `TimePicker` carries the longer note on the interaction and
|
|
51173
|
+
* on why a wheel cannot do either.
|
|
51190
51174
|
* - `placeholder`: What the field says before a time is in it.
|
|
51191
51175
|
* - `step`: How far apart the offered times are, in minutes.
|
|
51192
51176
|
* - `time-style`/`timeStyle`: Whether the field writes the time out, or holds the value as it is.
|
|
@@ -51201,7 +51185,7 @@ export type CustomElementsSolidJs = {
|
|
|
51201
51185
|
* `list` offers whole times, which is what a product with slots or opening
|
|
51202
51186
|
* hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
51203
51187
|
* the locale uses one, which is the only way to reach `23:45` without
|
|
51204
|
-
* scrolling most of a day. `
|
|
51188
|
+
* scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
51205
51189
|
*
|
|
51206
51190
|
* **Optional rather than defaulted, which is not a style preference.** A
|
|
51207
51191
|
* reflecting property with a default writes its attribute onto every host the
|
|
@@ -51448,8 +51432,8 @@ export type CustomElementsSolidJs = {
|
|
|
51448
51432
|
|
|
51449
51433
|
/**
|
|
51450
51434
|
* **A list rather than three wheels**, and the reason is what a list already
|
|
51451
|
-
* is. `
|
|
51452
|
-
*
|
|
51435
|
+
* is. `Listbox` brings the keyboard, the typeahead, the scroll into view and
|
|
51436
|
+
* the announcement of a set of options, and a time at a step is a set of
|
|
51453
51437
|
* options. Three little wheels for hours, minutes and a meridiem are three
|
|
51454
51438
|
* controls to build, three to test, and a tab stop each for something a reader
|
|
51455
51439
|
* answers once.
|
|
@@ -51510,7 +51494,7 @@ export type CustomElementsSolidJs = {
|
|
|
51510
51494
|
*
|
|
51511
51495
|
* Absent is one. `range` holds a start and an end with everything between
|
|
51512
51496
|
* them shown as part of the answer, `multiple` holds any number, and both are
|
|
51513
|
-
* carried as one comma-separated value: the same shape `
|
|
51497
|
+
* carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
51514
51498
|
* because it is the same question asked of a different unit.
|
|
51515
51499
|
*
|
|
51516
51500
|
* **A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -52067,7 +52051,7 @@ export type CustomElementsSolidJs = {
|
|
|
52067
52051
|
* **Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
52068
52052
|
* defaulting is the pair that writes onto a host: every toast region anybody
|
|
52069
52053
|
* rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
52070
|
-
* consumer's server markup does not have.
|
|
52054
|
+
* consumer's server markup does not have. A sheet carries the resting
|
|
52071
52055
|
* arrangement in its own `:host` rule and the selectors describe only the
|
|
52072
52056
|
* departures, which is what `orientation` does.
|
|
52073
52057
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -52101,7 +52085,7 @@ export type CustomElementsSolidJs = {
|
|
|
52101
52085
|
*
|
|
52102
52086
|
* Areas where markup can be added to the component.
|
|
52103
52087
|
*
|
|
52104
|
-
* - `(default)`: The messages
|
|
52088
|
+
* - `(default)`: The messages.
|
|
52105
52089
|
*
|
|
52106
52090
|
* ## CSS Parts
|
|
52107
52091
|
*
|
|
@@ -52335,11 +52319,11 @@ export type CustomElementsSolidJs = {
|
|
|
52335
52319
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
52336
52320
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
52337
52321
|
* parser created has none of its attributes yet at that moment: measured on
|
|
52338
|
-
* this element, on `Option` and on `Radio`, `<helix-toggle
|
|
52339
|
-
* selected>` reported `defaultSelected` as `false` both from
|
|
52340
|
-
* and from `createElement` followed by `setAttribute`, which is
|
|
52341
|
-
* consumer writes one. The snapshot could only ever be true for
|
|
52342
|
-
* already in the document when `customElements.define` ran.
|
|
52322
|
+
* this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
52323
|
+
* value="light" selected>` reported `defaultSelected` as `false` both from
|
|
52324
|
+
* parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
52325
|
+
* every way a consumer writes one. The snapshot could only ever be true for
|
|
52326
|
+
* an element already in the document when `customElements.define` ran.
|
|
52343
52327
|
*
|
|
52344
52328
|
* Nothing overwrites it either, which is what makes reading it late correct
|
|
52345
52329
|
* rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -52501,8 +52485,8 @@ export type CustomElementsSolidJs = {
|
|
|
52501
52485
|
* the ordinary way:
|
|
52502
52486
|
*
|
|
52503
52487
|
* ```html
|
|
52504
|
-
* <helix-button id="save" aria-describedby="save-tip">Save</helix-button>
|
|
52505
|
-
* <helix-tooltip id="save-tip" for="save" content="Save your work"></helix-tooltip>
|
|
52488
|
+
* <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button>
|
|
52489
|
+
* <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip>
|
|
52506
52490
|
* ```
|
|
52507
52491
|
*
|
|
52508
52492
|
* The reference points at *this host*, not at the bubble in its shadow root:
|
|
@@ -52817,9 +52801,9 @@ export type CustomElementsSolidJs = {
|
|
|
52817
52801
|
* - **When it shows.** Which is `current`, and which the root decides.
|
|
52818
52802
|
*
|
|
52819
52803
|
* What it does not own is the heading, the paragraph, the picture and the
|
|
52820
|
-
* layout. Slot a `
|
|
52821
|
-
*
|
|
52822
|
-
*
|
|
52804
|
+
* layout. Slot a `Card`, or a heading and a line of prose, or anything else.
|
|
52805
|
+
* Fixed `title` and `body` parts would be a component deciding what a tour is
|
|
52806
|
+
* allowed to say.
|
|
52823
52807
|
*
|
|
52824
52808
|
* **The buttons are slot fallback, so the common case costs nothing and the
|
|
52825
52809
|
* uncommon one is possible.** Write nothing and get Back, Next and Skip already
|
|
@@ -53580,7 +53564,7 @@ export type CustomElementsSolidJs = {
|
|
|
53580
53564
|
* Areas where markup can be added to the component.
|
|
53581
53565
|
*
|
|
53582
53566
|
* - `(default)`: The entries.
|
|
53583
|
-
* - `player`: The
|
|
53567
|
+
* - `player`: The player the entries take turns in.
|
|
53584
53568
|
*
|
|
53585
53569
|
* ## Methods
|
|
53586
53570
|
*
|
|
@@ -53997,7 +53981,7 @@ export type CustomElementsSolidJs = {
|
|
|
53997
53981
|
export type CustomCssProperties = {
|
|
53998
53982
|
/** How wide an axis column is drawn, in `ch`, from the widest number on it. Written on the axis itself, and only where the categories run along the bottom: turned sideways an axis is a row and takes a line's height instead. */
|
|
53999
53983
|
"--bar-chart-axis"?: (string) | undefined;
|
|
54000
|
-
/** The color of the secondary axis
|
|
53984
|
+
/** The color of the secondary axis, where one series owns it. Written by the component from that series' `--chart-series-*`, so it promises the series color and nothing more: whatever that hook resolves to is what the axis is drawn in. */
|
|
54001
53985
|
"--bar-chart-secondary"?: (string) | undefined;
|
|
54002
53986
|
/** The gradient a bar would take, named per bar so the styled tier can point `fill` at it. Drawn whatever the treatment and used only where `wash="gradient"` asks for it. */
|
|
54003
53987
|
"--chart-bar-wash"?: (string) | undefined;
|
|
@@ -54021,24 +54005,14 @@ export type CustomCssProperties = {
|
|
|
54021
54005
|
"--color-picker-saturation"?: (string) | undefined;
|
|
54022
54006
|
/** A color to paint: the current one on the sample, a preset's on each preset. */
|
|
54023
54007
|
"--color-picker-swatch"?: (string) | undefined;
|
|
54024
|
-
/** The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one;
|
|
54008
|
+
/** The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; Table publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. */
|
|
54025
54009
|
"--data-table-cell-align"?: (string) | undefined;
|
|
54026
|
-
/** The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet.
|
|
54010
|
+
/** The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. A column's `width` is the one to set. */
|
|
54027
54011
|
"--data-table-template"?: (string) | undefined;
|
|
54028
54012
|
/** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
|
|
54029
54013
|
"--date-picker-column-count"?: (string) | undefined;
|
|
54030
54014
|
/** How thick the ring is drawn, derived from `hole`. */
|
|
54031
54015
|
"--donut-chart-stroke"?: (string) | undefined;
|
|
54032
|
-
/** How tall a cell is. A row of a tall thin cell is what a status page draws. */
|
|
54033
|
-
"--heatmap-cell-height"?: (string) | undefined;
|
|
54034
|
-
/** How wide a cell is. The strip fits as many as the container allows. */
|
|
54035
|
-
"--heatmap-cell-inline-size"?: (string) | undefined;
|
|
54036
|
-
/** How far a cell's corners are rounded. */
|
|
54037
|
-
"--heatmap-cell-radius"?: (string) | undefined;
|
|
54038
|
-
/** The size a cell wants on both axes, where neither is given its own. */
|
|
54039
|
-
"--heatmap-cell-size"?: (string) | undefined;
|
|
54040
|
-
/** Space between cells. Zero is a continuous field rather than a grid of tiles. */
|
|
54041
|
-
"--heatmap-gap"?: (string) | undefined;
|
|
54042
54016
|
/** How many rows the strip lays out. Written by the component from the data, read by the tier that draws it. */
|
|
54043
54017
|
"--heatmap-rows"?: (string) | undefined;
|
|
54044
54018
|
/** The tone of the cell this is set on. Written by the component, read by the sheet that paints. */
|
|
@@ -54113,7 +54087,7 @@ export type CustomCssProperties = {
|
|
|
54113
54087
|
"--splitter-position"?: (string) | undefined;
|
|
54114
54088
|
/** The edge the column this cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the table around it, since the cell is the consumer's markup and nothing is written onto it; read by the sheet that draws the cell, where `justify-content` and `text-align` both take it as it comes and both follow the writing direction. */
|
|
54115
54089
|
"--table-cell-align"?: (string) | undefined;
|
|
54116
|
-
/** The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet.
|
|
54090
|
+
/** The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `columns` is the one to set. */
|
|
54117
54091
|
"--table-template"?: (string) | undefined;
|
|
54118
54092
|
/** How long this message stays, in milliseconds, for a progress hint. */
|
|
54119
54093
|
"--toast-duration"?: (string) | undefined;
|