kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-32DYCJ46.mjs

@@ -0,0 +1,53 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-first.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetCarouselFirst = class extends LitElement {
+  render() {
+    return html`
+      <button @keyup=${(event) => this.handleKeyUp(event)} @click=${() => this.activated()}>
+        <slot></slot>
+      </button>
+    `;
+  }
+  activated() {
+    if (!this.disabled) {
+      emitEvent(this, "kemet-first-activated", this);
+    }
+  }
+  handleKeyUp(event) {
+    if (event.code === "Enter") {
+      this.activated();
+    }
+  }
+};
+KemetCarouselFirst.styles = [
+  css`
+      button {
+        cursor: pointer;
+        border: 0;
+        background: transparent;
+      }
+
+      :host([disabled]) button {
+        cursor: not-allowed;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarouselFirst.prototype, "disabled", 2);
+KemetCarouselFirst = __decorateClass([
+  customElement("kemet-carousel-first")
+], KemetCarouselFirst);
+
+export {
+  KemetCarouselFirst
+};
+//# sourceMappingURL=chunk-32DYCJ46.mjs.map

package/dist/chunk-32DYCJ46.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-first.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-first\n * @summary A link to the first slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-first-activated\n *\n */\n\n@customElement('kemet-carousel-first')\nexport default class KemetCarouselFirst extends LitElement {\n  static styles = [\n    css`\n      button {\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.activated()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  activated() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-first-activated', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.activated();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-first': KemetCarouselFirst\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAkBxC,IAAqB,qBAArB,cAAgD,WAAW;AAAA,EAkBzD,SAAS;AACP,WAAO;AAAA,uBACY,WAAS,KAAK,YAAY,KAAK,CAAC,WAAW,MAAM,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAItF;AAAA,EAEA,YAAY;AACV,QAAI,CAAC,KAAK,UAAU;AAClB,gBAAU,MAAM,yBAAyB,IAAI;AAAA,IAC/C;AAAA,EACF;AAAA,EAEA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AACF;AArCqB,mBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,mBAgBnB;AAhBmB,qBAArB;AAAA,EADC,cAAc,sBAAsB;AAAA,GAChB;","names":[]}

package/dist/chunk-42U43NKG.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-42U43NKG.mjs.map

package/dist/chunk-42U43NKG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-4B5LWYUI.mjs

@@ -0,0 +1,39 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-total.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetCarouselTotal = class extends LitElement {
+  firstUpdated() {
+    this.carousel = this.closest("kemet-carousel");
+  }
+  updated() {
+    this.total = this.carousel?.total;
+  }
+  render() {
+    return html`${this.total}`;
+  }
+};
+KemetCarouselTotal.styles = [
+  css`
+      :host {
+        display: inline-block;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], KemetCarouselTotal.prototype, "total", 2);
+__decorateClass([
+  state()
+], KemetCarouselTotal.prototype, "carousel", 2);
+KemetCarouselTotal = __decorateClass([
+  customElement("kemet-carousel-total")
+], KemetCarouselTotal);
+
+export {
+  KemetCarouselTotal
+};
+//# sourceMappingURL=chunk-4B5LWYUI.mjs.map

package/dist/chunk-4B5LWYUI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-total.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type KemetCarousel from './carousel';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-total\n * @summary Displays the total slide number.\n *\n * @prop {number} total - The total number of slides.\n *\n */\n\n@customElement('kemet-carousel-total')\nexport default class KemetCarouselTotal extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  total: number | undefined;\n\n  @state()\n  carousel: KemetCarousel | null;\n\n  firstUpdated() {\n    this.carousel = this.closest('kemet-carousel');\n  }\n\n  updated() {\n    this.total = this.carousel?.total;\n  }\n\n  render() {\n    return html`${this.total}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-total': KemetCarouselTotal\n  }\n}\n"],"mappings":";;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,UAAU,aAAa;AAgB/C,IAAqB,qBAArB,cAAgD,WAAW;AAAA,EAezD,eAAe;AACb,SAAK,WAAW,KAAK,QAAQ,gBAAgB;AAAA,EAC/C;AAAA,EAEA,UAAU;AACR,SAAK,QAAQ,KAAK,UAAU;AAAA,EAC9B;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,KAAK;AAAA,EAC1B;AACF;AA1BqB,mBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAKF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,mBAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,mBAanB;AAbmB,qBAArB;AAAA,EADC,cAAc,sBAAsB;AAAA,GAChB;","names":[]}

package/dist/chunk-4IBCDLVD.mjs

@@ -0,0 +1,406 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/drawer.ts
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/styles/elements/drawer.ts
+import { css, unsafeCSS } from "lit";
+var documentHeight = `${document.documentElement.scrollHeight}px`;
+var stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-drawer-overlay-color: rgb(var(--kemet-color-black) / 20%);
+    --kemet-drawer-width: 300px;
+    --kemet-drawer-height: 100%;
+    --kemet-drawer-color: rgb(var(--kemet-color-gray-50));
+    --kemet-drawer-background-color: rgb(var(--kemet-color-gray-950));
+
+    width: 100%;
+  }
+
+  .off-canvas {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .off-canvas__nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    visibility: hidden;
+    height: 100%;
+    overflow: auto;
+    transition: all 0.5s;
+  }
+
+  .off-canvas__nav::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.2);
+    content: '';
+    opacity: 1;
+    transition: opacity 0.5s;
+  }
+
+  :host([opened]) .off-canvas__nav::after {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  }
+
+  .off-canvas__pusher {
+    position: relative;
+    left: 0;
+    z-index: 99;
+    height: 100%;
+    transition: transform 0.5s;
+  }
+
+  :host([overlay]) .off-canvas__pusher::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    background: var(--kemet-drawer-overlay-color);
+    content: '';
+    opacity: 0;
+    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  }
+
+  :host([opened]) .off-canvas__pusher::after {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transition: opacity 0.5s;
+    transform: scale(2);
+  }
+
+  .off-canvas__content {
+    position: relative;
+    /* overflow-y: scroll; */
+    min-height: 100vh;
+  }
+
+  .off-canvas__wrapper {
+    position: relative;
+  }
+
+  ::slotted([slot="content"]) {
+    min-height: 100vh;
+  }
+
+  /* -------------------------------------- */
+  /* custom properties */
+  /* -------------------------------------- */
+
+  .off-canvas__nav {
+    width: var(--kemet-drawer-width);
+    height: var(--kemet-drawer-height);
+    color: var(--kemet-drawer-color);
+    background: var(--kemet-drawer-background-color);
+  }
+`;
+var stylesEffects = css`
+  /* slide */
+  :host([effect='slide']) .off-canvas__nav {
+    visibility: visible;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  :host([effect='slide'][opened]) .off-canvas__nav {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='slide']) .off-canvas__nav:after {
+    display: none;
+  }
+
+  :host([effect='slide'][side='right']) .off-canvas__nav {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='slide'][side='right'][opened]) .off-canvas__nav {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='slide'][side='top']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='slide'][side='top'][opened]) .off-canvas__nav {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='slide'][side='bottom']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+
+  /* reveal */
+  :host([effect='reveal'][opened]) .off-canvas__pusher {
+    transform: translate3d(var(--kemet-drawer-width), 0, 0);
+  }
+
+  :host([effect='reveal']) .off-canvas__nav {
+    z-index: 1;
+  }
+
+  :host([effect='reveal'][opened]) .off-canvas__nav {
+    visibility: visible;
+    transition: transform 0.5s;
+  }
+
+  :host([effect='reveal']) .off-canvas__nav::after {
+    display: none;
+  }
+
+  :host([effect='reveal'][side='right'][opened]) .off-canvas__pusher {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='reveal'][side='right']) .off-canvas__nav {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='reveal'][side='right'][opened]) .off-canvas__nav {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='reveal'][side='top']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='reveal'][side='top'][opened]) .off-canvas__nav {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {
+    transform: translate3d(0, var(--kemet-drawer-height), 0);
+  }
+
+  :host([effect='reveal'][side='bottom']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+
+  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  /* push */
+  :host([effect='push'][opened]) .off-canvas__pusher {
+    transform: translate3d(var(--kemet-drawer-width), 0, 0);
+  }
+
+  :host([effect='push']) .off-canvas__nav {
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  :host([effect='push'][opened]) .off-canvas__nav {
+    visibility: visible;
+    transition: transform 0.5s;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='push']) .off-canvas__nav::after {
+    display: none;
+  }
+
+  :host([effect='push'][side='right'][opened]) .off-canvas__pusher {
+    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);
+  }
+
+  :host([effect='push'][side='right']) .off-canvas__nav {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='push'][side='right'][opened]) .off-canvas__nav {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='push'][side='top']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='push'][side='top'][opened]) .off-canvas__nav {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='push'][side='top'][opened]) .off-canvas__pusher {
+    transform: translate3d(0, var(--kemet-drawer-height), 0);
+  }
+
+  :host([effect='push'][side='bottom']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='push'][side='bottom'][opened]) .off-canvas__nav {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+
+  :host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  /* scale */
+  :host([effect='scale']) .off-canvas__pusher {
+    transform-style: preserve-3d;
+  }
+
+  :host([effect='scale'][opened]) .off-canvas__pusher {
+    transform: translate3d(0, 0, 0) scale(0.95);
+  }
+
+  :host([effect='scale']) .off-canvas__nav {
+    opacity: 1;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  :host([effect='scale'][opened]) .off-canvas__nav {
+    visibility: visible;
+    transition: transform 0.5s;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='scale']) .off-canvas__nav::after {
+    display: none;
+  }
+
+  :host([effect='scale'][side='right']) .off-canvas__nav {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='scale'][side='right'][opened]) .off-canvas__nav {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='scale'][side='top']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='scale'][side='top'][opened]) .off-canvas__nav {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='scale'][side='bottom']) .off-canvas__nav {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+`;
+
+// src/elements/drawer.ts
+var effects = ["slide", "reveal", "push", "scale"];
+var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
+  EnumEffects2["Slide"] = "slide";
+  EnumEffects2["Reveal"] = "reveal";
+  EnumEffects2["Push"] = "push";
+  EnumEffects2["Scale"] = "scale";
+  return EnumEffects2;
+})(EnumEffects || {});
+var KemetDrawer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.opened = void 0;
+    this.effect = "slide" /* Slide */;
+    this.side = "left" /* Left */;
+    this.overlay = false;
+  }
+  firstUpdated() {
+    this.addEventListener("click", (event) => {
+      const targetElement = event.target;
+      if (this.opened && targetElement.tagName.toLowerCase() === "kemet-drawer") {
+        this.opened = false;
+      }
+    });
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      emitEvent(this, "kemet-opened", this);
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      emitEvent(this, "kemet-closed", this);
+    }
+  }
+  render() {
+    return html`
+      <section class="off-canvas" part="container">
+        <nav class="off-canvas__nav" part="drawer" title="Drawer">
+          <slot name="navigation"></slot>
+        </nav>
+        <div class="off-canvas__pusher" part="pusher">
+          <div class="off-canvas__content" part="content">
+            <div class="off-canvas__wrapper" part="wrapper">
+              <slot name="content"></slot>
+            </div>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+};
+KemetDrawer.styles = [stylesBase, stylesEffects];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetDrawer.prototype, "opened", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetDrawer.prototype, "effect", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetDrawer.prototype, "side", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetDrawer.prototype, "overlay", 2);
+KemetDrawer = __decorateClass([
+  customElement("kemet-drawer")
+], KemetDrawer);
+
+export {
+  effects,
+  EnumEffects,
+  KemetDrawer
+};
+//# sourceMappingURL=chunk-4IBCDLVD.mjs.map

