@fusion.dev/helix-headless 0.156.0 → 0.157.0

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

@@ -25,6 +25,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * `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".
@@ -43,7 +53,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixSelectEvent} helix-select - Fired when the row is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
- * @csspart item - The row itself.
+ * @csspart item - The row itself, which is an `<a>` where `href` is set.
  * @csspart label - The row's label.
  * @csspart mark - The caret at the end of a row that opens a page, after the `end` slot. The caret points, so a stylesheet mirrors it in a right-to-left document.
  */
@@ -52,6 +62,11 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * Whether the row can be reached at all.
      */
     disabled: boolean;
+    /**
+     * 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: boolean;
     /**
      * Whether this row holds the region's tab stop. Set by the drill-down.
      *
@@ -66,6 +81,16 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * lands inside this shadow root instead.
      */
     focusable: boolean;
+    /**
+     * The URL the row links to. Setting it renders the row as a link, unless the
+     * row opens a page or is disabled.
+     */
+    href: string;
+    /**
+     * @internal Whether the row is a list item of a drilldown with
+     * `navigation`. Written by the stack.
+     */
+    listed: boolean;
     /**
      * @internal Read by a parent to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
@@ -83,11 +108,19 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * level. Written by the stack.
      */
     onPath: boolean;
+    /**
+     * The link's `rel`. Set it whenever you set `target="_blank"`.
+     */
+    rel: string;
     /**
      * @internal Whether this row's own page is the one showing. Written by the
      * stack.
      */
     showingPage: boolean;
+    /**
+     * Where the link opens, for rows that should open outside the current page.
+     */
+    target: string;
     /**
      * Identifies the row to your event listeners.
      */
@@ -113,6 +146,7 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * that skipped.
      */
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * Re-reads whether a page is slotted, from whichever `page` slot is current.
@@ -154,6 +188,20 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
     get selected(): boolean;
     /** Fires `helix-select` for this row. */
     select(): void;
+    /** Fires `helix-select`, and returns whether the choice stood. */
+    private choose;
+    /**
+     * A press on the row. On a link, a refused `helix-select` stops the link
+     * from being followed, so a router can take the navigation.
+     */
+    private readonly handleClick;
+    /**
+     * Space on a link presses it, which an anchor does not do on its own. Enter
+     * is the anchor's, which fires a click and follows the link.
+     */
+    private readonly handleLinkKeydown;
+    /** Whether the row renders as a link. */
+    private get linked();
     /**
      * The caret of a row that opens a page, as the `chevron` slot's fallback, so
      * an icon of your own replaces it by being slotted.

package/dist/drilldown/item/drilldown-item.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
+import { auditName, customElement, deepActiveElement, HelixElement, HelixSelectEvent, hostAria, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -13,11 +13,16 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.download = false;
         this.focusable = false;
+        this.href = '';
+        this.listed = false;
         this.isDrilldownItem = true;
         this.onPage = true;
         this.onPath = false;
+        this.rel = '';
         this.showingPage = false;
+        this.target = '';
         this.value = '';
         this.page = false;
         this.description = false;
@@ -30,9 +35,23 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
             this.description = slotFilled(slotNamed(this.renderRoot, 'description'));
             this.end = slotFilled(slotNamed(this.renderRoot, 'end'));
         };
+        this.handleClick = (event) => {
+            if (!this.choose() && this.linked) {
+                event.preventDefault();
+            }
+        };
+        this.handleLinkKeydown = (event) => {
+            if (event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+            event.currentTarget.click();
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        const item = this.listed && this.onPage && !this.showingPage && !this.onPath;
+        hostAria(this.internals, { role: item ? 'listitem' : '' });
         if (this.childrenKnown) {
             const named = (name) => this.knownChildren.some((child) => child.slot === name);
             this.page = named('page');
@@ -40,6 +59,12 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
             this.end = named('end');
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        if (this.partNamed('item')) {
+            auditName(this, () => this.partNamed('item'), 'Give the row words in its default slot, or a label on the icon it holds.');
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -61,10 +86,16 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         return this.active;
     }
     select() {
+        this.choose();
+    }
+    choose() {
         if (this.disabled) {
-            return;
+            return false;
         }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+        return this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+    }
+    get linked() {
+        return this.href !== '' && !this.disabled && !this.page;
     }
     renderMark() {
         return html `<slot name="chevron" aria-hidden="true"
@@ -80,18 +111,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         if (!this.onPage) {
             return nothing;
         }
