mtrl 0.8.0-next.21 → 0.8.0-next.24

package/dist/components/bottom-sheet/api.d.ts

@@ -0,0 +1,43 @@
+import { BottomSheetComponent, BottomSheetEventHandlers, BottomSheetState } from "./types";
+interface ApiOptions {
+    state: {
+        open: () => void;
+        close: () => void;
+        expand: () => void;
+        collapse: () => void;
+        isOpen: () => boolean;
+        getState: () => BottomSheetState;
+        release: () => void;
+    };
+    structure: {
+        setContent: (content: string | HTMLElement) => void;
+        setTitle: (title: string) => void;
+    };
+    drag: {
+        release: () => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface BaseComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    on: (event: string, handler: (...args: never[]) => void) => unknown;
+    off: (event: string, handler: (...args: never[]) => void) => unknown;
+}
+/**
+ * The public surface. Every method here is backed by a feature above it; none
+ * is declared and left unwired.
+ */
+export declare const withAPI: ({ state, structure, drag, lifecycle }: ApiOptions) => <C extends BaseComponent>(component: C) => BottomSheetComponent;
+/**
+ * Registers the handlers given at creation.
+ *
+ * Several components in this library declare an `on` option and never read it,
+ * so handlers passed at creation are silently dropped. This one reads it.
+ */
+export declare const applyEventHandlers: (component: {
+    on: (event: string, handler: (...args: never[]) => void) => unknown;
+}, handlers?: BottomSheetEventHandlers) => void;
+export {};

package/dist/components/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,24 @@
+import { BottomSheetConfig, BottomSheetComponent } from "./types";
+/**
+ * Creates a bottom sheet: a surface anchored to the bottom edge holding
+ * content secondary to the page.
+ *
+ * A modal sheet covers the page with a scrim and takes focus, for a task that
+ * must finish first. A standard sheet leaves the page usable alongside it.
+ *
+ * @param {BottomSheetConfig} config - Bottom sheet configuration
+ * @returns {BottomSheetComponent} Bottom sheet instance
+ *
+ * @example
+ * ```ts
+ * const sheet = createBottomSheet({
+ *   title: 'Share',
+ *   content: '<p>Choose where to send it.</p>',
+ *   on: { close: () => console.info('closed') }
+ * });
+ *
+ * sheet.open();
+ * ```
+ */
+declare const createBottomSheet: (config?: BottomSheetConfig) => BottomSheetComponent;
+export default createBottomSheet;

package/dist/components/bottom-sheet/config.d.ts

@@ -0,0 +1,34 @@
+import { BottomSheetConfig } from "./types";
+/**
+ * What the component applies when the caller says nothing.
+ */
+export declare const defaultConfig: Partial<BottomSheetConfig>;
+/**
+ * Merges the caller's configuration over the defaults.
+ */
+export declare const createBaseConfig: (config?: BottomSheetConfig) => BottomSheetConfig;
+/**
+ * The root element: a fixed layer holding the scrim and the sheet itself.
+ */
+export declare const getElementConfig: (config: BottomSheetConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    id: string;
+    name: string;
+    title: string;
+    tabIndex: number;
+    style: string | Partial<CSSStyleDeclaration>;
+    data: Record<string, string>;
+    role: string;
+    ariaLabel: string;
+    ariaDescribedBy: string;
+    ariaLabelledBy: string;
+    ariaHidden: boolean;
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};

package/dist/components/bottom-sheet/constants.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Bottom sheet variants.
+ *
+ * A standard sheet sits alongside the page and leaves it usable. A modal sheet
+ * puts a scrim over the page and takes focus, so it is the one to reach for
+ * when the sheet's task must finish before anything else continues.
+ */
+export declare const BOTTOM_SHEET_VARIANTS: {
+    readonly STANDARD: "standard";
+    readonly MODAL: "modal";
+};
+/**
+ * How far the sheet is open.
+ *
+ * `partial` shows the peek height, enough to say what the sheet holds without
+ * covering the page. `expanded` shows as much as the content needs.
+ */
+export declare const BOTTOM_SHEET_STATES: {
+    readonly HIDDEN: "hidden";
+    readonly PARTIAL: "partial";
+    readonly EXPANDED: "expanded";
+};
+/**
+ * Defaults, from Compose BottomSheetDefaults and SheetBottomTokens.
+ */
+export declare const BOTTOM_SHEET_DEFAULTS: {
+    readonly VARIANT: "modal";
+    /** BottomSheetDefaults.SheetPeekHeight */
+    readonly PEEK_HEIGHT: 56;
+    /** BottomSheetDefaults.SheetMaxWidth; wider viewports centre the sheet */
+    readonly MAX_WIDTH: 640;
+    /** A drag handle is part of the anatomy, so it is on unless asked otherwise */
+    readonly DRAG_HANDLE: true;
+    readonly CLOSE_ON_SCRIM_CLICK: true;
+    readonly CLOSE_ON_ESCAPE: true;
+    /**
+     * BottomSheetDefaults.PositionalThreshold: how far the sheet must be dragged
+     * before it settles at the next anchor rather than springing back.
+     */
+    readonly POSITIONAL_THRESHOLD: 56;
+    /** BottomSheetDefaults.VelocityThreshold, in dp per second */
+    readonly VELOCITY_THRESHOLD: 125;
+};
+/**
+ * Class names, without the prefix. `getClass` adds it.
+ */
+export declare const BOTTOM_SHEET_CLASSES: {
+    readonly ROOT: "bottom-sheet";
+    readonly SCRIM: "bottom-sheet-scrim";
+    readonly CONTAINER: "bottom-sheet-container";
+    readonly HANDLE: "bottom-sheet-handle";
+    readonly HEADER: "bottom-sheet-header";
+    readonly TITLE: "bottom-sheet-title";
+    readonly CONTENT: "bottom-sheet-content";
+};
+/**
+ * Events the sheet emits.
+ */
+export declare const BOTTOM_SHEET_EVENTS: {
+    readonly OPEN: "open";
+    readonly CLOSE: "close";
+    readonly STATE_CHANGE: "stateChange";
+    readonly DRAG_START: "dragStart";
+    readonly DRAG_END: "dragEnd";
+};

package/dist/components/bottom-sheet/features/drag.d.ts

@@ -0,0 +1,32 @@
+import { BottomSheetConfig, BottomSheetState } from "../types";
+interface DragComponent {
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => unknown;
+    structure: {
+        container: HTMLElement;
+        handle: HTMLElement | null;
+    };
+    state: {
+        getState: () => BottomSheetState;
+        setState: (next: BottomSheetState) => void;
+        close: () => void;
+    };
+}
+/**
+ * Dragging the sheet between its heights.
+ *
+ * Where the sheet settles follows Compose's rule: a drag past the positional
+ * threshold moves to the next anchor, and a flick past the velocity threshold
+ * does the same however short it was, so a quick flick works without having to
+ * cover the distance.
+ */
+export declare const withDrag: (config: BottomSheetConfig) => <C extends DragComponent>(component: C) => (C & {
+    drag: {
+        release: () => void;
+    };
+}) | (C & {
+    drag: {
+        release: () => void;
+    };
+});
+export {};

package/dist/components/bottom-sheet/features/index.d.ts

@@ -0,0 +1,3 @@
+export { withStructure } from "./structure";
+export { withState } from "./state";
+export { withDrag } from "./drag";

package/dist/components/bottom-sheet/features/state.d.ts

@@ -0,0 +1,31 @@
+import { BottomSheetConfig, BottomSheetState } from "../types";
+interface StateComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => unknown;
+    structure: {
+        scrim: HTMLElement | null;
+        container: HTMLElement;
+    };
+}
+/**
+ * Opening, closing and the two open heights.
+ *
+ * Events go through `component.emit`, which is what the composed events
+ * enhancer provides. Reaching for `component.events.emit` throws, because that
+ * shape comes from a different enhancer the barrel exports under another name.
+ */
+export declare const withState: (config: BottomSheetConfig) => <C extends StateComponent>(component: C) => C & {
+    state: {
+        open: (to?: BottomSheetState) => void;
+        close: () => void;
+        expand: () => void;
+        collapse: () => void;
+        isOpen: () => boolean;
+        getState: () => BottomSheetState;
+        setState: (next: BottomSheetState) => void;
+        /** Releases the listeners this feature put on the document */
+        release: () => void;
+    };
+};
+export {};

