@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-popover.js

@@ -1,8 +1,46 @@
-import { createPopover } from '@chromvoid/headless-ui/popover';
-import { css, html, nothing } from 'lit';
+import { createPopover, } from '@chromvoid/headless-ui/popover';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { getPlacementFallbacks, getPositionAreaForPlacement, resolvePopoverPosition, } from './cv-popover-positioning.js';
 const popoverTriggerKeys = new Set(['Enter', ' ', 'Spacebar', 'ArrowDown']);
-const supportsNativePopover = typeof HTMLElement !== 'undefined' && typeof HTMLElement.prototype.showPopover === 'function';
+function supportsNativePopover() {
+    return (typeof HTMLElement !== 'undefined' &&
+        typeof HTMLElement.prototype.showPopover === 'function' &&
+        typeof HTMLElement.prototype.hidePopover === 'function');
+}
+function supportsAnchorPositioning() {
+    return (typeof CSS !== 'undefined' &&
+        typeof CSS.supports === 'function' &&
+        CSS.supports('position-area: top left') &&
+        CSS.supports('top: anchor(bottom)'));
+}
+function supportsAnchorTryFallbacks() {
+    return (typeof CSS !== 'undefined' &&
+        typeof CSS.supports === 'function' &&
+        CSS.supports('position-try-fallbacks: flip-block'));
+}
+function supportsNativeAnchoredAutoplacement() {
+    return supportsNativePopover() && supportsAnchorPositioning() && supportsAnchorTryFallbacks();
+}
+function isPopoverOpen(element) {
+    try {
+        return element.matches(':popover-open');
+    }
+    catch {
+        return false;
+    }
+}
+function toRect(rect) {
+    return {
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: rect.width,
+        height: rect.height,
+    };
+}
 let cvPopoverNonce = 0;
 export class CVPopover extends ReatomLitElement {
     static elementName = 'cv-popover';
@@ -16,6 +54,7 @@ export class CVPopover extends ReatomLitElement {
             closeOnOutsideFocus: { type: Boolean, attribute: 'close-on-outside-focus', reflect: true },
             placement: { type: String, reflect: true },
             anchor: { type: String, reflect: true },
+            triggerMode: { type: String, attribute: 'trigger-mode', reflect: true },
             offset: { type: Number, reflect: true },
             arrow: { type: Boolean, reflect: true },
         };
@@ -23,6 +62,21 @@ export class CVPopover extends ReatomLitElement {
     idBase = `cv-popover-${++cvPopoverNonce}`;
     model;
     previousOpen = false;
+    hasLayoutListeners = false;
+    layoutFrame = -1;
+    focusContentOnNextUpdate = false;
+    restoreFocusTarget = null;
+    _sourceEl = null;
+    get sourceEl() {
+        return this._sourceEl;
+    }
+    set sourceEl(value) {
+        const previous = this._sourceEl;
+        if (previous === value)
+            return;
+        this._sourceEl = value;
+        this.requestUpdate('sourceEl', previous);
+    }
     constructor() {
         super();
         this.open = false;
@@ -33,6 +87,7 @@ export class CVPopover extends ReatomLitElement {
         this.closeOnOutsideFocus = true;
         this.placement = 'bottom-start';
         this.anchor = 'trigger';
+        this.triggerMode = 'internal';
         this.offset = 4;
         this.arrow = false;
         this.model = this.createModel();
@@ -44,12 +99,22 @@ export class CVPopover extends ReatomLitElement {
         display: inline-block;
       }
 
+      :host([trigger-mode='external'][anchor='trigger']) {
+        display: contents;
+      }
+
       [part='base'] {
         position: relative;
         display: inline-grid;
         gap: var(--cv-space-1, 4px);
       }
 
+      :host([trigger-mode='external'][anchor='trigger']) [part='base'] {
+        position: static;
+        display: contents;
+        gap: 0;
+      }
+
       [part='trigger'] {
         display: inline-flex;
         align-items: center;
@@ -72,20 +137,42 @@ export class CVPopover extends ReatomLitElement {
         inset-inline-start: 0;
         inset-block-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
         z-index: var(--cv-popover-z-index, 20);
-        min-inline-size: var(--cv-popover-min-inline-size, max(220px, 100%));
+        min-inline-size: var(
+          --cv-popover-min-inline-size,
+          max(220px, var(--cv-popover-anchor-inline-size, 0px))
+        );
         max-inline-size: var(--cv-popover-max-inline-size, min(560px, calc(100vw - 32px)));
         display: grid;
-        gap: var(--cv-space-2, 8px);
+        gap: var(--cv-popover-gap, var(--cv-space-2, 8px));
         padding: var(--cv-popover-padding, var(--cv-space-3, 12px));
         border-radius: var(--cv-popover-border-radius, var(--cv-radius-md, 10px));
         border: 1px solid var(--cv-color-border, #2a3245);
         background: var(--cv-color-surface-elevated, #1d2432);
         box-shadow: var(--cv-shadow-1, 0 2px 8px rgba(0, 0, 0, 0.24));
         color: var(--cv-color-text, #e8ecf6);
+        margin: 0;
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition:
+          opacity var(--cv-popover-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          transform var(--cv-popover-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          display var(--cv-popover-transition-duration, var(--cv-duration-fast, 120ms)) allow-discrete;
+        transition-behavior: allow-discrete;
       }
 
       [part='content'][hidden] {
         display: none;
+        opacity: 0;
+        transform: translate3d(0, -2px, 0);
+      }
+
+      @starting-style {
+        [part='content']:not([hidden]) {
+          opacity: 0;
+          transform: translate3d(0, -2px, 0);
+        }
       }
 
       [part='content']:focus-visible {
@@ -93,76 +180,6 @@ export class CVPopover extends ReatomLitElement {
         outline-offset: 1px;
       }
 
-      [part='content'][data-placement='bottom'] {
-        inset-inline-start: 50%;
-        transform: translateX(-50%);
-      }
-
-      [part='content'][data-placement='bottom-end'] {
-        inset-inline-start: auto;
-        inset-inline-end: 0;
-      }
-
-      [part='content'][data-placement='top-start'] {
-        inset-block-start: auto;
-        inset-block-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-      }
-
-      [part='content'][data-placement='top'] {
-        inset-inline-start: 50%;
-        inset-block-start: auto;
-        inset-block-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-        transform: translateX(-50%);
-      }
-
-      [part='content'][data-placement='top-end'] {
-        inset-inline-start: auto;
-        inset-inline-end: 0;
-        inset-block-start: auto;
-        inset-block-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-      }
-
-      [part='content'][data-placement='right-start'] {
-        inset-inline-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-        inset-block-start: 0;
-      }
-
-      [part='content'][data-placement='right'] {
-        inset-inline-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-        inset-block-start: 50%;
-        transform: translateY(-50%);
-      }
-
-      [part='content'][data-placement='right-end'] {
-        inset-inline-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-        inset-block-start: auto;
-        inset-block-end: 0;
-      }
-
-      [part='content'][data-placement='left-start'] {
-        inset-inline-start: auto;
-        inset-inline-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-        inset-block-start: 0;
-      }
-
-      [part='content'][data-placement='left'] {
-        inset-inline-start: auto;
-        inset-inline-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-        inset-block-start: 50%;
-        transform: translateY(-50%);
-      }
-
-      [part='content'][data-placement='left-end'] {
-        inset-inline-start: auto;
-        inset-inline-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
-        inset-block-start: auto;
-        inset-block-end: 0;
-      }
-
-      [part='content'][data-anchor='host'] {
-        min-inline-size: min(560px, calc(100vw - 32px));
-      }
-
       [part='arrow'] {
         position: absolute;
         display: block;
@@ -181,8 +198,21 @@ export class CVPopover extends ReatomLitElement {
         this.syncOutsideListeners();
     }
     disconnectedCallback() {
-        super.disconnectedCallback();
         this.syncOutsideListeners(true);
+        this.toggleLayoutListeners(false);
+        this.cancelLayoutFrame();
+        if (supportsNativePopover()) {
+            const content = this.getContentElement();
+            if (content && isPopoverOpen(content)) {
+                try {
+                    content.hidePopover?.();
+                }
+                catch {
+                    // ignore
+                }
+            }
+        }
+        super.disconnectedCallback();
     }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
@@ -197,18 +227,70 @@ export class CVPopover extends ReatomLitElement {
         }
         if (changedProperties.has('open') && this.model.state.isOpen() !== this.open) {
             if (this.open) {
+                this.prepareAnchorForOpen();
                 this.model.actions.open('programmatic');
             }
             else {
                 this.model.actions.close('programmatic');
             }
-            this.open = this.model.state.isOpen();
-            this.previousOpen = this.open;
+            this.emitToggleEvents();
+            this.syncOutsideListeners();
         }
     }
     updated(changedProperties) {
         super.updated(changedProperties);
         this.syncOutsideListeners();
+        this.syncNativePopover();
+        const modelOpen = this.model.state.isOpen();
+        const shouldTrackLayout = modelOpen && !supportsNativeAnchoredAutoplacement();
+        this.toggleLayoutListeners(shouldTrackLayout);
+        if (modelOpen) {
+            this.scheduleLayout();
+        }
+        else {
+            this.cancelLayoutFrame();
+            const content = this.getContentElement();
+            if (content) {
+                this.clearInlineLayout(content);
+                content.dataset['placement'] = this.placement;
+                content.dataset['anchorPositioning'] = 'false';
+            }
+        }
+        if (this.focusContentOnNextUpdate && modelOpen) {
+            this.focusContentOnNextUpdate = false;
+            this.getContentElement()?.focus();
+        }
+        if (modelOpen &&
+            (changedProperties.has('placement') ||
+                changedProperties.has('offset') ||
+                changedProperties.has('anchor') ||
+                changedProperties.has('triggerMode') ||
+                changedProperties.has('sourceEl'))) {
+            this.scheduleLayout();
+        }
+    }
+    show(options = {}) {
+        if (options.source) {
+            this.sourceEl = options.source;
+        }
+        this.prepareAnchorForOpen(options.source);
+        this.model.actions.open(options.openedBy ?? 'programmatic');
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+        this.requestUpdate();
+    }
+    hide(intent = 'programmatic') {
+        this.model.actions.close(intent);
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+        this.requestUpdate();
+    }
+    toggle(options = {}) {
+        if (this.model.state.isOpen()) {
+            this.hide('programmatic');
+            return;
+        }
+        this.show(options);
     }
     createModel(initialOpen = this.open) {
         return createPopover({
@@ -219,9 +301,33 @@ export class CVPopover extends ReatomLitElement {
             closeOnEscape: this.closeOnEscape,
             closeOnOutsidePointer: this.closeOnOutsidePointer,
             closeOnOutsideFocus: this.closeOnOutsideFocus,
-            useNativePopover: supportsNativePopover,
+            useNativePopover: supportsNativePopover(),
         });
     }
+    getContentElement() {
+        return this.shadowRoot?.querySelector('[part="content"]');
+    }
+    getTriggerElement() {
+        return this.shadowRoot?.querySelector('[part="trigger"]');
+    }
+    resolveAnchorElement() {
+        if (this.anchor === 'host') {
+            return this;
+        }
+        if (this.triggerMode === 'external') {
+            return this.sourceEl ?? this;
+        }
+        return this.getTriggerElement() ?? this;
+    }
+    prepareAnchorForOpen(source) {
+        if (source) {
+            this.sourceEl = source;
+        }
+        const anchor = source ?? this.resolveAnchorElement();
+        if (anchor) {
+            this.restoreFocusTarget = anchor;
+        }
+    }
     buildEventDetail() {
         return {
             open: this.model.state.isOpen(),
@@ -229,50 +335,55 @@ export class CVPopover extends ReatomLitElement {
             dismissIntent: this.model.state.lastDismissIntent(),
         };
     }
-    /**
-     * Dispatches beforetoggle and toggle events and syncs open state from headless.
-     * If beforetoggle is canceled on open, reverts headless state.
-     */
     emitToggleEvents() {
         const isOpen = this.model.state.isOpen();
-        // Only emit if state actually changed
         if (isOpen === this.previousOpen)
             return;
         const detail = this.buildEventDetail();
-        // Dispatch beforetoggle (cancelable only on open)
-        const cancelable = detail.open;
         const beforeToggleEvent = new CustomEvent('beforetoggle', {
             detail,
             bubbles: true,
             composed: true,
-            cancelable,
+            cancelable: detail.open,
         });
         this.dispatchEvent(beforeToggleEvent);
-        // If opening was prevented, revert headless state
-        if (cancelable && beforeToggleEvent.defaultPrevented) {
+        if (detail.open && beforeToggleEvent.defaultPrevented) {
             this.model.actions.close('programmatic');
             this.open = false;
             this.previousOpen = false;
+            this.focusContentOnNextUpdate = false;
+            this.requestUpdate();
             return;
         }
-        // Sync host attribute
         this.open = isOpen;
         this.previousOpen = isOpen;
-        // Dispatch toggle (not cancelable)
+        this.focusContentOnNextUpdate = isOpen;
         this.dispatchEvent(new CustomEvent('toggle', {
             detail,
             bubbles: false,
             composed: true,
             cancelable: false,
         }));
-        // Restore focus if needed
         if (!isOpen) {
-            const restoreId = this.model.state.restoreTargetId();
-            if (restoreId) {
-                const trigger = this.shadowRoot?.querySelector(`[id="${restoreId}"]`);
-                trigger?.focus();
+            this.restoreFocus();
+        }
+    }
+    restoreFocus() {
+        const target = this.restoreFocusTarget;
+        if (target?.isConnected) {
+            try {
+                target.focus();
+            }
+            catch {
+                // ignore
             }
+            return;
         }
+        const restoreId = this.model.state.restoreTargetId();
+        if (!restoreId)
+            return;
+        const trigger = this.shadowRoot?.querySelector(`[id="${restoreId}"]`);
+        trigger?.focus();
     }
     syncOutsideListeners(forceOff = false) {
         const shouldListen = !forceOff && this.model.state.isOpen();
@@ -286,7 +397,7 @@ export class CVPopover extends ReatomLitElement {
         }
     }
     handleDocumentPointerDown = (event) => {
-        if (!this.model || !this.model.state.isOpen())
+        if (!this.model.state.isOpen())
             return;
         const path = event.composedPath();
         if (path.includes(this))
@@ -294,9 +405,10 @@ export class CVPopover extends ReatomLitElement {
         this.model.contracts.getContentProps().onPointerDownOutside();
         this.emitToggleEvents();
         this.syncOutsideListeners();
+        this.requestUpdate();
     };
     handleDocumentFocusIn = (event) => {
-        if (!this.model || !this.model.state.isOpen())
+        if (!this.model.state.isOpen())
             return;
         const path = event.composedPath();
         if (path.includes(this))
@@ -304,19 +416,24 @@ export class CVPopover extends ReatomLitElement {
         this.model.contracts.getContentProps().onFocusOutside();
         this.emitToggleEvents();
         this.syncOutsideListeners();
+        this.requestUpdate();
     };
     handleTriggerClick() {
+        this.prepareAnchorForOpen(this.getTriggerElement() ?? undefined);
         this.model.contracts.getTriggerProps().onClick();
         this.emitToggleEvents();
         this.syncOutsideListeners();
+        this.requestUpdate();
     }
     handleTriggerKeyDown(event) {
         if (popoverTriggerKeys.has(event.key)) {
             event.preventDefault();
         }
+        this.prepareAnchorForOpen(this.getTriggerElement() ?? undefined);
         this.model.contracts.getTriggerProps().onKeyDown({ key: event.key });
         this.emitToggleEvents();
         this.syncOutsideListeners();
+        this.requestUpdate();
     }
     handleContentKeyDown(event) {
         if (event.key === 'Escape') {
@@ -325,26 +442,186 @@ export class CVPopover extends ReatomLitElement {
         this.model.contracts.getContentProps().onKeyDown({ key: event.key });
         this.emitToggleEvents();
         this.syncOutsideListeners();
+        this.requestUpdate();
+    }
+    handleNativeToggle = (event) => {
+        if (!supportsNativePopover())
+            return;
+        const toggleEvent = event;
+        const newState = toggleEvent.newState === 'closed' ? 'closed' : 'open';
+        this.model.actions.handleNativeToggle(newState);
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+        this.requestUpdate();
+    };
+    clearInlineLayout(content) {
+        content.style.position = '';
+        content.style.top = '';
+        content.style.left = '';
+        content.style.right = '';
+        content.style.bottom = '';
+        content.style.insetInlineStart = '';
+        content.style.insetBlockStart = '';
+        content.style.insetInlineEnd = '';
+        content.style.insetBlockEnd = '';
+        content.style.transform = '';
+        content.style.translate = '';
+        content.style.margin = '';
+        content.style.marginTop = '';
+        content.style.marginRight = '';
+        content.style.marginBottom = '';
+        content.style.marginLeft = '';
+        content.style.removeProperty('position-area');
+        content.style.removeProperty('position-try-fallbacks');
+        content.style.removeProperty('--cv-popover-anchor-inline-size');
+    }
+    applyDirectionalOffset(content, placement) {
+        content.style.margin = '0';
+        content.style.marginTop = '';
+        content.style.marginRight = '';
+        content.style.marginBottom = '';
+        content.style.marginLeft = '';
+        const [side] = placement.split('-');
+        const value = `${this.offset}px`;
+        switch (side) {
+            case 'top':
+                content.style.marginBottom = value;
+                break;
+            case 'right':
+                content.style.marginLeft = value;
+                break;
+            case 'bottom':
+                content.style.marginTop = value;
+                break;
+            case 'left':
+                content.style.marginRight = value;
+                break;
+        }
+    }
+    syncNativePopover() {
+        if (!supportsNativePopover())
+            return;
+        const content = this.getContentElement();
+        if (!content)
+            return;
+        const isOpen = this.model.state.isOpen();
+        const popoverOpen = isPopoverOpen(content);
+        if (isOpen && !popoverOpen) {
+            const anchor = this.resolveAnchorElement();
+            try {
+                if (anchor) {
+                    content.showPopover?.({ source: anchor });
+                }
+                else {
+                    content.showPopover?.();
+                }
+            }
+            catch {
+                // ignore open failures
+            }
+            return;
+        }
+        if (!isOpen && popoverOpen) {
+            try {
+                content.hidePopover?.();
+            }
+            catch {
+                // ignore close failures
+            }
+        }
+    }
+    syncPopoverLayout() {
+        const content = this.getContentElement();
+        const anchor = this.resolveAnchorElement();
+        if (!content || !anchor)
+            return;
+        const anchorRect = toRect(anchor.getBoundingClientRect());
+        if (supportsNativeAnchoredAutoplacement()) {
+            this.clearInlineLayout(content);
+            content.style.setProperty('--cv-popover-anchor-inline-size', `${Math.max(0, Math.round(anchorRect.width))}px`);
+            content.dataset['anchorPositioning'] = 'true';
+            content.dataset['placement'] = this.placement;
+            content.style.position = 'fixed';
+            content.style.inset = 'auto';
+            content.style.margin = '0';
+            this.applyDirectionalOffset(content, this.placement);
+            content.style.setProperty('position-area', getPositionAreaForPlacement(this.placement));
+            content.style.setProperty('position-try-fallbacks', getPlacementFallbacks(this.placement)
+                .slice(1)
+                .map((candidate) => getPositionAreaForPlacement(candidate))
+                .join(', '));
+            return;
+        }
+        const contentRect = toRect(content.getBoundingClientRect());
+        const resolved = resolvePopoverPosition(anchorRect, contentRect, this.placement, this.offset, {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            padding: 8,
+        });
+        this.clearInlineLayout(content);
+        content.style.setProperty('--cv-popover-anchor-inline-size', `${Math.max(0, Math.round(anchorRect.width))}px`);
+        content.dataset['anchorPositioning'] = 'false';
+        content.dataset['placement'] = resolved.placement;
+        content.style.position = 'fixed';
+        content.style.top = `${resolved.top}px`;
+        content.style.left = `${resolved.left}px`;
+        content.style.transform = 'none';
+        content.style.translate = 'none';
+    }
+    cancelLayoutFrame() {
+        if (this.layoutFrame === -1)
+            return;
+        cancelAnimationFrame(this.layoutFrame);
+        this.layoutFrame = -1;
+    }
+    scheduleLayout() {
+        this.cancelLayoutFrame();
+        this.layoutFrame = requestAnimationFrame(() => {
+            this.layoutFrame = -1;
+            this.syncPopoverLayout();
+        });
+    }
+    toggleLayoutListeners(nextState) {
+        if (this.hasLayoutListeners === nextState)
+            return;
+        this.hasLayoutListeners = nextState;
+        if (nextState) {
+            window.addEventListener('resize', this.handleViewportChange);
+            window.addEventListener('scroll', this.handleViewportChange, true);
+            return;
+        }
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
     }
+    handleViewportChange = () => {
+        if (!this.model.state.isOpen())
+            return;
+        this.scheduleLayout();
+    };
     render() {
         const triggerProps = this.model.contracts.getTriggerProps();
         const contentProps = this.model.contracts.getContentProps();
+        const renderTrigger = this.triggerMode === 'internal';
         return html `
       <div part="base">
-        <button
-          id=${triggerProps.id}
-          role=${triggerProps.role}
-          tabindex=${triggerProps.tabindex}
-          aria-haspopup=${triggerProps['aria-haspopup']}
-          aria-expanded=${triggerProps['aria-expanded']}
-          aria-controls=${triggerProps['aria-controls']}
-          part="trigger"
-          type="button"
-          @click=${this.handleTriggerClick}
-          @keydown=${this.handleTriggerKeyDown}
-        >
-          <slot name="trigger">Open popover</slot>
-        </button>
+        ${renderTrigger
+            ? html `
+              <button
+                id=${triggerProps.id}
+                role=${triggerProps.role}
+                tabindex=${triggerProps.tabindex}
+                aria-haspopup=${triggerProps['aria-haspopup']}
+                aria-expanded=${triggerProps['aria-expanded']}
+                aria-controls=${triggerProps['aria-controls']}
+                part="trigger"
+                type="button"
+                @click=${this.handleTriggerClick}
+                @keydown=${this.handleTriggerKeyDown}
+              >
+                <slot name="trigger">Open popover</slot>
+              </button>
+            `
+            : nothing}
 
         <div
           id=${contentProps.id}
@@ -353,12 +630,17 @@ export class CVPopover extends ReatomLitElement {
           aria-modal=${contentProps['aria-modal']}
           aria-label=${contentProps['aria-label'] ?? nothing}
           aria-labelledby=${contentProps['aria-labelledby'] ?? nothing}
-          ?hidden=${contentProps.hidden}
+          popover=${contentProps.popover ?? nothing}
+          ?hidden=${contentProps.hidden ?? false}
+          class="cv-u-discrete-presence"
           data-placement=${this.placement}
           data-anchor=${this.anchor}
+          data-trigger-mode=${this.triggerMode}
+          data-anchor-positioning="false"
           style=${`--cv-popover-offset:${this.offset}px;`}
           part="content"
           @keydown=${this.handleContentKeyDown}
+          @toggle=${this.handleNativeToggle}
         >
           <slot></slot>
           ${this.arrow