@expressivecss/expressive 0.7.0 → 0.9.0

package/dist/types/behaviors/bottomSheets.d.ts

@@ -1,18 +1,26 @@
 /**
  * Drag-to-dismiss for `dialog.bottom-sheet` / `dialog.bottom`.
  *
- * The handle is the top 48dp of the sheet (or an explicit `.handle`).
- * A downward drag past 96dp, or a flick, closes. Anything else snaps back.
- * Content below the handle scrolls normally. Light-dismiss on the scrim
- * stays with {@link Dialogs}.
+ * The handle is the top 48dp of the sheet (or an explicit `.drag-handle`,
+ * `.handle` being its pre-1.0 spelling). A downward drag past 96dp, or a
+ * flick, closes. Anything else snaps back. Content below the handle scrolls
+ * normally. Light-dismiss on the scrim stays with {@link Dialogs}.
+ *
+ * The drag itself is {@link installSheetDrag}, shared with the side sheet. What
+ * is here is what is not shared: a handle written as a `<button>` also closes
+ * the sheet when it is *activated*, which is what makes it reachable without a
+ * pointer - dragging is a pointer gesture, so a control labelled "Dismiss" that
+ * only answers a drag promises an action a keyboard user cannot perform. A
+ * handle written as any other element is decoration and does nothing here -
+ * Escape still closes the sheet either way, natively.
  */
 export declare class BottomSheets {
-    private static _drag;
+    /**
+     * Whether the last pointer sequence moved. A drag ends with a `click` on the
+     * element it started on, so without this the tail of a drag that snapped back
+     * would dismiss the sheet the drag had just declined to dismiss.
+     */
+    private static _dragged;
     static Init(): void;
-    static _onDown(event: PointerEvent): void;
-    static _onMove(event: PointerEvent): void;
-    static _onUp(event: PointerEvent): void;
-    static _onCancel(): void;
-    private static _sheet;
-    private static _inHandle;
+    static _onClick(event: MouseEvent): void;
 }

package/dist/types/behaviors/sheetDrag.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Drag-to-dismiss, shared by the bottom sheet and the side sheet.
+ *
+ * The two were the same state machine written twice on different axes - same
+ * dismissal distance, same flick velocity, same transition suppression, same
+ * pointer bookkeeping - so a fix to one could land without reaching the other.
+ * What actually differs between them is stated as configuration below.
+ *
+ * Light-dismiss on the scrim is not here; it stays with `Dialogs`.
+ */
+export interface SheetDragConfig {
+    /** Which dialogs this drag applies to. */
+    selector: string;
+    /** The axis the sheet travels on. */
+    axis: 'x' | 'y';
+    /** The custom property carrying the live drag offset. */
+    property: string;
+    /**
+     * `1` when the sheet dismisses toward increasing coordinates (downward, or
+     * rightward for an end-docked side sheet), `-1` when it dismisses toward
+     * decreasing ones. A function rather than a constant because a side sheet's
+     * direction depends on which edge each individual sheet is docked to.
+     */
+    direction: (dialog: HTMLDialogElement) => 1 | -1;
+    /** Whether a press at this point landed on the sheet's drag handle. */
+    inHandle: (event: PointerEvent, dialog: HTMLDialogElement) => boolean;
+    /**
+     * Called first on every `pointerdown`, before any guard rejects it. The
+     * bottom sheet clears its dragged flag here so a sequence abandoned without
+     * a `pointerup` cannot leave the flag set and swallow the next tap.
+     */
+    onPress?: () => void;
+    /** Called when a drag ends, with whether the pointer actually moved. */
+    onRelease?: (dragged: boolean) => void;
+}
+/**
+ * Register one sheet kind's drag handlers on the document. Called once per kind
+ * at import time; there is nothing to tear down.
+ */
+export declare function installSheetDrag(config: SheetDragConfig): void;

package/dist/types/behaviors/sideSheets.d.ts

@@ -3,16 +3,9 @@
  *
  * Grab the header or the inner 24dp edge and drag toward the docked side.
  * Past 96dp, or a flick, closes. Light-dismiss on the scrim stays with
- * {@link Dialogs}.
+ * {@link Dialogs}. The drag itself is {@link installSheetDrag}, shared with
+ * the bottom sheet.
  */
 export declare class SideSheets {
-    private static _drag;
     static Init(): void;
-    static _onDown(event: PointerEvent): void;
-    static _onMove(event: PointerEvent): void;
-    static _onUp(event: PointerEvent): void;
-    static _onCancel(): void;
-    private static _sheet;
-    private static _startDocked;
-    private static _inHandle;
 }