package/dist/components/bottom-sheet/features/structure.d.ts

@@ -0,0 +1,26 @@
+import { BottomSheetConfig } from "../types";
+/**
+ * Builds the parts of the sheet and puts the whole thing on the page.
+ *
+ * The root element is a fixed layer that holds the scrim and the sheet
+ * container, so both are children of something that exists. An earlier sheet
+ * in this library inserted its scrim through `element.parentNode` at
+ * construction, when the element had no parent yet, and so never had a scrim
+ * at all.
+ */
+export declare const withStructure: (config: BottomSheetConfig) => <C extends {
+    element: HTMLElement;
+    getClass: (n: string) => string;
+}>(component: C) => C & {
+    structure: {
+        scrim: HTMLElement;
+        container: HTMLDivElement;
+        handle: HTMLElement;
+        title: HTMLElement;
+        content: HTMLDivElement;
+        /** Replaces the body */
+        setContent(next: string | HTMLElement): void;
+        /** Replaces the headline, adding one if the sheet had none */
+        setTitle(next: string): void;
+    };
+};

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { default as createBottomSheet, default } from "./bottom-sheet";
+export type { BottomSheetConfig, BottomSheetComponent, BottomSheetVariant, BottomSheetState, BottomSheetStateEvent, BottomSheetEventHandlers, } from "./types";

