@fusion.dev/helix-headless 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 +118 -138
- package/dist/accordion/item/accordion-item.d.ts +13 -13
- package/dist/accordion/root/accordion-root.d.ts +1 -1
- package/dist/area-chart/root/area-chart-root.js +1 -1
- package/dist/avatar/group/avatar-group.d.ts +11 -11
- package/dist/bar-chart/root/bar-chart-root.d.ts +1 -1
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +6 -6
- package/dist/button/root/button-root.d.ts +1 -1
- package/dist/card/root/card-root.d.ts +1 -1
- package/dist/carousel/root/carousel-root.d.ts +14 -14
- package/dist/chat/composer/chat-composer.d.ts +6 -6
- package/dist/chat/root/chat-root.d.ts +9 -9
- package/dist/checkbox/root/checkbox-root.d.ts +2 -2
- package/dist/code-block/root/code-block-root.d.ts +5 -5
- package/dist/color-input/root/color-input-root.d.ts +3 -3
- package/dist/color-picker/root/color-picker-root.d.ts +14 -14
- package/dist/combobox/root/combobox-root.d.ts +9 -5
- package/dist/combobox/root/combobox-root.js +2 -3
- package/dist/command/root/command-root.d.ts +6 -7
- package/dist/data-table/root/data-table-root.d.ts +38 -38
- package/dist/data-table/root/order.d.ts +3 -3
- package/dist/date-input/root/date-input-root.d.ts +12 -11
- package/dist/dialog/root/dialog-root.d.ts +4 -4
- package/dist/drawer/root/drawer-root.d.ts +5 -5
- package/dist/filter-input/menu/filter-menu.d.ts +7 -1
- package/dist/filter-input/menu/filter-menu.js +2 -1
- package/dist/filter-input/root/filter-input-root.d.ts +6 -6
- package/dist/format-date/root/format-date-root.d.ts +6 -5
- package/dist/heatmap/root/heatmap-root.d.ts +11 -16
- package/dist/image/root/image-root.d.ts +4 -4
- package/dist/input/root/input-root.d.ts +7 -7
- package/dist/line-chart/root/line-chart-root.d.ts +1 -2
- package/dist/list/item/list-item.d.ts +6 -7
- package/dist/list/root/list-root.d.ts +4 -4
- package/dist/megamenu/root/megamenu-root.d.ts +4 -4
- package/dist/notifications/notification/notification.d.ts +10 -10
- package/dist/notifications/root/notifications-root.d.ts +1 -1
- package/dist/option/root/option-root.d.ts +3 -3
- package/dist/pagination/root/pagination-root.d.ts +2 -2
- package/dist/pin-input/root/pin-input-root.d.ts +4 -4
- package/dist/popover/root/popover-root.d.ts +7 -6
- package/dist/radio/root/radio-root.d.ts +1 -1
- package/dist/speed-dial/root/speed-dial-root.d.ts +8 -9
- package/dist/stat/root/stat-root.d.ts +3 -3
- package/dist/steps/root/steps-root.d.ts +1 -1
- package/dist/steps/step/step.d.ts +5 -5
- package/dist/table/column/table-column.d.ts +28 -28
- package/dist/table/root/table-root.d.ts +14 -17
- package/dist/table/row/table-row.d.ts +4 -4
- package/dist/tabs/panel/tab-panel.d.ts +2 -2
- package/dist/time-input/root/time-input-root.d.ts +13 -13
- package/dist/time-picker/root/time-picker-root.d.ts +8 -8
- package/dist/toast/root/toast-root.d.ts +2 -2
- package/dist/toggle/root/toggle-root.d.ts +5 -5
- package/dist/tooltip/root/tooltip-root.d.ts +2 -2
- package/dist/tour/stop/tour-stop.d.ts +3 -3
- package/dist/tree/item/tree-item.d.ts +2 -2
- package/dist/tree/root/tree-root.d.ts +8 -7
- package/dist/tree/root/tree-root.js +1 -1
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +7 -1
- package/dist/video-playlist/menu/video-playlist-menu.js +4 -2
- package/dist/video-playlist/root/video-playlist-root.d.ts +5 -5
- package/dist/video-playlist/root/video-playlist-root.js +2 -3
- package/package.json +5 -5
- package/types/jsx.d.ts +754 -780
- package/types/vue.d.ts +172 -185
|
@@ -25,9 +25,9 @@ export declare const at: (row: Readonly<Record<string, unknown>>, path: string)
|
|
|
25
25
|
*
|
|
26
26
|
* **`align` is a string anybody can write**, the union on the property being a
|
|
27
27
|
* compile-time claim and nothing else, and both tables put the value straight
|
|
28
|
-
* into CSS: `
|
|
29
|
-
*
|
|
30
|
-
*
|
|
28
|
+
* into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
|
|
29
|
+
* cell it draws. One guard, here with the property, rather than one in each
|
|
30
|
+
* table and only one of them written.
|
|
31
31
|
*/
|
|
32
32
|
export declare const edgeOf: (align: string | undefined) => string | undefined;
|
|
33
33
|
/**
|
|
@@ -38,23 +38,23 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
|
|
|
38
38
|
* the table has another track; remove one and it does not. That is what ties
|
|
39
39
|
* the two together, and a table-level track list on its own does not: a list
|
|
40
40
|
* that is accidentally the headings is invalid CSS a grid ignores in silence,
|
|
41
|
-
* drawing the whole table as one column. `
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
41
|
+
* drawing the whole table as one column. `Table`'s `columns` is dealt out a
|
|
42
|
+
* track at a time against the columns declared under it, so a heading among the
|
|
43
|
+
* widths costs its own column a width and no more, and a list longer or shorter
|
|
44
|
+
* than the columns is trimmed or shared rather than being a second count of
|
|
45
|
+
* them. A column's own `width` wins over the track in its place.
|
|
46
46
|
*
|
|
47
47
|
* **It is also where every per-column fact goes**, which is the reason
|
|
48
|
-
* `
|
|
49
|
-
*
|
|
50
|
-
*
|
|
48
|
+
* `DataTable` needs no column config object. `field` names the key the cell
|
|
49
|
+
* reads, `sortable` says a reader may reorder by it, `align` says which edge
|
|
50
|
+
* the values line up against, and `cell` takes a function for anything the
|
|
51
51
|
* field alone cannot express. The schema is markup and the data is a property:
|
|
52
52
|
* a schema is small, declarative, and something a reader should be able to see
|
|
53
53
|
* in the HTML, and data is large and windowed.
|
|
54
54
|
*
|
|
55
55
|
* **The same element serves both tables**, the markup one and the data one. It
|
|
56
|
-
* is identified by a flag rather than by `instanceof`, so a `
|
|
57
|
-
*
|
|
56
|
+
* is identified by a flag rather than by `instanceof`, so a `TableColumn` works
|
|
57
|
+
* inside either without the two roots sharing anything else.
|
|
58
58
|
*
|
|
59
59
|
* **It generates no box of its own**, the same as a row: the heading is a grid
|
|
60
60
|
* item of the table, so it lines up with the cells under it rather than sitting
|
|
@@ -64,10 +64,10 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
|
|
|
64
64
|
* both, so the columns after it keep their own widths and every row keeps its
|
|
65
65
|
* cells under their headings. `hidden="until-found"` keeps its track, the
|
|
66
66
|
* heading being left drawn, as every Helix element leaves one with that value.
|
|
67
|
-
* `
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
67
|
+
* `DataTable` draws the cells, so it leaves out the ones under a hidden column.
|
|
68
|
+
* A `Table`'s cells are markup the consumer wrote, so hide them with the
|
|
69
|
+
* column, as removing a column means removing its cells: a row with a cell more
|
|
70
|
+
* than the table has tracks wraps into the next.
|
|
71
71
|
*
|
|
72
72
|
* **A heading that does something holds a control that does it.** The host is
|
|
73
73
|
* the column header, and a header is not focusable, so a sortable heading is a
|
|
@@ -99,15 +99,15 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
|
|
|
99
99
|
/**
|
|
100
100
|
* Which edge the values line up against.
|
|
101
101
|
*
|
|
102
|
-
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
103
|
-
* above each other. Left unset the cell inherits the table's own
|
|
104
|
-
* which is `start` for text in either writing direction.
|
|
105
|
-
* aligns the cells it draws. A `
|
|
106
|
-
* wrote, so the table writes nothing onto them: it publishes the
|
|
107
|
-
* cell under this column as `--table-cell-align`, which
|
|
108
|
-
* reads. The heading is this element's own, and
|
|
109
|
-
* the same edge in either table. `end` is the
|
|
110
|
-
* right-to-left table it is the left.
|
|
102
|
+
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
103
|
+
* sit above each other. Left unset the cell inherits the table's own
|
|
104
|
+
* alignment, which is `start` for text in either writing direction.
|
|
105
|
+
* `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
106
|
+
* consumer wrote, so the table writes nothing onto them: it publishes the
|
|
107
|
+
* edge to each cell under this column as `--table-cell-align`, which
|
|
108
|
+
* `@fusion.dev/helix` reads. The heading is this element's own, and
|
|
109
|
+
* `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
110
|
+
* inline end, so in a right-to-left table it is the left.
|
|
111
111
|
*
|
|
112
112
|
* **Reflected, because the heading is drawn by a stylesheet and has no other
|
|
113
113
|
* way to learn it.** Set as a property, which is how React sets it, an
|
|
@@ -181,8 +181,8 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
|
|
|
181
181
|
* The track this column takes, as CSS.
|
|
182
182
|
*
|
|
183
183
|
* A single track value, so anything valid in `grid-template-columns` works:
|
|
184
|
-
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
|
|
185
|
-
*
|
|
184
|
+
* `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
|
|
185
|
+
* its place in a `Table`'s `columns`, where that table sets one, and
|
|
186
186
|
* otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
|
|
187
187
|
* Set here, it wins over that list, which is what lets a reader resize a
|
|
188
188
|
* column in a table that set one.
|
|
@@ -34,21 +34,20 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
|
|
|
34
34
|
* @csspart loading - Shown while the rows are still on their way.
|
|
35
35
|
* @csspart table - The grid.
|
|
36
36
|
*
|
|
37
|
-
* @cssproperty --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.
|
|
37
|
+
* @cssproperty --table-template - The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `columns` is the one to set.
|
|
38
38
|
*/
|
|
39
39
|
export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
|
|
40
40
|
/**
|
|
41
41
|
* The column widths as one track list, written once on the table.
|
|
42
42
|
*
|
|
43
|
-
* With `
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
* down to one column.
|
|
43
|
+
* With `TableColumn` children, each track sizes the column in its place, a
|
|
44
|
+
* hidden column counted, so hiding one takes its track with it and the rest
|
|
45
|
+
* keep theirs. The columns decide how many tracks there are and this list
|
|
46
|
+
* only how wide: a track past the last column is dropped, and a column past
|
|
47
|
+
* the last track shares what is left. With no columns declared it is the
|
|
48
|
+
* whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
|
|
49
|
+
* is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
|
|
50
|
+
* its column at the default rather than taking the table down to one column.
|
|
52
51
|
*
|
|
53
52
|
* **A column's own `width` wins over its track here.** The width is written
|
|
54
53
|
* on the column it sizes, which is the more particular statement, and it is
|
|
@@ -62,13 +61,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
|
|
|
62
61
|
* whole answer: a table given one lays its grid out in the first paint, and a
|
|
63
62
|
* table sized only by its columns is one track wide until it upgrades.
|
|
64
63
|
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
* take the same CSS hook, `--table-columns` and `--data-table-columns`, which
|
|
71
|
-
* wins over whichever list the element worked out.
|
|
64
|
+
* **Data Table has none of this, and should not.** Its columns are its schema
|
|
65
|
+
* rather than an option, so there is always a column to write a `width` on
|
|
66
|
+
* and a list here would be a second way to say what that says. This table's
|
|
67
|
+
* cells are markup, and a table written as rows of cells with no column
|
|
68
|
+
* declared in it has nowhere else to be sized from.
|
|
72
69
|
*/
|
|
73
70
|
columns: string;
|
|
74
71
|
/**
|
|
@@ -4,10 +4,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
4
4
|
* @summary One row of a table.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
* the table's own grid and every column lines up
|
|
9
|
-
* still exists as an element, which is what a
|
|
10
|
-
* cells are laid out by the table algorithm.
|
|
7
|
+
* The row renders its cells straight through and lays out none of them, so a
|
|
8
|
+
* sheet can take them into the table's own grid and every column lines up
|
|
9
|
+
* across every row. The row still exists as an element, which is what a
|
|
10
|
+
* `<table>` gives away when its cells are laid out by the table algorithm.
|
|
11
11
|
*
|
|
12
12
|
* @since 0.1.0
|
|
13
13
|
* @status stable
|
|
@@ -52,8 +52,8 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
|
|
|
52
52
|
* a choice nobody made. `ElementInternals` holds it instead.
|
|
53
53
|
*
|
|
54
54
|
* The attribute still seeds the property, which is what
|
|
55
|
-
* `<helix-tab-panel selected>` in a consumer's markup means. Only
|
|
56
|
-
* back is gone.
|
|
55
|
+
* `<helix-headless-tab-panel selected>` in a consumer's markup means. Only
|
|
56
|
+
* the write back is gone.
|
|
57
57
|
*/
|
|
58
58
|
protected willUpdate(changed: PropertyValues): void;
|
|
59
59
|
protected render(): TemplateResult;
|
|
@@ -8,10 +8,10 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
|
|
|
8
8
|
* @summary A time, typed or picked from a list.
|
|
9
9
|
*
|
|
10
10
|
* @description
|
|
11
|
-
* **The list is `
|
|
11
|
+
* **The list is `TimePicker`, not a second one written here.** It is worth
|
|
12
12
|
* having on its own, flat in a settings pane with nothing to open, and this
|
|
13
13
|
* element is the field, the overlay and the form. Exactly the arrangement Input
|
|
14
|
-
* Date has with `
|
|
14
|
+
* Date has with `DatePicker` and Color Input with `ColorPicker`.
|
|
15
15
|
*
|
|
16
16
|
* **Typed as well as picked, and that is the division the list depends on.** A
|
|
17
17
|
* list at a step offers the times a product actually has, and the field is how a
|
|
@@ -120,8 +120,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
|
|
|
120
120
|
*
|
|
121
121
|
* Absent is one. `range` holds a start and an end, `multiple` holds any
|
|
122
122
|
* number, and both are carried as one comma-separated value, which is what a
|
|
123
|
-
* form submits. `
|
|
124
|
-
* why a wheel cannot do either.
|
|
123
|
+
* form submits. `TimePicker` carries the longer note on the interaction and
|
|
124
|
+
* on why a wheel cannot do either.
|
|
125
125
|
*/
|
|
126
126
|
mode?: 'multiple' | 'range';
|
|
127
127
|
/**
|
|
@@ -185,7 +185,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
|
|
|
185
185
|
* `list` offers whole times, which is what a product with slots or opening
|
|
186
186
|
* hours has. `wheels` splits them into an hour, a minute and a meridiem where
|
|
187
187
|
* the locale uses one, which is the only way to reach `23:45` without
|
|
188
|
-
* scrolling most of a day. `
|
|
188
|
+
* scrolling most of a day. `TimePicker` carries the longer note on the trade.
|
|
189
189
|
*
|
|
190
190
|
* **Optional rather than defaulted, which is not a style preference.** A
|
|
191
191
|
* reflecting property with a default writes its attribute onto every host the
|
|
@@ -218,14 +218,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
|
|
|
218
218
|
* Slot fallback, so a consumer replaces it by slotting; and a method, so the
|
|
219
219
|
* tier above replaces it by overriding.
|
|
220
220
|
*
|
|
221
|
-
* **A named import rather than `<helix-icon>`**, on three counts.
|
|
222
|
-
* `
|
|
223
|
-
*
|
|
224
|
-
*
|
|
225
|
-
*
|
|
226
|
-
*
|
|
227
|
-
*
|
|
228
|
-
*
|
|
221
|
+
* **A named import rather than `<helix-headless-icon>`**, on three counts.
|
|
222
|
+
* `Icon` indexes the whole icon map at runtime, `icons[this.name]`, and no
|
|
223
|
+
* bundler can shake a runtime lookup, so every consumer of any component that
|
|
224
|
+
* renders one ships all 50kB of path data; a named import ships one path. The
|
|
225
|
+
* import is checked when the package compiles, where a `name` string is
|
|
226
|
+
* checked only by a later name lookup. And `Icon` is not registered on the
|
|
227
|
+
* headless tier at all, which registers `helix-headless-icon`, so a headless
|
|
228
|
+
* consumer gets an inert unknown element and no mark whatsoever.
|
|
229
229
|
*/
|
|
230
230
|
protected renderTrigger(): TemplateResult;
|
|
231
231
|
protected render(): TemplateResult;
|
|
@@ -25,8 +25,8 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
|
|
|
25
25
|
*
|
|
26
26
|
* @description
|
|
27
27
|
* **A list rather than three wheels**, and the reason is what a list already
|
|
28
|
-
* is. `
|
|
29
|
-
*
|
|
28
|
+
* is. `Listbox` brings the keyboard, the typeahead, the scroll into view and
|
|
29
|
+
* the announcement of a set of options, and a time at a step is a set of
|
|
30
30
|
* options. Three little wheels for hours, minutes and a meridiem are three
|
|
31
31
|
* controls to build, three to test, and a tab stop each for something a reader
|
|
32
32
|
* answers once.
|
|
@@ -145,7 +145,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
145
145
|
*
|
|
146
146
|
* Absent is one. `range` holds a start and an end with everything between
|
|
147
147
|
* them shown as part of the answer, `multiple` holds any number, and both are
|
|
148
|
-
* carried as one comma-separated value: the same shape `
|
|
148
|
+
* carried as one comma-separated value: the same shape `DatePicker` uses,
|
|
149
149
|
* because it is the same question asked of a different unit.
|
|
150
150
|
*
|
|
151
151
|
* **A range is two picks, and a third starts over.** That is the calendar's
|
|
@@ -335,11 +335,11 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
335
335
|
/**
|
|
336
336
|
* Reveals once the wheels, or the list and its rows, have rendered themselves.
|
|
337
337
|
*
|
|
338
|
-
* `updated` is this element's own moment, and each wheel is a `
|
|
339
|
-
*
|
|
340
|
-
*
|
|
341
|
-
*
|
|
342
|
-
*
|
|
338
|
+
* `updated` is this element's own moment, and each wheel is a `Listbox` that
|
|
339
|
+
* was created during this very render: its first update has been scheduled
|
|
340
|
+
* and has not run, so it has no rows and no height and `reveal` measures zero
|
|
341
|
+
* and gives up. Measured on a standalone picker, every column sat at
|
|
342
|
+
* `scrollTop: 0` with the answer nine rows down, which reads as a wheel
|
|
343
343
|
* showing the wrong time rather than as one that failed to scroll.
|
|
344
344
|
*
|
|
345
345
|
* Whatever opens a panel calls `reveal` again afterwards, for the separate
|
|
@@ -34,7 +34,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
34
34
|
* @aliases Toaster, Snackbar
|
|
35
35
|
* @documentation https://fusion.dev/helix/components/toast
|
|
36
36
|
*
|
|
37
|
-
* @slot - The messages
|
|
37
|
+
* @slot - The messages.
|
|
38
38
|
*
|
|
39
39
|
* @event {HelixDismissEvent} helix-dismiss - A message asking to go, by its control or by its timer, dispatched by the message and heard here because the stack is what a consumer holds. Cancelable: refusing it takes the decision and the message stays.
|
|
40
40
|
*
|
|
@@ -55,7 +55,7 @@ export declare class HelixHeadlessToast extends HelixElement {
|
|
|
55
55
|
* **Optional, and bottom-end is the absence of it.** Reflecting *and*
|
|
56
56
|
* defaulting is the pair that writes onto a host: every toast region anybody
|
|
57
57
|
* rendered would gain a `placement="bottom-end"` nobody typed, which a React
|
|
58
|
-
* consumer's server markup does not have.
|
|
58
|
+
* consumer's server markup does not have. A sheet carries the resting
|
|
59
59
|
* arrangement in its own `:host` rule and the selectors describe only the
|
|
60
60
|
* departures, which is what `orientation` does.
|
|
61
61
|
*/
|
|
@@ -37,11 +37,11 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
|
|
|
37
37
|
* **The attribute, read when it is asked for, and never a snapshot taken in
|
|
38
38
|
* the constructor.** A field initializer runs there, and an element the HTML
|
|
39
39
|
* parser created has none of its attributes yet at that moment: measured on
|
|
40
|
-
* this element, on `Option` and on `Radio`, `<helix-toggle
|
|
41
|
-
* selected>` reported `defaultSelected` as `false` both from
|
|
42
|
-
* and from `createElement` followed by `setAttribute`, which is
|
|
43
|
-
* consumer writes one. The snapshot could only ever be true for
|
|
44
|
-
* already in the document when `customElements.define` ran.
|
|
40
|
+
* this element, on `Option` and on `Radio`, `<helix-headless-toggle
|
|
41
|
+
* value="light" selected>` reported `defaultSelected` as `false` both from
|
|
42
|
+
* parsed markup and from `createElement` followed by `setAttribute`, which is
|
|
43
|
+
* every way a consumer writes one. The snapshot could only ever be true for
|
|
44
|
+
* an element already in the document when `customElements.define` ran.
|
|
45
45
|
*
|
|
46
46
|
* Nothing overwrites it either, which is what makes reading it late correct
|
|
47
47
|
* rather than merely later: `selected` does not reflect, for the reason
|
|
@@ -21,8 +21,8 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
|
|
|
21
21
|
* the ordinary way:
|
|
22
22
|
*
|
|
23
23
|
* ```html
|
|
24
|
-
* <helix-button id="save" aria-describedby="save-tip">Save</helix-button>
|
|
25
|
-
* <helix-tooltip id="save-tip" for="save" content="Save your work"></helix-tooltip>
|
|
24
|
+
* <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button>
|
|
25
|
+
* <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip>
|
|
26
26
|
* ```
|
|
27
27
|
*
|
|
28
28
|
* The reference points at *this host*, not at the bubble in its shadow root:
|
|
@@ -20,9 +20,9 @@ import '../../button/index.js';
|
|
|
20
20
|
* - **When it shows.** Which is `current`, and which the root decides.
|
|
21
21
|
*
|
|
22
22
|
* What it does not own is the heading, the paragraph, the picture and the
|
|
23
|
-
* layout. Slot a `
|
|
24
|
-
*
|
|
25
|
-
*
|
|
23
|
+
* layout. Slot a `Card`, or a heading and a line of prose, or anything else.
|
|
24
|
+
* Fixed `title` and `body` parts would be a component deciding what a tour is
|
|
25
|
+
* allowed to say.
|
|
26
26
|
*
|
|
27
27
|
* **The buttons are slot fallback, so the common case costs nothing and the
|
|
28
28
|
* uncommon one is possible.** Write nothing and get Back, Next and Skip already
|
|
@@ -186,8 +186,8 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
|
|
|
186
186
|
* holds it instead, where it is not in the DOM at all.
|
|
187
187
|
*
|
|
188
188
|
* Reading `selected` is unaffected and so is writing it: the attribute still
|
|
189
|
-
* seeds the property, which is what `<helix-tree-item selected>` in
|
|
190
|
-
* markup means. What stops is the write back.
|
|
189
|
+
* seeds the property, which is what `<helix-headless-tree-item selected>` in
|
|
190
|
+
* a consumer's markup means. What stops is the write back.
|
|
191
191
|
*/
|
|
192
192
|
protected willUpdate(changed: PropertyValues): void;
|
|
193
193
|
protected render(): TemplateResult;
|
|
@@ -74,14 +74,15 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
|
|
|
74
74
|
/**
|
|
75
75
|
* Every item, in the order a reader moving down would meet them.
|
|
76
76
|
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
77
|
+
* **By identity rather than by tag**, which is the same reason Splitter
|
|
78
|
+
* writes out at `findOuter`: a tag list names one tier's element from the
|
|
79
|
+
* other's package, and misses any third tag, which is exactly what
|
|
80
|
+
* subclassing an item produces. The item then never enters the array a single
|
|
81
|
+
* arrow press rebuilds, so it is silently unreachable from the keyboard.
|
|
80
82
|
*
|
|
81
|
-
*
|
|
82
|
-
* `
|
|
83
|
-
*
|
|
84
|
-
* tag and neither selector proves what the element is.
|
|
83
|
+
* `'*'` and a filter rather than a tag: the walk is one native pass and the
|
|
84
|
+
* `instanceof` is what narrows it, so the labels, icons and whatever a
|
|
85
|
+
* consumer slotted into a row are gone by the time the array exists.
|
|
85
86
|
*/
|
|
86
87
|
private get items();
|
|
87
88
|
/** Items a reader can actually reach: not inside a collapsed branch. */
|
|
@@ -81,7 +81,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
|
|
|
81
81
|
};
|
|
82
82
|
}
|
|
83
83
|
get items() {
|
|
84
|
-
return [...this.querySelectorAll('
|
|
84
|
+
return [...this.querySelectorAll('*')].filter((node) => node instanceof HelixHeadlessTreeItem);
|
|
85
85
|
}
|
|
86
86
|
get visibleItems() {
|
|
87
87
|
return this.items.filter((item) => {
|
|
@@ -61,7 +61,13 @@ export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
|
|
|
61
61
|
private foundPlaylist;
|
|
62
62
|
/** The playlist this menu belongs to, found upward through the slots. */
|
|
63
63
|
private get playlist();
|
|
64
|
-
/**
|
|
64
|
+
/**
|
|
65
|
+
* The playlist's entries, in the order it holds them.
|
|
66
|
+
*
|
|
67
|
+
* By identity rather than by tag, the same reason the playlist itself reads
|
|
68
|
+
* them that way: a tag list names one tier's element from the other's package
|
|
69
|
+
* and misses any third one.
|
|
70
|
+
*/
|
|
65
71
|
private get entries();
|
|
66
72
|
/**
|
|
67
73
|
* Watches the playlist for entries arriving, and re-reads it on every open.
|
|
@@ -9,9 +9,9 @@ import { list } from '@fusion.dev/helix-icons';
|
|
|
9
9
|
import { nothing } from 'lit';
|
|
10
10
|
import { property } from 'lit/decorators.js';
|
|
11
11
|
import { html } from 'lit/static-html.js';
|
|
12
|
+
import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
|
|
12
13
|
import { HelixHeadlessVideoPlaylist } from '../root/video-playlist-root.js';
|
|
13
14
|
import '../../menu/index.js';
|
|
14
|
-
const ITEMS = 'helix-video-playlist-item, helix-headless-video-playlist-item';
|
|
15
15
|
let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extends HelixElement {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
@@ -39,7 +39,9 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
|
|
|
39
39
|
}
|
|
40
40
|
get entries() {
|
|
41
41
|
const playlist = this.playlist;
|
|
42
|
-
return playlist
|
|
42
|
+
return playlist
|
|
43
|
+
? [...playlist.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem)
|
|
44
|
+
: [];
|
|
43
45
|
}
|
|
44
46
|
watch() {
|
|
45
47
|
this.foundPlaylist ??= closestInstance(this, HelixHeadlessVideoPlaylist) ?? undefined;
|
|
@@ -35,7 +35,7 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
|
|
|
35
35
|
* @documentation https://fusion.dev/helix/components/video-playlist
|
|
36
36
|
*
|
|
37
37
|
* @slot - The entries.
|
|
38
|
-
* @slot player - The
|
|
38
|
+
* @slot player - The player the entries take turns in.
|
|
39
39
|
*
|
|
40
40
|
* @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
|
|
41
41
|
* @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current entry changes, and cancelable.
|
|
@@ -80,10 +80,10 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
|
|
|
80
80
|
/**
|
|
81
81
|
* The player, whichever tag the consumer slotted.
|
|
82
82
|
*
|
|
83
|
-
* Asked of the slot rather than matched by tag name:
|
|
84
|
-
* player
|
|
85
|
-
*
|
|
86
|
-
*
|
|
83
|
+
* Asked of the slot rather than matched by tag name: each tier registers its
|
|
84
|
+
* own player under its own name, and a consumer bringing a third should still
|
|
85
|
+
* be driven. What is needed of it is `src`, which is the whole of the
|
|
86
|
+
* contract.
|
|
87
87
|
*/
|
|
88
88
|
private get player();
|
|
89
89
|
/** Moves by one, and does nothing at either end. */
|
|
@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { customElement, HelixElement, MixinControllerActive } from '@fusion.dev/helix-core';
|
|
8
8
|
import { html } from 'lit';
|
|
9
9
|
import { property } from 'lit/decorators.js';
|
|
10
|
+
import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
|
|
10
11
|
let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinControllerActive(HelixElement) {
|
|
11
12
|
constructor() {
|
|
12
13
|
super(...arguments);
|
|
@@ -34,9 +35,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
|
|
|
34
35
|
};
|
|
35
36
|
}
|
|
36
37
|
get items() {
|
|
37
|
-
return [
|
|
38
|
-
...this.querySelectorAll('helix-video-playlist-item, helix-headless-video-playlist-item'),
|
|
39
|
-
].filter((one) => one.value !== '');
|
|
38
|
+
return [...this.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem && one.value !== '');
|
|
40
39
|
}
|
|
41
40
|
get player() {
|
|
42
41
|
const slot = this.renderRoot?.querySelector('slot[name="player"]');
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fusion.dev/helix-headless",
|
|
3
3
|
"description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
|
|
4
|
-
"version": "0.53.
|
|
4
|
+
"version": "0.53.2",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Ross Sheppard <ross.sheppard@fusion.dev>",
|
|
7
7
|
"repository": {
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
},
|
|
47
47
|
"bugs": "https://github.com/project-fusion/fusion/issues",
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@fusion.dev/helix-core": "0.53.
|
|
50
|
-
"@fusion.dev/helix-icons": "0.53.
|
|
49
|
+
"@fusion.dev/helix-core": "0.53.2",
|
|
50
|
+
"@fusion.dev/helix-icons": "0.53.2",
|
|
51
51
|
"uqr": "^0.1.3"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|
|
55
|
-
"@fusion.dev/helix-cem": "0.53.
|
|
56
|
-
"@fusion.dev/helix-testing": "0.53.
|
|
55
|
+
"@fusion.dev/helix-cem": "0.53.2",
|
|
56
|
+
"@fusion.dev/helix-testing": "0.53.2",
|
|
57
57
|
"@fusion.dev/scripts": "0.0.0-dev",
|
|
58
58
|
"@happy-dom/global-registrator": "^20.0.0",
|
|
59
59
|
"@lit-labs/ssr": "^4.1.0",
|