-        return html `<button
-      part="item"
-      type="button"
-      role="menuitem"
-      aria-describedby=${this.describedBy}
-      aria-disabled=${this.disabled ? 'true' : nothing}
-      aria-haspopup=${this.page ? 'menu' : nothing}
-      tabindex=${this.focusable ? '0' : '-1'}
-      ?data-described=${this.description}
-      @click=${() => this.select()}
-    >
-      <slot name="start"></slot>
+        const inside = html `<slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot
         id="description"
@@ -101,26 +121,66 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         @slotchange=${this.readWords}
       ></slot>
       <slot id="end" name="end" aria-hidden="true" @slotchange=${this.readWords}></slot>
-      ${this.page ? this.renderMark() : nothing}
-    </button>
+      ${this.page ? this.renderMark() : nothing}`;
+        const row = this.linked
+            ? html `<a
+          part="item"
+          href=${this.href}
+          target=${this.target || nothing}
+          rel=${this.rel || nothing}
+          ?download=${this.download}
+          role=${this.listed ? nothing : 'menuitem'}
+          aria-describedby=${this.describedBy}
+          tabindex=${this.focusable ? '0' : '-1'}
+          ?data-described=${this.description}
+          @click=${this.handleClick}
+          @keydown=${this.handleLinkKeydown}
+        >${inside}</a>`
+            : html `<button
+          part="item"
+          type="button"
+          role=${this.listed ? nothing : 'menuitem'}
+          aria-describedby=${this.describedBy}
+          aria-disabled=${this.disabled ? 'true' : nothing}
+          aria-haspopup=${this.page && !this.listed ? 'menu' : nothing}
+          tabindex=${this.focusable ? '0' : '-1'}
+          ?data-described=${this.description}
+          @click=${this.handleClick}
+        >${inside}</button>`;
+        return html `${row}
     <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
     }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDrilldownItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDrilldownItem.prototype, "download", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "focusable", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldownItem.prototype, "href", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDrilldownItem.prototype, "listed", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "onPage", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "onPath", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldownItem.prototype, "rel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "showingPage", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldownItem.prototype, "target", void 0);
 __decorate([
     property()
 ], HelixHeadlessDrilldownItem.prototype, "value", void 0);

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

@@ -20,6 +20,11 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * 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
@@ -27,13 +32,25 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * 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.
+ * **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. The back button and the title sit above
+ * 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.
  *
@@ -46,6 +63,7 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @slot - The rows of the top page.
  * @slot back-icon - Replaces the icon on the back button.
  *
+ * @event {HelixNavigateEvent} helix-navigate - 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.
  * @event {HelixSelectEvent} helix-select - Fired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
  * @csspart back - The button that goes back one page.
@@ -79,6 +97,18 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * The text of the back button.
      */
     backLabel: string;
+    /**
+     * 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: boolean;
+    /**
+     * 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: string;
     /**
      * Which way the last move went, for whatever animates the change.
      *
@@ -138,6 +168,13 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * actually showing.
      */
     private placeTabStop;
+    /**
+     * Asks before a reader's move to a page, the row's or the top one, and
+     * returns whether the move may go ahead.
+     */
+    private navigate;
+    /** The row whose page holds a row, or null for the top page. */
+    private holderOf;
     /** Shows a row's page, and puts focus on the first row of it. */
     private enter;
     /**
@@ -149,11 +186,14 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * list they have already read.
      */
     back(): boolean;
+    /** Shows the page of the row with a value, or the top page where no row with a page has it. */
+    private showPage;
     private readonly handleFocusIn;
     private readonly handleSelect;
     private readonly handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Writes which way the last move went. After a move, the marks come off and

package/dist/drilldown/root/drilldown-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, HelixNavigateEvent, hostAria, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -15,6 +15,8 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         super(...arguments);
         this.label = 'Navigation';
         this.backLabel = 'Back';
+        this.navigation = false;
+        this.page = '';
         this.moved = false;
         this.drilldown = new DrilldownController(this, {
             isRow: (element) => 'isDrilldownItem' in element && element.isDrilldownItem === true,
@@ -97,24 +99,50 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             item.focusable = item === stop;
         }
     }
