/** * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ export class AuroDropdownBib extends LitElement { static get styles(): import("lit").CSSResult[]; static get properties(): { /** * If declared, will take the fullscreen when the bib is displayed. */ isFullscreen: { type: BooleanConstructor; reflect: boolean; }; /** * If declared, will apply all styles for the common theme. */ common: { type: BooleanConstructor; reflect: boolean; }; /** * If declared, will apply extra padding to bib content. */ inset: { type: BooleanConstructor; reflect: boolean; }; /** * If declared, the bib width will match the trigger width. * @private */ matchWidth: { type: BooleanConstructor; reflect: boolean; }; /** * If declared, will apply border-radius to the bib. */ rounded: { type: BooleanConstructor; reflect: boolean; }; /** * A reference to the associated bib template element. */ bibTemplate: { type: ObjectConstructor; }; shape: { type: StringConstructor; reflect: boolean; }; /** * Accessible label for the dialog element, used when displayed as a modal. * Applied via aria-labelledby on a visually hidden element rather than * aria-label because iOS VoiceOver does not reliably read aria-label * on elements. * @private */ dialogLabel: { type: StringConstructor; }; /** * Overrides the native role of the dialog element. * For example, set to `"presentation"` on desktop combobox to prevent * VoiceOver from announcing "listbox inside of a dialog". * When `undefined`, the dialog keeps its native role. * @private */ dialogRole: { type: StringConstructor; }; /** * Tracks whether a menu option is currently highlighted. * @private */ hasActiveDescendant: { type: BooleanConstructor; }; }; /** * @private */ private _mobileBreakpointName; shape: string; matchWidth: boolean; hasActiveDescendant: boolean; set mobileFullscreenBreakpoint(value: string); get mobileFullscreenBreakpoint(): string; updated(changedProperties: any): void; bibTemplate: any; firstUpdated(changedProperties: any): void; /** * Forwards the dialog's native `cancel` event (fired on ESC) as * an `auro-bib-cancel` custom event so parent components can close. * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to. * @private */ private _setupCancelHandler; /** * Blocks touch-driven page scroll while a fullscreen modal dialog is open. * * The showModal() function places the dialog in the browser's **top layer**, * which is a separate rendering layer above the normal DOM. On mobile, the * compositor processes visual-viewport panning before top-layer touch * handling. This means the entire viewport — including the top-layer dialog * — can be panned by a touch gesture, causing the page behind the dialog to * scroll into view. To prevent this, we add a touchmove listener that cancels * the event if the touch started outside the dialog or any scrollable child within it. * * @private */ private _lockTouchScroll; _touchMoveHandler: (event: any) => void; /** * Removes the touchmove listener added by _lockTouchScroll(). * @private */ private _unlockTouchScroll; open(modal?: boolean): void; /** * Closes the dialog. */ close(): void; render(): import("lit-html").TemplateResult; } import { LitElement } from "lit";