@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.
Files changed (210) hide show
  1. package/custom-elements.json +4513 -4483
  2. package/dist/accordion/item/accordion-item.d.ts +13 -15
  3. package/dist/accordion/item/accordion-item.js +15 -17
  4. package/dist/announcement/root/announcement-root.d.ts +7 -25
  5. package/dist/announcement/root/announcement-root.js +7 -20
  6. package/dist/app-header/root/app-header-root.d.ts +10 -17
  7. package/dist/app-header/root/app-header-root.js +9 -18
  8. package/dist/avatar/group/avatar-group.d.ts +10 -19
  9. package/dist/avatar/group/avatar-group.js +12 -17
  10. package/dist/avatar/root/avatar-root.d.ts +8 -8
  11. package/dist/avatar/root/avatar-root.js +19 -20
  12. package/dist/badge/root/badge-root.d.ts +6 -6
  13. package/dist/badge/root/badge-root.js +13 -13
  14. package/dist/bar-chart/root/bar-chart-root.d.ts +21 -29
  15. package/dist/bar-chart/root/bar-chart-root.js +42 -57
  16. package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +12 -18
  17. package/dist/breadcrumbs/breadcrumb/breadcrumb.js +13 -16
  18. package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +9 -28
  19. package/dist/breadcrumbs/root/breadcrumbs-root.js +9 -28
  20. package/dist/button/root/button-root.d.ts +84 -94
  21. package/dist/button/root/button-root.js +82 -92
  22. package/dist/callout/root/callout-root.d.ts +4 -5
  23. package/dist/carousel/root/carousel-root.d.ts +59 -71
  24. package/dist/carousel/root/carousel-root.js +73 -101
  25. package/dist/chat/composer/chat-composer.d.ts +29 -33
  26. package/dist/chat/composer/chat-composer.js +40 -44
  27. package/dist/chat/message/chat-message.d.ts +25 -25
  28. package/dist/chat/message/chat-message.js +26 -26
  29. package/dist/chat/root/chat-root.d.ts +28 -41
  30. package/dist/chat/root/chat-root.js +27 -40
  31. package/dist/checkbox/root/checkbox-root.d.ts +10 -12
  32. package/dist/checkbox/root/checkbox-root.js +29 -35
  33. package/dist/checkbox-group/root/checkbox-group-root.d.ts +32 -45
  34. package/dist/checkbox-group/root/checkbox-group-root.js +53 -79
  35. package/dist/code-block/root/code-block-root.d.ts +3 -4
  36. package/dist/code-block/root/code-block-root.js +8 -12
  37. package/dist/color-input/root/color-input-root.d.ts +36 -37
  38. package/dist/color-input/root/color-input-root.js +29 -34
  39. package/dist/color-picker/color.d.ts +7 -8
  40. package/dist/color-picker/color.js +7 -8
  41. package/dist/color-picker/root/color-picker-root.d.ts +55 -57
  42. package/dist/color-picker/root/color-picker-root.js +60 -64
  43. package/dist/combobox/root/combobox-root.d.ts +53 -58
  44. package/dist/combobox/root/combobox-root.js +85 -94
  45. package/dist/command/root/command-root.d.ts +8 -8
  46. package/dist/command/root/command-root.js +29 -33
  47. package/dist/copy-button/root/copy-button-root.d.ts +21 -24
  48. package/dist/copy-button/root/copy-button-root.js +25 -35
  49. package/dist/data-table/root/data-table-root.d.ts +77 -76
  50. package/dist/data-table/root/data-table-root.js +95 -84
  51. package/dist/data-table/root/order.d.ts +2 -2
  52. package/dist/data-table/root/order.js +1 -3
  53. package/dist/date-input/root/date-input-root.d.ts +88 -93
  54. package/dist/date-input/root/date-input-root.js +147 -158
  55. package/dist/date-picker/root/date-picker-root.d.ts +75 -83
  56. package/dist/date-picker/root/date-picker-root.js +120 -143
  57. package/dist/dialog/root/dialog-root.d.ts +41 -24
  58. package/dist/dialog/root/dialog-root.js +47 -24
  59. package/dist/divider/root/divider-root.d.ts +5 -6
  60. package/dist/divider/root/divider-root.js +4 -5
  61. package/dist/donut-chart/root/donut-chart-root.d.ts +22 -25
  62. package/dist/donut-chart/root/donut-chart-root.js +37 -51
  63. package/dist/drawer/root/drawer-root.d.ts +24 -29
  64. package/dist/drawer/root/drawer-root.js +15 -22
  65. package/dist/drilldown/item/drilldown-item.d.ts +14 -14
  66. package/dist/drilldown/item/drilldown-item.js +24 -26
  67. package/dist/drilldown/root/drilldown-root.d.ts +8 -10
  68. package/dist/drilldown/root/drilldown-root.js +6 -7
  69. package/dist/element-events.generated.js +1 -1
  70. package/dist/file-input/root/file-input-root.d.ts +20 -24
  71. package/dist/file-input/root/file-input-root.js +42 -57
  72. package/dist/format-date/root/format-date-root.js +1 -1
  73. package/dist/heatmap/root/buckets.d.ts +8 -8
  74. package/dist/heatmap/root/buckets.js +8 -8
  75. package/dist/heatmap/root/heatmap-root.d.ts +57 -63
  76. package/dist/heatmap/root/heatmap-root.js +72 -83
  77. package/dist/icon/root/icon-root.d.ts +4 -4
  78. package/dist/icon/root/icon-root.js +9 -9
  79. package/dist/icon-button/root/icon-button-root.d.ts +4 -6
  80. package/dist/icon-button/root/icon-button-root.js +4 -6
  81. package/dist/image/root/image-root.d.ts +49 -59
  82. package/dist/image/root/image-root.js +55 -65
  83. package/dist/index.d.ts +5 -5
  84. package/dist/index.js +5 -5
  85. package/dist/input/root/input-root.d.ts +61 -85
  86. package/dist/input/root/input-root.js +79 -106
  87. package/dist/kbd/root/kbd-root.d.ts +8 -7
  88. package/dist/kbd/root/kbd-root.js +71 -11
  89. package/dist/legend/root/legend-root.d.ts +1 -1
  90. package/dist/legend/root/legend-root.js +4 -5
  91. package/dist/line-chart/root/line-chart-root.d.ts +26 -30
  92. package/dist/line-chart/root/line-chart-root.js +10 -10
  93. package/dist/list/item/list-item.d.ts +14 -18
  94. package/dist/list/item/list-item.js +18 -22
  95. package/dist/list/root/list-root.d.ts +4 -4
  96. package/dist/list/root/list-root.js +3 -3
  97. package/dist/listbox/root/listbox-root.d.ts +31 -58
  98. package/dist/listbox/root/listbox-root.js +66 -109
  99. package/dist/megamenu/root/megamenu-root.d.ts +34 -35
  100. package/dist/megamenu/root/megamenu-root.js +53 -58
  101. package/dist/menu/item/menu-item.d.ts +39 -53
  102. package/dist/menu/item/menu-item.js +50 -64
  103. package/dist/menu/root/menu-root.d.ts +30 -40
  104. package/dist/menu/root/menu-root.js +49 -82
  105. package/dist/meter/root/meter-root.d.ts +49 -53
  106. package/dist/meter/root/meter-root.js +22 -27
  107. package/dist/navigation/root/navigation-root.js +11 -19
  108. package/dist/notifications/notification/notification.d.ts +16 -22
  109. package/dist/notifications/notification/notification.js +21 -27
  110. package/dist/notifications/root/notifications-root.d.ts +31 -39
  111. package/dist/notifications/root/notifications-root.js +41 -52
  112. package/dist/number-input/root/number-input-root.d.ts +31 -33
  113. package/dist/number-input/root/number-input-root.js +37 -39
  114. package/dist/option/root/option-root.d.ts +73 -74
  115. package/dist/option/root/option-root.js +62 -64
  116. package/dist/outline/root/outline-root.d.ts +38 -44
  117. package/dist/outline/root/outline-root.js +66 -82
  118. package/dist/pagination/root/pagination-root.d.ts +87 -92
  119. package/dist/pagination/root/pagination-root.js +116 -123
  120. package/dist/pagination/size/pagination-size.d.ts +31 -50
  121. package/dist/pagination/size/pagination-size.js +35 -55
  122. package/dist/pagination/summary/pagination-summary.d.ts +12 -12
  123. package/dist/pagination/summary/pagination-summary.js +18 -18
  124. package/dist/pin-input/root/pin-input-root.d.ts +53 -70
  125. package/dist/pin-input/root/pin-input-root.js +74 -94
  126. package/dist/popover/root/popover-root.d.ts +15 -20
  127. package/dist/popover/root/popover-root.js +19 -36
  128. package/dist/progress/root/progress-root.d.ts +12 -14
  129. package/dist/progress/root/progress-root.js +22 -25
  130. package/dist/qr-code/root/qr-code-root.d.ts +11 -11
  131. package/dist/qr-code/root/qr-code-root.js +12 -14
  132. package/dist/radio/group/radio-group.js +19 -26
  133. package/dist/radio/root/radio-root.d.ts +12 -13
  134. package/dist/radio/root/radio-root.js +12 -13
  135. package/dist/rating/root/rating-root.d.ts +25 -30
  136. package/dist/rating/root/rating-root.js +43 -50
  137. package/dist/scroll-area/root/scroll-area-root.d.ts +11 -14
  138. package/dist/scroll-area/root/scroll-area-root.js +39 -33
  139. package/dist/select/root/select-root.d.ts +7 -12
  140. package/dist/select/root/select-root.js +40 -55
  141. package/dist/slider/root/slider-root.d.ts +53 -60
  142. package/dist/slider/root/slider-root.js +74 -85
  143. package/dist/sparkline/root/sparkline-root.d.ts +43 -47
  144. package/dist/sparkline/root/sparkline-root.js +23 -32
  145. package/dist/speed-dial/item/speed-dial-item.d.ts +6 -6
  146. package/dist/speed-dial/item/speed-dial-item.js +9 -9
  147. package/dist/speed-dial/root/speed-dial-root.d.ts +21 -25
  148. package/dist/speed-dial/root/speed-dial-root.js +32 -40
  149. package/dist/splitter/root/splitter-root.d.ts +98 -111
  150. package/dist/splitter/root/splitter-root.js +96 -123
  151. package/dist/stat/root/stat-root.d.ts +2 -7
  152. package/dist/stat/root/stat-root.js +0 -5
  153. package/dist/steps/step/step.d.ts +19 -24
  154. package/dist/steps/step/step.js +27 -32
  155. package/dist/switch/root/switch-root.js +2 -2
  156. package/dist/table/column/table-column.d.ts +54 -60
  157. package/dist/table/column/table-column.js +95 -68
  158. package/dist/table/root/table-root.d.ts +5 -6
  159. package/dist/table/root/table-root.js +7 -10
  160. package/dist/tabs/panel/tab-panel.d.ts +21 -25
  161. package/dist/tabs/panel/tab-panel.js +25 -29
  162. package/dist/tabs/root/tabs-root.d.ts +25 -34
  163. package/dist/tabs/root/tabs-root.js +22 -28
  164. package/dist/tabs/tab/tab.d.ts +12 -12
  165. package/dist/tabs/tab/tab.js +19 -20
  166. package/dist/textarea/root/textarea-root.d.ts +36 -36
  167. package/dist/textarea/root/textarea-root.js +43 -47
  168. package/dist/time-input/root/time-input-root.d.ts +58 -68
  169. package/dist/time-input/root/time-input-root.js +62 -77
  170. package/dist/time-picker/root/time-picker-root.d.ts +73 -79
  171. package/dist/time-picker/root/time-picker-root.js +72 -84
  172. package/dist/timeline/item/timeline-item.d.ts +8 -11
  173. package/dist/timeline/item/timeline-item.js +8 -11
  174. package/dist/timeline/root/timeline-root.d.ts +5 -7
  175. package/dist/timeline/root/timeline-root.js +5 -7
  176. package/dist/toast/item/toast-item.d.ts +9 -27
  177. package/dist/toast/item/toast-item.js +19 -41
  178. package/dist/toast/root/toast-root.d.ts +10 -14
  179. package/dist/toast/root/toast-root.js +4 -5
  180. package/dist/toggle/group/toggle-group.d.ts +6 -15
  181. package/dist/toggle/group/toggle-group.js +21 -36
  182. package/dist/toggle/root/toggle-root.d.ts +26 -27
  183. package/dist/toggle/root/toggle-root.js +30 -31
  184. package/dist/toolbar/root/toolbar-root.d.ts +7 -10
  185. package/dist/toolbar/root/toolbar-root.js +10 -14
  186. package/dist/tooltip/root/tooltip-root.d.ts +52 -59
  187. package/dist/tooltip/root/tooltip-root.js +98 -93
  188. package/dist/tour/root/tour-root.d.ts +19 -23
  189. package/dist/tour/root/tour-root.js +31 -41
  190. package/dist/tour/stop/tour-stop.d.ts +14 -15
  191. package/dist/tour/stop/tour-stop.js +31 -34
  192. package/dist/tree/item/tree-item.d.ts +30 -35
  193. package/dist/tree/item/tree-item.js +43 -55
  194. package/dist/tree/root/tree-root.d.ts +7 -10
  195. package/dist/tree/root/tree-root.js +33 -42
  196. package/dist/trend/root/trend-root.d.ts +3 -5
  197. package/dist/trend/root/trend-root.js +5 -9
  198. package/dist/video/root/video-root.d.ts +100 -124
  199. package/dist/video/root/video-root.js +142 -176
  200. package/dist/video-playlist/item/video-playlist-item.d.ts +16 -16
  201. package/dist/video-playlist/item/video-playlist-item.js +24 -24
  202. package/dist/video-playlist/menu/video-playlist-menu.d.ts +5 -8
  203. package/dist/video-playlist/menu/video-playlist-menu.js +20 -29
  204. package/dist/video-playlist/root/video-playlist-root.d.ts +16 -11
  205. package/dist/video-playlist/root/video-playlist-root.js +21 -25
  206. package/dist/virtual-list/root/virtual-list-root.d.ts +8 -12
  207. package/dist/virtual-list/root/virtual-list-root.js +11 -16
  208. package/jsx.d.ts +9797 -12561
  209. package/package.json +6 -6
  210. package/vue.d.ts +2684 -3228
