@fusion.dev/helix-headless 0.156.0 → 0.157.0

package/types/vue.d.ts

@@ -6302,6 +6302,16 @@ export type HelixHeadlessDrilldownItemHelixSelectElementEvent =
 export type HelixHeadlessDrilldownItemVueProps = {
   /** Whether the row can be reached at all. */
   disabled?: (HelixHeadlessDrilldownItem["disabled"]) | undefined;
+  /** Whether the link downloads the file when the row is chosen. Only
+meaningful beside an `href`, and only for a file served from this origin. */
+  download?: (HelixHeadlessDrilldownItem["download"]) | undefined;
+  /** The URL the row links to. Setting it renders the row as a link, unless the
+row opens a page or is disabled. */
+  href?: (HelixHeadlessDrilldownItem["href"]) | undefined;
+  /** The link's `rel`. Set it whenever you set `target="_blank"`. */
+  rel?: (HelixHeadlessDrilldownItem["rel"]) | undefined;
+  /** Where the link opens, for rows that should open outside the current page. */
+  target?: (HelixHeadlessDrilldownItem["target"]) | undefined;
   /** Identifies the row to your event listeners. */
   value?: (HelixHeadlessDrilldownItem["value"]) | undefined;
   /** Whether this row holds the region's tab stop. Set by the drill-down.
@@ -6328,6 +6338,9 @@ export type HelixHeadlessDrilldownElementEvent<E = Event> = TypedEvent<
   HelixHeadlessDrilldown,
   E
 >;
+/** `helix-navigate` event type */
+export type HelixHeadlessDrilldownHelixNavigateElementEvent =
+  HelixHeadlessDrilldownElementEvent<HelixNavigateEvent>;
 /** `helix-select` event type */
 export type HelixHeadlessDrilldownHelixSelectElementEvent =
   HelixHeadlessDrilldownElementEvent<HelixSelectEvent>;
@@ -6343,6 +6356,14 @@ and wins over this. */
   "back-label"?: (HelixHeadlessDrilldown["backLabel"]) | undefined;
   /** The text of the back button. */
   backLabel?: (HelixHeadlessDrilldown["backLabel"]) | undefined;
+  /** Whether the drilldown is a site's navigation: a `navigation` landmark
+named by `label`, whose pages are lists of links. Without it, each page is
+a `menu`. */
+  navigation?: (HelixHeadlessDrilldown["navigation"]) | undefined;
+  /** The page showing, as the `value` of the row that opens it. Empty is the
+top page. Setting it shows that page, and a value no row with a page has
+shows the top page. */
+  page?: (HelixHeadlessDrilldown["page"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessDrilldown["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -6360,6 +6381,8 @@ say that without the component knowing what a row looks like. */
 };
 
 export type HelixHeadlessDrilldownVueEvents = {
+  /** Fired before a reader moves into a page or back out of one. `detail.value` is the `value` of the row whose page is about to show, empty for the top page. Cancelable: cancel it to stay on the page showing. */
+  "helix-navigate": HelixHeadlessDrilldownHelixNavigateElementEvent;
   /** Fired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you. */
   "helix-select": HelixHeadlessDrilldownHelixSelectElementEvent;
 };
@@ -10194,8 +10217,24 @@ narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
   bandBelow?: (HelixHeadlessMegamenu["bandBelow"]) | undefined;
+  /** How long a pointer leaving the trigger and the panel waits before the panel
+closes, in milliseconds. The pointer needs the time to cross from the
+trigger to the panel. */
+  "close-delay"?: (HelixHeadlessMegamenu["closeDelay"] | `${number}`) | undefined;
+  /** How long a pointer leaving the trigger and the panel waits before the panel
+closes, in milliseconds. The pointer needs the time to cross from the
+trigger to the panel. */
+  closeDelay?: (HelixHeadlessMegamenu["closeDelay"]) | undefined;
   /** The section's name, used for the default trigger and the panel. */
   label?: (HelixHeadlessMegamenu["label"]) | undefined;
+  /** How long a pointer rests on the trigger before the panel opens, in
+milliseconds, under `open-on="hover"`. A pointer crossing the bar on its
+way somewhere else opens nothing. */
+  "open-delay"?: (HelixHeadlessMegamenu["openDelay"] | `${number}`) | undefined;
+  /** How long a pointer rests on the trigger before the panel opens, in
+milliseconds, under `open-on="hover"`. A pointer crossing the bar on its
+way somewhere else opens nothing. */
+  openDelay?: (HelixHeadlessMegamenu["openDelay"]) | undefined;
   /** Whether hovering over the trigger opens the panel (`hover`), or only a press
 does (`click`).
 
@@ -10212,6 +10251,10 @@ the trigger, and it is the default because that is what a navigation bar
 does. `click` is for a trigger that does something else as well, or a panel
 heavy enough that opening it on the way past is rude. */
   openOn?: (HelixHeadlessMegamenu["openOn"]) | undefined;
+  /** The side of the trigger a card panel opens on, when there is room. It
+moves if that side does not fit. A band ignores it, since a band spans the
+page under its bar. */
+  placement?: (HelixHeadlessMegamenu["placement"]) | undefined;
   /** Whether the panel is a card under the trigger or a band across the page.
 
 The resting one is the card, hanging off the trigger and as wide as it
@@ -10379,12 +10422,29 @@ Empty by default, which names the surface by its trigger, so a menu opened
 from "Actions" is announced as "Actions". An `aria-label` or
 `aria-labelledby` on the host names it too, and wins over both. */
   label?: (HelixHeadlessMenu["label"]) | undefined;
+  /** The description a trigger gives under `open-on="long-press"`, saying how
+to open the menu. Translate it with the rest of your interface. */
+  "long-press-label"?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
+  /** The description a trigger gives under `open-on="long-press"`, saying how
+to open the menu. Translate it with the rest of your interface. */
+  longPressLabel?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
   /** Space between the trigger and the surface, in pixels. */
   offset?: (HelixHeadlessMenu["offset"]) | undefined;
+  /** What opens the menu from its trigger. `long-press` leaves a press to the
+trigger's own action and opens the menu on a press held for half a second,
+or on Alt+Down or Alt+Up. */
+  "open-on"?: (HelixHeadlessMenu["openOn"]) | undefined;
+  /** What opens the menu from its trigger. `long-press` leaves a press to the
+trigger's own action and opens the menu on a press held for half a second,
+or on Alt+Down or Alt+Up. */
+  openOn?: (HelixHeadlessMenu["openOn"]) | undefined;
   /** The side the menu opens on, when there is room.
 
 It moves if that side does not fit. */
   placement?: (HelixHeadlessMenu["placement"]) | undefined;
+  /** How a submenu opens. `drill` shows it in place of the page showing, with
+a way back. `flyout` opens it in a panel of its own beside its row. */
+  submenus?: (HelixHeadlessMenu["submenus"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessMenu["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -10792,6 +10852,12 @@ export type HelixHeadlessNotificationsHelixReadElementEvent =
   HelixHeadlessNotificationsElementEvent<HelixReadEvent>;
 
 export type HelixHeadlessNotificationsVueProps = {
+  /** What the feed says when unread notifications arrive, with `{count}` the
+number of them. Empty it to say nothing. */
+  "arrived-label"?: (HelixHeadlessNotifications["arrivedLabel"]) | undefined;
+  /** What the feed says when unread notifications arrive, with `{count}` the
+number of them. Empty it to say nothing. */
+  arrivedLabel?: (HelixHeadlessNotifications["arrivedLabel"]) | undefined;
   /** The region's name where `label` is empty. */
   "fallback-label"?: (HelixHeadlessNotifications["fallbackLabel"]) | undefined;
   /** The region's name where `label` is empty. */
@@ -16077,6 +16143,10 @@ A word property: register it for a locale under the host's key. A family
 that names the control otherwise, such as Tag's `Remove {label}`,
 declares its own English with `@words` above the override. */
   dismissLabel?: (HelixHeadlessToastItem["dismissLabel"]) | undefined;
+  /** Whether the region holds the message back, because more messages are
+showing than its `max-visible`. The region sets it. A waiting message is
+hidden, its timer has not started, and it is said once it shows. */
+  waiting?: (HelixHeadlessToastItem["waiting"]) | undefined;
 };
 
 export type HelixHeadlessToastItemVueEvents = {
@@ -16102,6 +16172,14 @@ Empty turns it off. */
   /** Accessible name for the region, with `{hotkey}` filled in. Translate it with
 the rest of your interface. */
   label?: (HelixHeadlessToast["label"]) | undefined;
+  /** How many messages show at once. The messages after that many wait, hidden
+and with their timers stopped, until a message before them goes. Unset,
+every message shows. */
+  "max-visible"?: (HelixHeadlessToast["maxVisible"] | `${number}`) | undefined;
+  /** How many messages show at once. The messages after that many wait, hidden
+and with their timers stopped, until a message before them goes. Unset,
+every message shows. */
+  maxVisible?: (HelixHeadlessToast["maxVisible"]) | undefined;
   /** Which corner or edge the stack sits at.
 
 Named here rather than on each message, because where a page puts its
@@ -18279,13 +18357,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDrawerVueProps,
     HelixHeadlessDrawerVueEvents
   >;
-  /** A row that opens a page contains that page: the page's rows are this row's own children, assigned to the 'page' slot. There are no ids to wire, and moving a row moves its page with it.  What the item renders depends on the stack:  - On the page that is showing, it renders its row. - When its own page is showing, it renders only that page's rows. Its row   belongs to the page above. - When a page further down its own is showing, it renders its page's slot   alone, so the rows below reach the page. - Otherwise it renders nothing. The rows stay in the light DOM untouched, so   there is no state to keep.  Choosing a row dispatches an event, and the stack decides whether that drills in or runs a command.  A row that opens a page shows a caret after its text and sets 'aria-haspopup', the same way 'Menu' marks a row with a submenu. The server render leaves both out, because the server cannot see the children.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as 'Menu.Item' does: a reader hears "Theme", then "Dark". */
+  /** A row that opens a page contains that page: the page's rows are this row's own children, assigned to the 'page' slot. There are no ids to wire, and moving a row moves its page with it.  What the item renders depends on the stack:  - On the page that is showing, it renders its row. - When its own page is showing, it renders only that page's rows. Its row   belongs to the page above. - When a page further down its own is showing, it renders its page's slot   alone, so the rows below reach the page. - Otherwise it renders nothing. The rows stay in the light DOM untouched, so   there is no state to keep.  Choosing a row dispatches an event, and the stack decides whether that drills in or runs a command.  A row that opens a page shows a caret after its text and sets 'aria-haspopup', the same way 'Menu' marks a row with a submenu. The server render leaves both out, because the server cannot see the children.  **A row with an 'href' is a link.** The row itself renders as an '<a>' carrying 'menuitem', as 'Menu.Item' does, so a middle click, a modified click and the status bar keep working. Enter follows it, and Space does too. Choosing it fires 'helix-select' first: cancel the event and the link is not followed, so a router can take the navigation. A row that opens a page, or a disabled row, renders no link.  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as 'Menu.Item' does: a reader hears "Theme", then "Dark". */
   "helix-headless-drilldown-item": DefineCustomElement<
     HelixHeadlessDrilldownItem,
     HelixHeadlessDrilldownItemVueProps,
     HelixHeadlessDrilldownItemVueEvents
   >;
-  /** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one.  It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller.  Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'.  A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares.  After each move the host carries 'data-direction', 'forward' into a page or 'back' out of one, and records ':state(forward)' or ':state(back)', so a stylesheet can slide the new page in from the side the reader is going. Both are written again on every move, so an animation keyed on them runs for each page, two moves the same way included. The styled tier slides the page and swaps it at once under 'prefers-reduced-motion'.  Keys, on a row: Up and Down Arrow move between the rows, Home and End go to the first and the last, and a typed letter moves to the next row whose name starts with it. Enter, Space, or Right Arrow opens a row's page, and Left Arrow or Escape goes back, the two arrows swapping on a right-to-left page.  The rows of the page showing are a 'menu', named by 'label' on the top page and by the page's title below it. The back button and the title sit above the menu. Disabled rows stay reachable with the arrow keys, and typing a letter moves to the next row whose name starts with it. */
+  /** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one.  It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller.  Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'.  A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares.  **'page' is the page showing**, as the 'value' of the row that opens it, and empty on the top page. Set it to show a page, such as one a link to a settings screen names. A reader's move updates it, and 'helix-navigate' comes first, so you can refuse the move or take it yourself.  After each move the host carries 'data-direction', 'forward' into a page or 'back' out of one, and records ':state(forward)' or ':state(back)', so a stylesheet can slide the new page in from the side the reader is going. Both are written again on every move, so an animation keyed on them runs for each page, two moves the same way included. The styled tier slides the page and swaps it at once under 'prefers-reduced-motion'.  **Keyboard.** The drilldown is one tab stop, on the row last focused.  | Key | What it does | |---|---| | Down Arrow, Up Arrow | Moves to the next or the previous row. | | Home, End | Moves to the first or the last row. | | A letter | Moves to the next row whose name starts with it. | | Enter, Space | Chooses the row: opens its page, follows its link, or sends 'helix-select'. | | Right Arrow | Opens the row's page. Left Arrow on a right-to-left page. | | Left Arrow, Escape | Goes back one page, with focus on the row that opened it. Right Arrow on a right-to-left page. |  The rows of the page showing are a 'menu', named by 'label' on the top page and by the page's title below it.  **'navigation' makes it a site's navigation.** The host is a 'navigation' landmark named by 'label', each page is a list, and each row is a list item holding a link or a button, as the APG's disclosure navigation is built, so a reader meets places to go in place of a menu of commands. The keys stay the same. The back button and the title sit above the menu. Disabled rows stay reachable with the arrow keys, and typing a letter moves to the next row whose name starts with it. */
   "helix-headless-drilldown": DefineCustomElement<
     HelixHeadlessDrilldown,
     HelixHeadlessDrilldownVueProps,
@@ -18495,19 +18573,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapTerrainVueProps,
     HelixHeadlessMapTerrainVueEvents
   >;
-  /** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands.  It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write.  It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section.  When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it.  While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next.  The panel's default slot is the 'columns' part and draws no box, so a sheet can give the columns one of their own. While a panel is open, an 'indicator' slot is rendered beside its trigger, as Radix's indicator marks the open one: slot a mark of your own, such as a bar or an arrow pointing at the panel, and it shows only while the panel is open. The styled tier rests it on the trigger's bottom edge.  Left and Right Arrow move between the triggers of the megamenus beside this one, and Home and End go to the first and the last, as Radix's navigation menu does. In a 'Navigation', which holds them in a slot, the arrows are the navigation's, and move between its destinations under its 'arrows'. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'. */
+  /** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands.  It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write.  It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section. A pointer resting on the trigger opens the panel after 'open-delay', and leaving closes it after 'close-delay'. Moving from one open panel's trigger to another's opens the next at once, as Radix's 'skipDelayDuration' does.  When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it.  While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next.  While a link in the panel carries 'aria-current="page"', the host has ':state(current)', so the trigger of the section holding the page you are on can say so, as Radix's navigation menu marks its active link.  The panel's default slot is the 'columns' part and draws no box, so a sheet can give the columns one of their own. While a panel is open, an 'indicator' slot is rendered beside its trigger, as Radix's indicator marks the open one: slot a mark of your own, such as a bar or an arrow pointing at the panel, and it shows only while the panel is open. The styled tier rests it on the trigger's bottom edge.  Left and Right Arrow move between the triggers of the megamenus beside this one, and Home and End go to the first and the last, as Radix's navigation menu does. In a 'Navigation', which holds them in a slot, the arrows are the navigation's, and move between its destinations under its 'arrows'. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'.  A Helix trigger, such as 'helix-button', is told whether the panel is open inside its own shadow root. On a plain element, such as a '<button>', the megamenu writes 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes it where you wrote 'aria-expanded' yourself. */
   "helix-headless-megamenu": DefineCustomElement<
     HelixHeadlessMegamenu,
     HelixHeadlessMegamenuVueProps,
     HelixHeadlessMegamenuVueEvents
   >;
-  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
+  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
   "helix-headless-menu-item": DefineCustomElement<
     HelixHeadlessMenuItem,
     HelixHeadlessMenuItemVueProps,
     HelixHeadlessMenuItemVueEvents
   >;
-  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open. A plain '<button>' can only be told by writing attributes onto your markup, which the menu does not do, so give it 'aria-haspopup="menu"' and set its 'aria-expanded' from the 'toggle' event.  Submenus drill down. A submenu replaces the panel's content, and a back row returns to the previous page. One panel avoids the diagonal pointer path that side-by-side panels need, stays inside a narrow window, and works on touch screens, which have no hover.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page, and Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. */
+  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page, and Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -18543,7 +18621,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationVueProps,
     HelixHeadlessNotificationVueEvents
   >;
-  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a row, moves to the next or the previous row. | | Home, End | On a row, moves to the first or the last row. | | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. | | Control+End | From anywhere in the feed, moves to the first control after it on the page. | | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. | | Tab | Moves through the controls in a row, and on out of the feed. |  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing.  **'load-error' says a page could not be fetched**, such as "Could not load notifications": it shows under the rows there are, in the 'error' part, in place of the empty and loading lines, and a screen reader hears it. Clear it when you ask again. */
+  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a row, moves to the next or the previous row. | | Home, End | On a row, moves to the first or the last row. | | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. | | Control+End | From anywhere in the feed, moves to the first control after it on the page. | | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. | | Tab | Moves through the controls in a row, and on out of the feed. |  **A notification that arrives says so.** Unread rows added above the rows there were are counted in the live region, "1 new notification", in 'arrived-label'. Rows that arrive while 'loading' is set say nothing, so set it while a page is on its way.  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing.  **'load-error' says a page could not be fetched**, such as "Could not load notifications": it shows under the rows there are, in the 'error' part, in place of the empty and loading lines, and a screen reader hears it. Clear it when you ask again. */
   "helix-headless-notifications": DefineCustomElement<
     HelixHeadlessNotifications,
     HelixHeadlessNotificationsVueProps,
@@ -18837,13 +18915,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineVueProps,
     HelixHeadlessTimelineVueEvents
   >;
-  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds. It pauses while the pointer or focus is on the message, and while the page is hidden, so a message is not spent in a background tab.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. The region says each message once as it arrives, a 'danger' one assertively, so a message is never a live region of its own.  A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
+  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds. It pauses while the pointer or focus is on the message, and while the page is hidden, so a message is not spent in a background tab.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. The region says each message once as it arrives, a 'danger' one assertively, so a message is never a live region of its own.  A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'.  **Escape dismisses the message holding focus**, through the same 'helix-dismiss', and focus moves to the next message.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
   "helix-headless-toast-item": DefineCustomElement<
     HelixHeadlessToastItem,
     HelixHeadlessToastItemVueProps,
     HelixHeadlessToastItemVueEvents
   >;
-  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on.  **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack. */
+  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on.  **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack.  **'max-visible' limits how many messages show at once**, as Zag's 'max' does. The messages after that many, in document order, wait: each is hidden, its timer has not started, and the region says it once it shows, when a message before it goes. A waiting message has ':state(waiting)'.  **Keyboard.**  | Key | What it does | |---|---| | F8, or your 'hotkey' | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. | | Tab, Shift+Tab | Moves between the controls of the messages. | | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. | */
   "helix-headless-toast": DefineCustomElement<
     HelixHeadlessToast,
     HelixHeadlessToastVueProps,

package/types/words.d.ts

@@ -2228,6 +2228,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Loading`
        */
       loadingText: Message
+      /**
+       * The description a trigger gives under `open-on="long-press"`, saying how
+       * to open the menu. Translate it with the rest of your interface.
+       *
+       * English: `Long press or press Alt+Down to show the menu`
+       */
+      longPressLabel: Message
     }
     'helix-meter': {
       /**
@@ -2275,6 +2282,13 @@ declare module '@fusion.dev/helix-core' {
       unreadLabel: Message
     }
     'helix-notifications': {
+      /**
+       * What the feed says when unread notifications arrive, with `{count}` the
+       * number of them. Empty it to say nothing.
+       *
+       * English: `{count, plural, one {# new notification} other {# new notifications}}`
+       */
+      arrivedLabel: Message
       /**
        * The text shown and announced when there are no rows and none are loading.
        *