kemet-ui 4.0.2 → 5.0.0

package/dist/elements/drawer.js

@@ -1,438 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-
-// src/elements/drawer.ts
-var drawer_exports = {};
-__export(drawer_exports, {
-  EnumEffects: () => EnumEffects,
-  default: () => KemetDrawer,
-  effects: () => effects
-});
-module.exports = __toCommonJS(drawer_exports);
-var import_lit2 = require("lit");
-var import_decorators = require("lit/decorators.js");
-
-// src/utilities/events.ts
-var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
-  element.dispatchEvent(
-    new CustomEvent(name, { bubbles, composed, detail })
-  );
-};
-
-// src/styles/elements/drawer.ts
-var import_lit = require("lit");
-var documentHeight = `${document.documentElement.scrollHeight}px`;
-var stylesBase = import_lit.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 = import_lit.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, ${(0, import_lit.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, ${(0, import_lit.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, ${(0, import_lit.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, ${(0, import_lit.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 import_lit2.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 import_lit2.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([
-  (0, import_decorators.property)({ type: Boolean, reflect: true })
-], KemetDrawer.prototype, "opened", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String, reflect: true })
-], KemetDrawer.prototype, "effect", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String, reflect: true })
-], KemetDrawer.prototype, "side", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean, reflect: true })
-], KemetDrawer.prototype, "overlay", 2);
-KemetDrawer = __decorateClass([
-  (0, import_decorators.customElement)("kemet-drawer")
-], KemetDrawer);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  EnumEffects,
-  effects
-});
-//# sourceMappingURL=drawer.js.map

package/dist/elements/drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/drawer.ts","../../src/utilities/events.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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\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":["import_lit","EnumEffects"]}

package/dist/elements/drawer.mjs

@@ -1,14 +0,0 @@
-import {
-  EnumEffects,
-  KemetDrawer,
-  effects
-} from "../chunk-4IBCDLVD.mjs";
-import "../chunk-LHEY3UOF.mjs";
-import "../chunk-42U43NKG.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  EnumEffects,
-  KemetDrawer as default,
-  effects
-};
-//# sourceMappingURL=drawer.mjs.map

package/dist/elements/drawer.mjs.map

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

package/dist/elements/fab.d.mts

@@ -1,54 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- * @since 1.2.0
- * @status stable
- *
- * @tagname kemet-fab
- * @summary The FAB, or Floating Action Button, performs a primary action on a page.
- *
- * @prop {boolean} expanded - The expanded state of the button.
- * @prop {boolean} outlined - Outline style for a button.
- * @prop {boolean} disabled - Determines whether not a button is disabled.
- * @prop {boolean} pill - Displays the fab with rounded corners.
- * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.
- * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.
- *
- * @slot Icon - A slot for an icon to display.
- * @slot default - The text for the FAB.
- *
- * @cssproperty --kemet-fab-size - The width and height of the fab.
- * @cssproperty --kemet-fab-color - The text color of the fab.
- * @cssproperty --kemet-fab-background-color - The bg color of the tab.
- * @cssproperty --kemet-fab-outlined-color - The text color of an outlined fab.
- * @cssproperty --kemet-fab-outlined-border - The border of an outlined fab.
- * @cssproperty --kemet-fab-pill-radius - The border radius of a pill fab.
- *
- * @csspart button - The button's container.
- * @csspart icon -  The FAB icon.
- * @csspart text - The text in the FAB.
- *
- */
-declare class KemetFAB extends LitElement {
-    static styles: lit.CSSResult[];
-    expanded: boolean;
-    outlined: boolean;
-    disabled: boolean;
-    pill: boolean;
-    expandPoint: number;
-    collapsePoint: number;
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    handleMouseOver(): void;
-    handleMouseOut(): void;
-    handleScroll(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-fab': KemetFAB;
-    }
-}
-
-export { KemetFAB as default };

package/dist/elements/fab.d.ts

@@ -1,54 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- * @since 1.2.0
- * @status stable
- *
- * @tagname kemet-fab
- * @summary The FAB, or Floating Action Button, performs a primary action on a page.
- *
- * @prop {boolean} expanded - The expanded state of the button.
- * @prop {boolean} outlined - Outline style for a button.
- * @prop {boolean} disabled - Determines whether not a button is disabled.
- * @prop {boolean} pill - Displays the fab with rounded corners.
- * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.
- * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.
- *
- * @slot Icon - A slot for an icon to display.
- * @slot default - The text for the FAB.
- *
- * @cssproperty --kemet-fab-size - The width and height of the fab.
- * @cssproperty --kemet-fab-color - The text color of the fab.
- * @cssproperty --kemet-fab-background-color - The bg color of the tab.
- * @cssproperty --kemet-fab-outlined-color - The text color of an outlined fab.
- * @cssproperty --kemet-fab-outlined-border - The border of an outlined fab.
- * @cssproperty --kemet-fab-pill-radius - The border radius of a pill fab.
- *
- * @csspart button - The button's container.
- * @csspart icon -  The FAB icon.
- * @csspart text - The text in the FAB.
- *
- */
-declare class KemetFAB extends LitElement {
-    static styles: lit.CSSResult[];
-    expanded: boolean;
-    outlined: boolean;
-    disabled: boolean;
-    pill: boolean;
-    expandPoint: number;
-    collapsePoint: number;
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    handleMouseOver(): void;
-    handleMouseOut(): void;
-    handleScroll(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-fab': KemetFAB;
-    }
-}
-
-export { KemetFAB as default };