@@ -9,10 +9,9 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
9
9
  * @description
10
10
  * **The list is `helix-listbox`, and the filtering is its own.** It already
11
11
  * owns narrowing, the empty state, the highlight, `aria-activedescendant` and
12
- * scrolling an option into view, and every one of those is a decision with a
13
- * long note attached. Rewriting them here would be a second copy to keep in
14
- * step; what is left for this element is the field, the panel and the traffic
15
- * between them.
12
+ * scrolling an option into view. Rewriting them here would be a second copy to
13
+ * keep in step; what is left for this element is the field, the panel and the
14
+ * traffic between them.
16
15
  *
17
16
  * **The text and the value are two things.** What a reader types is a filter,
18
17
  * not an answer: it narrows the list and is thrown away. The value is whichever
@@ -24,7 +23,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
24
23
  * That is also why the field is emptied of its filter on close rather than left
25
24
  * holding it: a control reopened still narrowed by the last visit's search is a
26
25
  * control whose second use starts from the first one's leftovers. Select
27
- * records the same, having been fixed for it.
26
+ * records the same.
28
27
  *
29
28
  * **Focus stays in the field, which is the whole of what a combobox is.** The
30
29
  * arrows move the list without leaving the text, which is why the listbox has a
@@ -111,7 +110,6 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
111
110
  * @csspart listbox-items - The list itself.
