@fusion.dev/helix-headless 0.174.0 → 0.175.0

package/custom-elements.json

@@ -42953,7 +42953,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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, and the\nhighlight 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.",
+          "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.",
           "name": "HelixHeadlessCommand",
           "cssParts": [
             {
@@ -55485,7 +55485,7 @@
                 "text": "Date"
               },
               "privacy": "private",
-              "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\".",
+              "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.",
               "readonly": true
             },
             {
@@ -58816,6 +58816,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/dialog/form-method.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "closeOnDialogSubmit",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "event",
+              "type": {
+                "text": "SubmitEvent"
+              }
+            },
+            {
+              "name": "close",
+              "type": {
+                "text": "(returnValue?: string) => void"
+              }
+            }
+          ],
+          "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."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "closeOnDialogSubmit",
+          "declaration": {
+            "name": "closeOnDialogSubmit",
+            "module": "src/dialog/form-method.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/dialog/index.ts",
@@ -59079,7 +59119,7 @@
               "name": "handleSubmit",
               "privacy": "private",
               "readonly": true,
-              "description": "A `<form method=\"dialog\">` slotted into the dialog, closed the way the\nplatform closes its own.\n\n**The platform cannot find this 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\nhere, and the submitter's `value` is the `returnValue`, as it would be."
+              "description": "A `<form method=\"dialog\">` slotted into the dialog closes it."
             },
             {
               "kind": "field",
@@ -62236,6 +62276,13 @@
               },
               "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."
             },
+            {
+              "kind": "field",
+              "name": "handleSubmit",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A `<form method=\"dialog\">` slotted into the drawer closes it, as in `Dialog`."
+            },
             {
               "kind": "method",
               "name": "renderDismissIcon",
@@ -88241,7 +88288,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The item's identifier. The root compares its `active` value against it.",
+              "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.",
               "attribute": "value"
             },
             {
@@ -88626,7 +88673,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The item's identifier. The root compares its `active` value against it.",
+              "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.",
               "fieldName": "value"
             }
           ],
@@ -88693,7 +88740,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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, the\nlive region says the new scale in the words of `zoom-status-label`, such as\n\"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.",
+          "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.",
           "name": "HelixHeadlessLightbox",
           "cssProperties": [
             {
@@ -89123,6 +89170,16 @@
               ],
               "description": "Writes the zoom on the viewport, and nothing at the item's own size."
             },
+            {
+              "kind": "field",
+              "name": "zoomStep",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the zoom is changing by one discrete step, a key or a control, which is said at once."
+            },
             {
               "kind": "method",
               "name": "sayZoom",
@@ -89132,7 +89189,7 @@
                   "text": "void"
                 }
               },
-              "description": "Says the new scale in the live region, a moment after the last change."
+              "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."
             },
             {
               "kind": "method",
@@ -89389,6 +89446,25 @@
               },
               "description": "Zooms out by as much, as `-` and the zoom-out control do."
             },
+            {
+              "kind": "method",
+              "name": "stepZoom",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "change",
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ],
+              "description": "Changes the zoom by one discrete step, which `sayZoom` says at once."
+            },
             {
               "kind": "method",
               "name": "toEnd",
@@ -89421,10 +89497,64 @@
             {
               "kind": "field",
               "name": "shown",
+              "type": {
+                "text": "HelixHeadlessLightboxItem | undefined"
+              },
               "privacy": "private",
               "description": "The item on screen: the one `active` names, or the first where it names none.",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "named",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HelixHeadlessLightboxItem | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "HelixHeadlessLightboxItem[]"
+                  }
+                }
+              ],
+              "description": "The item `active` names, by `value` or by place, or the first where it names none."
+            },
+            {
+              "kind": "method",
+              "name": "requestActive",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "cause",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "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`.",
+              "inheritedFrom": {
+                "name": "MixinControllerActive",
+                "module": "src/mixins/mixin-controller-active/mixin-controller-active.ts"
+              },
+              "type": {
+                "text": "requestActive(next: string, cause?: string) => boolean"
+              }
+            },
             {
               "kind": "field",
               "name": "handleBackdrop",
@@ -89608,38 +89738,6 @@
                 "module": "src/mixins/mixin-controller-active/mixin-controller-active.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "requestActive",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "next",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "cause",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "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`.",
-              "inheritedFrom": {
-                "name": "MixinControllerActive",
-                "module": "src/mixins/mixin-controller-active/mixin-controller-active.ts"
-              },
-              "type": {
-                "text": "requestActive(next: string, cause?: string) => boolean"
-              }
-            },
             {
               "kind": "method",
               "name": "announceActivated",
@@ -116316,7 +116414,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.** Each row takes focus itself and\nis 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.",
+          "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.",
           "name": "HelixHeadlessNotifications",
           "cssParts": [
             {
@@ -116336,7 +116434,7 @@
               "name": "header"
             },
             {
-              "description": "The list itself.",
+              "description": "The list itself, a `feed` whose rows are its articles.",
               "name": "list"
             },
             {
@@ -182544,7 +182642,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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, which\ndescribes a Helix component and leaves a plain element undescribed. 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.",
+          "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.",
           "name": "HelixHeadlessTooltip",
           "cssParts": [
             {
@@ -198176,6 +198274,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.174.0"
+    "version": "0.175.0"
   }
 }

package/dist/app-header/root/app-header-root.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessAppHeader_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
  * @summary Page-level banner holding brand, navigation, and actions.
@@ -90,6 +90,7 @@ export declare class HelixHeadlessAppHeader extends HelixHeadlessAppHeader_base
      * `registerWords('de', { 'helix-app-header': { menuLabel: 'Menü' } })`.
      */
     static words: string;
+    static styles: CSSResultGroup;
     /**
      * Where the middle region sits in the bar.
      *

package/dist/app-header/root/app-header-root.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, deepActiveElement, deepContains, elementById, HelixElement, HelixScrolledEvent, hostAria, MixinControllerOpen, words, } from '@fusion.dev/helix-core';
 import { list } from '@fusion.dev/helix-icons';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { inSectioningContent } from '../sectioning.js';
@@ -61,6 +61,11 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends MixinControlle
         };
     }
     static { this.words = 'helix-app-header'; }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+  `; }
     get unfolded() {
         return this.folded && this.open;
     }

