@gjsify/adwaita-web 0.31.0 → 0.33.0

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

@@ -5,6 +5,20 @@
 // real Adwaita-styled popover positioned under the button; the popover is
 // dismissed on an outside click or Escape and supports arrow-key navigation.
 //
+// The popover is `<adw-popover>` and the dismissal/keyboard machine is
+// `@gjsify/adwaita-core`'s (ADR 0004). This element used to build both by hand,
+// as did `<adw-drop-down>` and `<adw-split-button>` — three surfaces that
+// disagreed with libadwaita and with each other on radius, shadow and padding,
+// and two copies of the same `(current ± 1 + n) % n` arithmetic. This element
+// keeps only what is a menu button: the icon, the item model, the title.
+//
+// THE ICON WENT THE SAME WAY, and it is where the drift actually bit: this
+// element interpolated `class="adw-icon adw-menu-button-icon adw-icon--<name>"`
+// while `<adw-split-button>` — alone among six copies — first checked the name
+// was one CSS token. So `icon-name="a b"` shipped a stray `b` class here, and so
+// did every JSON menu entry's `icon`. Both are `<adw-icon>` now, and the guard
+// is `normalizeIconName`'s.
+//
 // Attributes:
 //   icon-name  — symbolic icon (no `-symbolic` suffix), default `open-menu`.
 //   menu-title — optional heading shown atop the popover.
@@ -12,6 +26,10 @@
 //   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).
+//   direction  — none | up | down | left | right (default down); where the
+//                popover opens. `none` behaves as `down`, which is
+//                Gtk.MenuButton's own rule, not ours — see
+//                {@link menuButtonPopupDirection}.
 // Properties (mirroring Adw.MenuButton / the NS twin):
 //   menuItems  — the menu entries ({ id?, label, icon? }[]) (get/set).
 //   menuTitle  — the popover heading (get/set).