112
111
  * @csspart listbox-label - The question, over the list.
113
112
  * @csspart listbox-loading - Shown while the options are still on their way.
114
- * from the listbox.
115
113
  * @csspart listbox-search - The region holding the field that narrows the list.
116
114
  * @csspart listbox-search-field - The field itself.
117
115
  * @csspart rest - The count of choices held beyond `max-tags`.
@@ -133,21 +131,6 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
133
131
  * keystrokes as the listbox. A consumer who wants autofill can still ask.
134
132
  */
135
133
  autocomplete: string;
136
- /**
137
- * Text shown while nothing has been chosen.
138
- */
139
- placeholder: string;
140
- /**
141
- * Whether more than one option can be chosen.
142
- *
143
- * The list already does the work: `value` comes apart on commas, a press
144
- * toggles rather than replaces, and the arrows move without choosing. What
145
- * this adds is the tags, and keeping the panel open between picks.
146
- *
147
- * A comma is therefore not available inside an option's value, which is the
148
- * listbox's contract and not this element's to change.
149
- */
150
- multiple: boolean;
151
134
  /**
152
135
  * Whether the reader may answer with something the list does not hold.
153
136
  *
@@ -157,23 +140,29 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
157
140
  * halfway through.
158
141
  */
159
142
  creatable: boolean;