package/dist/button/root/button-root.d.ts

@@ -327,7 +327,12 @@ export declare class HelixHeadlessButton extends HelixFormElement {
     protected updated(changed: PropertyValues): void;
     /** @internal A submit button is what its form's implicit submission presses. */
     protected get submitsForm(): boolean;
-    /** @internal Pressed as the form's default button, through the inner control. */
+    /**
+     * @internal Pressed as the form's default button, through the inner control.
+     *
+     * Only Enter in a field of the form presses it this way, so `helix-press`
+     * says `keyboard`, where the script click it makes read as `virtual`.
+     */
     protected activate(): void;
     /** The form whose Enter key this button listens to, as its default button. */
     private watched;

package/dist/button/root/button-root.js

@@ -153,6 +153,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         return this.type === 'submit';
     }
     activate() {
+        this.recent = { key: true };
         this.partNamed('button')?.click();
     }
     watchForm(form) {

package/dist/command/root/command-root.d.ts

@@ -47,8 +47,10 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * the full list. Combobox and Select do the same. As typing narrows the list, a
  * screen reader hears how many commands are left, such as "3 commands".
  *
- * **Keyboard.** Focus goes to the filter field as the palette opens, and the
- * highlight moves through the commands while you type.
+ * **Keyboard.** Focus goes to the filter field as the palette opens, with no
+ * command highlighted, as in React Aria's Autocomplete, so Enter runs nothing
+ * until you type or press Down. Typing highlights the first command left, and
+ * the highlight moves through the commands while you type.
  *
  * | Key | What it does |
  * |---|---|

package/dist/command/root/command-root.js

@@ -198,6 +198,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             return;
         }
         if (this.open) {
+            this.listbox?.highlight('none');
             this.searchField?.focus();
         }
         else {

package/dist/date-picker/root/date-picker-root.d.ts

@@ -348,6 +348,12 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * to the first of the month. Measured before today was a candidate: a
      * calendar with no value opened on October 5 with its stop on "Thursday,
      * October 1".
+     *
+     * Today counts only where it can be chosen, and the fallback is the first
+     * day of the month that can, so a reader tabbing in lands on a date they can
+     * pick. Measured before: with `min="2026-03-03"`, the stop sat on "Sunday,
+     * March 1, 2026", unavailable. A month with nothing to choose keeps its
+     * first day, so the grid still has a way in.
      */
     private get anchor();
     /** Six weeks of dates, so a grid does not change height between months. */

package/dist/date-picker/root/date-picker-root.js

@@ -199,15 +199,21 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     }
     get anchor() {
         const shown = this.shown;
+        const today = asDate(todayIn(this.timeZone));
         for (const candidate of [
             asDate(this.focused),
             asDate(this.selected[0] ?? ''),
-            asDate(todayIn(this.timeZone)),
+            today && !this.barred(today) ? today : null,
         ]) {
             if (candidate && this.system.same(candidate, shown)) {
                 return candidate;
             }
         }
+        for (let day = shown; this.system.same(day, shown); day = addDays(day, 1)) {
+            if (!this.barred(day)) {
+                return day;
+            }
+        }
         return shown;
     }
     weeksOf(month) {

package/dist/dialog/form-method.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Closes a shadow `<dialog>` on a `<form method="dialog">` submit slotted into
+ * it, the way the platform closes its own. `Dialog` and `Drawer` share it.
+ *
+ * **The platform cannot find the dialog from the form.** A submit with the
+ * `dialog` method closes the nearest `<dialog>` ancestor, and a slotted form's
+ * ancestors are the light DOM, where there is none. So the submit is read on
+ * the host, and the submitter's `value` is the `returnValue`, as it would be.
+ * A form inside a `<dialog>` of its own, or with any other method, is left to
+ * the platform.
+ */
+export declare const closeOnDialogSubmit: (event: SubmitEvent, close: (returnValue?: string) => void) => void;

package/dist/dialog/form-method.js

@@ -0,0 +1,13 @@
+export const closeOnDialogSubmit = (event, close) => {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement) || form.closest('dialog')) {
+        return;
+    }
+    const submitter = event.submitter;
+    const method = submitter?.hasAttribute('formmethod') ? submitter.formMethod : form.method;
+    if (method !== 'dialog') {
+        return;
+    }
+    event.preventDefault();
+    close(submitter?.hasAttribute('value') ? submitter.value : undefined);
+};

