@fusion.dev/helix-headless 0.0.0-dev → 0.0.3
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 +4513 -4483
- package/dist/accordion/item/accordion-item.d.ts +13 -15
- package/dist/accordion/item/accordion-item.js +15 -17
- package/dist/announcement/root/announcement-root.d.ts +7 -25
- package/dist/announcement/root/announcement-root.js +7 -20
- package/dist/app-header/root/app-header-root.d.ts +10 -17
- package/dist/app-header/root/app-header-root.js +9 -18
- package/dist/avatar/group/avatar-group.d.ts +10 -19
- package/dist/avatar/group/avatar-group.js +12 -17
- package/dist/avatar/root/avatar-root.d.ts +8 -8
- package/dist/avatar/root/avatar-root.js +19 -20
- package/dist/badge/root/badge-root.d.ts +6 -6
- package/dist/badge/root/badge-root.js +13 -13
- package/dist/bar-chart/root/bar-chart-root.d.ts +21 -29
- package/dist/bar-chart/root/bar-chart-root.js +42 -57
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +12 -18
- package/dist/breadcrumbs/breadcrumb/breadcrumb.js +13 -16
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +9 -28
- package/dist/breadcrumbs/root/breadcrumbs-root.js +9 -28
- package/dist/button/root/button-root.d.ts +84 -94
- package/dist/button/root/button-root.js +82 -92
- package/dist/callout/root/callout-root.d.ts +4 -5
- package/dist/carousel/root/carousel-root.d.ts +59 -71
- package/dist/carousel/root/carousel-root.js +73 -101
- package/dist/chat/composer/chat-composer.d.ts +29 -33
- package/dist/chat/composer/chat-composer.js +40 -44
- package/dist/chat/message/chat-message.d.ts +25 -25
- package/dist/chat/message/chat-message.js +26 -26
- package/dist/chat/root/chat-root.d.ts +28 -41
- package/dist/chat/root/chat-root.js +27 -40
- package/dist/checkbox/root/checkbox-root.d.ts +10 -12
- package/dist/checkbox/root/checkbox-root.js +29 -35
- package/dist/checkbox-group/root/checkbox-group-root.d.ts +32 -45
- package/dist/checkbox-group/root/checkbox-group-root.js +53 -79
- package/dist/code-block/root/code-block-root.d.ts +3 -4
- package/dist/code-block/root/code-block-root.js +8 -12
- package/dist/color-input/root/color-input-root.d.ts +36 -37
- package/dist/color-input/root/color-input-root.js +29 -34
- package/dist/color-picker/color.d.ts +7 -8
- package/dist/color-picker/color.js +7 -8
- package/dist/color-picker/root/color-picker-root.d.ts +55 -57
- package/dist/color-picker/root/color-picker-root.js +60 -64
- package/dist/combobox/root/combobox-root.d.ts +53 -58
- package/dist/combobox/root/combobox-root.js +85 -94
- package/dist/command/root/command-root.d.ts +8 -8
- package/dist/command/root/command-root.js +29 -33
- package/dist/copy-button/root/copy-button-root.d.ts +21 -24
- package/dist/copy-button/root/copy-button-root.js +25 -35
- package/dist/data-table/root/data-table-root.d.ts +77 -76
- package/dist/data-table/root/data-table-root.js +95 -84
- package/dist/data-table/root/order.d.ts +2 -2
- package/dist/data-table/root/order.js +1 -3
- package/dist/date-input/root/date-input-root.d.ts +88 -93
- package/dist/date-input/root/date-input-root.js +147 -158
- package/dist/date-picker/root/date-picker-root.d.ts +75 -83
- package/dist/date-picker/root/date-picker-root.js +120 -143
- package/dist/dialog/root/dialog-root.d.ts +41 -24
- package/dist/dialog/root/dialog-root.js +47 -24
- package/dist/divider/root/divider-root.d.ts +5 -6
- package/dist/divider/root/divider-root.js +4 -5
- package/dist/donut-chart/root/donut-chart-root.d.ts +22 -25
- package/dist/donut-chart/root/donut-chart-root.js +37 -51
- package/dist/drawer/root/drawer-root.d.ts +24 -29
- package/dist/drawer/root/drawer-root.js +15 -22
- package/dist/drilldown/item/drilldown-item.d.ts +14 -14
- package/dist/drilldown/item/drilldown-item.js +24 -26
- package/dist/drilldown/root/drilldown-root.d.ts +8 -10
- package/dist/drilldown/root/drilldown-root.js +6 -7
- package/dist/element-events.generated.js +1 -1
- package/dist/file-input/root/file-input-root.d.ts +20 -24
- package/dist/file-input/root/file-input-root.js +42 -57
- package/dist/format-date/root/format-date-root.js +1 -1
- package/dist/heatmap/root/buckets.d.ts +8 -8
- package/dist/heatmap/root/buckets.js +8 -8
- package/dist/heatmap/root/heatmap-root.d.ts +57 -63
- package/dist/heatmap/root/heatmap-root.js +72 -83
- package/dist/icon/root/icon-root.d.ts +4 -4
- package/dist/icon/root/icon-root.js +9 -9
- package/dist/icon-button/root/icon-button-root.d.ts +4 -6
- package/dist/icon-button/root/icon-button-root.js +4 -6
- package/dist/image/root/image-root.d.ts +49 -59
- package/dist/image/root/image-root.js +55 -65
- package/dist/index.d.ts +5 -5
- package/dist/index.js +5 -5
- package/dist/input/root/input-root.d.ts +61 -85
- package/dist/input/root/input-root.js +79 -106
- package/dist/kbd/root/kbd-root.d.ts +8 -7
- package/dist/kbd/root/kbd-root.js +71 -11
- package/dist/legend/root/legend-root.d.ts +1 -1
- package/dist/legend/root/legend-root.js +4 -5
- package/dist/line-chart/root/line-chart-root.d.ts +26 -30
- package/dist/line-chart/root/line-chart-root.js +10 -10
- package/dist/list/item/list-item.d.ts +14 -18
- package/dist/list/item/list-item.js +18 -22
- package/dist/list/root/list-root.d.ts +4 -4
- package/dist/list/root/list-root.js +3 -3
- package/dist/listbox/root/listbox-root.d.ts +31 -58
- package/dist/listbox/root/listbox-root.js +66 -109
- package/dist/megamenu/root/megamenu-root.d.ts +34 -35
- package/dist/megamenu/root/megamenu-root.js +53 -58
- package/dist/menu/item/menu-item.d.ts +39 -53
- package/dist/menu/item/menu-item.js +50 -64
- package/dist/menu/root/menu-root.d.ts +30 -40
- package/dist/menu/root/menu-root.js +49 -82
- package/dist/meter/root/meter-root.d.ts +49 -53
- package/dist/meter/root/meter-root.js +22 -27
- package/dist/navigation/root/navigation-root.js +11 -19
- package/dist/notifications/notification/notification.d.ts +16 -22
- package/dist/notifications/notification/notification.js +21 -27
- package/dist/notifications/root/notifications-root.d.ts +31 -39
- package/dist/notifications/root/notifications-root.js +41 -52
- package/dist/number-input/root/number-input-root.d.ts +31 -33
- package/dist/number-input/root/number-input-root.js +37 -39
- package/dist/option/root/option-root.d.ts +73 -74
- package/dist/option/root/option-root.js +62 -64
- package/dist/outline/root/outline-root.d.ts +38 -44
- package/dist/outline/root/outline-root.js +66 -82
- package/dist/pagination/root/pagination-root.d.ts +87 -92
- package/dist/pagination/root/pagination-root.js +116 -123
- package/dist/pagination/size/pagination-size.d.ts +31 -50
- package/dist/pagination/size/pagination-size.js +35 -55
- package/dist/pagination/summary/pagination-summary.d.ts +12 -12
- package/dist/pagination/summary/pagination-summary.js +18 -18
- package/dist/pin-input/root/pin-input-root.d.ts +53 -70
- package/dist/pin-input/root/pin-input-root.js +74 -94
- package/dist/popover/root/popover-root.d.ts +15 -20
- package/dist/popover/root/popover-root.js +19 -36
- package/dist/progress/root/progress-root.d.ts +12 -14
- package/dist/progress/root/progress-root.js +22 -25
- package/dist/qr-code/root/qr-code-root.d.ts +11 -11
- package/dist/qr-code/root/qr-code-root.js +12 -14
- package/dist/radio/group/radio-group.js +19 -26
- package/dist/radio/root/radio-root.d.ts +12 -13
- package/dist/radio/root/radio-root.js +12 -13
- package/dist/rating/root/rating-root.d.ts +25 -30
- package/dist/rating/root/rating-root.js +43 -50
- package/dist/scroll-area/root/scroll-area-root.d.ts +11 -14
- package/dist/scroll-area/root/scroll-area-root.js +39 -33
- package/dist/select/root/select-root.d.ts +7 -12
- package/dist/select/root/select-root.js +40 -55
- package/dist/slider/root/slider-root.d.ts +53 -60
- package/dist/slider/root/slider-root.js +74 -85
- package/dist/sparkline/root/sparkline-root.d.ts +43 -47
- package/dist/sparkline/root/sparkline-root.js +23 -32
- package/dist/speed-dial/item/speed-dial-item.d.ts +6 -6
- package/dist/speed-dial/item/speed-dial-item.js +9 -9
- package/dist/speed-dial/root/speed-dial-root.d.ts +21 -25
- package/dist/speed-dial/root/speed-dial-root.js +32 -40
- package/dist/splitter/root/splitter-root.d.ts +98 -111
- package/dist/splitter/root/splitter-root.js +96 -123
- package/dist/stat/root/stat-root.d.ts +2 -7
- package/dist/stat/root/stat-root.js +0 -5
- package/dist/steps/step/step.d.ts +19 -24
- package/dist/steps/step/step.js +27 -32
- package/dist/switch/root/switch-root.js +2 -2
- package/dist/table/column/table-column.d.ts +54 -60
- package/dist/table/column/table-column.js +95 -68
- package/dist/table/root/table-root.d.ts +5 -6
- package/dist/table/root/table-root.js +7 -10
- package/dist/tabs/panel/tab-panel.d.ts +21 -25
- package/dist/tabs/panel/tab-panel.js +25 -29
- package/dist/tabs/root/tabs-root.d.ts +25 -34
- package/dist/tabs/root/tabs-root.js +22 -28
- package/dist/tabs/tab/tab.d.ts +12 -12
- package/dist/tabs/tab/tab.js +19 -20
- package/dist/textarea/root/textarea-root.d.ts +36 -36
- package/dist/textarea/root/textarea-root.js +43 -47
- package/dist/time-input/root/time-input-root.d.ts +58 -68
- package/dist/time-input/root/time-input-root.js +62 -77
- package/dist/time-picker/root/time-picker-root.d.ts +73 -79
- package/dist/time-picker/root/time-picker-root.js +72 -84
- package/dist/timeline/item/timeline-item.d.ts +8 -11
- package/dist/timeline/item/timeline-item.js +8 -11
- package/dist/timeline/root/timeline-root.d.ts +5 -7
- package/dist/timeline/root/timeline-root.js +5 -7
- package/dist/toast/item/toast-item.d.ts +9 -27
- package/dist/toast/item/toast-item.js +19 -41
- package/dist/toast/root/toast-root.d.ts +10 -14
- package/dist/toast/root/toast-root.js +4 -5
- package/dist/toggle/group/toggle-group.d.ts +6 -15
- package/dist/toggle/group/toggle-group.js +21 -36
- package/dist/toggle/root/toggle-root.d.ts +26 -27
- package/dist/toggle/root/toggle-root.js +30 -31
- package/dist/toolbar/root/toolbar-root.d.ts +7 -10
- package/dist/toolbar/root/toolbar-root.js +10 -14
- package/dist/tooltip/root/tooltip-root.d.ts +52 -59
- package/dist/tooltip/root/tooltip-root.js +98 -93
- package/dist/tour/root/tour-root.d.ts +19 -23
- package/dist/tour/root/tour-root.js +31 -41
- package/dist/tour/stop/tour-stop.d.ts +14 -15
- package/dist/tour/stop/tour-stop.js +31 -34
- package/dist/tree/item/tree-item.d.ts +30 -35
- package/dist/tree/item/tree-item.js +43 -55
- package/dist/tree/root/tree-root.d.ts +7 -10
- package/dist/tree/root/tree-root.js +33 -42
- package/dist/trend/root/trend-root.d.ts +3 -5
- package/dist/trend/root/trend-root.js +5 -9
- package/dist/video/root/video-root.d.ts +100 -124
- package/dist/video/root/video-root.js +142 -176
- package/dist/video-playlist/item/video-playlist-item.d.ts +16 -16
- package/dist/video-playlist/item/video-playlist-item.js +24 -24
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +5 -8
- package/dist/video-playlist/menu/video-playlist-menu.js +20 -29
- package/dist/video-playlist/root/video-playlist-root.d.ts +16 -11
- package/dist/video-playlist/root/video-playlist-root.js +21 -25
- package/dist/virtual-list/root/virtual-list-root.d.ts +8 -12
- package/dist/virtual-list/root/virtual-list-root.js +11 -16
- package/jsx.d.ts +9797 -12561
- package/package.json +6 -6
- package/vue.d.ts +2684 -3228
|
@@ -12,14 +12,14 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
|
|
|
12
12
|
* `Menu` is built from the same pieces. What is not shared is what actually
|
|
13
13
|
* differs: a dial has no submenus, no headers, no checkable rows and no long
|
|
14
14
|
* list to type ahead through, and shipping it as an appearance of `Menu` would
|
|
15
|
-
*
|
|
15
|
+
* mean defining what a dial with a submenu in it does.
|
|
16
16
|
*
|
|
17
17
|
* **The trigger is a control the consumer slots**, and the floating action
|
|
18
18
|
* button is the usual one: `helix-icon-button` with `shape="circle"` and
|
|
19
|
-
* `raised`. There is no `helix-fab
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
19
|
+
* `raised`. There is no `helix-fab`, because it would re-declare `emphasis`,
|
|
20
|
+
* `tone`, `label` and a size around a control that already has all four. A
|
|
21
|
+
* round raised button is a shape, and where it sits is `data-dock` in the base
|
|
22
|
+
* layer.
|
|
23
23
|
*
|
|
24
24
|
* **Nothing is reserved from the keyboard.** A menu that drills has to keep the
|
|
25
25
|
* horizontal pair for going in and coming back; a dial goes nowhere, so all four
|
|
@@ -41,7 +41,6 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
|
|
|
41
41
|
* @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
|
|
42
42
|
*
|
|
43
43
|
* @csspart actions - The region the actions are drawn in.
|
|
44
|
-
* @csspart icon - A glyph this component draws.
|
|
45
44
|
* @csspart trigger - The default trigger, where none was slotted.
|
|
46
45
|
*/
|
|
47
46
|
export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base {
|
|
@@ -49,6 +48,10 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
|
|
|
49
48
|
* Names the trigger and the set of actions it opens.
|
|
50
49
|
*/
|
|
51
50
|
label: string;
|
|
51
|
+
/**
|
|
52
|
+
* Space between the trigger and the actions, in pixels.
|
|
53
|
+
*/
|
|
54
|
+
offset: number;
|
|
52
55
|
/**
|
|
53
56
|
* Which way the actions fan out. They move if that side does not fit.
|
|
54
57
|
*
|
|
@@ -56,10 +59,6 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
|
|
|
56
59
|
* bottom of the window and there is nothing below it to fan into.
|
|
57
60
|
*/
|
|
58
61
|
placement: Placement;
|
|
59
|
-
/**
|
|
60
|
-
* Space between the trigger and the actions, in pixels.
|
|
61
|
-
*/
|
|
62
|
-
offset: number;
|
|
63
62
|
protected readonly keys: KeyboardNavigationController;
|
|
64
63
|
private readonly panel;
|
|
65
64
|
/** Whatever the consumer slotted, or the button rendered in its place. */
|
|
@@ -85,18 +84,16 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
|
|
|
85
84
|
* who will forget, and the failure is silent to everyone who can see the
|
|
86
85
|
* screen.
|
|
87
86
|
*
|
|
88
|
-
* **
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
* trigger's own shadow root, where React neither looks nor compares.
|
|
87
|
+
* **Never `setAttribute`.** Writing `aria-expanded` onto the consumer's
|
|
88
|
+
* element is a hydration mismatch React reports and does not patch up,
|
|
89
|
+
* measured against React 19.2.8. `tellDisclosure` carries the argument and the
|
|
90
|
+
* measurement: the state travels as a property, into the trigger's own shadow
|
|
91
|
+
* root, where React neither looks nor compares.
|
|
94
92
|
*
|
|
95
|
-
* `aria-haspopup` goes with it rather than being written separately.
|
|
96
|
-
*
|
|
97
|
-
*
|
|
98
|
-
*
|
|
99
|
-
* says it is expanded is already saying it has something to expand.
|
|
93
|
+
* `aria-haspopup` goes with it rather than being written separately. An
|
|
94
|
+
* attribute the consumer's server never sent is a mismatch whether or not it
|
|
95
|
+
* moves afterwards, measured in both load orders, and a trigger that says it
|
|
96
|
+
* is expanded is already saying it has something to expand.
|
|
100
97
|
*/
|
|
101
98
|
private announce;
|
|
102
99
|
protected updated(changed: PropertyValues): void;
|
|
@@ -106,10 +103,9 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
|
|
|
106
103
|
* **This is the case the tier rule blocks and a render method unblocks.** A
|
|
107
104
|
* bare `<button>` is what the headless tier can write: it must not reach for
|
|
108
105
|
* `helix-button`, which lives a tier above and would make `headless` depend
|
|
109
|
-
* on `
|
|
110
|
-
* of its own overrides this to use one
|
|
111
|
-
*
|
|
112
|
-
* template, panel and all.
|
|
106
|
+
* on `styled`. So the base draws the plain control and a tier that has buttons
|
|
107
|
+
* of its own overrides this to use one. Written inline, the only way
|
|
108
|
+
* to change it would be to reimplement the template, panel and all.
|
|
113
109
|
*/
|
|
114
110
|
protected renderTrigger(): TemplateResult;
|
|
115
111
|
protected render(): TemplateResult;
|
|
@@ -19,14 +19,14 @@ import { property } from 'lit/decorators.js';
|
|
|
19
19
|
* `Menu` is built from the same pieces. What is not shared is what actually
|
|
20
20
|
* differs: a dial has no submenus, no headers, no checkable rows and no long
|
|
21
21
|
* list to type ahead through, and shipping it as an appearance of `Menu` would
|
|
22
|
-
*
|
|
22
|
+
* mean defining what a dial with a submenu in it does.
|
|
23
23
|
*
|
|
24
24
|
* **The trigger is a control the consumer slots**, and the floating action
|
|
25
25
|
* button is the usual one: `helix-icon-button` with `shape="circle"` and
|
|
26
|
-
* `raised`. There is no `helix-fab
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
26
|
+
* `raised`. There is no `helix-fab`, because it would re-declare `emphasis`,
|
|
27
|
+
* `tone`, `label` and a size around a control that already has all four. A
|
|
28
|
+
* round raised button is a shape, and where it sits is `data-dock` in the base
|
|
29
|
+
* layer.
|
|
30
30
|
*
|
|
31
31
|
* **Nothing is reserved from the keyboard.** A menu that drills has to keep the
|
|
32
32
|
* horizontal pair for going in and coming back; a dial goes nowhere, so all four
|
|
@@ -48,7 +48,6 @@ import { property } from 'lit/decorators.js';
|
|
|
48
48
|
* @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
|
|
49
49
|
*
|
|
50
50
|
* @csspart actions - The region the actions are drawn in.
|
|
51
|
-
* @csspart icon - A glyph this component draws.
|
|
52
51
|
* @csspart trigger - The default trigger, where none was slotted.
|
|
53
52
|
*/
|
|
54
53
|
let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControllerOpen(HelixElement) {
|
|
@@ -58,6 +57,10 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
|
|
|
58
57
|
* Names the trigger and the set of actions it opens.
|
|
59
58
|
*/
|
|
60
59
|
this.label = 'Actions';
|
|
60
|
+
/**
|
|
61
|
+
* Space between the trigger and the actions, in pixels.
|
|
62
|
+
*/
|
|
63
|
+
this.offset = 12;
|
|
61
64
|
/**
|
|
62
65
|
* Which way the actions fan out. They move if that side does not fit.
|
|
63
66
|
*
|
|
@@ -65,10 +68,6 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
|
|
|
65
68
|
* bottom of the window and there is nothing below it to fan into.
|
|
66
69
|
*/
|
|
67
70
|
this.placement = 'top-end';
|
|
68
|
-
/**
|
|
69
|
-
* Space between the trigger and the actions, in pixels.
|
|
70
|
-
*/
|
|
71
|
-
this.offset = 12;
|
|
72
71
|
/* Nothing reserved: see the note above. `selects` is false because arriving at
|
|
73
72
|
Delete must not delete, which is the difference between a set of commands
|
|
74
73
|
and a set of choices. */
|
|
@@ -141,18 +140,16 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
|
|
|
141
140
|
* who will forget, and the failure is silent to everyone who can see the
|
|
142
141
|
* screen.
|
|
143
142
|
*
|
|
144
|
-
* **
|
|
145
|
-
*
|
|
146
|
-
*
|
|
147
|
-
*
|
|
148
|
-
*
|
|
149
|
-
* trigger's own shadow root, where React neither looks nor compares.
|
|
143
|
+
* **Never `setAttribute`.** Writing `aria-expanded` onto the consumer's
|
|
144
|
+
* element is a hydration mismatch React reports and does not patch up,
|
|
145
|
+
* measured against React 19.2.8. `tellDisclosure` carries the argument and the
|
|
146
|
+
* measurement: the state travels as a property, into the trigger's own shadow
|
|
147
|
+
* root, where React neither looks nor compares.
|
|
150
148
|
*
|
|
151
|
-
* `aria-haspopup` goes with it rather than being written separately.
|
|
152
|
-
*
|
|
153
|
-
*
|
|
154
|
-
*
|
|
155
|
-
* says it is expanded is already saying it has something to expand.
|
|
149
|
+
* `aria-haspopup` goes with it rather than being written separately. An
|
|
150
|
+
* attribute the consumer's server never sent is a mismatch whether or not it
|
|
151
|
+
* moves afterwards, measured in both load orders, and a trigger that says it
|
|
152
|
+
* is expanded is already saying it has something to expand.
|
|
156
153
|
*/
|
|
157
154
|
announce() {
|
|
158
155
|
const trigger = this.trigger;
|
|
@@ -177,14 +174,11 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
|
|
|
177
174
|
this.updateComplete.then(() => {
|
|
178
175
|
if (this.open) {
|
|
179
176
|
/* The first action that can *take* focus, not the first action. A
|
|
180
|
-
dial whose first item is disabled
|
|
181
|
-
focus, so the reader
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
which is why the arrows were fine and this was not: the audit read
|
|
186
|
-
the fault into `items` and it was only ever here, at the one place
|
|
187
|
-
that reaches past the controller and indexes the list itself. */
|
|
177
|
+
dial whose first item is disabled otherwise opens onto a row that
|
|
178
|
+
refuses focus, so the reader lands nowhere and their first arrow
|
|
179
|
+
key starts from nothing. `KeyboardNavigationController` filters
|
|
180
|
+
disabled items itself; this is the one place that reaches past it
|
|
181
|
+
and indexes the list. */
|
|
188
182
|
this.items.find((one) => !one.disabled)?.focusItem();
|
|
189
183
|
}
|
|
190
184
|
});
|
|
@@ -199,10 +193,9 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
|
|
|
199
193
|
* **This is the case the tier rule blocks and a render method unblocks.** A
|
|
200
194
|
* bare `<button>` is what the headless tier can write: it must not reach for
|
|
201
195
|
* `helix-button`, which lives a tier above and would make `headless` depend
|
|
202
|
-
* on `
|
|
203
|
-
* of its own overrides this to use one
|
|
204
|
-
*
|
|
205
|
-
* template, panel and all.
|
|
196
|
+
* on `styled`. So the base draws the plain control and a tier that has buttons
|
|
197
|
+
* of its own overrides this to use one. Written inline, the only way
|
|
198
|
+
* to change it would be to reimplement the template, panel and all.
|
|
206
199
|
*/
|
|
207
200
|
renderTrigger() {
|
|
208
201
|
return html `<slot name="trigger" @click=${this.handleTriggerClick}>
|
|
@@ -214,10 +207,9 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
|
|
|
214
207
|
aria-label=${this.label}
|
|
215
208
|
>
|
|
216
209
|
${
|
|
217
|
-
/* A glyph,
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
what a speed dial opens with everywhere it exists. */
|
|
210
|
+
/* A glyph, so a consumer who slots no trigger does not get an empty
|
|
211
|
+
control for a button whose whole job is to be found. `plus` is what
|
|
212
|
+
a speed dial opens with everywhere it exists. */
|
|
221
213
|
''}
|
|
222
214
|
${drawIcon(plus)}
|
|
223
215
|
</button>
|
|
@@ -239,12 +231,12 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
|
|
|
239
231
|
__decorate([
|
|
240
232
|
property()
|
|
241
233
|
], HelixHeadlessSpeedDial.prototype, "label", void 0);
|
|
242
|
-
__decorate([
|
|
243
|
-
property()
|
|
244
|
-
], HelixHeadlessSpeedDial.prototype, "placement", void 0);
|
|
245
234
|
__decorate([
|
|
246
235
|
property({ type: Number })
|
|
247
236
|
], HelixHeadlessSpeedDial.prototype, "offset", void 0);
|
|
237
|
+
__decorate([
|
|
238
|
+
property()
|
|
239
|
+
], HelixHeadlessSpeedDial.prototype, "placement", void 0);
|
|
248
240
|
HelixHeadlessSpeedDial = __decorate([
|
|
249
241
|
customElement('helix-headless-speed-dial')
|
|
250
242
|
], HelixHeadlessSpeedDial);
|
|
@@ -18,11 +18,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
18
18
|
* positions at once.
|
|
19
19
|
*
|
|
20
20
|
* **The outer splitter draws it and the nested one announces itself upward.**
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* clipped: the crossing lies on the boundary between a pane and the divider
|
|
21
|
+
* The nested one drawing its own is the tempting version, since it already
|
|
22
|
+
* knows where its divider begins and needs no measurement of the other, and it
|
|
23
|
+
* is clipped: the crossing lies on the boundary between a pane and the divider
|
|
24
24
|
* beside it, a handle centered there reaches back over the boundary, and a pane
|
|
25
|
-
* is `overflow: auto`. Exactly half the corner
|
|
25
|
+
* is `overflow: auto`. Exactly half the corner is cut off. The outer separator
|
|
26
26
|
* is the one element that already straddles the seam, so the corner belongs in
|
|
27
27
|
* it.
|
|
28
28
|
*
|
|
@@ -122,48 +122,27 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
122
122
|
*/
|
|
123
123
|
export declare class HelixHeadlessSplitter extends HelixElement {
|
|
124
124
|
/**
|
|
125
|
-
*
|
|
126
|
-
*
|
|
127
|
-
* `horizontal` is side by side with an upright divider between them, and
|
|
128
|
-
* `aria-orientation` on that divider is therefore `vertical`: a separator's
|
|
129
|
-
* orientation is the direction it is *drawn* in, not the axis it moves along,
|
|
130
|
-
* so the two words are opposite each other here on purpose. The code had this
|
|
131
|
-
* right and the sentence beside it said the reverse.
|
|
132
|
-
*
|
|
133
|
-
* Unset is horizontal and stays unset, so a reflected default cannot appear on
|
|
134
|
-
* a host whose server output never had it.
|
|
135
|
-
*
|
|
136
|
-
* **`auto` lays the panes out along whichever axis the splitter has room for**,
|
|
137
|
-
* stacking them once its own inline size falls under `STACK_BELOW`. It is a
|
|
138
|
-
* value rather than a default because turning a splitter is not a style
|
|
139
|
-
* change: the drag axis, the arrow keys and `aria-orientation` all turn with
|
|
140
|
-
* it, so a CSS-only version would look stacked and behave side by side, with
|
|
141
|
-
* the keyboard moving the wrong way and the accessibility tree saying
|
|
142
|
-
* something untrue. Everything here reads `vertical` rather than this
|
|
143
|
-
* property, which is what makes one getter enough to turn all three together.
|
|
125
|
+
* How much of a shut pane is still shown, as a percentage.
|
|
144
126
|
*
|
|
145
|
-
*
|
|
146
|
-
*
|
|
147
|
-
*
|
|
148
|
-
*
|
|
149
|
-
* has an honest answer.
|
|
127
|
+
* Zero by default, which is a pane fully gone. A tab strip or a title bar
|
|
128
|
+
* that should survive its own collapse says how much of itself to keep, and
|
|
129
|
+
* only whoever put it there knows that, which is the same reason `min` is a
|
|
130
|
+
* consumer's to set.
|
|
150
131
|
*/
|
|
151
|
-
|
|
132
|
+
collapsedSize: number;
|
|
152
133
|
/**
|
|
153
134
|
* Where the divider sits, as a percentage of the whole.
|
|
154
135
|
*
|
|
155
136
|
* Reading gives where it is; writing declares it the consumer's, and
|
|
156
137
|
* `default-position` seeds one this element owns. The same accessor pair
|
|
157
138
|
* `Pagination.page` and the calendar's `month` carry.
|
|
158
|
-
*
|
|
159
|
-
*
|
|
160
139
|
*/
|
|
161
140
|
get position(): number;
|
|
162
141
|
set position(next: number);
|
|
163
142
|
/**
|
|
164
|
-
*
|
|
143
|
+
* Accessible name for the handle where two dividers cross.
|
|
165
144
|
*/
|
|
166
|
-
|
|
145
|
+
cornerLabel: string;
|
|
167
146
|
/**
|
|
168
147
|
* Which pane is shut, if either.
|
|
169
148
|
*
|
|
@@ -176,8 +155,6 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
176
155
|
*
|
|
177
156
|
* It overrides `min` and `max`, which is the point of it. Those keep a sliver
|
|
178
157
|
* of a pane during a drag; this is the thing that says the sliver can go.
|
|
179
|
-
*
|
|
180
|
-
*
|
|
181
158
|
*/
|
|
182
159
|
get collapsed(): 'end' | 'start' | undefined;
|
|
183
160
|
set collapsed(next: 'end' | 'start' | undefined);
|
|
@@ -186,14 +163,30 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
186
163
|
*/
|
|
187
164
|
defaultCollapsed?: 'end' | 'start';
|
|
188
165
|
/**
|
|
189
|
-
*
|
|
166
|
+
* Where the divider starts, where nothing declared it.
|
|
167
|
+
*/
|
|
168
|
+
defaultPosition: number;
|
|
169
|
+
/**
|
|
170
|
+
* Accessible name for the divider.
|
|
171
|
+
*/
|
|
172
|
+
label: string;
|
|
173
|
+
/**
|
|
174
|
+
* Nearest it may come to the end, on the same terms as `min`.
|
|
175
|
+
*/
|
|
176
|
+
max: number | string;
|
|
177
|
+
/**
|
|
178
|
+
* Either kind of bound as a percentage of the box.
|
|
190
179
|
*
|
|
191
|
-
*
|
|
192
|
-
*
|
|
193
|
-
*
|
|
194
|
-
*
|
|
180
|
+
* Measured rather than cached: a length is only meaningful against the size
|
|
181
|
+
* the splitter is right now, and the drag that asks is already reading layout.
|
|
182
|
+
* Falls back where there is nothing to measure, which is the server and an
|
|
183
|
+
* element that is not displayed, so `aria-valuemin` is a number either way.
|
|
195
184
|
*/
|
|
196
|
-
|
|
185
|
+
private toPercent;
|
|
186
|
+
/** `min` as a percentage, whichever way it was written. */
|
|
187
|
+
private get minPercent();
|
|
188
|
+
/** `max` as a percentage, whichever way it was written. */
|
|
189
|
+
private get maxPercent();
|
|
197
190
|
/**
|
|
198
191
|
* Nearest the divider may come to the start.
|
|
199
192
|
*
|
|
@@ -215,34 +208,36 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
215
208
|
*/
|
|
216
209
|
min: number | string;
|
|
217
210
|
/**
|
|
218
|
-
*
|
|
219
|
-
*/
|
|
220
|
-
max: number | string;
|
|
221
|
-
/**
|
|
222
|
-
* Either kind of bound as a percentage of the box.
|
|
211
|
+
* Which way the panes are laid out.
|
|
223
212
|
*
|
|
224
|
-
*
|
|
225
|
-
*
|
|
226
|
-
*
|
|
227
|
-
*
|
|
213
|
+
* `horizontal` is side by side with an upright divider between them, and
|
|
214
|
+
* `aria-orientation` on that divider is therefore `vertical`: a separator's
|
|
215
|
+
* orientation is the direction it is *drawn* in, not the axis it moves along,
|
|
216
|
+
* so the two words are opposite each other here on purpose.
|
|
217
|
+
*
|
|
218
|
+
* Unset is horizontal and stays unset, so a reflected default cannot appear on
|
|
219
|
+
* a host whose server output never had it.
|
|
220
|
+
*
|
|
221
|
+
* **`auto` lays the panes out along whichever axis the splitter has room for**,
|
|
222
|
+
* stacking them once its own inline size falls under `STACK_BELOW`. It is a
|
|
223
|
+
* value rather than a default because turning a splitter is not a style
|
|
224
|
+
* change: the drag axis, the arrow keys and `aria-orientation` all turn with
|
|
225
|
+
* it, so a CSS-only version would look stacked and behave side by side, with
|
|
226
|
+
* the keyboard moving the wrong way and the accessibility tree saying
|
|
227
|
+
* something untrue. Everything here reads `vertical` rather than this
|
|
228
|
+
* property, which is what makes one getter enough to turn all three together.
|
|
229
|
+
*
|
|
230
|
+
* **Its own width and not the viewport**, per the responsiveness policy in
|
|
231
|
+
* `.claude/rules/helix.md`: a splitter in a 300px panel of a 1400px window has
|
|
232
|
+
* no room for two panes side by side, and a media query would hand it the
|
|
233
|
+
* desktop branch. A `ResizeObserver` on the host asks the only question that
|
|
234
|
+
* has an honest answer.
|
|
228
235
|
*/
|
|
229
|
-
|
|
230
|
-
/** `min` as a percentage, whichever way it was written. */
|
|
231
|
-
private get minPercent();
|
|
232
|
-
/** `max` as a percentage, whichever way it was written. */
|
|
233
|
-
private get maxPercent();
|
|
236
|
+
orientation?: 'auto' | 'horizontal' | 'vertical';
|
|
234
237
|
/**
|
|
235
238
|
* How far one arrow press moves it, as a percentage.
|
|
236
239
|
*/
|
|
237
240
|
step: number;
|
|
238
|
-
/**
|
|
239
|
-
* Accessible name for the divider.
|
|
240
|
-
*/
|
|
241
|
-
label: string;
|
|
242
|
-
/**
|
|
243
|
-
* Accessible name for the handle where two dividers cross.
|
|
244
|
-
*/
|
|
245
|
-
cornerLabel: string;
|
|
246
241
|
/** The position, whoever set it, and `undefined` until somebody has. */
|
|
247
242
|
private positionState;
|
|
248
243
|
/** The collapse, whoever set it, and `undefined` until somebody has. */
|
|
@@ -266,14 +261,12 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
266
261
|
* The position to draw, which is not always the position to report.
|
|
267
262
|
*
|
|
268
263
|
* A controlled splitter applies nothing, so `position` holds still for the
|
|
269
|
-
* whole gesture
|
|
270
|
-
* and the consumer
|
|
271
|
-
*
|
|
264
|
+
* whole gesture: drawn from it, the divider stays where it was until the
|
|
265
|
+
* pointer comes up and the consumer answers, jumping to the end rather than
|
|
266
|
+
* following the hand.
|
|
272
267
|
*
|
|
273
|
-
* So a drag draws itself. The number is not announced until it settles,
|
|
274
|
-
*
|
|
275
|
-
* moment they give one. It is what the sandbox did for itself before it used
|
|
276
|
-
* this component: write the size on every pointer move, tell anyone once.
|
|
268
|
+
* So a drag draws itself. The number is still not announced until it settles,
|
|
269
|
+
* and the consumer's answer takes over the moment they give one.
|
|
277
270
|
*/
|
|
278
271
|
private get showing();
|
|
279
272
|
/**
|
|
@@ -329,17 +322,25 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
329
322
|
/**
|
|
330
323
|
* Whether the divider is against an edge with nothing beside it.
|
|
331
324
|
*
|
|
332
|
-
* Geometry, not state
|
|
333
|
-
*
|
|
334
|
-
*
|
|
335
|
-
*
|
|
336
|
-
*
|
|
325
|
+
* Geometry, not state. Asking whether the pane is `collapsed` is the wrong
|
|
326
|
+
* question: a divider driven to the edge by a consumer setting `position` is
|
|
327
|
+
* just as flush and would still get a line drawn. What the stylesheet needs
|
|
328
|
+
* to know is whether there is a pane on both sides, which is a fact about
|
|
329
|
+
* where the divider is however it got there.
|
|
337
330
|
*
|
|
338
331
|
* Still not the same question as `collapsed`: a pane shut to a sliver has a
|
|
339
332
|
* boundary worth drawing, and one shut to nothing has the container's own edge
|
|
340
333
|
* there instead.
|
|
341
334
|
*/
|
|
342
335
|
private get flush();
|
|
336
|
+
/**
|
|
337
|
+
* The collapse a settled position amounts to, if any, so a pane dragged shut
|
|
338
|
+
* and a pane shut by a consumer's button are the same state.
|
|
339
|
+
*
|
|
340
|
+
* No separate threshold. Landing on the collapsed size *is* the gesture, and
|
|
341
|
+
* `clamp` puts every overshoot exactly on the bound, so the default of zero
|
|
342
|
+
* latches on any drag that runs off the end.
|
|
343
|
+
*/
|
|
343
344
|
private shutAt;
|
|
344
345
|
/** Pulled between the bounds, which are the ends unless a consumer moved them. */
|
|
345
346
|
private clamp;
|
|
@@ -391,19 +392,12 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
391
392
|
* for its bounds. The other two arrows are left alone and the page scrolls
|
|
392
393
|
* under them as it would anywhere else.
|
|
393
394
|
*
|
|
394
|
-
*
|
|
395
|
-
* `
|
|
396
|
-
*
|
|
397
|
-
*
|
|
398
|
-
*
|
|
399
|
-
*
|
|
400
|
-
* *Leaving it as one axis, because nesting is what settles it. Taking all four
|
|
401
|
-
* would mean `ArrowLeft` moving a horizontal divider up and down, which is not
|
|
402
|
-
* a reader being helped past a guess, it is an arrow that does not go the way
|
|
403
|
-
* it points. And the guess it was protecting against is answered better by the
|
|
404
|
-
* corner: there, all four arrows are live and each moves the divider it points
|
|
405
|
-
* along, which is the only place in a splitter where a second axis means
|
|
406
|
-
* anything.*
|
|
395
|
+
* **Not all four, which is the tempting version.** Taking every arrow would
|
|
396
|
+
* mean `ArrowLeft` moving a horizontal divider up and down: not a reader
|
|
397
|
+
* being helped past a wrong guess, an arrow that does not go the way it
|
|
398
|
+
* points. A reader who guesses wrong is answered better by the corner, where
|
|
399
|
+
* all four are live and each moves the divider it points along, which is the
|
|
400
|
+
* only place in a splitter where a second axis means anything.
|
|
407
401
|
*/
|
|
408
402
|
private readonly handleKeydown;
|
|
409
403
|
/** Puts the divider back where the markup put it. */
|
|
@@ -412,10 +406,9 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
412
406
|
/**
|
|
413
407
|
* Both of them, because the corner moves both.
|
|
414
408
|
*
|
|
415
|
-
*
|
|
416
|
-
*
|
|
417
|
-
*
|
|
418
|
-
* did not. Reported.
|
|
409
|
+
* Its own handler, because the corner is a sibling of the separator rather
|
|
410
|
+
* than a child of it, for the stacking reason in the stylesheet, so nothing
|
|
411
|
+
* reaches the separator's own double click by bubbling.
|
|
419
412
|
*/
|
|
420
413
|
private readonly handleCornerDoubleClick;
|
|
421
414
|
/**
|
|
@@ -440,13 +433,11 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
440
433
|
*
|
|
441
434
|
* `parentElement` first, so a splitter does not find itself.
|
|
442
435
|
*
|
|
443
|
-
* **By identity rather than by tag, which `closestInstance` exists
|
|
444
|
-
*
|
|
445
|
-
*
|
|
446
|
-
*
|
|
447
|
-
*
|
|
448
|
-
* what `helix/styled` itself does, the lookup returned null and a nested
|
|
449
|
-
* splitter had no corner, with no error anywhere.
|
|
436
|
+
* **By identity rather than by tag, which is what `closestInstance` exists
|
|
437
|
+
* for.** A selector like `'helix-splitter, helix-headless-splitter'` names a
|
|
438
|
+
* styled tag from a headless package and misses any third tag, which is
|
|
439
|
+
* exactly what subclassing a headless element produces: the lookup returns
|
|
440
|
+
* null, the nested splitter gets no corner, and nothing reports an error.
|
|
450
441
|
*
|
|
451
442
|
* It also crosses shadow boundaries, which `closest` does not: a splitter
|
|
452
443
|
* slotted into another component's shadow root has a `parentNode` chain
|
|
@@ -467,18 +458,14 @@ export declare class HelixHeadlessSplitter extends HelixElement {
|
|
|
467
458
|
/**
|
|
468
459
|
* Keeps a gesture on the corner to itself.
|
|
469
460
|
*
|
|
470
|
-
* The
|
|
471
|
-
*
|
|
472
|
-
*
|
|
473
|
-
*
|
|
474
|
-
*
|
|
475
|
-
*
|
|
476
|
-
*
|
|
477
|
-
*
|
|
478
|
-
* nothing reaches the separator by bubbling. This stays because the fix should
|
|
479
|
-
* not depend on where the element happens to sit, and `preventDefault` is
|
|
480
|
-
* still needed either way: a drag across a pane would otherwise select the
|
|
481
|
-
* text under it.
|
|
461
|
+
* The stop is not redundant with the corner being a sibling of the separator.
|
|
462
|
+
* Should a press on the corner ever reach the separator, the separator calls
|
|
463
|
+
* `setPointerCapture`, which retargets every later pointer event to *it*: the
|
|
464
|
+
* corner's `pointerup` never arrives, its origin is never cleared, and it
|
|
465
|
+
* goes on resizing with no button held. Worse than moving twice.
|
|
466
|
+
*
|
|
467
|
+
* `preventDefault` is needed either way: a drag across a pane would otherwise
|
|
468
|
+
* select the text under it.
|
|
482
469
|
*/
|
|
483
470
|
private leaveSeparator;
|
|
484
471
|
connectedCallback(): void;
|