mtrl 0.8.0-next.30 → 0.8.0-next.32

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/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/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 {};

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

@@ -0,0 +1,34 @@
+import { SideSheetConfig } from "./types";
+/**
+ * What the component applies when the caller says nothing.
+ */
+export declare const defaultConfig: Partial<SideSheetConfig>;
+/**
+ * Merges the caller's configuration over the defaults.
+ */
+export declare const createBaseConfig: (config?: SideSheetConfig) => SideSheetConfig;
+/**
+ * The root element: a fixed layer holding the scrim and the sheet itself.
+ */
+export declare const getElementConfig: (config: SideSheetConfig) => {
+    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/side-sheet/constants.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Side sheet variants.
+ *
+ * A standard sheet is docked: it sits in the layout beside the page and leaves
+ * it usable. A modal sheet floats over the page behind a scrim and takes focus.
+ * They differ in colour as well as behaviour, which is why the variant is not
+ * only a class (m3.material.io/components/side-sheets).
+ */
+export declare const SIDE_SHEET_VARIANTS: {
+    readonly STANDARD: "standard";
+    readonly MODAL: "modal";
+};
+/**
+ * Which edge the sheet is docked to.
+ *
+ * These are logical, not physical: `end` is the right edge in a left-to-right
+ * document and the left edge in a right-to-left one, so a sheet does not need
+ * reconfiguring per language.
+ */
+export declare const SIDE_SHEET_POSITIONS: {
+    readonly START: "start";
+    readonly END: "end";
+};
+/**
+ * Defaults, from the M3 side sheet specs and the Android implementation.
+ */
+export declare const SIDE_SHEET_DEFAULTS: {
+    readonly VARIANT: "modal";
+    /** Side sheets dock to the trailing edge unless told otherwise */
+    readonly POSITION: "end";
+    /** The width the Android implementation uses for a standard sheet */
+    readonly WIDTH: 256;
+    /** m3.material.io side sheet specs, container maximum width */
+    readonly MAX_WIDTH: 400;
+    /** A modal sheet offers a way out of itself */
+    readonly CLOSE_BUTTON: true;
+    readonly CLOSE_ON_SCRIM_CLICK: true;
+    readonly CLOSE_ON_ESCAPE: true;
+};
+/**
+ * Class names, without the prefix. `getClass` adds it.
+ */
+export declare const SIDE_SHEET_CLASSES: {
+    readonly ROOT: "side-sheet";
+    readonly SCRIM: "side-sheet-scrim";
+    readonly CONTAINER: "side-sheet-container";
+    readonly HEADER: "side-sheet-header";
+    readonly TITLE: "side-sheet-title";
+    readonly CLOSE: "side-sheet-close";
+    readonly DIVIDER: "side-sheet-divider";
+    readonly CONTENT: "side-sheet-content";
+    readonly ACTIONS: "side-sheet-actions";
+};
+/**
+ * Events the sheet emits.
+ */
+export declare const SIDE_SHEET_EVENTS: {
+    readonly OPEN: "open";
+    readonly CLOSE: "close";
+};

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

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

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

@@ -0,0 +1,28 @@
+import { SideSheetConfig } from "../types";
+interface StateComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => unknown;
+    structure: {
+        scrim: HTMLElement | null;
+        container: HTMLElement;
+        closeButton: HTMLButtonElement | null;
+    };
+}
+/**
+ * Opening and closing, and everything that closes it.
+ *
+ * Events go through `component.emit`, which is what the composed events
+ * enhancer provides.
+ */
+export declare const withState: (config: SideSheetConfig) => <C extends StateComponent>(component: C) => C & {
+    state: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: () => boolean;
+        /** Releases the listeners this feature put on the document */
+        release: () => void;
+    };
+};
+export {};

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

@@ -0,0 +1,21 @@
+import { SideSheetConfig } from "../types";
+/**
+ * Builds the parts of the sheet and puts the whole thing on the page.
+ *
+ * As with the bottom sheet, the root element holds both the scrim and the
+ * container, so neither depends on a parent that does not exist yet.
+ */
+export declare const withStructure: (config: SideSheetConfig) => <C extends {
+    element: HTMLElement;
+    getClass: (n: string) => string;
+}>(component: C) => C & {
+    structure: {
+        scrim: HTMLElement;
+        container: HTMLDivElement;
+        title: HTMLElement;
+        closeButton: HTMLButtonElement;
+        content: HTMLDivElement;
+        setContent(next: string | HTMLElement): void;
+        setTitle(next: string): void;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default as createSideSheet, default } from "./side-sheet";
+export type { SideSheetConfig, SideSheetComponent, SideSheetVariant, SideSheetPosition, SideSheetEventHandlers, } from "./types";

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

@@ -0,0 +1,24 @@
+import { SideSheetConfig, SideSheetComponent } from "./types";
+/**
+ * Creates a side sheet: a surface docked to a vertical edge, holding content
+ * that supports the page rather than replacing it.
+ *
+ * A standard sheet sits beside the page and leaves it usable. A modal sheet
+ * floats over it behind a scrim and takes focus.
+ *
+ * @param {SideSheetConfig} config - Side sheet configuration
+ * @returns {SideSheetComponent} Side sheet instance
+ *
+ * @example
+ * ```ts
+ * const filters = createSideSheet({
+ *   title: 'Filters',
+ *   content: '<p>Narrow the results.</p>',
+ *   on: { close: () => applyFilters() }
+ * });
+ *
+ * filters.open();
+ * ```
+ */
+declare const createSideSheet: (config?: SideSheetConfig) => SideSheetComponent;
+export default createSideSheet;