package/dist/components/bottom-sheet/types.d.ts

@@ -0,0 +1,116 @@
+import { BOTTOM_SHEET_VARIANTS, BOTTOM_SHEET_STATES } from "./constants";
+/** Standard or modal */
+export type BottomSheetVariant = (typeof BOTTOM_SHEET_VARIANTS)[keyof typeof BOTTOM_SHEET_VARIANTS];
+/** How far the sheet is open */
+export type BottomSheetState = (typeof BOTTOM_SHEET_STATES)[keyof typeof BOTTOM_SHEET_STATES];
+/** What a state change reports */
+export interface BottomSheetStateEvent {
+    /** The state the sheet has moved to */
+    state: BottomSheetState;
+    /** The state it came from */
+    previous: BottomSheetState;
+}
+/** Handlers accepted at creation, one per event name */
+export interface BottomSheetEventHandlers {
+    open?: () => void;
+    close?: () => void;
+    stateChange?: (event: BottomSheetStateEvent) => void;
+    dragStart?: () => void;
+    dragEnd?: (event: BottomSheetStateEvent) => void;
+}
+/**
+ * Configuration for the bottom sheet.
+ *
+ * @category Components
+ */
+export interface BottomSheetConfig {
+    /**
+     * Standard sheets leave the page usable; modal sheets cover it with a scrim
+     * and take focus.
+     * @default 'modal'
+     */
+    variant?: BottomSheetVariant;
+    /**
+     * Headline shown above the content. Also names the sheet for assistive
+     * technology, through `aria-labelledby`.
+     */
+    title?: string;
+    /** Body of the sheet, as markup or an element */
+    content?: string | HTMLElement;
+    /**
+     * The 32x4dp bar at the top edge, which says the sheet can be dragged.
+     * Turning it off also turns off dragging, since nothing would indicate it.
+     * @default true
+     */
+    dragHandle?: boolean;
+    /**
+     * Height of the partially expanded state, in pixels.
+     * @default 56
+     */
+    peekHeight?: number;
+    /**
+     * The sheet stops growing at this width and centres itself, so it does not
+     * stretch across a desktop window.
+     * @default 640
+     */
+    maxWidth?: number;
+    /**
+     * State to start in. `hidden` builds the sheet without showing it.
+     * @default 'hidden'
+     */
+    initialState?: BottomSheetState;
+    /**
+     * Whether a click on the scrim closes a modal sheet. Standard sheets have no
+     * scrim, so this does nothing for them.
+     * @default true
+     */
+    closeOnScrimClick?: boolean;
+    /**
+     * Whether Escape closes a modal sheet.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /** Where to mount the sheet. Defaults to `document.body` */
+    container?: HTMLElement;
+    /** Handlers registered at creation, equivalent to calling `on` for each */
+    on?: BottomSheetEventHandlers;
+    /** Extra classes for the root element */
+    class?: string;
+    /** @internal */
+    prefix?: string;
+    /** @internal */
+    componentName?: string;
+}
+/**
+ * A bottom sheet instance.
+ *
+ * @category Components
+ */
+export interface BottomSheetComponent {
+    /** The root element, which holds the scrim and the container */
+    element: HTMLElement;
+    /** Opens the sheet, partially expanded */
+    open: () => BottomSheetComponent;
+    /** Closes the sheet */
+    close: () => BottomSheetComponent;
+    /** Opens the sheet to its full height */
+    expand: () => BottomSheetComponent;
+    /** Returns the sheet to the peek height */
+    collapse: () => BottomSheetComponent;
+    /** Whether the sheet is showing at all */
+    isOpen: () => boolean;
+    /** How far the sheet is open */
+    getState: () => BottomSheetState;
+    /** Replaces the body of the sheet */
+    setContent: (content: string | HTMLElement) => BottomSheetComponent;
+    /** Replaces the headline */
+    setTitle: (title: string) => BottomSheetComponent;
+    /** Adds an event listener */
+    on: <T extends keyof BottomSheetEventHandlers>(event: T, handler: NonNullable<BottomSheetEventHandlers[T]>) => BottomSheetComponent;
+    /** Removes an event listener */
+    off: <T extends keyof BottomSheetEventHandlers>(event: T, handler: NonNullable<BottomSheetEventHandlers[T]>) => BottomSheetComponent;
+    /** Removes the sheet from the page and releases its listeners */
+    destroy: () => void;
+    /** Prefixes a class name, for styling hooks */
+    getClass: (name: string) => string;
+}

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