package/dist/dialog/root/dialog-root.d.ts

@@ -201,15 +201,7 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * saying otherwise would be a lie the next `showModal()` would trip over.
      */
     private readonly handleClose;
-    /**
-     * A `<form method="dialog">` slotted into the dialog, closed the way the
-     * platform closes its own.
-     *
-     * **The platform cannot find this dialog from the form.** A submit with the
-     * `dialog` method closes the nearest `<dialog>` ancestor, and a slotted form's
-     * ancestors are the light DOM, where there is none. So the submit is read
-     * here, and the submitter's `value` is the `returnValue`, as it would be.
-     */
+    /** A `<form method="dialog">` slotted into the dialog closes it. */
     private readonly handleSubmit;
     /** Whether the `header` slot's heading is what currently names the dialog. */
     private namedByHeader;

package/dist/dialog/root/dialog-root.js

@@ -8,6 +8,7 @@ import { AriaForwardController, auditName, CommandController, customElement, dra
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { wordsIn } from '../description.js';
+import { closeOnDialogSubmit } from '../form-method.js';
 let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -49,17 +50,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             this.relayNativeEvent(event);
         };
         this.handleSubmit = (event) => {
-            const form = event.target;
-            if (!(form instanceof HTMLFormElement) || form.closest('dialog')) {
-                return;
-            }
-            const submitter = event.submitter;
-            const method = submitter?.hasAttribute('formmethod') ? submitter.formMethod : form.method;
-            if (method !== 'dialog') {
-                return;
-            }
-            event.preventDefault();
-            this.close(submitter?.hasAttribute('value') ? submitter.value : undefined);
+            closeOnDialogSubmit(event, (value) => this.close(value));
         };
         this.namedByHeader = false;
         this.scope = new FocusScopeController(this, {

package/dist/drawer/root/drawer-root.d.ts

@@ -321,6 +321,8 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * comes first.
      */
     private describeByBody;
+    /** A `<form method="dialog">` slotted into the drawer closes it, as in `Dialog`. */
+    private readonly handleSubmit;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;

package/dist/drawer/root/drawer-root.js

@@ -8,6 +8,7 @@ import { AriaForwardController, auditName, CommandController, customElement, dra
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { wordsIn } from '../../dialog/description.js';
+import { closeOnDialogSubmit } from '../../dialog/form-method.js';
 import { beyondWindow } from '../reveal.js';
 import { startsSwipe } from '../swipe-start.js';
 let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(HelixElement) {
@@ -111,6 +112,9 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         };
         this.namedByHeader = false;
         this.describedByBody = false;
+        this.handleSubmit = (event) => {
+            closeOnDialogSubmit(event, (value) => this.close(value));
+        };
     }
     static { this.words = 'helix-drawer'; }
     get refusesDismissal() {
@@ -214,10 +218,12 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('submit', this.handleSubmit);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('submit', this.handleSubmit);
         unlockScroll(this);
     }
     updated(changed) {

package/dist/lightbox/item/lightbox-item.d.ts

@@ -55,6 +55,7 @@ export declare class HelixHeadlessLightboxItem extends HelixElement {
     roleLabel: string;
     /**
      * The item's identifier. The root compares its `active` value against it.
+     * Without one, the item is named by its place in the set, counted from 1.
      */
     value: string;
     /** Whether anything is slotted into `description`, which then describes the group. */