@m3e/drawer-container 1.0.0-rc.1

package/dist/src/DrawerContainerElement.d.ts

@@ -0,0 +1,105 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { DrawerMode } from "./DrawerMode";
+declare const M3eDrawerContainerElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * @summary
+ * A container for one or two sliding drawers.
+ *
+ * @description
+ * A responsive layout container that manages left and right drawers alongside main content.
+ * Supports `over`, `push`, `side`, and `auto` modes, adapting drawer behavior based on breakpoint size.
+ * Encodes spatial hierarchy, motion transitions, and accessibility semantics for modal, dismissible,
+ * and permanent navigation.
+ *
+ * @example
+ * The following example illustrates a typical drawer layout.
+ * ```html
+ * <m3e-drawer-container>
+ *  <nav slot="start">
+ *    <!-- Start drawer content -->
+ *  </nav>
+ *  <main>
+ *    <!-- Main content -->
+ *  </main>
+ *  <aside slot="end">
+ *    <!-- End drawer content -->
+ *  </aside>
+ * <m3e-drawer-container>
+ * ```
+ *
+ * @tag m3e-drawer-container
+ *
+ * @slot - Renders the main content.
+ * @slot start - Renders the start drawer.
+ * @slot end - Renders the end drawer.
+ *
+ * @attr end - Whether the end drawer is open.
+ * @attr end-mode - The behavior mode of the end drawer.
+ * @attr end-divider - Whether to show a divider between the end drawer and content for `side` mode.
+ * @attr start - Whether the start drawer is open.
+ * @attr start-mode - The behavior mode of the start drawer.
+ * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.
+ *
+ * @fires change - Emitted when the state of the start or end drawers change.
+ *
+ * @cssprop --m3e-drawer-container-color - The background color of the drawer container.
+ * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.
+ * @cssprop --m3e-drawer-container-width - The width of the drawer container.
+ * @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.
+ * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer’s start edge (typically left in LTR).
+ * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer’s end edge (typically right in LTR).
+ * @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.
+ * @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.
+ * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.
+ * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.
+ */
+export declare class M3eDrawerContainerElement extends M3eDrawerContainerElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private _startMode;
+    /** @private */ private _endMode;
+    /**
+     * Whether the start drawer is open.
+     * @default false
+     */
+    start: boolean;
+    /**
+     * The behavior mode of the start drawer.
+     * @default "side"
+     */
+    startMode: DrawerMode;
+    /**
+     * Whether to show a divider between the start drawer and content for `side` mode.
+     * @default "side"
+     */
+    startDivider: boolean;
+    /**
+     * Whether the end drawer is open.
+     * @default false
+     */
+    end: boolean;
+    /**
+     * The behavior mode of the end drawer.
+     * @default "side"
+     */
+    endMode: DrawerMode;
+    /**
+     * Whether to show a divider between the end drawer and content for `side` mode.
+     * @default "side"
+     */
+    endDivider: boolean;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-drawer-container": M3eDrawerContainerElement;
+    }
+}
+export {};
+//# sourceMappingURL=DrawerContainerElement.d.ts.map

package/dist/src/DrawerContainerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContainerElement.d.ts","sourceRoot":"","sources":["../../src/DrawerContainerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,yBAA0B,SAAQ,8BAAwB;;IACrE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,eAAe,CAAU,OAAO,CAAC,UAAU,CAAuC;IAClF,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAuC;IAMhF;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACmD,SAAS,EAAE,UAAU,CAAU;IAErF;;;OAGG;IACqE,YAAY,UAAS;IAE7F;;;OAGG;IACyC,GAAG,UAAS;IAExD;;;OAGG;IACiD,OAAO,EAAE,UAAU,CAAU;IAEjF;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAkBxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAmGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

package/dist/src/DrawerMode.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible display modes for a drawer. */
+export type DrawerMode = "over" | "push" | "side" | "auto";
+//# sourceMappingURL=DrawerMode.d.ts.map

package/dist/src/DrawerMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerMode.d.ts","sourceRoot":"","sources":["../../src/DrawerMode.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC"}

package/dist/src/DrawerPosition.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible positions of a drawer. */
+export type DrawerPosition = "start" | "end";
+//# sourceMappingURL=DrawerPosition.d.ts.map

package/dist/src/DrawerPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerPosition.d.ts","sourceRoot":"","sources":["../../src/DrawerPosition.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC"}

