@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.
Files changed (71) hide show
  1. package/custom-elements.json +184 -193
  2. package/dist/accordion/item/accordion-item.d.ts +13 -13
  3. package/dist/accordion/root/accordion-root.d.ts +1 -1
  4. package/dist/area-chart/root/area-chart-root.js +1 -1
  5. package/dist/avatar/group/avatar-group.d.ts +11 -11
  6. package/dist/bar-chart/root/bar-chart-root.d.ts +1 -1
  7. package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +6 -6
  8. package/dist/button/root/button-root.d.ts +1 -1
  9. package/dist/card/root/card-root.d.ts +1 -1
  10. package/dist/carousel/root/carousel-root.d.ts +19 -20
  11. package/dist/chat/composer/chat-composer.d.ts +6 -6
  12. package/dist/chat/root/chat-root.d.ts +9 -9
  13. package/dist/checkbox/root/checkbox-root.d.ts +2 -2
  14. package/dist/checkbox-group/root/checkbox-group-root.d.ts +4 -4
  15. package/dist/code-block/root/code-block-root.d.ts +5 -5
  16. package/dist/color-input/root/color-input-root.d.ts +3 -3
  17. package/dist/color-picker/root/color-picker-root.d.ts +14 -14
  18. package/dist/combobox/root/combobox-root.d.ts +9 -5
  19. package/dist/combobox/root/combobox-root.js +2 -3
  20. package/dist/command/root/command-root.d.ts +6 -7
  21. package/dist/data-table/root/data-table-root.d.ts +42 -41
  22. package/dist/data-table/root/order.d.ts +3 -3
  23. package/dist/date-input/root/date-input-root.d.ts +12 -11
  24. package/dist/dialog/root/dialog-root.d.ts +4 -4
  25. package/dist/donut-chart/root/donut-chart-root.d.ts +1 -1
  26. package/dist/drawer/root/drawer-root.d.ts +5 -5
  27. package/dist/filter-input/menu/filter-menu.d.ts +7 -1
  28. package/dist/filter-input/menu/filter-menu.js +2 -1
  29. package/dist/filter-input/root/filter-input-root.d.ts +13 -14
  30. package/dist/format-date/root/format-date-root.d.ts +6 -5
  31. package/dist/heatmap/root/heatmap-root.d.ts +11 -16
  32. package/dist/image/root/image-root.d.ts +4 -4
  33. package/dist/input/root/input-root.d.ts +7 -7
  34. package/dist/line-chart/root/line-chart-root.d.ts +1 -2
  35. package/dist/list/item/list-item.d.ts +6 -7
  36. package/dist/list/root/list-root.d.ts +4 -4
  37. package/dist/megamenu/root/megamenu-root.d.ts +4 -4
  38. package/dist/notifications/notification/notification.d.ts +10 -10
  39. package/dist/notifications/root/notifications-root.d.ts +1 -1
  40. package/dist/object-inspector/root/object-inspector-root.d.ts +10 -0
  41. package/dist/object-inspector/root/object-inspector-root.js +6 -3
  42. package/dist/option/root/option-root.d.ts +7 -8
  43. package/dist/pagination/root/pagination-root.d.ts +5 -5
  44. package/dist/pagination/size/pagination-size.d.ts +2 -1
  45. package/dist/pin-input/root/pin-input-root.d.ts +4 -4
  46. package/dist/popover/root/popover-root.d.ts +7 -6
  47. package/dist/radio/root/radio-root.d.ts +1 -1
  48. package/dist/speed-dial/root/speed-dial-root.d.ts +8 -9
  49. package/dist/stat/root/stat-root.d.ts +3 -3
  50. package/dist/steps/root/steps-root.d.ts +1 -1
  51. package/dist/steps/step/step.d.ts +5 -5
  52. package/dist/table/column/table-column.d.ts +28 -28
  53. package/dist/table/root/table-root.d.ts +14 -17
  54. package/dist/table/row/table-row.d.ts +4 -4
  55. package/dist/tabs/panel/tab-panel.d.ts +2 -2
  56. package/dist/time-input/root/time-input-root.d.ts +13 -13
  57. package/dist/time-picker/root/time-picker-root.d.ts +8 -8
  58. package/dist/toast/root/toast-root.d.ts +2 -2
  59. package/dist/toggle/root/toggle-root.d.ts +5 -5
  60. package/dist/tooltip/root/tooltip-root.d.ts +2 -2
  61. package/dist/tour/stop/tour-stop.d.ts +3 -3
  62. package/dist/tree/item/tree-item.d.ts +2 -2
  63. package/dist/tree/root/tree-root.d.ts +8 -7
  64. package/dist/tree/root/tree-root.js +1 -1
  65. package/dist/video-playlist/menu/video-playlist-menu.d.ts +7 -1
  66. package/dist/video-playlist/menu/video-playlist-menu.js +4 -2
  67. package/dist/video-playlist/root/video-playlist-root.d.ts +5 -5
  68. package/dist/video-playlist/root/video-playlist-root.js +2 -3
  69. package/package.json +5 -5
  70. package/types/jsx.d.ts +958 -990
  71. package/types/vue.d.ts +229 -244