package/dist/types/components/appBar.d.ts

@@ -0,0 +1,26 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+/**
+ * Collapse medium/large flexible app bars on scroll, and open the related
+ * search view when the search field in a search app bar is selected.
+ *
+ * Observation is IntersectionObserver on a 1px sentinel ahead of the header.
+ * A scroll listener would re-enter layout on every tick; this does not.
+ */
+export declare class AppBar extends Component<BaseOptions> {
+    private _observer;
+    private _sentinel;
+    private _input;
+    private _view;
+    private _suppressSearchOpen;
+    constructor(el: HTMLElement, options: Partial<BaseOptions>);
+    static get defaults(): BaseOptions;
+    static init(el: HTMLElement, options?: Partial<BaseOptions>): AppBar;
+    static init(els: InitElements<InitElement>, options?: Partial<BaseOptions>): AppBar[];
+    static getInstance(el: HTMLElement): AppBar;
+    destroy(): void;
+    private _setupCollapse;
+    private _onIntersect;
+    private _setupSearch;
+    private _onSearchViewClose;
+    private _onSearchFocus;
+}

package/dist/types/components/autocomplete.d.ts

@@ -78,7 +78,19 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     activeIndex: number;
     private oldVal;
     private $active;
-    private _mousedown;
+    private _openTimer;
+    /**
+     * The active entry, for both the eye and the screen reader. The class alone
+     * was invisible to assistive technology; aria-activedescendant on the input
+     * is what reports the move.
+     *
+     * Deliberately does not touch aria-selected. Active and selected are two
+     * different things - in a multi-select the checkboxes track real choices,
+     * and folding the highlight into aria-selected would announce a committed
+     * choice as unselected the moment the user arrowed past it.
+     */
+    private _setActive;
+    private _pointerDown;
     container: HTMLElement;
     /** Instance of the menu plugin for this autocomplete. */
     menu: Menu;
@@ -120,8 +132,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     _inputChangeDetection: (value: string) => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
     _handleInputClick: () => void;
-    _handleContainerMousedownAndTouchstart: () => void;
-    _handleContainerMouseupAndTouchend: () => void;
+    _handleContainerPointerDown: (e: PointerEvent) => void;
+    _handleContainerPointerUp: () => void;
     _resetCurrentElementPosition(): void;
     _resetAutocomplete(): void;
     _highlightPartialText(input: string, label: string): string[];

package/dist/types/components/buttonGroup.d.ts

@@ -0,0 +1,39 @@
+import { Component, BaseOptions, InitElements, InitElement } from "../core/component";
+export interface ButtonGroupOptions extends BaseOptions {
+}
+/**
+ * Coordinates Material button-group press geometry and optional toggle state.
+ *
+ * Standard groups redistribute the pressed item's 15% width growth from its
+ * immediate neighbors. `data-selection="single|multiple"` also enables
+ * `aria-pressed` state management.
+ */
+export declare class ButtonGroup extends Component<ButtonGroupOptions> {
+    private _pressedStyles;
+    private _releaseStyles;
+    private _releaseTimer;
+    private _originalPressed;
+    private _activeItem;
+    constructor(el: HTMLElement, options?: Partial<ButtonGroupOptions>);
+    static get defaults(): ButtonGroupOptions;
+    static init(el: HTMLElement, options?: Partial<ButtonGroupOptions>): ButtonGroup;
+    static init(els: InitElements<InitElement>, options?: Partial<ButtonGroupOptions>): ButtonGroup[];
+    static getInstance(el: HTMLElement): ButtonGroup;
+    destroy(): void;
+    private get _selectionMode();
+    private get _items();
+    private get _toggleItems();
+    private _normalizeSelection;
+    private _itemFromEvent;
+    private _isDisabled;
+    private _handleClick;
+    private _rememberPressed;
+    private _handlePointerDown;
+    private _handleKeyDown;
+    private _handleKeyUp;
+    private _handleFocusOut;
+    private _startPress;
+    private _compressionCapacity;
+    private _resetPress;
+    private _finishRelease;
+}

package/dist/types/components/buttons.d.ts

