@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
|
@@ -4,34 +4,28 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
4
4
|
export type PinType = 'alphanumeric' | 'numeric' | 'text';
|
|
5
5
|
declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
|
|
6
6
|
/**
|
|
7
|
-
* @summary A short code, one
|
|
7
|
+
* @summary A field for a short code, with one box for each character.
|
|
8
8
|
*
|
|
9
9
|
* @description
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* separate fields give every box a real focus ring, a real caret and a real tab
|
|
13
|
-
* stop for free. Autofill's gap is closed below rather than lived with.
|
|
10
|
+
* Each cell is its own `<input>`, so every box has a real focus ring, caret,
|
|
11
|
+
* and tab stop.
|
|
14
12
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* fills from cell three rather than being truncated to its first character,
|
|
20
|
-
* which is what a per-cell `maxlength` would have done silently.
|
|
13
|
+
* Input longer than one character is treated as a paste, in any cell. This
|
|
14
|
+
* covers pasting, a browser autofilling an SMS code, and a password manager,
|
|
15
|
+
* which all put the whole code into the focused box. A six-character code that
|
|
16
|
+
* arrives in cell three fills from cell three.
|
|
21
17
|
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
18
|
+
* The code is one value to a form. The cells are in a shadow root and submit
|
|
19
|
+
* nothing. The host is form-associated and submits the joined string, which
|
|
20
|
+
* also carries validity and responds to a form reset.
|
|
25
21
|
*
|
|
26
|
-
* `autocomplete="one-time-code"
|
|
27
|
-
*
|
|
28
|
-
* places to put one code.
|
|
22
|
+
* Only the first cell has `autocomplete="one-time-code"`, because the hint
|
|
23
|
+
* applies to the whole field.
|
|
29
24
|
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* the feedback are words and keep the page's direction.
|
|
25
|
+
* The row of cells always runs left to right, with `dir="ltr"`, including in
|
|
26
|
+
* Arabic and Hebrew. The first box is the leftmost, a paste fills to the right,
|
|
27
|
+
* and the right arrow moves to the next box. The label, hint, and feedback
|
|
28
|
+
* follow the page's direction.
|
|
35
29
|
*
|
|
36
30
|
* @since 0.1.0
|
|
37
31
|
* @status stable
|
|
@@ -39,25 +33,25 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
|
|
|
39
33
|
* @aliases PinField, OTP, One-time code, Verification code, InputPin
|
|
40
34
|
* @documentation https://fusion.dev/helix/components/pin-input
|
|
41
35
|
*
|
|
42
|
-
* @event {Event} change -
|
|
43
|
-
* @event {HelixBeforeChangeEvent} helix-before-change -
|
|
44
|
-
* @event {HelixCompleteEvent} helix-complete -
|
|
45
|
-
* @event {Event} input -
|
|
36
|
+
* @event {Event} change - The code was filled, or an edited code lost focus.
|
|
37
|
+
* @event {HelixBeforeChangeEvent} helix-before-change - The code is about to change. Cancelable.
|
|
38
|
+
* @event {HelixCompleteEvent} helix-complete - The last box was filled.
|
|
39
|
+
* @event {Event} input - The code changed.
|
|
46
40
|
*
|
|
47
41
|
* @csspart cell - One box.
|
|
48
|
-
* @csspart feedback -
|
|
49
|
-
* @csspart field - The row of boxes, left to right
|
|
50
|
-
* @csspart hint -
|
|
51
|
-
* @csspart label - The
|
|
42
|
+
* @csspart feedback - The message that says what is wrong with the code.
|
|
43
|
+
* @csspart field - The row of boxes, ordered left to right in every language.
|
|
44
|
+
* @csspart hint - The help under the boxes, shown while there is no feedback.
|
|
45
|
+
* @csspart label - The label above the boxes.
|
|
52
46
|
*
|
|
53
|
-
* @cssstate invalid -
|
|
47
|
+
* @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
|
|
54
48
|
*/
|
|
55
49
|
export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
|
|
56
50
|
protected readonly aria: AriaForwardController;
|
|
57
51
|
/** Typed or dragged, so every edit is announced. See `announcesInput`. */
|
|
58
52
|
protected readonly announcesInput = true;
|
|
59
53
|
/**
|
|
60
|
-
*
|
|
54
|
+
* The autofill hint for the browser, set on the first box only.
|
|
61
55
|
*
|
|
62
56
|
* `one-time-code` is why this defaults to anything at all: it is the token
|
|
63
57
|
* that lets a phone offer the code out of a message. Later cells stay `off`
|
|
@@ -90,16 +84,16 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
|
|
|
90
84
|
*/
|
|
91
85
|
placeholder: string;
|
|
92
86
|
/**
|
|
93
|
-
* Whether the boxes
|
|
87
|
+
* Whether the boxes block input. A read-only code still submits its value.
|
|
94
88
|
*/
|
|
95
89
|
readOnly: boolean;
|
|
96
90
|
/**
|
|
97
|
-
*
|
|
98
|
-
* `{length}` filled in.
|
|
91
|
+
* The message shown when the code is started and not finished, with
|
|
92
|
+
* `{length}` filled in. When it is unset, an English default is shown.
|
|
99
93
|
*/
|
|
100
94
|
tooShortMessage?: string;
|
|
101
95
|
/**
|
|
102
|
-
*
|
|
96
|
+
* The characters a box accepts, which also sets the keyboard a phone shows.
|
|
103
97
|
*
|
|
104
98
|
* `numeric` and `alphanumeric` also refuse anything else on the way in,
|
|
105
99
|
* because a code that is digits is digits: letting a letter into a box a
|
|
@@ -272,9 +266,9 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
|
|
|
272
266
|
* reported every case valid because nothing had set that flag.
|
|
273
267
|
*/
|
|
274
268
|
private sync;
|
|
275
|
-
/** Puts the caret in the first empty box
|
|
269
|
+
/** Puts the caret in the first empty box. */
|
|
276
270
|
focus(options?: FocusOptions): void;
|
|
277
|
-
/** Empties every box and
|
|
271
|
+
/** Empties every box and moves focus to the first. */
|
|
278
272
|
clear(): void;
|
|
279
273
|
protected firstUpdated(changed: PropertyValues): void;
|
|
280
274
|
protected updated(changed: PropertyValues): void;
|
|
@@ -2,29 +2,24 @@ import { CommandController, HelixElement, type Placement } from '@fusion.dev/hel
|
|
|
2
2
|
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
3
3
|
declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
|
|
4
4
|
/**
|
|
5
|
-
* @summary A panel that opens
|
|
5
|
+
* @summary A panel that opens next to its trigger and holds any content.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
|
-
*
|
|
9
|
-
* commands, `Select` holds options, `Tooltip` holds a description
|
|
10
|
-
*
|
|
11
|
-
* and no opinion about what is inside.
|
|
8
|
+
* Popover is the general overlay that the specific ones build on. `Menu` holds
|
|
9
|
+
* commands, `Select` holds options, and `Tooltip` holds a description. Popover
|
|
10
|
+
* holds any content you put in it, so it has no keyboard handling of its own.
|
|
12
11
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* React consumer's hydration disagrees with, and the attribute they would care
|
|
17
|
-
* about most is the one that changes on every open.
|
|
12
|
+
* The trigger is slotted and stays your own element. The popover writes nothing
|
|
13
|
+
* onto it, including `aria-expanded`, `id`, and `tabindex`, because changing
|
|
14
|
+
* your markup after upgrade causes a React hydration mismatch.
|
|
18
15
|
*
|
|
19
|
-
*
|
|
20
|
-
* ancestor with `overflow: hidden
|
|
21
|
-
* does not
|
|
22
|
-
* by an ancestor carrying `transform`, `filter` or `contain`.
|
|
16
|
+
* The panel is in the top layer through the popover API, so it needs no
|
|
17
|
+
* `z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or
|
|
18
|
+
* `contain` does not clip or move it.
|
|
23
19
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* slotted into it.
|
|
20
|
+
* It opens on click and from a command. `command="--show"` and the related
|
|
21
|
+
* commands work as they do on `Dialog` and `Drawer`, so a button anywhere on
|
|
22
|
+
* the page can open the popover with no script.
|
|
28
23
|
*
|
|
29
24
|
* @since 0.1.0
|
|
30
25
|
* @status stable
|
|
@@ -33,11 +28,11 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
|
|
|
33
28
|
* @documentation https://fusion.dev/helix/components/popover
|
|
34
29
|
*
|
|
35
30
|
* @slot - The contents of the panel.
|
|
36
|
-
* @slot trigger -
|
|
31
|
+
* @slot trigger - The element that opens the panel.
|
|
37
32
|
*
|
|
38
33
|
* @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
|
|
39
34
|
* @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
|
|
40
|
-
* @event {Event} toggle -
|
|
35
|
+
* @event {Event} toggle - Fired after the panel opens or closes, with `newState` and `oldState`.
|
|
41
36
|
*
|
|
42
37
|
* @csspart content - The scrolling region inside the panel.
|
|
43
38
|
* @csspart popover - The panel.
|
|
@@ -46,7 +41,7 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
|
|
|
46
41
|
*/
|
|
47
42
|
export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
|
|
48
43
|
/**
|
|
49
|
-
*
|
|
44
|
+
* The panel's name, read by screen readers.
|
|
50
45
|
*/
|
|
51
46
|
label: string;
|
|
52
47
|
/**
|
|
@@ -1,19 +1,19 @@
|
|
|
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 bar or ring that shows how far along a task is.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
* Determinate by default
|
|
8
|
-
* known yet. `Loader`
|
|
9
|
-
*
|
|
7
|
+
* Determinate by default. Set `indeterminate` for a task whose total is not
|
|
8
|
+
* known yet. Use `Loader` for a short wait or one with no place of its own on
|
|
9
|
+
* the page.
|
|
10
10
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
11
|
+
* The indeterminate bar runs a segment across the track and does not fill, so
|
|
12
|
+
* it shows that work is happening without claiming a proportion.
|
|
13
|
+
* `aria-valuenow` is omitted in that state, which is the platform's signal for
|
|
14
|
+
* the same thing.
|
|
15
15
|
*
|
|
16
|
-
*
|
|
16
|
+
* The fill is a fraction of the track, written as a custom property.
|
|
17
17
|
*
|
|
18
18
|
* @since 0.1.0
|
|
19
19
|
* @status stable
|
|
@@ -21,16 +21,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
21
21
|
* @aliases Progress bar, Loading bar
|
|
22
22
|
* @documentation https://fusion.dev/helix/components/progress
|
|
23
23
|
*
|
|
24
|
-
* @csspart groove - The unfilled circle
|
|
25
|
-
* @csspart indicator - The part
|
|
24
|
+
* @csspart groove - The unfilled circle under the ring's filled arc.
|
|
25
|
+
* @csspart indicator - The filled part that shows the work done.
|
|
26
26
|
* @csspart track - The full length the work is measured against.
|
|
27
|
-
* @csspart value - The
|
|
27
|
+
* @csspart value - The value shown beside the bar when `show-value` is set.
|
|
28
28
|
*
|
|
29
29
|
* @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
|
|
30
30
|
*/
|
|
31
31
|
export declare class HelixHeadlessProgress extends HelixElement {
|
|
32
32
|
/**
|
|
33
|
-
* Whether the
|
|
33
|
+
* Whether the length of the task is unknown. The bar then shows activity
|
|
34
|
+
* without a value.
|
|
34
35
|
*
|
|
35
36
|
* On the headless tier rather than as a treatment, because it is
|
|
36
37
|
* semantics before it is a picture: a progressbar with no `aria-valuenow` is
|
|
@@ -86,7 +87,8 @@ export declare class HelixHeadlessProgress extends HelixElement {
|
|
|
86
87
|
*/
|
|
87
88
|
value: number;
|
|
88
89
|
/**
|
|
89
|
-
*
|
|
90
|
+
* Text that describes the value when the number alone is not enough, such as
|
|
91
|
+
* "3 of 8 files".
|
|
90
92
|
*
|
|
91
93
|
* "3 of 8 files" rather than "37". Announced instead of the percentage, and
|
|
92
94
|
* never instead of the value itself: `aria-valuenow` still carries the
|
|
@@ -5,30 +5,26 @@ export type QrCorrection = 'H' | 'L' | 'M' | 'Q';
|
|
|
5
5
|
/** How the modules are drawn. */
|
|
6
6
|
export type QrStyle = 'dots' | 'rounded' | 'square';
|
|
7
7
|
/**
|
|
8
|
-
* @summary
|
|
8
|
+
* @summary A scannable QR code for a short piece of text.
|
|
9
9
|
*
|
|
10
10
|
* @description
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
11
|
+
* The code is drawn as one `<path>`. Runs of adjacent dark modules are joined,
|
|
12
|
+
* so a row of eight is one horizontal move. A code of useful length has about a
|
|
13
|
+
* thousand modules, and an element for each would be a thousand nodes for one
|
|
14
|
+
* image.
|
|
15
15
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* itself is the name, which is right far more often than it looks: most codes
|
|
20
|
-
* hold a URL, and a URL read aloud is the destination.
|
|
16
|
+
* The element has `role="img"` and an accessible name. Set the name to what the
|
|
17
|
+
* code is for. When you pass no name, the value is the name. Most codes hold a
|
|
18
|
+
* URL, and a URL read aloud gives the destination.
|
|
21
19
|
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* any size the component is given, including one set in CSS.
|
|
20
|
+
* The quiet zone of four modules is required by the specification, and a
|
|
21
|
+
* scanner rejects a code cropped to its edge. It is drawn inside the `viewBox`,
|
|
22
|
+
* so it stays at any size, including a size set in CSS.
|
|
26
23
|
*
|
|
27
|
-
* `correction`
|
|
28
|
-
* percent
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* moves when the slot is filled.
|
|
24
|
+
* `correction` sets how much of the code can be lost. At `H` a code can lose
|
|
25
|
+
* thirty percent and still scan, so a mark in the center slot is safe. At `L`
|
|
26
|
+
* the same mark makes the code unscannable. The default is `M`, and `H` when the
|
|
27
|
+
* `logo` slot is filled.
|
|
32
28
|
*
|
|
33
29
|
* @since 0.1.0
|
|
34
30
|
* @status stable
|
|
@@ -36,16 +32,17 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
|
|
|
36
32
|
* @aliases QR, Barcode, Scan code
|
|
37
33
|
* @documentation https://fusion.dev/helix/components/qr-code
|
|
38
34
|
*
|
|
39
|
-
* @slot logo - A
|
|
35
|
+
* @slot logo - A logo for the center. A code with a logo scans only at a high correction level.
|
|
40
36
|
*
|
|
41
|
-
* @csspart code - The square
|
|
37
|
+
* @csspart code - The square code image.
|
|
42
38
|
* @csspart finders - The three corner squares, which can take their own color.
|
|
43
|
-
* @csspart logo - The box
|
|
44
|
-
* @csspart modules -
|
|
39
|
+
* @csspart logo - The box that holds the center logo.
|
|
40
|
+
* @csspart modules - Every module except the three corner squares.
|
|
45
41
|
*/
|
|
46
42
|
export declare class HelixHeadlessQrCode extends HelixElement {
|
|
47
43
|
/**
|
|
48
|
-
*
|
|
44
|
+
* The error correction level, which sets how much of the code can be lost
|
|
45
|
+
* and still scan.
|
|
49
46
|
*
|
|
50
47
|
* `M` by default, which is the level almost every code in the world uses and
|
|
51
48
|
* costs about fifteen percent redundancy. `H` where a mark covers the center,
|
|
@@ -55,7 +52,7 @@ export declare class HelixHeadlessQrCode extends HelixElement {
|
|
|
55
52
|
*/
|
|
56
53
|
correction?: QrCorrection;
|
|
57
54
|
/**
|
|
58
|
-
*
|
|
55
|
+
* The image's accessible name.
|
|
59
56
|
*
|
|
60
57
|
* Falling back to the value is deliberate: a code almost always holds a URL,
|
|
61
58
|
* and a URL is a better name than "QR code" for a reader who cannot see it.
|
|
@@ -4,13 +4,12 @@ import { type TemplateResult } from 'lit';
|
|
|
4
4
|
* @summary A short quotation, set inline with the text around it.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
* Renders a real `<q>`,
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
7
|
+
* Renders a real `<q>`, so the browser supplies the quotation marks. It inserts
|
|
8
|
+
* the correct marks for the document's language and nests them correctly when
|
|
9
|
+
* one quotation sits inside another. Do not type quotation marks into the
|
|
10
|
+
* content.
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
* which is a different element for a different job.
|
|
12
|
+
* For a passage set off from the surrounding text, use a blockquote.
|
|
14
13
|
*
|
|
15
14
|
* @since 0.1.0
|
|
16
15
|
* @status stable
|
|
@@ -3,27 +3,25 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
3
3
|
import { HelixHeadlessRadio } from '../root/radio-root.js';
|
|
4
4
|
declare const HelixHeadlessRadioGroup_base: (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 set of
|
|
6
|
+
* @summary A set of radios where exactly one can be chosen.
|
|
7
7
|
*
|
|
8
8
|
* @description
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* validity, and a lone radio outside a group is not a control at all.
|
|
9
|
+
* The group is the form control, and the radios are its options. A set of
|
|
10
|
+
* radios submits one answer, so the group owns the `name`, the `value`, and the
|
|
11
|
+
* validity. A radio outside a group is not a control. Checkboxes work the other
|
|
12
|
+
* way: each checkbox submits its own answer.
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
14
|
+
* `MixinField` applies to the group for the same reason. The label, the hint,
|
|
15
|
+
* and the message describe the question, and the question belongs to the set.
|
|
17
16
|
*
|
|
18
|
-
* Selection
|
|
19
|
-
* chosen, the group
|
|
20
|
-
* `selected` onto every
|
|
21
|
-
*
|
|
17
|
+
* Selection moves up and state moves down. A radio dispatches an event when it
|
|
18
|
+
* is chosen, the group determines whether the choice stands, and the group
|
|
19
|
+
* writes `selected` onto every radio. The group is the one source of which
|
|
20
|
+
* radio is on.
|
|
22
21
|
*
|
|
23
|
-
* `value`
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* anything is chosen.
|
|
22
|
+
* `value` is the current answer. `defaultValue` is what the markup declared:
|
|
23
|
+
* the value until something is chosen, and where a reset returns. The two work
|
|
24
|
+
* like `checked` and `defaultChecked`.
|
|
27
25
|
*
|
|
28
26
|
* @since 0.1.0
|
|
29
27
|
* @status stable
|
|
@@ -31,24 +29,24 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
|
|
|
31
29
|
* @documentation https://fusion.dev/helix/components/radio
|
|
32
30
|
*
|
|
33
31
|
* @slot - The radios.
|
|
34
|
-
* @slot hint -
|
|
35
|
-
* @slot label -
|
|
32
|
+
* @slot hint - The help text under the group, for content richer than a string.
|
|
33
|
+
* @slot label - The group's label, for a question that needs more than a string.
|
|
36
34
|
*
|
|
37
|
-
* @event {Event} change -
|
|
38
|
-
* @event {HelixBeforeChangeEvent} helix-before-change - Fired when the
|
|
39
|
-
* @event {HelixSelectEvent} helix-select - Fired when
|
|
40
|
-
* @event {Event} input -
|
|
35
|
+
* @event {Event} change - Fired after the value changes.
|
|
36
|
+
* @event {HelixBeforeChangeEvent} helix-before-change - Fired when the choice changes. Cancelable: call `preventDefault()` to keep the current choice.
|
|
37
|
+
* @event {HelixSelectEvent} helix-select - Fired when a radio is chosen. The radio sends it, and you listen for it on the group. Cancelable: call `preventDefault()` to keep the current choice.
|
|
38
|
+
* @event {Event} input - Fired after the value changes.
|
|
41
39
|
*
|
|
42
|
-
* @csspart feedback -
|
|
43
|
-
* @csspart hint -
|
|
44
|
-
* @csspart items - The choices,
|
|
45
|
-
* @csspart label - The
|
|
40
|
+
* @csspart feedback - The error message under the group.
|
|
41
|
+
* @csspart hint - The help text under the group.
|
|
42
|
+
* @csspart items - The container of the choices, laid out by `orientation`.
|
|
43
|
+
* @csspart label - The label above the group.
|
|
46
44
|
*
|
|
47
|
-
* @cssstate invalid -
|
|
45
|
+
* @cssstate invalid - The group has an error to show, from the browser's validation or from your `feedback`.
|
|
48
46
|
*/
|
|
49
47
|
export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_base {
|
|
50
48
|
/**
|
|
51
|
-
*
|
|
49
|
+
* The direction the choices run. `vertical` puts one choice on each line.
|
|
52
50
|
*
|
|
53
51
|
* **Optional rather than defaulted, which is not a style preference.** A
|
|
54
52
|
* reflecting property with a default writes its attribute onto every host the
|
|
@@ -5,20 +5,18 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
|
|
|
5
5
|
* @summary One choice in a radio group.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
|
-
* Renders a `<button role="radio"
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* option only has to say what it is and announce when it is chosen.
|
|
8
|
+
* Renders a `<button role="radio">`. Native radios group by sharing a `name`
|
|
9
|
+
* within a form, and a radio inside a shadow root cannot join a group outside
|
|
10
|
+
* it. The group is the form control, so each radio only exposes its role and
|
|
11
|
+
* dispatches an event when it is chosen.
|
|
13
12
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* `MixinField`, because a lone radio is not a control: it is an answer to one.
|
|
13
|
+
* The radio has no label of its own. Its content names it, and the label, the
|
|
14
|
+
* hint, and the message of the set belong to the group. It is the only control
|
|
15
|
+
* in the family that takes nothing from `MixinField`.
|
|
18
16
|
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
17
|
+
* When a radio is chosen, it dispatches an event, the group determines whether
|
|
18
|
+
* the choice stands, and the group writes `selected` back. The group is the one
|
|
19
|
+
* source of which radio is on.
|
|
22
20
|
*
|
|
23
21
|
* @since 0.1.0
|
|
24
22
|
* @status stable
|
|
@@ -26,27 +24,25 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
|
|
|
26
24
|
* @aliases Option, Choice
|
|
27
25
|
* @documentation https://fusion.dev/helix/components/radio
|
|
28
26
|
*
|
|
29
|
-
* @slot - The
|
|
30
|
-
* @slot icon -
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* otherwise.
|
|
27
|
+
* @slot - The radio's label.
|
|
28
|
+
* @slot icon - An icon shown beside the label. With `variant="chip"`, the icon
|
|
29
|
+
* replaces the visible label, and the label becomes the name read by screen
|
|
30
|
+
* readers. The icon has its own slot so the chip can hide the label and show
|
|
31
|
+
* the icon.
|
|
35
32
|
*
|
|
36
|
-
* @event {HelixSelectEvent} helix-select - Fired when
|
|
33
|
+
* @event {HelixSelectEvent} helix-select - Fired when the radio is chosen. Cancelable: call `preventDefault()` to keep the current choice.
|
|
37
34
|
*
|
|
38
|
-
* @csspart box - The circle.
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
* @csspart
|
|
43
|
-
* @csspart label - The words beside it.
|
|
35
|
+
* @csspart box - The circle. Draw the dot inside it with `::part(box)::after` in
|
|
36
|
+
* your stylesheet. This tier ships no CSS, so it renders no separate element for
|
|
37
|
+
* the dot, which would add an empty child to your layout.
|
|
38
|
+
* @csspart item - The button, which covers the whole row.
|
|
39
|
+
* @csspart label - The label beside the circle.
|
|
44
40
|
*
|
|
45
|
-
* @cssstate selected -
|
|
41
|
+
* @cssstate selected - The radio is chosen.
|
|
46
42
|
*/
|
|
47
43
|
export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
|
|
48
44
|
/**
|
|
49
|
-
* Whether the markup
|
|
45
|
+
* Whether the markup declares the radio chosen. A form reset returns to it.
|
|
50
46
|
*
|
|
51
47
|
* `<option selected>` reflects to `defaultSelected` and `option.selected` is
|
|
52
48
|
* live state that does not reflect, and those are two different facts. This
|
|
@@ -75,7 +71,7 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
|
|
|
75
71
|
get defaultSelected(): boolean;
|
|
76
72
|
set defaultSelected(next: boolean);
|
|
77
73
|
/**
|
|
78
|
-
* Whether
|
|
74
|
+
* Whether the radio holds the group's tab stop while nothing is chosen.
|
|
79
75
|
*
|
|
80
76
|
* The stop rides on the selection, and an unanswered group has no selection,
|
|
81
77
|
* so without this every choice is `tabindex="-1"` and the keyboard cannot
|