@@ -26,6 +44,21 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
+import { isSplitButtonDirection, menuButtonPopupDirection } from '@gjsify/adwaita-core';
+import type { SplitButtonDirection } from '@gjsify/adwaita-core';
+
+// SIDE-EFFECT import, deliberately separate from the type import below: it is
+// what guarantees `adw-popover` is defined before this module's own
+// `customElements.define` can upgrade a server-rendered `<adw-menu-button>` and
+// build one. A combined `import { AdwPopover }` would NOT do it — the binding is
+// only ever used in type position here, and this package compiles without
+// `verbatimModuleSyntax`, so TypeScript would elide the whole statement and take
+// the registration with it.
+import './adw-popover.js';
+import type { AdwPopover } from './adw-popover.js';
+
+import { createAdwIcon } from './adw-icon.js';
+
 /** A menu entry. `id` defaults to `label` on activation; `icon` is optional. */
 export interface AdwMenuItem {
     id?: string;
@@ -33,31 +66,38 @@ export interface AdwMenuItem {
     icon?: string;
 }
 
+/**
+ * Where the popover sits, per `GtkArrowType`. `menuButtonPopupDirection` folds
+ * `none` onto `down` (adw-split-button.c:415 — a pass-through to
+ * `gtk_menu_button_set_direction`, so it is GtkMenuButton's rule); this table is
+ * only the direction→CSS-axis mapping, which is a renderer fact.
+ *
+ * `left`/`right` become `start`/`end` because the surface is placed with
+ * logical properties, so it follows the writing direction the way GTK's
+ * `:dir(rtl)` popovers do.
+ */
+const POPOVER_POSITIONS = {
+    down: 'bottom',
+    up: 'top',
+    left: 'start',
+    right: 'end',
+} as const;
+
 export class AdwMenuButton extends HTMLElement {
     private _buttonEl!: HTMLButtonElement;
-    private _popoverEl!: HTMLDivElement;
+    private _popoverEl!: AdwPopover;
     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'];
+        return ['icon-name', 'menu-title', 'menu', 'disabled', 'flat', 'circular', 'direction'];
     }
 
     /** Whether the popover menu is currently open. */
     get active(): boolean {
-        return this._active;
+        return this._popoverEl?.open ?? false;
     }
 
     /** The menu entries. Setting rebuilds the popover. */
@@ -80,6 +120,16 @@ export class AdwMenuButton extends HTMLElement {
         this.setAttribute('menu-title', this._menuTitle);
     }
 
+    /** Where the popover opens, and (via core) which way `none` folds. */
+    get direction(): SplitButtonDirection {
+        const value = this.getAttribute('direction');
+        return isSplitButtonDirection(value) ? value : 'down';
+    }
+
+    set direction(value: SplitButtonDirection) {
+        this.setAttribute('direction', value);
+    }
+
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;
@@ -92,17 +142,23 @@ export class AdwMenuButton extends HTMLElement {
         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 = document.createElement('adw-popover') as AdwPopover;
+        this._popoverEl.classList.add('adw-menu-button-popover');
         this._popoverEl.setAttribute('role', 'menu');
-        this._popoverEl.hidden = true;
-        this._popoverEl.addEventListener('keydown', (e) => this._onMenuKeyDown(e));
+        // `gtk_menu_button_set_menu_model` builds a GtkPopoverMenu, whose CSS
+        // node is `popover.menu` — the surface _menus.scss styles throughout.
+        this._popoverEl.setAttribute('menu', '');
+        this._popoverEl.setAttribute('align', 'end'); // the header-end app menu idiom
 
         this.replaceChildren(this._buttonEl, this._popoverEl);
+        this._popoverEl.anchor = this._buttonEl;
+        this._popoverEl.subscribe((open) => this._onPopoverToggled(open));
 
         this._buttonEl.addEventListener('click', () => {
             if (this.hasAttribute('disabled')) return;
-            this._setActive(!this._active);
+            // Nothing to show is not a menu — never open an empty popover.
+            if (!this._popoverEl.open && this._items.length === 0) return;
+            this._popoverEl.open = !this._popoverEl.open;
         });
 
         // Seed items from the `menu` attribute if the property was not set.
@@ -114,11 +170,6 @@ export class AdwMenuButton extends HTMLElement {
         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') {
@@ -143,52 +194,26 @@ export class AdwMenuButton extends HTMLElement {
         }
     }
 
-    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 _onPopoverToggled(open: boolean): void {
+        this.classList.toggle('active', open);
+        this._buttonEl.setAttribute('aria-expanded', String(open));
+        // Move focus into the menu for keyboard navigation.
+        if (open) this._itemButtons[0]?.focus();
     }
 
     private _render(): void {
         const disabled = this.hasAttribute('disabled');
         this.classList.toggle('disabled', disabled);
         this._buttonEl.disabled = disabled;
+        if (disabled) this._popoverEl.popdown();
         this.classList.toggle('flat', this.hasAttribute('flat'));
         this.classList.toggle('circular', this.hasAttribute('circular'));
+        this._popoverEl.position = POPOVER_POSITIONS[menuButtonPopupDirection(this.direction)];
 
-        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.appendChild(
+            createAdwIcon(this.getAttribute('icon-name') ?? 'open-menu', 'adw-menu-button-icon'),
+        );
         this._buttonEl.setAttribute('aria-label', this.getAttribute('menu-title') || 'Menu');
 
         this._renderMenu();
@@ -201,7 +226,7 @@ export class AdwMenuButton extends HTMLElement {
         const title = this.getAttribute('menu-title') ?? this._menuTitle;
         if (title) {
             const titleEl = document.createElement('div');
-            titleEl.className = 'adw-menu-button-title';
+            titleEl.className = 'adw-popover-title adw-menu-button-title';
             titleEl.textContent = title;
             this._popoverEl.appendChild(titleEl);
         }
@@ -209,24 +234,22 @@ export class AdwMenuButton extends HTMLElement {
         for (const [index, entry] of this._items.entries()) {
             const item = document.createElement('button');
             item.type = 'button';
-            item.className = 'adw-menu-button-item';
+            item.className = 'adw-popover-item 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);
-            }
+            // An entry with no USABLE icon gets no icon node at all, rather than
+            // an empty 16px box — the element itself answers whether the name
+            // resolved, so the `-symbolic`-only and bad-token cases agree.
+            const entryIcon = createAdwIcon(entry.icon ?? null, 'adw-menu-button-item-icon');
+            if (entryIcon.resolvedIconName !== '') item.appendChild(entryIcon);
             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._popoverEl.popdown();
                 this._buttonEl.focus();
                 this.dispatchEvent(
                     new CustomEvent('menu-item-activated', {
@@ -240,7 +263,7 @@ export class AdwMenuButton extends HTMLElement {
         }
 
         // A menu-button with no entries can never open.
-        if (this._items.length === 0) this._setActive(false);
+        if (this._items.length === 0) this._popoverEl.popdown();
     }
 }
 

package/src/elements/adw-navigation-split-view.ts

@@ -2,24 +2,74 @@
 // visible when expanded; when `collapsed` it shows one pane at a time
 // (`show-content` decides which), mirroring Adw.NavigationSplitView's
 // push-navigation on narrow widths.
-// Attributes: collapsed, show-content, min-sidebar-width, max-sidebar-width.
+//
+// Attributes: collapsed, show-content, sidebar-position, min-sidebar-width,
+//   max-sidebar-width, breakpoint (an Adwaita condition, e.g. "max-width: 720px",
+//   that collapses the view by itself — the counterpart to an Adw.Breakpoint
+//   add_setter()). A slotted pane may carry `tag`, which is
+//   `Adw.NavigationPage:tag`.
 // Slots: slot="sidebar", slot="content".
+//
+// The element used to toggle two CSS classes and nothing else, so THREE rules
+// from the C had no expression here at all: the navigation-stack ordering table
+// (a LONE child stays visible whatever `show-content` says; with
+// `sidebar-position: end` the CONTENT is the root page), the duplicate-tag
+// guard, and the `navigation.push` / `navigation.pop` routing that lets a nested
+// split view forward a push outwards. All three are `NavigationSplitViewState`
+// in `@gjsify/adwaita-core`, held to NAVIGATION_STACK_VECTORS,
+// NAVIGATION_SPLIT_VIEW_CRITICALS and NAVIGATION_ACTION_VECTORS — the last of
+// which had no consumer at all before this.
+//
 // Reference: refs/adwaita-web/adwaita-web/docs/widgets/navigationsplitview.md
+// Reference: refs/libadwaita/src/adw-navigation-split-view.c
 // Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
+import {
+    DEFAULT_MAX_SIDEBAR_WIDTH,
+    DEFAULT_MIN_SIDEBAR_WIDTH,
+    NavigationSplitViewState,
+    isSidebarAtVisualStart,
+    resolveSidebarBounds,
+    type AdwPackType,
+    type AdwTextDirection,
+    type NavigationActionResult,
+} from '@gjsify/adwaita-core';
+
+import { bindBreakpointSetter } from '../breakpoints.js';
+
+/** Detail of the `navigation-push` / `navigation-pop` delegation event. */
+export interface NavigationDelegateDetail {
+    /** The tag a `push` names; absent for a `pop`. */
+    tag?: string;
+    /** Set by an ancestor that handled it — the `return TRUE` of the C's routing. */
+    handled: boolean;
+}
+
 export class AdwNavigationSplitView extends HTMLElement {
     private _sidebarEl!: HTMLDivElement;
     private _contentEl!: HTMLDivElement;
     private _initialized = false;
+    private _disposeBreakpoint: (() => void) | undefined;
+    /** The ordering table, the tag guard and the action routing (ADR 0004). */
+    private _state = new NavigationSplitViewState();
+    /** Re-entrancy guard for the `show-content` reflection. */
+    private _reflecting = false;
 
     static get observedAttributes() {
-        return ['collapsed', 'show-content', 'min-sidebar-width', 'max-sidebar-width'];
+        return [
+            'collapsed',
+            'show-content',
+            'sidebar-position',
+            'min-sidebar-width',
+            'max-sidebar-width',
+            'breakpoint',
+        ];
     }
 
     get collapsed(): boolean {
-        return this.hasAttribute('collapsed');
+        return this._initialized ? this._state.collapsed : this.hasAttribute('collapsed');
     }
 
     set collapsed(v: boolean) {
@@ -28,13 +78,49 @@ export class AdwNavigationSplitView extends HTMLElement {
 
     /** When collapsed, whether the content pane (true) or sidebar (false) shows. */
     get showContent(): boolean {
-        return this.hasAttribute('show-content');
+        return this._initialized ? this._state.showContent : this.hasAttribute('show-content');
     }
 
     set showContent(v: boolean) {
         this.toggleAttribute('show-content', v);
     }
 
+    /** Which side the sidebar is packed on — `start` (default) or `end`. */
+    get sidebarPosition(): AdwPackType {
+        return this.getAttribute('sidebar-position') === 'end' ? 'end' : 'start';
+    }
+
+    set sidebarPosition(value: AdwPackType) {
+        this.setAttribute('sidebar-position', value);
+    }
+
+    /** The sidebar page's tag of record, or `null`. */
+    get sidebarTag(): string | null {
+        return this._state.sidebarTag;
+    }
+
+    /** The content page's tag of record, or `null`. */
+    get contentTag(): string | null {
+        return this._state.contentTag;
+    }
+
+    /**
+     * `navigation.push` with `tag` — `navigation_push_cb` (:644-685).
+     *
+     * An unmatched tag DELEGATES to the parent before it may become a critical,
+     * which is how nested split views forward a push outwards; on this port that
+     * is a bubbling `navigation-push` event whose `detail.handled` an ancestor
+     * sets. Returns what the routing decided.
+     */
+    push(tag: string): NavigationActionResult {
+        return this._state.push(tag);
+    }
+
+    /** `navigation.pop` — `navigation_pop_cb` (:687-702). */
+    pop(): NavigationActionResult {
+        return this._state.pop();
+    }
+
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;
@@ -51,18 +137,89 @@ export class AdwNavigationSplitView extends HTMLElement {
         for (const child of contentChildren) this._contentEl.appendChild(child);
 
         this.replaceChildren(this._sidebarEl, this._contentEl);
+
+        // Parse-time attributes are the CONSTRUCTION properties, for the same
+        // reason the overlay view treats them so: applying them as sequential
+        // setters would emit a transition for a state the markup simply declared.
+        this._state = new NavigationSplitViewState({
+            sidebarPosition: this.sidebarPosition,
+            collapsed: this.hasAttribute('collapsed'),
+            showContent: this.hasAttribute('show-content'),
+            // `g_critical` has no browser counterpart that a consumer can see;
+            // `console.error` is the one a developer reads, and the TEXT is the
+            // C's verbatim so a GTK bug report and a browser one say the same.
+            onCritical: (message) => console.error(message),
+            onDelegate: (action, tag) => {
+                const detail: NavigationDelegateDetail = { tag, handled: false };
+                this.dispatchEvent(new CustomEvent(`navigation-${action}`, { bubbles: true, detail }));
+                return detail.handled;
+            },
+        });
+        // Which children EXIST decides the stack, so the panes are mounted into
+        // the state, not merely into the DOM — a lone child stays visible
+        // whatever `show-content` says (:389-401), which two CSS classes cannot
+        // express.
+        this._state.setSidebar(sidebarChildren.length > 0 ? { tag: this._tagOf(sidebarChildren) } : null);
+        this._state.setContent(contentChildren.length > 0 ? { tag: this._tagOf(contentChildren) } : null);
+        this._state.subscribe(() => {
+            this._reflectShowContent();
+            this._syncClasses();
+        });
+
         this._syncWidth();
         this._syncClasses();
+        this._syncBreakpoint();
+    }
+
+    /** `Adw.NavigationPage:tag` off the slotted pane, or `null` when untagged. */
+    private _tagOf(children: readonly Element[]): string | null {
+        for (const child of children) {
+            const tag = child.getAttribute('tag');
+            if (tag !== null) return tag;
+        }
+        return null;
+    }
+
+    /**
+     * Mirror the state's `showContent` onto the attribute, so the DOM keeps
+     * telling the truth after a `navigation.push` moved it.
+     *
+     * Guarded the way the overlay view's reflection is: writing the attribute
+     * re-enters `attributeChangedCallback`, which without the flag is a loop.
+     */
+    private _reflectShowContent() {
+        if (this._reflecting) return;
+        const wanted = this._state.showContent;
+        if (this.hasAttribute('show-content') === wanted) return;
+        this._reflecting = true;
+        try {
+            this.toggleAttribute('show-content', wanted);
+        } finally {
+            this._reflecting = false;
+        }
+    }
+
+    disconnectedCallback() {
+        this._disposeBreakpoint?.();
+        this._disposeBreakpoint = undefined;
     }
 
     attributeChangedCallback(name: string) {
         if (!this._initialized) return;
-        if (name === 'min-sidebar-width' || name === 'max-sidebar-width') this._syncWidth();
-        else {
-            this._syncClasses();
-            // Collapsing flips whether the sidebar is width-capped, so re-apply.
+        if (name === 'breakpoint') {
+            this._syncBreakpoint();
+            return;
+        }
+        if (name === 'min-sidebar-width' || name === 'max-sidebar-width') {
             this._syncWidth();
+            return;
         }
+        if (name === 'collapsed') this._state.setCollapsed(this.hasAttribute('collapsed'));
+        if (name === 'show-content') this._state.setShowContent(this.hasAttribute('show-content'));
+        if (name === 'sidebar-position') this._state.setSidebarPosition(this.sidebarPosition);
+        this._syncClasses();
+        // Collapsing flips whether the sidebar is width-capped, so re-apply.
+        this._syncWidth();
     }
 
     private _syncWidth() {
@@ -74,15 +231,64 @@ export class AdwNavigationSplitView extends HTMLElement {
             this._sidebarEl.style.maxWidth = '';
             return;
         }
-        const min = this.getAttribute('min-sidebar-width');
-        const max = this.getAttribute('max-sidebar-width');
-        this._sidebarEl.style.minWidth = min ? `${parseFloat(min)}px` : '';
-        this._sidebarEl.style.maxWidth = max ? `${parseFloat(max)}px` : '';
+        // An ABSENT attribute used to mean "no bound at all", where
+        // Adw.NavigationSplitView always has 180 / 280
+        // (adw-navigation-split-view.c min-sidebar-width / max-sidebar-width).
+        // The core also normalises the pair — libadwaita never lets max fall
+        // below min, and CSS resolves that conflict the other way round.
+        const bounds = resolveSidebarBounds(
+            {
+                minSidebarWidth: this._widthAttr('min-sidebar-width', DEFAULT_MIN_SIDEBAR_WIDTH),
+                maxSidebarWidth: this._widthAttr('max-sidebar-width', DEFAULT_MAX_SIDEBAR_WIDTH),
+            },
+            0,
+            { ceil: true },
+        );
+        this._sidebarEl.style.minWidth = `${bounds.min}px`;
+        this._sidebarEl.style.maxWidth = `${bounds.max}px`;
+    }
+
+    /** A pixel attribute, falling back to the widget's own default. */
+    private _widthAttr(name: string, fallback: number): number {
+        const raw = this.getAttribute(name);
+        if (raw === null) return fallback;
+        const value = parseFloat(raw);
+        return Number.isFinite(value) ? value : fallback;
+    }
+
+    /** The reading direction `start` / `end` resolve against (`get_start_or_end`, :220-227). */
+    private get _direction(): AdwTextDirection {
+        return getComputedStyle(this).direction === 'rtl' ? 'rtl' : 'ltr';
     }
 
     private _syncClasses() {
-        this.classList.toggle('collapsed', this.collapsed);
-        this.classList.toggle('show-content', this.showContent);
+        const state = this._state;
+        this.classList.toggle('collapsed', state.collapsed);
+        this.classList.toggle('show-content', state.showContent);
+        this.classList.toggle('sidebar-end', state.sidebarPosition === 'end');
+        // The VISUAL side, which under RTL is the opposite of the logical one —
+        // it decides where the pane is drawn AND which edge its divider is on.
+        this.classList.toggle(
+            'sidebar-at-visual-start',
+            isSidebarAtVisualStart(state.sidebarPosition, this._direction),
+        );
+
+        // The STACK, not the two flags: `update_navigation_stack` (:342-405)
+        // keeps a LONE child visible whatever `show-content` says, and with
+        // `sidebar-position: end` the CONTENT is the root page — so the sidebar
+        // is PUSHED ON TOP of it rather than replacing it.
+        const { stack } = state.stack;
+        const visible = stack[stack.length - 1] ?? null;
+        if (this._sidebarEl) this._sidebarEl.dataset.paneVisible = String(!state.collapsed || visible === 'sidebar');
+        if (this._contentEl) this._contentEl.dataset.paneVisible = String(!state.collapsed || visible === 'content');
+    }
+
+    /** (Re)bind the `breakpoint` condition to `collapsed`. */
+    private _syncBreakpoint() {
+        this._disposeBreakpoint?.();
+        this._disposeBreakpoint = bindBreakpointSetter(this, this.getAttribute('breakpoint'), (active) => {
+            this.collapsed = active;
+        });
     }
 }