160
- /**
161
- * Whether the field finishes the word as it is typed.
162
- *
163
- * `suggest` rather than `autocomplete`, which is a real HTML attribute this
164
- * element already sets on the input it renders, and two things of one name
165
- * meaning different things on the same control is a question a consumer
166
- * should not have to ask.
167
- */
168
- suggest: boolean;
169
143
  /**
170
144
  * What the create row says, before the words it would add.
171
145
  */
172
146
  createLabel: string;
173
147
  /**
174
- * What a tag's remove control is called, since the mark has no name.
148
+ * Words shown where the filter has hidden everything.
175
149
  */
176
- removeLabel: string;
150
+ emptyText: string;
151
+ /**
152
+ * Accessible name for the list, which has no visible one of its own.
153
+ */
154
+ listLabel: string;
155
+ /**
156
+ * Whether the options are still on their way.
157
+ *
158
+ * Passed straight to the list, which is where the rows are and so where the
159
+ * message belongs.
160
+ */
161
+ loading: boolean;
162
+ /**
163
+ * What the list says while they are on their way.
164
+ */
165
+ loadingText: string;
177
166
  /**
178
167
  * How many tags to draw before the rest become a count. `multiple` only.
179
168
  *
@@ -190,24 +179,33 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
190
179
  */
191
180
  maxTags: number;
192
181
  /**
193
- * Accessible name for the list, which has no visible one of its own.
182
+ * Whether more than one option can be chosen.
183
+ *
184
+ * The list already does the work: `value` comes apart on commas, a press
185
+ * toggles rather than replaces, and the arrows move without choosing. What
186
+ * this adds is the tags, and keeping the panel open between picks.
187
+ *
188
+ * A comma is therefore not available inside an option's value, which is the
189
+ * listbox's contract and not this element's to change.
194
190
  */
195
- listLabel: string;
191
+ multiple: boolean;
196
192
  /**
197
- * Whether the options are still on their way.
198
- *
199
- * Passed straight to the list, which is where the rows are and so where the
200
- * message belongs.
193
+ * Text shown while nothing has been chosen.
201
194
  */
202
- loading: boolean;
195
+ placeholder: string;
203
196
  /**
204
- * What the list says while they are on their way.
197
+ * What a tag's remove control is called, since the mark has no name.
205
198
  */
206
- loadingText: string;
199
+ removeLabel: string;
207
200
  /**
208
- * Words shown where the filter has hidden everything.
201
+ * Whether the field finishes the word as it is typed.
202
+ *
203
+ * `suggest` rather than `autocomplete`, which is a real HTML attribute this
204
+ * element already sets on the input it renders, and two things of one name
205
+ * meaning different things on the same control is a question a consumer
206
+ * should not have to ask.
209
207
  */
210
- emptyText: string;
208
+ suggest: boolean;
211
209
  /**
212
210
  * What the reader has typed, which narrows the list and is not the value.
213
211
  *
@@ -323,11 +321,10 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
323
321
  /**
324
322
  * Anywhere in the field opens the list, and puts the caret where typing goes.
325
323
  *
326
- * On the field rather than on the `<input>`, which is where it was. The caret
327
- * is a sibling of the input and so is the tag strip, so pressing the one part
328
- * of the control that visibly says "this opens" did nothing at all, and a
329
- * reader who wanted the list had to find the text box. Anything drawn inside
330
- * the field is the field.
324
+ * On the field rather than on the `<input>`. The caret is a sibling of the
325
+ * input and so is the tag strip, so a handler on the input alone leaves the
326
+ * one part of the control that visibly says "this opens" doing nothing.
327
+ * Anything drawn inside the field is the field.
331
328
  *
332
329
  * A tag is the exception, because a tag is its own control: its dismiss
333
330
  * removes a choice, and opening the list on the way past would leave the
@@ -354,23 +351,21 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
354
351
  /**
355
352
  * The list the field filters, behind a seam the styled tier can move.
356
353
  *
357
- * A method rather than a fragment inline, so a tier above can render its own,
358
- * wrap this one, pass it a property the base does not know about, or leave it
359
- * out, without reimplementing the whole template to do any of them. The tag is
354
+ * A method rather than a fragment inline, so a tier above can replace, wrap
355
+ * or omit it without reimplementing the whole template. The tag is
360
356
  * interpolated rather than written, so `tier` resolves it: this renders the
361
- * headless element, and a styled subclass that sets `tier` renders the styled one
362
- * from the same template.
357
+ * headless element, and a styled subclass that sets `tier` renders the styled
358
+ * one from the same template.
363
359
  */
