@fusion.dev/helix-headless 0.105.0 → 0.106.0
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 +7324 -3890
- package/dist/accordion/item/accordion-item.d.ts +17 -16
- package/dist/accordion/root/accordion-root.d.ts +13 -17
- package/dist/announcement/root/announcement-root.d.ts +24 -31
- package/dist/app-header/root/app-header-root.d.ts +14 -14
- package/dist/area-chart/root/area-chart-root.d.ts +29 -48
- package/dist/avatar/group/avatar-group.d.ts +6 -8
- package/dist/avatar/root/avatar-root.d.ts +11 -11
- package/dist/badge/root/badge-root.d.ts +14 -15
- package/dist/bar-chart/root/bar-chart-root.d.ts +40 -44
- package/dist/blockquote/root/blockquote-root.d.ts +5 -7
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +25 -33
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +12 -11
- package/dist/button/root/button-root.d.ts +16 -17
- package/dist/button-group/root/button-group-root.d.ts +9 -10
- package/dist/callout/root/callout-root.d.ts +10 -15
- package/dist/canvas/edge/canvas-edge.d.ts +21 -21
- package/dist/canvas/node/canvas-node.d.ts +43 -45
- package/dist/canvas/root/canvas-root.d.ts +100 -99
- package/dist/card/root/card-root.d.ts +10 -12
- package/dist/carousel/root/carousel-root.d.ts +32 -33
- package/dist/chat/composer/chat-composer.d.ts +24 -26
- package/dist/chat/message/chat-message.d.ts +30 -33
- package/dist/chat/root/chat-root.d.ts +63 -80
- package/dist/checkbox/root/checkbox-root.d.ts +30 -32
- package/dist/checkbox-group/root/checkbox-group-root.d.ts +25 -25
- package/dist/code/root/code-root.d.ts +6 -10
- package/dist/code-block/root/code-block-root.d.ts +35 -48
- package/dist/color-input/root/color-input-root.d.ts +52 -56
- package/dist/color-picker/root/color-picker-root.d.ts +49 -49
- package/dist/combobox/root/combobox-root.d.ts +52 -53
- package/dist/command/root/command-root.d.ts +35 -40
- package/dist/copy-button/root/copy-button-root.d.ts +24 -26
- package/dist/data-table/root/data-table-root.d.ts +106 -107
- package/dist/date-input/root/date-input-root.d.ts +54 -53
- package/dist/date-picker/root/date-picker-root.d.ts +25 -21
- package/dist/description-list/item/description-list-item.d.ts +7 -7
- package/dist/description-list/root/description-list-root.d.ts +10 -15
- package/dist/dialog/root/dialog-root.d.ts +22 -19
- package/dist/divider/root/divider-root.d.ts +12 -13
- package/dist/donut-chart/root/donut-chart-root.d.ts +19 -20
- package/dist/drawer/root/drawer-root.d.ts +19 -18
- package/dist/drilldown/item/drilldown-item.d.ts +28 -28
- package/dist/drilldown/root/drilldown-root.d.ts +22 -28
- package/dist/element-events.generated.js +7 -0
- package/dist/empty/root/empty-root.d.ts +16 -19
- package/dist/file-input/root/file-input-root.d.ts +32 -32
- package/dist/filter-input/chip/filter-chip.d.ts +36 -39
- package/dist/filter-input/field/filter-field.d.ts +25 -31
- package/dist/filter-input/menu/filter-menu.d.ts +50 -47
- package/dist/filter-input/operator/filter-operator.d.ts +15 -20
- package/dist/filter-input/root/filter-input-root.d.ts +80 -98
- package/dist/format-date/root/format-date-root.d.ts +19 -27
- package/dist/heatmap/root/heatmap-root.d.ts +40 -41
- package/dist/icon/root/icon-root.d.ts +21 -23
- package/dist/icon-button/root/icon-button-root.d.ts +12 -14
- package/dist/image/root/image-root.d.ts +30 -30
- package/dist/input/root/input-root.d.ts +36 -35
- package/dist/kbd/root/kbd-root.d.ts +13 -15
- package/dist/legend/root/legend-root.d.ts +18 -16
- package/dist/lightbox/item/lightbox-item.d.ts +13 -15
- package/dist/lightbox/root/lightbox-root.d.ts +40 -41
- package/dist/line-chart/root/line-chart-root.d.ts +20 -29
- package/dist/list/item/list-item.d.ts +17 -22
- package/dist/list/root/list-root.d.ts +6 -7
- package/dist/listbox/root/listbox-root.d.ts +42 -41
- package/dist/loader/root/loader-root.d.ts +16 -20
- package/dist/map/area/map-area.d.ts +6 -0
- package/dist/map/area/map-area.js +3 -0
- package/dist/map/buildings/map-buildings.d.ts +45 -0
- package/dist/map/buildings/map-buildings.js +37 -0
- package/dist/map/contours/map-contours.d.ts +61 -0
- package/dist/map/contours/map-contours.js +54 -0
- package/dist/map/index.d.ts +7 -0
- package/dist/map/index.js +5 -0
- package/dist/map/landcover/map-landcover.d.ts +47 -0
- package/dist/map/landcover/map-landcover.js +37 -0
- package/dist/map/marker/map-marker.d.ts +11 -4
- package/dist/map/marker/map-marker.js +13 -1
- package/dist/map/points/map-points.d.ts +7 -1
- package/dist/map/points/map-points.js +3 -0
- package/dist/map/raster/map-raster.d.ts +84 -0
- package/dist/map/raster/map-raster.js +96 -0
- package/dist/map/root/map-root.d.ts +169 -7
- package/dist/map/root/map-root.js +352 -4
- package/dist/map/route/map-route.d.ts +6 -0
- package/dist/map/route/map-route.js +3 -0
- package/dist/map/terrain/map-terrain.d.ts +68 -0
- package/dist/map/terrain/map-terrain.js +58 -0
- package/dist/megamenu/root/megamenu-root.d.ts +27 -25
- package/dist/menu/item/menu-item.d.ts +30 -31
- package/dist/menu/root/menu-root.d.ts +25 -29
- package/dist/meter/root/meter-root.d.ts +22 -21
- package/dist/navigation/root/navigation-root.d.ts +13 -16
- package/dist/notifications/group/notification-group.d.ts +27 -28
- package/dist/notifications/notification/notification.d.ts +35 -42
- package/dist/notifications/root/notifications-root.d.ts +22 -24
- package/dist/number-input/root/number-input-root.d.ts +46 -50
- package/dist/object-inspector/root/object-inspector-root.d.ts +46 -58
- package/dist/option/group/option-group.d.ts +11 -11
- package/dist/option/root/option-root.d.ts +28 -33
- package/dist/outline/root/outline-root.d.ts +18 -17
- package/dist/pagination/root/pagination-root.d.ts +37 -39
- package/dist/pagination/size/pagination-size.d.ts +37 -43
- package/dist/pagination/summary/pagination-summary.d.ts +12 -14
- package/dist/pin-input/root/pin-input-root.d.ts +32 -38
- package/dist/popover/root/popover-root.d.ts +16 -21
- package/dist/progress/root/progress-root.d.ts +16 -14
- package/dist/qr-code/root/qr-code-root.d.ts +22 -25
- package/dist/quote/root/quote-root.d.ts +5 -6
- package/dist/radio/group/radio-group.d.ts +26 -28
- package/dist/radio/root/radio-root.d.ts +24 -28
- package/dist/rating/root/rating-root.d.ts +27 -30
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +43 -55
- package/dist/scroll-area/root/scroll-area-root.d.ts +15 -21
- package/dist/select/root/select-root.d.ts +41 -44
- package/dist/skeleton/root/skeleton-root.d.ts +7 -8
- package/dist/skip-link/root/skip-link-root.d.ts +21 -28
- package/dist/slider/root/slider-root.d.ts +36 -39
- package/dist/sparkline/root/sparkline-root.d.ts +22 -28
- package/dist/speed-dial/item/speed-dial-item.d.ts +21 -21
- package/dist/speed-dial/root/speed-dial-root.d.ts +25 -27
- package/dist/splitter/root/splitter-root.d.ts +37 -41
- package/dist/stat/group/stat-group.d.ts +4 -4
- package/dist/stat/root/stat-root.d.ts +8 -9
- package/dist/steps/root/steps-root.d.ts +11 -14
- package/dist/steps/step/step.d.ts +22 -29
- package/dist/switch/root/switch-root.d.ts +20 -24
- package/dist/table/cell/table-cell.d.ts +18 -8
- package/dist/table/cell/table-cell.js +5 -1
- package/dist/table/column/table-column.d.ts +62 -55
- package/dist/table/root/table-root.d.ts +16 -17
- package/dist/table/row/table-row.d.ts +3 -3
- package/dist/tabs/panel/tab-panel.d.ts +3 -3
- package/dist/tabs/root/tabs-root.d.ts +19 -17
- package/dist/tabs/tab/tab.d.ts +6 -6
- package/dist/tag/root/tag-root.d.ts +11 -12
- package/dist/textarea/root/textarea-root.d.ts +29 -32
- package/dist/time-input/root/time-input-root.d.ts +70 -69
- package/dist/time-picker/root/time-picker-root.d.ts +58 -66
- package/dist/timeline/item/timeline-item.d.ts +18 -24
- package/dist/timeline/root/timeline-root.d.ts +13 -21
- package/dist/toast/item/toast-item.d.ts +21 -22
- package/dist/toast/root/toast-root.d.ts +18 -23
- package/dist/toggle/group/toggle-group.d.ts +23 -25
- package/dist/toggle/root/toggle-root.d.ts +8 -8
- package/dist/toolbar/root/toolbar-root.d.ts +7 -10
- package/dist/tooltip/root/tooltip-root.d.ts +41 -47
- package/dist/tour/root/tour-root.d.ts +24 -26
- package/dist/tour/stop/tour-stop.d.ts +39 -48
- package/dist/tree/item/tree-item.d.ts +23 -25
- package/dist/tree/root/tree-root.d.ts +13 -12
- package/dist/trend/root/trend-root.d.ts +18 -19
- package/dist/video/root/video-root.d.ts +108 -101
- package/dist/video-playlist/item/video-playlist-item.d.ts +23 -28
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +17 -21
- package/dist/video-playlist/root/video-playlist-root.d.ts +21 -25
- package/dist/virtual-list/root/virtual-list-root.d.ts +27 -26
- package/package.json +5 -5
- package/types/jsx.d.ts +10363 -9520
- package/types/svelte.d.ts +5 -0
- package/types/vue.d.ts +1440 -1032
|
@@ -2,21 +2,18 @@ import { HelixFormElement, KeyboardNavigationController } from '@fusion.dev/heli
|
|
|
2
2
|
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
3
3
|
declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
|
|
4
4
|
/**
|
|
5
|
-
* @summary A
|
|
5
|
+
* @summary A row of marks, such as stars, for giving or showing a score.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* rather than added over it.
|
|
8
|
+
* Supports half marks, so the value is not always an integer and the press
|
|
9
|
+
* targets are not the marks: five stars at a half step give ten places to
|
|
10
|
+
* press. The pointer handling and `step` are built around half marks.
|
|
12
11
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
* so any mark works and any fraction does.
|
|
12
|
+
* A partial mark is the full mark, clipped. The filled marks are drawn over the
|
|
13
|
+
* empty marks and cut off partway, so any mark and any fraction work.
|
|
16
14
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* input, and it is announced as one.
|
|
15
|
+
* A read-only rating displays a score, which is the most common use. It is
|
|
16
|
+
* announced as a displayed value and does not look disabled.
|
|
20
17
|
*
|
|
21
18
|
* @since 0.1.0
|
|
22
19
|
* @status stable
|
|
@@ -24,27 +21,27 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
|
|
|
24
21
|
* @aliases Stars, Score, Review score
|
|
25
22
|
* @documentation https://fusion.dev/helix/components/rating
|
|
26
23
|
*
|
|
27
|
-
* @event {Event} change -
|
|
28
|
-
* @event {HelixBeforeChangeEvent} helix-before-change -
|
|
29
|
-
* @event {Event} input -
|
|
24
|
+
* @event {Event} change - The score was chosen. Sent together with `input`, because each choice commits the score.
|
|
25
|
+
* @event {HelixBeforeChangeEvent} helix-before-change - The score is about to change. Cancelable: cancel it to keep the current score.
|
|
26
|
+
* @event {Event} input - The score changed.
|
|
30
27
|
*
|
|
31
|
-
* @csspart feedback -
|
|
32
|
-
* @csspart field - The row
|
|
28
|
+
* @csspart feedback - The message that says what is wrong.
|
|
29
|
+
* @csspart field - The row that holds the marks and the score next to them.
|
|
33
30
|
* @csspart fill - The filled marks, clipped to the score.
|
|
34
|
-
* @csspart hint - Help under the marks, while
|
|
35
|
-
* @csspart label - The
|
|
36
|
-
* @csspart mark - One mark, in
|
|
31
|
+
* @csspart hint - Help text under the marks, shown while there is no feedback.
|
|
32
|
+
* @csspart label - The label above the marks.
|
|
33
|
+
* @csspart mark - One mark, in the fill or the track.
|
|
37
34
|
* @csspart marks - The row of marks.
|
|
38
|
-
* @csspart option - One
|
|
35
|
+
* @csspart option - One target you can press, for one step.
|
|
39
36
|
* @csspart track - The unfilled marks.
|
|
40
|
-
* @csspart value - The score
|
|
37
|
+
* @csspart value - The score as a number, shown with `show-value`.
|
|
41
38
|
*
|
|
42
|
-
* @cssproperty --rating-full -
|
|
43
|
-
* @cssproperty --rating-part - How much of the next mark is filled, 0 to 1.
|
|
44
|
-
* @cssproperty --rating-step -
|
|
45
|
-
* @cssproperty --rating-steps -
|
|
39
|
+
* @cssproperty --rating-full - The number of marks that are fully filled.
|
|
40
|
+
* @cssproperty --rating-part - How much of the next mark is filled, from 0 to 1.
|
|
41
|
+
* @cssproperty --rating-step - The target's position among all the steps in the row, counting from one. Steps below `min` still count.
|
|
42
|
+
* @cssproperty --rating-steps - The number of steps in the whole row: `max` divided by `step`.
|
|
46
43
|
*
|
|
47
|
-
* @cssstate invalid -
|
|
44
|
+
* @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
|
|
48
45
|
*/
|
|
49
46
|
export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
|
|
50
47
|
protected readonly announcesInput = false;
|
|
@@ -53,7 +50,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
|
|
|
53
50
|
*/
|
|
54
51
|
max: number;
|
|
55
52
|
/**
|
|
56
|
-
* The lowest score
|
|
53
|
+
* The lowest score that can be given. A cleared rating shows this score.
|
|
57
54
|
*
|
|
58
55
|
* Zero rather than one, because "no rating" and "the worst rating" are
|
|
59
56
|
* different answers and a control that cannot express the first has to
|
|
@@ -96,14 +93,14 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
|
|
|
96
93
|
*/
|
|
97
94
|
min: number;
|
|
98
95
|
/**
|
|
99
|
-
*
|
|
96
|
+
* Shows the score without letting users change it.
|
|
100
97
|
*
|
|
101
98
|
* A readout is not a control that has been switched off. It takes no focus,
|
|
102
99
|
* answers no keys, and reads as one thing: see the note on the class.
|
|
103
100
|
*/
|
|
104
101
|
readOnly: boolean;
|
|
105
102
|
/**
|
|
106
|
-
*
|
|
103
|
+
* Shows the score as a number next to the marks.
|
|
107
104
|
*
|
|
108
105
|
* Marks say roughly, and a number says exactly. Four and a bit stars is not a
|
|
109
106
|
* reading anyone can repeat, which is why a product's average is nearly always
|
|
@@ -123,7 +120,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
|
|
|
123
120
|
*/
|
|
124
121
|
step: number;
|
|
125
122
|
/**
|
|
126
|
-
*
|
|
123
|
+
* The text screen readers read for the score, in place of "3.5 out of 5".
|
|
127
124
|
*
|
|
128
125
|
* A rating out of five is one of the few places a screen reader gets a worse
|
|
129
126
|
* answer from the value than from a sentence: "3.5" alone is a number without
|
|
@@ -20,42 +20,30 @@ export interface ScatterField {
|
|
|
20
20
|
}
|
|
21
21
|
declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
|
|
22
22
|
/**
|
|
23
|
-
* @summary
|
|
23
|
+
* @summary A chart that shows whether two measures move together, with one point per row.
|
|
24
24
|
*
|
|
25
25
|
* @description
|
|
26
|
-
*
|
|
27
|
-
* column is measured across
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
26
|
+
* A scatter chart shows how two measures relate. The table's first numeric
|
|
27
|
+
* column is measured across, every other numeric column is measured up, and
|
|
28
|
+
* each row is one point. A table of countries with an income column and a life
|
|
29
|
+
* expectancy column draws one point for each country. Each additional numeric
|
|
30
|
+
* column is another series, in its own color.
|
|
31
31
|
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* horizontal position is itself a value, and a point with no scale under it says
|
|
35
|
-
* nothing about how far along it is. The ticks sit at round numbers and the
|
|
36
|
-
* range is widened to them, so the plot's edges are numbers a reader can name.
|
|
32
|
+
* Both axes are labeled, because both positions are values. The ticks sit at
|
|
33
|
+
* round numbers, and the range extends to them.
|
|
37
34
|
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
* of the same numbers makes hardest to see. The summary gives each series'
|
|
41
|
-
* correlation coefficient and how many points it rests on; the table has every
|
|
42
|
-
* number, and the drawing is `aria-hidden`.
|
|
35
|
+
* The summary gives each series' correlation coefficient and its number of
|
|
36
|
+
* points. The table has every number, and the drawing is `aria-hidden`.
|
|
43
37
|
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
* termini and for the same reason.
|
|
38
|
+
* Each point is a `<span>` placed by percentage over the drawing, as
|
|
39
|
+
* `LineChart` places its end points, so points stay round when the drawing
|
|
40
|
+
* stretches.
|
|
48
41
|
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
* that carries `dir="ltr"`, which holds the y axis on the left and the points,
|
|
55
|
-
* rules, ticks, pointer and tooltip mark where a left-to-right page puts them,
|
|
56
|
-
* with no stylesheet asked to know. The names carry `dir="auto"`, so one written
|
|
57
|
-
* in Arabic or Hebrew still reads its own way; the summary is outside the plane
|
|
58
|
-
* and the bubble is told the page's direction, both being words.
|
|
42
|
+
* The plot runs left to right in every text direction, as a number line does.
|
|
43
|
+
* The plot, its axes, and the axis names sit in a `plane` part with
|
|
44
|
+
* `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
|
|
45
|
+
* reads in its own direction. The summary and the tooltip bubble follow the
|
|
46
|
+
* page's direction.
|
|
59
47
|
*
|
|
60
48
|
* @since 0.1.0
|
|
61
49
|
* @status stable
|
|
@@ -63,47 +51,47 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
|
|
|
63
51
|
* @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
|
|
64
52
|
* @documentation https://fusion.dev/helix/components/scatter-chart
|
|
65
53
|
*
|
|
66
|
-
* @csspart gridline - One
|
|
54
|
+
* @csspart gridline - One line across the plot, drawn when `gridlines` is set.
|
|
67
55
|
* @csspart mark - The invisible point the tooltip is anchored to.
|
|
68
|
-
* @csspart plane - The plot, both axes and their names
|
|
56
|
+
* @csspart plane - The grid that holds the plot, both axes, and their names. It runs left to right on every page.
|
|
69
57
|
* @csspart plot - The drawing.
|
|
70
58
|
* @csspart point - One row, as a point.
|
|
71
|
-
* @csspart point-active - A point
|
|
72
|
-
* @csspart summary -
|
|
73
|
-
* @csspart svg - The drawing surface the
|
|
59
|
+
* @csspart point-active - A point in the row under the pointer. Set alongside `point`.
|
|
60
|
+
* @csspart summary - The text that says how strongly the measures relate, for people who cannot see the points.
|
|
61
|
+
* @csspart svg - The drawing surface the gridlines sit on.
|
|
74
62
|
* @csspart tooltip - The bubble, forwarded from `Tooltip`.
|
|
75
63
|
* @csspart tooltip-anchor - The `Tooltip` element itself.
|
|
76
64
|
* @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
|
|
77
|
-
* @csspart tooltip-arrow-bottom - The point while the bubble is below the reading,
|
|
78
|
-
* @csspart tooltip-arrow-left - The point while the bubble is left of the reading,
|
|
79
|
-
* @csspart tooltip-arrow-right - The point while the bubble is right of the reading,
|
|
80
|
-
* @csspart tooltip-arrow-top - The point while the bubble is above the reading,
|
|
81
|
-
* @csspart tooltip-bottom - The bubble while it is below the reading
|
|
65
|
+
* @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
|
|
66
|
+
* @csspart tooltip-arrow-left - The point while the bubble is left of the reading, on its right edge. Set alongside `tooltip-arrow`.
|
|
67
|
+
* @csspart tooltip-arrow-right - The point while the bubble is right of the reading, on its left edge. Set alongside `tooltip-arrow`.
|
|
68
|
+
* @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
|
|
69
|
+
* @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
|
|
82
70
|
* @csspart tooltip-cell - One column's name and value inside the tooltip.
|
|
83
71
|
* @csspart tooltip-label - The row's own name inside the tooltip.
|
|
84
|
-
* @csspart tooltip-left - The bubble while it is left of the reading
|
|
72
|
+
* @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
|
|
85
73
|
* @csspart tooltip-name - A column's name inside the tooltip.
|
|
86
|
-
* @csspart tooltip-right - The bubble while it is right of the reading
|
|
87
|
-
* @csspart tooltip-top - The bubble while it is above the reading
|
|
74
|
+
* @csspart tooltip-right - The bubble while it is right of the reading. Set alongside `tooltip`.
|
|
75
|
+
* @csspart tooltip-top - The bubble while it is above the reading. Set alongside `tooltip`.
|
|
88
76
|
* @csspart tooltip-value - A column's value inside the tooltip.
|
|
89
|
-
* @csspart x-axis - The
|
|
90
|
-
* @csspart x-name -
|
|
91
|
-
* @csspart x-tick - One labeled
|
|
92
|
-
* @csspart y-axis - The
|
|
93
|
-
* @csspart y-name -
|
|
94
|
-
* @csspart y-tick - One labeled
|
|
77
|
+
* @csspart x-axis - The values along the horizontal axis, under the plot.
|
|
78
|
+
* @csspart x-name - The name of the horizontal measure.
|
|
79
|
+
* @csspart x-tick - One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on.
|
|
80
|
+
* @csspart y-axis - The values along the vertical axis, beside the plot.
|
|
81
|
+
* @csspart y-name - The name of the vertical measure.
|
|
82
|
+
* @csspart y-tick - One labeled value on the vertical axis.
|
|
95
83
|
*
|
|
96
|
-
* @cssproperty --chart-point-x -
|
|
97
|
-
* @cssproperty --chart-point-y -
|
|
98
|
-
* @cssproperty --chart-tick -
|
|
84
|
+
* @cssproperty --chart-point-x - A point's horizontal position, as a percentage. The component writes it.
|
|
85
|
+
* @cssproperty --chart-point-y - A point's vertical position, as a percentage from the top. The component writes it.
|
|
86
|
+
* @cssproperty --chart-tick - A tick's position along its axis, as a percentage. The component writes it.
|
|
99
87
|
*/
|
|
100
88
|
export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart_base {
|
|
101
89
|
/**
|
|
102
|
-
*
|
|
90
|
+
* The word the summary uses for the strength of the relation.
|
|
103
91
|
*/
|
|
104
92
|
correlationLabel: string;
|
|
105
93
|
/**
|
|
106
|
-
* Which
|
|
94
|
+
* Which gridlines are drawn across the plot, if any.
|
|
107
95
|
*
|
|
108
96
|
* Both axes are measured, so the values name an axis rather than a role:
|
|
109
97
|
* `x` rules the levels across, `y` the levels up. A bare `gridlines`, or
|
|
@@ -112,7 +100,7 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
|
|
|
112
100
|
*/
|
|
113
101
|
gridlines?: 'both' | 'x' | 'y';
|
|
114
102
|
/**
|
|
115
|
-
*
|
|
103
|
+
* The word the summary uses for a row when it counts them.
|
|
116
104
|
*/
|
|
117
105
|
pointsLabel: string;
|
|
118
106
|
/** The points as last drawn, which the pointer searches. */
|
|
@@ -3,28 +3,22 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
3
3
|
/** Which edges have something past them, as a set of tokens. */
|
|
4
4
|
declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inline-end'];
|
|
5
5
|
/**
|
|
6
|
-
* @summary A scrolling box that
|
|
6
|
+
* @summary A scrolling box that shows which edges have more content past them.
|
|
7
7
|
*
|
|
8
8
|
* @description
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* position. So this measures and says, in a custom state per edge, and the
|
|
13
|
-
* styled tier draws whatever it likes on the edges named.
|
|
9
|
+
* Measures which edges have content past them and sets one custom state per
|
|
10
|
+
* edge. CSS cannot read scroll position, so a stylesheet cannot work this out
|
|
11
|
+
* on its own. The styled tier draws a fade on each edge that has a state.
|
|
14
12
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
13
|
+
* Custom states keep an element that upgrades after a framework rendered it
|
|
14
|
+
* from adding markup the framework did not write. Select them with
|
|
15
|
+
* `:host(:state(more-block-end))`.
|
|
18
16
|
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* read at all, which is what `tabindex` answers here. Only while it overflows:
|
|
22
|
-
* a tab stop on a box with nothing to scroll is a stop that does nothing, and a
|
|
23
|
-
* form full of them is worse than the problem.
|
|
17
|
+
* While the content overflows, the region gets a `tabindex`, so keyboard users
|
|
18
|
+
* can scroll it. When nothing overflows, it is not a tab stop.
|
|
24
19
|
*
|
|
25
|
-
* `role="region"` only
|
|
26
|
-
*
|
|
27
|
-
* has learned nothing they did not already know.
|
|
20
|
+
* It has `role="region"` only when you set a `label`, because a screen reader
|
|
21
|
+
* announces an unnamed region as only "region".
|
|
28
22
|
*
|
|
29
23
|
* @since 0.1.0
|
|
30
24
|
* @status stable
|
|
@@ -32,9 +26,9 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
|
|
|
32
26
|
* @aliases Scroller, Overflow, Scroll container
|
|
33
27
|
* @documentation https://fusion.dev/helix/components/scroll-area
|
|
34
28
|
*
|
|
35
|
-
* @slot -
|
|
29
|
+
* @slot - The content that scrolls.
|
|
36
30
|
*
|
|
37
|
-
* @csspart edges -
|
|
31
|
+
* @csspart edges - The layer that draws the cues on the inline start and end edges.
|
|
38
32
|
* @csspart viewport - The scrolling box.
|
|
39
33
|
*
|
|
40
34
|
* @cssstate more-block-end - While there is more to scroll to past the block end.
|
|
@@ -45,7 +39,7 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
|
|
|
45
39
|
*/
|
|
46
40
|
export declare class HelixHeadlessScrollArea extends HelixElement {
|
|
47
41
|
/**
|
|
48
|
-
*
|
|
42
|
+
* The region's name, read by screen readers.
|
|
49
43
|
*
|
|
50
44
|
* Without one there is no region: see the note on the class.
|
|
51
45
|
*/
|
|
@@ -60,7 +54,7 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
|
|
|
60
54
|
private scrolls;
|
|
61
55
|
private watcher;
|
|
62
56
|
/**
|
|
63
|
-
* The
|
|
57
|
+
* The element that scrolls. Use it to scroll the content from your code.
|
|
64
58
|
*
|
|
65
59
|
* **Public because the alternative is silence.** The scrolling box is inside
|
|
66
60
|
* this shadow root: a consumer holding a reference to this element holds the
|
|
@@ -3,22 +3,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
3
3
|
import '../../listbox/index.js';
|
|
4
4
|
declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
|
|
5
5
|
/**
|
|
6
|
-
* @summary A
|
|
6
|
+
* @summary A control that opens a list of options to choose from.
|
|
7
7
|
*
|
|
8
8
|
* @description
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* that floats, and somewhere for focus to go back to.
|
|
9
|
+
* A trigger that opens a `Listbox`. The list is the same element you can use on
|
|
10
|
+
* its own, with the same keyboard behavior, filtering, and multi-select rules.
|
|
11
|
+
* Select adds a trigger that shows what is chosen, a floating surface, and a
|
|
12
|
+
* place for focus to return to when the list closes.
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* from its point of view the options belong to something else.
|
|
14
|
+
* Your options stay in your light DOM and are slotted through into the listbox,
|
|
15
|
+
* so the listbox looks through slots to find them.
|
|
18
16
|
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* a second place the answer lives.
|
|
17
|
+
* `Select` owns the value, passes it down to the listbox, and takes changes
|
|
18
|
+
* back, so the value lives in one place.
|
|
22
19
|
*
|
|
23
20
|
* @since 0.1.0
|
|
24
21
|
* @status stable
|
|
@@ -27,46 +24,46 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
|
|
|
27
24
|
* @documentation https://fusion.dev/helix/components/select
|
|
28
25
|
*
|
|
29
26
|
* @slot - The options, and any groups of them.
|
|
30
|
-
* @slot end -
|
|
31
|
-
* @slot hint -
|
|
32
|
-
* @slot indicator - The
|
|
33
|
-
* @slot label -
|
|
34
|
-
* @slot start -
|
|
27
|
+
* @slot end - Content after the chosen value, such as a count, a unit, or a clear button.
|
|
28
|
+
* @slot hint - The hint, for content richer than plain text.
|
|
29
|
+
* @slot indicator - The icon on the trigger that shows it opens, usually a caret.
|
|
30
|
+
* @slot label - The label, for content richer than plain text.
|
|
31
|
+
* @slot start - Content before the chosen value, such as an icon or a prefix.
|
|
35
32
|
*
|
|
36
|
-
* @event {Event} change -
|
|
37
|
-
* @event {HelixBeforeChangeEvent} helix-before-change - Relayed from the listbox when the
|
|
38
|
-
* @event {HelixBeforeCloseEvent} helix-before-close - Fired before
|
|
39
|
-
* @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable:
|
|
40
|
-
* @event {Event} input -
|
|
41
|
-
* @event {Event} toggle -
|
|
33
|
+
* @event {Event} change - Fired after the value changes.
|
|
34
|
+
* @event {HelixBeforeChangeEvent} helix-before-change - Relayed from the listbox when the value is about to change. Cancelable: canceling it stops the change and leaves the decision to you.
|
|
35
|
+
* @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
|
|
36
|
+
* @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
|
|
37
|
+
* @event {Event} input - Fired after the value changes.
|
|
38
|
+
* @event {Event} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
|
|
42
39
|
*
|
|
43
|
-
* @csspart feedback -
|
|
40
|
+
* @csspart feedback - The message that says what is wrong with the value.
|
|
44
41
|
* @csspart hint - Help under the trigger.
|
|
45
|
-
* @csspart indicator - The caret
|
|
46
|
-
* @csspart label - The
|
|
47
|
-
* @csspart listbox - The list inside
|
|
48
|
-
* @csspart listbox-empty -
|
|
49
|
-
* @csspart listbox-feedback -
|
|
50
|
-
* @csspart listbox-filter-icon - The
|
|
51
|
-
* @csspart listbox-filter-mark - The
|
|
42
|
+
* @csspart indicator - The caret that shows the control opens. Replaced by content in the `indicator` slot.
|
|
43
|
+
* @csspart label - The label above the trigger.
|
|
44
|
+
* @csspart listbox - The list inside the panel.
|
|
45
|
+
* @csspart listbox-empty - The text shown when the filter hides every option.
|
|
46
|
+
* @csspart listbox-feedback - The inner list's message that says what is wrong with the value.
|
|
47
|
+
* @csspart listbox-filter-icon - The icon beside the filter field.
|
|
48
|
+
* @csspart listbox-filter-mark - The default icon beside the filter field, shown when none is slotted.
|
|
52
49
|
* @csspart listbox-hint - Help under the list.
|
|
53
|
-
* @csspart listbox-items - The list
|
|
54
|
-
* @csspart listbox-label - The
|
|
55
|
-
* @csspart listbox-live - The inner list's `live
|
|
56
|
-
* @csspart listbox-loading -
|
|
57
|
-
* @csspart listbox-search - The region
|
|
58
|
-
* @csspart listbox-search-field - The field
|
|
50
|
+
* @csspart listbox-items - The list of options.
|
|
51
|
+
* @csspart listbox-label - The label above the list.
|
|
52
|
+
* @csspart listbox-live - The inner list's `live` part, the region screen readers announce its empty and loading text from.
|
|
53
|
+
* @csspart listbox-loading - The text shown while the options load.
|
|
54
|
+
* @csspart listbox-search - The region that holds the filter field.
|
|
55
|
+
* @csspart listbox-search-field - The filter field.
|
|
59
56
|
* @csspart surface - The floating panel.
|
|
60
|
-
* @csspart trigger - The closed control, which
|
|
57
|
+
* @csspart trigger - The closed control, which shows the chosen value.
|
|
61
58
|
* @csspart value - The chosen option's text inside the trigger.
|
|
62
59
|
*
|
|
63
|
-
* @cssstate invalid -
|
|
60
|
+
* @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
|
|
64
61
|
* @cssstate open - While the list is open.
|
|
65
62
|
*/
|
|
66
63
|
export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
|
|
67
64
|
protected readonly aria: AriaForwardController;
|
|
68
65
|
/**
|
|
69
|
-
*
|
|
66
|
+
* The text shown when no options match the filter.
|
|
70
67
|
*/
|
|
71
68
|
emptyText: string;
|
|
72
69
|
/**
|
|
@@ -77,7 +74,7 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
|
|
|
77
74
|
*/
|
|
78
75
|
filterable: boolean;
|
|
79
76
|
/**
|
|
80
|
-
* Whether the options are still
|
|
77
|
+
* Whether the options are still loading.
|
|
81
78
|
*
|
|
82
79
|
* Passed straight to the list, which is where the rows are and so where the
|
|
83
80
|
* message belongs. Two components saying "Loading" about one request is a
|
|
@@ -85,11 +82,11 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
|
|
|
85
82
|
*/
|
|
86
83
|
loading: boolean;
|
|
87
84
|
/**
|
|
88
|
-
*
|
|
85
|
+
* The text shown while the options load.
|
|
89
86
|
*/
|
|
90
87
|
loadingText: string;
|
|
91
88
|
/**
|
|
92
|
-
* Whether more than one option can be
|
|
89
|
+
* Whether more than one option can be chosen.
|
|
93
90
|
*/
|
|
94
91
|
multiple: boolean;
|
|
95
92
|
/**
|
|
@@ -106,7 +103,7 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
|
|
|
106
103
|
*/
|
|
107
104
|
get selectedIndex(): number;
|
|
108
105
|
set selectedIndex(at: number);
|
|
109
|
-
/**
|
|
106
|
+
/** The kind of select, as the platform names it: `select-one` or `select-multiple`. */
|
|
110
107
|
get type(): string;
|
|
111
108
|
/**
|
|
112
109
|
* The list inside the surface, or nothing where there is no DOM to hold one.
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { HelixElement } from '@fusion.dev/helix-core';
|
|
2
2
|
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
4
|
+
* @summary A placeholder shown in place of content that is still loading.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* Sets `aria-busy` and a polite live region, so a screen reader announces that
|
|
8
|
+
* the region is loading. Both are set through `ElementInternals`, which writes
|
|
9
|
+
* no attributes.
|
|
10
10
|
*
|
|
11
|
-
*
|
|
12
|
-
* presentation,
|
|
13
|
-
* property, which is the one thing that tier is for not having.
|
|
11
|
+
* There is no `shape` property. Whether a placeholder is a line, a block, or a
|
|
12
|
+
* circle is presentation, which belongs to the styled tier.
|
|
14
13
|
*
|
|
15
14
|
* @since 0.1.0
|
|
16
15
|
* @status stable
|
|
@@ -18,7 +17,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
18
17
|
* @aliases Placeholder, Shimmer, Ghost
|
|
19
18
|
* @documentation https://fusion.dev/helix/components/skeleton
|
|
20
19
|
*
|
|
21
|
-
* @csspart skeleton - The placeholder
|
|
20
|
+
* @csspart skeleton - The placeholder shape.
|
|
22
21
|
*/
|
|
23
22
|
export declare class HelixHeadlessSkeleton extends HelixElement {
|
|
24
23
|
protected willUpdate(changed: PropertyValues): void;
|
|
@@ -1,35 +1,28 @@
|
|
|
1
1
|
import { HelixElement } from '@fusion.dev/helix-core';
|
|
2
2
|
import { type TemplateResult } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
5
|
-
*
|
|
4
|
+
* @summary A link at the start of a page that moves keyboard focus past the
|
|
5
|
+
* header to the main content.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* content.
|
|
8
|
+
* Without a skip link, keyboard users tab through the whole header on every
|
|
9
|
+
* page before they reach the content. The skip link goes first in the document
|
|
10
|
+
* and points at the content.
|
|
12
11
|
*
|
|
13
|
-
*
|
|
14
|
-
* scrolls
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* them, since `<main>` cannot, is given `tabindex="-1"` for as long as it holds
|
|
18
|
-
* focus and has it taken off again when focus leaves, so the page ends up as the
|
|
19
|
-
* consumer wrote it.
|
|
12
|
+
* Pressing it moves focus as well as the scroll position. An in-page link alone
|
|
13
|
+
* scrolls but leaves focus behind, so the next Tab lands in the header. A
|
|
14
|
+
* target that cannot take focus, such as `<main>`, gets `tabindex="-1"` while
|
|
15
|
+
* it has focus, and the attribute is removed when focus leaves.
|
|
20
16
|
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* it scrolls there and moves the point the next Tab starts from.
|
|
17
|
+
* The press is handled in script, so no `#main` is added to the URL and no
|
|
18
|
+
* history entry is created, and a router that reads the hash is not affected.
|
|
19
|
+
* The anchor has a real `href`, so before any script runs it works as a plain
|
|
20
|
+
* link: it scrolls to the target and moves the point the next Tab starts from.
|
|
26
21
|
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* order as well, and a skip link nobody can reach is the most common way one is
|
|
32
|
-
* broken.
|
|
22
|
+
* The styled tier hides the link until it has focus. On this tier the link is
|
|
23
|
+
* always visible. To hide it yourself, hide `::part(link)` while the host is
|
|
24
|
+
* not `:focus-within`. Do not use `display: none` or `visibility: hidden`,
|
|
25
|
+
* because they also remove the link from the tab order.
|
|
33
26
|
*
|
|
34
27
|
* @since 0.1.0
|
|
35
28
|
* @status stable
|
|
@@ -37,15 +30,15 @@ import { type TemplateResult } from 'lit';
|
|
|
37
30
|
* @aliases Skip navigation, Skip to content
|
|
38
31
|
* @documentation https://fusion.dev/helix/components/skip-link
|
|
39
32
|
*
|
|
40
|
-
* @slot - The link's
|
|
33
|
+
* @slot - The link's text. Defaults to `label`.
|
|
41
34
|
*
|
|
42
|
-
* @csspart link - The anchor
|
|
35
|
+
* @csspart link - The anchor. It takes the focus.
|
|
43
36
|
*/
|
|
44
37
|
export declare class HelixHeadlessSkipLink extends HelixElement {
|
|
45
38
|
/** Focus goes to the anchor inside, so the host is never the focus target. */
|
|
46
39
|
static shadowRootOptions: ShadowRootInit;
|
|
47
40
|
/**
|
|
48
|
-
*
|
|
41
|
+
* The in-page fragment the link moves focus to, such as `#main`.
|
|
49
42
|
*
|
|
50
43
|
* `#main` by default, because that is the id the content region almost always
|
|
51
44
|
* has; a page whose content is somewhere else says so. Anything that is not a
|
|
@@ -54,7 +47,7 @@ export declare class HelixHeadlessSkipLink extends HelixElement {
|
|
|
54
47
|
*/
|
|
55
48
|
href: string;
|
|
56
49
|
/**
|
|
57
|
-
* The link's
|
|
50
|
+
* The link's text, when it is plain text.
|
|
58
51
|
*
|
|
59
52
|
* The fallback of the default slot, so slotted content replaces it rather than
|
|
60
53
|
* appearing beside it.
|