+    navigate(to) {
+        return this.dispatchEvent(new HelixNavigateEvent({ value: to?.value ?? '' }));
+    }
+    holderOf(row) {
+        const parent = row.parentElement;
+        return row.slot === 'page' && parent instanceof HelixHeadlessDrilldownItem ? parent : null;
+    }
     enter(item) {
-        if (!this.drilldown.enter(item)) {
+        if (!this.drilldown.hasPage(item) || !this.navigate(item) || !this.drilldown.enter(item)) {
             return;
         }
+        this.page = item.value;
         this.direction = 'forward';
         this.moved = true;
         this.updateComplete.then(() => this.items[0]?.focusItem());
     }
     back() {
         const leaving = this.drilldown.page;
-        if (!this.drilldown.back()) {
+        if (leaving === null) {
+            return false;
+        }
+        const to = this.holderOf(leaving);
+        if (!this.navigate(to) || !this.drilldown.back()) {
             return false;
         }
+        this.page = to?.value ?? '';
         this.direction = 'back';
         this.moved = true;
         this.updateComplete.then(() => leaving?.focusItem());
         return true;
     }
+    showPage(value) {
+        const row = value === ''
+            ? undefined
+            : [...this.querySelectorAll('*')].find((one) => one instanceof HelixHeadlessDrilldownItem &&
+                one.value === value &&
+                this.drilldown.hasPage(one));
+        if (row) {
+            this.drilldown.enter(row);
+        }
+        else {
+            this.drilldown.reset();
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelect, true);
@@ -127,6 +155,17 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('focusin', this.handleFocusIn);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has('page') && (this.drilldown.page?.value ?? '') !== this.page) {
+            this.showPage(this.page);
+            this.page = this.drilldown.page?.value ?? '';
+        }
+        hostAria(this.internals, {
+            label: this.navigation ? this.label : '',
+            role: this.navigation ? 'navigation' : '',
+        });
+    }
     updated(changed) {
         super.updated(changed);
         const page = this.drilldown.page;
@@ -162,6 +201,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
     }
     mark(item, page, onPage) {
         item.onPage = onPage;
+        item.listed = this.navigation;
         item.showingPage = item === page;
         item.onPath = page !== null && item !== page && item.contains(page);
         for (const child of item.children) {
@@ -188,10 +228,10 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
           </div>`}
       <div
         aria-busy=${this.loading ? 'true' : nothing}
-        aria-label=${this.drilldown.atRoot ? this.label || nothing : nothing}
+        aria-label=${this.drilldown.atRoot && !this.navigation ? this.label || nothing : nothing}
         aria-labelledby=${this.drilldown.atRoot ? nothing : 'title'}
         part="page"
-        role="menu"
+        role=${this.navigation ? 'list' : 'menu'}
       >
         <slot @slotchange=${(event) => this.countRows(event)}></slot>
         ${this.renderStatus(this.hasRows)}
@@ -206,6 +246,12 @@ __decorate([
     words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessDrilldown.prototype, "backLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDrilldown.prototype, "navigation", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldown.prototype, "page", void 0);
 __decorate([
     state()
 ], HelixHeadlessDrilldown.prototype, "direction", void 0);

package/dist/element-events.generated.js

@@ -93,7 +93,7 @@ registerElementEvents({
     'helix-headless-date-picker': ['change', 'helix-before-change', 'helix-navigate', 'input'],
     'helix-headless-dialog': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-headless-drilldown': ['helix-select'],
+    'helix-headless-drilldown': ['helix-navigate', 'helix-select'],
     'helix-headless-drilldown-item': ['helix-select'],
     'helix-headless-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-headless-filter-chip': ['helix-dismiss'],

package/dist/filter-input/menu/filter-menu.d.ts

@@ -74,6 +74,7 @@ import '../../menu/index.js';
  * @csspart entry-shortcut-key - One key of the shortcut's chord.
  * @csspart entry-shortcut-separator - The `+` between two keys of the shortcut, where the platform writes one.
  * @csspart entry-start - The leading column.
+ * @csspart entry-surface - The panel a row's submenu opens in beside it. The filter menu's rows have none.
  * @csspart menu - The menu the fields are offered in.
  * @csspart menu-back - The button that goes back from a field's page.
  * @csspart menu-back-mark - The icon on the back button.

package/dist/filter-input/menu/filter-menu.js

@@ -141,7 +141,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
           exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
           data-facet="field"
           data-field=${name}
         >
@@ -152,7 +152,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
                   slot="submenu"
                   data-facet="comparison"
                   data-field=${name}
@@ -163,7 +163,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
                       slot="submenu"
                       checkable
                       exclusive
@@ -188,7 +188,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
               exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
               slot="submenu"
               checkable
               ?exclusive=${using?.arity === 'one'}