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

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": []
-}