@m3e/drawer-container 1.0.0-rc.1

package/src/DrawerToggleElement.ts

@@ -0,0 +1,123 @@
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import { HtmlFor, Role } from "@m3e/core";
+
+import { M3eDrawerContainerElement } from "./DrawerContainerElement";
+
+/**
+ * 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
+ */
+@customElement("m3e-drawer-toggle")
+export class M3eDrawerToggleElement extends HtmlFor(Role(LitElement, "none")) {
+  /** The styles of the element. */
+  static override styles: CSSResultGroup = css`
+    :host {
+      display: contents;
+    }
+    ::slotted(.material-icons) {
+      font-size: inherit !important;
+    }
+  `;
+
+  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);
+  /** @private */ readonly #drawerContainerChangeHandler = () => this.#handleDrawerContainerChange();
+
+  /** @inheritdoc */
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.parentElement?.addEventListener("click", this.#clickHandler);
+  }
+
+  /** @inheritdoc */
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.parentElement?.removeEventListener("click", this.#clickHandler);
+  }
+
+  /** @inheritdoc */
+  override attach(control: HTMLElement): void {
+    const container = control.closest("m3e-drawer-container");
+    if (container) {
+      container.addEventListener("change", this.#drawerContainerChangeHandler);
+      this.#updateToggle(container, control);
+    }
+
+    super.attach(control);
+  }
+
+  /** @inheritdoc */
+  override detach(): void {
+    this.control?.closest("m3e-drawer-container")?.removeEventListener("change", this.#drawerContainerChangeHandler);
+    super.detach();
+  }
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    return html`<slot></slot>`;
+  }
+
+  /** @private */
+  #handleClick(e: Event): void {
+    if (!e.defaultPrevented && this.control && this.parentElement) {
+      const container = this.control.closest("m3e-drawer-container");
+      if (container) {
+        if (this.control.slot === "start") {
+          container.start = !container.start;
+        } else if (this.control.slot === "end") {
+          container.end = !container.end;
+        }
+      }
+    }
+  }
+
+  /** @private */
+  #handleDrawerContainerChange(): void {
+    if (this.control) {
+      const container = this.control.closest("m3e-drawer-container");
+      if (container) {
+        this.#updateToggle(container, this.control);
+      }
+    }
+  }
+
+  /** @private */
+  #updateToggle(container: M3eDrawerContainerElement, control: HTMLElement) {
+    if (control.slot === "start") {
+      if (this.parentElement?.hasAttribute("toggle")) {
+        this.parentElement.toggleAttribute("selected", container.start);
+      }
+    } else if (control.slot === "end") {
+      if (this.parentElement?.hasAttribute("toggle")) {
+        this.parentElement.toggleAttribute("selected", container.end);
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-drawer-toggle": M3eDrawerToggleElement;
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./DrawerContainerElement";
+export * from "./DrawerMode";
+export * from "./DrawerPosition";
+export * from "./DrawerToggleElement";

package/src/styles/DrawerContainerStyle.ts

@@ -0,0 +1,178 @@
+import { css, CSSResultGroup, unsafeCSS } from "lit";
+
+import { DesignToken } from "@m3e/core";
+
+import { DrawerContainerToken } from "./DrawerContainerToken";
+
+/**
+ * Styles for `M3eDrawerContainerElement`.
+ * @internal
+ */
+export const DrawerContainerStyle: CSSResultGroup = css`
+  :host {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    overflow: hidden;
+    flex: 1 1 auto;
+  }
+  .content {
+    height: 100%;
+  }
+  ::slotted([slot="start"]),
+  ::slotted([slot="end"]) {
+    display: block;
+    height: 100%;
+    z-index: 3;
+    outline: none;
+    box-sizing: border-box;
+    flex: none;
+    width: ${DrawerContainerToken.containerWidth};
+    background-color: ${DrawerContainerToken.containerColor};
+    box-shadow: ${DrawerContainerToken.containerElevation};
+    transition: ${unsafeCSS(
+      `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
+      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete,
+      background-color ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
+      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`
+    )};
+  }
+  :host(.-start-over) ::slotted([slot="start"]) {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  :host(.-end-over) ::slotted([slot="end"]) {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  :host(:not([start])) ::slotted([slot="start"]) {
+    visibility: hidden;
+    margin-inline-start: calc(0px - ${DrawerContainerToken.containerWidth});
+  }
+  :host([start]) ::slotted([slot="start"]) {
+    visibility: visible;
+    margin-inline-start: 0;
+  }
+  :host(:not([end])) ::slotted([slot="end"]) {
+    visibility: hidden;
+    margin-inline-end: calc(0px - ${DrawerContainerToken.containerWidth});
+  }
+  :host([end]) ::slotted([slot="end"]) {
+    margin-inline-end: 0;
+    visibility: visible;
+  }
+  .content {
+    flex: 1 1 auto;
+    position: relative;
+    height: 100%;
+  }
+  .scrim {
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: ${DesignToken.color.scrim};
+    opacity: 0;
+    visibility: hidden;
+    transition: ${unsafeCSS(
+      `opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, 
+        visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`
+    )};
+  }
+  @starting-style {
+    .scrim {
+      opacity: 0;
+    }
+  }
+  :host(.-start-push[start]) .scrim,
+  :host(.-end-push[end]) .scrim,
+  :host(.-start-over[start]) .scrim,
+  :host(.-end-over[end]) .scrim {
+    visibility: visible;
+    opacity: ${DrawerContainerToken.scrimOpacity};
+  }
+  :host(.-start-push) ::slotted([slot="start"]),
+  :host(.-start-over) ::slotted([slot="start"]) {
+    border-start-end-radius: ${DrawerContainerToken.cornerShape};
+    border-end-end-radius: ${DrawerContainerToken.cornerShape};
+  }
+  :host(.-end-push) ::slotted([slot="end"]),
+  :host(.-end-over) ::slotted([slot="end"]) {
+    border-start-start-radius: ${DrawerContainerToken.cornerShape};
+    border-end-start-radius: ${DrawerContainerToken.cornerShape};
+  }
+  :host(.-start-push) ::slotted([slot="start"]),
+  :host(.-end-push) ::slotted([slot="end"]),
+  :host(.-start-over) ::slotted([slot="start"]),
+  :host(.-end-over) ::slotted([slot="end"]) {
+    background-color: ${DrawerContainerToken.modalContainerColor};
+    box-shadow: ${DrawerContainerToken.modalContainerElevation};
+  }
+  :host([start-divider]) ::slotted([slot="start"]) {
+    border-inline-end-color: transparent;
+    border-inline-end-width: ${DrawerContainerToken.dividerThickness};
+    border-inline-end-style: solid;
+    box-sizing: border-box;
+  }
+  :host([start-divider].-start-side[start]:not(.-end-push[end]):not(.-end-over[end])) ::slotted([slot="start"]) {
+    border-inline-end-color: ${DrawerContainerToken.dividerColor};
+  }
+  :host([end-divider]) ::slotted([slot="end"]) {
+    border-inline-start-color: transparent;
+    border-inline-start-width: ${DrawerContainerToken.dividerThickness};
+    border-inline-start-style: solid;
+    box-sizing: border-box;
+  }
+  :host([end-divider].-end-side[end]:not(.-start-push[start]):not(.-start-over[start])) ::slotted([slot="end"]) {
+    border-inline-start-color: ${DrawerContainerToken.dividerColor};
+  }
+  @media (forced-colors: active) {
+    ::slotted([slot="start"]),
+    ::slotted([slot="end"]) {
+      background-color: Canvas;
+      box-shadow: unset;
+      transition: ${unsafeCSS(
+        `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
+      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`
+      )};
+    }
+    :host(.-start-push) ::slotted([slot="start"]),
+    :host(.-end-push) ::slotted([slot="end"]),
+    :host(.-start-over) ::slotted([slot="start"]),
+    :host(.-end-over) ::slotted([slot="end"]) {
+      background-color: Canvas;
+      box-shadow: unset;
+      border-color: CanvasText;
+    }
+    ::slotted([slot="start"]),
+    ::slotted([slot="end"]) {
+      border-style: solid;
+      border-color: Canvas;
+      border-width: 1px;
+    }
+    ::slotted([slot="start"]) {
+      border-inline-start-style: none;
+    }
+    ::slotted([slot="end"]) {
+      border-inline-end-style: none;
+    }
+    :host([start-divider].-start-side[start]:not(.-end-push[end]):not(.-end-over[end])) ::slotted([slot="start"]) {
+      border-inline-end-color: GrayText;
+    }
+    :host([end-divider].-end-side[end]:not(.-start-push[start]):not(.-start-over[start])) ::slotted([slot="end"]) {
+      border-inline-start-color: GrayText;
+    }
+  }
+  @media (prefers-reduced-motion) {
+    ::slotted([slot="start"]),
+    ::slotted([slot="end"]),
+    .scrim {
+      transition: none;
+    }
+  }
+`;

package/src/styles/DrawerContainerToken.ts

@@ -0,0 +1,19 @@
+import { unsafeCSS } from "lit";
+
+import { DesignToken } from "@m3e/core";
+
+/**
+ * Component design tokens that control `M3eDrawerContainerElement`.
+ * @internal
+ */
+export const DrawerContainerToken = {
+  containerColor: unsafeCSS(`var(--m3e-drawer-container-color, ${DesignToken.color.surface})`),
+  containerElevation: unsafeCSS(`var(--m3e-drawer-container-elevation, ${DesignToken.elevation.level0})`),
+  containerWidth: unsafeCSS(`var(--m3e-drawer-container-width, 22.5rem)`),
+  scrimOpacity: unsafeCSS("var(--m3e-drawer-container-scrim-opacity, 32%)"),
+  cornerShape: unsafeCSS(`var(--m3e-modal-drawer-corner-shape, ${DesignToken.shape.corner.large})`),
+  modalContainerColor: unsafeCSS(`var(--m3e-modal-drawer-container-color, ${DesignToken.color.surfaceContainerLow})`),
+  modalContainerElevation: unsafeCSS(`var(--m3e-modal-drawer-elevation, ${DesignToken.elevation.level1})`),
+  dividerColor: unsafeCSS(`var(--m3e-drawer-divider-color, ${DesignToken.color.outline})`),
+  dividerThickness: unsafeCSS("var(--m3e-drawer-divider-thickness, 1px)"),
+} as const;

package/src/styles/index.ts

@@ -0,0 +1 @@
+export * from "./DrawerContainerStyle";

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/src"
+  },
+  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
+  "exclude": []
+}