@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
|
@@ -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;
|
|
@@ -14,44 +14,32 @@ interface Row {
|
|
|
14
14
|
value: unknown;
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
|
-
* @summary A value
|
|
18
|
-
*
|
|
17
|
+
* @summary A structured value shown as a tree, where you can close branches,
|
|
18
|
+
* see how many entries each holds, and copy any part.
|
|
19
19
|
*
|
|
20
20
|
* @description
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* scrolls a wall of JSON and cannot put away the branch they do not care about;
|
|
24
|
-
* as a Tree, every node is a label and a string reads the same as a number. This
|
|
25
|
-
* reads the value and draws each entry with its type visible.
|
|
21
|
+
* Object Inspector shows a structured value, such as an API response, a config,
|
|
22
|
+
* or a raw record, as a read-only tree with each entry's type visible.
|
|
26
23
|
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
24
|
+
* Pass the object to `value`, or name a `<script type="application/json">` by
|
|
25
|
+
* id with `for`, the same source `VirtualList` and the charts read. JSON text
|
|
26
|
+
* works with server rendering and with React hydration, which skips object
|
|
27
|
+
* properties. `value` wins when both are set.
|
|
30
28
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
29
|
+
* The tree is one tab stop. Up and Down move between rows, Right opens a branch
|
|
30
|
+
* or moves into it, Left closes it or moves to its parent, and Home and End
|
|
31
|
+
* move to the first and last rows. Focus stays on the tree, and
|
|
32
|
+
* `aria-activedescendant` marks the active row. Each row carries its real
|
|
33
|
+
* level, position, and set size, including in a windowed tree.
|
|
36
34
|
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
* windowed tree drop rows from the page without dropping focus with them. Each
|
|
42
|
-
* row carries its real level, position and set size, so a reader on a windowed
|
|
43
|
-
* row hears where it is in the value rather than in the slice drawn.
|
|
35
|
+
* The copy button copies the active row, a branch as JSON and a string as its
|
|
36
|
+
* text. So do Command+C and Control+C while the tree has focus and no text is
|
|
37
|
+
* selected. The button sits beside the tree, because assistive technology
|
|
38
|
+
* cannot reliably reach a button inside a tree item.
|
|
44
39
|
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
* button would be an interactive control inside a tree item, which assistive
|
|
49
|
-
* technology cannot reach reliably.
|
|
50
|
-
*
|
|
51
|
-
* **`windowed` draws only the rows in view**, for a value of thousands of
|
|
52
|
-
* entries, through the same controller `VirtualList` and `DataTable` use. The
|
|
53
|
-
* box has to have a height for that to mean anything, which the styled tier
|
|
54
|
-
* gives it and a headless consumer has to.
|
|
40
|
+
* `windowed` draws only the rows in view, for values with thousands of entries.
|
|
41
|
+
* The box needs a height for windowing to work. The styled tier sets one, and
|
|
42
|
+
* in the headless tier you set it yourself.
|
|
55
43
|
*
|
|
56
44
|
* @since 0.1.0
|
|
57
45
|
* @status stable
|
|
@@ -61,48 +49,48 @@ interface Row {
|
|
|
61
49
|
*
|
|
62
50
|
* @event {HelixCopyEvent} helix-copy - A value was put on the clipboard, from the copy button or the keyboard.
|
|
63
51
|
*
|
|
64
|
-
* @csspart after - The
|
|
65
|
-
* @csspart before - The
|
|
52
|
+
* @csspart after - The space the rows below the drawn rows would take, when `windowed` is set.
|
|
53
|
+
* @csspart before - The space the rows above the drawn rows would take, when `windowed` is set.
|
|
66
54
|
* @csspart boolean - A `true` or `false`.
|
|
67
55
|
* @csspart copy - The copy button, which copies the active row.
|
|
68
|
-
* @csspart copy-button - The
|
|
69
|
-
* @csspart copy-mark - The clipboard
|
|
70
|
-
* @csspart copy-tooltip - The
|
|
71
|
-
* @csspart copy-tooltip-arrow - The
|
|
72
|
-
* @csspart copy-tooltip-arrow-bottom - The
|
|
73
|
-
* @csspart copy-tooltip-arrow-left - The
|
|
74
|
-
* @csspart copy-tooltip-arrow-right - The
|
|
75
|
-
* @csspart copy-tooltip-arrow-top - The
|
|
76
|
-
* @csspart copy-tooltip-bottom - The
|
|
77
|
-
* @csspart copy-tooltip-left - The
|
|
78
|
-
* @csspart copy-tooltip-right - The
|
|
79
|
-
* @csspart copy-tooltip-top - The
|
|
80
|
-
* @csspart count -
|
|
56
|
+
* @csspart copy-button - The button inside the copy control.
|
|
57
|
+
* @csspart copy-mark - The clipboard icon, and the confirmation icon that replaces it.
|
|
58
|
+
* @csspart copy-tooltip - The tooltip, forwarded from the copy button's tooltip.
|
|
59
|
+
* @csspart copy-tooltip-arrow - The tooltip's arrow, pointing at the copy button.
|
|
60
|
+
* @csspart copy-tooltip-arrow-bottom - The arrow while the tooltip is below the copy button, on the tooltip's top edge. Set alongside `copy-tooltip-arrow`.
|
|
61
|
+
* @csspart copy-tooltip-arrow-left - The arrow while the tooltip is left of the copy button, on the tooltip's right edge. Set alongside `copy-tooltip-arrow`.
|
|
62
|
+
* @csspart copy-tooltip-arrow-right - The arrow while the tooltip is right of the copy button, on the tooltip's left edge. Set alongside `copy-tooltip-arrow`.
|
|
63
|
+
* @csspart copy-tooltip-arrow-top - The arrow while the tooltip is above the copy button, on the tooltip's bottom edge. Set alongside `copy-tooltip-arrow`.
|
|
64
|
+
* @csspart copy-tooltip-bottom - The tooltip while it is below the copy button. Set alongside `copy-tooltip`.
|
|
65
|
+
* @csspart copy-tooltip-left - The tooltip while it is left of the copy button. Set alongside `copy-tooltip`.
|
|
66
|
+
* @csspart copy-tooltip-right - The tooltip while it is right of the copy button. Set alongside `copy-tooltip`.
|
|
67
|
+
* @csspart copy-tooltip-top - The tooltip while it is above the copy button. Set alongside `copy-tooltip`.
|
|
68
|
+
* @csspart count - The number of entries a branch holds.
|
|
81
69
|
* @csspart frame - The tree and the copy button beside it.
|
|
82
|
-
* @csspart header - The bar
|
|
70
|
+
* @csspart header - The bar that holds the label, when there is one.
|
|
83
71
|
* @csspart key - A property name or an array index.
|
|
84
72
|
* @csspart label - The label.
|
|
85
73
|
* @csspart null - A `null`.
|
|
86
74
|
* @csspart number - A number.
|
|
87
|
-
* @csspart row - One entry, a tree item.
|
|
88
|
-
* @csspart row-active - The entry the keyboard is on
|
|
75
|
+
* @csspart row - One entry, as a tree item.
|
|
76
|
+
* @csspart row-active - The entry the keyboard is on. Set alongside `row`.
|
|
89
77
|
* @csspart string - A string, in quotes.
|
|
90
|
-
* @csspart summary - The brackets
|
|
91
|
-
* @csspart toggle - The caret on a branch
|
|
92
|
-
* @csspart tree - The tree, the
|
|
78
|
+
* @csspart summary - The brackets that stand for a branch's contents.
|
|
79
|
+
* @csspart toggle - The caret on a branch. It points down when the branch is open and sideways when it is closed.
|
|
80
|
+
* @csspart tree - The tree, which is the element that receives focus.
|
|
93
81
|
*
|
|
94
82
|
* @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
|
|
95
83
|
*/
|
|
96
84
|
export declare class HelixHeadlessObjectInspector extends HelixElement {
|
|
97
85
|
/**
|
|
98
|
-
*
|
|
99
|
-
* `{name}`.
|
|
86
|
+
* The copy button's accessible name on a row with a key, with the key filled
|
|
87
|
+
* in as `{name}`.
|
|
100
88
|
*
|
|
101
89
|
* **Every word the inspector speaks is a property**, so a page in another
|
|
102
90
|
* language hears its own rather than English around its own keys.
|
|
103
91
|
*/
|
|
104
92
|
copyLabel: string;
|
|
105
|
-
/**
|
|
93
|
+
/** The copy button's accessible name on a row without a key, such as the root. */
|
|
106
94
|
copyValueLabel: string;
|
|
107
95
|
/**
|
|
108
96
|
* How many levels start open.
|
|
@@ -126,7 +114,7 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
|
|
|
126
114
|
*/
|
|
127
115
|
label: string;
|
|
128
116
|
/**
|
|
129
|
-
*
|
|
117
|
+
* Hides the copy button.
|
|
130
118
|
*
|
|
131
119
|
* Negative for the reason Code Block's is: a boolean attribute defaulting to
|
|
132
120
|
* true could never be turned off from markup.
|
|
@@ -140,7 +128,7 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
|
|
|
140
128
|
*/
|
|
141
129
|
noCopy: boolean;
|
|
142
130
|
/**
|
|
143
|
-
* The value
|
|
131
|
+
* The value to show, when your code already holds it as an object.
|
|
144
132
|
*
|
|
145
133
|
* Takes precedence over `for`. Anything JSON can say is drawn; anything else
|
|
146
134
|
* is shown as its string.
|