@fusion.dev/helix-headless 0.53.1 → 0.53.3
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 +184 -193
- 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 +19 -20
- 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-group/root/checkbox-group-root.d.ts +4 -4
- 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 +9 -5
- package/dist/combobox/root/combobox-root.js +2 -3
- package/dist/command/root/command-root.d.ts +6 -7
- package/dist/data-table/root/data-table-root.d.ts +42 -41
- 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/donut-chart/root/donut-chart-root.d.ts +1 -1
- 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 +13 -14
- 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/object-inspector/root/object-inspector-root.d.ts +10 -0
- package/dist/object-inspector/root/object-inspector-root.js +6 -3
- package/dist/option/root/option-root.d.ts +7 -8
- package/dist/pagination/root/pagination-root.d.ts +5 -5
- package/dist/pagination/size/pagination-size.d.ts +2 -1
- 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 +1 -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/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/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 +5 -5
- 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/root/tree-root.d.ts +8 -7
- package/dist/tree/root/tree-root.js +1 -1
- 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 +958 -990
- package/types/vue.d.ts +229 -244
package/types/jsx.d.ts
CHANGED
|
@@ -440,9 +440,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
440
440
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
441
441
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
442
442
|
open?: (HelixHeadlessAccordionItem["open"]) | undefined;
|
|
443
|
-
/**
|
|
443
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
444
444
|
"default-open"?: (HelixHeadlessAccordionItem["defaultOpen"]) | undefined;
|
|
445
|
-
/**
|
|
445
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
446
446
|
defaultOpen?: (HelixHeadlessAccordionItem["defaultOpen"]) | undefined;
|
|
447
447
|
|
|
448
448
|
/** Fired before the section closes, and cancelable. */
|
|
@@ -507,9 +507,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
507
507
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
508
508
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
509
509
|
"prop:open"?: (HelixHeadlessAccordionItem["open"]) | undefined;
|
|
510
|
-
/**
|
|
510
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
511
511
|
"bool:default-open"?: (HelixHeadlessAccordionItem["defaultOpen"]) | undefined;
|
|
512
|
-
/**
|
|
512
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
513
513
|
"prop:defaultOpen"?: (HelixHeadlessAccordionItem["defaultOpen"]) | undefined;
|
|
514
514
|
/** Fired before the section closes, and cancelable. */
|
|
515
515
|
"on:helix-before-close"?: ((
|
|
@@ -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
|
|
@@ -1784,12 +1784,11 @@ export type HelixHeadlessCarouselProps = {
|
|
|
1784
1784
|
autoplay?: (HelixHeadlessCarousel["autoplay"]) | undefined;
|
|
1785
1785
|
/** The slide in view, counted from zero.
|
|
1786
1786
|
|
|
1787
|
-
Reading gives the real slide
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
`index`
|
|
1791
|
-
|
|
1792
|
-
and `default-index` says where it starts.
|
|
1787
|
+
Reading gives the real slide. Writing always applies, the way a script
|
|
1788
|
+
assigning to a native control does, and is a seed and a correction rather
|
|
1789
|
+
than a claim of ownership: a consumer who wants the decision refuses the
|
|
1790
|
+
`helix-select`. `default-index` is where the carousel starts until
|
|
1791
|
+
something moves it.
|
|
1793
1792
|
|
|
1794
1793
|
The same contract the four mixins carry, written out here rather than
|
|
1795
1794
|
extracted, because a slide is addressed by position and every one of those
|
|
@@ -1857,13 +1856,13 @@ end while the slides stop moving a third of the way through.
|
|
|
1857
1856
|
**The number is published to the styles rather than enumerated by them**,
|
|
1858
1857
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
1859
1858
|
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
|
-
|
|
1859
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
1860
|
+
above it the pane falls back to one across while this file goes on counting
|
|
1861
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
1862
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
1863
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
1864
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
1865
|
+
correction the same way and for the same reason.
|
|
1867
1866
|
|
|
1868
1867
|
**On the track and not on the host.** A custom property on the host is a
|
|
1869
1868
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -1888,8 +1887,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
1888
1887
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
1889
1888
|
exactly three.
|
|
1890
1889
|
|
|
1891
|
-
|
|
1892
|
-
|
|
1890
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
1891
|
+
three lines for a consumer writing their own.
|
|
1893
1892
|
|
|
1894
1893
|
**A value rather than the resting behavior**, which is what the
|
|
1895
1894
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -1917,13 +1916,13 @@ end while the slides stop moving a third of the way through.
|
|
|
1917
1916
|
**The number is published to the styles rather than enumerated by them**,
|
|
1918
1917
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
1919
1918
|
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
|
-
|
|
1919
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
1920
|
+
above it the pane falls back to one across while this file goes on counting
|
|
1921
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
1922
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
1923
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
1924
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
1925
|
+
correction the same way and for the same reason.
|
|
1927
1926
|
|
|
1928
1927
|
**On the track and not on the host.** A custom property on the host is a
|
|
1929
1928
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -1948,8 +1947,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
1948
1947
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
1949
1948
|
exactly three.
|
|
1950
1949
|
|
|
1951
|
-
|
|
1952
|
-
|
|
1950
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
1951
|
+
three lines for a consumer writing their own.
|
|
1953
1952
|
|
|
1954
1953
|
**A value rather than the resting behavior**, which is what the
|
|
1955
1954
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -1973,12 +1972,11 @@ export type HelixHeadlessCarouselSolidJsProps = {
|
|
|
1973
1972
|
"prop:autoplay"?: (HelixHeadlessCarousel["autoplay"]) | undefined;
|
|
1974
1973
|
/** The slide in view, counted from zero.
|
|
1975
1974
|
|
|
1976
|
-
Reading gives the real slide
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
`index`
|
|
1980
|
-
|
|
1981
|
-
and `default-index` says where it starts.
|
|
1975
|
+
Reading gives the real slide. Writing always applies, the way a script
|
|
1976
|
+
assigning to a native control does, and is a seed and a correction rather
|
|
1977
|
+
than a claim of ownership: a consumer who wants the decision refuses the
|
|
1978
|
+
`helix-select`. `default-index` is where the carousel starts until
|
|
1979
|
+
something moves it.
|
|
1982
1980
|
|
|
1983
1981
|
The same contract the four mixins carry, written out here rather than
|
|
1984
1982
|
extracted, because a slide is addressed by position and every one of those
|
|
@@ -2046,13 +2044,13 @@ end while the slides stop moving a third of the way through.
|
|
|
2046
2044
|
**The number is published to the styles rather than enumerated by them**,
|
|
2047
2045
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
2048
2046
|
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
|
-
|
|
2047
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
2048
|
+
above it the pane falls back to one across while this file goes on counting
|
|
2049
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
2050
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
2051
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
2052
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
2053
|
+
correction the same way and for the same reason.
|
|
2056
2054
|
|
|
2057
2055
|
**On the track and not on the host.** A custom property on the host is a
|
|
2058
2056
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -2077,8 +2075,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
2077
2075
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
2078
2076
|
exactly three.
|
|
2079
2077
|
|
|
2080
|
-
|
|
2081
|
-
|
|
2078
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
2079
|
+
three lines for a consumer writing their own.
|
|
2082
2080
|
|
|
2083
2081
|
**A value rather than the resting behavior**, which is what the
|
|
2084
2082
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -2106,13 +2104,13 @@ end while the slides stop moving a third of the way through.
|
|
|
2106
2104
|
**The number is published to the styles rather than enumerated by them**,
|
|
2107
2105
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
2108
2106
|
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
|
-
|
|
2107
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
2108
|
+
above it the pane falls back to one across while this file goes on counting
|
|
2109
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
2110
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
2111
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
2112
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
2113
|
+
correction the same way and for the same reason.
|
|
2116
2114
|
|
|
2117
2115
|
**On the track and not on the host.** A custom property on the host is a
|
|
2118
2116
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -2137,8 +2135,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
2137
2135
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
2138
2136
|
exactly three.
|
|
2139
2137
|
|
|
2140
|
-
|
|
2141
|
-
|
|
2138
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
2139
|
+
three lines for a consumer writing their own.
|
|
2142
2140
|
|
|
2143
2141
|
**A value rather than the resting behavior**, which is what the
|
|
2144
2142
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -2387,13 +2385,13 @@ pinned because a conversation opens at its most recent turn.
|
|
|
2387
2385
|
|
|
2388
2386
|
**Not reflected, and the default is why.** A reflected property that
|
|
2389
2387
|
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. */
|
|
2388
|
+
consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
2389
|
+
and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
2390
|
+
hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
2391
|
+
needs the attribute either, because the one thing that changes with the pin
|
|
2392
|
+
is the way back, and that is a part inside the shadow tree where a
|
|
2393
|
+
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
2394
|
+
pinned` after upgrade against `label` from the server. */
|
|
2397
2395
|
pinned?: (HelixHeadlessChat["pinned"]) | undefined;
|
|
2398
2396
|
/** How near the bottom still counts as being at it, in pixels.
|
|
2399
2397
|
|
|
@@ -2464,13 +2462,13 @@ pinned because a conversation opens at its most recent turn.
|
|
|
2464
2462
|
|
|
2465
2463
|
**Not reflected, and the default is why.** A reflected property that
|
|
2466
2464
|
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. */
|
|
2465
|
+
consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
2466
|
+
and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
2467
|
+
hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
2468
|
+
needs the attribute either, because the one thing that changes with the pin
|
|
2469
|
+
is the way back, and that is a part inside the shadow tree where a
|
|
2470
|
+
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
2471
|
+
pinned` after upgrade against `label` from the server. */
|
|
2474
2472
|
"prop:pinned"?: (HelixHeadlessChat["pinned"]) | undefined;
|
|
2475
2473
|
/** How near the bottom still counts as being at it, in pixels.
|
|
2476
2474
|
|
|
@@ -2652,9 +2650,9 @@ Not reflected: the attribute is the consumer's input and stays as they
|
|
|
2652
2650
|
wrote it, and `:state(checked)` carries the resolved state for
|
|
2653
2651
|
stylesheets. */
|
|
2654
2652
|
checked?: (HelixHeadlessCheckbox["checked"]) | undefined;
|
|
2655
|
-
/**
|
|
2653
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
2656
2654
|
"default-checked"?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
|
|
2657
|
-
/**
|
|
2655
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
2658
2656
|
defaultChecked?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
|
|
2659
2657
|
/** What is wrong, in the reader's words rather than the browser's. */
|
|
2660
2658
|
feedback?: (HelixHeadlessCheckbox["feedback"]) | undefined;
|
|
@@ -2717,9 +2715,9 @@ Not reflected: the attribute is the consumer's input and stays as they
|
|
|
2717
2715
|
wrote it, and `:state(checked)` carries the resolved state for
|
|
2718
2716
|
stylesheets. */
|
|
2719
2717
|
"prop:checked"?: (HelixHeadlessCheckbox["checked"]) | undefined;
|
|
2720
|
-
/**
|
|
2718
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
2721
2719
|
"bool:default-checked"?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
|
|
2722
|
-
/**
|
|
2720
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
2723
2721
|
"prop:defaultChecked"?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
|
|
2724
2722
|
/** What is wrong, in the reader's words rather than the browser's. */
|
|
2725
2723
|
"prop:feedback"?: (HelixHeadlessCheckbox["feedback"]) | undefined;
|
|
@@ -2790,11 +2788,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2790
2788
|
round. The platform already writes booleans like this for the same reason,
|
|
2791
2789
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2792
2790
|
|
|
2793
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2791
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2792
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2793
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2794
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2795
|
+
the 40px it stood in reserved.
|
|
2798
2796
|
|
|
2799
2797
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2800
2798
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2810,11 +2808,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2810
2808
|
round. The platform already writes booleans like this for the same reason,
|
|
2811
2809
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2812
2810
|
|
|
2813
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2811
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2812
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2813
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2814
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2815
|
+
the 40px it stood in reserved.
|
|
2818
2816
|
|
|
2819
2817
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2820
2818
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2849,11 +2847,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2849
2847
|
round. The platform already writes booleans like this for the same reason,
|
|
2850
2848
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2851
2849
|
|
|
2852
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2850
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2851
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2852
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2853
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2854
|
+
the 40px it stood in reserved.
|
|
2857
2855
|
|
|
2858
2856
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2859
2857
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2869,11 +2867,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2869
2867
|
round. The platform already writes booleans like this for the same reason,
|
|
2870
2868
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2871
2869
|
|
|
2872
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2870
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2871
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2872
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2873
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2874
|
+
the 40px it stood in reserved.
|
|
2877
2875
|
|
|
2878
2876
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2879
2877
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2978,9 +2976,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
2978
2976
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
2979
2977
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
2980
2978
|
open?: (HelixHeadlessColorInput["open"]) | undefined;
|
|
2981
|
-
/**
|
|
2979
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
2982
2980
|
"default-open"?: (HelixHeadlessColorInput["defaultOpen"]) | undefined;
|
|
2983
|
-
/**
|
|
2981
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
2984
2982
|
defaultOpen?: (HelixHeadlessColorInput["defaultOpen"]) | undefined;
|
|
2985
2983
|
/** The value the markup declared, which is where a reset returns to. */
|
|
2986
2984
|
"default-value"?: (HelixHeadlessColorInput["defaultValue"]) | undefined;
|
|
@@ -3109,9 +3107,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
3109
3107
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
3110
3108
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
3111
3109
|
"prop:open"?: (HelixHeadlessColorInput["open"]) | undefined;
|
|
3112
|
-
/**
|
|
3110
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
3113
3111
|
"bool:default-open"?: (HelixHeadlessColorInput["defaultOpen"]) | undefined;
|
|
3114
|
-
/**
|
|
3112
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
3115
3113
|
"prop:defaultOpen"?: (HelixHeadlessColorInput["defaultOpen"]) | undefined;
|
|
3116
3114
|
/** The value the markup declared, which is where a reset returns to. */
|
|
3117
3115
|
"attr:default-value"?: (HelixHeadlessColorInput["defaultValue"]) | undefined;
|
|
@@ -3315,10 +3313,10 @@ letting it open would take a color from the reader and drop it. */
|
|
|
3315
3313
|
|
|
3316
3314
|
**A color is exactly as requirable as a date**, which is the comparison
|
|
3317
3315
|
that settles it: this element extends `HelixFormElement`, carries `name`
|
|
3318
|
-
and reports its value, so a consumer writing
|
|
3319
|
-
|
|
3320
|
-
to
|
|
3321
|
-
|
|
3316
|
+
and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
3317
|
+
name="brand" required>` inside a form has every reason to expect the form
|
|
3318
|
+
to refuse an empty one. Its two siblings in the same composition position,
|
|
3319
|
+
Date Picker and Time Picker, both check it.
|
|
3322
3320
|
|
|
3323
3321
|
Written out rather than taken from `MixinField`, for the reason those two
|
|
3324
3322
|
record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -3508,10 +3506,10 @@ letting it open would take a color from the reader and drop it. */
|
|
|
3508
3506
|
|
|
3509
3507
|
**A color is exactly as requirable as a date**, which is the comparison
|
|
3510
3508
|
that settles it: this element extends `HelixFormElement`, carries `name`
|
|
3511
|
-
and reports its value, so a consumer writing
|
|
3512
|
-
|
|
3513
|
-
to
|
|
3514
|
-
|
|
3509
|
+
and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
3510
|
+
name="brand" required>` inside a form has every reason to expect the form
|
|
3511
|
+
to refuse an empty one. Its two siblings in the same composition position,
|
|
3512
|
+
Date Picker and Time Picker, both check it.
|
|
3515
3513
|
|
|
3516
3514
|
Written out rather than taken from `MixinField`, for the reason those two
|
|
3517
3515
|
record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -3692,9 +3690,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
3692
3690
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
3693
3691
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
3694
3692
|
open?: (HelixHeadlessCombobox["open"]) | undefined;
|
|
3695
|
-
/**
|
|
3693
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
3696
3694
|
"default-open"?: (HelixHeadlessCombobox["defaultOpen"]) | undefined;
|
|
3697
|
-
/**
|
|
3695
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
3698
3696
|
defaultOpen?: (HelixHeadlessCombobox["defaultOpen"]) | undefined;
|
|
3699
3697
|
/** What the control is called once everything is showing. */
|
|
3700
3698
|
"collapse-label"?: (HelixHeadlessCombobox["collapseLabel"]) | undefined;
|
|
@@ -3867,9 +3865,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
3867
3865
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
3868
3866
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
3869
3867
|
"prop:open"?: (HelixHeadlessCombobox["open"]) | undefined;
|
|
3870
|
-
/**
|
|
3868
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
3871
3869
|
"bool:default-open"?: (HelixHeadlessCombobox["defaultOpen"]) | undefined;
|
|
3872
|
-
/**
|
|
3870
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
3873
3871
|
"prop:defaultOpen"?: (HelixHeadlessCombobox["defaultOpen"]) | undefined;
|
|
3874
3872
|
/** What the control is called once everything is showing. */
|
|
3875
3873
|
"attr:collapse-label"?: (HelixHeadlessCombobox["collapseLabel"]) | undefined;
|
|
@@ -4009,9 +4007,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
4009
4007
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
4010
4008
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
4011
4009
|
open?: (HelixHeadlessCommand["open"]) | undefined;
|
|
4012
|
-
/**
|
|
4010
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
4013
4011
|
"default-open"?: (HelixHeadlessCommand["defaultOpen"]) | undefined;
|
|
4014
|
-
/**
|
|
4012
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
4015
4013
|
defaultOpen?: (HelixHeadlessCommand["defaultOpen"]) | undefined;
|
|
4016
4014
|
|
|
4017
4015
|
/** Fired before it closes. Cancelable: refusing it takes the decision and nothing moves. */
|
|
@@ -4056,9 +4054,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
4056
4054
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
4057
4055
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
4058
4056
|
"prop:open"?: (HelixHeadlessCommand["open"]) | undefined;
|
|
4059
|
-
/**
|
|
4057
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
4060
4058
|
"bool:default-open"?: (HelixHeadlessCommand["defaultOpen"]) | undefined;
|
|
4061
|
-
/**
|
|
4059
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
4062
4060
|
"prop:defaultOpen"?: (HelixHeadlessCommand["defaultOpen"]) | undefined;
|
|
4063
4061
|
/** Fired before it closes. Cancelable: refusing it takes the decision and nothing moves. */
|
|
4064
4062
|
"on:helix-before-close"?: ((
|
|
@@ -4123,7 +4121,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
4123
4121
|
the same way `label` becomes `aria-label` in there.
|
|
4124
4122
|
|
|
4125
4123
|
```html
|
|
4126
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
4124
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
4127
4125
|
```
|
|
4128
4126
|
|
|
4129
4127
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -4292,7 +4290,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
4292
4290
|
the same way `label` becomes `aria-label` in there.
|
|
4293
4291
|
|
|
4294
4292
|
```html
|
|
4295
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
4293
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
4296
4294
|
```
|
|
4297
4295
|
|
|
4298
4296
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -4569,17 +4567,17 @@ refusing it leaves the selection as it was. */
|
|
|
4569
4567
|
|
|
4570
4568
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4571
4569
|
element ever asks for a different page size: a size selector is
|
|
4572
|
-
`
|
|
4573
|
-
|
|
4574
|
-
|
|
4570
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4571
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4572
|
+
the element never has cause to fire. */
|
|
4575
4573
|
"page-size"?: (HelixHeadlessDataTable["pageSize"] | `${number}`) | undefined;
|
|
4576
4574
|
/** How many rows a page holds. Zero is every row, which is what "no paging" means.
|
|
4577
4575
|
|
|
4578
4576
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4579
4577
|
element ever asks for a different page size: a size selector is
|
|
4580
|
-
`
|
|
4581
|
-
|
|
4582
|
-
|
|
4578
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4579
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4580
|
+
the element never has cause to fire. */
|
|
4583
4581
|
pageSize?: (HelixHeadlessDataTable["pageSize"]) | undefined;
|
|
4584
4582
|
/** How many rows the whole result has, where this element cannot count them.
|
|
4585
4583
|
|
|
@@ -4772,17 +4770,17 @@ refusing it leaves the selection as it was. */
|
|
|
4772
4770
|
|
|
4773
4771
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4774
4772
|
element ever asks for a different page size: a size selector is
|
|
4775
|
-
`
|
|
4776
|
-
|
|
4777
|
-
|
|
4773
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4774
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4775
|
+
the element never has cause to fire. */
|
|
4778
4776
|
"attr:page-size"?: (HelixHeadlessDataTable["pageSize"] | `${number}`) | undefined;
|
|
4779
4777
|
/** How many rows a page holds. Zero is every row, which is what "no paging" means.
|
|
4780
4778
|
|
|
4781
4779
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
4782
4780
|
element ever asks for a different page size: a size selector is
|
|
4783
|
-
`
|
|
4784
|
-
|
|
4785
|
-
|
|
4781
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
4782
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
4783
|
+
the element never has cause to fire. */
|
|
4786
4784
|
"prop:pageSize"?: (HelixHeadlessDataTable["pageSize"]) | undefined;
|
|
4787
4785
|
/** How many rows the whole result has, where this element cannot count them.
|
|
4788
4786
|
|
|
@@ -5014,9 +5012,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
5014
5012
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
5015
5013
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
5016
5014
|
open?: (HelixHeadlessDateInput["open"]) | undefined;
|
|
5017
|
-
/**
|
|
5015
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5018
5016
|
"default-open"?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
|
|
5019
|
-
/**
|
|
5017
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5020
5018
|
defaultOpen?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
|
|
5021
5019
|
/** What the control is called once everything is showing. */
|
|
5022
5020
|
"collapse-label"?: (HelixHeadlessDateInput["collapseLabel"]) | undefined;
|
|
@@ -5246,9 +5244,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
5246
5244
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
5247
5245
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
5248
5246
|
"prop:open"?: (HelixHeadlessDateInput["open"]) | undefined;
|
|
5249
|
-
/**
|
|
5247
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5250
5248
|
"bool:default-open"?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
|
|
5251
|
-
/**
|
|
5249
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5252
5250
|
"prop:defaultOpen"?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
|
|
5253
5251
|
/** What the control is called once everything is showing. */
|
|
5254
5252
|
"attr:collapse-label"?: (HelixHeadlessDateInput["collapseLabel"]) | undefined;
|
|
@@ -5808,9 +5806,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
5808
5806
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
5809
5807
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
5810
5808
|
open?: (HelixHeadlessDialog["open"]) | undefined;
|
|
5811
|
-
/**
|
|
5809
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5812
5810
|
"default-open"?: (HelixHeadlessDialog["defaultOpen"]) | undefined;
|
|
5813
|
-
/**
|
|
5811
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5814
5812
|
defaultOpen?: (HelixHeadlessDialog["defaultOpen"]) | undefined;
|
|
5815
5813
|
/** What the dialog closed with, the way `<dialog>` reports it.
|
|
5816
5814
|
|
|
@@ -5886,9 +5884,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
5886
5884
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
5887
5885
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
5888
5886
|
"prop:open"?: (HelixHeadlessDialog["open"]) | undefined;
|
|
5889
|
-
/**
|
|
5887
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5890
5888
|
"bool:default-open"?: (HelixHeadlessDialog["defaultOpen"]) | undefined;
|
|
5891
|
-
/**
|
|
5889
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
5892
5890
|
"prop:defaultOpen"?: (HelixHeadlessDialog["defaultOpen"]) | undefined;
|
|
5893
5891
|
/** What the dialog closed with, the way `<dialog>` reports it.
|
|
5894
5892
|
|
|
@@ -5986,7 +5984,7 @@ thickness decides is arithmetic done here and published as
|
|
|
5986
5984
|
`--donut-chart-stroke`, which is a number a rule can do sums with where the
|
|
5987
5985
|
word is not. Reflected, it wrote a value onto every host a script had set
|
|
5988
5986
|
it on for nothing to read. `sweep` beside it is the converse and reflects,
|
|
5989
|
-
because
|
|
5987
|
+
because the styled sheet selects on it. */
|
|
5990
5988
|
hole?: (HelixHeadlessDonutChart["hole"]) | undefined;
|
|
5991
5989
|
/** How much of the circle the whole occupies.
|
|
5992
5990
|
|
|
@@ -6051,7 +6049,7 @@ thickness decides is arithmetic done here and published as
|
|
|
6051
6049
|
`--donut-chart-stroke`, which is a number a rule can do sums with where the
|
|
6052
6050
|
word is not. Reflected, it wrote a value onto every host a script had set
|
|
6053
6051
|
it on for nothing to read. `sweep` beside it is the converse and reflects,
|
|
6054
|
-
because
|
|
6052
|
+
because the styled sheet selects on it. */
|
|
6055
6053
|
"prop:hole"?: (HelixHeadlessDonutChart["hole"]) | undefined;
|
|
6056
6054
|
/** How much of the circle the whole occupies.
|
|
6057
6055
|
|
|
@@ -6147,10 +6145,10 @@ not, rather than shown or hidden by CSS. */
|
|
|
6147
6145
|
modal?: (HelixHeadlessDrawer["modal"]) | undefined;
|
|
6148
6146
|
/** Which edge the drawer comes from.
|
|
6149
6147
|
|
|
6150
|
-
Unset is `end`,
|
|
6151
|
-
beside `:host([placement="end"])` rather than as a value written here: a
|
|
6148
|
+
Unset is `end`, and it stays unset rather than being written down: a
|
|
6152
6149
|
default assigned to the property would reflect onto every host and put a
|
|
6153
|
-
`placement="end"` into markup no consumer wrote.
|
|
6150
|
+
`placement="end"` into markup no consumer wrote. So what this tier
|
|
6151
|
+
guarantees is the absence, and a sheet selects on it. */
|
|
6154
6152
|
placement?: (HelixHeadlessDrawer["placement"]) | undefined;
|
|
6155
6153
|
/** Whether the element is open.
|
|
6156
6154
|
|
|
@@ -6165,9 +6163,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
6165
6163
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
6166
6164
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
6167
6165
|
open?: (HelixHeadlessDrawer["open"]) | undefined;
|
|
6168
|
-
/**
|
|
6166
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
6169
6167
|
"default-open"?: (HelixHeadlessDrawer["defaultOpen"]) | undefined;
|
|
6170
|
-
/**
|
|
6168
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
6171
6169
|
defaultOpen?: (HelixHeadlessDrawer["defaultOpen"]) | undefined;
|
|
6172
6170
|
/** What the dialog closed with, the way `<dialog>` reports it.
|
|
6173
6171
|
|
|
@@ -6238,10 +6236,10 @@ not, rather than shown or hidden by CSS. */
|
|
|
6238
6236
|
"prop:modal"?: (HelixHeadlessDrawer["modal"]) | undefined;
|
|
6239
6237
|
/** Which edge the drawer comes from.
|
|
6240
6238
|
|
|
6241
|
-
Unset is `end`,
|
|
6242
|
-
beside `:host([placement="end"])` rather than as a value written here: a
|
|
6239
|
+
Unset is `end`, and it stays unset rather than being written down: a
|
|
6243
6240
|
default assigned to the property would reflect onto every host and put a
|
|
6244
|
-
`placement="end"` into markup no consumer wrote.
|
|
6241
|
+
`placement="end"` into markup no consumer wrote. So what this tier
|
|
6242
|
+
guarantees is the absence, and a sheet selects on it. */
|
|
6245
6243
|
"prop:placement"?: (HelixHeadlessDrawer["placement"]) | undefined;
|
|
6246
6244
|
/** Whether the element is open.
|
|
6247
6245
|
|
|
@@ -6256,9 +6254,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
6256
6254
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
6257
6255
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
6258
6256
|
"prop:open"?: (HelixHeadlessDrawer["open"]) | undefined;
|
|
6259
|
-
/**
|
|
6257
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
6260
6258
|
"bool:default-open"?: (HelixHeadlessDrawer["defaultOpen"]) | undefined;
|
|
6261
|
-
/**
|
|
6259
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
6262
6260
|
"prop:defaultOpen"?: (HelixHeadlessDrawer["defaultOpen"]) | undefined;
|
|
6263
6261
|
/** What the dialog closed with, the way `<dialog>` reports it.
|
|
6264
6262
|
|
|
@@ -6985,9 +6983,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
6985
6983
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
6986
6984
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
6987
6985
|
open?: (HelixHeadlessFilterInput["open"]) | undefined;
|
|
6988
|
-
/**
|
|
6986
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
6989
6987
|
"default-open"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
|
|
6990
|
-
/**
|
|
6988
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
6991
6989
|
defaultOpen?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
|
|
6992
6990
|
/** What the control is called once everything is showing. */
|
|
6993
6991
|
"collapse-label"?: (HelixHeadlessFilterInput["collapseLabel"]) | undefined;
|
|
@@ -7108,9 +7106,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
7108
7106
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
7109
7107
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
7110
7108
|
"prop:open"?: (HelixHeadlessFilterInput["open"]) | undefined;
|
|
7111
|
-
/**
|
|
7109
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
7112
7110
|
"bool:default-open"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
|
|
7113
|
-
/**
|
|
7111
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
7114
7112
|
"prop:defaultOpen"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
|
|
7115
7113
|
/** What the control is called once everything is showing. */
|
|
7116
7114
|
"attr:collapse-label"?: (HelixHeadlessFilterInput["collapseLabel"]) | undefined;
|
|
@@ -7217,11 +7215,12 @@ renders nothing rather than the epoch, which is what parsing an empty string
|
|
|
7217
7215
|
would give.
|
|
7218
7216
|
|
|
7219
7217
|
**The element's own text is read as a fallback, and only in a browser.**
|
|
7220
|
-
`<helix-
|
|
7221
|
-
|
|
7222
|
-
|
|
7223
|
-
|
|
7224
|
-
|
|
7218
|
+
`<helix-headless-format-date
|
|
7219
|
+
elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
7220
|
+
that reads best in markup, and it cannot be the only one: measured against
|
|
7221
|
+
Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
7222
|
+
`querySelector` are all `undefined` there, so a server has no way to see
|
|
7223
|
+
it. An element rendered on a server needs the attribute; one rendered in a
|
|
7225
7224
|
browser may use either. */
|
|
7226
7225
|
date?: (HelixHeadlessFormatDate["date"]) | undefined;
|
|
7227
7226
|
/** How the day of the month is written, where a date is shown. */
|
|
@@ -7271,11 +7270,12 @@ renders nothing rather than the epoch, which is what parsing an empty string
|
|
|
7271
7270
|
would give.
|
|
7272
7271
|
|
|
7273
7272
|
**The element's own text is read as a fallback, and only in a browser.**
|
|
7274
|
-
`<helix-
|
|
7275
|
-
|
|
7276
|
-
|
|
7277
|
-
|
|
7278
|
-
|
|
7273
|
+
`<helix-headless-format-date
|
|
7274
|
+
elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
7275
|
+
that reads best in markup, and it cannot be the only one: measured against
|
|
7276
|
+
Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
7277
|
+
`querySelector` are all `undefined` there, so a server has no way to see
|
|
7278
|
+
it. An element rendered on a server needs the attribute; one rendered in a
|
|
7279
7279
|
browser may use either. */
|
|
7280
7280
|
"prop:date"?: (HelixHeadlessFormatDate["date"]) | undefined;
|
|
7281
7281
|
/** How the day of the month is written, where a date is shown. */
|
|
@@ -7352,12 +7352,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7352
7352
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7353
7353
|
is the one it gets wrong.
|
|
7354
7354
|
|
|
7355
|
-
The strip measures itself, so
|
|
7356
|
-
|
|
7357
|
-
|
|
7358
|
-
|
|
7359
|
-
|
|
7360
|
-
|
|
7355
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7356
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7357
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7358
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7359
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7360
|
+
plan around.
|
|
7361
7361
|
|
|
7362
7362
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7363
7363
|
container that cannot get narrow. */
|
|
@@ -7370,12 +7370,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7370
7370
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7371
7371
|
is the one it gets wrong.
|
|
7372
7372
|
|
|
7373
|
-
The strip measures itself, so
|
|
7374
|
-
|
|
7375
|
-
|
|
7376
|
-
|
|
7377
|
-
|
|
7378
|
-
|
|
7373
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7374
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7375
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7376
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7377
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7378
|
+
plan around.
|
|
7379
7379
|
|
|
7380
7380
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7381
7381
|
container that cannot get narrow. */
|
|
@@ -7447,12 +7447,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7447
7447
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7448
7448
|
is the one it gets wrong.
|
|
7449
7449
|
|
|
7450
|
-
The strip measures itself, so
|
|
7451
|
-
|
|
7452
|
-
|
|
7453
|
-
|
|
7454
|
-
|
|
7455
|
-
|
|
7450
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7451
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7452
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7453
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7454
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7455
|
+
plan around.
|
|
7456
7456
|
|
|
7457
7457
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7458
7458
|
container that cannot get narrow. */
|
|
@@ -7465,12 +7465,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
7465
7465
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
7466
7466
|
is the one it gets wrong.
|
|
7467
7467
|
|
|
7468
|
-
The strip measures itself, so
|
|
7469
|
-
|
|
7470
|
-
|
|
7471
|
-
|
|
7472
|
-
|
|
7473
|
-
|
|
7468
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
7469
|
+
own and these two are the estimate used until the first measurement lands.
|
|
7470
|
+
Writing the attribute pins the value and stops the measurement being
|
|
7471
|
+
consulted, which is what a container query or a transition on the cell size
|
|
7472
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
7473
|
+
plan around.
|
|
7474
7474
|
|
|
7475
7475
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
7476
7476
|
container that cannot get narrow. */
|
|
@@ -7534,7 +7534,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
7534
7534
|
the same way `label` becomes `aria-label` in there.
|
|
7535
7535
|
|
|
7536
7536
|
```html
|
|
7537
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
7537
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
7538
7538
|
```
|
|
7539
7539
|
|
|
7540
7540
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -7695,7 +7695,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
7695
7695
|
the same way `label` becomes `aria-label` in there.
|
|
7696
7696
|
|
|
7697
7697
|
```html
|
|
7698
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
7698
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
7699
7699
|
```
|
|
7700
7700
|
|
|
7701
7701
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -7945,10 +7945,10 @@ Read-only to a consumer: it is a report rather than a setting.
|
|
|
7945
7945
|
**Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
7946
7946
|
state, so reflecting it puts the element's own bookkeeping into the markup
|
|
7947
7947
|
a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
7948
|
-
hydration mismatch, and a
|
|
7949
|
-
|
|
7950
|
-
|
|
7951
|
-
|
|
7948
|
+
hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
7949
|
+
declares that a picture has arrived which this element has never fetched.
|
|
7950
|
+
The `data-` name is the library's answer to both, being a name a re-parse
|
|
7951
|
+
cannot mistake for a declaration, and it is what `data-closed` on
|
|
7952
7952
|
`Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
7953
7953
|
which puts this on the safe side of hydration: a fact that can be true on
|
|
7954
7954
|
the *first* update mirrors to a custom state instead, which is what
|
|
@@ -8021,10 +8021,10 @@ Read-only to a consumer: it is a report rather than a setting.
|
|
|
8021
8021
|
**Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
8022
8022
|
state, so reflecting it puts the element's own bookkeeping into the markup
|
|
8023
8023
|
a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
8024
|
-
hydration mismatch, and a
|
|
8025
|
-
|
|
8026
|
-
|
|
8027
|
-
|
|
8024
|
+
hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
8025
|
+
declares that a picture has arrived which this element has never fetched.
|
|
8026
|
+
The `data-` name is the library's answer to both, being a name a re-parse
|
|
8027
|
+
cannot mistake for a declaration, and it is what `data-closed` on
|
|
8028
8028
|
`Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
8029
8029
|
which puts this on the safe side of hydration: a fact that can be true on
|
|
8030
8030
|
the *first* update mirrors to a custom state instead, which is what
|
|
@@ -8093,20 +8093,20 @@ Not a label: it goes when typing starts. */
|
|
|
8093
8093
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8094
8094
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8095
8095
|
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`. */
|
|
8096
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8097
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8098
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8099
|
+
form, `readOnly` came back `false`. */
|
|
8100
8100
|
readonly?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8101
8101
|
/** Whether the field refuses input while still submitting its value.
|
|
8102
8102
|
|
|
8103
8103
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8104
8104
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8105
8105
|
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`. */
|
|
8106
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8107
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8108
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8109
|
+
form, `readOnly` came back `false`. */
|
|
8110
8110
|
readOnly?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8111
8111
|
/** Whether a password field offers a toggle that shows what was typed.
|
|
8112
8112
|
|
|
@@ -8127,9 +8127,9 @@ The state is `aria-pressed`, not this. */
|
|
|
8127
8127
|
|
|
8128
8128
|
**Not reflected.** Reflection exists so a selector can reach a value, and
|
|
8129
8129
|
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`.
|
|
8130
|
+
`type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
8131
|
+
attribute no consumer's markup has, which is the fault the area rules write
|
|
8132
|
+
up under `Button`'s `href`, `target` and `rel`.
|
|
8133
8133
|
|
|
8134
8134
|
Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
8135
8135
|
it as a property binding, which is what makes the keyboard and the
|
|
@@ -8247,20 +8247,20 @@ Not a label: it goes when typing starts. */
|
|
|
8247
8247
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8248
8248
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8249
8249
|
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`. */
|
|
8250
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8251
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8252
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8253
|
+
form, `readOnly` came back `false`. */
|
|
8254
8254
|
"bool:readonly"?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8255
8255
|
/** Whether the field refuses input while still submitting its value.
|
|
8256
8256
|
|
|
8257
8257
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
8258
8258
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
8259
8259
|
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`. */
|
|
8260
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
8261
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
8262
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
8263
|
+
form, `readOnly` came back `false`. */
|
|
8264
8264
|
"prop:readOnly"?: (HelixHeadlessInput["readOnly"]) | undefined;
|
|
8265
8265
|
/** Whether a password field offers a toggle that shows what was typed.
|
|
8266
8266
|
|
|
@@ -8281,9 +8281,9 @@ The state is `aria-pressed`, not this. */
|
|
|
8281
8281
|
|
|
8282
8282
|
**Not reflected.** Reflection exists so a selector can reach a value, and
|
|
8283
8283
|
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`.
|
|
8284
|
+
`type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
8285
|
+
attribute no consumer's markup has, which is the fault the area rules write
|
|
8286
|
+
up under `Button`'s `href`, `target` and `rel`.
|
|
8287
8287
|
|
|
8288
8288
|
Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
8289
8289
|
it as a property binding, which is what makes the keyboard and the
|
|
@@ -8556,8 +8556,7 @@ beside it for instance. `ring` lets the ground through, for a chart drawn
|
|
|
8556
8556
|
over something busy. `triangle` points along the axis and reads as "and
|
|
8557
8557
|
onward" rather than as a second claim about the data.
|
|
8558
8558
|
|
|
8559
|
-
The shapes come from
|
|
8560
|
-
`helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
8559
|
+
The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
8561
8560
|
the set is identical wherever one appears. **Which is why every value is
|
|
8562
8561
|
named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
8563
8562
|
undocumented until the cohort before this one; this family reads the same
|
|
@@ -8667,8 +8666,7 @@ beside it for instance. `ring` lets the ground through, for a chart drawn
|
|
|
8667
8666
|
over something busy. `triangle` points along the axis and reads as "and
|
|
8668
8667
|
onward" rather than as a second claim about the data.
|
|
8669
8668
|
|
|
8670
|
-
The shapes come from
|
|
8671
|
-
`helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
8669
|
+
The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
8672
8670
|
the set is identical wherever one appears. **Which is why every value is
|
|
8673
8671
|
named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
8674
8672
|
undocumented until the cohort before this one; this family reads the same
|
|
@@ -8769,10 +8767,10 @@ has to survive with the stylesheet turned off.
|
|
|
8769
8767
|
label?: (HelixHeadlessList["label"]) | undefined;
|
|
8770
8768
|
/** Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
8771
8769
|
|
|
8772
|
-
Reflected, because this is one of the things a stylesheet selects on
|
|
8773
|
-
|
|
8774
|
-
|
|
8775
|
-
|
|
8770
|
+
Reflected, because this is one of the things a stylesheet selects on, each
|
|
8771
|
+
value mapping to a `list-style-type`. The platform's spellings rather than
|
|
8772
|
+
the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
8773
|
+
consumer would have written on an `<ol>`.
|
|
8776
8774
|
|
|
8777
8775
|
**`start` and `reversed` are both absent and neither can be done here.**
|
|
8778
8776
|
This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -8811,10 +8809,10 @@ has to survive with the stylesheet turned off.
|
|
|
8811
8809
|
"prop:label"?: (HelixHeadlessList["label"]) | undefined;
|
|
8812
8810
|
/** Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
8813
8811
|
|
|
8814
|
-
Reflected, because this is one of the things a stylesheet selects on
|
|
8815
|
-
|
|
8816
|
-
|
|
8817
|
-
|
|
8812
|
+
Reflected, because this is one of the things a stylesheet selects on, each
|
|
8813
|
+
value mapping to a `list-style-type`. The platform's spellings rather than
|
|
8814
|
+
the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
8815
|
+
consumer would have written on an `<ol>`.
|
|
8818
8816
|
|
|
8819
8817
|
**`start` and `reversed` are both absent and neither can be done here.**
|
|
8820
8818
|
This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -9217,9 +9215,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
9217
9215
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
9218
9216
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
9219
9217
|
open?: (HelixHeadlessMegamenu["open"]) | undefined;
|
|
9220
|
-
/**
|
|
9218
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9221
9219
|
"default-open"?: (HelixHeadlessMegamenu["defaultOpen"]) | undefined;
|
|
9222
|
-
/**
|
|
9220
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9223
9221
|
defaultOpen?: (HelixHeadlessMegamenu["defaultOpen"]) | undefined;
|
|
9224
9222
|
|
|
9225
9223
|
/** Fired before it closes, and cancelable. */
|
|
@@ -9326,9 +9324,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
9326
9324
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
9327
9325
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
9328
9326
|
"prop:open"?: (HelixHeadlessMegamenu["open"]) | undefined;
|
|
9329
|
-
/**
|
|
9327
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9330
9328
|
"bool:default-open"?: (HelixHeadlessMegamenu["defaultOpen"]) | undefined;
|
|
9331
|
-
/**
|
|
9329
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9332
9330
|
"prop:defaultOpen"?: (HelixHeadlessMegamenu["defaultOpen"]) | undefined;
|
|
9333
9331
|
/** Fired before it closes, and cancelable. */
|
|
9334
9332
|
"on:helix-before-close"?: ((
|
|
@@ -9569,9 +9567,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
9569
9567
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
9570
9568
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
9571
9569
|
open?: (HelixHeadlessMenu["open"]) | undefined;
|
|
9572
|
-
/**
|
|
9570
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9573
9571
|
"default-open"?: (HelixHeadlessMenu["defaultOpen"]) | undefined;
|
|
9574
|
-
/**
|
|
9572
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9575
9573
|
defaultOpen?: (HelixHeadlessMenu["defaultOpen"]) | undefined;
|
|
9576
9574
|
|
|
9577
9575
|
/** Fired before it closes, and cancelable. */
|
|
@@ -9628,9 +9626,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
9628
9626
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
9629
9627
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
9630
9628
|
"prop:open"?: (HelixHeadlessMenu["open"]) | undefined;
|
|
9631
|
-
/**
|
|
9629
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9632
9630
|
"bool:default-open"?: (HelixHeadlessMenu["defaultOpen"]) | undefined;
|
|
9633
|
-
/**
|
|
9631
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9634
9632
|
"prop:defaultOpen"?: (HelixHeadlessMenu["defaultOpen"]) | undefined;
|
|
9635
9633
|
/** Fired before it closes, and cancelable. */
|
|
9636
9634
|
"on:helix-before-close"?: ((
|
|
@@ -9901,9 +9899,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
9901
9899
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
9902
9900
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
9903
9901
|
open?: (HelixHeadlessNotificationGroup["open"]) | undefined;
|
|
9904
|
-
/**
|
|
9902
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9905
9903
|
"default-open"?: (HelixHeadlessNotificationGroup["defaultOpen"]) | undefined;
|
|
9906
|
-
/**
|
|
9904
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9907
9905
|
defaultOpen?: (HelixHeadlessNotificationGroup["defaultOpen"]) | undefined;
|
|
9908
9906
|
|
|
9909
9907
|
/** Fired before the group folds, and cancelable. */
|
|
@@ -9948,9 +9946,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
9948
9946
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
9949
9947
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
9950
9948
|
"prop:open"?: (HelixHeadlessNotificationGroup["open"]) | undefined;
|
|
9951
|
-
/**
|
|
9949
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9952
9950
|
"bool:default-open"?: (HelixHeadlessNotificationGroup["defaultOpen"]) | undefined;
|
|
9953
|
-
/**
|
|
9951
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
9954
9952
|
"prop:defaultOpen"?: (HelixHeadlessNotificationGroup["defaultOpen"]) | undefined;
|
|
9955
9953
|
/** Fired before the group folds, and cancelable. */
|
|
9956
9954
|
"on:helix-before-close"?: ((
|
|
@@ -9995,10 +9993,10 @@ this element then owns.
|
|
|
9995
9993
|
|
|
9996
9994
|
**Not reflected.** Unread is a visual state, which is why the four mixins
|
|
9997
9995
|
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.
|
|
9996
|
+
`<helix-headless-notification default-read>` comes back from a server
|
|
9997
|
+
without `read` and would gain it on the first update, which React reports
|
|
9998
|
+
as a hydration mismatch, and which a copy of the serialized element
|
|
9999
|
+
re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
10002
10000
|
`hydration.dom.spec.ts` holds it. */
|
|
10003
10001
|
read?: (HelixHeadlessNotification["read"]) | undefined;
|
|
10004
10002
|
/** State to open with, where nothing declared one. */
|
|
@@ -10050,10 +10048,10 @@ this element then owns.
|
|
|
10050
10048
|
|
|
10051
10049
|
**Not reflected.** Unread is a visual state, which is why the four mixins
|
|
10052
10050
|
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.
|
|
10051
|
+
`<helix-headless-notification default-read>` comes back from a server
|
|
10052
|
+
without `read` and would gain it on the first update, which React reports
|
|
10053
|
+
as a hydration mismatch, and which a copy of the serialized element
|
|
10054
|
+
re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
10057
10055
|
`hydration.dom.spec.ts` holds it. */
|
|
10058
10056
|
"prop:read"?: (HelixHeadlessNotification["read"]) | undefined;
|
|
10059
10057
|
/** State to open with, where nothing declared one. */
|
|
@@ -10603,11 +10601,10 @@ Written by the listbox. */
|
|
|
10603
10601
|
/** A second destination for this row, taken with the modifier held.
|
|
10604
10602
|
|
|
10605
10603
|
**An attribute rather than a second row, which is the whole point.** A
|
|
10606
|
-
palette
|
|
10607
|
-
|
|
10608
|
-
|
|
10609
|
-
|
|
10610
|
-
second belongs beside it.
|
|
10604
|
+
palette that offered every component a reference page and a sandbox as
|
|
10605
|
+
separate entries would be twice as long, and one earns its keep by getting
|
|
10606
|
+
a reader to one thing in three keystrokes. The row already carries the
|
|
10607
|
+
first destination, so the second belongs beside it.
|
|
10611
10608
|
|
|
10612
10609
|
Declared here and acted on by whatever owns the list, the same division
|
|
10613
10610
|
selection already uses: an option says what it is and the listbox decides
|
|
@@ -10677,7 +10674,7 @@ attribute and the state is the property.
|
|
|
10677
10674
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
10678
10675
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
10679
10676
|
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"
|
|
10677
|
+
this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
10681
10678
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
10682
10679
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
10683
10680
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -10710,11 +10707,10 @@ Written by the listbox. */
|
|
|
10710
10707
|
/** A second destination for this row, taken with the modifier held.
|
|
10711
10708
|
|
|
10712
10709
|
**An attribute rather than a second row, which is the whole point.** A
|
|
10713
|
-
palette
|
|
10714
|
-
|
|
10715
|
-
|
|
10716
|
-
|
|
10717
|
-
second belongs beside it.
|
|
10710
|
+
palette that offered every component a reference page and a sandbox as
|
|
10711
|
+
separate entries would be twice as long, and one earns its keep by getting
|
|
10712
|
+
a reader to one thing in three keystrokes. The row already carries the
|
|
10713
|
+
first destination, so the second belongs beside it.
|
|
10718
10714
|
|
|
10719
10715
|
Declared here and acted on by whatever owns the list, the same division
|
|
10720
10716
|
selection already uses: an option says what it is and the listbox decides
|
|
@@ -10784,7 +10780,7 @@ attribute and the state is the property.
|
|
|
10784
10780
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
10785
10781
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
10786
10782
|
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"
|
|
10783
|
+
this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
10788
10784
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
10789
10785
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
10790
10786
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -11387,10 +11383,10 @@ other end is going to reject. A consumer whose codes really do carry
|
|
|
11387
11383
|
marked letters wants `text`, which judges nothing.
|
|
11388
11384
|
|
|
11389
11385
|
**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. */
|
|
11386
|
+
`type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
11387
|
+
attribute no consumer's markup had. The area rules carry the sentence
|
|
11388
|
+
"reflect only what CSS selects on". The real inputs take it as a binding,
|
|
11389
|
+
which is what makes the keyboard follow. */
|
|
11394
11390
|
type?: (HelixHeadlessPinInput["type"]) | undefined;
|
|
11395
11391
|
/** The value the markup declared, which is where a reset returns to. */
|
|
11396
11392
|
"default-value"?: (HelixHeadlessPinInput["defaultValue"]) | undefined;
|
|
@@ -11498,10 +11494,10 @@ other end is going to reject. A consumer whose codes really do carry
|
|
|
11498
11494
|
marked letters wants `text`, which judges nothing.
|
|
11499
11495
|
|
|
11500
11496
|
**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. */
|
|
11497
|
+
`type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
11498
|
+
attribute no consumer's markup had. The area rules carry the sentence
|
|
11499
|
+
"reflect only what CSS selects on". The real inputs take it as a binding,
|
|
11500
|
+
which is what makes the keyboard follow. */
|
|
11505
11501
|
"prop:type"?: (HelixHeadlessPinInput["type"]) | undefined;
|
|
11506
11502
|
/** The value the markup declared, which is where a reset returns to. */
|
|
11507
11503
|
"attr:default-value"?: (HelixHeadlessPinInput["defaultValue"]) | undefined;
|
|
@@ -11601,9 +11597,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
11601
11597
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
11602
11598
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
11603
11599
|
open?: (HelixHeadlessPopover["open"]) | undefined;
|
|
11604
|
-
/**
|
|
11600
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
11605
11601
|
"default-open"?: (HelixHeadlessPopover["defaultOpen"]) | undefined;
|
|
11606
|
-
/**
|
|
11602
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
11607
11603
|
defaultOpen?: (HelixHeadlessPopover["defaultOpen"]) | undefined;
|
|
11608
11604
|
|
|
11609
11605
|
/** Fired before it closes, and cancelable. */
|
|
@@ -11640,9 +11636,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
11640
11636
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
11641
11637
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
11642
11638
|
"prop:open"?: (HelixHeadlessPopover["open"]) | undefined;
|
|
11643
|
-
/**
|
|
11639
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
11644
11640
|
"bool:default-open"?: (HelixHeadlessPopover["defaultOpen"]) | undefined;
|
|
11645
|
-
/**
|
|
11641
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
11646
11642
|
"prop:defaultOpen"?: (HelixHeadlessPopover["defaultOpen"]) | undefined;
|
|
11647
11643
|
/** Fired before it closes, and cancelable. */
|
|
11648
11644
|
"on:helix-before-close"?: ((
|
|
@@ -12080,7 +12076,7 @@ attribute and the state is the property.
|
|
|
12080
12076
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
12081
12077
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
12082
12078
|
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"
|
|
12079
|
+
this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
12084
12080
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
12085
12081
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
12086
12082
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -12137,7 +12133,7 @@ attribute and the state is the property.
|
|
|
12137
12133
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
12138
12134
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
12139
12135
|
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"
|
|
12136
|
+
this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
12141
12137
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
12142
12138
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
12143
12139
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -12644,9 +12640,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
12644
12640
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
12645
12641
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
12646
12642
|
open?: (HelixHeadlessSelect["open"]) | undefined;
|
|
12647
|
-
/**
|
|
12643
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
12648
12644
|
"default-open"?: (HelixHeadlessSelect["defaultOpen"]) | undefined;
|
|
12649
|
-
/**
|
|
12645
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
12650
12646
|
defaultOpen?: (HelixHeadlessSelect["defaultOpen"]) | undefined;
|
|
12651
12647
|
/** The value the markup declared, which is where a reset returns to. */
|
|
12652
12648
|
"default-value"?: (HelixHeadlessSelect["defaultValue"]) | undefined;
|
|
@@ -12758,9 +12754,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
12758
12754
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
12759
12755
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
12760
12756
|
"prop:open"?: (HelixHeadlessSelect["open"]) | undefined;
|
|
12761
|
-
/**
|
|
12757
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
12762
12758
|
"bool:default-open"?: (HelixHeadlessSelect["defaultOpen"]) | undefined;
|
|
12763
|
-
/**
|
|
12759
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
12764
12760
|
"prop:defaultOpen"?: (HelixHeadlessSelect["defaultOpen"]) | undefined;
|
|
12765
12761
|
/** The value the markup declared, which is where a reset returns to. */
|
|
12766
12762
|
"attr:default-value"?: (HelixHeadlessSelect["defaultValue"]) | undefined;
|
|
@@ -13342,9 +13338,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
13342
13338
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
13343
13339
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
13344
13340
|
open?: (HelixHeadlessSpeedDial["open"]) | undefined;
|
|
13345
|
-
/**
|
|
13341
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
13346
13342
|
"default-open"?: (HelixHeadlessSpeedDial["defaultOpen"]) | undefined;
|
|
13347
|
-
/**
|
|
13343
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
13348
13344
|
defaultOpen?: (HelixHeadlessSpeedDial["defaultOpen"]) | undefined;
|
|
13349
13345
|
|
|
13350
13346
|
/** Fired before it closes, and cancelable. */
|
|
@@ -13384,9 +13380,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
13384
13380
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
13385
13381
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
13386
13382
|
"prop:open"?: (HelixHeadlessSpeedDial["open"]) | undefined;
|
|
13387
|
-
/**
|
|
13383
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
13388
13384
|
"bool:default-open"?: (HelixHeadlessSpeedDial["defaultOpen"]) | undefined;
|
|
13389
|
-
/**
|
|
13385
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
13390
13386
|
"prop:defaultOpen"?: (HelixHeadlessSpeedDial["defaultOpen"]) | undefined;
|
|
13391
13387
|
/** Fired before it closes, and cancelable. */
|
|
13392
13388
|
"on:helix-before-close"?: ((
|
|
@@ -13661,9 +13657,9 @@ the headline and the label is a caption under it.
|
|
|
13661
13657
|
The row directions set them side by side, for a figure in a line of text or
|
|
13662
13658
|
a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
13663
13659
|
|
|
13664
|
-
A property rather than a `
|
|
13665
|
-
|
|
13666
|
-
|
|
13660
|
+
A property rather than a `Flex` around it, because the unit has to stay on
|
|
13661
|
+
the value's baseline whichever way the pair goes, and only this element
|
|
13662
|
+
knows which of its children the unit belongs to.
|
|
13667
13663
|
|
|
13668
13664
|
**Optional rather than defaulted to `column`, which is not a style
|
|
13669
13665
|
preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -13686,9 +13682,9 @@ the headline and the label is a caption under it.
|
|
|
13686
13682
|
The row directions set them side by side, for a figure in a line of text or
|
|
13687
13683
|
a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
13688
13684
|
|
|
13689
|
-
A property rather than a `
|
|
13690
|
-
|
|
13691
|
-
|
|
13685
|
+
A property rather than a `Flex` around it, because the unit has to stay on
|
|
13686
|
+
the value's baseline whichever way the pair goes, and only this element
|
|
13687
|
+
knows which of its children the unit belongs to.
|
|
13692
13688
|
|
|
13693
13689
|
**Optional rather than defaulted to `column`, which is not a style
|
|
13694
13690
|
preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -13758,11 +13754,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
13758
13754
|
tab, and `default-active` is how markup says where to start without
|
|
13759
13755
|
naming the current one. */
|
|
13760
13756
|
active?: (HelixHeadlessSteps["active"]) | undefined;
|
|
13761
|
-
/**
|
|
13757
|
+
/** Which item the markup declared current.
|
|
13762
13758
|
|
|
13763
13759
|
Ignored once `active` is written. */
|
|
13764
13760
|
"default-active"?: (HelixHeadlessSteps["defaultActive"]) | undefined;
|
|
13765
|
-
/**
|
|
13761
|
+
/** Which item the markup declared current.
|
|
13766
13762
|
|
|
13767
13763
|
Ignored once `active` is written. */
|
|
13768
13764
|
defaultActive?: (HelixHeadlessSteps["defaultActive"]) | undefined;
|
|
@@ -13815,11 +13811,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
13815
13811
|
tab, and `default-active` is how markup says where to start without
|
|
13816
13812
|
naming the current one. */
|
|
13817
13813
|
"prop:active"?: (HelixHeadlessSteps["active"]) | undefined;
|
|
13818
|
-
/**
|
|
13814
|
+
/** Which item the markup declared current.
|
|
13819
13815
|
|
|
13820
13816
|
Ignored once `active` is written. */
|
|
13821
13817
|
"attr:default-active"?: (HelixHeadlessSteps["defaultActive"]) | undefined;
|
|
13822
|
-
/**
|
|
13818
|
+
/** Which item the markup declared current.
|
|
13823
13819
|
|
|
13824
13820
|
Ignored once `active` is written. */
|
|
13825
13821
|
"prop:defaultActive"?: (HelixHeadlessSteps["defaultActive"]) | undefined;
|
|
@@ -13902,9 +13898,9 @@ Not reflected: the attribute is the consumer's input and stays as they
|
|
|
13902
13898
|
wrote it, and `:state(checked)` carries the resolved state for
|
|
13903
13899
|
stylesheets. */
|
|
13904
13900
|
checked?: (HelixHeadlessSwitch["checked"]) | undefined;
|
|
13905
|
-
/**
|
|
13901
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
13906
13902
|
"default-checked"?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
|
|
13907
|
-
/**
|
|
13903
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
13908
13904
|
defaultChecked?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
|
|
13909
13905
|
/** What is wrong, in the reader's words rather than the browser's. */
|
|
13910
13906
|
feedback?: (HelixHeadlessSwitch["feedback"]) | undefined;
|
|
@@ -13963,9 +13959,9 @@ Not reflected: the attribute is the consumer's input and stays as they
|
|
|
13963
13959
|
wrote it, and `:state(checked)` carries the resolved state for
|
|
13964
13960
|
stylesheets. */
|
|
13965
13961
|
"prop:checked"?: (HelixHeadlessSwitch["checked"]) | undefined;
|
|
13966
|
-
/**
|
|
13962
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
13967
13963
|
"bool:default-checked"?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
|
|
13968
|
-
/**
|
|
13964
|
+
/** Whether the markup declared it checked, which is where a reset returns to. */
|
|
13969
13965
|
"prop:defaultChecked"?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
|
|
13970
13966
|
/** What is wrong, in the reader's words rather than the browser's. */
|
|
13971
13967
|
"prop:feedback"?: (HelixHeadlessSwitch["feedback"]) | undefined;
|
|
@@ -14043,15 +14039,15 @@ export type HelixHeadlessTableColumnHelixBeforeResizeElementEvent =
|
|
|
14043
14039
|
export type HelixHeadlessTableColumnProps = {
|
|
14044
14040
|
/** Which edge the values line up against.
|
|
14045
14041
|
|
|
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.
|
|
14042
|
+
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
14043
|
+
sit above each other. Left unset the cell inherits the table's own
|
|
14044
|
+
alignment, which is `start` for text in either writing direction.
|
|
14045
|
+
`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
14046
|
+
consumer wrote, so the table writes nothing onto them: it publishes the
|
|
14047
|
+
edge to each cell under this column as `--table-cell-align`, which
|
|
14048
|
+
`@fusion.dev/helix` reads. The heading is this element's own, and
|
|
14049
|
+
`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
14050
|
+
inline end, so in a right-to-left table it is the left.
|
|
14055
14051
|
|
|
14056
14052
|
**Reflected, because the heading is drawn by a stylesheet and has no other
|
|
14057
14053
|
way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -14098,8 +14094,8 @@ onto its host. */
|
|
|
14098
14094
|
/** The track this column takes, as CSS.
|
|
14099
14095
|
|
|
14100
14096
|
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
|
-
|
|
14097
|
+
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
14098
|
+
its place in a `Table`'s `columns`, where that table sets one, and
|
|
14103
14099
|
otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
14104
14100
|
Set here, it wins over that list, which is what lets a reader resize a
|
|
14105
14101
|
column in a table that set one.
|
|
@@ -14145,15 +14141,15 @@ correct default: the raw value is what an API sorted by. */
|
|
|
14145
14141
|
export type HelixHeadlessTableColumnSolidJsProps = {
|
|
14146
14142
|
/** Which edge the values line up against.
|
|
14147
14143
|
|
|
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.
|
|
14144
|
+
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
14145
|
+
sit above each other. Left unset the cell inherits the table's own
|
|
14146
|
+
alignment, which is `start` for text in either writing direction.
|
|
14147
|
+
`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
14148
|
+
consumer wrote, so the table writes nothing onto them: it publishes the
|
|
14149
|
+
edge to each cell under this column as `--table-cell-align`, which
|
|
14150
|
+
`@fusion.dev/helix` reads. The heading is this element's own, and
|
|
14151
|
+
`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
14152
|
+
inline end, so in a right-to-left table it is the left.
|
|
14157
14153
|
|
|
14158
14154
|
**Reflected, because the heading is drawn by a stylesheet and has no other
|
|
14159
14155
|
way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -14200,8 +14196,8 @@ onto its host. */
|
|
|
14200
14196
|
/** The track this column takes, as CSS.
|
|
14201
14197
|
|
|
14202
14198
|
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
|
-
|
|
14199
|
+
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
14200
|
+
its place in a `Table`'s `columns`, where that table sets one, and
|
|
14205
14201
|
otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
14206
14202
|
Set here, it wins over that list, which is what lets a reader resize a
|
|
14207
14203
|
column in a table that set one.
|
|
@@ -14251,15 +14247,14 @@ correct default: the raw value is what an API sorted by. */
|
|
|
14251
14247
|
export type HelixHeadlessTableProps = {
|
|
14252
14248
|
/** The column widths as one track list, written once on the table.
|
|
14253
14249
|
|
|
14254
|
-
With `
|
|
14255
|
-
|
|
14256
|
-
|
|
14257
|
-
|
|
14258
|
-
|
|
14259
|
-
|
|
14260
|
-
|
|
14261
|
-
|
|
14262
|
-
down to one column.
|
|
14250
|
+
With `TableColumn` children, each track sizes the column in its place, a
|
|
14251
|
+
hidden column counted, so hiding one takes its track with it and the rest
|
|
14252
|
+
keep theirs. The columns decide how many tracks there are and this list
|
|
14253
|
+
only how wide: a track past the last column is dropped, and a column past
|
|
14254
|
+
the last track shares what is left. With no columns declared it is the
|
|
14255
|
+
whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
14256
|
+
is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
14257
|
+
its column at the default rather than taking the table down to one column.
|
|
14263
14258
|
|
|
14264
14259
|
**A column's own `width` wins over its track here.** The width is written
|
|
14265
14260
|
on the column it sizes, which is the more particular statement, and it is
|
|
@@ -14273,13 +14268,11 @@ to walk, so a render there knows of no columns and this attribute is the
|
|
|
14273
14268
|
whole answer: a table given one lays its grid out in the first paint, and a
|
|
14274
14269
|
table sized only by its columns is one track wide until it upgrades.
|
|
14275
14270
|
|
|
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. */
|
|
14271
|
+
**Data Table has none of this, and should not.** Its columns are its schema
|
|
14272
|
+
rather than an option, so there is always a column to write a `width` on
|
|
14273
|
+
and a list here would be a second way to say what that says. This table's
|
|
14274
|
+
cells are markup, and a table written as rows of cells with no column
|
|
14275
|
+
declared in it has nowhere else to be sized from. */
|
|
14283
14276
|
columns?: (HelixHeadlessTable["columns"]) | undefined;
|
|
14284
14277
|
/** Accessible name for the table. */
|
|
14285
14278
|
label?: (HelixHeadlessTable["label"]) | undefined;
|
|
@@ -14302,15 +14295,14 @@ say that without the component knowing what a row looks like. */
|
|
|
14302
14295
|
export type HelixHeadlessTableSolidJsProps = {
|
|
14303
14296
|
/** The column widths as one track list, written once on the table.
|
|
14304
14297
|
|
|
14305
|
-
With `
|
|
14306
|
-
|
|
14307
|
-
|
|
14308
|
-
|
|
14309
|
-
|
|
14310
|
-
|
|
14311
|
-
|
|
14312
|
-
|
|
14313
|
-
down to one column.
|
|
14298
|
+
With `TableColumn` children, each track sizes the column in its place, a
|
|
14299
|
+
hidden column counted, so hiding one takes its track with it and the rest
|
|
14300
|
+
keep theirs. The columns decide how many tracks there are and this list
|
|
14301
|
+
only how wide: a track past the last column is dropped, and a column past
|
|
14302
|
+
the last track shares what is left. With no columns declared it is the
|
|
14303
|
+
whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
14304
|
+
is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
14305
|
+
its column at the default rather than taking the table down to one column.
|
|
14314
14306
|
|
|
14315
14307
|
**A column's own `width` wins over its track here.** The width is written
|
|
14316
14308
|
on the column it sizes, which is the more particular statement, and it is
|
|
@@ -14324,13 +14316,11 @@ to walk, so a render there knows of no columns and this attribute is the
|
|
|
14324
14316
|
whole answer: a table given one lays its grid out in the first paint, and a
|
|
14325
14317
|
table sized only by its columns is one track wide until it upgrades.
|
|
14326
14318
|
|
|
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. */
|
|
14319
|
+
**Data Table has none of this, and should not.** Its columns are its schema
|
|
14320
|
+
rather than an option, so there is always a column to write a `width` on
|
|
14321
|
+
and a list here would be a second way to say what that says. This table's
|
|
14322
|
+
cells are markup, and a table written as rows of cells with no column
|
|
14323
|
+
declared in it has nowhere else to be sized from. */
|
|
14334
14324
|
"prop:columns"?: (HelixHeadlessTable["columns"]) | undefined;
|
|
14335
14325
|
/** Accessible name for the table. */
|
|
14336
14326
|
"prop:label"?: (HelixHeadlessTable["label"]) | undefined;
|
|
@@ -14455,11 +14445,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
14455
14445
|
tab, and `default-active` is how markup says where to start without
|
|
14456
14446
|
naming the current one. */
|
|
14457
14447
|
active?: (HelixHeadlessTabs["active"]) | undefined;
|
|
14458
|
-
/**
|
|
14448
|
+
/** Which item the markup declared current.
|
|
14459
14449
|
|
|
14460
14450
|
Ignored once `active` is written. */
|
|
14461
14451
|
"default-active"?: (HelixHeadlessTabs["defaultActive"]) | undefined;
|
|
14462
|
-
/**
|
|
14452
|
+
/** Which item the markup declared current.
|
|
14463
14453
|
|
|
14464
14454
|
Ignored once `active` is written. */
|
|
14465
14455
|
defaultActive?: (HelixHeadlessTabs["defaultActive"]) | undefined;
|
|
@@ -14507,11 +14497,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
14507
14497
|
tab, and `default-active` is how markup says where to start without
|
|
14508
14498
|
naming the current one. */
|
|
14509
14499
|
"prop:active"?: (HelixHeadlessTabs["active"]) | undefined;
|
|
14510
|
-
/**
|
|
14500
|
+
/** Which item the markup declared current.
|
|
14511
14501
|
|
|
14512
14502
|
Ignored once `active` is written. */
|
|
14513
14503
|
"attr:default-active"?: (HelixHeadlessTabs["defaultActive"]) | undefined;
|
|
14514
|
-
/**
|
|
14504
|
+
/** Which item the markup declared current.
|
|
14515
14505
|
|
|
14516
14506
|
Ignored once `active` is written. */
|
|
14517
14507
|
"prop:defaultActive"?: (HelixHeadlessTabs["defaultActive"]) | undefined;
|
|
@@ -14956,8 +14946,8 @@ Absent uses the runtime's own. */
|
|
|
14956
14946
|
|
|
14957
14947
|
Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
14958
14948
|
number, and both are carried as one comma-separated value, which is what a
|
|
14959
|
-
form submits. `
|
|
14960
|
-
why a wheel cannot do either. */
|
|
14949
|
+
form submits. `TimePicker` carries the longer note on the interaction and
|
|
14950
|
+
on why a wheel cannot do either. */
|
|
14961
14951
|
mode?: (HelixHeadlessTimeInput["mode"]) | undefined;
|
|
14962
14952
|
/** What the field says before a time is in it. */
|
|
14963
14953
|
placeholder?: (HelixHeadlessTimeInput["placeholder"]) | undefined;
|
|
@@ -14986,7 +14976,7 @@ never something this element would refuse to read back. */
|
|
|
14986
14976
|
`list` offers whole times, which is what a product with slots or opening
|
|
14987
14977
|
hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
14988
14978
|
the locale uses one, which is the only way to reach `23:45` without
|
|
14989
|
-
scrolling most of a day. `
|
|
14979
|
+
scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
14990
14980
|
|
|
14991
14981
|
**Optional rather than defaulted, which is not a style preference.** A
|
|
14992
14982
|
reflecting property with a default writes its attribute onto every host the
|
|
@@ -15032,9 +15022,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
15032
15022
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
15033
15023
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
15034
15024
|
open?: (HelixHeadlessTimeInput["open"]) | undefined;
|
|
15035
|
-
/**
|
|
15025
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
15036
15026
|
"default-open"?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
|
|
15037
|
-
/**
|
|
15027
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
15038
15028
|
defaultOpen?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
|
|
15039
15029
|
/** What the control is called once everything is showing. */
|
|
15040
15030
|
"collapse-label"?: (HelixHeadlessTimeInput["collapseLabel"]) | undefined;
|
|
@@ -15144,8 +15134,8 @@ Absent uses the runtime's own. */
|
|
|
15144
15134
|
|
|
15145
15135
|
Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
15146
15136
|
number, and both are carried as one comma-separated value, which is what a
|
|
15147
|
-
form submits. `
|
|
15148
|
-
why a wheel cannot do either. */
|
|
15137
|
+
form submits. `TimePicker` carries the longer note on the interaction and
|
|
15138
|
+
on why a wheel cannot do either. */
|
|
15149
15139
|
"prop:mode"?: (HelixHeadlessTimeInput["mode"]) | undefined;
|
|
15150
15140
|
/** What the field says before a time is in it. */
|
|
15151
15141
|
"prop:placeholder"?: (HelixHeadlessTimeInput["placeholder"]) | undefined;
|
|
@@ -15174,7 +15164,7 @@ never something this element would refuse to read back. */
|
|
|
15174
15164
|
`list` offers whole times, which is what a product with slots or opening
|
|
15175
15165
|
hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
15176
15166
|
the locale uses one, which is the only way to reach `23:45` without
|
|
15177
|
-
scrolling most of a day. `
|
|
15167
|
+
scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
15178
15168
|
|
|
15179
15169
|
**Optional rather than defaulted, which is not a style preference.** A
|
|
15180
15170
|
reflecting property with a default writes its attribute onto every host the
|
|
@@ -15220,9 +15210,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
15220
15210
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
15221
15211
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
15222
15212
|
"prop:open"?: (HelixHeadlessTimeInput["open"]) | undefined;
|
|
15223
|
-
/**
|
|
15213
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
15224
15214
|
"bool:default-open"?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
|
|
15225
|
-
/**
|
|
15215
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
15226
15216
|
"prop:defaultOpen"?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
|
|
15227
15217
|
/** What the control is called once everything is showing. */
|
|
15228
15218
|
"attr:collapse-label"?: (HelixHeadlessTimeInput["collapseLabel"]) | undefined;
|
|
@@ -15372,7 +15362,7 @@ Absent uses the runtime's own. */
|
|
|
15372
15362
|
|
|
15373
15363
|
Absent is one. `range` holds a start and an end with everything between
|
|
15374
15364
|
them shown as part of the answer, `multiple` holds any number, and both are
|
|
15375
|
-
carried as one comma-separated value: the same shape `
|
|
15365
|
+
carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
15376
15366
|
because it is the same question asked of a different unit.
|
|
15377
15367
|
|
|
15378
15368
|
**A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -15546,7 +15536,7 @@ Absent uses the runtime's own. */
|
|
|
15546
15536
|
|
|
15547
15537
|
Absent is one. `range` holds a start and an end with everything between
|
|
15548
15538
|
them shown as part of the answer, `multiple` holds any number, and both are
|
|
15549
|
-
carried as one comma-separated value: the same shape `
|
|
15539
|
+
carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
15550
15540
|
because it is the same question asked of a different unit.
|
|
15551
15541
|
|
|
15552
15542
|
**A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -15845,7 +15835,7 @@ where they were would not be a stack.
|
|
|
15845
15835
|
**Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
15846
15836
|
defaulting is the pair that writes onto a host: every toast region anybody
|
|
15847
15837
|
rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
15848
|
-
consumer's server markup does not have.
|
|
15838
|
+
consumer's server markup does not have. A sheet carries the resting
|
|
15849
15839
|
arrangement in its own `:host` rule and the selectors describe only the
|
|
15850
15840
|
departures, which is what `orientation` does. */
|
|
15851
15841
|
placement?: (HelixHeadlessToast["placement"]) | undefined;
|
|
@@ -15866,7 +15856,7 @@ where they were would not be a stack.
|
|
|
15866
15856
|
**Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
15867
15857
|
defaulting is the pair that writes onto a host: every toast region anybody
|
|
15868
15858
|
rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
15869
|
-
consumer's server markup does not have.
|
|
15859
|
+
consumer's server markup does not have. A sheet carries the resting
|
|
15870
15860
|
arrangement in its own `:host` rule and the selectors describe only the
|
|
15871
15861
|
departures, which is what `orientation` does. */
|
|
15872
15862
|
"prop:placement"?: (HelixHeadlessToast["placement"]) | undefined;
|
|
@@ -16107,11 +16097,11 @@ attribute and the state is the property.
|
|
|
16107
16097
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
16108
16098
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
16109
16099
|
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.
|
|
16100
|
+
this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
16101
|
+
value="light" selected>` reported `defaultSelected` as `false` both from
|
|
16102
|
+
parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
16103
|
+
every way a consumer writes one. The snapshot could only ever be true for
|
|
16104
|
+
an element already in the document when `customElements.define` ran.
|
|
16115
16105
|
|
|
16116
16106
|
Nothing overwrites it either, which is what makes reading it late correct
|
|
16117
16107
|
rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -16157,11 +16147,11 @@ attribute and the state is the property.
|
|
|
16157
16147
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
16158
16148
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
16159
16149
|
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.
|
|
16150
|
+
this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
16151
|
+
value="light" selected>` reported `defaultSelected` as `false` both from
|
|
16152
|
+
parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
16153
|
+
every way a consumer writes one. The snapshot could only ever be true for
|
|
16154
|
+
an element already in the document when `customElements.define` ran.
|
|
16165
16155
|
|
|
16166
16156
|
Nothing overwrites it either, which is what makes reading it late correct
|
|
16167
16157
|
rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -16312,9 +16302,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
16312
16302
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
16313
16303
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
16314
16304
|
open?: (HelixHeadlessTooltip["open"]) | undefined;
|
|
16315
|
-
/**
|
|
16305
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16316
16306
|
"default-open"?: (HelixHeadlessTooltip["defaultOpen"]) | undefined;
|
|
16317
|
-
/**
|
|
16307
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16318
16308
|
defaultOpen?: (HelixHeadlessTooltip["defaultOpen"]) | undefined;
|
|
16319
16309
|
|
|
16320
16310
|
/** Fired before it hides, and cancelable. */
|
|
@@ -16420,9 +16410,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
16420
16410
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
16421
16411
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
16422
16412
|
"prop:open"?: (HelixHeadlessTooltip["open"]) | undefined;
|
|
16423
|
-
/**
|
|
16413
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16424
16414
|
"bool:default-open"?: (HelixHeadlessTooltip["defaultOpen"]) | undefined;
|
|
16425
|
-
/**
|
|
16415
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16426
16416
|
"prop:defaultOpen"?: (HelixHeadlessTooltip["defaultOpen"]) | undefined;
|
|
16427
16417
|
/** Fired before it hides, and cancelable. */
|
|
16428
16418
|
"on:helix-before-close"?: ((
|
|
@@ -16722,9 +16712,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
16722
16712
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
16723
16713
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
16724
16714
|
open?: (HelixHeadlessTreeItem["open"]) | undefined;
|
|
16725
|
-
/**
|
|
16715
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16726
16716
|
"default-open"?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
|
|
16727
|
-
/**
|
|
16717
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16728
16718
|
defaultOpen?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
|
|
16729
16719
|
/** Depth from the root, counted by the tree so indentation needs no CSS nesting.
|
|
16730
16720
|
|
|
@@ -16802,9 +16792,9 @@ hydration, or diffed by a framework, it comes back holding whatever the
|
|
|
16802
16792
|
last reader did rather than what the author wrote. `:state(open)` carries
|
|
16803
16793
|
the resolved state for stylesheets, which is what the mirror is for. */
|
|
16804
16794
|
"prop:open"?: (HelixHeadlessTreeItem["open"]) | undefined;
|
|
16805
|
-
/**
|
|
16795
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16806
16796
|
"bool:default-open"?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
|
|
16807
|
-
/**
|
|
16797
|
+
/** Whether the markup declared it open. Ignored once `open` is written. */
|
|
16808
16798
|
"prop:defaultOpen"?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
|
|
16809
16799
|
/** Depth from the root, counted by the tree so indentation needs no CSS nesting.
|
|
16810
16800
|
|
|
@@ -16920,11 +16910,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
16920
16910
|
tab, and `default-active` is how markup says where to start without
|
|
16921
16911
|
naming the current one. */
|
|
16922
16912
|
active?: (HelixHeadlessTree["active"]) | undefined;
|
|
16923
|
-
/**
|
|
16913
|
+
/** Which item the markup declared current.
|
|
16924
16914
|
|
|
16925
16915
|
Ignored once `active` is written. */
|
|
16926
16916
|
"default-active"?: (HelixHeadlessTree["defaultActive"]) | undefined;
|
|
16927
|
-
/**
|
|
16917
|
+
/** Which item the markup declared current.
|
|
16928
16918
|
|
|
16929
16919
|
Ignored once `active` is written. */
|
|
16930
16920
|
defaultActive?: (HelixHeadlessTree["defaultActive"]) | undefined;
|
|
@@ -16999,11 +16989,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
16999
16989
|
tab, and `default-active` is how markup says where to start without
|
|
17000
16990
|
naming the current one. */
|
|
17001
16991
|
"prop:active"?: (HelixHeadlessTree["active"]) | undefined;
|
|
17002
|
-
/**
|
|
16992
|
+
/** Which item the markup declared current.
|
|
17003
16993
|
|
|
17004
16994
|
Ignored once `active` is written. */
|
|
17005
16995
|
"attr:default-active"?: (HelixHeadlessTree["defaultActive"]) | undefined;
|
|
17006
|
-
/**
|
|
16996
|
+
/** Which item the markup declared current.
|
|
17007
16997
|
|
|
17008
16998
|
Ignored once `active` is written. */
|
|
17009
16999
|
"prop:defaultActive"?: (HelixHeadlessTree["defaultActive"]) | undefined;
|
|
@@ -17207,11 +17197,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
17207
17197
|
tab, and `default-active` is how markup says where to start without
|
|
17208
17198
|
naming the current one. */
|
|
17209
17199
|
active?: (HelixHeadlessVideoPlaylist["active"]) | undefined;
|
|
17210
|
-
/**
|
|
17200
|
+
/** Which item the markup declared current.
|
|
17211
17201
|
|
|
17212
17202
|
Ignored once `active` is written. */
|
|
17213
17203
|
"default-active"?: (HelixHeadlessVideoPlaylist["defaultActive"]) | undefined;
|
|
17214
|
-
/**
|
|
17204
|
+
/** Which item the markup declared current.
|
|
17215
17205
|
|
|
17216
17206
|
Ignored once `active` is written. */
|
|
17217
17207
|
defaultActive?: (HelixHeadlessVideoPlaylist["defaultActive"]) | undefined;
|
|
@@ -17238,11 +17228,11 @@ Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
|
17238
17228
|
tab, and `default-active` is how markup says where to start without
|
|
17239
17229
|
naming the current one. */
|
|
17240
17230
|
"prop:active"?: (HelixHeadlessVideoPlaylist["active"]) | undefined;
|
|
17241
|
-
/**
|
|
17231
|
+
/** Which item the markup declared current.
|
|
17242
17232
|
|
|
17243
17233
|
Ignored once `active` is written. */
|
|
17244
17234
|
"attr:default-active"?: (HelixHeadlessVideoPlaylist["defaultActive"]) | undefined;
|
|
17245
|
-
/**
|
|
17235
|
+
/** Which item the markup declared current.
|
|
17246
17236
|
|
|
17247
17237
|
Ignored once `active` is written. */
|
|
17248
17238
|
"prop:defaultActive"?: (HelixHeadlessVideoPlaylist["defaultActive"]) | undefined;
|
|
@@ -17870,7 +17860,7 @@ export type CustomElements = {
|
|
|
17870
17860
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
17871
17861
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
17872
17862
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
17873
|
-
* - `default-open`/`defaultOpen`:
|
|
17863
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
17874
17864
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
17875
17865
|
*
|
|
17876
17866
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -17962,7 +17952,7 @@ export type CustomElements = {
|
|
|
17962
17952
|
* item added a second after render coordinates on its first click.
|
|
17963
17953
|
*
|
|
17964
17954
|
* Items are matched with `instanceof HelixHeadlessAccordionItem`, never by tag
|
|
17965
|
-
* name
|
|
17955
|
+
* name, so this tier does not learn about the styled one.
|
|
17966
17956
|
*
|
|
17967
17957
|
* The keyboard listener is the controller's and is attached on connect, so
|
|
17968
17958
|
* none of it runs on the server, where there is no tree to walk and no events
|
|
@@ -18450,13 +18440,13 @@ export type CustomElements = {
|
|
|
18450
18440
|
* Unset shows all of them, which is what no limit means and is more useful
|
|
18451
18441
|
* than refusing to render.
|
|
18452
18442
|
*
|
|
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.
|
|
18443
|
+
* **Reflected, because the fold is a stylesheet rule and nothing else.** A
|
|
18444
|
+
* sheet hides past the limit one selector per value, as `FOLDS_UP_TO`
|
|
18445
|
+
* describes, so the attribute *is* the mechanism: a `max` that reaches this
|
|
18446
|
+
* property and never reaches the host matches no rule, and every avatar is
|
|
18447
|
+
* drawn beside a count claiming some are hidden. Markup is the safe path and
|
|
18448
|
+
* hides the fault; a script is the broken one, and React takes it for
|
|
18449
|
+
* everyone, assigning a matching property rather than an attribute.
|
|
18460
18450
|
*
|
|
18461
18451
|
* **Optional rather than defaulted, per the rule that a reflected property
|
|
18462
18452
|
* takes no default**: `max = 0` would stamp `max="0"` onto every host that
|
|
@@ -18869,7 +18859,7 @@ export type CustomElements = {
|
|
|
18869
18859
|
* CSS variables available for styling the component.
|
|
18870
18860
|
*
|
|
18871
18861
|
* - `--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
|
|
18862
|
+
* - `--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
18863
|
* - `--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
18864
|
*
|
|
18875
18865
|
* ## CSS Parts
|
|
@@ -19012,12 +19002,12 @@ export type CustomElements = {
|
|
|
19012
19002
|
* - `current`: Whether this item is the page the reader is on.
|
|
19013
19003
|
* - `href`: Where the crumb goes, and nothing where it is the current page.
|
|
19014
19004
|
*
|
|
19015
|
-
* **Optional and reflected, because a stylesheet does select on it.**
|
|
19016
|
-
*
|
|
19017
|
-
*
|
|
19018
|
-
*
|
|
19019
|
-
* the
|
|
19020
|
-
*
|
|
19005
|
+
* **Optional and reflected, because a stylesheet does select on it.** A sheet
|
|
19006
|
+
* writes `:host(:not([href])) [part="link"]` to take the block padding off a
|
|
19007
|
+
* crumb that is not a link, so the attribute is what decides how tall a crumb
|
|
19008
|
+
* is. Unreflected, an `href` set from script reached the property, rendered
|
|
19009
|
+
* the anchor, and left the host looking unlinked: the crumb drew at 20px
|
|
19010
|
+
* where a markup twin drew at 28.
|
|
19021
19011
|
*
|
|
19022
19012
|
* Optional rather than defaulted, which is the general rule that a reflected
|
|
19023
19013
|
* property takes no default: an `href` written onto every host would be a link
|
|
@@ -19254,7 +19244,7 @@ export type CustomElements = {
|
|
|
19254
19244
|
* the same way `label` becomes `aria-label` in there.
|
|
19255
19245
|
*
|
|
19256
19246
|
* ```html
|
|
19257
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
19247
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
19258
19248
|
* ```
|
|
19259
19249
|
*
|
|
19260
19250
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -19530,7 +19520,7 @@ export type CustomElements = {
|
|
|
19530
19520
|
*
|
|
19531
19521
|
* The host is the surface. A wrapper `<div part="container">` would be a second
|
|
19532
19522
|
* box doing nothing the host cannot: the element itself takes the border, the
|
|
19533
|
-
* radius, and the grid, and a consumer styles `
|
|
19523
|
+
* radius, and the grid, and a consumer styles `Card` rather than reaching
|
|
19534
19524
|
* through `::part`. One node instead of two, on every card on the page.
|
|
19535
19525
|
*
|
|
19536
19526
|
* Name the card with `aria-label` or `aria-labelledby`. That is the only
|
|
@@ -19615,12 +19605,11 @@ export type CustomElements = {
|
|
|
19615
19605
|
* - `autoplay`: Whether the carousel advances on its own.
|
|
19616
19606
|
* - `index`: The slide in view, counted from zero.
|
|
19617
19607
|
*
|
|
19618
|
-
* Reading gives the real slide
|
|
19619
|
-
*
|
|
19620
|
-
*
|
|
19621
|
-
* `index`
|
|
19622
|
-
*
|
|
19623
|
-
* and `default-index` says where it starts.
|
|
19608
|
+
* Reading gives the real slide. Writing always applies, the way a script
|
|
19609
|
+
* assigning to a native control does, and is a seed and a correction rather
|
|
19610
|
+
* than a claim of ownership: a consumer who wants the decision refuses the
|
|
19611
|
+
* `helix-select`. `default-index` is where the carousel starts until
|
|
19612
|
+
* something moves it.
|
|
19624
19613
|
*
|
|
19625
19614
|
* The same contract the four mixins carry, written out here rather than
|
|
19626
19615
|
* extracted, because a slide is addressed by position and every one of those
|
|
@@ -19679,13 +19668,13 @@ export type CustomElements = {
|
|
|
19679
19668
|
* **The number is published to the styles rather than enumerated by them**,
|
|
19680
19669
|
* as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
19681
19670
|
* 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
|
-
*
|
|
19671
|
+
* so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
19672
|
+
* above it the pane falls back to one across while this file goes on counting
|
|
19673
|
+
* positions. Measured in Chromium over eight slides against such a sheet, six
|
|
19674
|
+
* across gave three dots, a pane taking the whole track and five slides
|
|
19675
|
+
* reachable only by dragging. Published from here there is no ceiling to
|
|
19676
|
+
* exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
19677
|
+
* correction the same way and for the same reason.
|
|
19689
19678
|
*
|
|
19690
19679
|
* **On the track and not on the host.** A custom property on the host is a
|
|
19691
19680
|
* reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -19710,8 +19699,8 @@ export type CustomElements = {
|
|
|
19710
19699
|
* `auto` track is handed nothing. A count stays for the design that calls for
|
|
19711
19700
|
* exactly three.
|
|
19712
19701
|
*
|
|
19713
|
-
*
|
|
19714
|
-
*
|
|
19702
|
+
* A sheet says how it divides, and the `auto` example here carries the same
|
|
19703
|
+
* three lines for a consumer writing their own.
|
|
19715
19704
|
*
|
|
19716
19705
|
* **A value rather than the resting behavior**, which is what the
|
|
19717
19706
|
* responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -20085,13 +20074,13 @@ export type CustomElements = {
|
|
|
20085
20074
|
*
|
|
20086
20075
|
* **Not reflected, and the default is why.** A reflected property that
|
|
20087
20076
|
* 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.
|
|
20077
|
+
* consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
20078
|
+
* and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
20079
|
+
* hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
20080
|
+
* needs the attribute either, because the one thing that changes with the pin
|
|
20081
|
+
* is the way back, and that is a part inside the shadow tree where a
|
|
20082
|
+
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
20083
|
+
* pinned` after upgrade against `label` from the server.
|
|
20095
20084
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
20096
20085
|
*
|
|
20097
20086
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -20148,7 +20137,7 @@ export type CustomElements = {
|
|
|
20148
20137
|
*
|
|
20149
20138
|
* Areas where markup can be added to the component.
|
|
20150
20139
|
*
|
|
20151
|
-
* - `(default)`: The turns
|
|
20140
|
+
* - `(default)`: The turns.
|
|
20152
20141
|
* - `actions`: Beside the header: what can be done to the conversation itself.
|
|
20153
20142
|
* - `composer`: Below the transcript, where the reader writes.
|
|
20154
20143
|
* - `header`: Above the transcript: what this conversation is.
|
|
@@ -20399,7 +20388,7 @@ export type CustomElements = {
|
|
|
20399
20388
|
* Not reflected: the attribute is the consumer's input and stays as they
|
|
20400
20389
|
* wrote it, and `:state(checked)` carries the resolved state for
|
|
20401
20390
|
* stylesheets.
|
|
20402
|
-
* - `default-checked`/`defaultChecked`:
|
|
20391
|
+
* - `default-checked`/`defaultChecked`: Whether the markup declared it checked, which is where a reset returns to.
|
|
20403
20392
|
* - `feedback`: What is wrong, in the reader's words rather than the browser's.
|
|
20404
20393
|
* - `hint`: Help under the control, shown while there is nothing wrong.
|
|
20405
20394
|
* - `label`: The accessible name, and the fallback for the `label` slot.
|
|
@@ -20611,11 +20600,11 @@ export type CustomElements = {
|
|
|
20611
20600
|
* round. The platform already writes booleans like this for the same reason,
|
|
20612
20601
|
* `novalidate` and `nomodule` and `noreferrer` among them.
|
|
20613
20602
|
*
|
|
20614
|
-
* **Reflected, because the gutter is a stylesheet rule.**
|
|
20615
|
-
*
|
|
20616
|
-
*
|
|
20617
|
-
*
|
|
20618
|
-
*
|
|
20603
|
+
* **Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
20604
|
+
* the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
20605
|
+
* what decides whether the block pays for a control. Unreflected, setting it
|
|
20606
|
+
* from script takes the button away (`render` reads the property) and leaves
|
|
20607
|
+
* the 40px it stood in reserved.
|
|
20619
20608
|
*
|
|
20620
20609
|
* A false boolean reflects as the attribute's absence, so this costs no
|
|
20621
20610
|
* `no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -20759,11 +20748,11 @@ export type CustomElements = {
|
|
|
20759
20748
|
>;
|
|
20760
20749
|
|
|
20761
20750
|
/**
|
|
20762
|
-
* **The picker is `
|
|
20751
|
+
* **The picker is `ColorPicker`, not a second one written here.** It owns the
|
|
20763
20752
|
* square, the ramps, the eyedropper and the syntax toggle, and it is worth
|
|
20764
20753
|
* having on its own: a settings pane wants a picker flat on the page with
|
|
20765
20754
|
* nothing to open. This element is the field, the overlay, and the form.
|
|
20766
|
-
* Exactly the arrangement Date Input has with `
|
|
20755
|
+
* Exactly the arrangement Date Input has with `DatePicker`.
|
|
20767
20756
|
*
|
|
20768
20757
|
* **Typed as well as picked, and the typing is the reason this is not
|
|
20769
20758
|
* `<input type="color">`.** The native control gives a free picker and takes
|
|
@@ -20835,7 +20824,7 @@ export type CustomElements = {
|
|
|
20835
20824
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
20836
20825
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
20837
20826
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
20838
|
-
* - `default-open`/`defaultOpen`:
|
|
20827
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
20839
20828
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
20840
20829
|
* - `value`: What the control holds now, and what its form submits.
|
|
20841
20830
|
*
|
|
@@ -21123,10 +21112,10 @@ export type CustomElements = {
|
|
|
21123
21112
|
*
|
|
21124
21113
|
* **A color is exactly as requirable as a date**, which is the comparison
|
|
21125
21114
|
* that settles it: this element extends `HelixFormElement`, carries `name`
|
|
21126
|
-
* and reports its value, so a consumer writing
|
|
21127
|
-
*
|
|
21128
|
-
* to
|
|
21129
|
-
*
|
|
21115
|
+
* and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
21116
|
+
* name="brand" required>` inside a form has every reason to expect the form
|
|
21117
|
+
* to refuse an empty one. Its two siblings in the same composition position,
|
|
21118
|
+
* Date Picker and Time Picker, both check it.
|
|
21130
21119
|
*
|
|
21131
21120
|
* Written out rather than taken from `MixinField`, for the reason those two
|
|
21132
21121
|
* record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -21317,10 +21306,10 @@ export type CustomElements = {
|
|
|
21317
21306
|
>;
|
|
21318
21307
|
|
|
21319
21308
|
/**
|
|
21320
|
-
* **The list is `
|
|
21321
|
-
*
|
|
21322
|
-
*
|
|
21323
|
-
* the
|
|
21309
|
+
* **The list is `Listbox`, and the filtering is its own.** It owns narrowing,
|
|
21310
|
+
* the empty state, the highlight, `aria-activedescendant` and scrolling an
|
|
21311
|
+
* option into view. What is left for this element is the field, the panel and
|
|
21312
|
+
* the traffic between them.
|
|
21324
21313
|
*
|
|
21325
21314
|
* **The text and the value are two things.** What a reader types is a filter:
|
|
21326
21315
|
* it narrows the list and is thrown away. The value is whichever option they
|
|
@@ -21404,7 +21393,7 @@ export type CustomElements = {
|
|
|
21404
21393
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
21405
21394
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
21406
21395
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
21407
|
-
* - `default-open`/`defaultOpen`:
|
|
21396
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
21408
21397
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
21409
21398
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
21410
21399
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -21491,7 +21480,7 @@ export type CustomElements = {
|
|
|
21491
21480
|
*
|
|
21492
21481
|
* Areas where markup can be added to the component.
|
|
21493
21482
|
*
|
|
21494
|
-
* - `(default)`: The options
|
|
21483
|
+
* - `(default)`: The options.
|
|
21495
21484
|
* - `end`: After it, for a unit or a clear button.
|
|
21496
21485
|
* - `indicator`: Replaces the caret saying the field opens.
|
|
21497
21486
|
* - `start`: Before the text, for an icon.
|
|
@@ -21602,12 +21591,11 @@ export type CustomElements = {
|
|
|
21602
21591
|
>;
|
|
21603
21592
|
|
|
21604
21593
|
/**
|
|
21605
|
-
* **The list is `
|
|
21606
|
-
*
|
|
21607
|
-
*
|
|
21608
|
-
*
|
|
21609
|
-
*
|
|
21610
|
-
* and a key that summons it.
|
|
21594
|
+
* **The list is `Listbox`, filtering and all.** Listbox already owns narrowing,
|
|
21595
|
+
* the empty state, the highlight over what matched, `aria-activedescendant`,
|
|
21596
|
+
* scrolling an option into view and the keyboard that moves between them. Its
|
|
21597
|
+
* own note says a command palette is that list again with something different
|
|
21598
|
+
* opening it, and this is that something: a dialog, and a key that summons it.
|
|
21611
21599
|
*
|
|
21612
21600
|
* **The value is not kept.** A palette runs a command and forgets it: nothing
|
|
21613
21601
|
* here is a form control and nothing is submitted, so what it reports is that
|
|
@@ -21649,7 +21637,7 @@ export type CustomElements = {
|
|
|
21649
21637
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
21650
21638
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
21651
21639
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
21652
|
-
* - `default-open`/`defaultOpen`:
|
|
21640
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
21653
21641
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
21654
21642
|
*
|
|
21655
21643
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -21684,7 +21672,7 @@ export type CustomElements = {
|
|
|
21684
21672
|
*
|
|
21685
21673
|
* Areas where markup can be added to the component.
|
|
21686
21674
|
*
|
|
21687
|
-
* - `(default)`: The commands,
|
|
21675
|
+
* - `(default)`: The commands, and any groups of them.
|
|
21688
21676
|
* - `footer`: Under the list, for the keys a reader can press.
|
|
21689
21677
|
*
|
|
21690
21678
|
* ## Methods
|
|
@@ -21771,7 +21759,7 @@ export type CustomElements = {
|
|
|
21771
21759
|
* the same way `label` becomes `aria-label` in there.
|
|
21772
21760
|
*
|
|
21773
21761
|
* ```html
|
|
21774
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
21762
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
21775
21763
|
* ```
|
|
21776
21764
|
*
|
|
21777
21765
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -21969,19 +21957,19 @@ export type CustomElements = {
|
|
|
21969
21957
|
|
|
21970
21958
|
/**
|
|
21971
21959
|
* **The schema is markup and the data is a property.** Columns are declared as
|
|
21972
|
-
* `
|
|
21973
|
-
*
|
|
21974
|
-
*
|
|
21960
|
+
* `TableColumn` children, because a schema is small and something a reader
|
|
21961
|
+
* should see in the HTML; rows are handed over as an array, because a table
|
|
21962
|
+
* that draws ten thousand elements cannot window them.
|
|
21975
21963
|
*
|
|
21976
21964
|
* ```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>
|
|
21965
|
+
* <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
|
|
21966
|
+
* <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
|
|
21967
|
+
* <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
|
|
21968
|
+
* </helix-headless-data-table>
|
|
21981
21969
|
* ```
|
|
21982
21970
|
*
|
|
21983
|
-
* `
|
|
21984
|
-
*
|
|
21971
|
+
* `Table` takes rows as markup and is the right component for a table of twelve
|
|
21972
|
+
* things a person wrote out.
|
|
21985
21973
|
*
|
|
21986
21974
|
* **Sort and filter apply to the whole set, never the page.** Sorting the drawn
|
|
21987
21975
|
* window is correct on the first screen and wrong on every other one.
|
|
@@ -21990,14 +21978,15 @@ export type CustomElements = {
|
|
|
21990
21978
|
* elements do, but reading a cell needs the columns, and the columns are markup
|
|
21991
21979
|
* children Lit SSR does not hand this element. So a crawler sees a table of the
|
|
21992
21980
|
* right shape with nothing in it. That is the cost of the first paragraph: use
|
|
21993
|
-
* `
|
|
21981
|
+
* `Table` where the served HTML has to carry the values.
|
|
21994
21982
|
*
|
|
21995
21983
|
* **`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is
|
|
21996
21984
|
* selected by its identity rather than its position, so a selection survives a
|
|
21997
21985
|
* sort, a filter and a page. `selected` is the chosen keys, comma separated, the
|
|
21998
|
-
* shape Listbox uses for a multiple choice, and like `sort` it
|
|
21999
|
-
*
|
|
22000
|
-
* row in the result, across pages, and shows a dash while only
|
|
21986
|
+
* shape Listbox uses for a multiple choice, and like `sort` writing it applies
|
|
21987
|
+
* while `default-selected` is what the markup declared. The box in the heading
|
|
21988
|
+
* selects every row in the result, across pages, and shows a dash while only
|
|
21989
|
+
* some are chosen.
|
|
22001
21990
|
* Choosing one of many, rather than several, is opening a row, and that is a
|
|
22002
21991
|
* link or a button in a cell rather than a selection.
|
|
22003
21992
|
*
|
|
@@ -22011,14 +22000,13 @@ export type CustomElements = {
|
|
|
22011
22000
|
* in the order on screen, in the columns on screen. Saving it is the page's
|
|
22012
22001
|
* business, the same as any other file.
|
|
22013
22002
|
*
|
|
22014
|
-
* **There is no `columns` attribute here, and
|
|
22015
|
-
*
|
|
22016
|
-
*
|
|
22017
|
-
*
|
|
22018
|
-
*
|
|
22019
|
-
*
|
|
22020
|
-
*
|
|
22021
|
-
* `--data-table-columns` here and `--table-columns` there.
|
|
22003
|
+
* **There is no `columns` attribute here, and Table has one.** The difference
|
|
22004
|
+
* is what a column is in each: here it is the schema, so a table without one
|
|
22005
|
+
* has nothing to read a row with, and every column is a place to write a
|
|
22006
|
+
* `width`. A Table holds cells a consumer wrote and can be written with no
|
|
22007
|
+
* column at all, so its `columns` is where such a table is sized from. Written
|
|
22008
|
+
* on this element the attribute is inert, which is the trap worth knowing when
|
|
22009
|
+
* moving between the two.
|
|
22022
22010
|
*
|
|
22023
22011
|
* ## Attributes & Properties
|
|
22024
22012
|
*
|
|
@@ -22099,9 +22087,9 @@ export type CustomElements = {
|
|
|
22099
22087
|
*
|
|
22100
22088
|
* **It announces nothing, and that is not an omission.** Nothing in this
|
|
22101
22089
|
* element ever asks for a different page size: a size selector is
|
|
22102
|
-
* `
|
|
22103
|
-
*
|
|
22104
|
-
*
|
|
22090
|
+
* `PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
22091
|
+
* themselves. Routing this through `requestChange` would announce an event
|
|
22092
|
+
* the element never has cause to fire.
|
|
22105
22093
|
* - `total`: How many rows the whole result has, where this element cannot count them.
|
|
22106
22094
|
*
|
|
22107
22095
|
* Only read in `server` mode, where `rows` is one page and its length says
|
|
@@ -22188,7 +22176,7 @@ export type CustomElements = {
|
|
|
22188
22176
|
*
|
|
22189
22177
|
* Areas where markup can be added to the component.
|
|
22190
22178
|
*
|
|
22191
|
-
* - `(default)`: The columns, declared
|
|
22179
|
+
* - `(default)`: The columns, declared rather than drawn.
|
|
22192
22180
|
* - `footer`: Below the grid, replacing the pagination this would otherwise draw.
|
|
22193
22181
|
* - `toolbar`: Above the grid, for a search field or actions.
|
|
22194
22182
|
*
|
|
@@ -22224,8 +22212,8 @@ export type CustomElements = {
|
|
|
22224
22212
|
*
|
|
22225
22213
|
* CSS variables available for styling the component.
|
|
22226
22214
|
*
|
|
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.
|
|
22215
|
+
* - `--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`)
|
|
22216
|
+
* - `--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
22217
|
*
|
|
22230
22218
|
* ## CSS Parts
|
|
22231
22219
|
*
|
|
@@ -22280,9 +22268,9 @@ export type CustomElements = {
|
|
|
22280
22268
|
>;
|
|
22281
22269
|
|
|
22282
22270
|
/**
|
|
22283
|
-
* **The calendar is `
|
|
22284
|
-
*
|
|
22285
|
-
*
|
|
22271
|
+
* **The calendar is `DatePicker`, not a second one written here.** It already
|
|
22272
|
+
* knows about months, ranges, disabled days, the first day of the week and
|
|
22273
|
+
* every keyboard rule a grid owes a reader. This element is the field, the
|
|
22286
22274
|
* overlay, and the translation between them.
|
|
22287
22275
|
*
|
|
22288
22276
|
* **Typed as well as picked, and the typing is why it is not
|
|
@@ -22369,7 +22357,7 @@ export type CustomElements = {
|
|
|
22369
22357
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
22370
22358
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
22371
22359
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
22372
|
-
* - `default-open`/`defaultOpen`:
|
|
22360
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
22373
22361
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
22374
22362
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
22375
22363
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -23007,7 +22995,7 @@ export type CustomElements = {
|
|
|
23007
22995
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
23008
22996
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
23009
22997
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
23010
|
-
* - `default-open`/`defaultOpen`:
|
|
22998
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
23011
22999
|
* - `returnValue`: What the dialog closed with, the way `<dialog>` reports it.
|
|
23012
23000
|
*
|
|
23013
23001
|
* **The whole point of a `<dialog>` returning a value is lost behind a shadow
|
|
@@ -23208,7 +23196,7 @@ export type CustomElements = {
|
|
|
23208
23196
|
* `--donut-chart-stroke`, which is a number a rule can do sums with where the
|
|
23209
23197
|
* word is not. Reflected, it wrote a value onto every host a script had set
|
|
23210
23198
|
* it on for nothing to read. `sweep` beside it is the converse and reflects,
|
|
23211
|
-
* because
|
|
23199
|
+
* because the styled sheet selects on it.
|
|
23212
23200
|
* - `sweep`: How much of the circle the whole occupies.
|
|
23213
23201
|
*
|
|
23214
23202
|
* Absent is the full turn. `half` is a semi-donut: the same shares spread
|
|
@@ -23386,8 +23374,8 @@ export type CustomElements = {
|
|
|
23386
23374
|
* Opened declaratively with the platform's invoker attributes:
|
|
23387
23375
|
*
|
|
23388
23376
|
* ```html
|
|
23389
|
-
* <helix-button commandfor="nav" command="--toggle">Menu</helix-button>
|
|
23390
|
-
* <helix-drawer id="nav">…</helix-drawer>
|
|
23377
|
+
* <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button>
|
|
23378
|
+
* <helix-headless-drawer id="nav">…</helix-headless-drawer>
|
|
23391
23379
|
* ```
|
|
23392
23380
|
*
|
|
23393
23381
|
* ## Attributes & Properties
|
|
@@ -23418,10 +23406,10 @@ export type CustomElements = {
|
|
|
23418
23406
|
* not, rather than shown or hidden by CSS.
|
|
23419
23407
|
* - `placement`: Which edge the drawer comes from.
|
|
23420
23408
|
*
|
|
23421
|
-
* Unset is `end`,
|
|
23422
|
-
* beside `:host([placement="end"])` rather than as a value written here: a
|
|
23409
|
+
* Unset is `end`, and it stays unset rather than being written down: a
|
|
23423
23410
|
* default assigned to the property would reflect onto every host and put a
|
|
23424
|
-
* `placement="end"` into markup no consumer wrote.
|
|
23411
|
+
* `placement="end"` into markup no consumer wrote. So what this tier
|
|
23412
|
+
* guarantees is the absence, and a sheet selects on it.
|
|
23425
23413
|
* - `open`: Whether the element is open.
|
|
23426
23414
|
*
|
|
23427
23415
|
* One property, not two, so `dialog.open` answers the question anyone
|
|
@@ -23434,7 +23422,7 @@ export type CustomElements = {
|
|
|
23434
23422
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
23435
23423
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
23436
23424
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
23437
|
-
* - `default-open`/`defaultOpen`:
|
|
23425
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
23438
23426
|
* - `returnValue`: What the dialog closed with, the way `<dialog>` reports it.
|
|
23439
23427
|
*
|
|
23440
23428
|
* **The whole point of a `<dialog>` returning a value is lost behind a shadow
|
|
@@ -24304,7 +24292,13 @@ export type CustomElements = {
|
|
|
24304
24292
|
* - `fields`: The fields declared inside this, in the order they were written.
|
|
24305
24293
|
*
|
|
24306
24294
|
* 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.
|
|
24295
|
+
* and threw here, and none while hydrating what one sent.
|
|
24296
|
+
*
|
|
24297
|
+
* By identity rather than by tag. A list of names can only hold the tags this
|
|
24298
|
+
* package knows about, so it misses any third one, which is what subclassing
|
|
24299
|
+
* a headless element produces, and it is also how a headless package learns a
|
|
24300
|
+
* styled tag. `instanceof` answers for every one of them and proves the type
|
|
24301
|
+
* the signature claims. (property only) (readonly)
|
|
24308
24302
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
24309
24303
|
*
|
|
24310
24304
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -24541,12 +24535,12 @@ export type CustomElements = {
|
|
|
24541
24535
|
* `FilterField` already plays on its own children.
|
|
24542
24536
|
*
|
|
24543
24537
|
* **It can suggest what to type next, and deciding what to suggest is still the
|
|
24544
|
-
* consumer's.** Slot
|
|
24545
|
-
*
|
|
24546
|
-
*
|
|
24547
|
-
*
|
|
24548
|
-
*
|
|
24549
|
-
*
|
|
24538
|
+
* consumer's.** Slot options into `suggestions` and the field shows them, moves
|
|
24539
|
+
* through them with the arrows, and lets Enter press one; the option fires its
|
|
24540
|
+
* own `helix-select` and the consumer decides what choosing meant. Keys before
|
|
24541
|
+
* a colon and values after it are the same panel with different contents, and
|
|
24542
|
+
* `readFilterText` is exported for a consumer narrowing that panel against what
|
|
24543
|
+
* a reader has half typed.
|
|
24550
24544
|
*
|
|
24551
24545
|
* **The panel opens when there is something in it and closes when there is
|
|
24552
24546
|
* not**, rather than on a choice. A reader who picks a key wants its values
|
|
@@ -24554,20 +24548,19 @@ export type CustomElements = {
|
|
|
24554
24548
|
* `selectionStart` and `setSelectionRange` to write a completion back and put
|
|
24555
24549
|
* the caret after it, or the next parse reads the wrong term.
|
|
24556
24550
|
*
|
|
24557
|
-
* **Three things here have three different owners
|
|
24558
|
-
* controlled property.**
|
|
24551
|
+
* **Three things here have three different owners.**
|
|
24559
24552
|
*
|
|
24560
|
-
* `value` is the text
|
|
24561
|
-
*
|
|
24562
|
-
*
|
|
24563
|
-
*
|
|
24553
|
+
* `value` is the text: the reader types, the element applies it, and `input`
|
|
24554
|
+
* says so. **Writing `value` does not take that over.** It is a seed and a
|
|
24555
|
+
* correction, so a consumer who sets it and then expects the field to hold
|
|
24556
|
+
* still will watch the next keystroke overwrite them.
|
|
24564
24557
|
* Ownership is taken by refusing `helix-before-change` and writing the value
|
|
24565
24558
|
* you want, which is the same shape every field in this library uses and is
|
|
24566
24559
|
* worth saying out loud here because the property looks like React's.
|
|
24567
24560
|
* `default-value` seeds the field without claiming anything.
|
|
24568
24561
|
*
|
|
24569
|
-
* `open` is the suggestions panel, and it is the ordinary
|
|
24570
|
-
*
|
|
24562
|
+
* `open` is the suggestions panel, and it is the ordinary pair: refuse
|
|
24563
|
+
* `helix-before-open` or `helix-before-close` to take the decision, and
|
|
24571
24564
|
* `default-open` to seed it.
|
|
24572
24565
|
*
|
|
24573
24566
|
* The tokens are neither, because they are not state. They are the consumer's
|
|
@@ -24606,7 +24599,7 @@ export type CustomElements = {
|
|
|
24606
24599
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
24607
24600
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
24608
24601
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
24609
|
-
* - `default-open`/`defaultOpen`:
|
|
24602
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
24610
24603
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
24611
24604
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
24612
24605
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -24844,11 +24837,12 @@ export type CustomElements = {
|
|
|
24844
24837
|
* would give.
|
|
24845
24838
|
*
|
|
24846
24839
|
* **The element's own text is read as a fallback, and only in a browser.**
|
|
24847
|
-
* `<helix-
|
|
24848
|
-
*
|
|
24849
|
-
*
|
|
24850
|
-
*
|
|
24851
|
-
*
|
|
24840
|
+
* `<helix-headless-format-date
|
|
24841
|
+
* elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
24842
|
+
* that reads best in markup, and it cannot be the only one: measured against
|
|
24843
|
+
* Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
24844
|
+
* `querySelector` are all `undefined` there, so a server has no way to see
|
|
24845
|
+
* it. An element rendered on a server needs the attribute; one rendered in a
|
|
24852
24846
|
* browser may use either.
|
|
24853
24847
|
* - `day`: How the day of the month is written, where a date is shown.
|
|
24854
24848
|
* - `elapsed`: Show how long ago it was, compactly, instead of the date.
|
|
@@ -24948,12 +24942,12 @@ export type CustomElements = {
|
|
|
24948
24942
|
* consumer has to keep by hand, and the one number a summary is told to trust
|
|
24949
24943
|
* is the one it gets wrong.
|
|
24950
24944
|
*
|
|
24951
|
-
* The strip measures itself, so
|
|
24952
|
-
*
|
|
24953
|
-
*
|
|
24954
|
-
*
|
|
24955
|
-
*
|
|
24956
|
-
*
|
|
24945
|
+
* The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
24946
|
+
* own and these two are the estimate used until the first measurement lands.
|
|
24947
|
+
* Writing the attribute pins the value and stops the measurement being
|
|
24948
|
+
* consulted, which is what a container query or a transition on the cell size
|
|
24949
|
+
* wants, where what is drawn this frame is not what the arithmetic should
|
|
24950
|
+
* plan around.
|
|
24957
24951
|
*
|
|
24958
24952
|
* Zero turns the dropping off altogether, which is right for a strip in a
|
|
24959
24953
|
* container that cannot get narrow.
|
|
@@ -25097,11 +25091,6 @@ export type CustomElements = {
|
|
|
25097
25091
|
*
|
|
25098
25092
|
* CSS variables available for styling the component.
|
|
25099
25093
|
*
|
|
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
25094
|
* - `--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
25095
|
* - `--heatmap-tone`: The tone of the cell this is set on. Written by the component, read by the sheet that paints. (default: `undefined`)
|
|
25107
25096
|
* - `--heatmap-tone-1`: The quietest step of the magnitude ramp, reached by `tones="1 …"`. (default: `undefined`)
|
|
@@ -25185,7 +25174,7 @@ export type CustomElements = {
|
|
|
25185
25174
|
* the same way `label` becomes `aria-label` in there.
|
|
25186
25175
|
*
|
|
25187
25176
|
* ```html
|
|
25188
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
25177
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
25189
25178
|
* ```
|
|
25190
25179
|
*
|
|
25191
25180
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -25502,10 +25491,10 @@ export type CustomElements = {
|
|
|
25502
25491
|
* **Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
25503
25492
|
* state, so reflecting it puts the element's own bookkeeping into the markup
|
|
25504
25493
|
* a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
25505
|
-
* hydration mismatch, and a
|
|
25506
|
-
*
|
|
25507
|
-
*
|
|
25508
|
-
*
|
|
25494
|
+
* hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
25495
|
+
* declares that a picture has arrived which this element has never fetched.
|
|
25496
|
+
* The `data-` name is the library's answer to both, being a name a re-parse
|
|
25497
|
+
* cannot mistake for a declaration, and it is what `data-closed` on
|
|
25509
25498
|
* `Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
25510
25499
|
* which puts this on the safe side of hydration: a fact that can be true on
|
|
25511
25500
|
* the *first* update mirrors to a custom state instead, which is what
|
|
@@ -25618,10 +25607,10 @@ export type CustomElements = {
|
|
|
25618
25607
|
* **The attribute is `readonly`, which is the platform's spelling.** A
|
|
25619
25608
|
* camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
25620
25609
|
* 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`.
|
|
25610
|
+
* warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
25611
|
+
* HTML types; against `read-only` it parses to no property at all, and the
|
|
25612
|
+
* field stays editable with no error anywhere. Measured on the dash-cased
|
|
25613
|
+
* form, `readOnly` came back `false`.
|
|
25625
25614
|
* - `reveal`: Whether a password field offers a toggle that shows what was typed.
|
|
25626
25615
|
*
|
|
25627
25616
|
* Ignored on every other type. A reveal on an email field would be a button
|
|
@@ -25635,9 +25624,9 @@ export type CustomElements = {
|
|
|
25635
25624
|
*
|
|
25636
25625
|
* **Not reflected.** Reflection exists so a selector can reach a value, and
|
|
25637
25626
|
* 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`.
|
|
25627
|
+
* `type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
25628
|
+
* attribute no consumer's markup has, which is the fault the area rules write
|
|
25629
|
+
* up under `Button`'s `href`, `target` and `rel`.
|
|
25641
25630
|
*
|
|
25642
25631
|
* Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
25643
25632
|
* it as a property binding, which is what makes the keyboard and the
|
|
@@ -26083,8 +26072,7 @@ export type CustomElements = {
|
|
|
26083
26072
|
* over something busy. `triangle` points along the axis and reads as "and
|
|
26084
26073
|
* onward" rather than as a second claim about the data.
|
|
26085
26074
|
*
|
|
26086
|
-
* The shapes come from
|
|
26087
|
-
* `helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
26075
|
+
* The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
26088
26076
|
* the set is identical wherever one appears. **Which is why every value is
|
|
26089
26077
|
* named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
26090
26078
|
* undocumented until the cohort before this one; this family reads the same
|
|
@@ -26349,10 +26337,10 @@ export type CustomElements = {
|
|
|
26349
26337
|
* - `label`: Accessible name for the set.
|
|
26350
26338
|
* - `type`: Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
26351
26339
|
*
|
|
26352
|
-
* Reflected, because this is one of the things a stylesheet selects on
|
|
26353
|
-
*
|
|
26354
|
-
*
|
|
26355
|
-
*
|
|
26340
|
+
* Reflected, because this is one of the things a stylesheet selects on, each
|
|
26341
|
+
* value mapping to a `list-style-type`. The platform's spellings rather than
|
|
26342
|
+
* the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
26343
|
+
* consumer would have written on an `<ol>`.
|
|
26356
26344
|
*
|
|
26357
26345
|
* **`start` and `reversed` are both absent and neither can be done here.**
|
|
26358
26346
|
* This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -26805,7 +26793,7 @@ export type CustomElements = {
|
|
|
26805
26793
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
26806
26794
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
26807
26795
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
26808
|
-
* - `default-open`/`defaultOpen`:
|
|
26796
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
26809
26797
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
26810
26798
|
*
|
|
26811
26799
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -27089,7 +27077,7 @@ export type CustomElements = {
|
|
|
27089
27077
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
27090
27078
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
27091
27079
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
27092
|
-
* - `default-open`/`defaultOpen`:
|
|
27080
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
27093
27081
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
27094
27082
|
*
|
|
27095
27083
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -27429,7 +27417,7 @@ export type CustomElements = {
|
|
|
27429
27417
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
27430
27418
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
27431
27419
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
27432
|
-
* - `default-open`/`defaultOpen`:
|
|
27420
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
27433
27421
|
* - `isNotificationGroup`: What this is, for the feed above it to recognize without importing it.
|
|
27434
27422
|
*
|
|
27435
27423
|
* The same seam `Notification` uses: a root reads a child's markers rather
|
|
@@ -27511,9 +27499,9 @@ export type CustomElements = {
|
|
|
27511
27499
|
>;
|
|
27512
27500
|
|
|
27513
27501
|
/**
|
|
27514
|
-
* A notification is a toast that did not go away. `
|
|
27515
|
-
*
|
|
27516
|
-
*
|
|
27502
|
+
* A notification is a toast that did not go away. `Toast` is deliberately the
|
|
27503
|
+
* opposite of this: a live region whose items carry a `duration` and whose root
|
|
27504
|
+
* never creates or destroys anything. What makes this its own family is the
|
|
27517
27505
|
* state each item carries rather than the arrangement it sits in: read and
|
|
27518
27506
|
* unread, a timestamp that has to stay correct, and an action a reader can take
|
|
27519
27507
|
* later.
|
|
@@ -27525,9 +27513,9 @@ export type CustomElements = {
|
|
|
27525
27513
|
* reader wants exactly one of them at a time: the time while they are scanning,
|
|
27526
27514
|
* and what they can do about it once they have stopped on a row.
|
|
27527
27515
|
*
|
|
27528
|
-
* **The timestamp is `
|
|
27529
|
-
*
|
|
27530
|
-
*
|
|
27516
|
+
* **The timestamp is `FormatDate`**, which is where the reading, the `<time
|
|
27517
|
+
* datetime>` and the shared timer now live. It was implemented here, and a
|
|
27518
|
+
* component that formats a date is not a fact about notifications: Chat wanted
|
|
27531
27519
|
* the same thing and had its own copy of half of it.
|
|
27532
27520
|
*
|
|
27533
27521
|
* **Read state is reported, not invented.** Marking something read is usually a
|
|
@@ -27553,10 +27541,10 @@ export type CustomElements = {
|
|
|
27553
27541
|
*
|
|
27554
27542
|
* **Not reflected.** Unread is a visual state, which is why the four mixins
|
|
27555
27543
|
* 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.
|
|
27544
|
+
* `<helix-headless-notification default-read>` comes back from a server
|
|
27545
|
+
* without `read` and would gain it on the first update, which React reports
|
|
27546
|
+
* as a hydration mismatch, and which a copy of the serialized element
|
|
27547
|
+
* re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
27560
27548
|
* `hydration.dom.spec.ts` holds it.
|
|
27561
27549
|
* - `default-read`/`defaultRead`: State to open with, where nothing declared one.
|
|
27562
27550
|
* - `locale`: Locale for the timestamp.
|
|
@@ -27748,7 +27736,7 @@ export type CustomElements = {
|
|
|
27748
27736
|
*
|
|
27749
27737
|
* Areas where markup can be added to the component.
|
|
27750
27738
|
*
|
|
27751
|
-
* - `(default)`: The notifications
|
|
27739
|
+
* - `(default)`: The notifications.
|
|
27752
27740
|
* - `footer`: Below the list, for a link to everything.
|
|
27753
27741
|
* - `header`: Above the list, for a title and the mark-all control.
|
|
27754
27742
|
*
|
|
@@ -28279,11 +28267,10 @@ export type CustomElements = {
|
|
|
28279
28267
|
* - `alternate`: A second destination for this row, taken with the modifier held.
|
|
28280
28268
|
*
|
|
28281
28269
|
* **An attribute rather than a second row, which is the whole point.** A
|
|
28282
|
-
* palette
|
|
28283
|
-
*
|
|
28284
|
-
*
|
|
28285
|
-
*
|
|
28286
|
-
* second belongs beside it.
|
|
28270
|
+
* palette that offered every component a reference page and a sandbox as
|
|
28271
|
+
* separate entries would be twice as long, and one earns its keep by getting
|
|
28272
|
+
* a reader to one thing in three keystrokes. The row already carries the
|
|
28273
|
+
* first destination, so the second belongs beside it.
|
|
28287
28274
|
*
|
|
28288
28275
|
* Declared here and acted on by whatever owns the list, the same division
|
|
28289
28276
|
* selection already uses: an option says what it is and the listbox decides
|
|
@@ -28338,7 +28325,7 @@ export type CustomElements = {
|
|
|
28338
28325
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
28339
28326
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
28340
28327
|
* 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"
|
|
28328
|
+
* this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
28342
28329
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
28343
28330
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
28344
28331
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -28556,8 +28543,8 @@ export type CustomElements = {
|
|
|
28556
28543
|
/**
|
|
28557
28544
|
* **The component is the truncation.** Given a page and a total it works out
|
|
28558
28545
|
* 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.
|
|
28546
|
+
* than composed: `<helix-headless-pagination page="4" pages="12">` rather than
|
|
28547
|
+
* twelve slotted children a consumer keeps in step with their own query.
|
|
28561
28548
|
*
|
|
28562
28549
|
* **The width does not change as you page.** The run around the current page is
|
|
28563
28550
|
* `siblings` either side, and grows to absorb a gap slot at a boundary, so the
|
|
@@ -28763,7 +28750,8 @@ export type CustomElements = {
|
|
|
28763
28750
|
* way, through `ElementInternals.states` rather than an attribute the server
|
|
28764
28751
|
* never wrote.
|
|
28765
28752
|
*
|
|
28766
|
-
* `value` is the
|
|
28753
|
+
* `value` is the size the control holds and `default-value` is what the markup
|
|
28754
|
+
* declared.
|
|
28767
28755
|
* Changing it announces `helix-before-change`; re-querying and moving back to
|
|
28768
28756
|
* page one is the consumer's, because only they know whether the reader's
|
|
28769
28757
|
* position should survive it.
|
|
@@ -28995,10 +28983,10 @@ export type CustomElements = {
|
|
|
28995
28983
|
* marked letters wants `text`, which judges nothing.
|
|
28996
28984
|
*
|
|
28997
28985
|
* **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.
|
|
28986
|
+
* `type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
28987
|
+
* attribute no consumer's markup had. The area rules carry the sentence
|
|
28988
|
+
* "reflect only what CSS selects on". The real inputs take it as a binding,
|
|
28989
|
+
* which is what makes the keyboard follow.
|
|
29002
28990
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
29003
28991
|
* - `value`: What the control holds now, and what its form submits.
|
|
29004
28992
|
*
|
|
@@ -29187,7 +29175,7 @@ export type CustomElements = {
|
|
|
29187
29175
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
29188
29176
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
29189
29177
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
29190
|
-
* - `default-open`/`defaultOpen`:
|
|
29178
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
29191
29179
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
29192
29180
|
*
|
|
29193
29181
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -29741,7 +29729,7 @@ export type CustomElements = {
|
|
|
29741
29729
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
29742
29730
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
29743
29731
|
* 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"
|
|
29732
|
+
* this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
29745
29733
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
29746
29734
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
29747
29735
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -30399,7 +30387,7 @@ export type CustomElements = {
|
|
|
30399
30387
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
30400
30388
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
30401
30389
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
30402
|
-
* - `default-open`/`defaultOpen`:
|
|
30390
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
30403
30391
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
30404
30392
|
* - `value`: What the control holds now, and what its form submits.
|
|
30405
30393
|
*
|
|
@@ -31190,11 +31178,10 @@ export type CustomElements = {
|
|
|
31190
31178
|
* mean defining what a dial with a submenu in it does.
|
|
31191
31179
|
*
|
|
31192
31180
|
* **The trigger is a control the consumer slots**, and the floating action
|
|
31193
|
-
* button is the usual one: `
|
|
31194
|
-
*
|
|
31195
|
-
* `
|
|
31196
|
-
*
|
|
31197
|
-
* layer.
|
|
31181
|
+
* button is the usual one: `IconButton` with `shape="circle"` and `raised`.
|
|
31182
|
+
* There is no `helix-fab`, because it would re-declare `emphasis`, `tone`,
|
|
31183
|
+
* `label` and a size around a control that already has all four. A round raised
|
|
31184
|
+
* button is a shape, and where it sits is `data-dock` in the base layer.
|
|
31198
31185
|
*
|
|
31199
31186
|
* **Nothing is reserved from the keyboard.** A menu that drills has to keep the
|
|
31200
31187
|
* horizontal pair for going in and coming back; a dial goes nowhere, so all four
|
|
@@ -31224,7 +31211,7 @@ export type CustomElements = {
|
|
|
31224
31211
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
31225
31212
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
31226
31213
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
31227
|
-
* - `default-open`/`defaultOpen`:
|
|
31214
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
31228
31215
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
31229
31216
|
*
|
|
31230
31217
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -31553,9 +31540,9 @@ export type CustomElements = {
|
|
|
31553
31540
|
* The row directions set them side by side, for a figure in a line of text or
|
|
31554
31541
|
* a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
31555
31542
|
*
|
|
31556
|
-
* A property rather than a `
|
|
31557
|
-
*
|
|
31558
|
-
*
|
|
31543
|
+
* A property rather than a `Flex` around it, because the unit has to stay on
|
|
31544
|
+
* the value's baseline whichever way the pair goes, and only this element
|
|
31545
|
+
* knows which of its children the unit belongs to.
|
|
31559
31546
|
*
|
|
31560
31547
|
* **Optional rather than defaulted to `column`, which is not a style
|
|
31561
31548
|
* preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -31652,7 +31639,7 @@ export type CustomElements = {
|
|
|
31652
31639
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
31653
31640
|
* tab, and `default-active` is how markup says where to start without
|
|
31654
31641
|
* naming the current one.
|
|
31655
|
-
* - `default-active`/`defaultActive`:
|
|
31642
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
31656
31643
|
*
|
|
31657
31644
|
* Ignored once `active` is written.
|
|
31658
31645
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -31688,7 +31675,7 @@ export type CustomElements = {
|
|
|
31688
31675
|
*
|
|
31689
31676
|
* Areas where markup can be added to the component.
|
|
31690
31677
|
*
|
|
31691
|
-
* - `(default)`: The steps
|
|
31678
|
+
* - `(default)`: The steps.
|
|
31692
31679
|
*
|
|
31693
31680
|
* ## Methods
|
|
31694
31681
|
*
|
|
@@ -31715,9 +31702,9 @@ export type CustomElements = {
|
|
|
31715
31702
|
|
|
31716
31703
|
/**
|
|
31717
31704
|
* **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
|
-
*
|
|
31705
|
+
* decoration, so wrapping it would add hit area and no meaning. It is `Button`
|
|
31706
|
+
* rather than a `<button>` this element resets: the hover wash, the focus ring
|
|
31707
|
+
* and the disabled treatment are decisions the button carries.
|
|
31721
31708
|
*
|
|
31722
31709
|
* **It says nothing about where a reader may go.** Every step is pressable and
|
|
31723
31710
|
* announces itself with `helix-select`; refusing the ones ahead is `disabled`,
|
|
@@ -31770,7 +31757,7 @@ export type CustomElements = {
|
|
|
31770
31757
|
* Areas where markup can be added to the component.
|
|
31771
31758
|
*
|
|
31772
31759
|
* - `(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
|
|
31760
|
+
* - `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
31761
|
* - `description`: A line under the name, for what the stage is for.
|
|
31775
31762
|
* - `marker`: Replaces the number, or the check a complete step shows.
|
|
31776
31763
|
*
|
|
@@ -31787,7 +31774,7 @@ export type CustomElements = {
|
|
|
31787
31774
|
* - `body`: The name and its description.
|
|
31788
31775
|
* - `content`: What the stage holds, while it is open.
|
|
31789
31776
|
* - `description`: The line under it.
|
|
31790
|
-
* - `label`: The step's name, which is a
|
|
31777
|
+
* - `label`: The step's name, which is a control.
|
|
31791
31778
|
* - `label-button`: The inner control.
|
|
31792
31779
|
* - `lead`: The half line arriving from the step before.
|
|
31793
31780
|
* - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
|
|
@@ -31834,7 +31821,7 @@ export type CustomElements = {
|
|
|
31834
31821
|
* Not reflected: the attribute is the consumer's input and stays as they
|
|
31835
31822
|
* wrote it, and `:state(checked)` carries the resolved state for
|
|
31836
31823
|
* stylesheets.
|
|
31837
|
-
* - `default-checked`/`defaultChecked`:
|
|
31824
|
+
* - `default-checked`/`defaultChecked`: Whether the markup declared it checked, which is where a reset returns to.
|
|
31838
31825
|
* - `feedback`: What is wrong, in the reader's words rather than the browser's.
|
|
31839
31826
|
* - `hint`: Help under the control, shown while there is nothing wrong.
|
|
31840
31827
|
* - `label`: The accessible name, and the fallback for the `label` slot.
|
|
@@ -32047,23 +32034,23 @@ export type CustomElements = {
|
|
|
32047
32034
|
* the table has another track; remove one and it does not. That is what ties
|
|
32048
32035
|
* the two together, and a table-level track list on its own does not: a list
|
|
32049
32036
|
* 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
|
-
*
|
|
32037
|
+
* drawing the whole table as one column. `Table`'s `columns` is dealt out a
|
|
32038
|
+
* track at a time against the columns declared under it, so a heading among the
|
|
32039
|
+
* widths costs its own column a width and no more, and a list longer or shorter
|
|
32040
|
+
* than the columns is trimmed or shared rather than being a second count of
|
|
32041
|
+
* them. A column's own `width` wins over the track in its place.
|
|
32055
32042
|
*
|
|
32056
32043
|
* **It is also where every per-column fact goes**, which is the reason
|
|
32057
|
-
* `
|
|
32058
|
-
*
|
|
32059
|
-
*
|
|
32044
|
+
* `DataTable` needs no column config object. `field` names the key the cell
|
|
32045
|
+
* reads, `sortable` says a reader may reorder by it, `align` says which edge
|
|
32046
|
+
* the values line up against, and `cell` takes a function for anything the
|
|
32060
32047
|
* field alone cannot express. The schema is markup and the data is a property:
|
|
32061
32048
|
* a schema is small, declarative, and something a reader should be able to see
|
|
32062
32049
|
* in the HTML, and data is large and windowed.
|
|
32063
32050
|
*
|
|
32064
32051
|
* **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
|
-
*
|
|
32052
|
+
* is identified by a flag rather than by `instanceof`, so a `TableColumn` works
|
|
32053
|
+
* inside either without the two roots sharing anything else.
|
|
32067
32054
|
*
|
|
32068
32055
|
* **It generates no box of its own**, the same as a row: the heading is a grid
|
|
32069
32056
|
* item of the table, so it lines up with the cells under it rather than sitting
|
|
@@ -32073,10 +32060,10 @@ export type CustomElements = {
|
|
|
32073
32060
|
* both, so the columns after it keep their own widths and every row keeps its
|
|
32074
32061
|
* cells under their headings. `hidden="until-found"` keeps its track, the
|
|
32075
32062
|
* heading being left drawn, as every Helix element leaves one with that value.
|
|
32076
|
-
* `
|
|
32077
|
-
*
|
|
32078
|
-
*
|
|
32079
|
-
*
|
|
32063
|
+
* `DataTable` draws the cells, so it leaves out the ones under a hidden column.
|
|
32064
|
+
* A `Table`'s cells are markup the consumer wrote, so hide them with the
|
|
32065
|
+
* column, as removing a column means removing its cells: a row with a cell more
|
|
32066
|
+
* than the table has tracks wraps into the next.
|
|
32080
32067
|
*
|
|
32081
32068
|
* **A heading that does something holds a control that does it.** The host is
|
|
32082
32069
|
* the column header, and a header is not focusable, so a sortable heading is a
|
|
@@ -32092,15 +32079,15 @@ export type CustomElements = {
|
|
|
32092
32079
|
*
|
|
32093
32080
|
* - `align`: Which edge the values line up against.
|
|
32094
32081
|
*
|
|
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.
|
|
32082
|
+
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
32083
|
+
* sit above each other. Left unset the cell inherits the table's own
|
|
32084
|
+
* alignment, which is `start` for text in either writing direction.
|
|
32085
|
+
* `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
32086
|
+
* consumer wrote, so the table writes nothing onto them: it publishes the
|
|
32087
|
+
* edge to each cell under this column as `--table-cell-align`, which
|
|
32088
|
+
* `@fusion.dev/helix` reads. The heading is this element's own, and
|
|
32089
|
+
* `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
32090
|
+
* inline end, so in a right-to-left table it is the left.
|
|
32104
32091
|
*
|
|
32105
32092
|
* **Reflected, because the heading is drawn by a stylesheet and has no other
|
|
32106
32093
|
* way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -32143,8 +32130,8 @@ export type CustomElements = {
|
|
|
32143
32130
|
* - `width`: The track this column takes, as CSS.
|
|
32144
32131
|
*
|
|
32145
32132
|
* 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
|
-
*
|
|
32133
|
+
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
32134
|
+
* its place in a `Table`'s `columns`, where that table sets one, and
|
|
32148
32135
|
* otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
32149
32136
|
* Set here, it wins over that list, which is what lets a reader resize a
|
|
32150
32137
|
* column in a table that set one.
|
|
@@ -32269,15 +32256,14 @@ export type CustomElements = {
|
|
|
32269
32256
|
*
|
|
32270
32257
|
* - `columns`: The column widths as one track list, written once on the table.
|
|
32271
32258
|
*
|
|
32272
|
-
* With `
|
|
32273
|
-
*
|
|
32274
|
-
*
|
|
32275
|
-
*
|
|
32276
|
-
*
|
|
32277
|
-
*
|
|
32278
|
-
*
|
|
32279
|
-
*
|
|
32280
|
-
* down to one column.
|
|
32259
|
+
* With `TableColumn` children, each track sizes the column in its place, a
|
|
32260
|
+
* hidden column counted, so hiding one takes its track with it and the rest
|
|
32261
|
+
* keep theirs. The columns decide how many tracks there are and this list
|
|
32262
|
+
* only how wide: a track past the last column is dropped, and a column past
|
|
32263
|
+
* the last track shares what is left. With no columns declared it is the
|
|
32264
|
+
* whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
32265
|
+
* is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
32266
|
+
* its column at the default rather than taking the table down to one column.
|
|
32281
32267
|
*
|
|
32282
32268
|
* **A column's own `width` wins over its track here.** The width is written
|
|
32283
32269
|
* on the column it sizes, which is the more particular statement, and it is
|
|
@@ -32291,13 +32277,11 @@ export type CustomElements = {
|
|
|
32291
32277
|
* whole answer: a table given one lays its grid out in the first paint, and a
|
|
32292
32278
|
* table sized only by its columns is one track wide until it upgrades.
|
|
32293
32279
|
*
|
|
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.
|
|
32280
|
+
* **Data Table has none of this, and should not.** Its columns are its schema
|
|
32281
|
+
* rather than an option, so there is always a column to write a `width` on
|
|
32282
|
+
* and a list here would be a second way to say what that says. This table's
|
|
32283
|
+
* cells are markup, and a table written as rows of cells with no column
|
|
32284
|
+
* declared in it has nowhere else to be sized from.
|
|
32301
32285
|
* - `label`: Accessible name for the table.
|
|
32302
32286
|
* - `empty-text`/`emptyText`: What is said where there are none, and none are coming.
|
|
32303
32287
|
* - `loading`: Whether the rows are still on their way.
|
|
@@ -32338,7 +32322,7 @@ export type CustomElements = {
|
|
|
32338
32322
|
*
|
|
32339
32323
|
* CSS variables available for styling the component.
|
|
32340
32324
|
*
|
|
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.
|
|
32325
|
+
* - `--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
32326
|
*
|
|
32343
32327
|
* ## CSS Parts
|
|
32344
32328
|
*
|
|
@@ -32360,10 +32344,10 @@ export type CustomElements = {
|
|
|
32360
32344
|
>;
|
|
32361
32345
|
|
|
32362
32346
|
/**
|
|
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.
|
|
32347
|
+
* The row renders its cells straight through and lays out none of them, so a
|
|
32348
|
+
* sheet can take them into the table's own grid and every column lines up
|
|
32349
|
+
* across every row. The row still exists as an element, which is what a
|
|
32350
|
+
* `<table>` gives away when its cells are laid out by the table algorithm.
|
|
32367
32351
|
*
|
|
32368
32352
|
* ## Attributes & Properties
|
|
32369
32353
|
*
|
|
@@ -32515,7 +32499,7 @@ export type CustomElements = {
|
|
|
32515
32499
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
32516
32500
|
* tab, and `default-active` is how markup says where to start without
|
|
32517
32501
|
* naming the current one.
|
|
32518
|
-
* - `default-active`/`defaultActive`:
|
|
32502
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
32519
32503
|
*
|
|
32520
32504
|
* Ignored once `active` is written.
|
|
32521
32505
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -32964,10 +32948,10 @@ export type CustomElements = {
|
|
|
32964
32948
|
>;
|
|
32965
32949
|
|
|
32966
32950
|
/**
|
|
32967
|
-
* **The list is `
|
|
32951
|
+
* **The list is `TimePicker`, not a second one written here.** It is worth
|
|
32968
32952
|
* having on its own, flat in a settings pane with nothing to open, and this
|
|
32969
32953
|
* element is the field, the overlay and the form. Exactly the arrangement Input
|
|
32970
|
-
* Date has with `
|
|
32954
|
+
* Date has with `DatePicker` and Color Input with `ColorPicker`.
|
|
32971
32955
|
*
|
|
32972
32956
|
* **Typed as well as picked, and that is the division the list depends on.** A
|
|
32973
32957
|
* list at a step offers the times a product actually has, and the field is how a
|
|
@@ -32998,8 +32982,8 @@ export type CustomElements = {
|
|
|
32998
32982
|
*
|
|
32999
32983
|
* Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
33000
32984
|
* number, and both are carried as one comma-separated value, which is what a
|
|
33001
|
-
* form submits. `
|
|
33002
|
-
* why a wheel cannot do either.
|
|
32985
|
+
* form submits. `TimePicker` carries the longer note on the interaction and
|
|
32986
|
+
* on why a wheel cannot do either.
|
|
33003
32987
|
* - `placeholder`: What the field says before a time is in it.
|
|
33004
32988
|
* - `step`: How far apart the offered times are, in minutes.
|
|
33005
32989
|
* - `time-style`/`timeStyle`: Whether the field writes the time out, or holds the value as it is.
|
|
@@ -33014,7 +32998,7 @@ export type CustomElements = {
|
|
|
33014
32998
|
* `list` offers whole times, which is what a product with slots or opening
|
|
33015
32999
|
* hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
33016
33000
|
* the locale uses one, which is the only way to reach `23:45` without
|
|
33017
|
-
* scrolling most of a day. `
|
|
33001
|
+
* scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
33018
33002
|
*
|
|
33019
33003
|
* **Optional rather than defaulted, which is not a style preference.** A
|
|
33020
33004
|
* reflecting property with a default writes its attribute onto every host the
|
|
@@ -33045,7 +33029,7 @@ export type CustomElements = {
|
|
|
33045
33029
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
33046
33030
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
33047
33031
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
33048
|
-
* - `default-open`/`defaultOpen`:
|
|
33032
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
33049
33033
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
33050
33034
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
33051
33035
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -33258,8 +33242,8 @@ export type CustomElements = {
|
|
|
33258
33242
|
|
|
33259
33243
|
/**
|
|
33260
33244
|
* **A list rather than three wheels**, and the reason is what a list already
|
|
33261
|
-
* is. `
|
|
33262
|
-
*
|
|
33245
|
+
* is. `Listbox` brings the keyboard, the typeahead, the scroll into view and
|
|
33246
|
+
* the announcement of a set of options, and a time at a step is a set of
|
|
33263
33247
|
* options. Three little wheels for hours, minutes and a meridiem are three
|
|
33264
33248
|
* controls to build, three to test, and a tab stop each for something a reader
|
|
33265
33249
|
* answers once.
|
|
@@ -33320,7 +33304,7 @@ export type CustomElements = {
|
|
|
33320
33304
|
*
|
|
33321
33305
|
* Absent is one. `range` holds a start and an end with everything between
|
|
33322
33306
|
* them shown as part of the answer, `multiple` holds any number, and both are
|
|
33323
|
-
* carried as one comma-separated value: the same shape `
|
|
33307
|
+
* carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
33324
33308
|
* because it is the same question asked of a different unit.
|
|
33325
33309
|
*
|
|
33326
33310
|
* **A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -33869,7 +33853,7 @@ export type CustomElements = {
|
|
|
33869
33853
|
* **Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
33870
33854
|
* defaulting is the pair that writes onto a host: every toast region anybody
|
|
33871
33855
|
* rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
33872
|
-
* consumer's server markup does not have.
|
|
33856
|
+
* consumer's server markup does not have. A sheet carries the resting
|
|
33873
33857
|
* arrangement in its own `:host` rule and the selectors describe only the
|
|
33874
33858
|
* departures, which is what `orientation` does.
|
|
33875
33859
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -33903,7 +33887,7 @@ export type CustomElements = {
|
|
|
33903
33887
|
*
|
|
33904
33888
|
* Areas where markup can be added to the component.
|
|
33905
33889
|
*
|
|
33906
|
-
* - `(default)`: The messages
|
|
33890
|
+
* - `(default)`: The messages.
|
|
33907
33891
|
*
|
|
33908
33892
|
* ## CSS Parts
|
|
33909
33893
|
*
|
|
@@ -34133,11 +34117,11 @@ export type CustomElements = {
|
|
|
34133
34117
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
34134
34118
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
34135
34119
|
* 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.
|
|
34120
|
+
* this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
34121
|
+
* value="light" selected>` reported `defaultSelected` as `false` both from
|
|
34122
|
+
* parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
34123
|
+
* every way a consumer writes one. The snapshot could only ever be true for
|
|
34124
|
+
* an element already in the document when `customElements.define` ran.
|
|
34141
34125
|
*
|
|
34142
34126
|
* Nothing overwrites it either, which is what makes reading it late correct
|
|
34143
34127
|
* rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -34293,8 +34277,8 @@ export type CustomElements = {
|
|
|
34293
34277
|
* the ordinary way:
|
|
34294
34278
|
*
|
|
34295
34279
|
* ```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>
|
|
34280
|
+
* <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button>
|
|
34281
|
+
* <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip>
|
|
34298
34282
|
* ```
|
|
34299
34283
|
*
|
|
34300
34284
|
* The reference points at *this host*, not at the bubble in its shadow root:
|
|
@@ -34391,7 +34375,7 @@ export type CustomElements = {
|
|
|
34391
34375
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
34392
34376
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
34393
34377
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
34394
|
-
* - `default-open`/`defaultOpen`:
|
|
34378
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
34395
34379
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
34396
34380
|
*
|
|
34397
34381
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -34603,9 +34587,9 @@ export type CustomElements = {
|
|
|
34603
34587
|
* - **When it shows.** Which is `current`, and which the root decides.
|
|
34604
34588
|
*
|
|
34605
34589
|
* What it does not own is the heading, the paragraph, the picture and the
|
|
34606
|
-
* layout. Slot a `
|
|
34607
|
-
*
|
|
34608
|
-
*
|
|
34590
|
+
* layout. Slot a `Card`, or a heading and a line of prose, or anything else.
|
|
34591
|
+
* Fixed `title` and `body` parts would be a component deciding what a tour is
|
|
34592
|
+
* allowed to say.
|
|
34609
34593
|
*
|
|
34610
34594
|
* **The buttons are slot fallback, so the common case costs nothing and the
|
|
34611
34595
|
* uncommon one is possible.** Write nothing and get Back, Next and Skip already
|
|
@@ -34761,7 +34745,7 @@ export type CustomElements = {
|
|
|
34761
34745
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
34762
34746
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
34763
34747
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
34764
|
-
* - `default-open`/`defaultOpen`:
|
|
34748
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
34765
34749
|
* - `level`: Depth from the root, counted by the tree so indentation needs no CSS nesting.
|
|
34766
34750
|
*
|
|
34767
34751
|
* **Read rather than written, and no attribute at all.** The tree counts the
|
|
@@ -34935,7 +34919,7 @@ export type CustomElements = {
|
|
|
34935
34919
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
34936
34920
|
* tab, and `default-active` is how markup says where to start without
|
|
34937
34921
|
* naming the current one.
|
|
34938
|
-
* - `default-active`/`defaultActive`:
|
|
34922
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
34939
34923
|
*
|
|
34940
34924
|
* Ignored once `active` is written.
|
|
34941
34925
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -35316,7 +35300,7 @@ export type CustomElements = {
|
|
|
35316
35300
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
35317
35301
|
* tab, and `default-active` is how markup says where to start without
|
|
35318
35302
|
* naming the current one.
|
|
35319
|
-
* - `default-active`/`defaultActive`:
|
|
35303
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
35320
35304
|
*
|
|
35321
35305
|
* Ignored once `active` is written.
|
|
35322
35306
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -35352,7 +35336,7 @@ export type CustomElements = {
|
|
|
35352
35336
|
* Areas where markup can be added to the component.
|
|
35353
35337
|
*
|
|
35354
35338
|
* - `(default)`: The entries.
|
|
35355
|
-
* - `player`: The
|
|
35339
|
+
* - `player`: The player the entries take turns in.
|
|
35356
35340
|
*
|
|
35357
35341
|
* ## Methods
|
|
35358
35342
|
*
|
|
@@ -35813,7 +35797,7 @@ export type CustomElementsSolidJs = {
|
|
|
35813
35797
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
35814
35798
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
35815
35799
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
35816
|
-
* - `default-open`/`defaultOpen`:
|
|
35800
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
35817
35801
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
35818
35802
|
*
|
|
35819
35803
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -35906,7 +35890,7 @@ export type CustomElementsSolidJs = {
|
|
|
35906
35890
|
* item added a second after render coordinates on its first click.
|
|
35907
35891
|
*
|
|
35908
35892
|
* Items are matched with `instanceof HelixHeadlessAccordionItem`, never by tag
|
|
35909
|
-
* name
|
|
35893
|
+
* name, so this tier does not learn about the styled one.
|
|
35910
35894
|
*
|
|
35911
35895
|
* The keyboard listener is the controller's and is attached on connect, so
|
|
35912
35896
|
* none of it runs on the server, where there is no tree to walk and no events
|
|
@@ -36404,13 +36388,13 @@ export type CustomElementsSolidJs = {
|
|
|
36404
36388
|
* Unset shows all of them, which is what no limit means and is more useful
|
|
36405
36389
|
* than refusing to render.
|
|
36406
36390
|
*
|
|
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.
|
|
36391
|
+
* **Reflected, because the fold is a stylesheet rule and nothing else.** A
|
|
36392
|
+
* sheet hides past the limit one selector per value, as `FOLDS_UP_TO`
|
|
36393
|
+
* describes, so the attribute *is* the mechanism: a `max` that reaches this
|
|
36394
|
+
* property and never reaches the host matches no rule, and every avatar is
|
|
36395
|
+
* drawn beside a count claiming some are hidden. Markup is the safe path and
|
|
36396
|
+
* hides the fault; a script is the broken one, and React takes it for
|
|
36397
|
+
* everyone, assigning a matching property rather than an attribute.
|
|
36414
36398
|
*
|
|
36415
36399
|
* **Optional rather than defaulted, per the rule that a reflected property
|
|
36416
36400
|
* takes no default**: `max = 0` would stamp `max="0"` onto every host that
|
|
@@ -36830,7 +36814,7 @@ export type CustomElementsSolidJs = {
|
|
|
36830
36814
|
* CSS variables available for styling the component.
|
|
36831
36815
|
*
|
|
36832
36816
|
* - `--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
|
|
36817
|
+
* - `--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
36818
|
* - `--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
36819
|
*
|
|
36836
36820
|
* ## CSS Parts
|
|
@@ -36977,12 +36961,12 @@ export type CustomElementsSolidJs = {
|
|
|
36977
36961
|
* - `current`: Whether this item is the page the reader is on.
|
|
36978
36962
|
* - `href`: Where the crumb goes, and nothing where it is the current page.
|
|
36979
36963
|
*
|
|
36980
|
-
* **Optional and reflected, because a stylesheet does select on it.**
|
|
36981
|
-
*
|
|
36982
|
-
*
|
|
36983
|
-
*
|
|
36984
|
-
* the
|
|
36985
|
-
*
|
|
36964
|
+
* **Optional and reflected, because a stylesheet does select on it.** A sheet
|
|
36965
|
+
* writes `:host(:not([href])) [part="link"]` to take the block padding off a
|
|
36966
|
+
* crumb that is not a link, so the attribute is what decides how tall a crumb
|
|
36967
|
+
* is. Unreflected, an `href` set from script reached the property, rendered
|
|
36968
|
+
* the anchor, and left the host looking unlinked: the crumb drew at 20px
|
|
36969
|
+
* where a markup twin drew at 28.
|
|
36986
36970
|
*
|
|
36987
36971
|
* Optional rather than defaulted, which is the general rule that a reflected
|
|
36988
36972
|
* property takes no default: an `href` written onto every host would be a link
|
|
@@ -37222,7 +37206,7 @@ export type CustomElementsSolidJs = {
|
|
|
37222
37206
|
* the same way `label` becomes `aria-label` in there.
|
|
37223
37207
|
*
|
|
37224
37208
|
* ```html
|
|
37225
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
37209
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
37226
37210
|
* ```
|
|
37227
37211
|
*
|
|
37228
37212
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -37504,7 +37488,7 @@ export type CustomElementsSolidJs = {
|
|
|
37504
37488
|
*
|
|
37505
37489
|
* The host is the surface. A wrapper `<div part="container">` would be a second
|
|
37506
37490
|
* box doing nothing the host cannot: the element itself takes the border, the
|
|
37507
|
-
* radius, and the grid, and a consumer styles `
|
|
37491
|
+
* radius, and the grid, and a consumer styles `Card` rather than reaching
|
|
37508
37492
|
* through `::part`. One node instead of two, on every card on the page.
|
|
37509
37493
|
*
|
|
37510
37494
|
* Name the card with `aria-label` or `aria-labelledby`. That is the only
|
|
@@ -37592,12 +37576,11 @@ export type CustomElementsSolidJs = {
|
|
|
37592
37576
|
* - `autoplay`: Whether the carousel advances on its own.
|
|
37593
37577
|
* - `index`: The slide in view, counted from zero.
|
|
37594
37578
|
*
|
|
37595
|
-
* Reading gives the real slide
|
|
37596
|
-
*
|
|
37597
|
-
*
|
|
37598
|
-
* `index`
|
|
37599
|
-
*
|
|
37600
|
-
* and `default-index` says where it starts.
|
|
37579
|
+
* Reading gives the real slide. Writing always applies, the way a script
|
|
37580
|
+
* assigning to a native control does, and is a seed and a correction rather
|
|
37581
|
+
* than a claim of ownership: a consumer who wants the decision refuses the
|
|
37582
|
+
* `helix-select`. `default-index` is where the carousel starts until
|
|
37583
|
+
* something moves it.
|
|
37601
37584
|
*
|
|
37602
37585
|
* The same contract the four mixins carry, written out here rather than
|
|
37603
37586
|
* extracted, because a slide is addressed by position and every one of those
|
|
@@ -37656,13 +37639,13 @@ export type CustomElementsSolidJs = {
|
|
|
37656
37639
|
* **The number is published to the styles rather than enumerated by them**,
|
|
37657
37640
|
* as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
37658
37641
|
* 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
|
-
*
|
|
37642
|
+
* so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
37643
|
+
* above it the pane falls back to one across while this file goes on counting
|
|
37644
|
+
* positions. Measured in Chromium over eight slides against such a sheet, six
|
|
37645
|
+
* across gave three dots, a pane taking the whole track and five slides
|
|
37646
|
+
* reachable only by dragging. Published from here there is no ceiling to
|
|
37647
|
+
* exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
37648
|
+
* correction the same way and for the same reason.
|
|
37666
37649
|
*
|
|
37667
37650
|
* **On the track and not on the host.** A custom property on the host is a
|
|
37668
37651
|
* reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -37687,8 +37670,8 @@ export type CustomElementsSolidJs = {
|
|
|
37687
37670
|
* `auto` track is handed nothing. A count stays for the design that calls for
|
|
37688
37671
|
* exactly three.
|
|
37689
37672
|
*
|
|
37690
|
-
*
|
|
37691
|
-
*
|
|
37673
|
+
* A sheet says how it divides, and the `auto` example here carries the same
|
|
37674
|
+
* three lines for a consumer writing their own.
|
|
37692
37675
|
*
|
|
37693
37676
|
* **A value rather than the resting behavior**, which is what the
|
|
37694
37677
|
* responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -38067,13 +38050,13 @@ export type CustomElementsSolidJs = {
|
|
|
38067
38050
|
*
|
|
38068
38051
|
* **Not reflected, and the default is why.** A reflected property that
|
|
38069
38052
|
* 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.
|
|
38053
|
+
* consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
38054
|
+
* and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
38055
|
+
* hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
38056
|
+
* needs the attribute either, because the one thing that changes with the pin
|
|
38057
|
+
* is the way back, and that is a part inside the shadow tree where a
|
|
38058
|
+
* stylesheet can already reach it. Measured rather than assumed: `label,
|
|
38059
|
+
* pinned` after upgrade against `label` from the server.
|
|
38077
38060
|
* - `threshold`: How near the bottom still counts as being at it, in pixels.
|
|
38078
38061
|
*
|
|
38079
38062
|
* A hook rather than a constant, because the right number depends on how tall
|
|
@@ -38130,7 +38113,7 @@ export type CustomElementsSolidJs = {
|
|
|
38130
38113
|
*
|
|
38131
38114
|
* Areas where markup can be added to the component.
|
|
38132
38115
|
*
|
|
38133
|
-
* - `(default)`: The turns
|
|
38116
|
+
* - `(default)`: The turns.
|
|
38134
38117
|
* - `actions`: Beside the header: what can be done to the conversation itself.
|
|
38135
38118
|
* - `composer`: Below the transcript, where the reader writes.
|
|
38136
38119
|
* - `header`: Above the transcript: what this conversation is.
|
|
@@ -38385,7 +38368,7 @@ export type CustomElementsSolidJs = {
|
|
|
38385
38368
|
* Not reflected: the attribute is the consumer's input and stays as they
|
|
38386
38369
|
* wrote it, and `:state(checked)` carries the resolved state for
|
|
38387
38370
|
* stylesheets.
|
|
38388
|
-
* - `default-checked`/`defaultChecked`:
|
|
38371
|
+
* - `default-checked`/`defaultChecked`: Whether the markup declared it checked, which is where a reset returns to.
|
|
38389
38372
|
* - `feedback`: What is wrong, in the reader's words rather than the browser's.
|
|
38390
38373
|
* - `hint`: Help under the control, shown while there is nothing wrong.
|
|
38391
38374
|
* - `label`: The accessible name, and the fallback for the `label` slot.
|
|
@@ -38600,11 +38583,11 @@ export type CustomElementsSolidJs = {
|
|
|
38600
38583
|
* round. The platform already writes booleans like this for the same reason,
|
|
38601
38584
|
* `novalidate` and `nomodule` and `noreferrer` among them.
|
|
38602
38585
|
*
|
|
38603
|
-
* **Reflected, because the gutter is a stylesheet rule.**
|
|
38604
|
-
*
|
|
38605
|
-
*
|
|
38606
|
-
*
|
|
38607
|
-
*
|
|
38586
|
+
* **Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
38587
|
+
* the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
38588
|
+
* what decides whether the block pays for a control. Unreflected, setting it
|
|
38589
|
+
* from script takes the button away (`render` reads the property) and leaves
|
|
38590
|
+
* the 40px it stood in reserved.
|
|
38608
38591
|
*
|
|
38609
38592
|
* A false boolean reflects as the attribute's absence, so this costs no
|
|
38610
38593
|
* `no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -38754,11 +38737,11 @@ export type CustomElementsSolidJs = {
|
|
|
38754
38737
|
>;
|
|
38755
38738
|
|
|
38756
38739
|
/**
|
|
38757
|
-
* **The picker is `
|
|
38740
|
+
* **The picker is `ColorPicker`, not a second one written here.** It owns the
|
|
38758
38741
|
* square, the ramps, the eyedropper and the syntax toggle, and it is worth
|
|
38759
38742
|
* having on its own: a settings pane wants a picker flat on the page with
|
|
38760
38743
|
* nothing to open. This element is the field, the overlay, and the form.
|
|
38761
|
-
* Exactly the arrangement Date Input has with `
|
|
38744
|
+
* Exactly the arrangement Date Input has with `DatePicker`.
|
|
38762
38745
|
*
|
|
38763
38746
|
* **Typed as well as picked, and the typing is the reason this is not
|
|
38764
38747
|
* `<input type="color">`.** The native control gives a free picker and takes
|
|
@@ -38830,7 +38813,7 @@ export type CustomElementsSolidJs = {
|
|
|
38830
38813
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
38831
38814
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
38832
38815
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
38833
|
-
* - `default-open`/`defaultOpen`:
|
|
38816
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
38834
38817
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
38835
38818
|
* - `value`: What the control holds now, and what its form submits.
|
|
38836
38819
|
*
|
|
@@ -39119,10 +39102,10 @@ export type CustomElementsSolidJs = {
|
|
|
39119
39102
|
*
|
|
39120
39103
|
* **A color is exactly as requirable as a date**, which is the comparison
|
|
39121
39104
|
* that settles it: this element extends `HelixFormElement`, carries `name`
|
|
39122
|
-
* and reports its value, so a consumer writing
|
|
39123
|
-
*
|
|
39124
|
-
* to
|
|
39125
|
-
*
|
|
39105
|
+
* and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
39106
|
+
* name="brand" required>` inside a form has every reason to expect the form
|
|
39107
|
+
* to refuse an empty one. Its two siblings in the same composition position,
|
|
39108
|
+
* Date Picker and Time Picker, both check it.
|
|
39126
39109
|
*
|
|
39127
39110
|
* Written out rather than taken from `MixinField`, for the reason those two
|
|
39128
39111
|
* record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -39314,10 +39297,10 @@ export type CustomElementsSolidJs = {
|
|
|
39314
39297
|
>;
|
|
39315
39298
|
|
|
39316
39299
|
/**
|
|
39317
|
-
* **The list is `
|
|
39318
|
-
*
|
|
39319
|
-
*
|
|
39320
|
-
* the
|
|
39300
|
+
* **The list is `Listbox`, and the filtering is its own.** It owns narrowing,
|
|
39301
|
+
* the empty state, the highlight, `aria-activedescendant` and scrolling an
|
|
39302
|
+
* option into view. What is left for this element is the field, the panel and
|
|
39303
|
+
* the traffic between them.
|
|
39321
39304
|
*
|
|
39322
39305
|
* **The text and the value are two things.** What a reader types is a filter:
|
|
39323
39306
|
* it narrows the list and is thrown away. The value is whichever option they
|
|
@@ -39401,7 +39384,7 @@ export type CustomElementsSolidJs = {
|
|
|
39401
39384
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
39402
39385
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
39403
39386
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
39404
|
-
* - `default-open`/`defaultOpen`:
|
|
39387
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
39405
39388
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
39406
39389
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
39407
39390
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -39488,7 +39471,7 @@ export type CustomElementsSolidJs = {
|
|
|
39488
39471
|
*
|
|
39489
39472
|
* Areas where markup can be added to the component.
|
|
39490
39473
|
*
|
|
39491
|
-
* - `(default)`: The options
|
|
39474
|
+
* - `(default)`: The options.
|
|
39492
39475
|
* - `end`: After it, for a unit or a clear button.
|
|
39493
39476
|
* - `indicator`: Replaces the caret saying the field opens.
|
|
39494
39477
|
* - `start`: Before the text, for an icon.
|
|
@@ -39602,12 +39585,11 @@ export type CustomElementsSolidJs = {
|
|
|
39602
39585
|
>;
|
|
39603
39586
|
|
|
39604
39587
|
/**
|
|
39605
|
-
* **The list is `
|
|
39606
|
-
*
|
|
39607
|
-
*
|
|
39608
|
-
*
|
|
39609
|
-
*
|
|
39610
|
-
* and a key that summons it.
|
|
39588
|
+
* **The list is `Listbox`, filtering and all.** Listbox already owns narrowing,
|
|
39589
|
+
* the empty state, the highlight over what matched, `aria-activedescendant`,
|
|
39590
|
+
* scrolling an option into view and the keyboard that moves between them. Its
|
|
39591
|
+
* own note says a command palette is that list again with something different
|
|
39592
|
+
* opening it, and this is that something: a dialog, and a key that summons it.
|
|
39611
39593
|
*
|
|
39612
39594
|
* **The value is not kept.** A palette runs a command and forgets it: nothing
|
|
39613
39595
|
* here is a form control and nothing is submitted, so what it reports is that
|
|
@@ -39649,7 +39631,7 @@ export type CustomElementsSolidJs = {
|
|
|
39649
39631
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
39650
39632
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
39651
39633
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
39652
|
-
* - `default-open`/`defaultOpen`:
|
|
39634
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
39653
39635
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
39654
39636
|
*
|
|
39655
39637
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -39684,7 +39666,7 @@ export type CustomElementsSolidJs = {
|
|
|
39684
39666
|
*
|
|
39685
39667
|
* Areas where markup can be added to the component.
|
|
39686
39668
|
*
|
|
39687
|
-
* - `(default)`: The commands,
|
|
39669
|
+
* - `(default)`: The commands, and any groups of them.
|
|
39688
39670
|
* - `footer`: Under the list, for the keys a reader can press.
|
|
39689
39671
|
*
|
|
39690
39672
|
* ## Methods
|
|
@@ -39774,7 +39756,7 @@ export type CustomElementsSolidJs = {
|
|
|
39774
39756
|
* the same way `label` becomes `aria-label` in there.
|
|
39775
39757
|
*
|
|
39776
39758
|
* ```html
|
|
39777
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
39759
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
39778
39760
|
* ```
|
|
39779
39761
|
*
|
|
39780
39762
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -39973,19 +39955,19 @@ export type CustomElementsSolidJs = {
|
|
|
39973
39955
|
|
|
39974
39956
|
/**
|
|
39975
39957
|
* **The schema is markup and the data is a property.** Columns are declared as
|
|
39976
|
-
* `
|
|
39977
|
-
*
|
|
39978
|
-
*
|
|
39958
|
+
* `TableColumn` children, because a schema is small and something a reader
|
|
39959
|
+
* should see in the HTML; rows are handed over as an array, because a table
|
|
39960
|
+
* that draws ten thousand elements cannot window them.
|
|
39979
39961
|
*
|
|
39980
39962
|
* ```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>
|
|
39963
|
+
* <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
|
|
39964
|
+
* <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
|
|
39965
|
+
* <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
|
|
39966
|
+
* </helix-headless-data-table>
|
|
39985
39967
|
* ```
|
|
39986
39968
|
*
|
|
39987
|
-
* `
|
|
39988
|
-
*
|
|
39969
|
+
* `Table` takes rows as markup and is the right component for a table of twelve
|
|
39970
|
+
* things a person wrote out.
|
|
39989
39971
|
*
|
|
39990
39972
|
* **Sort and filter apply to the whole set, never the page.** Sorting the drawn
|
|
39991
39973
|
* window is correct on the first screen and wrong on every other one.
|
|
@@ -39994,14 +39976,15 @@ export type CustomElementsSolidJs = {
|
|
|
39994
39976
|
* elements do, but reading a cell needs the columns, and the columns are markup
|
|
39995
39977
|
* children Lit SSR does not hand this element. So a crawler sees a table of the
|
|
39996
39978
|
* right shape with nothing in it. That is the cost of the first paragraph: use
|
|
39997
|
-
* `
|
|
39979
|
+
* `Table` where the served HTML has to carry the values.
|
|
39998
39980
|
*
|
|
39999
39981
|
* **`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is
|
|
40000
39982
|
* selected by its identity rather than its position, so a selection survives a
|
|
40001
39983
|
* sort, a filter and a page. `selected` is the chosen keys, comma separated, the
|
|
40002
|
-
* shape Listbox uses for a multiple choice, and like `sort` it
|
|
40003
|
-
*
|
|
40004
|
-
* row in the result, across pages, and shows a dash while only
|
|
39984
|
+
* shape Listbox uses for a multiple choice, and like `sort` writing it applies
|
|
39985
|
+
* while `default-selected` is what the markup declared. The box in the heading
|
|
39986
|
+
* selects every row in the result, across pages, and shows a dash while only
|
|
39987
|
+
* some are chosen.
|
|
40005
39988
|
* Choosing one of many, rather than several, is opening a row, and that is a
|
|
40006
39989
|
* link or a button in a cell rather than a selection.
|
|
40007
39990
|
*
|
|
@@ -40015,14 +39998,13 @@ export type CustomElementsSolidJs = {
|
|
|
40015
39998
|
* in the order on screen, in the columns on screen. Saving it is the page's
|
|
40016
39999
|
* business, the same as any other file.
|
|
40017
40000
|
*
|
|
40018
|
-
* **There is no `columns` attribute here, and
|
|
40019
|
-
*
|
|
40020
|
-
*
|
|
40021
|
-
*
|
|
40022
|
-
*
|
|
40023
|
-
*
|
|
40024
|
-
*
|
|
40025
|
-
* `--data-table-columns` here and `--table-columns` there.
|
|
40001
|
+
* **There is no `columns` attribute here, and Table has one.** The difference
|
|
40002
|
+
* is what a column is in each: here it is the schema, so a table without one
|
|
40003
|
+
* has nothing to read a row with, and every column is a place to write a
|
|
40004
|
+
* `width`. A Table holds cells a consumer wrote and can be written with no
|
|
40005
|
+
* column at all, so its `columns` is where such a table is sized from. Written
|
|
40006
|
+
* on this element the attribute is inert, which is the trap worth knowing when
|
|
40007
|
+
* moving between the two.
|
|
40026
40008
|
*
|
|
40027
40009
|
* ## Attributes & Properties
|
|
40028
40010
|
*
|
|
@@ -40103,9 +40085,9 @@ export type CustomElementsSolidJs = {
|
|
|
40103
40085
|
*
|
|
40104
40086
|
* **It announces nothing, and that is not an omission.** Nothing in this
|
|
40105
40087
|
* element ever asks for a different page size: a size selector is
|
|
40106
|
-
* `
|
|
40107
|
-
*
|
|
40108
|
-
*
|
|
40088
|
+
* `PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
40089
|
+
* themselves. Routing this through `requestChange` would announce an event
|
|
40090
|
+
* the element never has cause to fire.
|
|
40109
40091
|
* - `total`: How many rows the whole result has, where this element cannot count them.
|
|
40110
40092
|
*
|
|
40111
40093
|
* Only read in `server` mode, where `rows` is one page and its length says
|
|
@@ -40192,7 +40174,7 @@ export type CustomElementsSolidJs = {
|
|
|
40192
40174
|
*
|
|
40193
40175
|
* Areas where markup can be added to the component.
|
|
40194
40176
|
*
|
|
40195
|
-
* - `(default)`: The columns, declared
|
|
40177
|
+
* - `(default)`: The columns, declared rather than drawn.
|
|
40196
40178
|
* - `footer`: Below the grid, replacing the pagination this would otherwise draw.
|
|
40197
40179
|
* - `toolbar`: Above the grid, for a search field or actions.
|
|
40198
40180
|
*
|
|
@@ -40228,8 +40210,8 @@ export type CustomElementsSolidJs = {
|
|
|
40228
40210
|
*
|
|
40229
40211
|
* CSS variables available for styling the component.
|
|
40230
40212
|
*
|
|
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.
|
|
40213
|
+
* - `--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`)
|
|
40214
|
+
* - `--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
40215
|
*
|
|
40234
40216
|
* ## CSS Parts
|
|
40235
40217
|
*
|
|
@@ -40287,9 +40269,9 @@ export type CustomElementsSolidJs = {
|
|
|
40287
40269
|
>;
|
|
40288
40270
|
|
|
40289
40271
|
/**
|
|
40290
|
-
* **The calendar is `
|
|
40291
|
-
*
|
|
40292
|
-
*
|
|
40272
|
+
* **The calendar is `DatePicker`, not a second one written here.** It already
|
|
40273
|
+
* knows about months, ranges, disabled days, the first day of the week and
|
|
40274
|
+
* every keyboard rule a grid owes a reader. This element is the field, the
|
|
40293
40275
|
* overlay, and the translation between them.
|
|
40294
40276
|
*
|
|
40295
40277
|
* **Typed as well as picked, and the typing is why it is not
|
|
@@ -40376,7 +40358,7 @@ export type CustomElementsSolidJs = {
|
|
|
40376
40358
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
40377
40359
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
40378
40360
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
40379
|
-
* - `default-open`/`defaultOpen`:
|
|
40361
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
40380
40362
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
40381
40363
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
40382
40364
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -41020,7 +41002,7 @@ export type CustomElementsSolidJs = {
|
|
|
41020
41002
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
41021
41003
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
41022
41004
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
41023
|
-
* - `default-open`/`defaultOpen`:
|
|
41005
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
41024
41006
|
* - `returnValue`: What the dialog closed with, the way `<dialog>` reports it.
|
|
41025
41007
|
*
|
|
41026
41008
|
* **The whole point of a `<dialog>` returning a value is lost behind a shadow
|
|
@@ -41227,7 +41209,7 @@ export type CustomElementsSolidJs = {
|
|
|
41227
41209
|
* `--donut-chart-stroke`, which is a number a rule can do sums with where the
|
|
41228
41210
|
* word is not. Reflected, it wrote a value onto every host a script had set
|
|
41229
41211
|
* it on for nothing to read. `sweep` beside it is the converse and reflects,
|
|
41230
|
-
* because
|
|
41212
|
+
* because the styled sheet selects on it.
|
|
41231
41213
|
* - `sweep`: How much of the circle the whole occupies.
|
|
41232
41214
|
*
|
|
41233
41215
|
* Absent is the full turn. `half` is a semi-donut: the same shares spread
|
|
@@ -41406,8 +41388,8 @@ export type CustomElementsSolidJs = {
|
|
|
41406
41388
|
* Opened declaratively with the platform's invoker attributes:
|
|
41407
41389
|
*
|
|
41408
41390
|
* ```html
|
|
41409
|
-
* <helix-button commandfor="nav" command="--toggle">Menu</helix-button>
|
|
41410
|
-
* <helix-drawer id="nav">…</helix-drawer>
|
|
41391
|
+
* <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button>
|
|
41392
|
+
* <helix-headless-drawer id="nav">…</helix-headless-drawer>
|
|
41411
41393
|
* ```
|
|
41412
41394
|
*
|
|
41413
41395
|
* ## Attributes & Properties
|
|
@@ -41438,10 +41420,10 @@ export type CustomElementsSolidJs = {
|
|
|
41438
41420
|
* not, rather than shown or hidden by CSS.
|
|
41439
41421
|
* - `placement`: Which edge the drawer comes from.
|
|
41440
41422
|
*
|
|
41441
|
-
* Unset is `end`,
|
|
41442
|
-
* beside `:host([placement="end"])` rather than as a value written here: a
|
|
41423
|
+
* Unset is `end`, and it stays unset rather than being written down: a
|
|
41443
41424
|
* default assigned to the property would reflect onto every host and put a
|
|
41444
|
-
* `placement="end"` into markup no consumer wrote.
|
|
41425
|
+
* `placement="end"` into markup no consumer wrote. So what this tier
|
|
41426
|
+
* guarantees is the absence, and a sheet selects on it.
|
|
41445
41427
|
* - `open`: Whether the element is open.
|
|
41446
41428
|
*
|
|
41447
41429
|
* One property, not two, so `dialog.open` answers the question anyone
|
|
@@ -41454,7 +41436,7 @@ export type CustomElementsSolidJs = {
|
|
|
41454
41436
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
41455
41437
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
41456
41438
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
41457
|
-
* - `default-open`/`defaultOpen`:
|
|
41439
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
41458
41440
|
* - `returnValue`: What the dialog closed with, the way `<dialog>` reports it.
|
|
41459
41441
|
*
|
|
41460
41442
|
* **The whole point of a `<dialog>` returning a value is lost behind a shadow
|
|
@@ -42339,7 +42321,13 @@ export type CustomElementsSolidJs = {
|
|
|
42339
42321
|
* - `fields`: The fields declared inside this, in the order they were written.
|
|
42340
42322
|
*
|
|
42341
42323
|
* 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.
|
|
42324
|
+
* and threw here, and none while hydrating what one sent.
|
|
42325
|
+
*
|
|
42326
|
+
* By identity rather than by tag. A list of names can only hold the tags this
|
|
42327
|
+
* package knows about, so it misses any third one, which is what subclassing
|
|
42328
|
+
* a headless element produces, and it is also how a headless package learns a
|
|
42329
|
+
* styled tag. `instanceof` answers for every one of them and proves the type
|
|
42330
|
+
* the signature claims. (property only) (readonly)
|
|
42343
42331
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
42344
42332
|
*
|
|
42345
42333
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -42578,12 +42566,12 @@ export type CustomElementsSolidJs = {
|
|
|
42578
42566
|
* `FilterField` already plays on its own children.
|
|
42579
42567
|
*
|
|
42580
42568
|
* **It can suggest what to type next, and deciding what to suggest is still the
|
|
42581
|
-
* consumer's.** Slot
|
|
42582
|
-
*
|
|
42583
|
-
*
|
|
42584
|
-
*
|
|
42585
|
-
*
|
|
42586
|
-
*
|
|
42569
|
+
* consumer's.** Slot options into `suggestions` and the field shows them, moves
|
|
42570
|
+
* through them with the arrows, and lets Enter press one; the option fires its
|
|
42571
|
+
* own `helix-select` and the consumer decides what choosing meant. Keys before
|
|
42572
|
+
* a colon and values after it are the same panel with different contents, and
|
|
42573
|
+
* `readFilterText` is exported for a consumer narrowing that panel against what
|
|
42574
|
+
* a reader has half typed.
|
|
42587
42575
|
*
|
|
42588
42576
|
* **The panel opens when there is something in it and closes when there is
|
|
42589
42577
|
* not**, rather than on a choice. A reader who picks a key wants its values
|
|
@@ -42591,20 +42579,19 @@ export type CustomElementsSolidJs = {
|
|
|
42591
42579
|
* `selectionStart` and `setSelectionRange` to write a completion back and put
|
|
42592
42580
|
* the caret after it, or the next parse reads the wrong term.
|
|
42593
42581
|
*
|
|
42594
|
-
* **Three things here have three different owners
|
|
42595
|
-
* controlled property.**
|
|
42582
|
+
* **Three things here have three different owners.**
|
|
42596
42583
|
*
|
|
42597
|
-
* `value` is the text
|
|
42598
|
-
*
|
|
42599
|
-
*
|
|
42600
|
-
*
|
|
42584
|
+
* `value` is the text: the reader types, the element applies it, and `input`
|
|
42585
|
+
* says so. **Writing `value` does not take that over.** It is a seed and a
|
|
42586
|
+
* correction, so a consumer who sets it and then expects the field to hold
|
|
42587
|
+
* still will watch the next keystroke overwrite them.
|
|
42601
42588
|
* Ownership is taken by refusing `helix-before-change` and writing the value
|
|
42602
42589
|
* you want, which is the same shape every field in this library uses and is
|
|
42603
42590
|
* worth saying out loud here because the property looks like React's.
|
|
42604
42591
|
* `default-value` seeds the field without claiming anything.
|
|
42605
42592
|
*
|
|
42606
|
-
* `open` is the suggestions panel, and it is the ordinary
|
|
42607
|
-
*
|
|
42593
|
+
* `open` is the suggestions panel, and it is the ordinary pair: refuse
|
|
42594
|
+
* `helix-before-open` or `helix-before-close` to take the decision, and
|
|
42608
42595
|
* `default-open` to seed it.
|
|
42609
42596
|
*
|
|
42610
42597
|
* The tokens are neither, because they are not state. They are the consumer's
|
|
@@ -42643,7 +42630,7 @@ export type CustomElementsSolidJs = {
|
|
|
42643
42630
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
42644
42631
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
42645
42632
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
42646
|
-
* - `default-open`/`defaultOpen`:
|
|
42633
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
42647
42634
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
42648
42635
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
42649
42636
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -42882,11 +42869,12 @@ export type CustomElementsSolidJs = {
|
|
|
42882
42869
|
* would give.
|
|
42883
42870
|
*
|
|
42884
42871
|
* **The element's own text is read as a fallback, and only in a browser.**
|
|
42885
|
-
* `<helix-
|
|
42886
|
-
*
|
|
42887
|
-
*
|
|
42888
|
-
*
|
|
42889
|
-
*
|
|
42872
|
+
* `<helix-headless-format-date
|
|
42873
|
+
* elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
42874
|
+
* that reads best in markup, and it cannot be the only one: measured against
|
|
42875
|
+
* Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
42876
|
+
* `querySelector` are all `undefined` there, so a server has no way to see
|
|
42877
|
+
* it. An element rendered on a server needs the attribute; one rendered in a
|
|
42890
42878
|
* browser may use either.
|
|
42891
42879
|
* - `day`: How the day of the month is written, where a date is shown.
|
|
42892
42880
|
* - `elapsed`: Show how long ago it was, compactly, instead of the date.
|
|
@@ -42987,12 +42975,12 @@ export type CustomElementsSolidJs = {
|
|
|
42987
42975
|
* consumer has to keep by hand, and the one number a summary is told to trust
|
|
42988
42976
|
* is the one it gets wrong.
|
|
42989
42977
|
*
|
|
42990
|
-
* The strip measures itself, so
|
|
42991
|
-
*
|
|
42992
|
-
*
|
|
42993
|
-
*
|
|
42994
|
-
*
|
|
42995
|
-
*
|
|
42978
|
+
* The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
42979
|
+
* own and these two are the estimate used until the first measurement lands.
|
|
42980
|
+
* Writing the attribute pins the value and stops the measurement being
|
|
42981
|
+
* consulted, which is what a container query or a transition on the cell size
|
|
42982
|
+
* wants, where what is drawn this frame is not what the arithmetic should
|
|
42983
|
+
* plan around.
|
|
42996
42984
|
*
|
|
42997
42985
|
* Zero turns the dropping off altogether, which is right for a strip in a
|
|
42998
42986
|
* container that cannot get narrow.
|
|
@@ -43136,11 +43124,6 @@ export type CustomElementsSolidJs = {
|
|
|
43136
43124
|
*
|
|
43137
43125
|
* CSS variables available for styling the component.
|
|
43138
43126
|
*
|
|
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
43127
|
* - `--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
43128
|
* - `--heatmap-tone`: The tone of the cell this is set on. Written by the component, read by the sheet that paints. (default: `undefined`)
|
|
43146
43129
|
* - `--heatmap-tone-1`: The quietest step of the magnitude ramp, reached by `tones="1 …"`. (default: `undefined`)
|
|
@@ -43227,7 +43210,7 @@ export type CustomElementsSolidJs = {
|
|
|
43227
43210
|
* the same way `label` becomes `aria-label` in there.
|
|
43228
43211
|
*
|
|
43229
43212
|
* ```html
|
|
43230
|
-
* <helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
43213
|
+
* <helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
43231
43214
|
* ```
|
|
43232
43215
|
*
|
|
43233
43216
|
* `commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -43548,10 +43531,10 @@ export type CustomElementsSolidJs = {
|
|
|
43548
43531
|
* **Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
43549
43532
|
* state, so reflecting it puts the element's own bookkeeping into the markup
|
|
43550
43533
|
* a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
43551
|
-
* hydration mismatch, and a
|
|
43552
|
-
*
|
|
43553
|
-
*
|
|
43554
|
-
*
|
|
43534
|
+
* hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
43535
|
+
* declares that a picture has arrived which this element has never fetched.
|
|
43536
|
+
* The `data-` name is the library's answer to both, being a name a re-parse
|
|
43537
|
+
* cannot mistake for a declaration, and it is what `data-closed` on
|
|
43555
43538
|
* `Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
43556
43539
|
* which puts this on the safe side of hydration: a fact that can be true on
|
|
43557
43540
|
* the *first* update mirrors to a custom state instead, which is what
|
|
@@ -43667,10 +43650,10 @@ export type CustomElementsSolidJs = {
|
|
|
43667
43650
|
* **The attribute is `readonly`, which is the platform's spelling.** A
|
|
43668
43651
|
* camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
43669
43652
|
* 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`.
|
|
43653
|
+
* warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
43654
|
+
* HTML types; against `read-only` it parses to no property at all, and the
|
|
43655
|
+
* field stays editable with no error anywhere. Measured on the dash-cased
|
|
43656
|
+
* form, `readOnly` came back `false`.
|
|
43674
43657
|
* - `reveal`: Whether a password field offers a toggle that shows what was typed.
|
|
43675
43658
|
*
|
|
43676
43659
|
* Ignored on every other type. A reveal on an email field would be a button
|
|
@@ -43684,9 +43667,9 @@ export type CustomElementsSolidJs = {
|
|
|
43684
43667
|
*
|
|
43685
43668
|
* **Not reflected.** Reflection exists so a selector can reach a value, and
|
|
43686
43669
|
* 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`.
|
|
43670
|
+
* `type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
43671
|
+
* attribute no consumer's markup has, which is the fault the area rules write
|
|
43672
|
+
* up under `Button`'s `href`, `target` and `rel`.
|
|
43690
43673
|
*
|
|
43691
43674
|
* Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
43692
43675
|
* it as a property binding, which is what makes the keyboard and the
|
|
@@ -44141,8 +44124,7 @@ export type CustomElementsSolidJs = {
|
|
|
44141
44124
|
* over something busy. `triangle` points along the axis and reads as "and
|
|
44142
44125
|
* onward" rather than as a second claim about the data.
|
|
44143
44126
|
*
|
|
44144
|
-
* The shapes come from
|
|
44145
|
-
* `helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
44127
|
+
* The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
44146
44128
|
* the set is identical wherever one appears. **Which is why every value is
|
|
44147
44129
|
* named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
44148
44130
|
* undocumented until the cohort before this one; this family reads the same
|
|
@@ -44413,10 +44395,10 @@ export type CustomElementsSolidJs = {
|
|
|
44413
44395
|
* - `label`: Accessible name for the set.
|
|
44414
44396
|
* - `type`: Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
44415
44397
|
*
|
|
44416
|
-
* Reflected, because this is one of the things a stylesheet selects on
|
|
44417
|
-
*
|
|
44418
|
-
*
|
|
44419
|
-
*
|
|
44398
|
+
* Reflected, because this is one of the things a stylesheet selects on, each
|
|
44399
|
+
* value mapping to a `list-style-type`. The platform's spellings rather than
|
|
44400
|
+
* the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
44401
|
+
* consumer would have written on an `<ol>`.
|
|
44420
44402
|
*
|
|
44421
44403
|
* **`start` and `reversed` are both absent and neither can be done here.**
|
|
44422
44404
|
* This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -44878,7 +44860,7 @@ export type CustomElementsSolidJs = {
|
|
|
44878
44860
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
44879
44861
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
44880
44862
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
44881
|
-
* - `default-open`/`defaultOpen`:
|
|
44863
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
44882
44864
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
44883
44865
|
*
|
|
44884
44866
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -45168,7 +45150,7 @@ export type CustomElementsSolidJs = {
|
|
|
45168
45150
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
45169
45151
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
45170
45152
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
45171
|
-
* - `default-open`/`defaultOpen`:
|
|
45153
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
45172
45154
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
45173
45155
|
*
|
|
45174
45156
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -45515,7 +45497,7 @@ export type CustomElementsSolidJs = {
|
|
|
45515
45497
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
45516
45498
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
45517
45499
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
45518
|
-
* - `default-open`/`defaultOpen`:
|
|
45500
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
45519
45501
|
* - `isNotificationGroup`: What this is, for the feed above it to recognize without importing it.
|
|
45520
45502
|
*
|
|
45521
45503
|
* The same seam `Notification` uses: a root reads a child's markers rather
|
|
@@ -45598,9 +45580,9 @@ export type CustomElementsSolidJs = {
|
|
|
45598
45580
|
>;
|
|
45599
45581
|
|
|
45600
45582
|
/**
|
|
45601
|
-
* A notification is a toast that did not go away. `
|
|
45602
|
-
*
|
|
45603
|
-
*
|
|
45583
|
+
* A notification is a toast that did not go away. `Toast` is deliberately the
|
|
45584
|
+
* opposite of this: a live region whose items carry a `duration` and whose root
|
|
45585
|
+
* never creates or destroys anything. What makes this its own family is the
|
|
45604
45586
|
* state each item carries rather than the arrangement it sits in: read and
|
|
45605
45587
|
* unread, a timestamp that has to stay correct, and an action a reader can take
|
|
45606
45588
|
* later.
|
|
@@ -45612,9 +45594,9 @@ export type CustomElementsSolidJs = {
|
|
|
45612
45594
|
* reader wants exactly one of them at a time: the time while they are scanning,
|
|
45613
45595
|
* and what they can do about it once they have stopped on a row.
|
|
45614
45596
|
*
|
|
45615
|
-
* **The timestamp is `
|
|
45616
|
-
*
|
|
45617
|
-
*
|
|
45597
|
+
* **The timestamp is `FormatDate`**, which is where the reading, the `<time
|
|
45598
|
+
* datetime>` and the shared timer now live. It was implemented here, and a
|
|
45599
|
+
* component that formats a date is not a fact about notifications: Chat wanted
|
|
45618
45600
|
* the same thing and had its own copy of half of it.
|
|
45619
45601
|
*
|
|
45620
45602
|
* **Read state is reported, not invented.** Marking something read is usually a
|
|
@@ -45640,10 +45622,10 @@ export type CustomElementsSolidJs = {
|
|
|
45640
45622
|
*
|
|
45641
45623
|
* **Not reflected.** Unread is a visual state, which is why the four mixins
|
|
45642
45624
|
* 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.
|
|
45625
|
+
* `<helix-headless-notification default-read>` comes back from a server
|
|
45626
|
+
* without `read` and would gain it on the first update, which React reports
|
|
45627
|
+
* as a hydration mismatch, and which a copy of the serialized element
|
|
45628
|
+
* re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
45647
45629
|
* `hydration.dom.spec.ts` holds it.
|
|
45648
45630
|
* - `default-read`/`defaultRead`: State to open with, where nothing declared one.
|
|
45649
45631
|
* - `locale`: Locale for the timestamp.
|
|
@@ -45836,7 +45818,7 @@ export type CustomElementsSolidJs = {
|
|
|
45836
45818
|
*
|
|
45837
45819
|
* Areas where markup can be added to the component.
|
|
45838
45820
|
*
|
|
45839
|
-
* - `(default)`: The notifications
|
|
45821
|
+
* - `(default)`: The notifications.
|
|
45840
45822
|
* - `footer`: Below the list, for a link to everything.
|
|
45841
45823
|
* - `header`: Above the list, for a title and the mark-all control.
|
|
45842
45824
|
*
|
|
@@ -46371,11 +46353,10 @@ export type CustomElementsSolidJs = {
|
|
|
46371
46353
|
* - `alternate`: A second destination for this row, taken with the modifier held.
|
|
46372
46354
|
*
|
|
46373
46355
|
* **An attribute rather than a second row, which is the whole point.** A
|
|
46374
|
-
* palette
|
|
46375
|
-
*
|
|
46376
|
-
*
|
|
46377
|
-
*
|
|
46378
|
-
* second belongs beside it.
|
|
46356
|
+
* palette that offered every component a reference page and a sandbox as
|
|
46357
|
+
* separate entries would be twice as long, and one earns its keep by getting
|
|
46358
|
+
* a reader to one thing in three keystrokes. The row already carries the
|
|
46359
|
+
* first destination, so the second belongs beside it.
|
|
46379
46360
|
*
|
|
46380
46361
|
* Declared here and acted on by whatever owns the list, the same division
|
|
46381
46362
|
* selection already uses: an option says what it is and the listbox decides
|
|
@@ -46430,7 +46411,7 @@ export type CustomElementsSolidJs = {
|
|
|
46430
46411
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
46431
46412
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
46432
46413
|
* 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"
|
|
46414
|
+
* this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
46434
46415
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
46435
46416
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
46436
46417
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -46654,8 +46635,8 @@ export type CustomElementsSolidJs = {
|
|
|
46654
46635
|
/**
|
|
46655
46636
|
* **The component is the truncation.** Given a page and a total it works out
|
|
46656
46637
|
* 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.
|
|
46638
|
+
* than composed: `<helix-headless-pagination page="4" pages="12">` rather than
|
|
46639
|
+
* twelve slotted children a consumer keeps in step with their own query.
|
|
46659
46640
|
*
|
|
46660
46641
|
* **The width does not change as you page.** The run around the current page is
|
|
46661
46642
|
* `siblings` either side, and grows to absorb a gap slot at a boundary, so the
|
|
@@ -46862,7 +46843,8 @@ export type CustomElementsSolidJs = {
|
|
|
46862
46843
|
* way, through `ElementInternals.states` rather than an attribute the server
|
|
46863
46844
|
* never wrote.
|
|
46864
46845
|
*
|
|
46865
|
-
* `value` is the
|
|
46846
|
+
* `value` is the size the control holds and `default-value` is what the markup
|
|
46847
|
+
* declared.
|
|
46866
46848
|
* Changing it announces `helix-before-change`; re-querying and moving back to
|
|
46867
46849
|
* page one is the consumer's, because only they know whether the reader's
|
|
46868
46850
|
* position should survive it.
|
|
@@ -47096,10 +47078,10 @@ export type CustomElementsSolidJs = {
|
|
|
47096
47078
|
* marked letters wants `text`, which judges nothing.
|
|
47097
47079
|
*
|
|
47098
47080
|
* **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.
|
|
47081
|
+
* `type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
47082
|
+
* attribute no consumer's markup had. The area rules carry the sentence
|
|
47083
|
+
* "reflect only what CSS selects on". The real inputs take it as a binding,
|
|
47084
|
+
* which is what makes the keyboard follow.
|
|
47103
47085
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
47104
47086
|
* - `value`: What the control holds now, and what its form submits.
|
|
47105
47087
|
*
|
|
@@ -47291,7 +47273,7 @@ export type CustomElementsSolidJs = {
|
|
|
47291
47273
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
47292
47274
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
47293
47275
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
47294
|
-
* - `default-open`/`defaultOpen`:
|
|
47276
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
47295
47277
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
47296
47278
|
*
|
|
47297
47279
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -47858,7 +47840,7 @@ export type CustomElementsSolidJs = {
|
|
|
47858
47840
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
47859
47841
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
47860
47842
|
* 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"
|
|
47843
|
+
* this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
47862
47844
|
* selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
47863
47845
|
* and from `createElement` followed by `setAttribute`, which is every way a
|
|
47864
47846
|
* consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -48524,7 +48506,7 @@ export type CustomElementsSolidJs = {
|
|
|
48524
48506
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
48525
48507
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
48526
48508
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
48527
|
-
* - `default-open`/`defaultOpen`:
|
|
48509
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
48528
48510
|
* - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
|
|
48529
48511
|
* - `value`: What the control holds now, and what its form submits.
|
|
48530
48512
|
*
|
|
@@ -49331,11 +49313,10 @@ export type CustomElementsSolidJs = {
|
|
|
49331
49313
|
* mean defining what a dial with a submenu in it does.
|
|
49332
49314
|
*
|
|
49333
49315
|
* **The trigger is a control the consumer slots**, and the floating action
|
|
49334
|
-
* button is the usual one: `
|
|
49335
|
-
*
|
|
49336
|
-
* `
|
|
49337
|
-
*
|
|
49338
|
-
* layer.
|
|
49316
|
+
* button is the usual one: `IconButton` with `shape="circle"` and `raised`.
|
|
49317
|
+
* There is no `helix-fab`, because it would re-declare `emphasis`, `tone`,
|
|
49318
|
+
* `label` and a size around a control that already has all four. A round raised
|
|
49319
|
+
* button is a shape, and where it sits is `data-dock` in the base layer.
|
|
49339
49320
|
*
|
|
49340
49321
|
* **Nothing is reserved from the keyboard.** A menu that drills has to keep the
|
|
49341
49322
|
* horizontal pair for going in and coming back; a dial goes nowhere, so all four
|
|
@@ -49365,7 +49346,7 @@ export type CustomElementsSolidJs = {
|
|
|
49365
49346
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
49366
49347
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
49367
49348
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
49368
|
-
* - `default-open`/`defaultOpen`:
|
|
49349
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
49369
49350
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
49370
49351
|
*
|
|
49371
49352
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -49703,9 +49684,9 @@ export type CustomElementsSolidJs = {
|
|
|
49703
49684
|
* The row directions set them side by side, for a figure in a line of text or
|
|
49704
49685
|
* a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
49705
49686
|
*
|
|
49706
|
-
* A property rather than a `
|
|
49707
|
-
*
|
|
49708
|
-
*
|
|
49687
|
+
* A property rather than a `Flex` around it, because the unit has to stay on
|
|
49688
|
+
* the value's baseline whichever way the pair goes, and only this element
|
|
49689
|
+
* knows which of its children the unit belongs to.
|
|
49709
49690
|
*
|
|
49710
49691
|
* **Optional rather than defaulted to `column`, which is not a style
|
|
49711
49692
|
* preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -49805,7 +49786,7 @@ export type CustomElementsSolidJs = {
|
|
|
49805
49786
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
49806
49787
|
* tab, and `default-active` is how markup says where to start without
|
|
49807
49788
|
* naming the current one.
|
|
49808
|
-
* - `default-active`/`defaultActive`:
|
|
49789
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
49809
49790
|
*
|
|
49810
49791
|
* Ignored once `active` is written.
|
|
49811
49792
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -49841,7 +49822,7 @@ export type CustomElementsSolidJs = {
|
|
|
49841
49822
|
*
|
|
49842
49823
|
* Areas where markup can be added to the component.
|
|
49843
49824
|
*
|
|
49844
|
-
* - `(default)`: The steps
|
|
49825
|
+
* - `(default)`: The steps.
|
|
49845
49826
|
*
|
|
49846
49827
|
* ## Methods
|
|
49847
49828
|
*
|
|
@@ -49871,9 +49852,9 @@ export type CustomElementsSolidJs = {
|
|
|
49871
49852
|
|
|
49872
49853
|
/**
|
|
49873
49854
|
* **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
|
-
*
|
|
49855
|
+
* decoration, so wrapping it would add hit area and no meaning. It is `Button`
|
|
49856
|
+
* rather than a `<button>` this element resets: the hover wash, the focus ring
|
|
49857
|
+
* and the disabled treatment are decisions the button carries.
|
|
49877
49858
|
*
|
|
49878
49859
|
* **It says nothing about where a reader may go.** Every step is pressable and
|
|
49879
49860
|
* announces itself with `helix-select`; refusing the ones ahead is `disabled`,
|
|
@@ -49926,7 +49907,7 @@ export type CustomElementsSolidJs = {
|
|
|
49926
49907
|
* Areas where markup can be added to the component.
|
|
49927
49908
|
*
|
|
49928
49909
|
* - `(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
|
|
49910
|
+
* - `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
49911
|
* - `description`: A line under the name, for what the stage is for.
|
|
49931
49912
|
* - `marker`: Replaces the number, or the check a complete step shows.
|
|
49932
49913
|
*
|
|
@@ -49943,7 +49924,7 @@ export type CustomElementsSolidJs = {
|
|
|
49943
49924
|
* - `body`: The name and its description.
|
|
49944
49925
|
* - `content`: What the stage holds, while it is open.
|
|
49945
49926
|
* - `description`: The line under it.
|
|
49946
|
-
* - `label`: The step's name, which is a
|
|
49927
|
+
* - `label`: The step's name, which is a control.
|
|
49947
49928
|
* - `label-button`: The inner control.
|
|
49948
49929
|
* - `lead`: The half line arriving from the step before.
|
|
49949
49930
|
* - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
|
|
@@ -49993,7 +49974,7 @@ export type CustomElementsSolidJs = {
|
|
|
49993
49974
|
* Not reflected: the attribute is the consumer's input and stays as they
|
|
49994
49975
|
* wrote it, and `:state(checked)` carries the resolved state for
|
|
49995
49976
|
* stylesheets.
|
|
49996
|
-
* - `default-checked`/`defaultChecked`:
|
|
49977
|
+
* - `default-checked`/`defaultChecked`: Whether the markup declared it checked, which is where a reset returns to.
|
|
49997
49978
|
* - `feedback`: What is wrong, in the reader's words rather than the browser's.
|
|
49998
49979
|
* - `hint`: Help under the control, shown while there is nothing wrong.
|
|
49999
49980
|
* - `label`: The accessible name, and the fallback for the `label` slot.
|
|
@@ -50212,23 +50193,23 @@ export type CustomElementsSolidJs = {
|
|
|
50212
50193
|
* the table has another track; remove one and it does not. That is what ties
|
|
50213
50194
|
* the two together, and a table-level track list on its own does not: a list
|
|
50214
50195
|
* 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
|
-
*
|
|
50196
|
+
* drawing the whole table as one column. `Table`'s `columns` is dealt out a
|
|
50197
|
+
* track at a time against the columns declared under it, so a heading among the
|
|
50198
|
+
* widths costs its own column a width and no more, and a list longer or shorter
|
|
50199
|
+
* than the columns is trimmed or shared rather than being a second count of
|
|
50200
|
+
* them. A column's own `width` wins over the track in its place.
|
|
50220
50201
|
*
|
|
50221
50202
|
* **It is also where every per-column fact goes**, which is the reason
|
|
50222
|
-
* `
|
|
50223
|
-
*
|
|
50224
|
-
*
|
|
50203
|
+
* `DataTable` needs no column config object. `field` names the key the cell
|
|
50204
|
+
* reads, `sortable` says a reader may reorder by it, `align` says which edge
|
|
50205
|
+
* the values line up against, and `cell` takes a function for anything the
|
|
50225
50206
|
* field alone cannot express. The schema is markup and the data is a property:
|
|
50226
50207
|
* a schema is small, declarative, and something a reader should be able to see
|
|
50227
50208
|
* in the HTML, and data is large and windowed.
|
|
50228
50209
|
*
|
|
50229
50210
|
* **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
|
-
*
|
|
50211
|
+
* is identified by a flag rather than by `instanceof`, so a `TableColumn` works
|
|
50212
|
+
* inside either without the two roots sharing anything else.
|
|
50232
50213
|
*
|
|
50233
50214
|
* **It generates no box of its own**, the same as a row: the heading is a grid
|
|
50234
50215
|
* item of the table, so it lines up with the cells under it rather than sitting
|
|
@@ -50238,10 +50219,10 @@ export type CustomElementsSolidJs = {
|
|
|
50238
50219
|
* both, so the columns after it keep their own widths and every row keeps its
|
|
50239
50220
|
* cells under their headings. `hidden="until-found"` keeps its track, the
|
|
50240
50221
|
* heading being left drawn, as every Helix element leaves one with that value.
|
|
50241
|
-
* `
|
|
50242
|
-
*
|
|
50243
|
-
*
|
|
50244
|
-
*
|
|
50222
|
+
* `DataTable` draws the cells, so it leaves out the ones under a hidden column.
|
|
50223
|
+
* A `Table`'s cells are markup the consumer wrote, so hide them with the
|
|
50224
|
+
* column, as removing a column means removing its cells: a row with a cell more
|
|
50225
|
+
* than the table has tracks wraps into the next.
|
|
50245
50226
|
*
|
|
50246
50227
|
* **A heading that does something holds a control that does it.** The host is
|
|
50247
50228
|
* the column header, and a header is not focusable, so a sortable heading is a
|
|
@@ -50257,15 +50238,15 @@ export type CustomElementsSolidJs = {
|
|
|
50257
50238
|
*
|
|
50258
50239
|
* - `align`: Which edge the values line up against.
|
|
50259
50240
|
*
|
|
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.
|
|
50241
|
+
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
50242
|
+
* sit above each other. Left unset the cell inherits the table's own
|
|
50243
|
+
* alignment, which is `start` for text in either writing direction.
|
|
50244
|
+
* `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
50245
|
+
* consumer wrote, so the table writes nothing onto them: it publishes the
|
|
50246
|
+
* edge to each cell under this column as `--table-cell-align`, which
|
|
50247
|
+
* `@fusion.dev/helix` reads. The heading is this element's own, and
|
|
50248
|
+
* `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
50249
|
+
* inline end, so in a right-to-left table it is the left.
|
|
50269
50250
|
*
|
|
50270
50251
|
* **Reflected, because the heading is drawn by a stylesheet and has no other
|
|
50271
50252
|
* way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -50308,8 +50289,8 @@ export type CustomElementsSolidJs = {
|
|
|
50308
50289
|
* - `width`: The track this column takes, as CSS.
|
|
50309
50290
|
*
|
|
50310
50291
|
* 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
|
-
*
|
|
50292
|
+
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
50293
|
+
* its place in a `Table`'s `columns`, where that table sets one, and
|
|
50313
50294
|
* otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
50314
50295
|
* Set here, it wins over that list, which is what lets a reader resize a
|
|
50315
50296
|
* column in a table that set one.
|
|
@@ -50435,15 +50416,14 @@ export type CustomElementsSolidJs = {
|
|
|
50435
50416
|
*
|
|
50436
50417
|
* - `columns`: The column widths as one track list, written once on the table.
|
|
50437
50418
|
*
|
|
50438
|
-
* With `
|
|
50439
|
-
*
|
|
50440
|
-
*
|
|
50441
|
-
*
|
|
50442
|
-
*
|
|
50443
|
-
*
|
|
50444
|
-
*
|
|
50445
|
-
*
|
|
50446
|
-
* down to one column.
|
|
50419
|
+
* With `TableColumn` children, each track sizes the column in its place, a
|
|
50420
|
+
* hidden column counted, so hiding one takes its track with it and the rest
|
|
50421
|
+
* keep theirs. The columns decide how many tracks there are and this list
|
|
50422
|
+
* only how wide: a track past the last column is dropped, and a column past
|
|
50423
|
+
* the last track shares what is left. With no columns declared it is the
|
|
50424
|
+
* whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
50425
|
+
* is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
50426
|
+
* its column at the default rather than taking the table down to one column.
|
|
50447
50427
|
*
|
|
50448
50428
|
* **A column's own `width` wins over its track here.** The width is written
|
|
50449
50429
|
* on the column it sizes, which is the more particular statement, and it is
|
|
@@ -50457,13 +50437,11 @@ export type CustomElementsSolidJs = {
|
|
|
50457
50437
|
* whole answer: a table given one lays its grid out in the first paint, and a
|
|
50458
50438
|
* table sized only by its columns is one track wide until it upgrades.
|
|
50459
50439
|
*
|
|
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.
|
|
50440
|
+
* **Data Table has none of this, and should not.** Its columns are its schema
|
|
50441
|
+
* rather than an option, so there is always a column to write a `width` on
|
|
50442
|
+
* and a list here would be a second way to say what that says. This table's
|
|
50443
|
+
* cells are markup, and a table written as rows of cells with no column
|
|
50444
|
+
* declared in it has nowhere else to be sized from.
|
|
50467
50445
|
* - `label`: Accessible name for the table.
|
|
50468
50446
|
* - `empty-text`/`emptyText`: What is said where there are none, and none are coming.
|
|
50469
50447
|
* - `loading`: Whether the rows are still on their way.
|
|
@@ -50504,7 +50482,7 @@ export type CustomElementsSolidJs = {
|
|
|
50504
50482
|
*
|
|
50505
50483
|
* CSS variables available for styling the component.
|
|
50506
50484
|
*
|
|
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.
|
|
50485
|
+
* - `--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
50486
|
*
|
|
50509
50487
|
* ## CSS Parts
|
|
50510
50488
|
*
|
|
@@ -50529,10 +50507,10 @@ export type CustomElementsSolidJs = {
|
|
|
50529
50507
|
>;
|
|
50530
50508
|
|
|
50531
50509
|
/**
|
|
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.
|
|
50510
|
+
* The row renders its cells straight through and lays out none of them, so a
|
|
50511
|
+
* sheet can take them into the table's own grid and every column lines up
|
|
50512
|
+
* across every row. The row still exists as an element, which is what a
|
|
50513
|
+
* `<table>` gives away when its cells are laid out by the table algorithm.
|
|
50536
50514
|
*
|
|
50537
50515
|
* ## Attributes & Properties
|
|
50538
50516
|
*
|
|
@@ -50690,7 +50668,7 @@ export type CustomElementsSolidJs = {
|
|
|
50690
50668
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
50691
50669
|
* tab, and `default-active` is how markup says where to start without
|
|
50692
50670
|
* naming the current one.
|
|
50693
|
-
* - `default-active`/`defaultActive`:
|
|
50671
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
50694
50672
|
*
|
|
50695
50673
|
* Ignored once `active` is written.
|
|
50696
50674
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -51151,10 +51129,10 @@ export type CustomElementsSolidJs = {
|
|
|
51151
51129
|
>;
|
|
51152
51130
|
|
|
51153
51131
|
/**
|
|
51154
|
-
* **The list is `
|
|
51132
|
+
* **The list is `TimePicker`, not a second one written here.** It is worth
|
|
51155
51133
|
* having on its own, flat in a settings pane with nothing to open, and this
|
|
51156
51134
|
* element is the field, the overlay and the form. Exactly the arrangement Input
|
|
51157
|
-
* Date has with `
|
|
51135
|
+
* Date has with `DatePicker` and Color Input with `ColorPicker`.
|
|
51158
51136
|
*
|
|
51159
51137
|
* **Typed as well as picked, and that is the division the list depends on.** A
|
|
51160
51138
|
* list at a step offers the times a product actually has, and the field is how a
|
|
@@ -51185,8 +51163,8 @@ export type CustomElementsSolidJs = {
|
|
|
51185
51163
|
*
|
|
51186
51164
|
* Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
51187
51165
|
* number, and both are carried as one comma-separated value, which is what a
|
|
51188
|
-
* form submits. `
|
|
51189
|
-
* why a wheel cannot do either.
|
|
51166
|
+
* form submits. `TimePicker` carries the longer note on the interaction and
|
|
51167
|
+
* on why a wheel cannot do either.
|
|
51190
51168
|
* - `placeholder`: What the field says before a time is in it.
|
|
51191
51169
|
* - `step`: How far apart the offered times are, in minutes.
|
|
51192
51170
|
* - `time-style`/`timeStyle`: Whether the field writes the time out, or holds the value as it is.
|
|
@@ -51201,7 +51179,7 @@ export type CustomElementsSolidJs = {
|
|
|
51201
51179
|
* `list` offers whole times, which is what a product with slots or opening
|
|
51202
51180
|
* hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
51203
51181
|
* the locale uses one, which is the only way to reach `23:45` without
|
|
51204
|
-
* scrolling most of a day. `
|
|
51182
|
+
* scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
51205
51183
|
*
|
|
51206
51184
|
* **Optional rather than defaulted, which is not a style preference.** A
|
|
51207
51185
|
* reflecting property with a default writes its attribute onto every host the
|
|
@@ -51232,7 +51210,7 @@ export type CustomElementsSolidJs = {
|
|
|
51232
51210
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
51233
51211
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
51234
51212
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
51235
|
-
* - `default-open`/`defaultOpen`:
|
|
51213
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
51236
51214
|
* - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
|
|
51237
51215
|
* - `expandable`: Whether the count is a control that shows the rest.
|
|
51238
51216
|
* - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
|
|
@@ -51448,8 +51426,8 @@ export type CustomElementsSolidJs = {
|
|
|
51448
51426
|
|
|
51449
51427
|
/**
|
|
51450
51428
|
* **A list rather than three wheels**, and the reason is what a list already
|
|
51451
|
-
* is. `
|
|
51452
|
-
*
|
|
51429
|
+
* is. `Listbox` brings the keyboard, the typeahead, the scroll into view and
|
|
51430
|
+
* the announcement of a set of options, and a time at a step is a set of
|
|
51453
51431
|
* options. Three little wheels for hours, minutes and a meridiem are three
|
|
51454
51432
|
* controls to build, three to test, and a tab stop each for something a reader
|
|
51455
51433
|
* answers once.
|
|
@@ -51510,7 +51488,7 @@ export type CustomElementsSolidJs = {
|
|
|
51510
51488
|
*
|
|
51511
51489
|
* Absent is one. `range` holds a start and an end with everything between
|
|
51512
51490
|
* them shown as part of the answer, `multiple` holds any number, and both are
|
|
51513
|
-
* carried as one comma-separated value: the same shape `
|
|
51491
|
+
* carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
51514
51492
|
* because it is the same question asked of a different unit.
|
|
51515
51493
|
*
|
|
51516
51494
|
* **A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -52067,7 +52045,7 @@ export type CustomElementsSolidJs = {
|
|
|
52067
52045
|
* **Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
52068
52046
|
* defaulting is the pair that writes onto a host: every toast region anybody
|
|
52069
52047
|
* rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
52070
|
-
* consumer's server markup does not have.
|
|
52048
|
+
* consumer's server markup does not have. A sheet carries the resting
|
|
52071
52049
|
* arrangement in its own `:host` rule and the selectors describe only the
|
|
52072
52050
|
* departures, which is what `orientation` does.
|
|
52073
52051
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -52101,7 +52079,7 @@ export type CustomElementsSolidJs = {
|
|
|
52101
52079
|
*
|
|
52102
52080
|
* Areas where markup can be added to the component.
|
|
52103
52081
|
*
|
|
52104
|
-
* - `(default)`: The messages
|
|
52082
|
+
* - `(default)`: The messages.
|
|
52105
52083
|
*
|
|
52106
52084
|
* ## CSS Parts
|
|
52107
52085
|
*
|
|
@@ -52335,11 +52313,11 @@ export type CustomElementsSolidJs = {
|
|
|
52335
52313
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
52336
52314
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
52337
52315
|
* 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.
|
|
52316
|
+
* this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
52317
|
+
* value="light" selected>` reported `defaultSelected` as `false` both from
|
|
52318
|
+
* parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
52319
|
+
* every way a consumer writes one. The snapshot could only ever be true for
|
|
52320
|
+
* an element already in the document when `customElements.define` ran.
|
|
52343
52321
|
*
|
|
52344
52322
|
* Nothing overwrites it either, which is what makes reading it late correct
|
|
52345
52323
|
* rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -52501,8 +52479,8 @@ export type CustomElementsSolidJs = {
|
|
|
52501
52479
|
* the ordinary way:
|
|
52502
52480
|
*
|
|
52503
52481
|
* ```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>
|
|
52482
|
+
* <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button>
|
|
52483
|
+
* <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip>
|
|
52506
52484
|
* ```
|
|
52507
52485
|
*
|
|
52508
52486
|
* The reference points at *this host*, not at the bubble in its shadow root:
|
|
@@ -52599,7 +52577,7 @@ export type CustomElementsSolidJs = {
|
|
|
52599
52577
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
52600
52578
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
52601
52579
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
52602
|
-
* - `default-open`/`defaultOpen`:
|
|
52580
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
52603
52581
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
52604
52582
|
*
|
|
52605
52583
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -52817,9 +52795,9 @@ export type CustomElementsSolidJs = {
|
|
|
52817
52795
|
* - **When it shows.** Which is `current`, and which the root decides.
|
|
52818
52796
|
*
|
|
52819
52797
|
* What it does not own is the heading, the paragraph, the picture and the
|
|
52820
|
-
* layout. Slot a `
|
|
52821
|
-
*
|
|
52822
|
-
*
|
|
52798
|
+
* layout. Slot a `Card`, or a heading and a line of prose, or anything else.
|
|
52799
|
+
* Fixed `title` and `body` parts would be a component deciding what a tour is
|
|
52800
|
+
* allowed to say.
|
|
52823
52801
|
*
|
|
52824
52802
|
* **The buttons are slot fallback, so the common case costs nothing and the
|
|
52825
52803
|
* uncommon one is possible.** Write nothing and get Back, Next and Skip already
|
|
@@ -52978,7 +52956,7 @@ export type CustomElementsSolidJs = {
|
|
|
52978
52956
|
* hydration, or diffed by a framework, it comes back holding whatever the
|
|
52979
52957
|
* last reader did rather than what the author wrote. `:state(open)` carries
|
|
52980
52958
|
* the resolved state for stylesheets, which is what the mirror is for.
|
|
52981
|
-
* - `default-open`/`defaultOpen`:
|
|
52959
|
+
* - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
|
|
52982
52960
|
* - `level`: Depth from the root, counted by the tree so indentation needs no CSS nesting.
|
|
52983
52961
|
*
|
|
52984
52962
|
* **Read rather than written, and no attribute at all.** The tree counts the
|
|
@@ -53155,7 +53133,7 @@ export type CustomElementsSolidJs = {
|
|
|
53155
53133
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
53156
53134
|
* tab, and `default-active` is how markup says where to start without
|
|
53157
53135
|
* naming the current one.
|
|
53158
|
-
* - `default-active`/`defaultActive`:
|
|
53136
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
53159
53137
|
*
|
|
53160
53138
|
* Ignored once `active` is written.
|
|
53161
53139
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -53544,7 +53522,7 @@ export type CustomElementsSolidJs = {
|
|
|
53544
53522
|
* Writing always applies, so `<helix-tabs active="one">` starts on that
|
|
53545
53523
|
* tab, and `default-active` is how markup says where to start without
|
|
53546
53524
|
* naming the current one.
|
|
53547
|
-
* - `default-active`/`defaultActive`:
|
|
53525
|
+
* - `default-active`/`defaultActive`: Which item the markup declared current.
|
|
53548
53526
|
*
|
|
53549
53527
|
* Ignored once `active` is written.
|
|
53550
53528
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -53580,7 +53558,7 @@ export type CustomElementsSolidJs = {
|
|
|
53580
53558
|
* Areas where markup can be added to the component.
|
|
53581
53559
|
*
|
|
53582
53560
|
* - `(default)`: The entries.
|
|
53583
|
-
* - `player`: The
|
|
53561
|
+
* - `player`: The player the entries take turns in.
|
|
53584
53562
|
*
|
|
53585
53563
|
* ## Methods
|
|
53586
53564
|
*
|
|
@@ -53997,7 +53975,7 @@ export type CustomElementsSolidJs = {
|
|
|
53997
53975
|
export type CustomCssProperties = {
|
|
53998
53976
|
/** 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
53977
|
"--bar-chart-axis"?: (string) | undefined;
|
|
54000
|
-
/** The color of the secondary axis
|
|
53978
|
+
/** 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
53979
|
"--bar-chart-secondary"?: (string) | undefined;
|
|
54002
53980
|
/** 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
53981
|
"--chart-bar-wash"?: (string) | undefined;
|
|
@@ -54021,24 +53999,14 @@ export type CustomCssProperties = {
|
|
|
54021
53999
|
"--color-picker-saturation"?: (string) | undefined;
|
|
54022
54000
|
/** A color to paint: the current one on the sample, a preset's on each preset. */
|
|
54023
54001
|
"--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;
|
|
54002
|
+
/** 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
54003
|
"--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.
|
|
54004
|
+
/** 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
54005
|
"--data-table-template"?: (string) | undefined;
|
|
54028
54006
|
/** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
|
|
54029
54007
|
"--date-picker-column-count"?: (string) | undefined;
|
|
54030
54008
|
/** How thick the ring is drawn, derived from `hole`. */
|
|
54031
54009
|
"--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
54010
|
/** How many rows the strip lays out. Written by the component from the data, read by the tier that draws it. */
|
|
54043
54011
|
"--heatmap-rows"?: (string) | undefined;
|
|
54044
54012
|
/** The tone of the cell this is set on. Written by the component, read by the sheet that paints. */
|
|
@@ -54113,7 +54081,7 @@ export type CustomCssProperties = {
|
|
|
54113
54081
|
"--splitter-position"?: (string) | undefined;
|
|
54114
54082
|
/** 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
54083
|
"--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.
|
|
54084
|
+
/** 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
54085
|
"--table-template"?: (string) | undefined;
|
|
54118
54086
|
/** How long this message stays, in milliseconds, for a progress hint. */
|
|
54119
54087
|
"--toast-duration"?: (string) | undefined;
|