@@ -165,7 +165,7 @@ export interface DialogConfig {
     zIndex?: number;
     /**
      * Duration of open/close animations in milliseconds
-     * @default 300
+     * @default 150
      */
     animationDuration?: number;
     /**

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

@@ -92,7 +92,7 @@ export interface DrawerConfig extends BaseComponentConfig {
     items?: DrawerItemConfig[];
     /**
      * Drawer width as a CSS value
-     * @default '360px'
+     * @default 360
      */
     width?: string | number;
     /**

package/dist/components/index.d.ts

@@ -9,6 +9,8 @@
  */
 export { default as createBadge } from "./badge";
 export { default as createBottomAppBar } from "./bottom-app-bar";
+export { default as createBottomSheet } from "./bottom-sheet";
+export { default as createSideSheet } from "./side-sheet";
 export { default as createButton } from "./button";
 export { default as createButtonGroup } from "./button-group";
 export { default as createCard } from "./card";
@@ -34,6 +36,7 @@ export { default as createSearch } from "./search";
 export { default as createSelect } from "./select";
 export { default as createSegmentedButton } from "./segmented-button";
 export { createSegment } from "./segmented-button/segment";
+/** @deprecated Since 0.8.0. Use createBottomSheet or createSideSheet. */
 export { default as createSheet } from "./sheet";
 export { default as createSlider } from "./slider";
 export { default as createSnackbar } from "./snackbar";
@@ -48,6 +51,8 @@ export { default as createTooltip } from "./tooltip";
 export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content";
 export type { BadgeConfig, BadgeComponent } from "./badge/types";
 export type { BottomAppBarConfig, BottomAppBar } from "./bottom-app-bar/types";
+export type { BottomSheetConfig, BottomSheetComponent, BottomSheetVariant, BottomSheetState, BottomSheetStateEvent, BottomSheetEventHandlers, } from "./bottom-sheet/types";
+export type { SideSheetConfig, SideSheetComponent, SideSheetVariant, SideSheetPosition, SideSheetEventHandlers, } from "./side-sheet/types";
 export type { ButtonConfig, ButtonComponent, ButtonVariant, } from "./button/types";
 export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity, } from "./button-group/types";
 export type { CardSchema } from "./card/types";
