kemet-ui 4.0.2 → 5.0.0

package/dist/chunk-T6PYRK57.mjs

@@ -1,465 +0,0 @@
-import {
-  emitEvent
-} from "./chunk-LHEY3UOF.mjs";
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/modal.ts
-import { html, LitElement } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  state
-} from "lit/decorators.js";
-
-// src/styles/elements/modal.ts
-import { css } from "lit";
-var stylesBase = 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 = 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/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 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 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([
-  property({ type: Boolean, reflect: true })
-], KemetModal.prototype, "opened", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetModal.prototype, "effect", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "close-on-click" })
-], KemetModal.prototype, "closeOnClick", 2);
-__decorateClass([
-  property({ type: String })
-], KemetModal.prototype, "breakpoint", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], KemetModal.prototype, "mobile", 2);
-__decorateClass([
-  property({ reflect: true })
-], KemetModal.prototype, "rounded", 2);
-__decorateClass([
-  query("dialog")
-], KemetModal.prototype, "dialogElement", 2);
-__decorateClass([
-  state()
-], KemetModal.prototype, "focusableSelector", 2);
-__decorateClass([
-  state()
-], KemetModal.prototype, "focusableElements", 2);
-KemetModal = __decorateClass([
-  customElement("kemet-modal")
-], KemetModal);
-
-export {
-  effects,
-  EnumEffects,
-  KemetModal
-};
-//# sourceMappingURL=chunk-T6PYRK57.mjs.map

package/dist/chunk-T6PYRK57.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/modal.ts","../src/styles/elements/modal.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"],"mappings":"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","names":["EnumEffects"]}

package/dist/chunk-T7FJ76DU.mjs

@@ -1,85 +0,0 @@
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/svg.ts
-import { html, css, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-var KemetSVG = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.svg = "svgs";
-    this.ratio = "none";
-    this.viewBox = "0 0 128 128";
-  }
-  updated() {
-    this.setSize();
-    this.getIcon();
-  }
-  render() {
-    return html`
-      <svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}" fill="currentColor"></svg>
-    `;
-  }
-  setSize() {
-    if (this.size) {
-      this.style.width = `${this.size}px`;
-      this.style.height = `${this.size}px`;
-    }
-  }
-  getIcon() {
-    let svgElement;
-    const svgs = document.kemetSVGs[this.set];
-    svgs.forEach((svg, index) => {
-      const id = svg.getAttribute("id");
-      if (id && id === this.svg) {
-        svgElement = svgs[index];
-      }
-    });
-    if (svgElement) {
-      this.fillSVG(svgElement);
-    } else {
-      console.error(`Could not find svg "${this.svg}" in set "${this.set}".`);
-    }
-  }
-  fillSVG(element) {
-    const content = element.cloneNode(true);
-    const svg = this.shadowRoot.querySelector("svg");
-    const g = svg.querySelector("g");
-    if (g) g.remove();
-    svg.appendChild(content);
-  }
-};
-KemetSVG.styles = [css`
-    :host {
-      display: inline-block;
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  `];
-__decorateClass([
-  property({ type: String })
-], KemetSVG.prototype, "set", 2);
-__decorateClass([
-  property({ type: String })
-], KemetSVG.prototype, "svg", 2);
-__decorateClass([
-  property({ type: Number })
-], KemetSVG.prototype, "size", 2);
-__decorateClass([
-  property({ type: String })
-], KemetSVG.prototype, "ratio", 2);
-__decorateClass([
-  property({ type: String })
-], KemetSVG.prototype, "viewBox", 2);
-KemetSVG = __decorateClass([
-  customElement("kemet-svg")
-], KemetSVG);
-
-export {
-  KemetSVG
-};
-//# sourceMappingURL=chunk-T7FJ76DU.mjs.map