@@ -10,19 +10,19 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
10
10
  *
11
11
  * @description
12
12
  * **The schema is markup and the data is a property.** Columns are declared as
13
- * `helix-table-column` children, because a schema is small and something a
14
- * reader should see in the HTML; rows are handed over as an array, because a
15
- * table that draws ten thousand elements cannot window them.
13
+ * `TableColumn` children, because a schema is small and something a reader
14
+ * should see in the HTML; rows are handed over as an array, because a table
15
+ * that draws ten thousand elements cannot window them.
16
16
  *
17
17
  * ```html
18
- * <helix-data-table .rows=${rows} sort="name:asc" page-size="20">
19
- * <helix-table-column field="name" sortable>Name</helix-table-column>
20
- * <helix-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-table-column>
21
- * </helix-data-table>
18
+ * <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
19
+ * <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
20
+ * <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
21
+ * </helix-headless-data-table>
22
22
  * ```
23
23
  *
24
- * `helix-table` takes rows as markup and is the right component for a table of
25
- * twelve things a person wrote out.
24
+ * `Table` takes rows as markup and is the right component for a table of twelve
25
+ * things a person wrote out.
26
26
  *
27
27
  * **Sort and filter apply to the whole set, never the page.** Sorting the drawn
28
28
  * window is correct on the first screen and wrong on every other one.
@@ -31,14 +31,15 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
31
31
  * elements do, but reading a cell needs the columns, and the columns are markup
32
32
  * children Lit SSR does not hand this element. So a crawler sees a table of the
33
33
  * right shape with nothing in it. That is the cost of the first paragraph: use
34
- * `helix-table` where the served HTML has to carry the values.
34
+ * `Table` where the served HTML has to carry the values.
35
35
  *
36
36
  * **`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is
37
37
  * selected by its identity rather than its position, so a selection survives a
38
38
  * sort, a filter and a page. `selected` is the chosen keys, comma separated, the
39
- * shape Listbox uses for a multiple choice, and like `sort` it is controlled
40
- * when set and seeded by `default-selected`. The box in the heading selects every
41
- * row in the result, across pages, and shows a dash while only some are chosen.
39
+ * shape Listbox uses for a multiple choice, and like `sort` writing it applies
40
+ * while `default-selected` is what the markup declared. The box in the heading
41
+ * selects every row in the result, across pages, and shows a dash while only
42
+ * some are chosen.
42
43
  * Choosing one of many, rather than several, is opening a row, and that is a
43
44
  * link or a button in a cell rather than a selection.
44
45
  *
@@ -52,14 +53,13 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
52
53
  * in the order on screen, in the columns on screen. Saving it is the page's
53
54
  * business, the same as any other file.
54
55
  *
55
- * **There is no `columns` attribute here, and `helix-table` has one.** The
56
- * difference is what a column is in each: here it is the schema, so a table
57
- * without one has nothing to read a row with, and every column is a place to
58
- * write a `width`. A `helix-table` holds cells a consumer wrote and can be
59
- * written with no column at all, so its `columns` is where such a table is
60
- * sized from. Written on this element the attribute is inert, which is the trap
61
- * worth knowing when moving between the two. What both take is the CSS hook,
62
- * `--data-table-columns` here and `--table-columns` there.
56
+ * **There is no `columns` attribute here, and Table has one.** The difference
57
+ * is what a column is in each: here it is the schema, so a table without one
58
+ * has nothing to read a row with, and every column is a place to write a
59
+ * `width`. A Table holds cells a consumer wrote and can be written with no
60
+ * column at all, so its `columns` is where such a table is sized from. Written
61
+ * on this element the attribute is inert, which is the trap worth knowing when
62
+ * moving between the two.
63
63
  *
64
64
  * @since 0.1.0
65
65
  * @status stable
@@ -67,7 +67,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
67
67
  * @aliases Grid, Result table, Data grid
68
68
  * @documentation https://fusion.dev/helix/components/data-table
69
69
  *
70
- * @slot - The columns, declared as `helix-table-column` children.
70
+ * @slot - The columns, declared rather than drawn.
71
71
  * @slot footer - Below the grid, replacing the pagination this would otherwise draw.
72
72
  * @slot toolbar - Above the grid, for a search field or actions.
73
73
  *
@@ -115,18 +115,19 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
115
115
  * @csspart table - The grid.
116
116
  * @csspart toolbar - The region above the grid.
117
117
  *
118
- * @cssproperty --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; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name.
119
- * @cssproperty --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. `--data-table-columns` is the one to set.
118
+ * @cssproperty --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.
119
+ * @cssproperty --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.
120
120
  */
121
121
  export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
122
122
  /**
123
123
  * Nothing is assigned by name, so the columns can be put in a header row.
124
124
  *
125
- * `role="columnheader"` under `role="grid"` with no owning row is invalid, and
126
- * the columns are ordinary children a consumer writes with no `slot`. Manual
127
- * assignment is the only way to wrap them without editing the consumer's
128
- * markup, which is a change a React consumer's hydration reports and does not
129
- * patch up. The same arrangement `helix-table` arrived at, for the same reason.
125
+ * `role="columnheader"` under `role="grid"` with no owning row is invalid,
126
+ * and the columns are ordinary children a consumer writes with no `slot`.
127
+ * Manual assignment is the only way to wrap them without editing the
128
+ * consumer's markup, which is a change a React consumer's hydration reports
129
+ * and does not patch up. The same arrangement `Table` arrived at, for the
130
+ * same reason.
130
131
  */
131
132
  static shadowRootOptions: ShadowRootInit;
132
133
  /**
@@ -273,9 +274,9 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
273
274
  *
274
275
  * **It announces nothing, and that is not an omission.** Nothing in this
275
276
  * element ever asks for a different page size: a size selector is
276
- * `helix-pagination-size`, which a consumer puts in the `footer` slot and
277
- * answers themselves. Routing this through `requestChange` would announce an
278
- * event the element never has cause to fire.
277
+ * `PaginationSize`, which a consumer puts in the `footer` slot and answers
278
+ * themselves. Routing this through `requestChange` would announce an event
279
+ * the element never has cause to fire.
279
280
  */
280
281
  get pageSize(): number;
281
282
  set pageSize(next: number);
@@ -613,17 +614,17 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
613
614
  /**
614
615
  * One cell, carrying its column's edge as a fact rather than as a decision.
615
616
  *
616
- * **A fact published rather than a property chosen**, which is what
617
- * `helix-table` does with the same attribute: what lining up *means*, a
618
- * `justify-content` for a value that fits or a `text-align` for one that
619
- * wraps, belongs to whoever draws the cell. Written here as an inline
620
- * `text-align` it was this tier choosing, in the tier that ships no CSS, and a
621
- * consumer could not overrule it either, an inline declaration beating any
622
- * `::part(cell)` rule they wrote.
617
+ * **A fact published rather than a property chosen**, which is what `Table`
618
+ * does with the same attribute: what lining up *means*, a `justify-content`
619
+ * for a value that fits or a `text-align` for one that wraps, belongs to
620
+ * whoever draws the cell. Written here as an inline `text-align` it was this
621
+ * tier choosing, in the tier that ships no CSS, and a consumer could not
622
+ * overrule it either, an inline declaration beating any `::part(cell)` rule
623
+ * they wrote.
623
624
  *
624
625
  * Only the three edges reach it, `align` being a string anybody can write and
625
- * this being a style attribute: `edgeOf` is that guard, and `helix-table`
626
- * holds the same value to the same three.
626
+ * this being a style attribute: `edgeOf` is that guard, and `Table` holds the
627
+ * same value to the same three.
627
628
  */
628
629
  private renderCell;
629
630
  /**
@@ -87,9 +87,9 @@ export declare const sort: (rows: readonly DataRow[], spec: Sort | undefined, ax
87
87
  * One page of rows, clamped.
88
88
  *
89
89
  * A page past the end returns the last page rather than nothing, because the
90
- * usual way to be past the end is a bookmarked link after the result shrank, and
91
- * an empty table is a worse answer than the last page of a smaller one. The
92
- * same clamp `helix-pagination` already applies to what it reports.
90
+ * usual way to be past the end is a bookmarked link after the result shrank,
91
+ * and an empty table is a worse answer than the last page of a smaller one. The
92
+ * same clamp `Pagination` already applies to what it reports.
93
93
  */
94
94
  export declare const window_: (rows: readonly DataRow[], page: number, size: number) => DataRow[];
95
95
  /** What arranging produces: the rows in order, with no page or window taken. */
@@ -7,9 +7,9 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
7
7
  * @summary A date, typed or picked from a calendar.
8
8
  *
9
9
  * @description
10
- * **The calendar is `helix-date-picker`, not a second one written here.** It
11
- * already knows about months, ranges, disabled days, the first day of the week
12
- * and every keyboard rule a grid owes a reader. This element is the field, the
10
+ * **The calendar is `DatePicker`, not a second one written here.** It already
11
+ * knows about months, ranges, disabled days, the first day of the week and
12
+ * every keyboard rule a grid owes a reader. This element is the field, the
13
13
  * overlay, and the translation between them.
14
14
  *
15
15
  * **Typed as well as picked, and the typing is why it is not
@@ -260,14 +260,15 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
260
260
  * Slot fallback, so a consumer replaces it by slotting; and a method, so the
261
261
  * tier above replaces it by overriding.
262
262
  *
263
- * **A named import rather than `<helix-icon>`**, which loses on three counts.
264
- * `helix-icon` indexes the whole icon map at runtime, `icons[this.name]`, and
265
- * no bundler can shake a runtime lookup, so every consumer of any component
266
- * that renders one ships all 50kB of path data; a named import ships one
267
- * path. The import is checked when the package compiles, where a `name`
268
- * string is checked only by a later name lookup. And `helix-icon` is not
269
- * registered on the headless tier at all, which registers `helix-headless-icon`,
270
- * so a headless consumer gets an inert unknown element and no mark whatsoever.
263
+ * **A named import rather than `<helix-headless-icon>`**, which loses on
264
+ * three counts. `Icon` indexes the whole icon map at runtime,
265
+ * `icons[this.name]`, and no bundler can shake a runtime lookup, so every
266
+ * consumer of any component that renders one ships all 50kB of path data; a
267
+ * named import ships one path. The import is checked when the package
268
+ * compiles, where a `name` string is checked only by a later name lookup. And
269
+ * `Icon` is not registered on the headless tier at all, which registers
270
+ * `helix-headless-icon`, so a headless consumer gets an inert unknown element
271
+ * and no mark whatsoever.
271
272
  */
272
273
  protected renderTrigger(): TemplateResult;
273
274
  protected render(): TemplateResult;
@@ -148,10 +148,10 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
148
148
  * restarts it: without that, pressing twice does nothing the second time,
149
149
  * which is the impression the whole thing exists to avoid.
150
150
  *
151
- * **`once: true` is not a release when the event cannot arrive.** Under
152
- * `prefers-reduced-motion: reduce` the styled tier sets `animation: none`, so
153
- * no animation runs, `animationend` never fires, and every refused press left
154
- * a listener that could not be removed and an attribute that stayed on. The
151
+ * **`once: true` is not a release when the event cannot arrive.** A sheet
152
+ * that sets `animation: none` under `prefers-reduced-motion: reduce` runs
153
+ * none, so `animationend` never fires, and every refused press left a
154
+ * listener that could not be removed and an attribute that stayed on. The
155
155
  * controller bounds it to one listener, aborted before the next is added.
156
156
  *
157
157
  * **And the attribute is cleared at once when no animation is running**, asked
@@ -91,7 +91,7 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
91
91
  * `--donut-chart-stroke`, which is a number a rule can do sums with where the
92
92
  * word is not. Reflected, it wrote a value onto every host a script had set
93
93
  * it on for nothing to read. `sweep` beside it is the converse and reflects,
94
- * because three rules select on it.
94
+ * because the styled sheet selects on it.
95
95
  */
96
96
  hole?: 'large' | 'none' | 'small';
97
97
  /**
@@ -24,8 +24,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
24
24
  * Opened declaratively with the platform's invoker attributes:
25
25
  *
26
26
  * ```html
