@fusion.dev/helix 0.53.0 → 0.53.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/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.** The
664
- styled tier hides past the limit with `:host([max="N"]) ::slotted(:nth-child(n + N+1))`,
665
- so the attribute *is* the mechanism: a `max` that reaches this property and
666
- never reaches the host matches no rule, and every avatar is drawn beside a
667
- count claiming some are hidden. Markup is the safe path and hides the fault;
668
- a script is the broken one, and React takes it for everyone, assigning a
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
- `breadcrumb.css` writes `:host(:not([href])) [part="link"]` to take the
973
- block padding off a crumb that is not a link, so the attribute is what
974
- decides how tall a crumb is. Unreflected, an `href` set from script reached
975
- the property, rendered the anchor, and left the host looking unlinked: the
976
- crumb drew at 20px where a markup twin drew at 28.
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 the styled tier enumerated `per-view="2"` through `5` and called five a
1553
- judgment; above it the pane fell back to one across while this file went on
1554
- counting positions. Measured in Chromium over eight slides, six across gave
1555
- three dots, a pane taking the whole track and five slides reachable only by
1556
- dragging. Written from here there is no ceiling to exceed, and a consumer's
1557
- own sheet reads the same declaration the styled one does. `runEnd` publishes
1558
- its correction the same way and for the same reason.
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
- The styled sheet says how it divides, and the headless `auto` example
1584
- carries the same three lines for a consumer writing their own.
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 the styled tier enumerated `per-view="2"` through `5` and called five a
1613
- judgment; above it the pane fell back to one across while this file went on
1614
- counting positions. Measured in Chromium over eight slides, six across gave
1615
- three dots, a pane taking the whole track and five slides reachable only by
1616
- dragging. Written from here there is no ceiling to exceed, and a consumer's
1617
- own sheet reads the same declaration the styled one does. `runEnd` publishes
1618
- its correction the same way and for the same reason.
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
- The styled sheet says how it divides, and the headless `auto` example
1644
- carries the same three lines for a consumer writing their own.
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">` and the
1839
- client turns it into `<helix-chat label="x" pinned>`: a hydration mismatch a
1840
- React consumer reports and does not patch up. Nothing needs the attribute
1841
- either, because the one thing that changes with the pin is the way back, and
1842
- that is a part inside the shadow tree where a stylesheet can already reach
1843
- it. Measured rather than assumed: `label, pinned` after upgrade against
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.** `code-block.css`
2038
- reserves the copy button's width with `:host(:not([no-copy]))`, so the
2039
- attribute is what decides whether the block pays for a control. Unreflected,
2040
- setting it from script takes the button away (`render` reads the property)
2041
- and leaves the 40px it stood in reserved.
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.** `code-block.css`
2058
- reserves the copy button's width with `:host(:not([no-copy]))`, so the
2059
- attribute is what decides whether the block pays for a control. Unreflected,
2060
- setting it from script takes the button away (`render` reads the property)
2061
- and leaves the 40px it stood in reserved.
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
- `<helix-color-picker name="brand" required>` inside a form has every reason
2369
- to expect the form to refuse an empty one. Its two siblings in the same
2370
- composition position, Date Picker and Time Picker, both check it.
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
- `helix-pagination-size`, which a consumer puts in the `footer` slot and
3034
- answers themselves. Routing this through `requestChange` would announce an
3035
- event the element never has cause to fire. */
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
- `helix-pagination-size`, which a consumer puts in the `footer` slot and
3042
- answers themselves. Routing this through `requestChange` would announce an
3043
- event the element never has cause to fire. */
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`, which the styled tier reads as `:host(:not([placement]))`
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-format-date elapsed>2026-08-27T01:00:00Z</helix-format-date>` is the
4423
- spelling that reads best in markup, and it cannot be the only one: measured
4424
- against Lit's server shim, `textContent`, `children`, `firstChild` and
4425
- `querySelector` are all `undefined` there, so a server has no way to see it.
4426
- An element rendered on a server needs the attribute; one rendered in a
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 `--heatmap-cell-inline-size` and `--heatmap-gap` are
4528
- enough on their own and these two are the estimate used until the first
4529
- measurement lands. Writing the attribute pins the value and stops the
4530
- measurement being consulted, which is what a container query or a transition
4531
- on the cell size wants, where what is drawn this frame is not what the
4532
- arithmetic should plan around.
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 `--heatmap-cell-inline-size` and `--heatmap-gap` are
4546
- enough on their own and these two are the estimate used until the first
4547
- measurement lands. Writing the attribute pins the value and stops the
4548
- measurement being consulted, which is what a container query or a transition
4549
- on the cell size wants, where what is drawn this frame is not what the
4550
- arithmetic should plan around.
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 serialized `<helix-image status="loaded">` pasted
4879
- back declares that a picture has arrived which this element has never
4880
- fetched. The `data-` name is the library's answer to both, being a name a
4881
- re-parse cannot mistake for a declaration, and it is what `data-closed` on
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 HTML types;
4965
- against `read-only` it parses to no property at all, and the field stays
4966
- editable with no error anywhere. Measured on the dash-cased form, `readOnly`
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 HTML types;
4975
- against `read-only` it parses to no property at all, and the field stays
4976
- editable with no error anywhere. Measured on the dash-cased form, `readOnly`
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 attribute no
4999
- consumer's markup has, which is the fault the area rules write up under
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 and
5399
- the styled tier maps each to a `list-style-type`. The platform's spellings
5400
- rather than the CSS ones, so `<helix-list kind="ordered" type="i">` is what
5401
- a consumer would have written on an `<ol>`.
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 without `read`
6070
- and would gain it on the first update, which React reports as a hydration
6071
- mismatch, and which a copy of the serialized element re-parses as a
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 attribute
6826
- no consumer's markup had. The area rules carry the sentence "reflect only
6827
- what CSS selects on". The real inputs take it as a binding, which is what
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 `helix-flex` around it, because the unit has to
8416
- stay on the value's baseline whichever way the pair goes, and only this
8417
- element knows which of its children the unit belongs to.
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 sit
8609
- above each other. Left unset the cell inherits the table's own alignment,
8610
- which is `start` for text in either writing direction. `helix-data-table`
8611
- aligns the cells it draws. A `helix-table`'s cells are markup the consumer
8612
- wrote, so the table writes nothing onto them: it publishes the edge to each
8613
- cell under this column as `--table-cell-align`, which `@fusion.dev/helix`
8614
- reads. The heading is this element's own, and `@fusion.dev/helix` sets it to
8615
- the same edge in either table. `end` is the inline end, so in a
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
- in its place in a `helix-table`'s `columns`, where that table sets one, and
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 `helix-table-column` children, each track sizes the column in its
8725
- place, a hidden column counted, so hiding one takes its track with it and
8726
- the rest keep theirs. The columns decide how many tracks there are and this
8727
- list only how wide: a track past the last column is dropped, and a column
8728
- past the last track shares what is left. With no columns declared it is
8729
- the whole track list. Tracks count as the grid counts them, so
8730
- `minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid
8731
- would refuse leaves its column at the default rather than taking the table
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
- **`helix-data-table` has none of this, and should not.** Its columns are
8747
- its schema rather than an option, so there is always a column to write a
8748
- `width` on and a list here would be a second way to say what that says.
8749
- This table's cells are markup, and a table written as rows of cells with no
8750
- `helix-table-column` in it has nowhere else to be sized from. Both families
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. `helix-time-picker` carries the longer note on the interaction and on
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. `helix-time-picker` carries the longer note on the trade.
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 `helix-date-picker` uses,
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. The styled sheet carries the resting
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 value="light"
9738
- selected>` reported `defaultSelected` as `false` both from parsed markup
9739
- and from `createElement` followed by `setAttribute`, which is every way a
9740
- consumer writes one. The snapshot could only ever be true for an element
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 when one series owns it. It resolves a `--helix-color-series-*` token, so on the headless tier alone it names something that is not there. #138. */
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; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. */
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. `--data-table-columns` is the one to set. */
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. `--table-columns` is the one to set. */
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;