@gjsify/adwaita-web 0.14.0 → 0.15.1

package/package.json

@@ -1,15 +1,19 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.14.0",
+    "version": "0.15.1",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
-    "main": "src/index.ts",
-    "types": "src/index.ts",
+    "main": "./src/index.ts",
+    "types": "./lib/types/index.d.ts",
     "exports": {
         ".": {
-            "types": "./src/index.ts",
+            "types": "./lib/types/index.d.ts",
             "default": "./src/index.ts"
         },
+        "./source-view": {
+            "types": "./lib/types/source-view/index.d.ts",
+            "default": "./src/source-view/index.ts"
+        },
         "./style.css": {
             "types": "./style.css.d.ts",
             "default": "./dist/adwaita-web.css"
@@ -25,29 +29,35 @@
         "style.css.d.ts"
     ],
     "scripts": {
-        "clear": "rm -rf lib dist tsconfig.tsbuildinfo scss/_icons.generated.scss || exit 0",
+        "clear": "rm -rf lib dist tsconfig.tsbuildinfo scss/_icons.generated.scss src/styles.generated.ts || exit 0",
         "check": "gjsify run build:scss && gjsify tsc --noEmit",
-        "build": "gjsify run build:scss && gjsify run build:gjsify && gjsify run build:types",
+        "build": "gjsify run build:scss && gjsify run build:types",
         "build:scss": "node scripts/build-scss.mjs",
-        "build:gjsify": "gjsify build --library 'src/**/*.ts' --exclude 'src/**/*.spec.ts'",
         "build:types": "gjsify tsc"
     },
     "dependencies": {
-        "@gjsify/adwaita-fonts": "^0.14.0",
-        "@gjsify/adwaita-icons": "^0.14.0"
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@gjsify/adwaita-fonts": "^0.15.1",
+        "@gjsify/adwaita-icons": "^0.15.1",
+        "@lezer/highlight": "^1.0.0"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.14.0",
+        "@gjsify/cli": "^0.15.1",
         "sass": "^1.100.0",
         "typescript": "^6.0.3"
     },
     "gjsify": {
+        "buildCache": false,
         "runtimes": {
             "gjs": "none",
             "node": "none",
             "browser": "polyfill",
             "nativescript": "none"
-        }
+        },
+        "tier": 2
     },
     "license": "MIT",
     "repository": {

package/scss/_menu_button.scss

@@ -0,0 +1,151 @@
+// _menu_button.scss — adw-menu-button styling: a flat (or circular) icon button
+// that drops an Adwaita-styled popover menu (the web counterpart of
+// Adw.MenuButton / Gtk.MenuButton). The button mirrors libadwaita's flat/circular
+// `menubutton > button`; the popover reproduces `popover.menu > contents` with
+// its soft triple-shadow surface and `modelbutton`-style item rows.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss (menubutton flat/circular)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_popovers.scss (popover > contents)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_menus.scss (popover.menu modelbutton)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+.adw-menu-button {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    vertical-align: middle;
+
+    // The icon button — square with the button radius by default.
+    .adw-menu-button-button {
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 34px;
+        min-height: 34px;
+        margin: 0;
+        padding: 0 8px;
+        border: none;
+        border-radius: var(--button-radius);
+        background-color: var(--button-bg-color);
+        color: var(--window-fg-color);
+        cursor: pointer;
+        transition: background-color 0.1s ease;
+
+        .adw-menu-button-icon {
+            width: 16px;
+            height: 16px;
+            flex: none;
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
+
+        &:active {
+            background-color: var(--button-active-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: 1px;
+        }
+    }
+
+    // Flat — no resting fill (the header app-menu idiom).
+    &.flat .adw-menu-button-button {
+        background-color: transparent;
+    }
+
+    // The open state keeps a subtle fill so the button reads as "checked".
+    &.active .adw-menu-button-button {
+        background-color: var(--button-active-color);
+    }
+
+    // Circular — a round 34×34 button (window-control / FAB idiom).
+    &.circular .adw-menu-button-button {
+        padding: 0;
+        border-radius: 9999px;
+    }
+
+    &.disabled {
+        opacity: 0.45;
+
+        .adw-menu-button-button {
+            cursor: default;
+            pointer-events: none;
+        }
+    }
+
+    // --- Popover menu ---
+    // The elevated menu surface below the button, right-aligned like a header-end
+    // app menu. Reproduces libadwaita's popover.menu > contents.
+    .adw-menu-button-popover {
+        position: absolute;
+        top: calc(100% + 6px);
+        right: 0;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        min-width: 200px;
+        padding: var(--spacing-xs);
+        border-radius: var(--card-radius);
+        background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
+        color: var(--popover-fg-color, var(--window-fg-color));
+        box-shadow:
+            0 0 0 1px rgba(0, 0, 0, 0.05),
+            0 1px 5px 1px rgba(0, 0, 0, 0.09),
+            0 2px 14px 3px rgba(0, 0, 0, 0.05);
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    // Optional section heading atop the menu (libadwaita label.title).
+    .adw-menu-button-title {
+        padding: 4px var(--spacing-s) 6px;
+        font-weight: 700;
+        opacity: var(--dim-opacity);
+    }
+
+    // A menu item row — a flat rounded row that fills on hover/active.
+    .adw-menu-button-item {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-xs);
+        width: 100%;
+        min-height: 32px;
+        margin: 0;
+        padding: var(--spacing-xs) var(--spacing-s);
+        border: none;
+        border-radius: calc(var(--button-radius) - 2px);
+        background-color: transparent;
+        color: inherit;
+        font-family: var(--font-family);
+        font-size: var(--font-size-base);
+        text-align: start;
+        cursor: pointer;
+        transition: background-color 0.1s ease;
+
+        .adw-menu-button-item-icon {
+            width: 16px;
+            height: 16px;
+            flex: none;
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
+
+        &:active {
+            background-color: var(--button-active-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: -2px;
+        }
+    }
+}

package/scss/_root.scss

@@ -0,0 +1,22 @@
+// _root.scss — opt-in page surface for chrome-less layouts.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss (surface tokens)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: original opt-in helper for @gjsify/adwaita-web.
+//
+// The components theme via the `--window-*` CSS custom properties, but only
+// `adw-window` actually PAINTS the window surface (background + text colour).
+// A page laid out WITHOUT an `<adw-window>` (e.g. a plain browser view that
+// hosts rows/cards directly) therefore renders on the browser default (white)
+// and its native form controls / scrollbars don't follow the light/dark scheme.
+//
+// Applying `.adw-root` to `<body>` (or `<html>` / the `:root` element) binds the
+// Adwaita window surface + `color-scheme: light dark` to the document, so a
+// window-less layout is themed exactly like the components inside it. This is
+// OPT-IN and additive — it does not change any component's own styling.
+.adw-root {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  color-scheme: light dark;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+}

package/scss/_theme.scss

@@ -18,6 +18,9 @@
   --card-fg-color: #ffffff;
   --card-shade-color: rgba(0, 0, 6, 0.36);
   --accent-color: #78aeed;
+  --popover-bg-color: #36363a;
+  --popover-fg-color: #ffffff;
+  --popover-shade-color: rgba(0, 0, 6, 0.36);
   --button-bg-color: rgba(255, 255, 255, 0.1);
   --button-hover-color: rgba(255, 255, 255, 0.15);
   --button-active-color: rgba(255, 255, 255, 0.22);

package/scss/_variables.scss

@@ -37,6 +37,11 @@
   --accent-fg-color: #ffffff;
   --accent-color: #1c71d8;
 
+  // Popover (menus, dropdowns) — an elevated surface above the window.
+  --popover-bg-color: #ffffff;
+  --popover-fg-color: rgba(0, 0, 6, 0.8);
+  --popover-shade-color: rgba(0, 0, 6, 0.07);
+
   // Buttons
   --button-bg-color: rgba(0, 0, 6, 0.08);
   --button-hover-color: rgba(0, 0, 6, 0.13);

package/scss/_view_stack.scss

@@ -0,0 +1,29 @@
+// _view_stack.scss — adw-view-stack styling: a standalone named-page content
+// container that shows exactly one page at a time (the web counterpart of
+// Adw.ViewStack, decoupled from any switcher). It carries no chrome of its own —
+// a paired adw-view-switcher-bar (or a header-bar switcher) drives selection.
+// Reference: refs/libadwaita/src/adw-view-stack.c (AdwViewStack)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-view-stack {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    // vexpand-equivalent — fill the space a switcher shell allots to content.
+    flex: 1 1 auto;
+    min-height: 0;
+
+    // Exactly one child is shown; the rest are laid out of flow. `hidden` is set
+    // in JS too, but the class keeps the visible page a flex child that grows.
+    .adw-view-stack-child {
+        display: none;
+
+        &.active-view {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+        }
+    }
+}

package/scss/_view_switcher_bar.scss

@@ -0,0 +1,94 @@
+// _view_switcher_bar.scss — adw-view-switcher-bar styling: the narrow BOTTOM
+// bar of homogeneous icon-over-label buttons bound to an adw-view-stack (the web
+// counterpart of Adw.ViewSwitcherBar). It sits at the window bottom with a top
+// hairline over a headerbar-toned surface, mirroring libadwaita's `.narrow`
+// view-switcher inside an actionbar. The active button's label is accent-tinted.
+// Reference: refs/libadwaita/src/adw-view-switcher-bar.c (AdwViewSwitcherBar)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_view-switcher.scss (.narrow policy)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss (actionbar top border)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-view-switcher-bar {
+    display: block;
+    box-sizing: border-box;
+    // The bottom bar over a headerbar-toned surface with a top hairline (the
+    // libadwaita `actionbar` inset top border), NOT a bottom border.
+    background-color: var(--headerbar-bg-color);
+    border-top: 1px solid var(--separator-color);
+    padding: 7px 0; // libadwaita `viewswitcherbar > box` vertical padding
+
+    // The homogeneous button row — every button gets equal width.
+    .adw-view-switcher-bar-box {
+        display: flex;
+        align-items: stretch;
+        // The `.narrow` view-switcher drops to a 6px min-height (icon-over-label).
+        min-height: 6px;
+    }
+
+    // Each button — icon stacked above a small label, a flat transparent toggle
+    // that fills on hover/active and marks the selected page with an accent
+    // label (the neutral fill stays the same across states, like libadwaita).
+    .adw-view-switcher-bar-button {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex: 1 1 0; // homogeneous — equal width
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1px;
+        margin: 0;
+        padding: 4px 3px 2px;
+        border: none;
+        border-radius: var(--button-radius);
+        background-color: transparent;
+        color: var(--window-fg-color);
+        font-family: var(--font-family);
+        font-size: 0.75rem;
+        font-weight: 700;
+        line-height: 1.2;
+        cursor: pointer;
+        transition:
+            color 0.2s ease,
+            background-color 0.2s ease;
+        user-select: none;
+        -webkit-user-select: none;
+
+        .adw-view-switcher-bar-icon {
+            width: 16px;
+            height: 16px;
+            flex: none;
+        }
+
+        .adw-view-switcher-bar-label {
+            min-height: 18px;
+            line-height: 18px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
+
+        &:active {
+            background-color: var(--button-active-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: -2px;
+        }
+
+        // The selected page — its label turns accent-coloured. (The icon stays
+        // theme-fg, matching the NS twin's documented fidelity note.)
+        &.active {
+            color: var(--accent-color);
+
+            .adw-view-switcher-bar-label {
+                color: var(--accent-color);
+            }
+        }
+    }
+}

package/scss/adwaita-skin.scss

@@ -9,12 +9,14 @@
 @use 'icons.generated';
 @use 'variables';
 @use 'theme';
+@use 'root';
 @use 'window';
 @use 'headerbar';
 @use 'window_title';
 @use 'button';
 @use 'button_content';
 @use 'split_button';
+@use 'menu_button';
 @use 'toggle_group';
 @use 'entry';
 @use 'preferences';
@@ -42,6 +44,8 @@
 @use 'tab_view';
 @use 'view_switcher';
 @use 'inline_view_switcher';
+@use 'view_stack';
+@use 'view_switcher_bar';
 @use 'navigation_view';
 @use 'bottom_sheet';
 @use 'sidebar';

package/src/elements/adw-menu-button.ts

@@ -0,0 +1,247 @@
+// <adw-menu-button> — An icon button that opens a popover menu, the web
+// counterpart of Adw.MenuButton / a Gtk.MenuButton. By default it is the flat
+// `open-menu-symbolic` primary/app-menu button used at the end of a header bar
+// (About / Preferences / Keyboard Shortcuts / Quit …). Clicking it toggles a
+// real Adwaita-styled popover positioned under the button; the popover is
+// dismissed on an outside click or Escape and supports arrow-key navigation.
+//
+// Attributes:
+//   icon-name  — symbolic icon (no `-symbolic` suffix), default `open-menu`.
+//   menu-title — optional heading shown atop the popover.
+//   menu       — JSON array of items, each `{ "id"?, "label", "icon"? }`.
+//   disabled   — boolean; a disabled button does not open the menu.
+//   flat       — boolean style class (default: flat, like the header app menu).
+//   circular   — boolean style class (round 34×34 button).
+// Properties (mirroring Adw.MenuButton / the NS twin):
+//   menuItems  — the menu entries ({ id?, label, icon? }[]) (get/set).
+//   menuTitle  — the popover heading (get/set).
+//   active     — whether the popover is open (get).
+// Events:
+//   `menu-item-activated` (CustomEvent, bubbles, detail = { id, label, index })
+//     when an item is chosen — `id` falls back to `label` when omitted (matches
+//     the NS twin). The popover closes on activation.
+// Reference: refs/libadwaita/src/adw-menu-button.c (AdwMenuButton)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_menus.scss (popover.menu / modelbutton)
+// Reference: packages/nativescript-bridge/adwaita/src/widgets/adw-menu-button.ts (NS twin)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+/** A menu entry. `id` defaults to `label` on activation; `icon` is optional. */
+export interface AdwMenuItem {
+    id?: string;
+    label: string;
+    icon?: string;
+}
+
+export class AdwMenuButton extends HTMLElement {
+    private _buttonEl!: HTMLButtonElement;
+    private _popoverEl!: HTMLDivElement;
+    private _items: AdwMenuItem[] = [];
+    private _menuTitle = '';
+    private _active = false;
+    private _initialized = false;
+    private _itemButtons: HTMLButtonElement[] = [];
+    private _onDocumentPointerDown = (event: Event): void => {
+        if (!this.contains(event.target as Node)) this._setActive(false);
+    };
+    private _onDocumentKeyDown = (event: KeyboardEvent): void => {
+        if (event.key === 'Escape') {
+            this._setActive(false);
+            this._buttonEl.focus();
+        }
+    };
+
+    static get observedAttributes() {
+        return ['icon-name', 'menu-title', 'menu', 'disabled', 'flat', 'circular'];
+    }
+
+    /** Whether the popover menu is currently open. */
+    get active(): boolean {
+        return this._active;
+    }
+
+    /** The menu entries. Setting rebuilds the popover. */
+    get menuItems(): AdwMenuItem[] {
+        return this._items;
+    }
+
+    set menuItems(value: AdwMenuItem[]) {
+        this._items = Array.isArray(value) ? value.map((it) => ({ ...it })) : [];
+        if (this._initialized) this._renderMenu();
+    }
+
+    /** The optional popover heading. */
+    get menuTitle(): string {
+        return this.getAttribute('menu-title') ?? this._menuTitle;
+    }
+
+    set menuTitle(value: string) {
+        this._menuTitle = value ?? '';
+        this.setAttribute('menu-title', this._menuTitle);
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        this.classList.add('adw-menu-button');
+
+        this._buttonEl = document.createElement('button');
+        this._buttonEl.type = 'button';
+        this._buttonEl.className = 'adw-menu-button-button';
+        this._buttonEl.setAttribute('aria-haspopup', 'menu');
+        this._buttonEl.setAttribute('aria-expanded', 'false');
+
+        this._popoverEl = document.createElement('div');
+        this._popoverEl.className = 'adw-menu-button-popover';
+        this._popoverEl.setAttribute('role', 'menu');
+        this._popoverEl.hidden = true;
+        this._popoverEl.addEventListener('keydown', (e) => this._onMenuKeyDown(e));
+
+        this.replaceChildren(this._buttonEl, this._popoverEl);
+
+        this._buttonEl.addEventListener('click', () => {
+            if (this.hasAttribute('disabled')) return;
+            this._setActive(!this._active);
+        });
+
+        // Seed items from the `menu` attribute if the property was not set.
+        if (this._items.length === 0) this._items = this._parseMenuAttr();
+        // Default to the flat header idiom unless another variant is requested.
+        // Set only now the DOM exists, so the observed-attribute callback (which
+        // renders) never runs before `_buttonEl` is created.
+        if (!this.hasAttribute('flat') && !this.hasAttribute('circular')) this.setAttribute('flat', '');
+        this._render();
+    }
+
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this._onDocumentPointerDown);
+        document.removeEventListener('keydown', this._onDocumentKeyDown);
+    }
+
+    attributeChangedCallback(name: string) {
+        if (!this._initialized || !this._buttonEl) return;
+        if (name === 'menu') {
+            this._items = this._parseMenuAttr();
+            this._renderMenu();
+            return;
+        }
+        this._render();
+    }
+
+    private _parseMenuAttr(): AdwMenuItem[] {
+        const raw = this.getAttribute('menu');
+        if (!raw) return [];
+        try {
+            const parsed: unknown = JSON.parse(raw);
+            if (!Array.isArray(parsed)) return [];
+            return parsed
+                .filter((e): e is AdwMenuItem => typeof e === 'object' && e !== null && 'label' in e)
+                .map((e) => ({ id: e.id, label: String(e.label), icon: e.icon }));
+        } catch {
+            return [];
+        }
+    }
+
+    private _setActive(active: boolean): void {
+        if (this._active === active) return;
+        // Only open when there is something to show.
+        if (active && this._items.length === 0) return;
+        this._active = active;
+        this._popoverEl.hidden = !active;
+        this.classList.toggle('active', active);
+        this._buttonEl.setAttribute('aria-expanded', String(active));
+        if (active) {
+            document.addEventListener('pointerdown', this._onDocumentPointerDown);
+            document.addEventListener('keydown', this._onDocumentKeyDown);
+            // Move focus into the menu for keyboard navigation.
+            this._itemButtons[0]?.focus();
+        } else {
+            document.removeEventListener('pointerdown', this._onDocumentPointerDown);
+            document.removeEventListener('keydown', this._onDocumentKeyDown);
+        }
+    }
+
+    private _onMenuKeyDown(event: KeyboardEvent): void {
+        const buttons = this._itemButtons;
+        if (buttons.length === 0) return;
+        const current = buttons.indexOf(document.activeElement as HTMLButtonElement);
+        let next = -1;
+        if (event.key === 'ArrowDown') next = (current + 1) % buttons.length;
+        else if (event.key === 'ArrowUp') next = (current - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home') next = 0;
+        else if (event.key === 'End') next = buttons.length - 1;
+        else return;
+        event.preventDefault();
+        buttons[next]?.focus();
+    }
+
+    private _render(): void {
+        const disabled = this.hasAttribute('disabled');
+        this.classList.toggle('disabled', disabled);
+        this._buttonEl.disabled = disabled;
+        this.classList.toggle('flat', this.hasAttribute('flat'));
+        this.classList.toggle('circular', this.hasAttribute('circular'));
+
+        const icon = (this.getAttribute('icon-name') ?? 'open-menu').replace(/-symbolic$/, '');
+        this._buttonEl.replaceChildren();
+        const iconEl = document.createElement('span');
+        iconEl.className = `adw-icon adw-menu-button-icon${icon ? ` adw-icon--${icon}` : ''}`;
+        iconEl.setAttribute('aria-hidden', 'true'); // decorative (mask-image only)
+        this._buttonEl.appendChild(iconEl);
+        this._buttonEl.setAttribute('aria-label', this.getAttribute('menu-title') || 'Menu');
+
+        this._renderMenu();
+    }
+
+    private _renderMenu(): void {
+        this._popoverEl.replaceChildren();
+        this._itemButtons = [];
+
+        const title = this.getAttribute('menu-title') ?? this._menuTitle;
+        if (title) {
+            const titleEl = document.createElement('div');
+            titleEl.className = 'adw-menu-button-title';
+            titleEl.textContent = title;
+            this._popoverEl.appendChild(titleEl);
+        }
+
+        for (const [index, entry] of this._items.entries()) {
+            const item = document.createElement('button');
+            item.type = 'button';
+            item.className = 'adw-menu-button-item';
+            item.setAttribute('role', 'menuitem');
+            item.tabIndex = -1;
+
+            const iconName = (entry.icon ?? '').replace(/-symbolic$/, '');
+            if (iconName) {
+                const iconEl = document.createElement('span');
+                iconEl.className = `adw-icon adw-menu-button-item-icon adw-icon--${iconName}`;
+                iconEl.setAttribute('aria-hidden', 'true');
+                item.appendChild(iconEl);
+            }
+            const labelEl = document.createElement('span');
+            labelEl.className = 'adw-menu-button-item-label';
+            labelEl.textContent = entry.label;
+            item.appendChild(labelEl);
+
+            item.addEventListener('click', () => {
+                this._setActive(false);
+                this._buttonEl.focus();
+                this.dispatchEvent(
+                    new CustomEvent('menu-item-activated', {
+                        bubbles: true,
+                        detail: { id: entry.id ?? entry.label, label: entry.label, index },
+                    }),
+                );
+            });
+            this._popoverEl.appendChild(item);
+            this._itemButtons.push(item);
+        }
+
+        // A menu-button with no entries can never open.
+        if (this._items.length === 0) this._setActive(false);
+    }
+}
+
+customElements.define('adw-menu-button', AdwMenuButton);