package/dist/chunk-4IBCDLVD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/drawer.ts","../src/styles/elements/drawer.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesBase, stylesEffects } from '../styles/elements/drawer';\nimport { EnumDirections, TypeDirection } from '../utilities/constants';\n\nexport const effects = ['slide', 'reveal', 'push', 'scale'] as const;\nexport enum EnumEffects {\n  Slide = 'slide',\n  Reveal = 'reveal',\n  Push = 'push',\n  Scale = 'scale'\n}\nexport type TypeEffect = typeof effects[number];\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-drawer\n * @summary A component that adds an off-canvas menu with different effects.\n *\n * @prop {boolean} opened - Determines if the drawer is opened or not.\n * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)\n * @prop {TypeDirection} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)\n * @prop {boolean} overlay - Adds an overlay over the content section of the Drawer when opened\n *\n * @slot navigation - The off-screen nav area of your app or site\n * @slot content - The main content area of your app or site.\n *\n * @csspart container\n * @csspart drawer\n * @csspart pusher\n * @csspart content\n * @csspart wrapper\n *\n * @cssproperty --kemet-drawer-width - The width of the drawer.\n * @cssproperty --kemet-drawer-height - The height of the drawer.\n * @cssproperty --kemet-drawer-color - The text color of the drawer.\n * @cssproperty --kemet-drawer-background-color - The background color of the drawer.\n * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.\n *\n * @event kemet-opened - Fires when the drawer opens.\n * @event kemet-closed - Fires when the drawer closes.\n *\n */\n\n@customElement('kemet-drawer')\nexport default class KemetDrawer extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = undefined;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = EnumEffects.Slide;\n\n  @property({ type: String, reflect: true })\n  side: TypeDirection = EnumDirections.Left;\n\n  @property({ type: Boolean, reflect: true })\n  overlay: boolean = false;\n\n  firstUpdated() {\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {\n        this.opened = false;\n      }\n    });\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <section class=\"off-canvas\" part=\"container\">\n        <nav class=\"off-canvas__nav\" part=\"drawer\" title=\"Drawer\">\n          <slot name=\"navigation\"></slot>\n        </nav>\n        <div class=\"off-canvas__pusher\" part=\"pusher\">\n          <div class=\"off-canvas__content\" part=\"content\">\n            <div class=\"off-canvas__wrapper\" part=\"wrapper\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-drawer': KemetDrawer\n  }\n}\n","import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = `${document.documentElement.scrollHeight}px`;\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-drawer-overlay-color: rgb(var(--kemet-color-black) / 20%);\n    --kemet-drawer-width: 300px;\n    --kemet-drawer-height: 100%;\n    --kemet-drawer-color: rgb(var(--kemet-color-gray-50));\n    --kemet-drawer-background-color: rgb(var(--kemet-color-gray-950));\n\n    width: 100%;\n  }\n\n  .off-canvas {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .off-canvas__nav {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    visibility: hidden;\n    height: 100%;\n    overflow: auto;\n    transition: all 0.5s;\n  }\n\n  .off-canvas__nav::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.2);\n    content: '';\n    opacity: 1;\n    transition: opacity 0.5s;\n  }\n\n  :host([opened]) .off-canvas__nav::after {\n    width: 0;\n    height: 0;\n    opacity: 0;\n    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n  }\n\n  .off-canvas__pusher {\n    position: relative;\n    left: 0;\n    z-index: 99;\n    height: 100%;\n    transition: transform 0.5s;\n  }\n\n  :host([overlay]) .off-canvas__pusher::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 0;\n    height: 0;\n    background: var(--kemet-drawer-overlay-color);\n    content: '';\n    opacity: 0;\n    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n  }\n\n  :host([opened]) .off-canvas__pusher::after {\n    width: 100%;\n    height: 100%;\n    opacity: 1;\n    transition: opacity 0.5s;\n    transform: scale(2);\n  }\n\n  .off-canvas__content {\n    position: relative;\n    /* overflow-y: scroll; */\n    min-height: 100vh;\n  }\n\n  .off-canvas__wrapper {\n    position: relative;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    min-height: 100vh;\n  }\n\n  /* -------------------------------------- */\n  /* custom properties */\n  /* -------------------------------------- */\n\n  .off-canvas__nav {\n    width: var(--kemet-drawer-width);\n    height: var(--kemet-drawer-height);\n    color: var(--kemet-drawer-color);\n    background: var(--kemet-drawer-background-color);\n  }\n`;\n\nexport const stylesEffects = css`\n  /* slide */\n  :host([effect='slide']) .off-canvas__nav {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) .off-canvas__nav:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) .off-canvas__pusher {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='reveal']) .off-canvas__nav {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) .off-canvas__pusher {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='push']) .off-canvas__nav {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) .off-canvas__pusher {\n    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='push'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) .off-canvas__pusher {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, 0, 0) scale(0.95);\n  }\n\n  :host([effect='scale']) .off-canvas__nav {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n`;\n"],"mappings":"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","names":["EnumEffects"]}