package/dist/src/DrawerToggleElement.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eDrawerToggleElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * An element, nested within a clickable element, used to toggle the opened state of a drawer.
+ *
+ * @example
+ * The following example illustrates the use of a `m3e-drawer-toggle`, nested inside a `m3e-icon-button` component,
+ * which toggles the open state of the start drawer.
+ *
+ * ```html
+ * <m3e-icon-button slot="leading-icon" aria-label="Menu" toggle selected>
+ *   <m3e-drawer-toggle for="startDrawer"></m3e-drawer-toggle>
+ *   <m3e-icon name="menu"></m3e-icon>
+ *   <m3e-icon slot="selected" name="menu_open"></m3e-icon>
+ * </m3e-icon-button>
+ *
+ * <m3e-drawer-container start>
+ *   <nav slot="start" id="startDrawer" aria-label="Navigation">
+ *     <!-- Start drawer content -->
+ *   </nav>
+ *   <!-- Container content -->
+ * </m3e-drawer-container>
+ * ```
+ *
+ * @tag m3e-drawer-toggle
+ */
+export declare class M3eDrawerToggleElement extends M3eDrawerToggleElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-drawer-toggle": M3eDrawerToggleElement;
+    }
+}
+export {};
+//# sourceMappingURL=DrawerToggleElement.d.ts.map

package/dist/src/DrawerToggleElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerToggleElement.d.ts","sourceRoot":"","sources":["../../src/DrawerToggleElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAO5D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,sBAAuB,SAAQ,2BAAiC;;IAC3E,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAKF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAU3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAKvB,kBAAkB;cACC,MAAM,IAAI,OAAO;CAwCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./DrawerContainerElement";
+export * from "./DrawerMode";
+export * from "./DrawerPosition";
+export * from "./DrawerToggleElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}

package/dist/src/styles/DrawerContainerStyle.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from "lit";
+/**
+ * Styles for `M3eDrawerContainerElement`.
+ * @internal
+ */
+export declare const DrawerContainerStyle: CSSResultGroup;
+//# sourceMappingURL=DrawerContainerStyle.d.ts.map

package/dist/src/styles/DrawerContainerStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContainerStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/DrawerContainerStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAa,MAAM,KAAK,CAAC;AAMrD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,cAuKlC,CAAC"}

package/dist/src/styles/DrawerContainerToken.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Component design tokens that control `M3eDrawerContainerElement`.
+ * @internal
+ */
+export declare const DrawerContainerToken: {
+    readonly containerColor: import("lit").CSSResult;
+    readonly containerElevation: import("lit").CSSResult;
+    readonly containerWidth: import("lit").CSSResult;
+    readonly scrimOpacity: import("lit").CSSResult;
+    readonly cornerShape: import("lit").CSSResult;
+    readonly modalContainerColor: import("lit").CSSResult;
+    readonly modalContainerElevation: import("lit").CSSResult;
+    readonly dividerColor: import("lit").CSSResult;
+    readonly dividerThickness: import("lit").CSSResult;
+};
+//# sourceMappingURL=DrawerContainerToken.d.ts.map

package/dist/src/styles/DrawerContainerToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContainerToken.d.ts","sourceRoot":"","sources":["../../../src/styles/DrawerContainerToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;CAUvB,CAAC"}

package/dist/src/styles/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DrawerContainerStyle";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/eslint.config.mjs

@@ -0,0 +1,13 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
+  languageOptions: {
+    parserOptions: {
+      project: true,
+      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
+    },
+  },
+});

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@m3e/drawer-container",
+  "version": "1.0.0-rc.1",
+  "description": "Drawer Container for M3E",
+  "author": "matraic <matraic@yahoo.com>",
+  "license": "MIT",
+  "homepage": "https://matraic.github.io/m3e/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matraic/m3e.git"
+  },
+  "keywords": [
+    "material design",
+    "web components",
+    "drawer container",
+    "navigation drawer"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "browser": "dist/index.min.js",
+  "unpkg": "dist/index.min.js",
+  "types": "dist/src/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "cem": "cem analyze --config cem.config.mjs",
+    "lint": "npx eslint ./src",
+    "clean": "rimraf dist"
+  },
+  "peerDependencies": {
+    "@m3e/core": "1.0.0-rc.1",
+    "lit": "^3.3.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@eslint/js": "^9.30.1",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "12.1.0",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "eslint": "^9.32.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.44.2",
+    "tslib": "^2.8.1",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.38.0"
+  },
+  "customElements": "dist/custom-elements.json"
+}