364
360
  protected renderListbox(): TemplateResult;
365
361
  /**
366
362
  * One chosen option, as a tag, behind a seam the styled tier can move.
367
363
  *
368
- * A method rather than a fragment inline, so a tier above can render its own,
369
- * wrap this one, pass it a property the base does not know about, or leave it
370
- * out, without reimplementing the whole template to do any of them. The tag is
364
+ * A method rather than a fragment inline, so a tier above can replace, wrap
365
+ * or omit it without reimplementing the whole template. The tag is
371
366
  * interpolated rather than written, so `tier` resolves it: this renders the
372
- * headless element, and a styled subclass that sets `tier` renders the styled one
373
- * from the same template.
367
+ * headless element, and a styled subclass that sets `tier` renders the styled
368
+ * one from the same template.
374
369
  */
375
370
  protected renderTag(option: {
376
371
  text: string;
@@ -35,10 +35,9 @@ const isInsertion = (event) => !event.inputType?.startsWith('delete');
35
35
  * @description
36
36
  * **The list is `helix-listbox`, and the filtering is its own.** It already
37
37
  * owns narrowing, the empty state, the highlight, `aria-activedescendant` and
38
- * scrolling an option into view, and every one of those is a decision with a
39
- * long note attached. Rewriting them here would be a second copy to keep in
40
- * step; what is left for this element is the field, the panel and the traffic
41
- * between them.
38
+ * scrolling an option into view. Rewriting them here would be a second copy to
39
+ * keep in step; what is left for this element is the field, the panel and the
40
+ * traffic between them.
42
41
  *
43
42
  * **The text and the value are two things.** What a reader types is a filter,
44
43
  * not an answer: it narrows the list and is thrown away. The value is whichever
@@ -50,7 +49,7 @@ const isInsertion = (event) => !event.inputType?.startsWith('delete');
50
49
  * That is also why the field is emptied of its filter on close rather than left
51
50
  * holding it: a control reopened still narrowed by the last visit's search is a
52
51
  * control whose second use starts from the first one's leftovers. Select
53
- * records the same, having been fixed for it.
52
+ * records the same.
54
53
  *
55
54
  * **Focus stays in the field, which is the whole of what a combobox is.** The
56
55
  * arrows move the list without leaving the text, which is why the listbox has a
@@ -137,7 +136,6 @@ const isInsertion = (event) => !event.inputType?.startsWith('delete');
137
136
  * @csspart listbox-items - The list itself.
138
137
  * @csspart listbox-label - The question, over the list.
139
138
  * @csspart listbox-loading - Shown while the options are still on their way.
140
- * from the listbox.
141
139
  * @csspart listbox-search - The region holding the field that narrows the list.
142
140
  * @csspart listbox-search-field - The field itself.
143
141
  * @csspart rest - The count of choices held beyond `max-tags`.
@@ -168,21 +166,6 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
168
166
  * keystrokes as the listbox. A consumer who wants autofill can still ask.
169
167
  */
170
168
  this.autocomplete = 'off';
171
- /**
172
- * Text shown while nothing has been chosen.
173
- */
174
- this.placeholder = '';
175
- /**
176
- * Whether more than one option can be chosen.
177
- *
178
- * The list already does the work: `value` comes apart on commas, a press
179
- * toggles rather than replaces, and the arrows move without choosing. What
180
- * this adds is the tags, and keeping the panel open between picks.
181
- *
182
- * A comma is therefore not available inside an option's value, which is the
183
- * listbox's contract and not this element's to change.
184
- */
185
- this.multiple = false;
186
169
  /**
187
170
  * Whether the reader may answer with something the list does not hold.
188
171
  *
@@ -192,23 +175,29 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
192
175
  * halfway through.
193
176
  */
194
177
  this.creatable = false;
195
- /**
196
- * Whether the field finishes the word as it is typed.
197
- *
198
- * `suggest` rather than `autocomplete`, which is a real HTML attribute this
199
- * element already sets on the input it renders, and two things of one name
200
- * meaning different things on the same control is a question a consumer
201
- * should not have to ask.
202
- */
203
- this.suggest = false;
204
178
  /**
205
179
  * What the create row says, before the words it would add.
206
180
  */
207
181
  this.createLabel = 'Add';
208
182
  /**
209
- * What a tag's remove control is called, since the mark has no name.
183
+ * Words shown where the filter has hidden everything.
210
184
  */
211
- this.removeLabel = 'Remove';
185
+ this.emptyText = 'No matches';
186
+ /**
187
+ * Accessible name for the list, which has no visible one of its own.
188
+ */
189
+ this.listLabel = 'Options';
190
+ /**
191
+ * Whether the options are still on their way.
192
+ *
193
+ * Passed straight to the list, which is where the rows are and so where the
194
+ * message belongs.
195
+ */
196
+ this.loading = false;
197
+ /**
198
+ * What the list says while they are on their way.
199
+ */
200
+ this.loadingText = 'Loading';
212
201
  /**
213
202
  * How many tags to draw before the rest become a count. `multiple` only.
214
203
  *
@@ -225,24 +214,33 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
225
214
  */
226
215
  this.maxTags = 0;
227
216
  /**
228
- * Accessible name for the list, which has no visible one of its own.
217
+ * Whether more than one option can be chosen.
218
+ *
219
+ * The list already does the work: `value` comes apart on commas, a press
220
+ * toggles rather than replaces, and the arrows move without choosing. What
221
+ * this adds is the tags, and keeping the panel open between picks.
222
+ *
223
+ * A comma is therefore not available inside an option's value, which is the
224
+ * listbox's contract and not this element's to change.
229
225
  */
230
- this.listLabel = 'Options';
226
+ this.multiple = false;
231
227
  /**
232
- * Whether the options are still on their way.
233
- *
234
- * Passed straight to the list, which is where the rows are and so where the
235
- * message belongs.
228
+ * Text shown while nothing has been chosen.
236
229
  */
237
- this.loading = false;
230
+ this.placeholder = '';
238
231
  /**
239
- * What the list says while they are on their way.
232
+ * What a tag's remove control is called, since the mark has no name.
240
233
  */
241
- this.loadingText = 'Loading';
234
+ this.removeLabel = 'Remove';
242
235
  /**
243
- * Words shown where the filter has hidden everything.
236
+ * Whether the field finishes the word as it is typed.
237
+ *
238
+ * `suggest` rather than `autocomplete`, which is a real HTML attribute this
239
+ * element already sets on the input it renders, and two things of one name
240
+ * meaning different things on the same control is a question a consumer
241
+ * should not have to ask.
244
242
  */
245
- this.emptyText = 'No matches';
243
+ this.suggest = false;
246
244
  /**
247
245
  * What the reader has typed, which narrows the list and is not the value.
248
246
  *
@@ -262,10 +260,9 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
262
260
  this.suggestion = '';
263
261
  this.panel = new PopoverController(this, {
264
262
  anchor: () => this.renderRoot?.querySelector('[part="field"]'),
265
- /* The surface *and* the field, for the reason four components here were
266
- fixed for: scoped to the surface alone, a press on the field counts as
267
- outside, so `pointerdown` closes the panel and the field's own handler
268
- reopens it on the `click` that follows. */
263
+ /* The surface *and* the field. Scoped to the surface alone, a press on the
264
+ field counts as outside, so `pointerdown` closes the panel and the
265
+ field's own handler reopens it on the `click` that follows. */
269
266
  boundary: () => [
270
267
  this.renderRoot?.querySelector('[part="surface"]'),
271
268
  this.renderRoot?.querySelector('[part="field"]'),
@@ -365,7 +362,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
365
362
  it carries what is being *proposed*, dispatched before it is applied,
366
363
  which is what makes it refusable. The listbox never applies it anyway,
367
364
  since this element passes `.value` down and that is a consumer declaring
368
- ownership. Select was fixed for exactly this. */
365
+ ownership. */
369
366
  const { value } = event.detail;
370
367
  /* And nothing happens on a refusal. Refusing a change should leave the
371
368
  control where it was, not clear the filter and shut the panel as though
@@ -384,11 +381,10 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
384
381
  /**
385
382
  * Anywhere in the field opens the list, and puts the caret where typing goes.
386
383
  *
387
- * On the field rather than on the `<input>`, which is where it was. The caret
388
- * is a sibling of the input and so is the tag strip, so pressing the one part
389
- * of the control that visibly says "this opens" did nothing at all, and a
390
- * reader who wanted the list had to find the text box. Anything drawn inside
391
- * the field is the field.
384
+ * On the field rather than on the `<input>`. The caret is a sibling of the
385
+ * input and so is the tag strip, so a handler on the input alone leaves the
386
+ * one part of the control that visibly says "this opens" doing nothing.
387
+ * Anything drawn inside the field is the field.
392
388
  *
393
389
  * A tag is the exception, because a tag is its own control: its dismiss
394
390
  * removes a choice, and opening the list on the way past would leave the
@@ -604,18 +600,17 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
604
600
  is already `Ru` because the browser replaced the selection, and the
605
601
  completion is *still* `Ruby`: unchanged, so Lit writes nothing and
606
602
  `changed.has('suggestion')` is false, so nothing is selected either. The
607
- completion appeared on the first character and never again, which is
608
- exactly how it was reported.
603
+ completion then appears on the first character and never again.
609
604
 
610
605
  Reconciled against what the input actually holds, which is the only thing
611
606
  that knows. */
612
607
  const control = this.renderRoot.querySelector('[part="control"]');
613
608
  /* The same expression the template binds, because this has to agree with it
614
- in both directions. Writing only when there is a completion put the field
615
- right while one was showing and left it stale afterwards: this reconcile
616
- writes behind Lit's back, so Lit's own dirty-check then believes the DOM
617
- already holds whatever it last wrote and declines to correct it. A field
618
- cleared on close kept the last completion for exactly that reason. */
609
+ in both directions. Writing only when there is a completion puts the
610
+ field right while one is showing and leaves it stale afterwards: this
611
+ reconcile writes behind Lit's back, so Lit's own dirty-check then
612
+ believes the DOM already holds whatever it last wrote and declines to
613
+ correct it. */
619
614
  const wanted = this.multiple || this.open ? this.suggestion || this.typed : this.word;
620
615
  if (control && control.value !== wanted) {
621
616
  control.value = wanted;
@@ -632,12 +627,10 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
632
627
  control reopened still narrowed is one whose second use starts from the
633
628
  first one's leftovers.
634
629
 
635
- All three of them, which is the fix. Only the listbox's copy was
636
- cleared here, so `typed` survived a dismissal: the field looked empty
637
- because a closed single-choice field shows the chosen words instead,
638
- and the moment it reopened the old search was back in it with the list
639
- behind it showing everything. Measured by pressing Escape on "ru" and
640
- opening it again. */
630
+ All three, not the listbox's copy alone. A surviving `typed` is
631
+ invisible on close, because a closed single-choice field shows the
632
+ chosen words instead, and comes back with the list behind it showing
633
+ everything the moment it reopens. */
641
634
  this.typed = '';
642
635
  this.suggestion = '';
643
636
  this.listbox?.requestFilter('');
@@ -646,12 +639,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
646
639
  /**
647
640
  * The list the field filters, behind a seam the styled tier can move.
648
641
  *
649
- * A method rather than a fragment inline, so a tier above can render its own,
650
- * wrap this one, pass it a property the base does not know about, or leave it
651
- * out, without reimplementing the whole template to do any of them. The tag is
642
+ * A method rather than a fragment inline, so a tier above can replace, wrap
643
+ * or omit it without reimplementing the whole template. The tag is
652
644
  * interpolated rather than written, so `tier` resolves it: this renders the
653
- * headless element, and a styled subclass that sets `tier` renders the styled one
654
- * from the same template.
645
+ * headless element, and a styled subclass that sets `tier` renders the styled
646
+ * one from the same template.
655
647
  */
656
648
  renderListbox() {
657
649
  return html `<${this.tag('listbox')}
@@ -673,21 +665,20 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
673
665
  >
674
666
  <!-- The field's words are read off the options, and on the first
675
667
  render there are none: the slot has not been assigned yet, so a
676
- combobox with a value came up empty. Assignment changes no
668
+ combobox with a value comes up empty. Assignment changes no
677
669
  property, so nothing else would schedule the update that fixes
678
- it. Select was fixed for exactly this. -->
670
+ it. -->
679
671
  <slot @slotchange=${() => this.requestUpdate()}></slot>
680
672
  </${this.tag('listbox')}>`;
681
673
  }
682
674
  /**
683
675
  * One chosen option, as a tag, behind a seam the styled tier can move.
684
676
  *
685
- * A method rather than a fragment inline, so a tier above can render its own,
686
- * wrap this one, pass it a property the base does not know about, or leave it
687
- * out, without reimplementing the whole template to do any of them. The tag is
677
+ * A method rather than a fragment inline, so a tier above can replace, wrap
678
+ * or omit it without reimplementing the whole template. The tag is
688
679
  * interpolated rather than written, so `tier` resolves it: this renders the
689
- * headless element, and a styled subclass that sets `tier` renders the styled one
690
- * from the same template.
680
+ * headless element, and a styled subclass that sets `tier` renders the styled
681
+ * one from the same template.
691
682
  */
692
683
  renderTag(option) {
693
684
  return html `<${this.tag('tag')}
@@ -763,27 +754,15 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
763
754
  __decorate([
764
755
  property()
765
756
  ], HelixHeadlessCombobox.prototype, "autocomplete", void 0);
766
- __decorate([
767
- property()
768
- ], HelixHeadlessCombobox.prototype, "placeholder", void 0);
769
- __decorate([
770
- property({ type: Boolean })
771
- ], HelixHeadlessCombobox.prototype, "multiple", void 0);
772
757
  __decorate([
773
758
  property({ type: Boolean })
774
759
  ], HelixHeadlessCombobox.prototype, "creatable", void 0);
775
- __decorate([
776
- property({ type: Boolean })
777
- ], HelixHeadlessCombobox.prototype, "suggest", void 0);
778
760
  __decorate([
779
761
  property({ attribute: 'create-label' })
780
762
  ], HelixHeadlessCombobox.prototype, "createLabel", void 0);
781
763
  __decorate([
782
- property({ attribute: 'remove-label' })
783
- ], HelixHeadlessCombobox.prototype, "removeLabel", void 0);
784
- __decorate([
785
- property({ attribute: 'max-tags', type: Number })
786
- ], HelixHeadlessCombobox.prototype, "maxTags", void 0);
764
+ property({ attribute: 'empty-text' })
765
+ ], HelixHeadlessCombobox.prototype, "emptyText", void 0);
787
766
  __decorate([
788
767
  property({ attribute: 'list-label' })
789
768
  ], HelixHeadlessCombobox.prototype, "listLabel", void 0);
@@ -794,8 +773,20 @@ __decorate([
794
773
  property({ attribute: 'loading-text' })
795
774
  ], HelixHeadlessCombobox.prototype, "loadingText", void 0);
796
775
  __decorate([
797
- property({ attribute: 'empty-text' })
798
- ], HelixHeadlessCombobox.prototype, "emptyText", void 0);
776
+ property({ attribute: 'max-tags', type: Number })
777
+ ], HelixHeadlessCombobox.prototype, "maxTags", void 0);
778
+ __decorate([
779
+ property({ type: Boolean })
780
+ ], HelixHeadlessCombobox.prototype, "multiple", void 0);
781
+ __decorate([
782
+ property()
783
+ ], HelixHeadlessCombobox.prototype, "placeholder", void 0);
784
+ __decorate([
785
+ property({ attribute: 'remove-label' })
786
+ ], HelixHeadlessCombobox.prototype, "removeLabel", void 0);
787
+ __decorate([
788
+ property({ type: Boolean })
789
+ ], HelixHeadlessCombobox.prototype, "suggest", void 0);
799
790
  __decorate([
800
791
  state()
801
792
  ], HelixHeadlessCombobox.prototype, "typed", void 0);
@@ -59,14 +59,6 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
59
59
  * @csspart listbox-search-field - The field itself.
60
60
  */
61
61
  export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
62
- /**
63
- * Accessible name for the overlay, which has no visible heading.
64
- */
65
- label: string;
66
- /**
67
- * Shown in the field before anything is typed.
68
- */
69
- placeholder: string;
70
62
  /**
71
63
  * Words shown where the filter has matched nothing.
72
64
  */
@@ -79,6 +71,14 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
79
71
  * with: one key, said once.
80
72
  */
81
73
  hotkey: string;
74
+ /**
75
+ * Accessible name for the overlay, which has no visible heading.
76
+ */
77
+ label: string;
78
+ /**
79
+ * Shown in the field before anything is typed.
80
+ */
81
+ placeholder: string;
82
82
  /**
83
83
  * Whether the consumer put anything under the list.
84
84
  *
@@ -87,14 +87,6 @@ const parse = (hotkey) => {
87
87
  let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpen(HelixElement) {
88
88
  constructor() {
89
89
  super(...arguments);
90
- /**
91
- * Accessible name for the overlay, which has no visible heading.
92
- */
93
- this.label = 'Commands';
94
- /**
95
- * Shown in the field before anything is typed.
96
- */
97
- this.placeholder = 'Search commands';
98
90
  /**
99
91
  * Words shown where the filter has matched nothing.
100
92
  */
@@ -107,6 +99,14 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
107
99
  * with: one key, said once.
108
100
  */
109
101
  this.hotkey = 'mod+k';
102
+ /**
103
+ * Accessible name for the overlay, which has no visible heading.
104
+ */
105
+ this.label = 'Commands';
106
+ /**
107
+ * Shown in the field before anything is typed.
108
+ */
109
+ this.placeholder = 'Search commands';
110
110
  /**
111
111
  * Whether the consumer put anything under the list.
112
112
  *
@@ -199,6 +199,21 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
199
199
  this.requestOpen(false);
200
200
  }
201
201
  };
202
+ /*
203
+ * Keeps an option's own announcement inside the palette.
204
+ *
205
+ * Every option says `helix-select` when it is chosen, which is how the list
206
+ * hears it, and the options are light DOM children of this element, so it
207
+ * carries straight on out to the consumer: two selections for one command
208
+ * under one event name, told apart only by the target. The one this element
209
+ * dispatches has itself as the target and is let past.
210
+ *
211
+ * `stopImmediatePropagation`, not `stopPropagation`. The consumer's listener
212
+ * is on this same element, and stopping propagation only keeps an event off
213
+ * the *next* node, so every other listener already bound here still runs. The
214
+ * listbox hears it well before this, from inside the shadow root, so nothing
215
+ * this element needs is lost by ending it here.
216
+ */
202
217
  this.swallowOptionSelect = (event) => {
203
218
  if (event.target !== this) {
204
219
  event.stopImmediatePropagation();
@@ -208,25 +223,6 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
208
223
  get listbox() {
209
224
  return this.renderRoot?.querySelector('[part="listbox"]') ?? null;
210
225
  }
211
- /*
212
- * Keeps an option's own announcement inside the palette.
213
- *
214
- * Every option says `helix-select` when it is chosen, which is how the list
215
- * hears it, and the list does not stop it: the options are light DOM children
216
- * of this element, so it carried straight on out to the consumer. They then
217
- * heard two selections for one command, an option's and the palette's, under
218
- * one event name and distinguishable only by looking at the target.
219
- *
220
- * The one this element dispatches has itself as the target and is let past.
221
- * Combobox stops the listbox's `helix-before-change` for the same reason.
222
- *
223
- * `stopImmediatePropagation`, not `stopPropagation`. The consumer's listener
224
- * is on this same element, and stopping propagation only keeps an event off
225
- * the *next* node: every other listener already bound here still runs, so the
226
- * option's selection reached the consumer anyway. The listbox hears it well
227
- * before this, from inside the shadow root, so nothing this element needs is
228
- * lost by ending it here.
229
- */
230
226
  /**
231
227
  * The row under the keyboard, read from the attribute the listbox writes.
232
228
  *
@@ -332,18 +328,18 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
332
328
  return html `${this.renderDialog()}`;
333
329
  }
334
330
  };
335
- __decorate([
336
- property()
337
- ], HelixHeadlessCommand.prototype, "label", void 0);
338
- __decorate([
339
- property()
340
- ], HelixHeadlessCommand.prototype, "placeholder", void 0);
341
331
  __decorate([
342
332
  property({ attribute: 'empty-text' })
343
333
  ], HelixHeadlessCommand.prototype, "emptyText", void 0);
344
334
  __decorate([
345
335
  property()
346
336
  ], HelixHeadlessCommand.prototype, "hotkey", void 0);
337
+ __decorate([
338
+ property()
339
+ ], HelixHeadlessCommand.prototype, "label", void 0);
340
+ __decorate([
341
+ property()
342
+ ], HelixHeadlessCommand.prototype, "placeholder", void 0);
347
343
  __decorate([
348
344
  state()
349
345
  ], HelixHeadlessCommand.prototype, "footed", void 0);