@fusion.dev/helix-headless 0.174.0 → 0.176.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 +198 -59
- package/dist/app-header/root/app-header-root.d.ts +2 -1
- package/dist/app-header/root/app-header-root.js +6 -1
- package/dist/button/root/button-root.d.ts +6 -1
- package/dist/button/root/button-root.js +1 -0
- package/dist/command/root/command-root.d.ts +4 -2
- package/dist/command/root/command-root.js +1 -0
- package/dist/date-picker/root/date-picker-root.d.ts +6 -0
- package/dist/date-picker/root/date-picker-root.js +7 -1
- package/dist/dialog/form-method.d.ts +12 -0
- package/dist/dialog/form-method.js +13 -0
- package/dist/dialog/root/dialog-root.d.ts +1 -9
- package/dist/dialog/root/dialog-root.js +2 -11
- package/dist/drawer/root/drawer-root.d.ts +2 -0
- package/dist/drawer/root/drawer-root.js +6 -0
- package/dist/filter-input/index.d.ts +0 -1
- package/dist/filter-input/index.js +0 -1
- package/dist/filter-input/menu/filter-menu.d.ts +4 -0
- package/dist/filter-input/menu/index.d.ts +1 -0
- package/dist/filter-input/menu/index.js +1 -0
- package/dist/filter-input/root/filter-input-root.d.ts +26 -2
- package/dist/filter-input/root/filter-input-root.js +39 -5
- package/dist/icon/all/index.d.ts +1 -0
- package/dist/icon/all/index.js +4 -0
- package/dist/icon/root/icon-root.d.ts +9 -8
- package/dist/icon/root/icon-root.js +4 -2
- package/dist/icon/set.js +16 -2
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/lightbox/item/lightbox-item.d.ts +1 -0
- package/dist/lightbox/root/lightbox-root.d.ts +25 -5
- package/dist/lightbox/root/lightbox-root.js +33 -10
- package/dist/notifications/group/notification-group.js +2 -2
- package/dist/notifications/notification/notification.js +4 -5
- package/dist/notifications/root/notifications-root.d.ts +4 -3
- package/dist/notifications/root/notifications-root.js +1 -1
- package/dist/pagination/root/pagination-root.d.ts +2 -1
- package/dist/pagination/root/pagination-root.js +6 -1
- package/dist/tooltip/root/tooltip-root.d.ts +5 -2
- package/dist/tooltip/root/tooltip-root.js +11 -11
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +102 -72
- package/types/vue.d.ts +13 -14
package/custom-elements.json
CHANGED
|
@@ -42953,7 +42953,7 @@
|
|
|
42953
42953
|
"declarations": [
|
|
42954
42954
|
{
|
|
42955
42955
|
"kind": "class",
|
|
42956
|
-
"description": "The list is a `Listbox`, which handles filtering, the empty state, the match\nhighlight, `aria-activedescendant`, scrolling an option into view, and moving\nbetween options with the keyboard. The palette adds a dialog and a hotkey\nthat opens it.\n\nThe palette keeps no value. It is not a form control and submits nothing.\nChoosing an option dispatches `helix-select` once. To remember the last\ncommand, store it yourself. An option with `href` is a link to a page, which\nthe browser follows once the palette has closed.\n\nThe hotkey listener is on the document, so the hotkey works from anywhere on\nthe page, including inside another control's text field, whether or not the\npalette is open. `mod` means Command on a Mac and Control elsewhere, so you\nwrite one binding.\n\nWith `inline`, the palette is drawn in the page with no dialog, as a search\nover a list that is always shown.\n\n**Pages.** A command can open a page of commands of its own, as a palette\noffers \"Change theme\" and then the themes. Give the option `opens` with a\nname, and slot the page's commands as `page:` and that name:\n\n```html\n<helix-command>\n <helix-option value=\"theme\" opens=\"theme\">Change theme</helix-option>\n <helix-option value=\"dark\" slot=\"page:theme\">Dark</helix-option>\n <helix-option value=\"light\" slot=\"page:theme\">Light</helix-option>\n</helix-command>\n```\n\nChoosing the opener says `helix-select` with its value, and canceling it\nkeeps the page that is shown. The list then shows the page, named by the\nopener's words, and a screen reader hears those words. Backspace in an empty\nfilter goes back, and a screen reader hears the name of the page it goes\nback to. `page` says which page is shown.\n\nThe filter is cleared when the palette closes, so each opening starts from\nthe full list. Combobox and Select do the same. As typing narrows the list, a\nscreen reader hears how many commands are left, such as \"3 commands\".\n\n**Keyboard.** Focus goes to the filter field as the palette opens,
|
|
42956
|
+
"description": "The list is a `Listbox`, which handles filtering, the empty state, the match\nhighlight, `aria-activedescendant`, scrolling an option into view, and moving\nbetween options with the keyboard. The palette adds a dialog and a hotkey\nthat opens it.\n\nThe palette keeps no value. It is not a form control and submits nothing.\nChoosing an option dispatches `helix-select` once. To remember the last\ncommand, store it yourself. An option with `href` is a link to a page, which\nthe browser follows once the palette has closed.\n\nThe hotkey listener is on the document, so the hotkey works from anywhere on\nthe page, including inside another control's text field, whether or not the\npalette is open. `mod` means Command on a Mac and Control elsewhere, so you\nwrite one binding.\n\nWith `inline`, the palette is drawn in the page with no dialog, as a search\nover a list that is always shown.\n\n**Pages.** A command can open a page of commands of its own, as a palette\noffers \"Change theme\" and then the themes. Give the option `opens` with a\nname, and slot the page's commands as `page:` and that name:\n\n```html\n<helix-command>\n <helix-option value=\"theme\" opens=\"theme\">Change theme</helix-option>\n <helix-option value=\"dark\" slot=\"page:theme\">Dark</helix-option>\n <helix-option value=\"light\" slot=\"page:theme\">Light</helix-option>\n</helix-command>\n```\n\nChoosing the opener says `helix-select` with its value, and canceling it\nkeeps the page that is shown. The list then shows the page, named by the\nopener's words, and a screen reader hears those words. Backspace in an empty\nfilter goes back, and a screen reader hears the name of the page it goes\nback to. `page` says which page is shown.\n\nThe filter is cleared when the palette closes, so each opening starts from\nthe full list. Combobox and Select do the same. As typing narrows the list, a\nscreen reader hears how many commands are left, such as \"3 commands\".\n\n**Keyboard.** Focus goes to the filter field as the palette opens, with no\ncommand highlighted, as in React Aria's Autocomplete, so Enter runs nothing\nuntil you type or press Down. Typing highlights the first command left, and\nthe highlight moves through the commands while you type.\n\n| Key | What it does |\n|---|---|\n| `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |\n| Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |\n| Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |\n| Home, End | Move the caret in the filter field. With `home-end=\"list\"`, move the highlight to the first or the last command. |\n| Left, Right | Move the caret in the filter field. |\n| Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |\n| Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |\n| Backspace | In an empty filter on a page, goes back to the page before. |\n| Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. |\n| Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |\n\n**ARIA.** The palette is a modal `dialog` named by `label`, or with\n`inline` no dialog at all. Inside it the filter field is a text field with\n`aria-autocomplete=\"list\"`, `aria-controls` on the list, and\n`aria-activedescendant` on the highlighted command, as the field of React\nAria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and\nthe loading text are said in a polite live region.",
|
|
42957
42957
|
"name": "HelixHeadlessCommand",
|
|
42958
42958
|
"cssParts": [
|
|
42959
42959
|
{
|
|
@@ -55485,7 +55485,7 @@
|
|
|
55485
55485
|
"text": "Date"
|
|
55486
55486
|
},
|
|
55487
55487
|
"privacy": "private",
|
|
55488
|
-
"description": "The date the tab stop sits on, which is where the arrows move from.\n\nIt has to be a date the grid actually renders, so the month is compared\nwith its year. Comparing the month alone puts the stop on the same date a\nyear away, which is rendered nowhere, and the grid is left with no tab stop\nat all and no way into it from the keyboard.\n\nEach candidate is tested in turn rather than the first one winning\noutright. Where the last date focused is in some other month, the selected\ndate still holds the stop, then today, as the APG date picker and React\nAria's calendar put it, and only with none of them in view does it fall\nto the first of the month. Measured before today was a candidate: a\ncalendar with no value opened on October 5 with its stop on \"Thursday,\nOctober 1\".",
|
|
55488
|
+
"description": "The date the tab stop sits on, which is where the arrows move from.\n\nIt has to be a date the grid actually renders, so the month is compared\nwith its year. Comparing the month alone puts the stop on the same date a\nyear away, which is rendered nowhere, and the grid is left with no tab stop\nat all and no way into it from the keyboard.\n\nEach candidate is tested in turn rather than the first one winning\noutright. Where the last date focused is in some other month, the selected\ndate still holds the stop, then today, as the APG date picker and React\nAria's calendar put it, and only with none of them in view does it fall\nto the first of the month. Measured before today was a candidate: a\ncalendar with no value opened on October 5 with its stop on \"Thursday,\nOctober 1\".\n\nToday counts only where it can be chosen, and the fallback is the first\nday of the month that can, so a reader tabbing in lands on a date they can\npick. Measured before: with `min=\"2026-03-03\"`, the stop sat on \"Sunday,\nMarch 1, 2026\", unavailable. A month with nothing to choose keeps its\nfirst day, so the grid still has a way in.",
|
|
55489
55489
|
"readonly": true
|
|
55490
55490
|
},
|
|
55491
55491
|
{
|
|
@@ -58816,6 +58816,46 @@
|
|
|
58816
58816
|
}
|
|
58817
58817
|
]
|
|
58818
58818
|
},
|
|
58819
|
+
{
|
|
58820
|
+
"kind": "javascript-module",
|
|
58821
|
+
"path": "src/dialog/form-method.ts",
|
|
58822
|
+
"declarations": [
|
|
58823
|
+
{
|
|
58824
|
+
"kind": "function",
|
|
58825
|
+
"name": "closeOnDialogSubmit",
|
|
58826
|
+
"return": {
|
|
58827
|
+
"type": {
|
|
58828
|
+
"text": "void"
|
|
58829
|
+
}
|
|
58830
|
+
},
|
|
58831
|
+
"parameters": [
|
|
58832
|
+
{
|
|
58833
|
+
"name": "event",
|
|
58834
|
+
"type": {
|
|
58835
|
+
"text": "SubmitEvent"
|
|
58836
|
+
}
|
|
58837
|
+
},
|
|
58838
|
+
{
|
|
58839
|
+
"name": "close",
|
|
58840
|
+
"type": {
|
|
58841
|
+
"text": "(returnValue?: string) => void"
|
|
58842
|
+
}
|
|
58843
|
+
}
|
|
58844
|
+
],
|
|
58845
|
+
"description": "Closes a shadow `<dialog>` on a `<form method=\"dialog\">` submit slotted into\nit, the way the platform closes its own. `Dialog` and `Drawer` share it.\n\n**The platform cannot find the dialog from the form.** A submit with the\n`dialog` method closes the nearest `<dialog>` ancestor, and a slotted form's\nancestors are the light DOM, where there is none. So the submit is read on\nthe host, and the submitter's `value` is the `returnValue`, as it would be.\nA form inside a `<dialog>` of its own, or with any other method, is left to\nthe platform."
|
|
58846
|
+
}
|
|
58847
|
+
],
|
|
58848
|
+
"exports": [
|
|
58849
|
+
{
|
|
58850
|
+
"kind": "js",
|
|
58851
|
+
"name": "closeOnDialogSubmit",
|
|
58852
|
+
"declaration": {
|
|
58853
|
+
"name": "closeOnDialogSubmit",
|
|
58854
|
+
"module": "src/dialog/form-method.ts"
|
|
58855
|
+
}
|
|
58856
|
+
}
|
|
58857
|
+
]
|
|
58858
|
+
},
|
|
58819
58859
|
{
|
|
58820
58860
|
"kind": "javascript-module",
|
|
58821
58861
|
"path": "src/dialog/index.ts",
|
|
@@ -59079,7 +59119,7 @@
|
|
|
59079
59119
|
"name": "handleSubmit",
|
|
59080
59120
|
"privacy": "private",
|
|
59081
59121
|
"readonly": true,
|
|
59082
|
-
"description": "A `<form method=\"dialog\">` slotted into the dialog
|
|
59122
|
+
"description": "A `<form method=\"dialog\">` slotted into the dialog closes it."
|
|
59083
59123
|
},
|
|
59084
59124
|
{
|
|
59085
59125
|
"kind": "field",
|
|
@@ -62236,6 +62276,13 @@
|
|
|
62236
62276
|
},
|
|
62237
62277
|
"description": "Describes the panel by the words at the start of its body, where nothing\nelse describes it, as `Dialog` does. An `aria-describedby` on the host\ncomes first."
|
|
62238
62278
|
},
|
|
62279
|
+
{
|
|
62280
|
+
"kind": "field",
|
|
62281
|
+
"name": "handleSubmit",
|
|
62282
|
+
"privacy": "private",
|
|
62283
|
+
"readonly": true,
|
|
62284
|
+
"description": "A `<form method=\"dialog\">` slotted into the drawer closes it, as in `Dialog`."
|
|
62285
|
+
},
|
|
62239
62286
|
{
|
|
62240
62287
|
"kind": "method",
|
|
62241
62288
|
"name": "renderDismissIcon",
|
|
@@ -69237,14 +69284,6 @@
|
|
|
69237
69284
|
"module": "src/filter-input/grammar.js"
|
|
69238
69285
|
}
|
|
69239
69286
|
},
|
|
69240
|
-
{
|
|
69241
|
-
"kind": "js",
|
|
69242
|
-
"name": "*",
|
|
69243
|
-
"declaration": {
|
|
69244
|
-
"name": "*",
|
|
69245
|
-
"module": "src/filter-input/menu/filter-menu.js"
|
|
69246
|
-
}
|
|
69247
|
-
},
|
|
69248
69287
|
{
|
|
69249
69288
|
"kind": "js",
|
|
69250
69289
|
"name": "*",
|
|
@@ -69269,7 +69308,7 @@
|
|
|
69269
69308
|
"declarations": [
|
|
69270
69309
|
{
|
|
69271
69310
|
"kind": "class",
|
|
69272
|
-
"description": "Reads the `FilterField` declarations inside it and renders a two-level menu:\nthe fields, and under each field its operators and values. The menu does not\ninterpret what a field means.\n\n```html\n<helix-headless-filter-menu label=\"Filter\">\n <helix-headless-filter-field name=\"disposition\" label=\"Disposition\">\n <helix-headless-option value=\"refunded\">Refunded</helix-headless-option>\n </helix-headless-filter-field>\n</helix-headless-filter-menu>\n```\n\nThat field declares no operators, so it offers `is any of` and `is none of`,\nthe two the typed grammar supports. The menu and the typed text offer the\nsame filters because both read `FilterField.vocabulary`. Declare other\noperators on the field when you need them.\n\nTicking a value applies the filter immediately. There is no Apply button.\nEach tick fires `helix-facet` with the field's whole set of values, so\nresults narrow as the user works. Unticking the last value fires an empty\nset, which is your cue to remove the chip.\n\nThe operator is chosen in the menu. `helix-facet` carries an empty\n`operatorLabel` when the operator is the field's default, which is the value\na chip's `operator-label` expects, so the operator segment appears only for a\nnon-default choice. The menu decides this because it is the only element that\nreads both the field and its operators.\n\nAn operator's `arity` sets what appears under it:\n\n- `arity=\"none\"`, such as `is empty` or `is set`, offers no values and clears\n any that were ticked. The operator is the whole filter.\n- `arity=\"one\"` offers the values as a single choice. Pressing another value\n replaces the choice, and pressing the chosen value clears it.\n\n`helix-facet` includes `arity`, so you can tell an empty filter from no\nfilter.\n\nThe menu applies nothing. The chips are your markup and the rows are your\ndata, so the menu fires the event and leaves the change to you, as\n`Notification` does for a read. Call `preventDefault()` on `helix-facet` to\ncancel the change.",
|
|
69311
|
+
"description": "Reads the `FilterField` declarations inside it and renders a two-level menu:\nthe fields, and under each field its operators and values. The menu does not\ninterpret what a field means.\n\n```html\n<helix-headless-filter-menu label=\"Filter\">\n <helix-headless-filter-field name=\"disposition\" label=\"Disposition\">\n <helix-headless-option value=\"refunded\">Refunded</helix-headless-option>\n </helix-headless-filter-field>\n</helix-headless-filter-menu>\n```\n\nThat field declares no operators, so it offers `is any of` and `is none of`,\nthe two the typed grammar supports. The menu and the typed text offer the\nsame filters because both read `FilterField.vocabulary`. Declare other\noperators on the field when you need them.\n\nTicking a value applies the filter immediately. There is no Apply button.\nEach tick fires `helix-facet` with the field's whole set of values, so\nresults narrow as the user works. Unticking the last value fires an empty\nset, which is your cue to remove the chip.\n\nThe operator is chosen in the menu. `helix-facet` carries an empty\n`operatorLabel` when the operator is the field's default, which is the value\na chip's `operator-label` expects, so the operator segment appears only for a\nnon-default choice. The menu decides this because it is the only element that\nreads both the field and its operators.\n\nAn operator's `arity` sets what appears under it:\n\n- `arity=\"none\"`, such as `is empty` or `is set`, offers no values and clears\n any that were ticked. The operator is the whole filter.\n- `arity=\"one\"` offers the values as a single choice. Pressing another value\n replaces the choice, and pressing the chosen value clears it.\n\n`helix-facet` includes `arity`, so you can tell an empty filter from no\nfilter.\n\nThe menu applies nothing. The chips are your markup and the rows are your\ndata, so the menu fires the event and leaves the change to you, as\n`Notification` does for a read. Call `preventDefault()` on `helix-facet` to\ncancel the change.\n\nImported from its own entry, `@fusion.dev/helix-headless/filter-input/menu`, which registers\nit with the `Menu` it draws its pages with. The family's entry leaves it out,\nso a field without a picker does not carry `Menu`.",
|
|
69273
69312
|
"name": "HelixHeadlessFilterMenu",
|
|
69274
69313
|
"cssParts": [
|
|
69275
69314
|
{
|
|
@@ -69952,6 +69991,21 @@
|
|
|
69952
69991
|
}
|
|
69953
69992
|
]
|
|
69954
69993
|
},
|
|
69994
|
+
{
|
|
69995
|
+
"kind": "javascript-module",
|
|
69996
|
+
"path": "src/filter-input/menu/index.ts",
|
|
69997
|
+
"declarations": [],
|
|
69998
|
+
"exports": [
|
|
69999
|
+
{
|
|
70000
|
+
"kind": "js",
|
|
70001
|
+
"name": "*",
|
|
70002
|
+
"declaration": {
|
|
70003
|
+
"name": "*",
|
|
70004
|
+
"module": "src/filter-input/menu/filter-menu.js"
|
|
70005
|
+
}
|
|
70006
|
+
}
|
|
70007
|
+
]
|
|
70008
|
+
},
|
|
69955
70009
|
{
|
|
69956
70010
|
"kind": "javascript-module",
|
|
69957
70011
|
"path": "src/filter-input/operator/filter-operator.ts",
|
|
@@ -70437,7 +70491,7 @@
|
|
|
70437
70491
|
"declarations": [
|
|
70438
70492
|
{
|
|
70439
70493
|
"kind": "class",
|
|
70440
|
-
"description": "Tokens are your own elements, slotted in. A filter can be a facet with a\nprefix, a saved query, or a range, and these belong to your model, so the\nelement does not render tokens from a list of strings. Removing a token is a\nrequest the element fires, and you apply it. Combobox works the other way:\nits tokens show a selection it owns, drawn from the options it was given.\n\n`value` is the typed text. Every keystroke fires `input` with the text on the\nelement, so a table can narrow as the user types. Backspace in an empty field\nfires `helix-dismiss` on the last token, the same event its remove control\nfires, so one handler covers the pointer and the keyboard.\n\n**What a form receives.** The text under `name`, and then one more entry\nunder `name` for each token, in the order the tokens stand:\n\n| Token | Entry |\n|---|---|\n| Any element with a `value` attribute | The value as written: `saved:mine` |\n| `FilterChip` with `name` and values | `status:open,pending` |\n| The same, with `operator=\"none\"` (what a typed `-status:` makes) | `-status:open,pending` |\n| The same, with any other `operator` except `any` | `created[after]:2024` |\n| A token with neither | Nothing |\n\nThe values are the chip's text outside its `field` and `operator` slots,\nwith the spaces around each comma removed. A server splits an entry at its\nfirst colon, reads a leading `-` as the negation, and reads a word in\nbrackets before the colon as the comparison.\n\n**Keyboard.** Focus stays in the text, which is the field's one tab stop. The\ntext names the highlighted suggestion as its `aria-activedescendant`, and the\narrow keys reach the tokens.\n\n| Key | What it does |\n|---|---|\n| Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. |\n| Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. |\n| Home, End | Highlights the first or the last suggestion while the panel is open. |\n| Escape | Closes the panel and stops there, so a dialog around the field stays open. |\n| Backspace | In an empty field, asks the last token to go. |\n| Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. |\n| Left, Right on a token | Move between the tokens, and past the last back to the text. |\n| Delete, Backspace on a token | Asks the token to go. |\n\n**Typed filters.** The field parses only the fields you declare. Write\n`FilterField` elements, usually inside the `FilterMenu` slotted into `start`,\nso the picker and the text share one set. On Enter, the field reads the text\nagainst them
|
|
70494
|
+
"description": "Tokens are your own elements, slotted in. A filter can be a facet with a\nprefix, a saved query, or a range, and these belong to your model, so the\nelement does not render tokens from a list of strings. Removing a token is a\nrequest the element fires, and you apply it. Combobox works the other way:\nits tokens show a selection it owns, drawn from the options it was given.\n\n`value` is the typed text. Every keystroke fires `input` with the text on the\nelement, so a table can narrow as the user types. Backspace in an empty field\nfires `helix-dismiss` on the last token, the same event its remove control\nfires, so one handler covers the pointer and the keyboard.\n\n**What a form receives.** The text under `name`, and then one more entry\nunder `name` for each token, in the order the tokens stand:\n\n| Token | Entry |\n|---|---|\n| Any element with a `value` attribute | The value as written: `saved:mine` |\n| `FilterChip` with `name` and values | `status:open,pending` |\n| The same, with `operator=\"none\"` (what a typed `-status:` makes) | `-status:open,pending` |\n| The same, with any other `operator` except `any` | `created[after]:2024` |\n| A token with neither | Nothing |\n\nThe values are the chip's text outside its `field` and `operator` slots,\nwith the spaces around each comma removed. A server splits an entry at its\nfirst colon, reads a leading `-` as the negation, and reads a word in\nbrackets before the colon as the comparison.\n\n**Keyboard.** Focus stays in the text, which is the field's one tab stop. The\ntext names the highlighted suggestion as its `aria-activedescendant`, and the\narrow keys reach the tokens.\n\n| Key | What it does |\n|---|---|\n| Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. |\n| Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. |\n| Home, End | Highlights the first or the last suggestion while the panel is open. |\n| Escape | Closes the panel and stops there, so a dialog around the field stays open. With the panel closed, empties the text. In an empty field, does nothing, so the page hears it. |\n| Backspace | In an empty field, asks the last token to go. |\n| Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. |\n| Left, Right on a token | Move between the tokens, and past the last back to the text. |\n| Delete, Backspace on a token | Asks the token to go. |\n\n**Typed filters.** The field parses only the fields you declare. Write\n`FilterField` elements, usually inside the `FilterMenu` slotted into `start`,\nso the picker and the text share one set. On Enter, the field reads the text\nagainst them, and a paste is read the same way as soon as it lands.\n`disposition:refunded,settled` and `-disposition:refunded` fire\n`helix-facet` exactly as ticking those values in the picker would, and the\nparsed text is removed. Everything else stays, so `refund tuesday\ndisposition:settled` is a filter and a search at once. Helix defines the\npunctuation and you define every word. `grammar.ts` has the full rule, so\nread it before you rely on it. A field with no `FilterField` in it parses\nnothing.\n\nA field whose values cannot be listed, such as `assignee:ada`, goes directly\ninside this element, outside the menu. It is not assigned to a slot, so\nnothing draws it and the menu has no page for it, and the grammar still reads\nit.\n\n**The picker has an entry of its own.** `FilterMenu` draws its pages with\n`Menu`, which a field without a picker does not need, so this family's entry\nleaves it out. A page that writes one imports\n`@fusion.dev/helix/filter-input/menu` as well, and a picker written without it\nis reported once the page has loaded, with the entry to add.\n\n**Suggestions.** Slot options into `suggestions` and the field shows them,\nmoves through them with the arrow keys, and presses one on Enter. The option\nfires its own `helix-select`, and you decide what choosing it means. Keys\nbefore a colon and values after it use the same panel with different\ncontents. `filter-suggestions` narrows the panel to the options whose words\nhold the term at the caret, after its colon, ignoring case and accents, and\nhides the rest. `readFilterText` is exported so you can narrow it yourself\nagainst partly typed text. While the panel is open, a reader hears how many\nsuggestions it offers. The panel opens when it has options and closes when it has\nnone, and a choice does not close it, so after picking a key you see its\nvalues next. Use `selectionStart` and `setSelectionRange` to write a\ncompletion back and put the caret after it, or the next parse reads the wrong\nterm.\n\n**State.** Three things have three different owners:\n\n- `value` is the text. The user types, the element applies it, and `input`\n reports it. Setting `value` seeds or corrects the text, and the next\n keystroke overwrites it, even in React. To control the value, cancel\n `helix-before-change` and write the value you want, as with every field in\n this library. `default-value` seeds the field.\n- `open` is the suggestions panel. Cancel `helix-before-open` or\n `helix-before-close` to control it, and use `default-open` to seed it.\n- Tokens are your elements in a slot and hold no state. A token goes when you\n remove it from your markup after `helix-dismiss`. A `FilterChip` naming a\n declared field works differently, because the picker holds what is ticked\n and removing the chip alone would leave its value ticked in the hidden\n menu. Its dismissal is treated as the field being filtered by nothing, so\n it fires `helix-facet` like every other change, and the chip goes when the\n filter goes. Set `chips` and the field adds, updates, and removes those\n chips itself, from every `helix-facet` you do not cancel.",
|
|
70441
70495
|
"name": "HelixHeadlessFilterInput",
|
|
70442
70496
|
"cssParts": [
|
|
70443
70497
|
{
|
|
@@ -70964,7 +71018,7 @@
|
|
|
70964
71018
|
"privacy": "private",
|
|
70965
71019
|
"return": {
|
|
70966
71020
|
"type": {
|
|
70967
|
-
"text": "
|
|
71021
|
+
"text": "FieldPicker | null"
|
|
70968
71022
|
}
|
|
70969
71023
|
},
|
|
70970
71024
|
"parameters": [
|
|
@@ -71027,7 +71081,7 @@
|
|
|
71027
71081
|
"name": "handleDismiss",
|
|
71028
71082
|
"privacy": "private",
|
|
71029
71083
|
"readonly": true,
|
|
71030
|
-
"description": "A chip asking to go, answered as the filter going.\n\n**Taken rather than passed on, and only for a chip naming a declared\nfield.** Left alone, a dismissed chip removed itself and told the picker\nnothing, so the menu went on showing the value ticked and the reader's next\npress on it read as *unticking*: they pressed `Refunded` and nothing came\nback. Turning the request into `apply(field, [])` puts it down the one road\nevery other filter takes, so the chip goes because the filter went. A\nconsumer refusing that `helix-facet` keeps both, which is the answer a\nrefusal should give.\n\nEverything else in the row is untouched: a plain `Tag`, or a chip for\nsomething no `FilterField` declares, is the consumer's to answer."
|
|
71084
|
+
"description": "A chip asking to go, answered as the filter going.\n\n**Taken rather than passed on, and only for a chip naming a declared\nfield.** Left alone, a dismissed chip removed itself and told the picker\nnothing, so the menu went on showing the value ticked and the reader's next\npress on it read as *unticking*: they pressed `Refunded` and nothing came\nback. Turning the request into `apply(field, [])` puts it down the one road\nevery other filter takes, so the chip goes because the filter went. A\nconsumer refusing that `helix-facet` keeps both, which is the answer a\nrefusal should give.\n\nEverything else in the row is untouched: a plain `Tag`, or a chip for\nsomething no `FilterField` declares, is the consumer's to answer.\n\n**Heard on the way down, in the capture phase**, because the chip is a\nchild of this element and its request passes here before it reaches the\nchip's listeners or comes back up. Stopped there, no listener on the chip,\non this element or above it hears it. Heard on the way up, `stopPropagation`\nkept it from the ancestors and not from this element's other listeners, so a\nconsumer listening on the field heard `helix-dismiss` as well as the\n`helix-facet` that answered it."
|
|
71031
71085
|
},
|
|
71032
71086
|
{
|
|
71033
71087
|
"kind": "method",
|
|
@@ -71169,6 +71223,17 @@
|
|
|
71169
71223
|
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
71170
71224
|
}
|
|
71171
71225
|
},
|
|
71226
|
+
{
|
|
71227
|
+
"kind": "method",
|
|
71228
|
+
"name": "auditPicker",
|
|
71229
|
+
"privacy": "private",
|
|
71230
|
+
"return": {
|
|
71231
|
+
"type": {
|
|
71232
|
+
"text": "void"
|
|
71233
|
+
}
|
|
71234
|
+
},
|
|
71235
|
+
"description": "Says so when a picker is written in the field and never registered.\n\nThe picker has an entry of its own, so a page that imports only the field\ngets an inert element there: a trigger that opens nothing. Asked once the\npage has loaded and painted, so an entry a later module imports is not\ntaken for a missing one."
|
|
71236
|
+
},
|
|
71172
71237
|
{
|
|
71173
71238
|
"kind": "method",
|
|
71174
71239
|
"name": "markActive",
|
|
@@ -81517,6 +81582,21 @@
|
|
|
81517
81582
|
}
|
|
81518
81583
|
]
|
|
81519
81584
|
},
|
|
81585
|
+
{
|
|
81586
|
+
"kind": "javascript-module",
|
|
81587
|
+
"path": "src/icon/all/index.ts",
|
|
81588
|
+
"declarations": [],
|
|
81589
|
+
"exports": [
|
|
81590
|
+
{
|
|
81591
|
+
"kind": "js",
|
|
81592
|
+
"name": "*",
|
|
81593
|
+
"declaration": {
|
|
81594
|
+
"name": "*",
|
|
81595
|
+
"module": "src/icon/index.js"
|
|
81596
|
+
}
|
|
81597
|
+
}
|
|
81598
|
+
]
|
|
81599
|
+
},
|
|
81520
81600
|
{
|
|
81521
81601
|
"kind": "javascript-module",
|
|
81522
81602
|
"path": "src/icon/fetch.ts",
|
|
@@ -81823,7 +81903,7 @@
|
|
|
81823
81903
|
"declarations": [
|
|
81824
81904
|
{
|
|
81825
81905
|
"kind": "class",
|
|
81826
|
-
"description": "The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph\nrenders its full inner markup, because most icons are several elements, each\nwith its own stroke and fill.\n\nThe markup is generated at build time from SVG files in this repository and\nnever comes from user input, so rendering it with `unsafeSVG` is safe.\n\nThe `<svg>` carries `fill=\"currentColor\"`. The generator keeps only the inner\nmarkup, and Phosphor sets its fill on the root tag that the generator\ndiscards. Without it, the 65 solid glyphs fall back to black and disappear on\na dark background. Shapes that set their own `fill` or `stroke` are\nunaffected.\n\n**A name is looked up in a registry.** The family's entry registers the\nwhole set, so any name in it draws. The element's own entry,\n`@fusion.dev/helix-headless/icon/root`, registers none: a page that imports\nit and calls `registerIcons` with the glyphs it names ships those and no\nothers. `registerIconLibrary` resolves names under a prefix of your own,\nsuch as `lucide:camera`, at once or later, and the element fires `load` when\na glyph that came later is drawn. A glyph registered after the element\nrendered is drawn then.\n\n**Or point `src` at an SVG file**, such as `src=\"/icons/rocket.svg\"`, and\nthe element fetches it and draws its shapes in `currentColor` where the file\ndoes not color them. A file is fetched once a page, however many icons name\nit, and `load` fires when it is drawn. Scripts, event handlers and\n`javascript:` links in the file are taken out before it is drawn. A server\nfetches nothing, so a served icon with a `src` is drawn once the script\nruns.\n\nA name with no match, or a `src` that is no SVG, renders nothing, and the\nelement fires `error`, so a typo in a name can be heard. It waits until the page has loaded and painted\nfirst, so a library a later module registers is not taken for a typo.\n\nAn icon is decorative by default and hidden from assistive technology. Set\n`label` only when the icon is the only carrier of meaning, such as in a\nbutton with no text. An `aria-label` on the element works too: the element\nis then an image with that name.\n\n**A decorative icon that is all a control holds is reported.** In a\ndevelopment build, a button or a link whose only content is an icon with no\n`label`, and which has no name of its own, warns `missing-name` once,\nthrough the runtime channel every Helix warning uses.",
|
|
81906
|
+
"description": "The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph\nrenders its full inner markup, because most icons are several elements, each\nwith its own stroke and fill.\n\nThe markup is generated at build time from SVG files in this repository and\nnever comes from user input, so rendering it with `unsafeSVG` is safe.\n\nThe `<svg>` carries `fill=\"currentColor\"`. The generator keeps only the inner\nmarkup, and Phosphor sets its fill on the root tag that the generator\ndiscards. Without it, the 65 solid glyphs fall back to black and disappear on\na dark background. Shapes that set their own `fill` or `stroke` are\nunaffected.\n\n**A name is looked up in a registry.** The family's entry registers a small\nset: the four carets, `arrow-left`, `arrow-right`, `check`, `x`, `plus`,\n`minus`, `magnifying-glass`, `info` and `warning`. `icon/all` registers the\nwhole set, so any name in it draws, and a name that resolves to nothing\nsays to import it. The element's own entry,\n`@fusion.dev/helix-headless/icon/root`, registers none: a page that imports\nit and calls `registerIcons` with the glyphs it names ships those and no\nothers. `registerIconLibrary` resolves names under a prefix of your own,\nsuch as `lucide:camera`, at once or later, and the element fires `load` when\na glyph that came later is drawn. A glyph registered after the element\nrendered is drawn then.\n\n**Or point `src` at an SVG file**, such as `src=\"/icons/rocket.svg\"`, and\nthe element fetches it and draws its shapes in `currentColor` where the file\ndoes not color them. A file is fetched once a page, however many icons name\nit, and `load` fires when it is drawn. Scripts, event handlers and\n`javascript:` links in the file are taken out before it is drawn. A server\nfetches nothing, so a served icon with a `src` is drawn once the script\nruns.\n\nA name with no match, or a `src` that is no SVG, renders nothing, and the\nelement fires `error`, so a typo in a name can be heard. It waits until the page has loaded and painted\nfirst, so a library a later module registers is not taken for a typo.\n\nAn icon is decorative by default and hidden from assistive technology. Set\n`label` only when the icon is the only carrier of meaning, such as in a\nbutton with no text. An `aria-label` on the element works too: the element\nis then an image with that name.\n\n**A decorative icon that is all a control holds is reported.** In a\ndevelopment build, a button or a link whose only content is an icon with no\n`label`, and which has no name of its own, warns `missing-name` once,\nthrough the runtime channel every Helix warning uses.",
|
|
81827
81907
|
"name": "HelixHeadlessIcon",
|
|
81828
81908
|
"cssParts": [
|
|
81829
81909
|
{
|
|
@@ -81867,7 +81947,7 @@
|
|
|
81867
81947
|
"text": "string"
|
|
81868
81948
|
},
|
|
81869
81949
|
"default": "''",
|
|
81870
|
-
"description": "The name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index
|
|
81950
|
+
"description": "The name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index that no\nbundler can shake. The family's entry indexes a small set, `icon/all`\nindexes the whole set at 15 kB, and `icon/root` indexes nothing, for a\npage that registers the glyphs it names or hands over the value instead.\n\nA name written `prefix:name` asks the library registered under that\nprefix.",
|
|
81871
81951
|
"attribute": "name"
|
|
81872
81952
|
},
|
|
81873
81953
|
{
|
|
@@ -82418,7 +82498,7 @@
|
|
|
82418
82498
|
"text": "string"
|
|
82419
82499
|
},
|
|
82420
82500
|
"default": "''",
|
|
82421
|
-
"description": "The name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index
|
|
82501
|
+
"description": "The name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index that no\nbundler can shake. The family's entry indexes a small set, `icon/all`\nindexes the whole set at 15 kB, and `icon/root` indexes nothing, for a\npage that registers the glyphs it names or hands over the value instead.\n\nA name written `prefix:name` asks the library registered under that\nprefix.",
|
|
82422
82502
|
"fieldName": "name"
|
|
82423
82503
|
},
|
|
82424
82504
|
{
|
|
@@ -83729,6 +83809,14 @@
|
|
|
83729
83809
|
"module": "src/filter-input/index.js"
|
|
83730
83810
|
}
|
|
83731
83811
|
},
|
|
83812
|
+
{
|
|
83813
|
+
"kind": "js",
|
|
83814
|
+
"name": "*",
|
|
83815
|
+
"declaration": {
|
|
83816
|
+
"name": "*",
|
|
83817
|
+
"module": "src/filter-input/menu/index.js"
|
|
83818
|
+
}
|
|
83819
|
+
},
|
|
83732
83820
|
{
|
|
83733
83821
|
"kind": "js",
|
|
83734
83822
|
"name": "*",
|
|
@@ -83758,7 +83846,7 @@
|
|
|
83758
83846
|
"name": "*",
|
|
83759
83847
|
"declaration": {
|
|
83760
83848
|
"name": "*",
|
|
83761
|
-
"module": "src/icon/index.js"
|
|
83849
|
+
"module": "src/icon/all/index.js"
|
|
83762
83850
|
}
|
|
83763
83851
|
},
|
|
83764
83852
|
{
|
|
@@ -88241,7 +88329,7 @@
|
|
|
88241
88329
|
"text": "string"
|
|
88242
88330
|
},
|
|
88243
88331
|
"default": "''",
|
|
88244
|
-
"description": "The item's identifier. The root compares its `active` value against it.",
|
|
88332
|
+
"description": "The item's identifier. The root compares its `active` value against it.\nWithout one, the item is named by its place in the set, counted from 1.",
|
|
88245
88333
|
"attribute": "value"
|
|
88246
88334
|
},
|
|
88247
88335
|
{
|
|
@@ -88626,7 +88714,7 @@
|
|
|
88626
88714
|
"text": "string"
|
|
88627
88715
|
},
|
|
88628
88716
|
"default": "''",
|
|
88629
|
-
"description": "The item's identifier. The root compares its `active` value against it.",
|
|
88717
|
+
"description": "The item's identifier. The root compares its `active` value against it.\nWithout one, the item is named by its place in the set, counted from 1.",
|
|
88630
88718
|
"fieldName": "value"
|
|
88631
88719
|
}
|
|
88632
88720
|
],
|
|
@@ -88693,7 +88781,7 @@
|
|
|
88693
88781
|
"declarations": [
|
|
88694
88782
|
{
|
|
88695
88783
|
"kind": "class",
|
|
88696
|
-
"description": "The frame around content you open, such as a picture, a video frame, or a\nchart. The lightbox draws no content of its own. It provides the frame, the\nkeyboard behavior, and text that states the current position in the set.\n\nThe modal behavior comes from a native `<dialog>` opened with `showModal()`,\nwhich provides the top layer, a backdrop, Escape to close, and `inert` on the\nrest of the document. Every way of closing goes through `requestOpen`, as in\n`Dialog` and `Drawer`.\n\nA lightbox shows one item at a time and has no scrolling track, so `active`\nholds the current item, as in `Tabs`. The arrow keys change the item while\nfocus stays in the dialog.\n\nSet `controls` for the viewer's own previous, next and close controls, named\nby `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can\nreplace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. Without\nit, compose the chrome yourself in the `header` and `footer` slots, with\nbuttons that send `--previous`, `--next` and `--close`.\n\n**Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.\nTwo fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl\nheld, about the point under the pointer. A double click or a double tap\nzooms all the way in about the point pressed and back out, and once zoomed\none pointer drags it about and the wheel moves it. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.\nThe scale and the offset are on the `viewport` part as `--lightbox-zoom`,\n`--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a\nswipe moves to the next item only while the item is at its own size. With\n`controls`, the viewer also draws zoom-out and zoom-in controls, for a\npointer with no wheel and no second finger. Once a reader stops zooming,
|
|
88784
|
+
"description": "The frame around content you open, such as a picture, a video frame, or a\nchart. The lightbox draws no content of its own. It provides the frame, the\nkeyboard behavior, and text that states the current position in the set.\n\nThe modal behavior comes from a native `<dialog>` opened with `showModal()`,\nwhich provides the top layer, a backdrop, Escape to close, and `inert` on the\nrest of the document. Every way of closing goes through `requestOpen`, as in\n`Dialog` and `Drawer`.\n\nA lightbox shows one item at a time and has no scrolling track, so `active`\nholds the current item, as in `Tabs`. The arrow keys change the item while\nfocus stays in the dialog. `active` names an item by its `value`, and an\nitem with no `value` by its place, counted from 1, as in `Steps`, so a set\nwritten without values moves and `helix-activate` says `1`, `2` and so on.\n\nSet `controls` for the viewer's own previous, next and close controls, named\nby `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can\nreplace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. Without\nit, compose the chrome yourself in the `header` and `footer` slots, with\nbuttons that send `--previous`, `--next` and `--close`.\n\n**Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.\nTwo fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl\nheld, about the point under the pointer. A double click or a double tap\nzooms all the way in about the point pressed and back out, and once zoomed\none pointer drags it about and the wheel moves it. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.\nThe scale and the offset are on the `viewport` part as `--lightbox-zoom`,\n`--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a\nswipe moves to the next item only while the item is at its own size. With\n`controls`, the viewer also draws zoom-out and zoom-in controls, for a\npointer with no wheel and no second finger. Once a reader stops zooming, and\nat once for a key or a zoom control, the live region says the new scale in\nthe words of `zoom-status-label`, such as \"Zoomed to 150%\".\n\nEach item is a slide: a `group` with the role description in\n`slide-role-label`, named by its `label` or by `slide-label`. A touch or a pen\nswiped across the picture shows the next or the previous item, the way the\nline of text runs.\n\nA press on the empty area around the item closes the viewer, as a press on\nthe backdrop does. Under `max-zoom`, a press beside the item zooms on a\ndouble press and closes nothing, and only the space outside the viewport\ncloses the viewer. A press that dragged closes nothing.\n\n**Keyboard.** Opening moves focus to the viewer itself, which a screen\nreader names.\n\n| Key | What it does |\n|---|---|\n| Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. |\n| Left, Up | Shows the previous item. |\n| Home, End | Shows the first or the last item. |\n| `+`, `-`, `0` | Zooms in, zooms out, and puts the item back at its own size, where `max-zoom` allows zooming. |\n| Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. |\n| Escape | Closes the viewer. A `helix-before-close` listener can refuse. |\n\nA development build warns when a viewer opens with no `label`.\n\nThe chrome hides when there is no input, through `IdleController`, and comes\nback on a pointer move, a key press, or a focus. It stays while focus is on a\ncontrol in the header or the footer, so a keyboard reader is never left on\na control that has gone. `fullscreen` uses `FullscreenController`, as `Video`\ndoes. While the viewer is open, the page behind it does not scroll.",
|
|
88697
88785
|
"name": "HelixHeadlessLightbox",
|
|
88698
88786
|
"cssProperties": [
|
|
88699
88787
|
{
|
|
@@ -89123,6 +89211,16 @@
|
|
|
89123
89211
|
],
|
|
89124
89212
|
"description": "Writes the zoom on the viewport, and nothing at the item's own size."
|
|
89125
89213
|
},
|
|
89214
|
+
{
|
|
89215
|
+
"kind": "field",
|
|
89216
|
+
"name": "zoomStep",
|
|
89217
|
+
"type": {
|
|
89218
|
+
"text": "boolean"
|
|
89219
|
+
},
|
|
89220
|
+
"privacy": "private",
|
|
89221
|
+
"default": "false",
|
|
89222
|
+
"description": "Whether the zoom is changing by one discrete step, a key or a control, which is said at once."
|
|
89223
|
+
},
|
|
89126
89224
|
{
|
|
89127
89225
|
"kind": "method",
|
|
89128
89226
|
"name": "sayZoom",
|
|
@@ -89132,7 +89230,7 @@
|
|
|
89132
89230
|
"text": "void"
|
|
89133
89231
|
}
|
|
89134
89232
|
},
|
|
89135
|
-
"description": "Says the new scale in the live region
|
|
89233
|
+
"description": "Says the new scale in the live region: a moment after the last change of\na pinch, a drag or the wheel, and at once for a key or a zoom control,\nwhich is one change a reader is waiting to hear. Said only after the\npause, a reader pressing `+` heard nothing until it ended."
|
|
89136
89234
|
},
|
|
89137
89235
|
{
|
|
89138
89236
|
"kind": "method",
|
|
@@ -89389,6 +89487,25 @@
|
|
|
89389
89487
|
},
|
|
89390
89488
|
"description": "Zooms out by as much, as `-` and the zoom-out control do."
|
|
89391
89489
|
},
|
|
89490
|
+
{
|
|
89491
|
+
"kind": "method",
|
|
89492
|
+
"name": "stepZoom",
|
|
89493
|
+
"privacy": "private",
|
|
89494
|
+
"return": {
|
|
89495
|
+
"type": {
|
|
89496
|
+
"text": "void"
|
|
89497
|
+
}
|
|
89498
|
+
},
|
|
89499
|
+
"parameters": [
|
|
89500
|
+
{
|
|
89501
|
+
"name": "change",
|
|
89502
|
+
"type": {
|
|
89503
|
+
"text": "() => void"
|
|
89504
|
+
}
|
|
89505
|
+
}
|
|
89506
|
+
],
|
|
89507
|
+
"description": "Changes the zoom by one discrete step, which `sayZoom` says at once."
|
|
89508
|
+
},
|
|
89392
89509
|
{
|
|
89393
89510
|
"kind": "method",
|
|
89394
89511
|
"name": "toEnd",
|
|
@@ -89421,10 +89538,64 @@
|
|
|
89421
89538
|
{
|
|
89422
89539
|
"kind": "field",
|
|
89423
89540
|
"name": "shown",
|
|
89541
|
+
"type": {
|
|
89542
|
+
"text": "HelixHeadlessLightboxItem | undefined"
|
|
89543
|
+
},
|
|
89424
89544
|
"privacy": "private",
|
|
89425
89545
|
"description": "The item on screen: the one `active` names, or the first where it names none.",
|
|
89426
89546
|
"readonly": true
|
|
89427
89547
|
},
|
|
89548
|
+
{
|
|
89549
|
+
"kind": "method",
|
|
89550
|
+
"name": "named",
|
|
89551
|
+
"privacy": "private",
|
|
89552
|
+
"return": {
|
|
89553
|
+
"type": {
|
|
89554
|
+
"text": "HelixHeadlessLightboxItem | undefined"
|
|
89555
|
+
}
|
|
89556
|
+
},
|
|
89557
|
+
"parameters": [
|
|
89558
|
+
{
|
|
89559
|
+
"name": "items",
|
|
89560
|
+
"type": {
|
|
89561
|
+
"text": "HelixHeadlessLightboxItem[]"
|
|
89562
|
+
}
|
|
89563
|
+
}
|
|
89564
|
+
],
|
|
89565
|
+
"description": "The item `active` names, by `value` or by place, or the first where it names none."
|
|
89566
|
+
},
|
|
89567
|
+
{
|
|
89568
|
+
"kind": "method",
|
|
89569
|
+
"name": "requestActive",
|
|
89570
|
+
"return": {
|
|
89571
|
+
"type": {
|
|
89572
|
+
"text": "boolean"
|
|
89573
|
+
}
|
|
89574
|
+
},
|
|
89575
|
+
"parameters": [
|
|
89576
|
+
{
|
|
89577
|
+
"name": "next",
|
|
89578
|
+
"type": {
|
|
89579
|
+
"text": "string"
|
|
89580
|
+
}
|
|
89581
|
+
},
|
|
89582
|
+
{
|
|
89583
|
+
"name": "cause",
|
|
89584
|
+
"optional": true,
|
|
89585
|
+
"type": {
|
|
89586
|
+
"text": "string"
|
|
89587
|
+
}
|
|
89588
|
+
}
|
|
89589
|
+
],
|
|
89590
|
+
"description": "Requests a new shown item, and returns whether it moved.\n\nWhere `active` names nothing, it is first written with the item on\nscreen, so `helix-activate` names the item you saw as `previous`.",
|
|
89591
|
+
"inheritedFrom": {
|
|
89592
|
+
"name": "MixinControllerActive",
|
|
89593
|
+
"module": "src/mixins/mixin-controller-active/mixin-controller-active.ts"
|
|
89594
|
+
},
|
|
89595
|
+
"type": {
|
|
89596
|
+
"text": "requestActive(next: string, cause?: string) => boolean"
|
|
89597
|
+
}
|
|
89598
|
+
},
|
|
89428
89599
|
{
|
|
89429
89600
|
"kind": "field",
|
|
89430
89601
|
"name": "handleBackdrop",
|
|
@@ -89608,38 +89779,6 @@
|
|
|
89608
89779
|
"module": "src/mixins/mixin-controller-active/mixin-controller-active.ts"
|
|
89609
89780
|
}
|
|
89610
89781
|
},
|
|
89611
|
-
{
|
|
89612
|
-
"kind": "method",
|
|
89613
|
-
"name": "requestActive",
|
|
89614
|
-
"return": {
|
|
89615
|
-
"type": {
|
|
89616
|
-
"text": "boolean"
|
|
89617
|
-
}
|
|
89618
|
-
},
|
|
89619
|
-
"parameters": [
|
|
89620
|
-
{
|
|
89621
|
-
"name": "next",
|
|
89622
|
-
"type": {
|
|
89623
|
-
"text": "string"
|
|
89624
|
-
}
|
|
89625
|
-
},
|
|
89626
|
-
{
|
|
89627
|
-
"name": "cause",
|
|
89628
|
-
"optional": true,
|
|
89629
|
-
"type": {
|
|
89630
|
-
"text": "string"
|
|
89631
|
-
}
|
|
89632
|
-
}
|
|
89633
|
-
],
|
|
89634
|
-
"description": "Requests a new current item, and returns whether the change was applied.\n\nAnnounces before it acts, so `preventDefault()` on the `helix-before-activate` is\na refusal and nothing moves. Unlike a native control, nothing has moved\nby the time this runs, so refusing is simply not writing: there is\nnothing to put back. Nobody refusing means the set updates itself,\nwhether or not a consumer declared `active`, a declared property being a\nseed and a correction. `cause` says why, where the family names its\ncauses, and reaches the event as `detail.cause`.",
|
|
89635
|
-
"inheritedFrom": {
|
|
89636
|
-
"name": "MixinControllerActive",
|
|
89637
|
-
"module": "src/mixins/mixin-controller-active/mixin-controller-active.ts"
|
|
89638
|
-
},
|
|
89639
|
-
"type": {
|
|
89640
|
-
"text": "requestActive(next: string, cause?: string) => boolean"
|
|
89641
|
-
}
|
|
89642
|
-
},
|
|
89643
89782
|
{
|
|
89644
89783
|
"kind": "method",
|
|
89645
89784
|
"name": "announceActivated",
|
|
@@ -116316,7 +116455,7 @@
|
|
|
116316
116455
|
"declarations": [
|
|
116317
116456
|
{
|
|
116318
116457
|
"kind": "class",
|
|
116319
|
-
"description": "Notifications are slotted children. Each one is your own markup, with an\navatar, a link, or a button in it. Feeds usually hold tens of items, so\nwriting them out lets an item hold anything.\n\nThe list does not virtualize. Windowing needs the list to own the data, and\nhere you own it, so N notifications are N elements. For a feed of thousands,\nuse a data table with a custom cell.\n\nRead state is reported to you. Marking read goes from the root to the item\nand from the item to you, so a canceled `helix-read` changes nothing, and if\nyou own `read`, nothing changes until you set it. `unread` is derived from\nthe items and written to an attribute, so a stylesheet and a badge can both\nuse it without counting.\n\n**The feed is one `Tab` stop for its rows.**
|
|
116458
|
+
"description": "Notifications are slotted children. Each one is your own markup, with an\navatar, a link, or a button in it. Feeds usually hold tens of items, so\nwriting them out lets an item hold anything.\n\nThe list does not virtualize. Windowing needs the list to own the data, and\nhere you own it, so N notifications are N elements. For a feed of thousands,\nuse a data table with a custom cell.\n\nRead state is reported to you. Marking read goes from the root to the item\nand from the item to you, so a canceled `helix-read` changes nothing, and if\nyou own `read`, nothing changes until you set it. `unread` is derived from\nthe items and written to an attribute, so a stylesheet and a badge can both\nuse it without counting.\n\n**The feed is one `Tab` stop for its rows.** It is an APG feed: the list is\na `feed`, busy while `loading` is set, and each row is an `article` that\ntakes focus itself and is read by its label. `ArrowDown` and `ArrowUp` move to the next and the\nprevious row, `Home` and `End` to the first and the last, and `PageDown` and\n`PageUp` move a row on or back from anywhere inside one, as in the APG feed\npattern. The controls inside a row stay in the `Tab` order. Set `total` when\nthe feed holds one page of a longer list, and each row says its place in the\nwhole of it.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Down, Up | On a row, moves to the next or the previous row. |\n| Home, End | On a row, moves to the first or the last row. |\n| Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |\n| Control+End | From anywhere in the feed, moves to the first control after it on the page. |\n| Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |\n| Tab | Moves through the controls in a row, and on out of the feed. |\n\n**A notification that arrives says so.** Unread rows added above the rows\nthere were are counted in the live region,\n\"1 new notification\", in `arrived-label`. Rows that arrive while `loading`\nis set say nothing, so set it while a page is on its way.\n\n**`load-more` adds a button after the list** that sends `helix-load-more`,\nfor a feed that holds one page of a longer list. Append the next page, set\n`loading` while it is on its way, and take `load-more` off once there is\nnothing more. While the feed is loading the button stays, so focus stays on\nit, and it is `aria-disabled` and sends nothing.\n\n**`load-error` says a page could not be fetched**, such as \"Could not load\nnotifications\": it shows under the rows there are, in the `error` part, in\nplace of the empty and loading lines, and a screen reader hears it. Clear it\nwhen you ask again.",
|
|
116320
116459
|
"name": "HelixHeadlessNotifications",
|
|
116321
116460
|
"cssParts": [
|
|
116322
116461
|
{
|
|
@@ -116336,7 +116475,7 @@
|
|
|
116336
116475
|
"name": "header"
|
|
116337
116476
|
},
|
|
116338
116477
|
{
|
|
116339
|
-
"description": "The list itself.",
|
|
116478
|
+
"description": "The list itself, a `feed` whose rows are its articles.",
|
|
116340
116479
|
"name": "list"
|
|
116341
116480
|
},
|
|
116342
116481
|
{
|
|
@@ -182544,7 +182683,7 @@
|
|
|
182544
182683
|
"declarations": [
|
|
182545
182684
|
{
|
|
182546
182685
|
"kind": "class",
|
|
182547
|
-
"description": "The trigger stays your own element. The bubble renders in the\ntop layer through the popover API, so an ancestor with `overflow: hidden`\ndoes not clip it and no `z-index` is needed. `FloatingController` positions\nit and flips it to another side when the preferred side does not fit.\n\n**Place the tooltip beside its trigger, name the trigger with `for`, and\nname the tooltip in the trigger's `aria-describedby`.** The description is\nthen in your own markup, so it is in the server's HTML and in the\naccessibility tree at rest, in every browser, before anyone points at the\ntrigger or focuses it:\n\n```html\n<helix-headless-button aria-describedby=\"save-tip\" id=\"save\">Save</helix-headless-button>\n<helix-headless-tooltip content=\"Save your work\" for=\"save\" id=\"save-tip\"></helix-headless-tooltip>\n```\n\nWithout the attribute, the tooltip links itself through an element reference\non the control that takes focus, and it never writes into your markup before\nyou act, so hydration stays intact. A trigger that is a Helix component is\ndescribed at once, inside its own shadow root. A plain element in your\nmarkup is described when you first point at it or focus it, so a screen\nreader in reading mode meets it with no description until then. Where the\nbrowser has no element references, nothing links the two, and the tooltip\nwarns once on first open. The tooltip can also wrap its trigger
|
|
182686
|
+
"description": "The trigger stays your own element. The bubble renders in the\ntop layer through the popover API, so an ancestor with `overflow: hidden`\ndoes not clip it and no `z-index` is needed. `FloatingController` positions\nit and flips it to another side when the preferred side does not fit.\n\n**Place the tooltip beside its trigger, name the trigger with `for`, and\nname the tooltip in the trigger's `aria-describedby`.** The description is\nthen in your own markup, so it is in the server's HTML and in the\naccessibility tree at rest, in every browser, before anyone points at the\ntrigger or focuses it:\n\n```html\n<helix-headless-button aria-describedby=\"save-tip\" id=\"save\">Save</helix-headless-button>\n<helix-headless-tooltip content=\"Save your work\" for=\"save\" id=\"save-tip\"></helix-headless-tooltip>\n```\n\nWithout the attribute, the tooltip links itself through an element reference\non the control that takes focus, and it never writes into your markup before\nyou act, so hydration stays intact. A trigger that is a Helix component is\ndescribed at once, inside its own shadow root. A plain element in your\nmarkup is described when you first point at it or focus it, so a screen\nreader in reading mode meets it with no description until then. Where the\nbrowser has no element references, nothing links the two, and the tooltip\nwarns once on first open. The tooltip can also wrap its trigger. A Helix\ncomponent inside is described at once, and a plain element as in the `for`\nform: when you first point at it or focus it, or at rest where it names the\ntooltip's `id` in its own `aria-describedby`, which a reference to the\nelement around it allows. In the\n`for` form the tooltip itself is out of the accessibility tree while its\nbubble is down, so you meet its words once, as the trigger's description.\nA trigger whose name is already the tooltip's words, such as an icon button\nnamed Settings under a tooltip reading Settings, is not described by them\nagain.\n\nThe tooltip shows on hover and on focus. It hides on pointer leave, on blur,\non Escape, and when the trigger is activated. The pointer can move from the\ntrigger onto the bubble and the bubble stays, unless you set\n`hoverable=\"false\"`. `delay` is how long the pointer rests before it shows,\nand `delay-out` how long it stays once the pointer leaves.\n\nOnce one tooltip is showing, moving to another trigger shows its tooltip\nwith no `delay`, and the first one hides. The same holds for `skip-delay`\nmilliseconds after a tooltip hides, 300 unless you set it. `show-on=\"focus\"`\nshows the tooltip on keyboard focus only, for a hint a pointer does not need.",
|
|
182548
182687
|
"name": "HelixHeadlessTooltip",
|
|
182549
182688
|
"cssParts": [
|
|
182550
182689
|
{
|
|
@@ -198176,6 +198315,6 @@
|
|
|
198176
198315
|
],
|
|
198177
198316
|
"helix": {
|
|
198178
198317
|
"package": "@fusion.dev/helix-headless",
|
|
198179
|
-
"version": "0.
|
|
198318
|
+
"version": "0.176.0"
|
|
198180
198319
|
}
|
|
198181
198320
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HelixElement } from '@fusion.dev/helix-core';
|
|
2
|
-
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
+
import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
|
|
3
3
|
declare const HelixHeadlessAppHeader_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
|
|
4
4
|
/**
|
|
5
5
|
* @summary Page-level banner holding brand, navigation, and actions.
|
|
@@ -90,6 +90,7 @@ export declare class HelixHeadlessAppHeader extends HelixHeadlessAppHeader_base
|
|
|
90
90
|
* `registerWords('de', { 'helix-app-header': { menuLabel: 'Menü' } })`.
|
|
91
91
|
*/
|
|
92
92
|
static words: string;
|
|
93
|
+
static styles: CSSResultGroup;
|
|
93
94
|
/**
|
|
94
95
|
* Where the middle region sits in the bar.
|
|
95
96
|
*
|
|
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { customElement, deepActiveElement, deepContains, elementById, HelixElement, HelixScrolledEvent, hostAria, MixinControllerOpen, words, } from '@fusion.dev/helix-core';
|
|
8
8
|
import { list } from '@fusion.dev/helix-icons';
|
|
9
|
-
import { html, nothing } from 'lit';
|
|
9
|
+
import { css, html, nothing, } from 'lit';
|
|
10
10
|
import { property, state } from 'lit/decorators.js';
|
|
11
11
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
12
12
|
import { inSectioningContent } from '../sectioning.js';
|
|
@@ -61,6 +61,11 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends MixinControlle
|
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
63
|
static { this.words = 'helix-app-header'; }
|
|
64
|
+
static { this.styles = css `
|
|
65
|
+
:host {
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
68
|
+
`; }
|
|
64
69
|
get unfolded() {
|
|
65
70
|
return this.folded && this.open;
|
|
66
71
|
}
|
|
@@ -327,7 +327,12 @@ export declare class HelixHeadlessButton extends HelixFormElement {
|
|
|
327
327
|
protected updated(changed: PropertyValues): void;
|
|
328
328
|
/** @internal A submit button is what its form's implicit submission presses. */
|
|
329
329
|
protected get submitsForm(): boolean;
|
|
330
|
-
/**
|
|
330
|
+
/**
|
|
331
|
+
* @internal Pressed as the form's default button, through the inner control.
|
|
332
|
+
*
|
|
333
|
+
* Only Enter in a field of the form presses it this way, so `helix-press`
|
|
334
|
+
* says `keyboard`, where the script click it makes read as `virtual`.
|
|
335
|
+
*/
|
|
331
336
|
protected activate(): void;
|
|
332
337
|
/** The form whose Enter key this button listens to, as its default button. */
|
|
333
338
|
private watched;
|
|
@@ -47,8 +47,10 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
|
|
|
47
47
|
* the full list. Combobox and Select do the same. As typing narrows the list, a
|
|
48
48
|
* screen reader hears how many commands are left, such as "3 commands".
|
|
49
49
|
*
|
|
50
|
-
* **Keyboard.** Focus goes to the filter field as the palette opens,
|
|
51
|
-
*
|
|
50
|
+
* **Keyboard.** Focus goes to the filter field as the palette opens, with no
|
|
51
|
+
* command highlighted, as in React Aria's Autocomplete, so Enter runs nothing
|
|
52
|
+
* until you type or press Down. Typing highlights the first command left, and
|
|
53
|
+
* the highlight moves through the commands while you type.
|
|
52
54
|
*
|
|
53
55
|
* | Key | What it does |
|
|
54
56
|
* |---|---|
|