package/rollup.config.js

@@ -0,0 +1,32 @@
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+
+const banner = `/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */`;
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/index.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/index.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["@m3e/core", "@m3e/core/layout", "lit"],
+    plugins: [resolve(), typescript()],
+  },
+];

package/src/DrawerContainerElement.ts

@@ -0,0 +1,244 @@
+import { CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+import { hasAssignedNodes, Role } from "@m3e/core";
+import { Breakpoint, M3eBreakpointObserver } from "@m3e/core/layout";
+
+import { DrawerMode } from "./DrawerMode";
+
+import { DrawerContainerStyle } from "./styles";
+
+/**
+ * @summary
+ * A container for one or two sliding drawers.
+ *
+ * @description
+ * A responsive layout container that manages left and right drawers alongside main content.
+ * Supports `over`, `push`, `side`, and `auto` modes, adapting drawer behavior based on breakpoint size.
+ * Encodes spatial hierarchy, motion transitions, and accessibility semantics for modal, dismissible,
+ * and permanent navigation.
+ *
+ * @example
+ * The following example illustrates a typical drawer layout.
+ * ```html
+ * <m3e-drawer-container>
+ *  <nav slot="start">
+ *    <!-- Start drawer content -->
+ *  </nav>
+ *  <main>
+ *    <!-- Main content -->
+ *  </main>
+ *  <aside slot="end">
+ *    <!-- End drawer content -->
+ *  </aside>
+ * <m3e-drawer-container>
+ * ```
+ *
+ * @tag m3e-drawer-container
+ *
+ * @slot - Renders the main content.
+ * @slot start - Renders the start drawer.
+ * @slot end - Renders the end drawer.
+ *
+ * @attr end - Whether the end drawer is open.
+ * @attr end-mode - The behavior mode of the end drawer.
+ * @attr end-divider - Whether to show a divider between the end drawer and content for `side` mode.
+ * @attr start - Whether the start drawer is open.
+ * @attr start-mode - The behavior mode of the start drawer.
+ * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.
+ *
+ * @fires change - Emitted when the state of the start or end drawers change.
+ *
+ * @cssprop --m3e-drawer-container-color - The background color of the drawer container.
+ * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.
+ * @cssprop --m3e-drawer-container-width - The width of the drawer container.
+ * @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.
+ * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer’s start edge (typically left in LTR).
+ * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer’s end edge (typically right in LTR).
+ * @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.
+ * @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.
+ * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.
+ * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.
+ */
+@customElement("m3e-drawer-container")
+export class M3eDrawerContainerElement extends Role(LitElement, "none") {
+  /** The styles of the element. */
+  static override styles: CSSResultGroup = DrawerContainerStyle;
+
+  /** @private */ @state() private _startMode: Exclude<DrawerMode, "auto"> = "side";
+  /** @private */ @state() private _endMode: Exclude<DrawerMode, "auto"> = "side";
+  /** @private */ #breakpointUnobserve?: () => void;
+  /** @private */ #disableStartFocusTrap = false;
+  /** @private */ #disableEndFocusTrap = false;
+  /** @private */ #initialized = false;
+
+  /**
+   * Whether the start drawer is open.
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true }) start = false;
+
+  /**
+   * The behavior mode of the start drawer.
+   * @default "side"
+   */
+  @property({ attribute: "start-mode", reflect: true }) startMode: DrawerMode = "side";
+
+  /**
+   * Whether to show a divider between the start drawer and content for `side` mode.
+   * @default "side"
+   */
+  @property({ attribute: "start-divider", type: Boolean, reflect: true }) startDivider = false;
+
+  /**
+   * Whether the end drawer is open.
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true }) end = false;
+
+  /**
+   * The behavior mode of the end drawer.
+   * @default "side"
+   */
+  @property({ attribute: "end-mode", reflect: true }) endMode: DrawerMode = "side";
+
+  /**
+   * Whether to show a divider between the end drawer and content for `side` mode.
+   * @default "side"
+   */
+  @property({ attribute: "end-divider", type: Boolean, reflect: true }) endDivider = false;
+
+  /** @inheritdoc */
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this.#breakpointUnobserve?.();
+    this.#clearMode();
+  }
+
+  /** @inheritdoc */
+  protected override update(changedProperties: PropertyValues<this>): void {
+    super.update(changedProperties);
+
+    if (changedProperties.has("startMode") || changedProperties.has("endMode")) {
+      this.#breakpointUnobserve?.();
+
+      if (this.startMode === "auto" || this.endMode === "auto") {
+        this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) =>
+          this.#updateMode(matches, this.#initialized)
+        );
+      } else {
+        this.#updateMode();
+      }
+    }
+
+    this.#initialized = true;
+  }
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    return html`<m3e-focus-trap ?disabled="${!this.start || this._startMode === "side" || this.#disableStartFocusTrap}">
+        <slot name="start" @slotchange="${this.#handleStartSlotChange}"></slot>
+      </m3e-focus-trap>
+      <div
+        class="content"
+        .inert="${(this._startMode !== "side" || this._endMode !== "side") && (this.start || this.end)}"
+      >
+        <slot></slot>
+      </div>
+      <div class="scrim" @click="${this.#handleScrimClick}"></div>
+      <m3e-focus-trap ?disabled="${!this.end || this._endMode === "side" || this.#disableEndFocusTrap}">
+        <slot name="end" @slotchange="${this.#handleEndSlotChange}"></slot>
+      </m3e-focus-trap>`;
+  }
+
+  /** @private */
+  #handleScrimClick() {
+    if (this._startMode !== "side") {
+      this.start = false;
+    }
+    if (this._endMode !== "side") {
+      this.end = false;
+    }
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  /** @private */
+  #handleStartSlotChange(e: Event): void {
+    this.#disableStartFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);
+  }
+
+  /** @private */
+  #handleEndSlotChange(e: Event): void {
+    this.#disableEndFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);
+  }
+
+  /** @inheritdoc */
+  #clearMode(): void {
+    this.classList.remove("-start-over");
+    this.classList.remove("-start-push");
+    this.classList.remove("-start-side");
+    this.classList.remove("-end-over");
+    this.classList.remove("-end-push");
+    this.classList.remove("-end-side");
+  }
+
+  /** @inheritdoc */
+  #updateMode(breakpoints?: Map<string, boolean>, autoClose = false) {
+    let autoCloseStart = false,
+      autoCloseEnd = false;
+    if (this.startMode === "auto") {
+      if (breakpoints?.get(Breakpoint.Medium)) {
+        this._startMode = "side";
+      } else if (breakpoints?.get(Breakpoint.Small)) {
+        autoCloseStart = this._startMode === "side" && this.start;
+        this._startMode = "push";
+      } else if (breakpoints?.get(Breakpoint.XSmall)) {
+        autoCloseStart = this._startMode !== "over" && this.start;
+        this._startMode = "over";
+      } else {
+        this._startMode = "side";
+      }
+    } else {
+      this._startMode = this.startMode;
+    }
+
+    if (this.endMode === "auto") {
+      if (breakpoints?.get(Breakpoint.Medium)) {
+        this._endMode = "side";
+      } else if (breakpoints?.get(Breakpoint.Small)) {
+        autoCloseEnd = this._endMode === "side" && this.end;
+        this._endMode = "push";
+      } else if (breakpoints?.get(Breakpoint.XSmall)) {
+        autoCloseEnd = this._endMode !== "over" && this.end;
+        this._endMode = "over";
+      } else {
+        this._endMode = "side";
+      }
+    } else {
+      this._endMode = this.endMode;
+    }
+
+    this.#clearMode();
+
+    this.classList.add(`-start-${this._startMode}`);
+    this.classList.add(`-end-${this._endMode}`);
+
+    if (autoClose && (autoCloseStart || autoCloseEnd)) {
+      if (autoCloseStart) {
+        this.start = false;
+      }
+      if (autoCloseEnd) {
+        this.end = false;
+      }
+
+      this.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-drawer-container": M3eDrawerContainerElement;
+  }
+}

package/src/DrawerMode.ts

@@ -0,0 +1,2 @@
+/** Specifies the possible display modes for a drawer. */
+export type DrawerMode = "over" | "push" | "side" | "auto";

package/src/DrawerPosition.ts

@@ -0,0 +1,2 @@
+/** Specifies the possible positions of a drawer. */
+export type DrawerPosition = "start" | "end";