@m3e/web 2.0.0

package/dist/src/bottom-sheet/BottomSheetElement.d.ts

@@ -0,0 +1,189 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import "@m3e/web/core/a11y";
+declare const M3eBottomSheetElement_base: typeof LitElement;
+/**
+ * A sheet used to show secondary content anchored to the bottom of the screen.
+ *
+ * @description
+ * The `m3e-bottom-sheet` component implements a Material 3 bottom sheet with
+ * gesture‑driven resizing, detent snapping, and adaptive motion. It behaves as
+ * a heavy surface: transitions use non‑bouncy, decelerating motion.
+ *
+ * The sheet supports direct manipulation through vertical drag gestures.
+ * Movement below an 8px threshold is ignored to ensure reliable tap‑to‑cycle
+ * behavior on the handle. Once activated, dragging updates the sheet height
+ * with friction near the minimum height to prevent abrupt collapse.
+ *
+ * When detents are defined, the sheet snaps to the nearest detent on release.
+ * If hideable, downward gestures may dismiss the sheet using either velocity
+ * or a small distance threshold below the collapsed detent. When no detents
+ * are present, the sheet behaves as a simple open/hidden surface with a
+ * bottom‑measured hide threshold.
+ *
+ * @example
+ * The following example shows a modal bottom sheet with a drag handle,
+ * three detents (`fit`, `half`, and `full`), and an action list. The sheet
+ * is opened using a dedicated `m3e-bottom-sheet-trigger` associated by ID.
+ * ```html
+ * <m3e-button>
+ *   <m3e-bottom-sheet-trigger for="bottomSheet">
+ *     Open Bottom sheet
+ *   </m3e-bottom-sheet-trigger>
+ * </m3e-button>
+ *
+ * <m3e-bottom-sheet id="bottomSheet" modal handle hideable detents="fit half full">
+ *   <m3e-action-list>
+ *     <m3e-list-action autofocus>
+ *       <m3e-bottom-sheet-action>Google Keep</m3e-bottom-sheet-action>
+ *       <span slot="supporting-text">Add to a note</span>
+ *     </m3e-list-action>
+ *     <m3e-list-action>
+ *       <m3e-bottom-sheet-action>Google Docs</m3e-bottom-sheet-action>
+ *       <span slot="supporting-text">Embed in a document</span>
+ *     </m3e-list-action>
+ *   </m3e-action-list>
+ * </m3e-bottom-sheet>
+ * ```
+ *
+ * @tag m3e-bottom-sheet
+ *
+ * @slot - Renders the content of the sheet.
+ * @slot header - Renders the header of the sheet.
+ *
+ * @attr detent - The zero‑based index of the detent the sheet should open to.
+ * @attr detents - Detents (discrete height states) the sheet can snap to.
+ * @attr handle - Whether to display a drag handle and enable the top region of the sheet as a gesture surface for dragging between detents.
+ * @attr handle-label - The accessible label given to the drag handle.
+ * @attr hideable - Whether the bottom sheet can hide when its swiped down.
+ * @attr hide-friction - The friction coefficient to hide the sheet, or set it to the next closest expanded detent.
+ * @attr modal - Whether the bottom sheet behaves as modal.
+ * @attr open - Whether the bottom sheet is open.
+ *
+ * @fires opening - Emitted when the sheet begins to open.
+ * @fires opened - Emitted when the sheet has opened.
+ * @fires cancel - Emitted when the sheet is cancelled.
+ * @fires closing - Emitted when the sheet begins to close.
+ * @fires closed - Emitted when the sheet has closed.
+ *
+ * @cssprop --m3e-bottom-sheet-width - The width of the sheet.
+ * @cssprop --m3e-bottom-sheet-max-width - The maximum width of the sheet.
+ * @cssprop --m3e-bottom-sheet-container-color - The background color of the sheet container.
+ * @cssprop --m3e-bottom-sheet-elevation - The elevation level when not modal.
+ * @cssprop --m3e-bottom-sheet-modal-elevation - The elevation level when modal.
+ * @cssprop --m3e-bottom-sheet-full-elevation - The elevation level when full height.
+ * @cssprop --m3e-bottom-sheet-z-index - The z-index of the non-modal sheet.
+ * @cssprop --m3e-bottom-sheet-minimized-container-shape - The border radius when minimized.
+ * @cssprop --m3e-bottom-sheet-container-shape - The border radius of the sheet container.
+ * @cssprop --m3e-bottom-sheet-full-container-shape - The border radius when full height.
+ * @cssprop --m3e-bottom-sheet-scrim-color - The color of the scrim overlay.
+ * @cssprop --m3e-bottom-sheet-scrim-opacity - The opacity of the scrim overlay.
+ * @cssprop --m3e-bottom-sheet-peek-height - The visible height when minimized.
+ * @cssprop --m3e-bottom-sheet-compact-top-space - The top space in compact mode.
+ * @cssprop --m3e-bottom-sheet-top-space - The top space in standard mode.
+ * @cssprop --m3e-bottom-sheet-padding-block - The vertical padding.
+ * @cssprop --m3e-bottom-sheet-padding-inline - The horizontal padding.
+ * @cssprop --m3e-bottom-sheet-handle-container-height - The height of the drag handle container.
+ * @cssprop --m3e-bottom-sheet-handle-width - The width of the drag handle.
+ * @cssprop --m3e-bottom-sheet-handle-height - The height of the drag handle.
+ * @cssprop --m3e-bottom-sheet-handle-shape - The border radius of the handle.
+ * @cssprop --m3e-bottom-sheet-handle-color - The color of the drag handle.
+ * @cssprop --m3e-bottom-sheet-handle-focus-ring-offset - The offset of the focus ring around the handle.
+ * @cssprop --m3e-bottom-sheet-color - The foreground (text) color of the sheet.
+ * @cssprop --m3e-bottom-sheet-content-font-size - Font size for the sheet content.
+ * @cssprop --m3e-bottom-sheet-content-font-weight - Font weight for the sheet content.
+ * @cssprop --m3e-bottom-sheet-content-line-height - Line height for the sheet content.
+ * @cssprop --m3e-bottom-sheet-content-tracking - Letter spacing (tracking) for the sheet content.
+ * @cssprop --m3e-bottom-sheet-header-font-size - Font size for the sheet header.
+ * @cssprop --m3e-bottom-sheet-header-font-weight - Font weight for the sheet header.
+ * @cssprop --m3e-bottom-sheet-header-line-height - Line height for the sheet header.
+ * @cssprop --m3e-bottom-sheet-header-tracking - Letter spacing (tracking) for the sheet header.
+ */
+export declare class M3eBottomSheetElement extends M3eBottomSheetElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __openSheet?;
+    /**
+     * Whether the bottom sheet behaves as modal.
+     * @default false
+     */
+    modal: boolean;
+    /**
+     * Whether the bottom sheet is open.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Whether to display a drag handle and enable the top region of the sheet as a gesture
+     * surface for dragging between detents.
+     * @default false
+     */
+    handle: boolean;
+    /**
+     * The accessible label given to the drag handle.
+     * @default "Drag handle"
+     */
+    handleLabel: string;
+    /**
+     * Detents (discrete height states) the sheet can snap to.
+     * @default []
+     */
+    detents: string[];
+    /**
+     * The zero‑based index of the detent the sheet should open to.
+     * @default 0
+     */
+    detent: number;
+    /**
+     * Whether the bottom sheet can hide when its swiped down.
+     * @default false
+     */
+    hideable: boolean;
+    /**
+     * The friction coefficient to hide the sheet, or set it to the next closest expanded detent.
+     * @default 0.5
+     */
+    hideFriction: number;
+    /**
+     * Shows the sheet.
+     * @param {number} detent The zero‑based index of the detent the sheet should open to.
+     */
+    show(detent?: number): void;
+    /** Hides the sheet. */
+    hide(): void;
+    /**
+     * Toggles the opened state of the sheet.
+     * @param {number} detent The zero‑based index of the detent the sheet should open to.
+     */
+    toggle(detent?: number): void;
+    /** Moves the sheet to the next detent. */
+    cycle(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    firstUpdated(_changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+interface M3eBottomSheetElementEventMap extends HTMLElementEventMap {
+    opening: Event;
+    opened: Event;
+    closing: Event;
+    closed: Event;
+    cancel: Event;
+}
+export interface M3eBottomSheetElement {
+    addEventListener<K extends keyof M3eBottomSheetElementEventMap>(type: K, listener: (this: M3eBottomSheetElement, ev: M3eBottomSheetElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eBottomSheetElementEventMap>(type: K, listener: (this: M3eBottomSheetElement, ev: M3eBottomSheetElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-bottom-sheet": M3eBottomSheetElement;
+    }
+}
+export {};
+//# sourceMappingURL=BottomSheetElement.d.ts.map

package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetElement.d.ts","sourceRoot":"","sources":["../../../src/bottom-sheet/BottomSheetElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAiBhG,OAAO,oBAAoB,CAAC;;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,qBACa,qBAAsB,SAAQ,0BAO1C;;IAqBC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0MpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,CAAwB;IAyBnE;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACyC,IAAI,UAAS;IAEzD;;;;OAIG;IAC0B,MAAM,UAAS;IAE5C;;;OAGG;IACsC,WAAW,SAAiB;IAErE;;;OAGG;IAC2E,OAAO,EAAE,MAAM,EAAE,CAAM;IAErG;;;OAGG;IACyB,MAAM,SAAK;IAEvC;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACqD,YAAY,SAAO;IAE3E;;;OAGG;IACH,IAAI,CAAC,MAAM,GAAE,MAAoB,GAAG,IAAI;IASxC,uBAAuB;IACvB,IAAI,IAAI,IAAI;IAIZ;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAQ7B,0CAA0C;IAC1C,KAAK,IAAI,IAAI;IAeb,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUxE,kBAAkB;IACT,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAgB/D,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmFpE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA8arC;AAED,UAAU,6BAA8B,SAAQ,mBAAmB;IACjE,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,CAAC,SAAS,MAAM,6BAA6B,EAC5D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,EAAE,EAAE,6BAA6B,CAAC,CAAC,CAAC,KAAK,IAAI,EACrF,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,6BAA6B,EAC/D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,EAAE,EAAE,6BAA6B,CAAC,CAAC,CAAC,KAAK,IAAI,EACrF,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/dist/src/bottom-sheet/BottomSheetTriggerElement.d.ts

@@ -0,0 +1,36 @@
+import { ActionElementBase } from "@m3e/web/core";
+declare const M3eBottomSheetTriggerElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").HtmlForMixin> & typeof ActionElementBase;
+/**
+ * An element, nested within a clickable element, used to trigger a bottom sheet.
+ * @tag m3e-bottom-sheet-trigger
+ *
+ * @slot - Renders the content of the trigger.
+ *
+ * @attr detent - The zero‑based index of the detent the sheet should open to.
+ * @attr secondary - Marks this trigger as a secondary trigger for accessibility. Secondary triggers do not receive ARIA ownership.
+ */
+export declare class M3eBottomSheetTriggerElement extends M3eBottomSheetTriggerElement_base {
+    /**
+     * The zero‑based index of the detent the sheet should open to.
+     * @default undefined
+     */
+    detent?: number;
+    /**
+     * Marks this trigger as a secondary trigger for accessibility. Secondary triggers do not receive ARIA ownership.
+     * @default false
+     */
+    secondary: boolean;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    protected _onClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-bottom-sheet-trigger": M3eBottomSheetTriggerElement;
+    }
+}
+export {};
+//# sourceMappingURL=BottomSheetTriggerElement.d.ts.map

package/dist/src/bottom-sheet/BottomSheetTriggerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetTriggerElement.d.ts","sourceRoot":"","sources":["../../../src/bottom-sheet/BottomSheetTriggerElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAW,MAAM,eAAe,CAAC;;AAK3D;;;;;;;;GAQG;AACH,qBACa,4BAA6B,SAAQ,iCAA0B;IAC1E;;;OAGG;IACyB,MAAM,CAAC,EAAE,MAAM,CAAC;IAE5C;;;OAGG;IAC0B,SAAS,UAAS;IAE/C,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAoB3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAOvB,kBAAkB;cACC,QAAQ,IAAI,IAAI;CAYpC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,4BAA4B,CAAC;KAC1D;CACF"}

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

@@ -0,0 +1,4 @@
+export * from "./BottomSheetActionElement";
+export * from "./BottomSheetElement";
+export * from "./BottomSheetTriggerElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/bottom-sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/bottom-sheet/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC"}