@@ -22,11 +22,15 @@ export interface FloatingActionButtonOptions extends BaseOptions {
  * Speed dial around a FAB. Open/close is the `.active` class; motion is
  * CSS. Hover is CSS (`:hover` when the pointer can hover). This class
  * toggles the class, wires keyboard / click-outside, and stamps direction.
+ *
+ * `.fab-menu` runs on the same instance: expanded state is one class and one
+ * `aria-expanded`, whichever host it is written on, and the two differ only
+ * in their Sass. The direction and hover options are inert there - the FAB
+ * menu opens upward and on click, both decided in CSS.
  */
 export declare class FloatingActionButton extends Component<FloatingActionButtonOptions> implements Openable {
     isOpen: boolean;
     private _anchor;
-    private _menu;
     constructor(el: HTMLElement, options: Partial<FloatingActionButtonOptions>);
     static get defaults(): FloatingActionButtonOptions;
     static init(el: HTMLElement, options?: Partial<FloatingActionButtonOptions>): FloatingActionButton;

package/dist/types/components/cards.d.ts

@@ -4,20 +4,21 @@ export interface CardsOptions extends BaseOptions {
     onClose: (el: Element) => void;
 }
 /**
- * What counts as a card.
+ * What counts as a card reveal.
  *
- * Shared with `components/registry.ts` rather than written out twice: the
- * registry used to claim `.cards`, which matches nothing this component
- * actually initializes, so the AutoInit entry was dead while `Cards.Init()`
- * quietly did the work through the selector below.
+ * Shared with `components/registry.ts` so `Cards.Init()` and `AutoInit()` use
+ * the same semantic selector.
  */
-export declare const CARDS_SELECTOR = "article:has(> aside)";
+export declare const CARDS_SELECTOR = "article:has(> aside[id]:not([id=\"\"])):not(:has(> aside ~ aside)):has(> button.card-reveal-trigger[type=\"button\"], > :not(aside) button.card-reveal-trigger[type=\"button\"])";
+export declare function isCardReveal(el: Element): el is HTMLElement;
 export declare class Cards extends Component<CardsOptions> implements Openable {
     isOpen: boolean;
     private readonly cardReveal;
     private _activators;
-    private cardRevealClose;
-    constructor(el: HTMLElement, options: Partial<CardsOptions>);
+    private _ownsRevealInitializedClass;
+    private _initialAriaControls;
+    private _lastActivator;
+    constructor(el: HTMLElement, options?: Partial<CardsOptions>);
     static get defaults(): CardsOptions;
     /**
      * Initializes instance of Cards.
@@ -38,12 +39,9 @@ export declare class Cards extends Component<CardsOptions> implements Openable {
     destroy(): void;
     _setupEventHandlers: () => void;
     _removeEventHandlers: () => void;
-    _handleClickInteraction: () => void;
-    _handleKeypressEvent: (e: KeyboardEvent) => void;
+    _handleClickInteraction: (event: MouseEvent) => void;
+    _handleKeydownEvent: (event: KeyboardEvent) => void;
     _handleRevealEvent: () => void;
-    _setupRevealCloseEventHandlers: () => void;
-    _removeRevealCloseEventHandlers: () => void;
-    _handleKeypressCloseEvent: (e: KeyboardEvent) => void;
     /**
      * Show card reveal.
      */

package/dist/types/components/carousel.d.ts

@@ -1,32 +1,22 @@
 import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface CarouselI18nOptions {
+    carousel: string;
+    item: string;
+    of: string;
+    indicators: string;
+    slide: string;
+}
 export interface CarouselOptions extends BaseOptions {
     /**
-     * Transition duration in milliseconds (coverflow). Snap mode uses CSS.
+     * Milliseconds allowed for a programmatic scroll to land. The track itself
+     * scrolls at the browser's own smooth-scroll speed; this only bounds how
+     * long the component waits for `scrollend` before assuming it arrived, and
+     * is added to `interval` to time each auto-advance rest.
      * @default 200
      */
     duration: number;
     /**
-     * Perspective zoom. If 0, all items are the same size. Coverflow only.
-     * @default -100
-     */
-    dist: number;
-    /**
-     * Extra spacing on the center item. Coverflow only.
-     * @default 0
-     */
-    shift: number;
-    /**
-     * Padding between items that are not in the center. Coverflow only.
-     * @default 0
-     */
-    padding: number;
-    /**
-     * How many items stay visible. Coverflow only.
-     * @default 5
-     */
-    numVisible: number;
-    /**
-     * Linear snap track instead of 3D coverflow.
+     * Full-width compatibility track. Material 3 layouts are already linear.
      * Also implied by `.flat`.
      * @default false
      */
@@ -37,48 +27,82 @@ export interface CarouselOptions extends BaseOptions {
      */
     indicators: boolean;
     /**
-     * Stop at the first and last items instead of wrapping. Coverflow only.
-     * Snap tracks do not wrap.
+     * Stop auto-advance at the last item instead of looping back to the first.
+     * A scroll track never wraps under arrow keys or `set()` either way.
      * @default false
      */
     noWrap: boolean;
+    /**
+     * Milliseconds to rest between automatic advances, on top of `duration` -
+     * the gap follows each transition rather than containing it, so a full cycle
+     * takes `duration + interval`. 0 leaves auto-advance off.
+     * Whenever it is set the track pauses on hover and on keyboard focus, and
+     * `prefers-reduced-motion: reduce` suppresses it entirely - auto-advancing
+     * content is WCAG 2.2.2 territory, so neither is an option an author can
+     * turn off. `noWrap` stops it after one pass instead of looping.
+     * @default 0
+     */
+    interval: number;
+    /**
+     * Fixed track height in pixels. `null` sizes the carousel from its content.
+     * A fixed height gives the indicators their own row below the track instead
+     * of laying them over the media.
+     * @default null
+     */
+    height: number | null;
     /**
      * Called when a new item becomes the center.
      * @default null
      */
     onCycleTo: (current: Element, dragged: boolean) => void;
+    /**
+     * Accessible names generated for an unlabeled carousel, its items and its
+     * indicators.
+     */
+    i18n: Partial<CarouselI18nOptions>;
 }
 export declare class Carousel extends Component<CarouselOptions> {
     hasMultipleSlides: boolean;
     showIndicators: boolean;
-    noWrap: boolean;
     pressed: boolean;
     dragged: boolean;
-    offset: number;
-    target: number;
     images: HTMLElement[];
-    itemWidth: number;
-    itemHeight: number;
-    dim: number;
     _indicators: HTMLUListElement | HTMLElement;
     count: number;
-    verticalDragged: boolean;
-    reference: number;
-    referenceY: number;
-    velocity: number;
-    frame: number;
-    timestamp: number;
-    amplitude: number;
     center: number;
-    imageHeight: number;
     scrollingTimeout: ReturnType<typeof setTimeout>;
     oneTimeCallback: (current: Element, dragged: boolean) => void | null;
-    private _flat;
     private _ownIndicators;
     private _trackEl;
     private _ignoreScroll;
     private _trackRaf;
     private _started;
+    private _vertical;
+    private _resizeObserver;
+    private _usesWindowResize;
+    private _dragPointerId;
+    private _dragStartX;
+    private _dragStartY;
+    private _dragStartScroll;
+    private _suppressClick;
+    private _suppressClickTimeout;
+    private _generatedContainerRole;
+    private _generatedContainerLabel;
+    private _generatedContainerDescription;
+    private _generatedWideLayout;
+    private _generatedFixedHeight;
+    private _authoredInlineHeight;
+    private _autoAdvanceTimer;
+    private _autoAdvances;
+    private _autoPaused;
+    private _hovered;
+    private _focused;
+    private _generatedItemTabIndexes;
+    private _generatedItemLabels;
+    private _generatedItemDescriptions;
+    private _generatedItemSizes;
+    private _authoredItemSizes;
+    private _itemA11yOriginal;
     private get _scroller();
     private static _live;
     private static _resizeListening;
@@ -90,34 +114,44 @@ export declare class Carousel extends Component<CarouselOptions> {
     static getInstance(el: HTMLElement): Carousel;
     destroy(): void;
     private _collectItems;
+    private _setupAccessibility;
     private _setupIndicators;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
     private _teardown;
-    _handleThrottledResize: (...args: unknown[]) => any;
-    _handleCarouselTap: (e: PointerEvent) => void;
-    _handleCarouselDrag: (e: PointerEvent) => void;
-    _handleCarouselRelease: (e: PointerEvent) => void;
-    _handleCarouselClick: (e: MouseEvent) => void;
+    _handleThrottledResize: (...args: unknown[]) => void;
+    _handleAutoAdvanceState: (e: Event) => void;
+    /** Start or stop the timer to match the current pause state. */
+    private _syncAutoAdvance;
+    private _tick;
+    private _advance;
+    _handleTrackPointerDown: (e: PointerEvent) => void;
+    _handleTrackPointerMove: (e: PointerEvent) => void;
+    _handleTrackPointerUp: (e: PointerEvent) => void;
+    _handleTrackClick: (e: MouseEvent) => void;
+    _handleTrackDragStart: (e: DragEvent) => void;
     _handleIndicatorClick: (e: Event) => void;
     _handleKeydown: (e: KeyboardEvent) => void;
-    _handleFlatScroll: () => void;
+    _handleTrackScroll: () => void;
     _handleResize: () => void;
-    _xpos(e: PointerEvent | MouseEvent | TouchEvent): number;
-    _ypos(e: PointerEvent | MouseEvent | TouchEvent): number;
-    _wrap(x: number): any;
-    _track: () => void;
-    _autoScroll: () => void;
-    _scroll(x?: number): void;
-    _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string): void;
     private _paintIndicators;
-    private _syncA11y;
     private _syncActive;
+    private _syncLayoutRoles;
+    private _syncAdaptiveMode;
+    private _focusItem;
+    private _updateParallax;
     private _wrapTrack;
     private _unwrapTrack;
     private _nearestIndex;
     private _scrollToIndex;
     _cycleTo(n: number, callback?: CarouselOptions['onCycleTo']): void;
+    /**
+     * Stop auto-advance until start() is called. Without an `interval` there is
+     * nothing to stop and this does nothing.
+     */
+    pause(): void;
+    /** Resume auto-advance after pause(). */
+    start(): void;
     next(n?: number): void;
     prev(n?: number): void;
     set(n: number, callback?: CarouselOptions['onCycleTo']): void;

package/dist/types/components/chips.d.ts

@@ -14,6 +14,10 @@ export interface ChipData {
      */
     image?: string;
 }
+export interface ChipsI18nOptions {
+    /** Prefix for the delete button's accessible name. */
+    remove: string;
+}
 export interface ChipsOptions extends BaseOptions {
     /**
      * Set the chip data.
@@ -55,6 +59,12 @@ export interface ChipsOptions extends BaseOptions {
      *  @default false;
      */
     allowUserInput: boolean;
+    /**
+     * Strings the component generates. `remove` prefixes the delete button's
+     * accessible name, giving "Remove Apple".
+     * @default { remove: 'Remove' }
+     */
+    i18n: Partial<ChipsI18nOptions>;
     /**
      * Callback for chip add.
      * @default null
@@ -83,6 +93,16 @@ export declare class Chips extends Component<ChipsOptions> {
     _chips: HTMLElement[];
     static _keydown: boolean;
     private _selectedChip;
+    /**
+     * Selection is drawn by a class now, not by `:focus`, so it does not clear
+     * itself when focus moves - every path that changes the selection has to go
+     * through here or the class and the field drift apart.
+     *
+     * Deliberately no `aria-selected`: the chip is not an option in a listbox,
+     * and putting the attribute on an element with no such role is the same
+     * defect the semantics standard exists to remove.
+     */
+    private _setSelected;
     constructor(el: HTMLElement, options: Partial<ChipsOptions>);
     static get defaults(): ChipsOptions;
     /**
@@ -109,7 +129,7 @@ export declare class Chips extends Component<ChipsOptions> {
     _handleInputFocus: () => void;
     _handleInputBlur: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
-    _renderChip(chip: ChipData): HTMLDivElement;
+    _renderChip(chip: ChipData): HTMLElement;
     _renderChips(): void;
     _setupAutocomplete(): void;
     _setupInput(): void;

package/dist/types/components/expandingCard.d.ts

@@ -0,0 +1,31 @@
+import { Component, BaseOptions, InitElements, InitElement, Openable } from "../core/component";
+export interface ExpandingCardOptions extends BaseOptions {
+    onOpen: (el: Element) => void;
+    onClose: (el: Element) => void;
+}
+export declare const EXPANDING_CARD_SELECTOR = "article.expanding-card:has(> dialog.expanding-card-dialog)";
+/**
+ * Morphs a compact card into a full-screen modal detail surface.
+ */
+export declare class ExpandingCard extends Component<ExpandingCardOptions> implements Openable {
+    isOpen: boolean;
+    private readonly trigger;
+    private readonly dialog;
+    private readonly closeButton;
+    private closeGeneration;
+    constructor(el: HTMLElement, options: Partial<ExpandingCardOptions>);
+    static get defaults(): ExpandingCardOptions;
+    static init(el: HTMLElement, options?: Partial<ExpandingCardOptions>): ExpandingCard;
+    static init(els: InitElements<InitElement>, options?: Partial<ExpandingCardOptions>): ExpandingCard[];
+    static getInstance(el: HTMLElement): ExpandingCard;
+    destroy(): void;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleTriggerKeypress;
+    private _handleCancel;
+    private _handleNativeClose;
+    private _setTransitionOrigin;
+    open: () => void;
+    close: () => void;
+    static Init(): void;
+}

package/dist/types/components/index.d.ts

@@ -1,20 +1,23 @@
-export { Autocomplete } from './autocomplete';
-export { FloatingActionButton } from './buttons';
-export { Cards } from './cards';
-export { Carousel } from './carousel';
-export { CharacterCounter } from './characterCounter';
-export { Chips } from './chips';
-export { Datepicker } from './datepicker';
-export { Menu } from './menu';
-export { Lightbox } from './lightbox';
-export { Parallax } from './parallax';
-export { Range } from './range';
-export { ScrollSpy } from './scrollspy';
-export { FormSelect } from './select';
-export { Sidenav } from './sidenav';
-export { NavigationRail } from './navigationRail';
-export { Slider } from './slider';
-export { Tabs } from './tabs';
-export { Timepicker } from './timepicker';
-export { Snackbar } from './snackbar';
-export { Tooltip } from './tooltip';
+export { Autocomplete } from "./autocomplete";
+export { AppBar } from "./appBar";
+export { FloatingActionButton } from "./buttons";
+export { ButtonGroup } from "./buttonGroup";
+export { Cards } from "./cards";
+export { ExpandingCard } from "./expandingCard";
+export { Carousel } from "./carousel";
+export { CharacterCounter } from "./characterCounter";
+export { Chips } from "./chips";
+export { Datepicker } from "./datepicker";
+export { Menu } from "./menu";
+export { Lightbox } from "./lightbox";
+export { Slider } from "./slider";
+export { ScrollSpy } from "./scrollspy";
+export { FormSelect } from "./select";
+export { NavigationDrawer } from "./navigationDrawer";
+export { NavigationRail } from "./navigationRail";
+export { Tabs } from "./tabs";
+export { Timepicker } from "./timepicker";
+export { Snackbar } from "./snackbar";
+export { Tooltip } from "./tooltip";
+export { Slider as Range } from "./slider";
+export { NavigationDrawer as Sidenav } from "./navigationDrawer";

package/dist/types/components/lightbox.d.ts

@@ -44,6 +44,7 @@ export declare class Lightbox extends Component<LightboxOptions> {
     originalHeight: number;
     private originInlineStyles;
     private placeholder;
+    /** Ancestors forced to `overflow: visible`, with the inline value to put back. */
     private _changedAncestorList;
     private newHeight;
     private newWidth;

package/dist/types/components/menu.d.ts

@@ -12,6 +12,10 @@ export interface MenuOptions extends BaseOptions {
     autoFocus: boolean;
     /**
      * If true, constrainWidth to the size of the menu activator.
+     *
+     * A trigger narrower than the surface's own 112dp minimum cannot be
+     * honoured, so such a menu is sized to its content instead - see
+     * MIN_SURFACE_WIDTH.
      * @default true
      */
     constrainWidth: boolean;
@@ -19,7 +23,7 @@ export interface MenuOptions extends BaseOptions {
      * Provide an element that will be the bounding container of the menu.
      * @default null
      */
-    container: Element;
+    container: Element | ShadowRoot;
     /**
      * If false, the menu will show below the trigger.
      * That is the M3 placement. Pass `true` to cover the trigger.
@@ -87,6 +91,8 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     focusedIndex: number;
     filterQuery: string[];
     filterTimeout: ReturnType<typeof setTimeout>;
+    private _pendingTimers;
+    private _transition;
     constructor(el: HTMLElement, options: Partial<MenuOptions>);
     static get defaults(): MenuOptions;
     /**
@@ -114,6 +120,7 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     _handleTriggerKeydown: (e: KeyboardEvent) => void;
     _handleDocumentTouchmove: (e: TouchEvent) => void;
     _handleMenuClick: (e: MouseEvent) => void;
+    private _setupAccessibility;
     private _isSubmenuTriggerClick;
     private _setupSubmenus;
     private _toggleSubmenu;
@@ -130,6 +137,7 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     _resetMenuPositioningStyles(): void;
     _moveMenuToElement(containerEl?: HTMLElement): void;
     _makeMenuFocusable(): void;
+    private _focusInitialItem;
     _focusFocusedItem(): void;
     _getMenuPosition(closestOverflowParent: HTMLElement): {
         x: number;
@@ -139,6 +147,8 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
         height: number;
         width: number;
     };
+    private _schedule;
+    private _clearPendingTimers;
     _animateIn(): void;
     _animateOut(): void;
     private _getClosestAncestor;