27
- * <helix-button commandfor="nav" command="--toggle">Menu</helix-button>
28
- * <helix-drawer id="nav">…</helix-drawer>
27
+ * <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button>
28
+ * <helix-headless-drawer id="nav">…</helix-headless-drawer>
29
29
  * ```
30
30
  *
31
31
  * @since 0.1.0
@@ -84,10 +84,10 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
84
84
  /**
85
85
  * Which edge the drawer comes from.
86
86
  *
87
- * Unset is `end`, which the styled tier reads as `:host(:not([placement]))`
88
- * beside `:host([placement="end"])` rather than as a value written here: a
87
+ * Unset is `end`, and it stays unset rather than being written down: a
89
88
  * default assigned to the property would reflect onto every host and put a
90
- * `placement="end"` into markup no consumer wrote.
89
+ * `placement="end"` into markup no consumer wrote. So what this tier
90
+ * guarantees is the absence, and a sheet selects on it.
91
91
  */
92
92
  placement?: 'start' | 'end' | 'top' | 'bottom';
93
93
  /**
@@ -1,6 +1,6 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import { type PropertyValues, type TemplateResult } from 'lit';
3
- import type { HelixHeadlessFilterField } from '../field/filter-field.js';
3
+ import { HelixHeadlessFilterField } from '../field/filter-field.js';
4
4
  import type { FilterGrammarOperator } from '../grammar.js';
5
5
  import '../../divider/index.js';
6
6
  import '../../menu/index.js';
@@ -97,6 +97,12 @@ export declare class HelixHeadlessFilterMenu extends HelixElement {
97
97
  *
98
98
  * What a render may know of them: none on a server, whose shim has no tree
99
99
  * and threw here, and none while hydrating what one sent.
100
+ *
101
+ * By identity rather than by tag. A list of names can only hold the tags this
102
+ * package knows about, so it misses any third one, which is what subclassing
103
+ * a headless element produces, and it is also how a headless package learns a
104
+ * styled tag. `instanceof` answers for every one of them and proves the type
105
+ * the signature claims.
100
106
  */
101
107
  get fields(): HelixHeadlessFilterField[];
102
108
  protected firstUpdated(changed: PropertyValues): void;
@@ -8,6 +8,7 @@ import { customElement, HelixElement, HelixFacetEvent } from '@fusion.dev/helix-
8
8
  import { nothing } from 'lit';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { html } from 'lit/static-html.js';
11
+ import { HelixHeadlessFilterField } from '../field/filter-field.js';
11
12
  import '../../divider/index.js';
12
13
  import '../../menu/index.js';
13
14
  let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement {
@@ -49,7 +50,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
49
50
  };
50
51
  }
51
52
  get fields() {
52
- return this.knownChildren.filter((child) => ['helix-headless-filter-field', 'helix-filter-field'].includes(child.localName));
53
+ return this.knownChildren.filter((child) => child instanceof HelixHeadlessFilterField);
53
54
  }
54
55
  firstUpdated(changed) {
55
56
  super.firstUpdated(changed);
@@ -43,12 +43,12 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
43
43
  * `FilterField` already plays on its own children.
44
44
  *
45
45
  * **It can suggest what to type next, and deciding what to suggest is still the
46
- * consumer's.** Slot `helix-option` elements into `suggestions` and the field
47
- * shows them, moves through them with the arrows, and lets Enter press one; the
48
- * option fires its own `helix-select` and the consumer decides what choosing
49
- * meant. Keys before a colon and values after it are the same panel with
50
- * different contents, and `readFilterText` is exported for a consumer narrowing
51
- * that panel against what a reader has half typed.
46
+ * consumer's.** Slot options into `suggestions` and the field shows them, moves
47
+ * through them with the arrows, and lets Enter press one; the option fires its
48
+ * own `helix-select` and the consumer decides what choosing meant. Keys before
49
+ * a colon and values after it are the same panel with different contents, and
50
+ * `readFilterText` is exported for a consumer narrowing that panel against what
51
+ * a reader has half typed.
52
52
  *
53
53
  * **The panel opens when there is something in it and closes when there is
54
54
  * not**, rather than on a choice. A reader who picks a key wants its values
@@ -56,20 +56,19 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
56
56
  * `selectionStart` and `setSelectionRange` to write a completion back and put
57
57
  * the caret after it, or the next parse reads the wrong term.
58
58
  *
59
- * **Three things here have three different owners, and only one of them is a
60
- * controlled property.**
59
+ * **Three things here have three different owners.**
61
60
  *
62
- * `value` is the text, and it is uncontrolled by default: the reader types, the
63
- * element applies it, and `input` says so. **Writing `value` does not take that
64
- * over.** It is a seed and a correction, so a consumer who sets it and then
65
- * expects the field to hold still will watch the next keystroke overwrite them.
61
+ * `value` is the text: the reader types, the element applies it, and `input`
62
+ * says so. **Writing `value` does not take that over.** It is a seed and a
63
+ * correction, so a consumer who sets it and then expects the field to hold
64
+ * still will watch the next keystroke overwrite them.
66
65
  * Ownership is taken by refusing `helix-before-change` and writing the value
67
66
  * you want, which is the same shape every field in this library uses and is
68
67
  * worth saying out loud here because the property looks like React's.
69
68
  * `default-value` seeds the field without claiming anything.
70
69
  *
71
- * `open` is the suggestions panel, and it is the ordinary controlled pair:
72
- * refuse `helix-before-open` or `helix-before-close` to take the decision, and
70
+ * `open` is the suggestions panel, and it is the ordinary pair: refuse
71
+ * `helix-before-open` or `helix-before-close` to take the decision, and
73
72
  * `default-open` to seed it.
74
73
  *
75
74
  * The tokens are neither, because they are not state. They are the consumer's
@@ -47,11 +47,12 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
47
47
  * would give.
48
48
  *
49
49
  * **The element's own text is read as a fallback, and only in a browser.**
50
- * `<helix-format-date elapsed>2026-08-27T01:00:00Z</helix-format-date>` is the
51
- * spelling that reads best in markup, and it cannot be the only one: measured
52
- * against Lit's server shim, `textContent`, `children`, `firstChild` and
53
- * `querySelector` are all `undefined` there, so a server has no way to see it.
54
- * An element rendered on a server needs the attribute; one rendered in a
50
+ * `<helix-headless-format-date
51
+ * elapsed>2026-08-27T01:00:00Z</helix-headless-format-date>` is the spelling
52
+ * that reads best in markup, and it cannot be the only one: measured against
53
+ * Lit's server shim, `textContent`, `children`, `firstChild` and
54
+ * `querySelector` are all `undefined` there, so a server has no way to see
55
+ * it. An element rendered on a server needs the attribute; one rendered in a
55
56
  * browser may use either.
56
57
  */
57
58
  date: string;
@@ -63,11 +63,6 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
63
63
  * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
64
64
  * @csspart tooltip-value - A column's value inside the tooltip.
65
65
  *
66
- * @cssproperty --heatmap-cell-height - How tall a cell is. A row of a tall thin cell is what a status page draws.
67
- * @cssproperty --heatmap-cell-inline-size - How wide a cell is. The strip fits as many as the container allows.
68
- * @cssproperty --heatmap-cell-radius - How far a cell's corners are rounded.
69
- * @cssproperty --heatmap-cell-size - The size a cell wants on both axes, where neither is given its own.
70
- * @cssproperty --heatmap-gap - Space between cells. Zero is a continuous field rather than a grid of tiles.
71
66
  * @cssproperty --heatmap-rows - How many rows the strip lays out. Written by the component from the data, read by the tier that draws it.
72
67
  * @cssproperty --heatmap-tone - The tone of the cell this is set on. Written by the component, read by the sheet that paints.
73
68
  * @cssproperty --heatmap-tone-1 - The quietest step of the magnitude ramp, reached by `tones="1 …"`.
@@ -105,12 +100,12 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
105
100
  * consumer has to keep by hand, and the one number a summary is told to trust
106
101
  * is the one it gets wrong.
107
102
  *
108
- * The strip measures itself, so `--heatmap-cell-inline-size` and `--heatmap-gap` are
109
- * enough on their own and these two are the estimate used until the first
110
- * measurement lands. Writing the attribute pins the value and stops the
111
- * measurement being consulted, which is what a container query or a transition
112
- * on the cell size wants, where what is drawn this frame is not what the
113
- * arithmetic should plan around.
103
+ * The strip measures itself, so sizing the cells in a sheet is enough on its
104
+ * own and these two are the estimate used until the first measurement lands.
105
+ * Writing the attribute pins the value and stops the measurement being
106
+ * consulted, which is what a container query or a transition on the cell size
107
+ * wants, where what is drawn this frame is not what the arithmetic should
108
+ * plan around.
114
109
  *
115
110
  * Zero turns the dropping off altogether, which is right for a strip in a
116
111
  * container that cannot get narrow.
@@ -176,13 +171,13 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
176
171
  /**
177
172
  * The cell and gap the strip is drawing, in pixels, once it has been read.
178
173
  *
179
- * **The arithmetic's inputs are a stylesheet's decisions, so the honest way to
180
- * learn them is to ask the stylesheet.** A cell's size is a length that only
181
- * the cascade can resolve: it may be a `rem` against a root font size, a
174
+ * **The arithmetic's inputs are a stylesheet's decisions, so the honest way
175
+ * to learn them is to ask the stylesheet.** A cell's size is a length that
176
+ * only the cascade can resolve: it may be a `rem` against a root font size, a
182
177
  * percentage of a container, or whatever a container query chose this frame.
183
178
  * Every one of those is invisible to a number typed into an attribute, and
184
- * each of `--heatmap-cell-inline-size`, `--heatmap-cell-height` and `--heatmap-gap`
185
- * added one more way for the two to drift apart silently.
179
+ * every hook a sheet offers for the cell box or the gap is one more way for
180
+ * the two to drift apart silently.
186
181
  *
187
182
  * Reading it back is not styling and does not breach the tier: this asks what
188
183
  * was decided rather than deciding, which is the same direction as the facts
@@ -93,10 +93,10 @@ export declare class HelixHeadlessImage extends HelixElement {
93
93
  * **Mirrored to `data-status`, and not reflected as `status`.** It is element
94
94
  * state, so reflecting it puts the element's own bookkeeping into the markup
95
95
  * a consumer rendered: React reads the attribute appearing at upgrade as a
96
- * hydration mismatch, and a serialized `<helix-image status="loaded">` pasted
97
- * back declares that a picture has arrived which this element has never
98
- * fetched. The `data-` name is the library's answer to both, being a name a
99
- * re-parse cannot mistake for a declaration, and it is what `data-closed` on
96
+ * hydration mismatch, and a host pasted back carrying `status="loaded"`
97
+ * declares that a picture has arrived which this element has never fetched.
98
+ * The `data-` name is the library's answer to both, being a name a re-parse
99
+ * cannot mistake for a declaration, and it is what `data-closed` on
100
100
  * `Toast.Item` already does. A picture arrives after somebody fetched it,
101
101
  * which puts this on the safe side of hydration: a fact that can be true on
102
102
  * the *first* update mirrors to a custom state instead, which is what
@@ -100,10 +100,10 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
100
100
  * **The attribute is `readonly`, which is the platform's spelling.** A
101
101
  * camelCase property needs an explicit `attribute`, and dash-casing a word
102
102
  * HTML writes as one costs what an attribute always costs here: nothing
103
- * warns. `<helix-input readonly>` is what anybody who has written HTML types;
104
- * against `read-only` it parses to no property at all, and the field stays
105
- * editable with no error anywhere. Measured on the dash-cased form, `readOnly`
106
- * came back `false`.
103
+ * warns. `<helix-headless-input readonly>` is what anybody who has written
104
+ * HTML types; against `read-only` it parses to no property at all, and the
105
+ * field stays editable with no error anywhere. Measured on the dash-cased
106
+ * form, `readOnly` came back `false`.
107
107
  */
108
108
  readOnly: boolean;
109
109
  /**
@@ -218,9 +218,9 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
218
218
  *
219
219
  * **Not reflected.** Reflection exists so a selector can reach a value, and
220
220
  * no stylesheet in this repository selects on `type`. Reflecting it writes
221
- * `type="text"` onto every `<helix-input>` ever rendered, an attribute no
222
- * consumer's markup has, which is the fault the area rules write up under
223
- * `Button`'s `href`, `target` and `rel`.
221
+ * `type="text"` onto every `<helix-headless-input>` ever rendered, an
222
+ * attribute no consumer's markup has, which is the fault the area rules write
223
+ * up under `Button`'s `href`, `target` and `rel`.
224
224
  *
225
225
  * Nothing reads it from the attribute either. The real `<input>` inside takes
226
226
  * it as a property binding, which is what makes the keyboard and the
@@ -156,8 +156,7 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
156
156
  * over something busy. `triangle` points along the axis and reads as "and
157
157
  * onward" rather than as a second claim about the data.
158
158
  *
159
- * The shapes come from
160
- * `helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
159
+ * The shapes come from one shared sheet, the same one `Sparkline` takes, so
161
160
  * the set is identical wherever one appears. **Which is why every value is