package/dist/chunk-T7FJ76DU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/svg.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svg\n * @summary A svg from a set of custom SVGs.\n *\n * @prop {string} set - Defines which set of svgs is referenced.\n * @prop {string} svg - The name (id) of the svg to be displayed.\n * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.\n * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.\n * @prop {string} viewBox - The value for the viewBox attribute of the svg.\n *\n * @csspart svg - The svg element.\n *\n */\n\n@customElement('kemet-svg')\nexport default class KemetSVG extends LitElement {\n  static styles = [css`\n    :host {\n      display: inline-block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  `];\n\n  @property({ type: String })\n  set: string;\n\n  @property({ type: String })\n  svg: string = 'svgs';\n\n  @property({ type: Number })\n  size: number;\n\n  @property({ type: String })\n  ratio: string = 'none';\n\n  @property({ type: String })\n  viewBox: string = '0 0 128 128';\n\n  updated() {\n    this.setSize();\n    this.getIcon();\n  }\n\n  render() {\n    return html`\n      <svg part=\"svg\" viewBox=\"${this.viewBox}\" preserveAspectRatio=\"${this.ratio}\" fill=\"currentColor\"></svg>\n    `;\n  }\n\n  setSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  getIcon() {\n    let svgElement;\n    const svgs = document.kemetSVGs[this.set];\n\n    svgs.forEach((svg, index) => {\n      const id = svg.getAttribute('id');\n\n      if (id && id === this.svg) {\n        svgElement = svgs[index];\n      }\n    });\n\n    if (svgElement) {\n      this.fillSVG(svgElement);\n    } else {\n      console.error(`Could not find svg \"${this.svg}\" in set \"${this.set}\".`);\n    }\n  }\n\n  fillSVG(element) {\n    const content = element.cloneNode(true);\n    const svg = this.shadowRoot.querySelector('svg');\n    const g = svg.querySelector('g');\n\n    if (g) g.remove();\n    svg.appendChild(content);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svg': KemetSVG\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"],"mappings":";;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAoBxC,IAAqB,WAArB,cAAsC,WAAW;AAAA,EAAjD;AAAA;AAgBE,eAAc;AAMd,iBAAgB;AAGhB,mBAAkB;AAAA;AAAA,EAElB,UAAU;AACR,SAAK,QAAQ;AACb,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,iCACsB,KAAK,OAAO,0BAA0B,KAAK,KAAK;AAAA;AAAA,EAE/E;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,UAAU;AACR,QAAI;AACJ,UAAM,OAAO,SAAS,UAAU,KAAK,GAAG;AAExC,SAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,YAAM,KAAK,IAAI,aAAa,IAAI;AAEhC,UAAI,MAAM,OAAO,KAAK,KAAK;AACzB,qBAAa,KAAK,KAAK;AAAA,MACzB;AAAA,IACF,CAAC;AAED,QAAI,YAAY;AACd,WAAK,QAAQ,UAAU;AAAA,IACzB,OAAO;AACL,cAAQ,MAAM,uBAAuB,KAAK,GAAG,aAAa,KAAK,GAAG,IAAI;AAAA,IACxE;AAAA,EACF;AAAA,EAEA,QAAQ,SAAS;AACf,UAAM,UAAU,QAAQ,UAAU,IAAI;AACtC,UAAM,MAAM,KAAK,WAAW,cAAc,KAAK;AAC/C,UAAM,IAAI,IAAI,cAAc,GAAG;AAE/B,QAAI,EAAG,GAAE,OAAO;AAChB,QAAI,YAAY,OAAO;AAAA,EACzB;AACF;AAxEqB,SACZ,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShB;AAGD;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,SAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,SAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlBP,SAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArBP,SAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxBP,SAyBnB;AAzBmB,WAArB;AAAA,EADC,cAAc,WAAW;AAAA,GACL;","names":[]}

package/dist/chunk-TFESUHTA.mjs

@@ -1,48 +0,0 @@
-// src/styles/elements/accordion.ts
-import { css } from "lit";
-var stylesBase = css`
-  :host {
-    display: block;
-  }
-`;
-var stylesPanel = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-    padding: 1.5rem 1rem;
-    border-bottom: 1px solid rgb(var(--kemet-color-foreground));
-  }
-
-  .trigger {
-    color: inherit;
-    cursor: pointer;
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr auto;
-    width: 100%;
-    text-align: left;
-    padding: 0;
-    border: none;
-    background: none;
-  }
-
-  .body {
-    overflow: hidden;
-    transition: all 300ms ease;
-  }
-
-  ::slotted([slot='body']) {
-    padding: 1rem 0;
-  }
-`;
-
-export {
-  stylesBase,
-  stylesPanel
-};
-//# sourceMappingURL=chunk-TFESUHTA.mjs.map

package/dist/chunk-TFESUHTA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/styles/elements/accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase =  css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesPanel = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n    padding: 1.5rem 1rem;\n    border-bottom: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  .trigger {\n    color: inherit;\n    cursor: pointer;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n    width: 100%;\n    text-align: left;\n    padding: 0;\n    border: none;\n    background: none;\n  }\n\n  .body {\n    overflow: hidden;\n    transition: all 300ms ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,aAAc;AAAA;AAAA;AAAA;AAAA;AAMpB,IAAM,cAAc;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":[]}