@fusion.dev/helix-headless 0.104.1 → 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 +10386 -3813
- 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 +62 -56
- package/dist/color-input/root/color-input-root.js +3 -0
- package/dist/color-picker/root/color-picker-root.d.ts +61 -49
- package/dist/color-picker/root/color-picker-root.js +4 -0
- package/dist/combobox/root/combobox-root.d.ts +52 -53
- package/dist/command/root/command-root.d.ts +40 -40
- package/dist/command/root/command-root.js +1 -0
- 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 +19 -1
- 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 +48 -0
- package/dist/map/area/map-area.js +40 -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 +14 -0
- package/dist/map/index.js +10 -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 +120 -0
- package/dist/map/marker/map-marker.js +109 -0
- package/dist/map/points/map-points.d.ts +139 -0
- package/dist/map/points/map-points.js +161 -0
- package/dist/map/position/map-position.d.ts +70 -0
- package/dist/map/position/map-position.js +89 -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 +269 -52
- package/dist/map/root/map-root.js +473 -5
- package/dist/map/route/map-route.d.ts +73 -0
- package/dist/map/route/map-route.js +52 -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 +14011 -11983
- package/types/svelte.d.ts +10 -0
- package/types/vue.d.ts +2143 -1497
|
@@ -7,24 +7,19 @@ declare const HelixHeadlessNotificationGroup_base: (new (...args: any[]) => impo
|
|
|
7
7
|
* them.
|
|
8
8
|
*
|
|
9
9
|
* @description
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* together and told what to call itself, exactly as `FilterField` is told what
|
|
15
|
-
* its operators are.
|
|
10
|
+
* You decide what goes in each group. A feed can be grouped by day, by subject,
|
|
11
|
+
* by person, or not at all, so you write a group around the rows that belong
|
|
12
|
+
* together and give it a `label`, the same way you give `FilterField` its
|
|
13
|
+
* operators.
|
|
16
14
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* for itself. `Notifications` already assigns its list this way and this borrows
|
|
22
|
-
* the mechanism.
|
|
15
|
+
* A collapsed group shows its first row and assigns the rest to no slot. The
|
|
16
|
+
* slot is assigned imperatively, so the later rows are absent from the layout
|
|
17
|
+
* and from the accessibility tree without any CSS. `Notifications` assigns its
|
|
18
|
+
* list the same way.
|
|
23
19
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* Left off, it is the number of rows.
|
|
20
|
+
* `count` is set separately from the rows, so a group can show a count of five
|
|
21
|
+
* with one row under it and a link to the rest. When `count` is not set, it is
|
|
22
|
+
* the number of rows.
|
|
28
23
|
*
|
|
29
24
|
* @since 0.24.0
|
|
30
25
|
* @status stable
|
|
@@ -34,19 +29,19 @@ declare const HelixHeadlessNotificationGroup_base: (new (...args: any[]) => impo
|
|
|
34
29
|
*
|
|
35
30
|
* @slot - The notifications in this group.
|
|
36
31
|
* @slot actions - Beside the count, for a link to the rest of them.
|
|
37
|
-
* @slot label - Replaces the group's name, for a heading that
|
|
32
|
+
* @slot label - Replaces the group's name, for a heading that includes an icon.
|
|
38
33
|
*
|
|
39
|
-
* @event {HelixBeforeCloseEvent} helix-before-close - Fired before the group
|
|
40
|
-
* @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group
|
|
34
|
+
* @event {HelixBeforeCloseEvent} helix-before-close - Fired before the group collapses. Cancelable.
|
|
35
|
+
* @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group expands. Cancelable: cancel it to keep the group collapsed.
|
|
41
36
|
*
|
|
42
37
|
* @csspart actions - The trailing region of the header.
|
|
43
|
-
* @csspart count -
|
|
44
|
-
* @csspart header - The label, the count and the
|
|
38
|
+
* @csspart count - The number of notifications in the group.
|
|
39
|
+
* @csspart header - The label, the count, and the actions together.
|
|
45
40
|
* @csspart items - The region holding the notifications.
|
|
46
|
-
* @csspart label -
|
|
47
|
-
* @csspart trigger - The control that collapses and expands,
|
|
41
|
+
* @csspart label - The group's name.
|
|
42
|
+
* @csspart trigger - The control that collapses and expands the group, when `collapsible` is set.
|
|
48
43
|
*
|
|
49
|
-
* @cssstate open -
|
|
44
|
+
* @cssstate open - The group shows all of its notifications.
|
|
50
45
|
*/
|
|
51
46
|
export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotificationGroup_base {
|
|
52
47
|
/**
|
|
@@ -73,7 +68,7 @@ export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotific
|
|
|
73
68
|
*/
|
|
74
69
|
collapsible: boolean;
|
|
75
70
|
/**
|
|
76
|
-
*
|
|
71
|
+
* The number of notifications the group represents.
|
|
77
72
|
*
|
|
78
73
|
* **Not the number of rows, and that is the point.** A group saying five with
|
|
79
74
|
* one row under it and a link to the rest is the ordinary shape of a feed that
|
|
@@ -82,14 +77,15 @@ export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotific
|
|
|
82
77
|
*/
|
|
83
78
|
count?: number;
|
|
84
79
|
/**
|
|
85
|
-
*
|
|
80
|
+
* The group's name, such as a day, a subject, or a person.
|
|
86
81
|
*
|
|
87
82
|
* The slot's fallback rather than its replacement, so a consumer who wants a
|
|
88
83
|
* mark beside the name slots `label` and this goes unused.
|
|
89
84
|
*/
|
|
90
85
|
label: string;
|
|
91
86
|
/**
|
|
92
|
-
*
|
|
87
|
+
* Marks this element as a notification group, so the feed can recognize it
|
|
88
|
+
* without importing its class.
|
|
93
89
|
*
|
|
94
90
|
* The same seam `Notification` uses: a root reads a child's markers rather
|
|
95
91
|
* than its constructor, so the two tiers never have to agree about which class
|
|
@@ -98,7 +94,10 @@ export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotific
|
|
|
98
94
|
readonly isNotificationGroup = true;
|
|
99
95
|
/** The notifications written into this group, in the order they were given. */
|
|
100
96
|
get items(): HelixHeadlessNotification[];
|
|
101
|
-
/**
|
|
97
|
+
/**
|
|
98
|
+
* The number of notifications the group represents: `count` when it is set,
|
|
99
|
+
* or the number of rows.
|
|
100
|
+
*/
|
|
102
101
|
get total(): number;
|
|
103
102
|
/**
|
|
104
103
|
* The same number where anything can know it, and nothing where nothing can.
|
|
@@ -3,32 +3,24 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
|
|
|
3
3
|
import '../../format-date/index.js';
|
|
4
4
|
declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
|
|
5
5
|
/**
|
|
6
|
-
* @summary
|
|
6
|
+
* @summary A single notification about something that happened, marked read or unread.
|
|
7
7
|
*
|
|
8
8
|
* @description
|
|
9
|
-
* A notification is a toast that
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* state each item carries rather than the arrangement it sits in: read and
|
|
13
|
-
* unread, a timestamp that has to stay correct, and an action a reader can take
|
|
14
|
-
* later.
|
|
9
|
+
* A notification is a toast that stays. `Toast` is a live region whose items
|
|
10
|
+
* have a `duration`. A notification carries state instead: read or unread, a
|
|
11
|
+
* timestamp that stays correct, and an action you can take later.
|
|
15
12
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* reader wants exactly one of them at a time: the time while they are scanning,
|
|
21
|
-
* and what they can do about it once they have stopped on a row.
|
|
13
|
+
* The row has a label, a caption under it, and one trailing column. The label
|
|
14
|
+
* gets the first line on its own, so a feed is quick to scan. The trailing
|
|
15
|
+
* column shows either the time or the controls: the time while you scan, and
|
|
16
|
+
* the controls once you stop on a row.
|
|
22
17
|
*
|
|
23
|
-
*
|
|
24
|
-
* datetime>` and the shared timer
|
|
25
|
-
* component that formats a date is not a fact about notifications: Chat wanted
|
|
26
|
-
* the same thing and had its own copy of half of it.
|
|
18
|
+
* `FormatDate` renders the timestamp, including the readable text, the
|
|
19
|
+
* `<time datetime>` element, and the shared timer that keeps it current.
|
|
27
20
|
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* cancelable, and a `read` set by the consumer makes this element defer entirely.
|
|
21
|
+
* Read state is reported to you. Marking a notification read is usually a round
|
|
22
|
+
* trip to a server, so `helix-read` is cancelable, and when you set `read`
|
|
23
|
+
* yourself the element leaves it to you.
|
|
32
24
|
*
|
|
33
25
|
* @since 0.1.0
|
|
34
26
|
* @status stable
|
|
@@ -36,35 +28,35 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
|
|
|
36
28
|
* @aliases Notification item, Inbox item
|
|
37
29
|
* @documentation https://fusion.dev/helix/components/notifications
|
|
38
30
|
*
|
|
39
|
-
* @slot - What happened, in
|
|
40
|
-
* @slot actions -
|
|
41
|
-
*
|
|
42
|
-
* @slot description - A second line
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
* @slot detail - A block
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
* @slot dismiss - Replaces the
|
|
49
|
-
* only
|
|
31
|
+
* @slot - What happened, in your own markup.
|
|
32
|
+
* @slot actions - Actions the user can take, shown under the text. They are always visible,
|
|
33
|
+
* because acting on the notification is the purpose of the row.
|
|
34
|
+
* @slot description - A second, quieter line with more detail. It is a bare slot
|
|
35
|
+
* with no wrapping box, so an item without a description costs nothing. Style it
|
|
36
|
+
* with `::slotted()`.
|
|
37
|
+
* @slot detail - A block of content in the row, such as a quoted comment, a status
|
|
38
|
+
* change from one value to another, or a preview. It sets no text size or color, because
|
|
39
|
+
* its content usually brings its own.
|
|
40
|
+
* @slot dismiss - Replaces the icon inside the dismiss control, which is drawn
|
|
41
|
+
* only when the row is `dismissible`.
|
|
50
42
|
* @slot media - An avatar or icon identifying who or what it came from.
|
|
51
43
|
*
|
|
52
|
-
* @event {HelixDismissEvent} helix-dismiss - Fired when
|
|
53
|
-
* @event {HelixReadEvent} helix-read - Fired when the
|
|
44
|
+
* @event {HelixDismissEvent} helix-dismiss - Fired when the user dismisses the notification. Cancelable.
|
|
45
|
+
* @event {HelixReadEvent} helix-read - Fired when the notification is marked read or unread. Cancelable.
|
|
54
46
|
*
|
|
55
47
|
* @csspart actions - The trailing slot's box.
|
|
56
48
|
* @csspart body - The label and the caption together.
|
|
57
|
-
* @csspart controls - The actions and the dismiss,
|
|
58
|
-
* @csspart dismiss - The control that
|
|
59
|
-
* @csspart dismiss-mark - The
|
|
49
|
+
* @csspart controls - The actions and the dismiss control, shown in place of the time.
|
|
50
|
+
* @csspart dismiss - The control that dismisses the notification.
|
|
51
|
+
* @csspart dismiss-mark - The icon on the dismiss control, when no icon is slotted.
|
|
60
52
|
* @csspart item - The whole notification.
|
|
61
53
|
* @csspart label - What happened, on the first line.
|
|
62
54
|
* @csspart media - The leading slot's box.
|
|
63
|
-
* @csspart time - When it happened,
|
|
55
|
+
* @csspart time - When it happened, formatted for people to read.
|
|
64
56
|
* @csspart trailing - The column holding the time and the controls.
|
|
65
57
|
*
|
|
66
58
|
* @cssstate actions - While the actions slot holds something, so the words above make room for it.
|
|
67
|
-
* @cssstate controls -
|
|
59
|
+
* @cssstate controls - The item can be dismissed, so the time gives way to the dismiss control under a pointer.
|
|
68
60
|
* @cssstate read - While it has been read.
|
|
69
61
|
*/
|
|
70
62
|
export declare class HelixHeadlessNotification extends HelixHeadlessNotification_base {
|
|
@@ -78,7 +70,7 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
|
|
|
78
70
|
*/
|
|
79
71
|
at: string;
|
|
80
72
|
/**
|
|
81
|
-
*
|
|
73
|
+
* Whether the notification starts as read, used until `read` is set.
|
|
82
74
|
*/
|
|
83
75
|
defaultRead: boolean;
|
|
84
76
|
/**
|
|
@@ -88,7 +80,7 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
|
|
|
88
80
|
*/
|
|
89
81
|
locale: string;
|
|
90
82
|
/**
|
|
91
|
-
* Whether the
|
|
83
|
+
* Whether the notification has been read.
|
|
92
84
|
*
|
|
93
85
|
* Set it and this element defers: a reader's click fires `helix-read` and
|
|
94
86
|
* changes nothing until a new value arrives. `default-read` seeds a state
|
|
@@ -112,7 +104,8 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
|
|
|
112
104
|
readonly isNotification = true;
|
|
113
105
|
private readState;
|
|
114
106
|
/**
|
|
115
|
-
*
|
|
107
|
+
* Requests that the notification be marked read, and returns whether the
|
|
108
|
+
* change was applied.
|
|
116
109
|
*
|
|
117
110
|
* Public because a consumer's own control is as likely to ask as this
|
|
118
111
|
* element's own markup is, and because a list marking everything read has to
|
|
@@ -4,25 +4,22 @@ import type { HelixHeadlessNotificationGroup } from '../group/notification-group
|
|
|
4
4
|
import type { HelixHeadlessNotification } from '../notification/notification.js';
|
|
5
5
|
declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
|
|
6
6
|
/**
|
|
7
|
-
* @summary A feed
|
|
7
|
+
* @summary A feed of notifications, each marked read or unread.
|
|
8
8
|
*
|
|
9
9
|
* @description
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* item hold anything.
|
|
10
|
+
* Notifications are slotted children. Each one is your own markup, with an
|
|
11
|
+
* avatar, a link, or a button in it. Feeds usually hold tens of items, so
|
|
12
|
+
* writing them out lets an item hold anything.
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* custom cell, and this component will not grow into one.
|
|
14
|
+
* The list does not virtualize. Windowing needs the list to own the data, and
|
|
15
|
+
* here you own it, so N notifications are N elements. For a feed of thousands,
|
|
16
|
+
* use a data table with a custom cell.
|
|
19
17
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* either of them counting.
|
|
18
|
+
* Read state is reported to you. Marking read goes from the root to the item
|
|
19
|
+
* and from the item to you, so a canceled `helix-read` changes nothing, and if
|
|
20
|
+
* you own `read`, nothing changes until you set it. `unread` is derived from
|
|
21
|
+
* the items and written to an attribute, so a stylesheet and a badge can both
|
|
22
|
+
* use it without counting.
|
|
26
23
|
*
|
|
27
24
|
* @since 0.1.0
|
|
28
25
|
* @status stable
|
|
@@ -34,15 +31,15 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
|
|
|
34
31
|
* @slot footer - Below the list, for a link to everything.
|
|
35
32
|
* @slot header - Above the list, for a title and the mark-all control.
|
|
36
33
|
*
|
|
37
|
-
* @event {HelixDismissEvent} helix-dismiss -
|
|
38
|
-
* @event {HelixReadEvent} helix-read - Fired by an item, and by
|
|
34
|
+
* @event {HelixDismissEvent} helix-dismiss - Fired when the user dismisses a row. The row dispatches it, and you can listen for it on the feed. Cancelable: cancel it to keep the row.
|
|
35
|
+
* @event {HelixReadEvent} helix-read - Fired by an item when it is marked read or unread, and by the feed when everything is marked read. Cancelable.
|
|
39
36
|
*
|
|
40
37
|
* @csspart empty - Shown when there is nothing in the feed.
|
|
41
38
|
* @csspart footer - The region below the list.
|
|
42
39
|
* @csspart header - The region above the list.
|
|
43
40
|
* @csspart list - The list itself.
|
|
44
|
-
* @csspart live -
|
|
45
|
-
* @csspart loading - Shown while the feed is
|
|
41
|
+
* @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
|
|
42
|
+
* @csspart loading - Shown while the feed is loading.
|
|
46
43
|
* @csspart mark-all - The control that marks everything read.
|
|
47
44
|
*
|
|
48
45
|
* @cssstate media - While a notification in the list holds something in its media slot, so every row keeps that column.
|
|
@@ -59,7 +56,7 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
|
|
|
59
56
|
*/
|
|
60
57
|
static shadowRootOptions: ShadowRootInit;
|
|
61
58
|
/**
|
|
62
|
-
*
|
|
59
|
+
* The feed's name, read by screen readers.
|
|
63
60
|
*/
|
|
64
61
|
label: string;
|
|
65
62
|
/**
|
|
@@ -67,7 +64,7 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
|
|
|
67
64
|
*/
|
|
68
65
|
markAll: boolean;
|
|
69
66
|
/**
|
|
70
|
-
* Label for
|
|
67
|
+
* Label for the mark-all control.
|
|
71
68
|
*/
|
|
72
69
|
markAllLabel: string;
|
|
73
70
|
/**
|
|
@@ -102,7 +99,8 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
|
|
|
102
99
|
*/
|
|
103
100
|
get items(): HelixHeadlessNotification[];
|
|
104
101
|
/**
|
|
105
|
-
*
|
|
102
|
+
* The content assigned to the list slot: the rows and the groups, in the
|
|
103
|
+
* order they are written.
|
|
106
104
|
*
|
|
107
105
|
* Not `items`, which reaches through a group to the rows inside it. Assigning
|
|
108
106
|
* those would lift them out of the group that is arranging them and hand the
|
|
@@ -118,7 +116,7 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
|
|
|
118
116
|
*/
|
|
119
117
|
get groups(): HelixHeadlessNotificationGroup[];
|
|
120
118
|
/**
|
|
121
|
-
*
|
|
119
|
+
* Collapses every collapsible group, and returns how many changed.
|
|
122
120
|
*
|
|
123
121
|
* **A command, not a second place the state lives.** A group owns whether it
|
|
124
122
|
* is folded; this asks all of them at once. The alternative, a property on the
|
|
@@ -141,7 +139,7 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
|
|
|
141
139
|
*/
|
|
142
140
|
foldEveryGroup(folded?: boolean): number;
|
|
143
141
|
/**
|
|
144
|
-
* Marks every unread item read, and
|
|
142
|
+
* Marks every unread item read, and returns how many changed.
|
|
145
143
|
*
|
|
146
144
|
* **Through each item's own request rather than by writing its property**,
|
|
147
145
|
* which is what makes one refusal refuse one item: a consumer who owns some
|
|
@@ -2,34 +2,27 @@ import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core'
|
|
|
2
2
|
import { nothing, type PropertyValues, type TemplateResult } from 'lit';
|
|
3
3
|
declare const HelixHeadlessNumberInput_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 field for a number, typed or changed with step buttons.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
|
-
*
|
|
9
|
-
* binds four keys `Input` does not, and
|
|
10
|
-
* alternative and not a variant.
|
|
8
|
+
* A separate family from `Input`'s `type="number"`. It renders two buttons,
|
|
9
|
+
* binds four keys `Input` does not, and handles clamping and stepping.
|
|
11
10
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
11
|
+
* The field is `type="text"` with `inputmode="decimal"`. Tested in a real
|
|
12
|
+
* browser, `type="number"` fails in three ways:
|
|
13
|
+
* - Typing `12e` gives a `.value` of `""`, so the element cannot see what you
|
|
14
|
+
* typed. A `type="text"` field keeps `"12e"`.
|
|
15
|
+
* - The mouse wheel over a focused field changes the value, for example from 5
|
|
16
|
+
* to 4, when you only meant to scroll the page.
|
|
17
|
+
* - `selectionStart` is `null`, so the caret cannot be managed.
|
|
15
18
|
*
|
|
16
|
-
*
|
|
17
|
-
* typed "12e" into type=number → .value === ""
|
|
18
|
-
* focused, wheeled over it → 5 became 4
|
|
19
|
-
* selectionStart on type=number → null
|
|
20
|
-
* same keystrokes into type=text → .value === "12e"
|
|
21
|
-
* ```
|
|
19
|
+
* `inputmode="decimal"` keeps the numeric keypad on phones.
|
|
22
20
|
*
|
|
23
|
-
*
|
|
24
|
-
* second changes a value because a page scrolled past. The third means the
|
|
25
|
-
* caret cannot be managed at all. `inputmode` keeps the phone keypad, which is
|
|
26
|
-
* the one thing `type=number` was giving.
|
|
27
|
-
*
|
|
28
|
-
* Validity is still the platform's, through `min`, `max` and `step` mirrored
|
|
21
|
+
* Validity still comes from the platform: `min`, `max`, and `step` are mirrored
|
|
29
22
|
* onto the host's own `setValidity`.
|
|
30
23
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
24
|
+
* Stepping is separate from typing, so a number is not corrected while you type
|
|
25
|
+
* it.
|
|
33
26
|
*
|
|
34
27
|
* @since 0.1.0
|
|
35
28
|
* @status stable
|
|
@@ -37,31 +30,31 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
|
|
|
37
30
|
* @aliases NumberField, Stepper, InputNumber
|
|
38
31
|
* @documentation https://fusion.dev/helix/components/number-input
|
|
39
32
|
*
|
|
40
|
-
* @slot end -
|
|
41
|
-
* @slot start -
|
|
33
|
+
* @slot end - Content after the number, such as a unit.
|
|
34
|
+
* @slot start - Content before the number, such as a unit or an icon.
|
|
42
35
|
*
|
|
43
|
-
* @event {Event} change -
|
|
44
|
-
* @event {HelixBeforeChangeEvent} helix-before-change -
|
|
45
|
-
* @event {Event} input -
|
|
36
|
+
* @event {Event} change - The user finished changing the value. Relayed from the native field.
|
|
37
|
+
* @event {HelixBeforeChangeEvent} helix-before-change - The value is about to change. Cancelable: cancel it to keep the current value.
|
|
38
|
+
* @event {Event} input - The value changed.
|
|
46
39
|
*
|
|
47
|
-
* @csspart control - The
|
|
48
|
-
* @csspart decrement - The
|
|
49
|
-
* @csspart decrement-mark - The
|
|
50
|
-
* @csspart feedback -
|
|
51
|
-
* @csspart field - The box
|
|
52
|
-
* @csspart hint - Help under the field, while
|
|
53
|
-
* @csspart increment - The
|
|
54
|
-
* @csspart increment-mark - The
|
|
55
|
-
* @csspart label - The
|
|
40
|
+
* @csspart control - The input that holds the number.
|
|
41
|
+
* @csspart decrement - The button that steps the value down.
|
|
42
|
+
* @csspart decrement-mark - The icon on the step down button.
|
|
43
|
+
* @csspart feedback - The message that says what is wrong.
|
|
44
|
+
* @csspart field - The box that holds the whole control.
|
|
45
|
+
* @csspart hint - Help text under the field, shown while there is no feedback.
|
|
46
|
+
* @csspart increment - The button that steps the value up.
|
|
47
|
+
* @csspart increment-mark - The icon on the step up button.
|
|
48
|
+
* @csspart label - The label above the field. It is also the grip you drag when `scrub` is set.
|
|
56
49
|
*
|
|
57
|
-
* @cssstate invalid -
|
|
50
|
+
* @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
|
|
58
51
|
*/
|
|
59
52
|
export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_base {
|
|
60
53
|
protected readonly aria: AriaForwardController;
|
|
61
54
|
/** Typed or dragged, so every edit is announced. See `announcesInput`. */
|
|
62
55
|
protected readonly announcesInput = true;
|
|
63
56
|
/**
|
|
64
|
-
* What the browser may autofill
|
|
57
|
+
* What the browser may autofill, as an HTML `autocomplete` token.
|
|
65
58
|
*
|
|
66
59
|
* Empty leaves the attribute off, which is the browser's default and is what
|
|
67
60
|
* lets autofill work at all. Hardcoding `off` here is what stops a reader
|
|
@@ -70,7 +63,8 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
|
|
|
70
63
|
*/
|
|
71
64
|
autocomplete: string;
|
|
72
65
|
/**
|
|
73
|
-
*
|
|
66
|
+
* The message the browser shows when the field holds something that is not a
|
|
67
|
+
* number.
|
|
74
68
|
*
|
|
75
69
|
* **Every sentence a control raises in the browser's bubble is a property**,
|
|
76
70
|
* named for the validity flag it reports, so a form in another language
|
|
@@ -79,15 +73,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
|
|
|
79
73
|
*/
|
|
80
74
|
badInputMessage?: string;
|
|
81
75
|
/**
|
|
82
|
-
*
|
|
76
|
+
* The name of the step down button, read by screen readers.
|
|
83
77
|
*/
|
|
84
78
|
decrementLabel: string;
|
|
85
79
|
/**
|
|
86
|
-
*
|
|
80
|
+
* The name of the step up button, read by screen readers.
|
|
87
81
|
*/
|
|
88
82
|
incrementLabel: string;
|
|
89
83
|
/**
|
|
90
|
-
* How
|
|
84
|
+
* How many steps `PageUp` and `PageDown` move.
|
|
91
85
|
*
|
|
92
86
|
* Ten steps, which is the convention every spinner on the platform follows,
|
|
93
87
|
* and a property because ten of a step of `0.01` is a hundredth and rarely
|
|
@@ -95,13 +89,13 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
|
|
|
95
89
|
*/
|
|
96
90
|
largeStep?: number;
|
|
97
91
|
/**
|
|
98
|
-
*
|
|
92
|
+
* The largest value allowed.
|
|
99
93
|
*
|
|
100
94
|
* Absent has no ceiling.
|
|
101
95
|
*/
|
|
102
96
|
max?: number;
|
|
103
97
|
/**
|
|
104
|
-
*
|
|
98
|
+
* The smallest value allowed.
|
|
105
99
|
*
|
|
106
100
|
* Absent has no floor.
|
|
107
101
|
*/
|
|
@@ -113,19 +107,21 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
|
|
|
113
107
|
*/
|
|
114
108
|
placeholder: string;
|
|
115
109
|
/**
|
|
116
|
-
*
|
|
110
|
+
* The message the browser shows when the number is above `max`, with `{max}`
|
|
111
|
+
* filled in.
|
|
117
112
|
*/
|
|
118
113
|
rangeOverflowMessage?: string;
|
|
119
114
|
/**
|
|
120
|
-
*
|
|
115
|
+
* The message the browser shows when the number is below `min`, with `{min}`
|
|
116
|
+
* filled in.
|
|
121
117
|
*/
|
|
122
118
|
rangeUnderflowMessage?: string;
|
|
123
119
|
/**
|
|
124
|
-
*
|
|
120
|
+
* Prevents editing. The value is still submitted with the form.
|
|
125
121
|
*/
|
|
126
122
|
readOnly: boolean;
|
|
127
123
|
/**
|
|
128
|
-
*
|
|
124
|
+
* Makes the label a grip that changes the value when it is dragged.
|
|
129
125
|
*
|
|
130
126
|
* The label is what is dragged, so this adds no chrome at all. Still opt-in,
|
|
131
127
|
* because it changes what a press on the label does and a reader who drags
|
|
@@ -173,10 +169,10 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
|
|
|
173
169
|
* refused step, or one pinned at a bound, finished nothing.
|
|
174
170
|
*/
|
|
175
171
|
private land;
|
|
176
|
-
/**
|
|
172
|
+
/** Steps the value up, by `largeStep` steps when `large` is set. */
|
|
177
173
|
stepUp(large?: boolean): void;
|
|
178
174
|
/**
|
|
179
|
-
* Steps the value down, by `largeStep` when `large` is set.
|
|
175
|
+
* Steps the value down, by `largeStep` steps when `large` is set.
|
|
180
176
|
*
|
|
181
177
|
* The same path a press of the down arrow takes, so a consumer driving this
|
|
182
178
|
* from their own control gets the clamping and the announcement rather than
|
|
@@ -278,7 +274,7 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
|
|
|
278
274
|
* message is what a native spinner would have said.
|
|
279
275
|
*/
|
|
280
276
|
private sync;
|
|
281
|
-
/** Puts the
|
|
277
|
+
/** Puts the cursor in the field. */
|
|
282
278
|
focus(options?: FocusOptions): void;
|
|
283
279
|
/** Selects the number, so typing replaces it. */
|
|
284
280
|
select(): void;
|