@@ -71,6 +76,7 @@ export type { RadiosConfig, RadiosComponent, RadioOptionConfig, } from "./radios
 export type { SearchConfig, SearchComponent } from "./search/types";
 export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent, } from "./select/types";
 export type { SegmentedButtonConfig, SegmentedButtonComponent, } from "./segmented-button/types";
+/** @deprecated Since 0.8.0. Use the BottomSheet or SideSheet types. */
 export type { SheetConfig, SheetComponent } from "./sheet/types";
 export type { SliderConfig, SliderComponent, SliderEvent, } from "./slider/types";
 export type { SnackbarConfig, SnackbarComponent } from "./snackbar/types";

package/dist/components/menu/features/registry.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Keeps track of which menu is open, so that opening one closes the last.
+ *
+ * A menu button's menu is dismissed once the interaction moves outside it, so
+ * two menus should never be open together: the screen reader would be told
+ * there are two, since both openers carry aria-expanded="true".
+ *
+ * Menus used to rely on the document click listener each open menu installs to
+ * notice a click elsewhere and close. That never fired for another menu's
+ * opener, because the opener stops the click from propagating, so menus piled
+ * up. Announcing the open here does not depend on how the menu was opened,
+ * which the click path could never cover: a menu opened by keyboard or by code
+ * closes the previous one just the same.
+ *
+ * Only root menus take part. Submenus belong to their parent, which closes them.
+ */
+/** What the registry needs of a menu: a way to close it */
+export interface RegisteredMenu {
+    close: (event?: Event) => void;
+}
+/**
+ * Announces that a menu has opened, closing whichever was open before.
+ *
+ * @param menu - The menu that is opening
+ * @param event - The event that opened it, passed to the menu being closed
+ */
+export declare const menuOpened: (menu: RegisteredMenu, event?: Event) => void;
+/**
+ * Announces that a menu has closed. Closing a menu that is not the open one is
+ * a no-op, which is what makes the call safe from any close path, including
+ * destroy.
+ *
+ * @param menu - The menu that is closing
+ */
+export declare const menuClosed: (menu: RegisteredMenu) => void;
+/** The menu that is currently open, if any. Exported for tests */
+export declare const currentlyOpenMenu: () => RegisteredMenu | null;

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

@@ -8,7 +8,7 @@
  * @category Components
  */
 export { default } from './menu';
-export type { MenuConfig, MenuComponent, MenuItem, MenuDivider, MenuContent, MenuEvent, MenuSelectEvent, MenuPosition } from './types';
+export type { MenuConfig, MenuComponent, MenuItem, MenuDivider, MenuGap, MenuContent, MenuEvent, MenuSelectEvent, MenuPosition } from './types';
 /**
  * Constants for menu position values - use these instead of string literals
  * for better code completion and type safety.

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

@@ -103,11 +103,33 @@ export interface MenuDivider {
     id?: string;
 }
 /**
- * Combined type for menu content items (regular items or dividers)
+ * Menu item type for a gap between groups.
+ *
+ * The M3 expressive vertical menu separates groups two ways: a divider line,
+ * or a gap. A gap splits the menu into separate surfaces, each with its own
+ * rounded container, rather than drawing a line across one surface
+ * (m3.material.io/components/menus, vertical menus).
+ *
+ * A standard menu is a single surface, so a gap there is simply space.
+ *
+ * @category Components
+ */
+export interface MenuGap {
+    /**
+     * Type must be 'gap' to differentiate from regular menu items
+     */
+    type: "gap";
+    /**
+     * Optional ID for the gap (for accessibility)
+     */
+    id?: string;
+}
+/**
+ * Combined type for menu content items (regular items, dividers or gaps)
  *
  * @category Components
  */
-export type MenuContent = MenuItem | MenuDivider;
+export type MenuContent = MenuItem | MenuDivider | MenuGap;
 /**
  * Configuration interface for the Menu component
  *
@@ -129,15 +151,11 @@ export interface MenuConfig {
      * Array of menu items and dividers to display
      */
     items: MenuContent[];
