@fusion.dev/helix 0.53.1 → 0.53.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +99 -119
- package/dist/chat/root/chat-root.d.ts +1 -1
- package/dist/data-table/root/data-table-root.d.ts +1 -1
- package/dist/notifications/root/notifications-root.d.ts +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +588 -588
- package/types/vue.d.ts +153 -156
package/types/vue.d.ts
CHANGED
|
@@ -660,13 +660,13 @@ export type HelixAvatarGroupVueProps = {
|
|
|
660
660
|
Unset shows all of them, which is what no limit means and is more useful
|
|
661
661
|
than refusing to render.
|
|
662
662
|
|
|
663
|
-
**Reflected, because the fold is a stylesheet rule and nothing else.**
|
|
664
|
-
|
|
665
|
-
so the attribute *is* the mechanism: a `max` that reaches this
|
|
666
|
-
never reaches the host matches no rule, and every avatar is
|
|
667
|
-
count claiming some are hidden. Markup is the safe path and
|
|
668
|
-
a script is the broken one, and React takes it for
|
|
669
|
-
matching property rather than an attribute.
|
|
663
|
+
**Reflected, because the fold is a stylesheet rule and nothing else.** A
|
|
664
|
+
sheet hides past the limit one selector per value, as `FOLDS_UP_TO`
|
|
665
|
+
describes, so the attribute *is* the mechanism: a `max` that reaches this
|
|
666
|
+
property and never reaches the host matches no rule, and every avatar is
|
|
667
|
+
drawn beside a count claiming some are hidden. Markup is the safe path and
|
|
668
|
+
hides the fault; a script is the broken one, and React takes it for
|
|
669
|
+
everyone, assigning a matching property rather than an attribute.
|
|
670
670
|
|
|
671
671
|
**Optional rather than defaulted, per the rule that a reflected property
|
|
672
672
|
takes no default**: `max = 0` would stamp `max="0"` onto every host that
|
|
@@ -968,12 +968,12 @@ export type HelixBreadcrumbVueProps = {
|
|
|
968
968
|
current?: (HelixBreadcrumb["current"]) | undefined;
|
|
969
969
|
/** Where the crumb goes, and nothing where it is the current page.
|
|
970
970
|
|
|
971
|
-
**Optional and reflected, because a stylesheet does select on it.**
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
the
|
|
976
|
-
|
|
971
|
+
**Optional and reflected, because a stylesheet does select on it.** A sheet
|
|
972
|
+
writes `:host(:not([href])) [part="link"]` to take the block padding off a
|
|
973
|
+
crumb that is not a link, so the attribute is what decides how tall a crumb
|
|
974
|
+
is. Unreflected, an `href` set from script reached the property, rendered
|
|
975
|
+
the anchor, and left the host looking unlinked: the crumb drew at 20px
|
|
976
|
+
where a markup twin drew at 28.
|
|
977
977
|
|
|
978
978
|
Optional rather than defaulted, which is the general rule that a reflected
|
|
979
979
|
property takes no default: an `href` written onto every host would be a link
|
|
@@ -1092,7 +1092,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
1092
1092
|
the same way `label` becomes `aria-label` in there.
|
|
1093
1093
|
|
|
1094
1094
|
```html
|
|
1095
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
1095
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
1096
1096
|
```
|
|
1097
1097
|
|
|
1098
1098
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -1549,13 +1549,13 @@ end while the slides stop moving a third of the way through.
|
|
|
1549
1549
|
**The number is published to the styles rather than enumerated by them**,
|
|
1550
1550
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
1551
1551
|
count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
1552
|
-
so
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
three dots, a pane taking the whole track and five slides
|
|
1556
|
-
dragging.
|
|
1557
|
-
|
|
1558
|
-
|
|
1552
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
1553
|
+
above it the pane falls back to one across while this file goes on counting
|
|
1554
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
1555
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
1556
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
1557
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
1558
|
+
correction the same way and for the same reason.
|
|
1559
1559
|
|
|
1560
1560
|
**On the track and not on the host.** A custom property on the host is a
|
|
1561
1561
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -1580,8 +1580,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
1580
1580
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
1581
1581
|
exactly three.
|
|
1582
1582
|
|
|
1583
|
-
|
|
1584
|
-
|
|
1583
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
1584
|
+
three lines for a consumer writing their own.
|
|
1585
1585
|
|
|
1586
1586
|
**A value rather than the resting behavior**, which is what the
|
|
1587
1587
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -1609,13 +1609,13 @@ end while the slides stop moving a third of the way through.
|
|
|
1609
1609
|
**The number is published to the styles rather than enumerated by them**,
|
|
1610
1610
|
as `--carousel-per-view` on the track, which is what keeps a width and a
|
|
1611
1611
|
count from disagreeing. A sheet can only name a value it wrote a rule for,
|
|
1612
|
-
so
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
three dots, a pane taking the whole track and five slides
|
|
1616
|
-
dragging.
|
|
1617
|
-
|
|
1618
|
-
|
|
1612
|
+
so a sheet enumerating `per-view="2"` through `5` is a ceiling of five, and
|
|
1613
|
+
above it the pane falls back to one across while this file goes on counting
|
|
1614
|
+
positions. Measured in Chromium over eight slides against such a sheet, six
|
|
1615
|
+
across gave three dots, a pane taking the whole track and five slides
|
|
1616
|
+
reachable only by dragging. Published from here there is no ceiling to
|
|
1617
|
+
exceed, and every sheet reads the same declaration. `runEnd` publishes its
|
|
1618
|
+
correction the same way and for the same reason.
|
|
1619
1619
|
|
|
1620
1620
|
**On the track and not on the host.** A custom property on the host is a
|
|
1621
1621
|
reflected attribute by another name: it would arrive on upgrade, and a
|
|
@@ -1640,8 +1640,8 @@ inline the count would outrank the sheet that computes it, which is why an
|
|
|
1640
1640
|
`auto` track is handed nothing. A count stays for the design that calls for
|
|
1641
1641
|
exactly three.
|
|
1642
1642
|
|
|
1643
|
-
|
|
1644
|
-
|
|
1643
|
+
A sheet says how it divides, and the `auto` example here carries the same
|
|
1644
|
+
three lines for a consumer writing their own.
|
|
1645
1645
|
|
|
1646
1646
|
**A value rather than the resting behavior**, which is what the
|
|
1647
1647
|
responsiveness policy asks of every axis that a box decides: a splitter
|
|
@@ -1835,13 +1835,13 @@ pinned because a conversation opens at its most recent turn.
|
|
|
1835
1835
|
|
|
1836
1836
|
**Not reflected, and the default is why.** A reflected property that
|
|
1837
1837
|
defaults to true writes its attribute on upgrade whether or not the
|
|
1838
|
-
consumer wrote one, so the server serves `<helix-chat label="x">`
|
|
1839
|
-
client turns it into `<helix-chat label="x" pinned>`: a
|
|
1840
|
-
React consumer reports and does not patch up. Nothing
|
|
1841
|
-
either, because the one thing that changes with the pin
|
|
1842
|
-
that is a part inside the shadow tree where a
|
|
1843
|
-
it. Measured rather than assumed: `label,
|
|
1844
|
-
`label` from the server. */
|
|
1838
|
+
consumer wrote one, so the server serves `<helix-headless-chat label="x">`
|
|
1839
|
+
and the client turns it into `<helix-headless-chat label="x" pinned>`: a
|
|
1840
|
+
hydration mismatch a React consumer reports and does not patch up. Nothing
|
|
1841
|
+
needs the attribute either, because the one thing that changes with the pin
|
|
1842
|
+
is the way back, and that is a part inside the shadow tree where a
|
|
1843
|
+
stylesheet can already reach it. Measured rather than assumed: `label,
|
|
1844
|
+
pinned` after upgrade against `label` from the server. */
|
|
1845
1845
|
pinned?: (HelixChat["pinned"]) | undefined;
|
|
1846
1846
|
/** How near the bottom still counts as being at it, in pixels.
|
|
1847
1847
|
|
|
@@ -2034,11 +2034,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2034
2034
|
round. The platform already writes booleans like this for the same reason,
|
|
2035
2035
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2036
2036
|
|
|
2037
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2037
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2038
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2039
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2040
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2041
|
+
the 40px it stood in reserved.
|
|
2042
2042
|
|
|
2043
2043
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2044
2044
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2054,11 +2054,11 @@ present, which is true. Measured, and it is why this is named the other way
|
|
|
2054
2054
|
round. The platform already writes booleans like this for the same reason,
|
|
2055
2055
|
`novalidate` and `nomodule` and `noreferrer` among them.
|
|
2056
2056
|
|
|
2057
|
-
**Reflected, because the gutter is a stylesheet rule.**
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2057
|
+
**Reflected, because the gutter is a stylesheet rule.** A sheet reserves
|
|
2058
|
+
the copy button's width with `:host(:not([no-copy]))`, so the attribute is
|
|
2059
|
+
what decides whether the block pays for a control. Unreflected, setting it
|
|
2060
|
+
from script takes the button away (`render` reads the property) and leaves
|
|
2061
|
+
the 40px it stood in reserved.
|
|
2062
2062
|
|
|
2063
2063
|
A false boolean reflects as the attribute's absence, so this costs no
|
|
2064
2064
|
`no-copy=""` on hosts that never asked for one, and the rule about a
|
|
@@ -2364,10 +2364,10 @@ letting it open would take a color from the reader and drop it. */
|
|
|
2364
2364
|
|
|
2365
2365
|
**A color is exactly as requirable as a date**, which is the comparison
|
|
2366
2366
|
that settles it: this element extends `HelixFormElement`, carries `name`
|
|
2367
|
-
and reports its value, so a consumer writing
|
|
2368
|
-
|
|
2369
|
-
to
|
|
2370
|
-
|
|
2367
|
+
and reports its value, so a consumer writing `<helix-headless-color-picker
|
|
2368
|
+
name="brand" required>` inside a form has every reason to expect the form
|
|
2369
|
+
to refuse an empty one. Its two siblings in the same composition position,
|
|
2370
|
+
Date Picker and Time Picker, both check it.
|
|
2371
2371
|
|
|
2372
2372
|
Written out rather than taken from `MixinField`, for the reason those two
|
|
2373
2373
|
record: the mixin brings a label, a hint and a feedback region, and this is
|
|
@@ -2741,7 +2741,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
2741
2741
|
the same way `label` becomes `aria-label` in there.
|
|
2742
2742
|
|
|
2743
2743
|
```html
|
|
2744
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
2744
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
2745
2745
|
```
|
|
2746
2746
|
|
|
2747
2747
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -3030,17 +3030,17 @@ refusing it leaves the selection as it was. */
|
|
|
3030
3030
|
|
|
3031
3031
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
3032
3032
|
element ever asks for a different page size: a size selector is
|
|
3033
|
-
`
|
|
3034
|
-
|
|
3035
|
-
|
|
3033
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
3034
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
3035
|
+
the element never has cause to fire. */
|
|
3036
3036
|
"page-size"?: (HelixDataTable["pageSize"] | `${number}`) | undefined;
|
|
3037
3037
|
/** How many rows a page holds. Zero is every row, which is what "no paging" means.
|
|
3038
3038
|
|
|
3039
3039
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
3040
3040
|
element ever asks for a different page size: a size selector is
|
|
3041
|
-
`
|
|
3042
|
-
|
|
3043
|
-
|
|
3041
|
+
`PaginationSize`, which a consumer puts in the `footer` slot and answers
|
|
3042
|
+
themselves. Routing this through `requestChange` would announce an event
|
|
3043
|
+
the element never has cause to fire. */
|
|
3044
3044
|
pageSize?: (HelixDataTable["pageSize"]) | undefined;
|
|
3045
3045
|
/** How many rows the whole result has, where this element cannot count them.
|
|
3046
3046
|
|
|
@@ -3888,10 +3888,10 @@ not, rather than shown or hidden by CSS. */
|
|
|
3888
3888
|
modal?: (HelixDrawer["modal"]) | undefined;
|
|
3889
3889
|
/** Which edge the drawer comes from.
|
|
3890
3890
|
|
|
3891
|
-
Unset is `end`,
|
|
3892
|
-
beside `:host([placement="end"])` rather than as a value written here: a
|
|
3891
|
+
Unset is `end`, and it stays unset rather than being written down: a
|
|
3893
3892
|
default assigned to the property would reflect onto every host and put a
|
|
3894
|
-
`placement="end"` into markup no consumer wrote.
|
|
3893
|
+
`placement="end"` into markup no consumer wrote. So what this tier
|
|
3894
|
+
guarantees is the absence, and a sheet selects on it. */
|
|
3895
3895
|
placement?: (HelixDrawer["placement"]) | undefined;
|
|
3896
3896
|
/** What the dialog closed with, the way `<dialog>` reports it.
|
|
3897
3897
|
|
|
@@ -4419,11 +4419,12 @@ renders nothing rather than the epoch, which is what parsing an empty string
|
|
|
4419
4419
|
would give.
|
|
4420
4420
|
|
|
4421
4421
|
**The element's own text is read as a fallback, and only in a browser.**
|
|
4422
|
-
`<helix-
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
|
|
4426
|
-
|
|
4422
|
+
`<helix-headless-format-date
|
|
4423
|
+
elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
|
|
4424
|
+
that reads best in markup, and it cannot be the only one: measured against
|
|
4425
|
+
Lit's server shim, `textContent`, `children`, `firstChild` and
|
|
4426
|
+
`querySelector` are all `undefined` there, so a server has no way to see
|
|
4427
|
+
it. An element rendered on a server needs the attribute; one rendered in a
|
|
4427
4428
|
browser may use either. */
|
|
4428
4429
|
date?: (HelixFormatDate["date"]) | undefined;
|
|
4429
4430
|
/** How the day of the month is written, where a date is shown. */
|
|
@@ -4524,12 +4525,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
4524
4525
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
4525
4526
|
is the one it gets wrong.
|
|
4526
4527
|
|
|
4527
|
-
The strip measures itself, so
|
|
4528
|
-
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
|
|
4528
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
4529
|
+
own and these two are the estimate used until the first measurement lands.
|
|
4530
|
+
Writing the attribute pins the value and stops the measurement being
|
|
4531
|
+
consulted, which is what a container query or a transition on the cell size
|
|
4532
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
4533
|
+
plan around.
|
|
4533
4534
|
|
|
4534
4535
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
4535
4536
|
container that cannot get narrow. */
|
|
@@ -4542,12 +4543,12 @@ so a number written here that disagrees with the sheet is a promise the
|
|
|
4542
4543
|
consumer has to keep by hand, and the one number a summary is told to trust
|
|
4543
4544
|
is the one it gets wrong.
|
|
4544
4545
|
|
|
4545
|
-
The strip measures itself, so
|
|
4546
|
-
|
|
4547
|
-
|
|
4548
|
-
|
|
4549
|
-
|
|
4550
|
-
|
|
4546
|
+
The strip measures itself, so sizing the cells in a sheet is enough on its
|
|
4547
|
+
own and these two are the estimate used until the first measurement lands.
|
|
4548
|
+
Writing the attribute pins the value and stops the measurement being
|
|
4549
|
+
consulted, which is what a container query or a transition on the cell size
|
|
4550
|
+
wants, where what is drawn this frame is not what the arithmetic should
|
|
4551
|
+
plan around.
|
|
4551
4552
|
|
|
4552
4553
|
Zero turns the dropping off altogether, which is right for a strip in a
|
|
4553
4554
|
container that cannot get narrow. */
|
|
@@ -4640,7 +4641,7 @@ the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
|
4640
4641
|
the same way `label` becomes `aria-label` in there.
|
|
4641
4642
|
|
|
4642
4643
|
```html
|
|
4643
|
-
<helix-button commandfor="confirm" command="--show">Delete…</helix-button>
|
|
4644
|
+
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
4644
4645
|
```
|
|
4645
4646
|
|
|
4646
4647
|
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
@@ -4875,10 +4876,10 @@ Read-only to a consumer: it is a report rather than a setting.
|
|
|
4875
4876
|
**Mirrored to `data-status`, and not reflected as `status`.** It is element
|
|
4876
4877
|
state, so reflecting it puts the element's own bookkeeping into the markup
|
|
4877
4878
|
a consumer rendered: React reads the attribute appearing at upgrade as a
|
|
4878
|
-
hydration mismatch, and a
|
|
4879
|
-
|
|
4880
|
-
|
|
4881
|
-
|
|
4879
|
+
hydration mismatch, and a host pasted back carrying `status="loaded"`
|
|
4880
|
+
declares that a picture has arrived which this element has never fetched.
|
|
4881
|
+
The `data-` name is the library's answer to both, being a name a re-parse
|
|
4882
|
+
cannot mistake for a declaration, and it is what `data-closed` on
|
|
4882
4883
|
`Toast.Item` already does. A picture arrives after somebody fetched it,
|
|
4883
4884
|
which puts this on the safe side of hydration: a fact that can be true on
|
|
4884
4885
|
the *first* update mirrors to a custom state instead, which is what
|
|
@@ -4961,20 +4962,20 @@ Not a label: it goes when typing starts. */
|
|
|
4961
4962
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
4962
4963
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
4963
4964
|
HTML writes as one costs what an attribute always costs here: nothing
|
|
4964
|
-
warns. `<helix-input readonly>` is what anybody who has written
|
|
4965
|
-
against `read-only` it parses to no property at all, and the
|
|
4966
|
-
editable with no error anywhere. Measured on the dash-cased
|
|
4967
|
-
came back `false`. */
|
|
4965
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
4966
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
4967
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
4968
|
+
form, `readOnly` came back `false`. */
|
|
4968
4969
|
readonly?: (HelixInput["readOnly"]) | undefined;
|
|
4969
4970
|
/** Whether the field refuses input while still submitting its value.
|
|
4970
4971
|
|
|
4971
4972
|
**The attribute is `readonly`, which is the platform's spelling.** A
|
|
4972
4973
|
camelCase property needs an explicit `attribute`, and dash-casing a word
|
|
4973
4974
|
HTML writes as one costs what an attribute always costs here: nothing
|
|
4974
|
-
warns. `<helix-input readonly>` is what anybody who has written
|
|
4975
|
-
against `read-only` it parses to no property at all, and the
|
|
4976
|
-
editable with no error anywhere. Measured on the dash-cased
|
|
4977
|
-
came back `false`. */
|
|
4975
|
+
warns. `<helix-headless-input readonly>` is what anybody who has written
|
|
4976
|
+
HTML types; against `read-only` it parses to no property at all, and the
|
|
4977
|
+
field stays editable with no error anywhere. Measured on the dash-cased
|
|
4978
|
+
form, `readOnly` came back `false`. */
|
|
4978
4979
|
readOnly?: (HelixInput["readOnly"]) | undefined;
|
|
4979
4980
|
/** Whether a password field offers a toggle that shows what was typed.
|
|
4980
4981
|
|
|
@@ -4995,9 +4996,9 @@ The state is `aria-pressed`, not this. */
|
|
|
4995
4996
|
|
|
4996
4997
|
**Not reflected.** Reflection exists so a selector can reach a value, and
|
|
4997
4998
|
no stylesheet in this repository selects on `type`. Reflecting it writes
|
|
4998
|
-
`type="text"` onto every `<helix-input>` ever rendered, an
|
|
4999
|
-
consumer's markup has, which is the fault the area rules write
|
|
5000
|
-
`Button`'s `href`, `target` and `rel`.
|
|
4999
|
+
`type="text"` onto every `<helix-headless-input>` ever rendered, an
|
|
5000
|
+
attribute no consumer's markup has, which is the fault the area rules write
|
|
5001
|
+
up under `Button`'s `href`, `target` and `rel`.
|
|
5001
5002
|
|
|
5002
5003
|
Nothing reads it from the attribute either. The real `<input>` inside takes
|
|
5003
5004
|
it as a property binding, which is what makes the keyboard and the
|
|
@@ -5310,8 +5311,7 @@ beside it for instance. `ring` lets the ground through, for a chart drawn
|
|
|
5310
5311
|
over something busy. `triangle` points along the axis and reads as "and
|
|
5311
5312
|
onward" rather than as a second claim about the data.
|
|
5312
5313
|
|
|
5313
|
-
The shapes come from
|
|
5314
|
-
`helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
5314
|
+
The shapes come from one shared sheet, the same one `Sparkline` takes, so
|
|
5315
5315
|
the set is identical wherever one appears. **Which is why every value is
|
|
5316
5316
|
named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
5317
5317
|
undocumented until the cohort before this one; this family reads the same
|
|
@@ -5395,10 +5395,10 @@ has to survive with the stylesheet turned off.
|
|
|
5395
5395
|
label?: (HelixList["label"]) | undefined;
|
|
5396
5396
|
/** Which markers an ordered list draws, in `<ol type>`'s own five values.
|
|
5397
5397
|
|
|
5398
|
-
Reflected, because this is one of the things a stylesheet selects on
|
|
5399
|
-
|
|
5400
|
-
|
|
5401
|
-
|
|
5398
|
+
Reflected, because this is one of the things a stylesheet selects on, each
|
|
5399
|
+
value mapping to a `list-style-type`. The platform's spellings rather than
|
|
5400
|
+
the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
5401
|
+
consumer would have written on an `<ol>`.
|
|
5402
5402
|
|
|
5403
5403
|
**`start` and `reversed` are both absent and neither can be done here.**
|
|
5404
5404
|
This renders no `<ol>`: the rows are slotted and numbered by the CSS
|
|
@@ -6066,10 +6066,10 @@ this element then owns.
|
|
|
6066
6066
|
|
|
6067
6067
|
**Not reflected.** Unread is a visual state, which is why the four mixins
|
|
6068
6068
|
mirror theirs, but the mirror may not be the property's own attribute:
|
|
6069
|
-
`<helix-notification default-read>` comes back from a server
|
|
6070
|
-
and would gain it on the first update, which React reports
|
|
6071
|
-
mismatch, and which a copy of the serialized element
|
|
6072
|
-
declaration. `:state(read)` is what the stylesheet reads.
|
|
6069
|
+
`<helix-headless-notification default-read>` comes back from a server
|
|
6070
|
+
without `read` and would gain it on the first update, which React reports
|
|
6071
|
+
as a hydration mismatch, and which a copy of the serialized element
|
|
6072
|
+
re-parses as a declaration. `:state(read)` is what the stylesheet reads.
|
|
6073
6073
|
`hydration.dom.spec.ts` holds it. */
|
|
6074
6074
|
read?: (HelixNotification["read"]) | undefined;
|
|
6075
6075
|
/** State to open with, where nothing declared one. */
|
|
@@ -6433,7 +6433,7 @@ attribute and the state is the property.
|
|
|
6433
6433
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
6434
6434
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
6435
6435
|
parser created has none of its attributes yet at that moment: measured on
|
|
6436
|
-
this element, on `Radio` and on `Toggle`, `<helix-option value="a"
|
|
6436
|
+
this element, on `Radio` and on `Toggle`, `<helix-headless-option value="a"
|
|
6437
6437
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
6438
6438
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
6439
6439
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -6822,10 +6822,10 @@ other end is going to reject. A consumer whose codes really do carry
|
|
|
6822
6822
|
marked letters wants `text`, which judges nothing.
|
|
6823
6823
|
|
|
6824
6824
|
**Not reflected**: nothing selects on it, so reflecting only writes
|
|
6825
|
-
`type="numeric"` onto every `<helix-pin-input>` ever rendered, an
|
|
6826
|
-
no consumer's markup had. The area rules carry the sentence
|
|
6827
|
-
what CSS selects on". The real inputs take it as a binding,
|
|
6828
|
-
makes the keyboard follow. */
|
|
6825
|
+
`type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
|
|
6826
|
+
attribute no consumer's markup had. The area rules carry the sentence
|
|
6827
|
+
"reflect only what CSS selects on". The real inputs take it as a binding,
|
|
6828
|
+
which is what makes the keyboard follow. */
|
|
6829
6829
|
type?: (HelixPinInput["type"]) | undefined;
|
|
6830
6830
|
/** Whether the control is non-interactive.
|
|
6831
6831
|
|
|
@@ -7213,7 +7213,7 @@ attribute and the state is the property.
|
|
|
7213
7213
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
7214
7214
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
7215
7215
|
parser created has none of its attributes yet at that moment: measured on
|
|
7216
|
-
this element, on `Option` and on `Toggle`, `<helix-radio value="a"
|
|
7216
|
+
this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
|
|
7217
7217
|
selected>` reported `defaultSelected` as `false` both from parsed markup
|
|
7218
7218
|
and from `createElement` followed by `setAttribute`, which is every way a
|
|
7219
7219
|
consumer writes one. The snapshot could only ever be true for an element
|
|
@@ -8412,9 +8412,9 @@ the headline and the label is a caption under it.
|
|
|
8412
8412
|
The row directions set them side by side, for a figure in a line of text or
|
|
8413
8413
|
a narrow strip where a stacked pair would be two lines of almost nothing.
|
|
8414
8414
|
|
|
8415
|
-
A property rather than a `
|
|
8416
|
-
|
|
8417
|
-
|
|
8415
|
+
A property rather than a `Flex` around it, because the unit has to stay on
|
|
8416
|
+
the value's baseline whichever way the pair goes, and only this element
|
|
8417
|
+
knows which of its children the unit belongs to.
|
|
8418
8418
|
|
|
8419
8419
|
**Optional rather than defaulted to `column`, which is not a style
|
|
8420
8420
|
preference.** A reflecting property with a default writes its attribute onto
|
|
@@ -8605,15 +8605,15 @@ export type HelixTableColumnHelixBeforeResizeElementEvent =
|
|
|
8605
8605
|
export type HelixTableColumnVueProps = {
|
|
8606
8606
|
/** Which edge the values line up against.
|
|
8607
8607
|
|
|
8608
|
-
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
8609
|
-
above each other. Left unset the cell inherits the table's own
|
|
8610
|
-
which is `start` for text in either writing direction.
|
|
8611
|
-
aligns the cells it draws. A `
|
|
8612
|
-
wrote, so the table writes nothing onto them: it publishes the
|
|
8613
|
-
cell under this column as `--table-cell-align`, which
|
|
8614
|
-
reads. The heading is this element's own, and
|
|
8615
|
-
the same edge in either table. `end` is the
|
|
8616
|
-
right-to-left table it is the left.
|
|
8608
|
+
`end` is what a column of numbers wants, so digits of the same magnitude
|
|
8609
|
+
sit above each other. Left unset the cell inherits the table's own
|
|
8610
|
+
alignment, which is `start` for text in either writing direction.
|
|
8611
|
+
`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
8612
|
+
consumer wrote, so the table writes nothing onto them: it publishes the
|
|
8613
|
+
edge to each cell under this column as `--table-cell-align`, which
|
|
8614
|
+
`@fusion.dev/helix` reads. The heading is this element's own, and
|
|
8615
|
+
`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
8616
|
+
inline end, so in a right-to-left table it is the left.
|
|
8617
8617
|
|
|
8618
8618
|
**Reflected, because the heading is drawn by a stylesheet and has no other
|
|
8619
8619
|
way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -8660,8 +8660,8 @@ onto its host. */
|
|
|
8660
8660
|
/** The track this column takes, as CSS.
|
|
8661
8661
|
|
|
8662
8662
|
A single track value, so anything valid in `grid-template-columns` works:
|
|
8663
|
-
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
|
|
8664
|
-
|
|
8663
|
+
`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
8664
|
+
its place in a `Table`'s `columns`, where that table sets one, and
|
|
8665
8665
|
otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
8666
8666
|
Set here, it wins over that list, which is what lets a reader resize a
|
|
8667
8667
|
column in a table that set one.
|
|
@@ -8721,15 +8721,14 @@ say that without the component knowing what a row looks like. */
|
|
|
8721
8721
|
loadingText?: (HelixTable["loadingText"]) | undefined;
|
|
8722
8722
|
/** The column widths as one track list, written once on the table.
|
|
8723
8723
|
|
|
8724
|
-
With `
|
|
8725
|
-
|
|
8726
|
-
|
|
8727
|
-
|
|
8728
|
-
|
|
8729
|
-
|
|
8730
|
-
|
|
8731
|
-
|
|
8732
|
-
down to one column.
|
|
8724
|
+
With `TableColumn` children, each track sizes the column in its place, a
|
|
8725
|
+
hidden column counted, so hiding one takes its track with it and the rest
|
|
8726
|
+
keep theirs. The columns decide how many tracks there are and this list
|
|
8727
|
+
only how wide: a track past the last column is dropped, and a column past
|
|
8728
|
+
the last track shares what is left. With no columns declared it is the
|
|
8729
|
+
whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
8730
|
+
is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
8731
|
+
its column at the default rather than taking the table down to one column.
|
|
8733
8732
|
|
|
8734
8733
|
**A column's own `width` wins over its track here.** The width is written
|
|
8735
8734
|
on the column it sizes, which is the more particular statement, and it is
|
|
@@ -8743,13 +8742,11 @@ to walk, so a render there knows of no columns and this attribute is the
|
|
|
8743
8742
|
whole answer: a table given one lays its grid out in the first paint, and a
|
|
8744
8743
|
table sized only by its columns is one track wide until it upgrades.
|
|
8745
8744
|
|
|
8746
|
-
|
|
8747
|
-
|
|
8748
|
-
|
|
8749
|
-
|
|
8750
|
-
|
|
8751
|
-
take the same CSS hook, `--table-columns` and `--data-table-columns`, which
|
|
8752
|
-
wins over whichever list the element worked out. */
|
|
8745
|
+
**Data Table has none of this, and should not.** Its columns are its schema
|
|
8746
|
+
rather than an option, so there is always a column to write a `width` on
|
|
8747
|
+
and a list here would be a second way to say what that says. This table's
|
|
8748
|
+
cells are markup, and a table written as rows of cells with no column
|
|
8749
|
+
declared in it has nowhere else to be sized from. */
|
|
8753
8750
|
columns?: (HelixTable["columns"]) | undefined;
|
|
8754
8751
|
/** Accessible name for the table. */
|
|
8755
8752
|
label?: (HelixTable["label"]) | undefined;
|
|
@@ -9219,8 +9216,8 @@ Absent uses the runtime's own. */
|
|
|
9219
9216
|
|
|
9220
9217
|
Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
9221
9218
|
number, and both are carried as one comma-separated value, which is what a
|
|
9222
|
-
form submits. `
|
|
9223
|
-
why a wheel cannot do either. */
|
|
9219
|
+
form submits. `TimePicker` carries the longer note on the interaction and
|
|
9220
|
+
on why a wheel cannot do either. */
|
|
9224
9221
|
mode?: (HelixTimeInput["mode"]) | undefined;
|
|
9225
9222
|
/** What the field says before a time is in it. */
|
|
9226
9223
|
placeholder?: (HelixTimeInput["placeholder"]) | undefined;
|
|
@@ -9249,7 +9246,7 @@ never something this element would refuse to read back. */
|
|
|
9249
9246
|
`list` offers whole times, which is what a product with slots or opening
|
|
9250
9247
|
hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
9251
9248
|
the locale uses one, which is the only way to reach `23:45` without
|
|
9252
|
-
scrolling most of a day. `
|
|
9249
|
+
scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
9253
9250
|
|
|
9254
9251
|
**Optional rather than defaulted, which is not a style preference.** A
|
|
9255
9252
|
reflecting property with a default writes its attribute onto every host the
|
|
@@ -9376,7 +9373,7 @@ Absent uses the runtime's own. */
|
|
|
9376
9373
|
|
|
9377
9374
|
Absent is one. `range` holds a start and an end with everything between
|
|
9378
9375
|
them shown as part of the answer, `multiple` holds any number, and both are
|
|
9379
|
-
carried as one comma-separated value: the same shape `
|
|
9376
|
+
carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
9380
9377
|
because it is the same question asked of a different unit.
|
|
9381
9378
|
|
|
9382
9379
|
**A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -9586,7 +9583,7 @@ where they were would not be a stack.
|
|
|
9586
9583
|
**Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
9587
9584
|
defaulting is the pair that writes onto a host: every toast region anybody
|
|
9588
9585
|
rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
9589
|
-
consumer's server markup does not have.
|
|
9586
|
+
consumer's server markup does not have. A sheet carries the resting
|
|
9590
9587
|
arrangement in its own `:host` rule and the selectors describe only the
|
|
9591
9588
|
departures, which is what `orientation` does. */
|
|
9592
9589
|
placement?: (HelixToast["placement"]) | undefined;
|
|
@@ -9734,11 +9731,11 @@ attribute and the state is the property.
|
|
|
9734
9731
|
**The attribute, read when it is asked for, and never a snapshot taken in
|
|
9735
9732
|
the constructor.** A field initializer runs there, and an element the HTML
|
|
9736
9733
|
parser created has none of its attributes yet at that moment: measured on
|
|
9737
|
-
this element, on `Option` and on `Radio`, `<helix-toggle
|
|
9738
|
-
selected>` reported `defaultSelected` as `false` both from
|
|
9739
|
-
and from `createElement` followed by `setAttribute`, which is
|
|
9740
|
-
consumer writes one. The snapshot could only ever be true for
|
|
9741
|
-
already in the document when `customElements.define` ran.
|
|
9734
|
+
this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
9735
|
+
value="light" selected>` reported `defaultSelected` as `false` both from
|
|
9736
|
+
parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
9737
|
+
every way a consumer writes one. The snapshot could only ever be true for
|
|
9738
|
+
an element already in the document when `customElements.define` ran.
|
|
9742
9739
|
|
|
9743
9740
|
Nothing overwrites it either, which is what makes reading it late correct
|
|
9744
9741
|
rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -10761,7 +10758,7 @@ export type CustomCssProperties = {
|
|
|
10761
10758
|
"--bar-chart-line-width"?: (string) | undefined;
|
|
10762
10759
|
/** 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. */
|
|
10763
10760
|
"--bar-chart-axis"?: (string) | undefined;
|
|
10764
|
-
/** The color of the secondary axis
|
|
10761
|
+
/** 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. */
|
|
10765
10762
|
"--bar-chart-secondary"?: (string) | undefined;
|
|
10766
10763
|
/** 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. */
|
|
10767
10764
|
"--chart-bar-wash"?: (string) | undefined;
|
|
@@ -10985,9 +10982,9 @@ export type CustomCssProperties = {
|
|
|
10985
10982
|
"--data-table-rule-color"?: (string) | undefined;
|
|
10986
10983
|
/** Type size, headings and cells alike. */
|
|
10987
10984
|
"--data-table-text"?: (string) | undefined;
|
|
10988
|
-
/** 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;
|
|
10985
|
+
/** 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. */
|
|
10989
10986
|
"--data-table-cell-align"?: (string) | undefined;
|
|
10990
|
-
/** 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.
|
|
10987
|
+
/** 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. */
|
|
10991
10988
|
"--data-table-template"?: (string) | undefined;
|
|
10992
10989
|
/** Fill behind the field. */
|
|
10993
10990
|
"--date-input-background-color"?: (string) | undefined;
|
|
@@ -11591,7 +11588,7 @@ export type CustomCssProperties = {
|
|
|
11591
11588
|
"--table-cell-align"?: (string) | undefined;
|
|
11592
11589
|
/** Track list for the columns, which wins over the one the columns worked out. */
|
|
11593
11590
|
"--table-columns"?: (string) | undefined;
|
|
11594
|
-
/** 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.
|
|
11591
|
+
/** 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. */
|
|
11595
11592
|
"--table-template"?: (string) | undefined;
|
|
11596
11593
|
/** Fill behind the tag. */
|
|
11597
11594
|
"--tag-background-color"?: (string) | undefined;
|