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

package/src/DrawerToggleElement.ts

@@ -1,123 +0,0 @@
-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

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

package/src/styles/DrawerContainerStyle.ts

@@ -1,178 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

package/tsconfig.json

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