-    /**
-     * Position of the menu relative to the opener
-     * @default 'bottom-start'
-     */
     /**
      * Menu variant. `'vertical'` is the M3 expressive menu: a rounded
      * container holding items that sit apart and change shape as they are
-     * hovered, focused, pressed or selected. Defaults to `'baseline'`, the
-     * original M3 menu.
+     * hovered, focused, pressed or selected.
+     * @default 'baseline'
      */
     variant?: MenuVariant;
     /**
@@ -145,6 +163,10 @@ export interface MenuConfig {
      * and more prominent, so it should be used sparingly.
      */
     color?: MenuColor;
+    /**
+     * Position of the menu relative to the opener
+     * @default 'bottom-start'
+     */
     position?: MenuPosition;
     /**
      * Whether the menu should close when an item is clicked
@@ -183,7 +205,7 @@ export interface MenuConfig {
     maxHeight?: string;
     /**
      * Optional offset from the opener (in pixels)
-     * @default 8
+     * @default 0
      */
     offset?: number;
     /**

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

@@ -55,7 +55,7 @@ export interface ProgressConfig {
     /**
      * Thickness of the progress track and indicator
      * Can be a named preset ('thin', 'default', 'thick') or a specific number in pixels
-     * @default 'default'
+     * @default 'thin'
      */
     thickness?: ProgressThickness;
     /**
@@ -109,7 +109,7 @@ export interface ProgressConfig {
     /**
      * Size of the circular progress indicator in dp (only for circular variant)
      * Clamped between 24 and 240
-     * @default 50
+     * @default 40 (48 when wavy)
      */
     size?: number;
 }

package/dist/components/sheet/sheet.d.ts

@@ -1,6 +1,18 @@
 import { SheetConfig } from "./types";
 /**
  * Creates a new Sheet component
+ *
+ * @deprecated Since 0.8.0. Use {@link createBottomSheet} for a sheet anchored
+ * to the bottom edge, or {@link createSideSheet} for one docked to a vertical
+ * edge. Those follow the M3 bottom sheet and side sheet specifications, which
+ * this component predates and does not match.
+ *
+ * This component is also broken: `open()`, `close()` and the drag gestures
+ * call `component.events.emit(...)`, but it composes the event feature that
+ * provides `emit` directly and no `events` object, so every one of them
+ * throws. Its scrim is never inserted into the page either. It is kept only so
+ * that existing imports keep resolving, and it will be removed.
+ *
  * @param {SheetConfig} config - Sheet configuration object
  * @returns {SheetComponent} Sheet component instance
  */

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

@@ -24,6 +24,10 @@ export declare const SHEET_EVENTS: {
     readonly DRAG_START: "dragstart";
     readonly DRAG_END: "dragend";
 };
+/**
+ * @deprecated Since 0.8.0. Use BottomSheetConfig or SideSheetConfig.
+ * The sheet component this belongs to does not open: see createSheet.
+ */
 /**
  * Configuration interface for the Sheet component
  * @category Components
@@ -146,6 +150,10 @@ export interface TitleAPI {
      */
     getElement: () => HTMLElement | null;
 }
+/**
+ * @deprecated Since 0.8.0. Use BottomSheetComponent or SideSheetComponent.
+ * The sheet component this belongs to does not open: see createSheet.
+ */
 /**
  * Sheet component interface
  * @category Components

package/dist/components/side-sheet/api.d.ts

@@ -0,0 +1,33 @@
+import { SideSheetComponent, SideSheetEventHandlers } from "./types";
+interface ApiOptions {
+    state: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: () => boolean;
+        release: () => void;
+    };
+    structure: {
+        setContent: (content: string | HTMLElement) => void;
+        setTitle: (title: string) => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface BaseComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    on: (event: string, handler: (...args: never[]) => void) => unknown;
+    off: (event: string, handler: (...args: never[]) => void) => unknown;
+}
+/**
+ * The public surface. Every method is backed by a feature; none is declared
+ * and left unwired.
+ */
+export declare const withAPI: ({ state, structure, lifecycle }: ApiOptions) => <C extends BaseComponent>(component: C) => SideSheetComponent;
+/** Registers the handlers given at creation */
+export declare const applyEventHandlers: (component: {
+    on: (event: string, handler: (...args: never[]) => void) => unknown;
+}, handlers?: SideSheetEventHandlers) => void;
+export {};