162
161
  * named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
163
162
  * undocumented until the cohort before this one; this family reads the same
@@ -65,13 +65,12 @@ export declare class HelixHeadlessListItem extends HelixElement {
65
65
  * beside the words rather than at the edge of the block. A number that has to
66
66
  * sit in a track has to be a box in that track.
67
67
  *
68
- * **The box belongs to the styled tier, which is why this returns `nothing`.**
69
- * Rendering it here puts an unstyled empty box in front of every headless row,
70
- * and a row styled with `display: flex` and a `gap` draws that gap beside the
71
- * empty child: measured on this tier's own example, which is exactly such a
72
- * row, 1384 pixels moved and every label sat half a rem further in. The styled
73
- * row's own comment records the same fault about a column gap beside a
74
- * zero-width column.
68
+ * **The box belongs to the styled tier, which is why this returns
69
+ * `nothing`.** Rendering it here puts an unstyled empty box in front of every
70
+ * headless row, and a row styled with `display: flex` and a `gap` draws that
71
+ * gap beside the empty child: measured on this tier's own example, which is
72
+ * exactly such a row, 1384 pixels moved and every label sat half a rem
73
+ * further in.
75
74
  *
76
75
  * A tier that ships no CSS cannot make a box it renders cost nothing, so it
77
76
  * does not render one. `marker="rail"` is a styled-tier attribute for the same
@@ -47,10 +47,10 @@ export declare class HelixHeadlessList extends HelixElement {
47
47
  /**
48
48
  * Which markers an ordered list draws, in `<ol type>`'s own five values.
49
49
  *
50
- * Reflected, because this is one of the things a stylesheet selects on and
51
- * the styled tier maps each to a `list-style-type`. The platform's spellings
52
- * rather than the CSS ones, so `<helix-list kind="ordered" type="i">` is what
53
- * a consumer would have written on an `<ol>`.
50
+ * Reflected, because this is one of the things a stylesheet selects on, each
51
+ * value mapping to a `list-style-type`. The platform's spellings rather than
52
+ * the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
53
+ * consumer would have written on an `<ol>`.
54
54
  *
55
55
  * **`start` and `reversed` are both absent and neither can be done here.**
56
56
  * This renders no `<ol>`: the rows are slotted and numbered by the CSS
@@ -137,8 +137,8 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
137
137
  *
138
138
  * **The first ancestor as wide as the window, which is a fact and not a tag
139
139
  * name.** A band spans the viewport, so what it should hang from is whatever
140
- * else does: that is what makes something a bar. Asking for `helix-app-header`
141
- * by name would make this element know about that one, which is the coupling
140
+ * else does: that is what makes something a bar. Asking for `AppHeader` by
141
+ * name would make this element know about that one, which is the coupling
142
142
  * `Menu` is careful not to have with `Drilldown`, and would leave a consumer
143
143
  * who wrote their own header with a band across it.
144
144
  *
@@ -228,8 +228,8 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
228
228
  * The control that opens it, behind a seam the styled tier can move.
229
229
  *
230
230
  * The same case `SpeedDial` records: a bare `<button>` is what this tier can
231
- * write, `helix-button` lives a tier above, and a render method is how a tier
232
- * that has one reaches this without reimplementing the panel below it.
231
+ * write, `Button` lives a tier above, and a render method is how a tier that
232
+ * has one reaches this without reimplementing the panel below it.
233
233
  */
234
234
  protected renderTrigger(): TemplateResult;
235
235
  protected render(): TemplateResult;
@@ -6,9 +6,9 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
6
6
  * @summary One thing that happened, which a reader may not have seen yet.
7
7
  *
8
8
  * @description
9
- * A notification is a toast that did not go away. `helix-toast` is deliberately
10
- * the opposite of this: a live region whose items carry a `duration` and whose
11
- * root never creates or destroys anything. What makes this its own family is the
9
+ * A notification is a toast that did not go away. `Toast` is deliberately the
10
+ * opposite of this: a live region whose items carry a `duration` and whose root
11
+ * never creates or destroys anything. What makes this its own family is the
12
12
  * state each item carries rather than the arrangement it sits in: read and
13
13
  * unread, a timestamp that has to stay correct, and an action a reader can take
14
14
  * later.
@@ -20,9 +20,9 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
20
20
  * reader wants exactly one of them at a time: the time while they are scanning,
21
21
  * and what they can do about it once they have stopped on a row.
22
22
  *
23
- * **The timestamp is `helix-format-date`**, which is where the reading, the
24
- * `<time datetime>` and the shared timer now live. It was implemented here, and
25
- * a component that formats a date is not a fact about notifications: Chat wanted
23
+ * **The timestamp is `FormatDate`**, which is where the reading, the `<time
24
+ * datetime>` and the shared timer now live. It was implemented here, and a
25
+ * component that formats a date is not a fact about notifications: Chat wanted
26
26
  * the same thing and had its own copy of half of it.
27
27
  *
28
28
  * **Read state is reported, not invented.** Marking something read is usually a
@@ -86,10 +86,10 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
86
86
  *
87
87
  * **Not reflected.** Unread is a visual state, which is why the four mixins
88
88
  * mirror theirs, but the mirror may not be the property's own attribute:
89
- * `<helix-notification default-read>` comes back from a server without `read`
90
- * and would gain it on the first update, which React reports as a hydration
91
- * mismatch, and which a copy of the serialized element re-parses as a
92
- * declaration. `:state(read)` is what the stylesheet reads.
89
+ * `<helix-headless-notification default-read>` comes back from a server
90
+ * without `read` and would gain it on the first update, which React reports
91
+ * as a hydration mismatch, and which a copy of the serialized element
92
+ * re-parses as a declaration. `:state(read)` is what the stylesheet reads.
93
93
  * `hydration.dom.spec.ts` holds it.
94
94
  */
95
95
  get read(): boolean;
@@ -30,7 +30,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
30
30
  * @aliases Notification feed, Inbox, Activity
31
31
  * @documentation https://fusion.dev/helix/components/notifications
32
32
  *
33
- * @slot - The notifications, as `helix-notification` children.
33
+ * @slot - The notifications.
34
34
  * @slot footer - Below the list, for a link to everything.
35
35
  * @slot header - Above the list, for a title and the mark-all control.
36
36
  *
@@ -153,6 +153,16 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
153
153
  private active;
154
154
  /** Set by a keyboard move, so the next render brings the active row into view. */
155
155
  private revealing;
156
+ /**
157
+ * How tall a row is taken to be before it has been drawn, in pixels.
158
+ *
159
+ * A constant rather than the property `VirtualList` and `DataTable` carry:
160
+ * every row here is one line of the same text at this family's own leading,
161
+ * so there is nothing for a consumer to tell it. `reveal` falls back to this
162
+ * when a drawn row measures zero, and the two have to be the same number or a
163
+ * keyboard move scrolls by a different row than the window counted with.
164
+ */
165
+ static readonly ESTIMATE = 24;
156
166
  private readonly virtualize;
157
167
  private get root();
158
168
  /** Every visible row, in order, worked out once per change rather than per read. */