@m3e/drawer-container 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/src/DrawerContainerElement.d.ts

@@ -0,0 +1,102 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { DrawerMode } from "./DrawerMode";
+/**
+ * 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 LitElement {
+    #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;
+    }
+}
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,yBAA0B,SAAQ,UAAU;;IACvD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,eAAe,CAAU,OAAO,CAAC,UAAU,CAAuC;IAClF,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAuC;IAKhF;;;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;IAgBxE,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> & 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;;AAQ5D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,sBAAuB,SAAQ,2BAAmB;;IAC7D,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;IAc3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAcvB,kBAAkB;cACC,MAAM,IAAI,OAAO;CAsDrC;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/drawer-container",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Drawer Container for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {