kemet-ui 4.0.2 → 5.0.0

package/dist/elements/dialog/index.js

@@ -0,0 +1,489 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/dialog/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "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/elements/dialog/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-dialog-transition-speed: 0.3s;
+  --kemet-dialog-min-width: 0;
+  --kemet-dialog-max-width: none;
+  --kemet-dialog-mobile-width: calc(100% - 2rem);
+  --kemet-dialog-mobile-margin: 0 auto;
+  --kemet-dialog-mobile-padding: 1rem;
+  --kemet-dialog-font-color: var(--kemet-color-font-base);
+  --kemet-dialog-background-color: var(--kemet-color-background-base);
+  --kemet-dialog-overlay-color: rgb(0 0 0 / 80%);
+
+  /* private */
+  --kemet-dialog-radius: 0;
+
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100vh;
+  visibility: hidden;
+  backface-visibility: hidden;
+}
+
+:host([opened]) {
+  visibility: visible;
+}
+
+dialog {
+  color: var(--kemet-dialog-font-color);
+  display: block;
+  z-index: 3;
+  margin: auto;
+  min-width: var(--kemet-dialog-min-width);
+  max-width: var(--kemet-dialog-max-width);
+  border: 0;
+  border-radius: var(--kemet-dialog-radius);
+  background: var(--kemet-dialog-background-color);
+}
+
+dialog::backdrop {
+  background: none;
+}
+
+:host([mobile]) dialog {
+  margin: var(--kemet-dialog-mobile-margin);
+  width: var(--kemet-dialog-mobile-width);
+  padding: var(--kemet-dialog-mobile-padding);
+  inset-block-start: auto;
+}
+
+:host([rounded]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-pill);
+}
+
+:host([rounded][mobile]) dialog {
+  border-top-left-radius: var(--kemet-dialog-radius);
+  border-top-right-radius: var(--kemet-dialog-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[part=overlay] {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  opacity: 0;
+  background: var(--kemet-dialog-overlay-color);
+  transition: all var(--kemet-dialog-transition-speed);
+}
+
+:host([opened]) [part=overlay] {
+  opacity: 1;
+  visibility: visible;
+}
+`;
+
+// src/elements/dialog/effects.css.ts
+import { css as css2 } from "lit";
+var effects_css_default = css2`/* default */
+:host([effect]) dialog {
+  transform: scale(0.7);
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed);
+}
+
+/* fadein-scaleup */
+:host([effect="fadein-scaleup"]) dialog {
+  transform: scale(0.7);
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed);
+}
+
+:host([effect="fadein-scaleup"][opened]) dialog {
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* slide-right */
+:host([effect="slide-right"]) dialog {
+  transform: translateX(20%);
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed) cubic-bezier(0.25, 0.5, 0.5, 0.9);
+}
+
+:host([effect="slide-right"][opened]) dialog {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+/* slide-bottom */
+:host([effect="slide-bottom"]) dialog {
+  transform: translateY(20%);
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed);
+}
+
+:host([effect="slide-bottom"][opened]) dialog {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* newspaper */
+:host([effect="newspaper"]) dialog {
+  transform: scale(0) rotate(720deg);
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed);
+}
+
+:host([effect="newspaper"][opened]) dialog {
+  transform: scale(1) rotate(0deg);
+  opacity: 1;
+}
+
+/* fall */
+:host([effect="fall"]) {
+  perspective: 1300px;
+}
+
+:host([effect="fall"]) dialog {
+  transform-style: preserve-3d;
+  transform: translateZ(600px) rotateX(20deg);
+  opacity: 0;
+}
+
+:host([effect="fall"][opened]) dialog {
+  transition: all var(--kemet-modal-transition-speed) ease-in;
+  transform: translateZ(0px) rotateX(0deg);
+  opacity: 1;
+}
+
+/* side-fall */
+:host([effect="side-fall"]) {
+  perspective: 1300px;
+}
+
+:host([effect="side-fall"]) dialog {
+  transform-style: preserve-3d;
+  transform: translate(30%) translateZ(600px) rotate(10deg);
+  opacity: 0;
+}
+
+:host([effect="side-fall"][opened]) dialog {
+  transition: all var(--kemet-modal-transition-speed) ease-in;
+  transform: translate(0%) translateZ(0) rotate(0deg);
+  opacity: 1;
+}
+
+/* flip-horizontal */
+:host([effect="flip-horizontal"]) {
+  perspective: 1300px;
+}
+
+:host([effect="flip-horizontal"]) dialog {
+  transform-style: preserve-3d;
+  transform: rotateY(-70deg);
+  transition: all var(--kemet-modal-transition-speed);
+  opacity: 0;
+}
+
+:host([effect="flip-horizontal"][opened]) dialog {
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+/* flip-vertical */
+:host([effect="flip-vertical"]) {
+  perspective: 1300px;
+}
+
+:host([effect="flip-vertical"]) dialog {
+  transform-style: preserve-3d;
+  transform: rotateX(-70deg);
+  transition: all var(--kemet-modal-transition-speed);
+  opacity: 0;
+}
+
+:host([effect="flip-vertical"][opened]) dialog {
+  transform: rotateX(0deg);
+  opacity: 1;
+}
+
+/* sign-3d */
+:host([effect="sign-3d"]) {
+  perspective: 1300px;
+}
+
+:host([effect="sign-3d"]) dialog {
+  transform-style: preserve-3d;
+  transform: rotateX(-60deg);
+  transform-origin: 50% 0;
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed);
+}
+
+:host([effect="sign-3d"][opened]) dialog {
+  transform: rotateX(0deg);
+  opacity: 1;
+}
+
+/* super-scaled */
+:host([effect="super-scaled"]) dialog {
+  transform: scale(2);
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed);
+}
+
+:host([effect="super-scaled"][opened]) dialog {
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* slit */
+:host([effect="slit"]) {
+  perspective: 1300px;
+}
+
+:host([effect="slit"]) dialog {
+  transform-style: preserve-3d;
+  transform: translateZ(-3000px) rotateY(90deg);
+  opacity: 0;
+}
+
+:host([effect="slit"][opened]) dialog {
+  animation: slit .7s forwards ease-out;
+}
+
+@keyframes slit {
+  50% {
+    transform: translateZ(-250px) rotateY(89deg);
+    opacity: 1;
+    animation-timing-function: ease-in;}
+  100% {
+    transform: translateZ(0) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+/* rotate-bottom */
+:host([effect="rotate-bottom"]) {
+  perspective: 1300px;
+}
+
+:host([effect="rotate-bottom"]) dialog {
+  transform-style: preserve-3d;
+  transform: translateY(100%) rotateX(90deg);
+  transform-origin: 0 100%;
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed) ease-out;
+}
+
+:host([effect="rotate-bottom"][opened]) dialog {
+  transform: translateY(0%) rotateX(0deg);
+  opacity: 1;
+}
+
+/* rotate-left */
+:host([effect="rotate-left"]) {
+  perspective: 1300px;
+}
+
+:host([effect="rotate-left"]) dialog {
+  transform-style: preserve-3d;
+  transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+  transform-origin: 0 100%;
+  opacity: 0;
+  transition: all var(--kemet-modal-transition-speed);
+}
+
+:host([effect="rotate-left"][opened]) dialog {
+  transform: translateZ(0px) translateX(0%) rotateY(0deg);
+  opacity: 1;
+}
+`;
+
+// src/elements/dialog/index.ts
+var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
+  EnumEffects2["FadeinScaleup"] = "fadein-scaleup";
+  EnumEffects2["SlideRight"] = "slide-right";
+  EnumEffects2["SlideBottom"] = "slide-bottom";
+  EnumEffects2["Newspaper"] = "newspaper";
+  EnumEffects2["Fall"] = "fall";
+  EnumEffects2["SideFall"] = "side-fall";
+  EnumEffects2["FlipHorizontal"] = "flip-horizontal";
+  EnumEffects2["FlipVertical"] = "flip-vertical";
+  EnumEffects2["Sign3d"] = "sign-3d";
+  EnumEffects2["SuperScaled"] = "super-scaled";
+  EnumEffects2["Slit"] = "slit";
+  EnumEffects2["RotateBottom"] = "rotate-bottom";
+  EnumEffects2["RotateLeft"] = "rotate-left";
+  return EnumEffects2;
+})(EnumEffects || {});
+var Dialog = class extends LitElement {
+  constructor() {
+    super();
+    this.opened = false;
+    this.closeOnClick = false;
+    this.breakpoint = "600px";
+    this.dom = "initializing";
+    this.addEventListener("kemet-dialog-close-pressed", () => {
+      this.handleClose();
+    });
+  }
+  firstUpdated() {
+    this.focusableSelector = "body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
+    this.focusableElements = this.querySelectorAll(this.focusableSelector);
+    this.addEventListener("keyup", (event) => {
+      if (event.key === "Escape") {
+        this.handleClose();
+      }
+    });
+    this.addEventListener("click", (event) => {
+      const targetElement = event.target;
+      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === "kemet-dialog") {
+        this.handleClose();
+      }
+    });
+    window.addEventListener("resize", () => {
+      this.isMobile();
+    });
+    this.focusableElements.forEach((element) => {
+      element.addEventListener("keydown", (event) => this.handleFocusableDown(event));
+    });
+    emitEvent(this, "kemet-dialog-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      this.handleOpen();
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      this.handleClose();
+    }
+    this.isMobile();
+  }
+  render() {
+    return html`
+      <dialog part="dialog" @close=${() => this.handleClose()}>
+        <slot></slot>
+      </dialog>
+      <div class="overlay" part="overlay"></div>
+    `;
+  }
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
+  handleOpen() {
+    this.opened = true;
+    if (this.dialogElement?.showModal) this.dialogElement.showModal();
+    emitEvent(this, "kemet-dialog-opened", { element: this });
+  }
+  handleClose() {
+    this.opened = false;
+    if (this.dialogElement?.close) this.dialogElement.close();
+    emitEvent(this, "kemet-dialog-closed", { element: this });
+  }
+  handleFocusableDown(event) {
+    const firstFocusable = this.focusableElements[0];
+    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
+    if (event.key === "Tab") {
+      if (event.shiftKey && document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      } else if (!event.shiftKey && document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+};
+Dialog.styles = [styles_css_default, effects_css_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dialog.prototype, "opened", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Dialog.prototype, "effect", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "close-on-click" })
+], Dialog.prototype, "closeOnClick", 2);
+__decorateClass([
+  property({ type: String })
+], Dialog.prototype, "breakpoint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dialog.prototype, "mobile", 2);
+__decorateClass([
+  property({ reflect: true })
+], Dialog.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Dialog.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Dialog.prototype, "dom", 2);
+__decorateClass([
+  query("dialog")
+], Dialog.prototype, "dialogElement", 2);
+__decorateClass([
+  state()
+], Dialog.prototype, "focusableSelector", 2);
+__decorateClass([
+  state()
+], Dialog.prototype, "focusableElements", 2);
+Dialog = __decorateClass([
+  customElement("kemet-dialog")
+], Dialog);
+export {
+  EnumEffects,
+  Dialog as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/dialog/index.ts","../../../src/utilities/events.ts","../../../src/elements/dialog/styles.css.ts","../../../src/elements/dialog/effects.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\nimport styles from './styles.css.ts';\nimport stylesEffects from './effects.css.ts';\n\nexport enum EnumEffects {\n  FadeinScaleup = 'fadein-scaleup',\n  SlideRight = 'slide-right',\n  SlideBottom = 'slide-bottom',\n  Newspaper = 'newspaper',\n  Fall = 'fall',\n  SideFall = 'side-fall',\n  FlipHorizontal = 'flip-horizontal',\n  FlipVertical = 'flip-vertical',\n  Sign3d = 'sign-3d',\n  SuperScaled = 'super-scaled',\n  Slit = 'slit',\n  RotateBottom = 'rotate-bottom',\n  RotateLeft = 'rotate-left'\n}\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-dialog\n * @summary A dialog that has many built-in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n * @prop {EnumRoundedSizes} rounded\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @csspart dialog - The main contents of the dialog.\n * @csspart overlay - The surrounding scrim of the dialog.\n *\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.\n * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.\n * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.\n * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.\n * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n *\n * @event kemet-dialog-opened - Fires when the dialog opens\n * @event kemet-dialog-closed - Fires when the dialog closes\n *\n */\n\n@customElement('kemet-dialog')\nexport default class Dialog extends LitElement {\n  static styles = [styles, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect?: EnumEffects;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @query('dialog')\n  dialogElement!: HTMLDialogElement;\n\n  /** @internal */\n  @state()\n  focusableSelector!: string;\n\n  /** @internal */\n  @state()\n  focusableElements!: NodeListOf<Element>;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-dialog-close-pressed', () => { this.handleClose(); });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.handleClose();\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-dialog') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      (element as HTMLElement).addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\n\n    emitEvent(this, 'kemet-dialog-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.handleOpen();\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.handleClose();\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <dialog part=\"dialog\" @close=${() => this.handleClose()}>\n        <slot></slot>\n      </dialog>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleOpen() {\n    this.opened = true;\n    if (this.dialogElement?.showModal) this.dialogElement.showModal();\n    emitEvent(this, 'kemet-dialog-opened', { element: this });\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-dialog-closed', { element: this });\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-dialog': Dialog\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 } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-dialog-transition-speed: 0.3s;\n  --kemet-dialog-min-width: 0;\n  --kemet-dialog-max-width: none;\n  --kemet-dialog-mobile-width: calc(100% - 2rem);\n  --kemet-dialog-mobile-margin: 0 auto;\n  --kemet-dialog-mobile-padding: 1rem;\n  --kemet-dialog-font-color: var(--kemet-color-font-base);\n  --kemet-dialog-background-color: var(--kemet-color-background-base);\n  --kemet-dialog-overlay-color: rgb(0 0 0 / 80%);\n\n  /* private */\n  --kemet-dialog-radius: 0;\n\n  position: fixed;\n  display: flex;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  width: 100%;\n  height: 100vh;\n  visibility: hidden;\n  backface-visibility: hidden;\n}\n\n:host([opened]) {\n  visibility: visible;\n}\n\ndialog {\n  color: var(--kemet-dialog-font-color);\n  display: block;\n  z-index: 3;\n  margin: auto;\n  min-width: var(--kemet-dialog-min-width);\n  max-width: var(--kemet-dialog-max-width);\n  border: 0;\n  border-radius: var(--kemet-dialog-radius);\n  background: var(--kemet-dialog-background-color);\n}\n\ndialog::backdrop {\n  background: none;\n}\n\n:host([mobile]) dialog {\n  margin: var(--kemet-dialog-mobile-margin);\n  width: var(--kemet-dialog-mobile-width);\n  padding: var(--kemet-dialog-mobile-padding);\n  inset-block-start: auto;\n}\n\n:host([rounded]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded][mobile]) dialog {\n  border-top-left-radius: var(--kemet-dialog-radius);\n  border-top-right-radius: var(--kemet-dialog-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n[part=overlay] {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  opacity: 0;\n  background: var(--kemet-dialog-overlay-color);\n  transition: all var(--kemet-dialog-transition-speed);\n}\n\n:host([opened]) [part=overlay] {\n  opacity: 1;\n  visibility: visible;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`/* default */\n:host([effect]) dialog {\n  transform: scale(0.7);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n/* fadein-scaleup */\n:host([effect=\"fadein-scaleup\"]) dialog {\n  transform: scale(0.7);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"fadein-scaleup\"][opened]) dialog {\n  transform: scale(1);\n  opacity: 1;\n}\n\n/* slide-right */\n:host([effect=\"slide-right\"]) dialog {\n  transform: translateX(20%);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n}\n\n:host([effect=\"slide-right\"][opened]) dialog {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/* slide-bottom */\n:host([effect=\"slide-bottom\"]) dialog {\n  transform: translateY(20%);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"slide-bottom\"][opened]) dialog {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n/* newspaper */\n:host([effect=\"newspaper\"]) dialog {\n  transform: scale(0) rotate(720deg);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"newspaper\"][opened]) dialog {\n  transform: scale(1) rotate(0deg);\n  opacity: 1;\n}\n\n/* fall */\n:host([effect=\"fall\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"fall\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(600px) rotateX(20deg);\n  opacity: 0;\n}\n\n:host([effect=\"fall\"][opened]) dialog {\n  transition: all var(--kemet-modal-transition-speed) ease-in;\n  transform: translateZ(0px) rotateX(0deg);\n  opacity: 1;\n}\n\n/* side-fall */\n:host([effect=\"side-fall\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"side-fall\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translate(30%) translateZ(600px) rotate(10deg);\n  opacity: 0;\n}\n\n:host([effect=\"side-fall\"][opened]) dialog {\n  transition: all var(--kemet-modal-transition-speed) ease-in;\n  transform: translate(0%) translateZ(0) rotate(0deg);\n  opacity: 1;\n}\n\n/* flip-horizontal */\n:host([effect=\"flip-horizontal\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"flip-horizontal\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateY(-70deg);\n  transition: all var(--kemet-modal-transition-speed);\n  opacity: 0;\n}\n\n:host([effect=\"flip-horizontal\"][opened]) dialog {\n  transform: rotateY(0deg);\n  opacity: 1;\n}\n\n/* flip-vertical */\n:host([effect=\"flip-vertical\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"flip-vertical\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateX(-70deg);\n  transition: all var(--kemet-modal-transition-speed);\n  opacity: 0;\n}\n\n:host([effect=\"flip-vertical\"][opened]) dialog {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n/* sign-3d */\n:host([effect=\"sign-3d\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"sign-3d\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateX(-60deg);\n  transform-origin: 50% 0;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"sign-3d\"][opened]) dialog {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n/* super-scaled */\n:host([effect=\"super-scaled\"]) dialog {\n  transform: scale(2);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"super-scaled\"][opened]) dialog {\n  transform: scale(1);\n  opacity: 1;\n}\n\n/* slit */\n:host([effect=\"slit\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"slit\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(-3000px) rotateY(90deg);\n  opacity: 0;\n}\n\n:host([effect=\"slit\"][opened]) dialog {\n  animation: slit .7s forwards ease-out;\n}\n\n@keyframes slit {\n  50% {\n    transform: translateZ(-250px) rotateY(89deg);\n    opacity: 1;\n    animation-timing-function: ease-in;}\n  100% {\n    transform: translateZ(0) rotateY(0deg);\n    opacity: 1;\n  }\n}\n\n/* rotate-bottom */\n:host([effect=\"rotate-bottom\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"rotate-bottom\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateY(100%) rotateX(90deg);\n  transform-origin: 0 100%;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed) ease-out;\n}\n\n:host([effect=\"rotate-bottom\"][opened]) dialog {\n  transform: translateY(0%) rotateX(0deg);\n  opacity: 1;\n}\n\n/* rotate-left */\n:host([effect=\"rotate-left\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"rotate-left\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  transform-origin: 0 100%;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"rotate-left\"][opened]) dialog {\n  transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  opacity: 1;\n}\n`;\n"],"mappings":"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","names":["css","EnumEffects"]}

package/dist/elements/dialog/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/dialog/styles.css.js

@@ -0,0 +1,108 @@
+// src/elements/dialog/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-dialog-transition-speed: 0.3s;
+  --kemet-dialog-min-width: 0;
+  --kemet-dialog-max-width: none;
+  --kemet-dialog-mobile-width: calc(100% - 2rem);
+  --kemet-dialog-mobile-margin: 0 auto;
+  --kemet-dialog-mobile-padding: 1rem;
+  --kemet-dialog-font-color: var(--kemet-color-font-base);
+  --kemet-dialog-background-color: var(--kemet-color-background-base);
+  --kemet-dialog-overlay-color: rgb(0 0 0 / 80%);
+
+  /* private */
+  --kemet-dialog-radius: 0;
+
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100vh;
+  visibility: hidden;
+  backface-visibility: hidden;
+}
+
+:host([opened]) {
+  visibility: visible;
+}
+
+dialog {
+  color: var(--kemet-dialog-font-color);
+  display: block;
+  z-index: 3;
+  margin: auto;
+  min-width: var(--kemet-dialog-min-width);
+  max-width: var(--kemet-dialog-max-width);
+  border: 0;
+  border-radius: var(--kemet-dialog-radius);
+  background: var(--kemet-dialog-background-color);
+}
+
+dialog::backdrop {
+  background: none;
+}
+
+:host([mobile]) dialog {
+  margin: var(--kemet-dialog-mobile-margin);
+  width: var(--kemet-dialog-mobile-width);
+  padding: var(--kemet-dialog-mobile-padding);
+  inset-block-start: auto;
+}
+
+:host([rounded]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) dialog {
+  --kemet-dialog-radius: var(--kemet-border-radius-pill);
+}
+
+:host([rounded][mobile]) dialog {
+  border-top-left-radius: var(--kemet-dialog-radius);
+  border-top-right-radius: var(--kemet-dialog-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[part=overlay] {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  opacity: 0;
+  background: var(--kemet-dialog-overlay-color);
+  transition: all var(--kemet-dialog-transition-speed);
+}
+
+:host([opened]) [part=overlay] {
+  opacity: 1;
+  visibility: visible;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/dialog/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/dialog/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-dialog-transition-speed: 0.3s;\n  --kemet-dialog-min-width: 0;\n  --kemet-dialog-max-width: none;\n  --kemet-dialog-mobile-width: calc(100% - 2rem);\n  --kemet-dialog-mobile-margin: 0 auto;\n  --kemet-dialog-mobile-padding: 1rem;\n  --kemet-dialog-font-color: var(--kemet-color-font-base);\n  --kemet-dialog-background-color: var(--kemet-color-background-base);\n  --kemet-dialog-overlay-color: rgb(0 0 0 / 80%);\n\n  /* private */\n  --kemet-dialog-radius: 0;\n\n  position: fixed;\n  display: flex;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  width: 100%;\n  height: 100vh;\n  visibility: hidden;\n  backface-visibility: hidden;\n}\n\n:host([opened]) {\n  visibility: visible;\n}\n\ndialog {\n  color: var(--kemet-dialog-font-color);\n  display: block;\n  z-index: 3;\n  margin: auto;\n  min-width: var(--kemet-dialog-min-width);\n  max-width: var(--kemet-dialog-max-width);\n  border: 0;\n  border-radius: var(--kemet-dialog-radius);\n  background: var(--kemet-dialog-background-color);\n}\n\ndialog::backdrop {\n  background: none;\n}\n\n:host([mobile]) dialog {\n  margin: var(--kemet-dialog-mobile-margin);\n  width: var(--kemet-dialog-mobile-width);\n  padding: var(--kemet-dialog-mobile-padding);\n  inset-block-start: auto;\n}\n\n:host([rounded]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded][mobile]) dialog {\n  border-top-left-radius: var(--kemet-dialog-radius);\n  border-top-right-radius: var(--kemet-dialog-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n[part=overlay] {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  opacity: 0;\n  background: var(--kemet-dialog-overlay-color);\n  transition: all var(--kemet-dialog-transition-speed);\n}\n\n:host([opened]) [part=overlay] {\n  opacity: 1;\n  visibility: visible;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/dialog-close/index.d.ts

@@ -0,0 +1,35 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-dialog-close
+ * @summary A close button for a dialog.
+ *
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @event kemet-dialog-close-pressed - Fires when the close button is pressed
+ *
+ * @fires kemet-dialog-close-mounted - Fired when the dialog close button is mounted to the DOM
+ * @detail {HTMLElement} element - The dialog close button element
+ *
+ */
+declare class DialogClose extends LitElement {
+    static styles: lit.CSSResult[];
+    polarity?: 'light' | 'dark';
+    dom: string;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    close(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-dialog-close': DialogClose;
+    }
+}
+
+export { DialogClose as default };