kemet-ui 4.0.0 → 4.0.2

package/dist/elements/modal.js

@@ -0,0 +1,492 @@
+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/modal.ts
+var modal_exports = {};
+__export(modal_exports, {
+  EnumEffects: () => EnumEffects,
+  default: () => KemetModal,
+  effects: () => effects
+});
+module.exports = __toCommonJS(modal_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/modal.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-modal-radius: var(--kemet-border-radius-xl);
+    --kemet-modal-transition-speed: 0.3s;
+    --kemet-modal-dialog-min-width: 0;
+    --kemet-modal-dialog-max-width: none;
+    --kemet-modal-dialog-mobile-width: calc(100% - 2rem);
+    --kemet-modal-dialog-mobile-margin: 0 auto;
+    --kemet-modal-dialog-mobile-padding: 1rem;
+    --kemet-modal-dialog-background-color: rgb(var(--kemet-color-white));
+    --kemet-modal-overlay-background-color: rgb(var(--kemet-color-black) / 20%);
+    --kemet-modal-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 {
+    display: block;
+    z-index: 3;
+    margin: auto;
+    min-width: var(--kemet-modal-dialog-min-width);
+    max-width: var(--kemet-modal-dialog-max-width);
+    border: 0;
+    border-radius: var(--kemet-modal-radius);
+    background: var(--kemet-modal-dialog-background-color);
+  }
+
+  dialog::backdrop {
+    background: none;
+  }
+
+  :host([mobile]) dialog {
+    margin: var(--kemet-modal-dialog-mobile-margin);
+    width: var(--kemet-modal-dialog-mobile-width);
+    padding: var(--kemet-modal-dialog-mobile-padding);
+    inset-block-start: auto;
+  }
+
+  :host([rounded]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=lg]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-pill);
+  }
+
+  :host([rounded][mobile]) dialog {
+    border-top-left-radius: var(--kemet-modal-radius);
+    border-top-right-radius: var(--kemet-modal-radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    opacity: 0;
+    background: var(--kemet-modal-overlay-background-color);
+    transition: all var(--kemet-modal-transition-speed);
+  }
+
+  :host([opened]) .overlay {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+var stylesEffects = import_lit.css`
+  /* 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/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/modal.ts
+var effects = ["fadein-scaleup", "slide-right", "slide-bottom", "newspaper", "fall", "side-fall", "flip-horizontal", "flip-vertical", "sign-3d", "super-scaled", "slit", "rotate-bottom", "rotate-left"];
+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 KemetModal = class extends import_lit2.LitElement {
+  constructor() {
+    super();
+    this.opened = false;
+    this.closeOnClick = false;
+    this.breakpoint = "600px";
+    this.addEventListener("kemet-closed-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-modal") {
+        this.handleClose();
+      }
+    });
+    window.addEventListener("resize", () => {
+      this.isMobile();
+    });
+    this.focusableElements.forEach((element) => {
+      element.addEventListener("keydown", (event) => this.handleFocusableDown(event));
+    });
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      this.handleOpen();
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      this.handleClose();
+    }
+    this.isMobile();
+  }
+  render() {
+    return import_lit2.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-opened", this);
+  }
+  handleClose() {
+    this.opened = false;
+    if (this.dialogElement?.close) this.dialogElement.close();
+    emitEvent(this, "kemet-closed", 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();
+      }
+    }
+  }
+};
+KemetModal.styles = [stylesBase, stylesEffects];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetModal.prototype, "opened", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetModal.prototype, "effect", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "close-on-click" })
+], KemetModal.prototype, "closeOnClick", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetModal.prototype, "breakpoint", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetModal.prototype, "mobile", 2);
+__decorateClass([
+  (0, import_decorators.property)({ reflect: true })
+], KemetModal.prototype, "rounded", 2);
+__decorateClass([
+  (0, import_decorators.query)("dialog")
+], KemetModal.prototype, "dialogElement", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetModal.prototype, "focusableSelector", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetModal.prototype, "focusableElements", 2);
+KemetModal = __decorateClass([
+  (0, import_decorators.customElement)("kemet-modal")
+], KemetModal);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnumEffects,
+  effects
+});
+//# sourceMappingURL=modal.js.map

package/dist/elements/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/modal.ts","../../src/styles/elements/modal.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from '../styles/elements/modal';\nimport { emitEvent } from '../utilities/events';\nimport { TypeRoundedSizes } from '../utilities/constants';\n\nexport const effects = ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'] as const;\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}\nexport type TypeEffect = typeof effects[number];\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\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 {TypeRoundedSizes} rounded\n *\n * @csspart dialog - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\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-opened - Fires when the modal opens\n * @event kemet-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\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: TypeRoundedSizes;\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-closed-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-modal') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\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-opened', this);\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-closed', 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-modal': KemetModal\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-modal-radius: var(--kemet-border-radius-xl);\n    --kemet-modal-transition-speed: 0.3s;\n    --kemet-modal-dialog-min-width: 0;\n    --kemet-modal-dialog-max-width: none;\n    --kemet-modal-dialog-mobile-width: calc(100% - 2rem);\n    --kemet-modal-dialog-mobile-margin: 0 auto;\n    --kemet-modal-dialog-mobile-padding: 1rem;\n    --kemet-modal-dialog-background-color: rgb(var(--kemet-color-white));\n    --kemet-modal-overlay-background-color: rgb(var(--kemet-color-black) / 20%);\n    --kemet-modal-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\n  dialog {\n    display: block;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-dialog-min-width);\n    max-width: var(--kemet-modal-dialog-max-width);\n    border: 0;\n    border-radius: var(--kemet-modal-radius);\n    background: var(--kemet-modal-dialog-background-color);\n  }\n\n  dialog::backdrop {\n    background: none;\n  }\n\n  :host([mobile]) dialog {\n    margin: var(--kemet-modal-dialog-mobile-margin);\n    width: var(--kemet-modal-dialog-mobile-width);\n    padding: var(--kemet-modal-dialog-mobile-padding);\n    inset-block-start: auto;\n  }\n\n  :host([rounded]) dialog {\n    --kemet-modal-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) dialog {\n    --kemet-modal-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=lg]) dialog {\n    --kemet-modal-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) dialog {\n    --kemet-modal-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) dialog {\n    --kemet-modal-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) dialog {\n    --kemet-modal-radius: var(--kemet-border-radius-pill);\n  }\n\n  :host([rounded][mobile]) dialog {\n    border-top-left-radius: var(--kemet-modal-radius);\n    border-top-right-radius: var(--kemet-modal-radius);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .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-modal-overlay-background-color);\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const stylesEffects = css`\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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":["import_lit","EnumEffects"]}

package/dist/elements/modal.mjs

@@ -0,0 +1,13 @@
+import {
+  EnumEffects,
+  KemetModal,
+  effects
+} from "../chunk-T6PYRK57.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  EnumEffects,
+  KemetModal as default,
+  effects
+};
+//# sourceMappingURL=modal.mjs.map

package/dist/elements/modal.mjs.map

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

package/dist/elements/multi-input.d.mts

@@ -0,0 +1,124 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { a as TypeRoundedSizes, T as TypeStatus, K as KemetField, c as KemetCombo } from '../constants-BEtO8uLN.mjs';
+import '../form-controller-BR0gZhrG.mjs';
+
+interface InterfaceSelections {
+    element: HTMLUListElement;
+    text: string;
+    id: string;
+}
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-multi-input
+ * @summary An input element that accepts multiple items from a combo.
+ *
+ * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
+ * @prop {string} name - The name of the input
+ * @prop {string} placeholder - The placeholder attribute
+ * @prop {boolean} disabled - The disable attribute
+ * @prop {boolean} required - The required attribute
+ * @prop {string} value - The input's value
+ * @prop {boolean} invalid - States whether the input is invalid
+ * @prop {string} status - The status of the input
+ * @prop {boolean} validateOnBlur - Activates validation on blur
+ * @prop {TypeRoundedSizes} rounded - Displays rounded corners
+ * @prop {boolean} filled - Displays a filled input box
+ * @prop {ValidityState} validity - The HTML5 validity object.
+
+ *
+ * @csspart input
+ *
+ * @cssproperty --kemet-input-height - The height of the input.
+ * @cssproperty --kemet-input-padding - The padding on the input.
+ * @cssproperty --kemet-input-border - The border of the input.
+ * @cssproperty --kemet-input-border-color-error -  The border of the error state.
+ * @cssproperty --kemet-input-border-color-success - The border of the success state.
+ * @cssproperty --kemet-input-border-color-warning - The border of the warning state.
+ * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.
+ * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.
+ * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.
+ * @cssproperty --kemet-input-border-filled - The border on filled.
+ * @cssproperty --kemet-input-color-filled - The color on filled.
+ * @cssproperty --kemet-input-background-color-filled - The background-color on filled.
+ * @cssproperty --kemet-input-background-color-error - The error state background color.
+ * @cssproperty --kemet-input-background-color-success - The success state background color.
+ * @cssproperty --kemet-input-background-color-warning - The warning state background color.
+ *
+ * @event kemet-focus - Fires when the input receives focus
+ * @event kemet-blur - Fires when the input loses focus
+ * @event kemet-input - Fires when the input receives input
+ * @event kemet-change - Fires when the input changes
+ * @event kemet-invalid - Fires when the input is invalid
+ *
+ */
+declare class KemetMultiInput extends LitElement {
+    static styles: lit.CSSResult[];
+    slug: string;
+    placeholder: string;
+    disabled: boolean;
+    filled: boolean;
+    rounded: TypeRoundedSizes;
+    name: string;
+    status: TypeStatus;
+    required: boolean;
+    invalid: boolean;
+    validateOnBlur: boolean;
+    value: string;
+    selections: InterfaceSelections[];
+    paddingLeft: number;
+    field: KemetField;
+    combo: KemetCombo;
+    chips: {
+        offsetWidth: number;
+    };
+    input: HTMLInputElement;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    /**
+     * Handles when a selection is made from a combo
+     * @private
+     * @param event
+     */
+    addComboItem(event: CustomEvent): void;
+    /**
+     * Handles when the input receives input
+     * @private
+     */
+    handleInput(event: Event): void;
+    /**
+     * Handles when the input is focused
+     */
+    handleFocus(): void;
+    handleBlur(): void;
+    handleChange(event: Event): void;
+    handleInvalid(event: Event): void;
+    /**
+     * Renders the chips from the selections of the combo
+     * @private
+     */
+    makeSelections(): lit_html.TemplateResult<1>;
+    /**
+     * calculates padding to properly place the cursor of the input
+     * @private
+     */
+    calculatePadding(): void;
+    /**
+     * handle removing a chip from the selections
+     * @private
+     */
+    handleRemoveChip(event: any): void;
+    handleComboClose(event: MouseEvent): void;
+    handleKeydown(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-multi-input': KemetMultiInput;
+    }
+}
+
+export { type InterfaceSelections, KemetMultiInput as default };