kemet-ui 4.0.2 → 5.0.0

package/dist/elements/modal.js

@@ -1,492 +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/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

@@ -1 +0,0 @@
-{"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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,124 +0,0 @@
-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 };