kemet-ui 5.0.0 → 5.0.2

package/dist/elements/input-files/index.js

@@ -10,8 +10,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/elements/input-files/index.ts
-import { html as html2, LitElement as LitElement2 } from "lit";
-import { customElement as customElement2, property as property2, state as state2 } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
+
+// src/elements/input-files/index.ts
 import { ifDefined } from "lit/directives/if-defined.js";
 
 // src/utilities/events.ts
@@ -21,226 +27,12 @@ var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
   );
 };
 
-// src/elements/icon/index.ts
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { isTemplateResult } from "lit/directive-helpers.js";
-
-// src/elements/icon/styles.css.ts
+// src/elements/input-files/styles.css.ts
 import { css } from "lit";
 var styles_css_default = css`:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-}
-`;
-
-// src/elements/icon/index.ts
-var CACHEABLE_ERROR = /* @__PURE__ */ Symbol();
-var RETRYABLE_ERROR = /* @__PURE__ */ Symbol();
-var parser;
-var iconCache = /* @__PURE__ */ new Map();
-var MAX_CONCURRENT_REQUESTS = 10;
-var requestQueue = [];
-var activeRequests = 0;
-function queueRequest(callback) {
-  if (activeRequests < MAX_CONCURRENT_REQUESTS) {
-    activeRequests++;
-    callback();
-  } else {
-    requestQueue.push(callback);
-  }
-}
-function requestComplete() {
-  activeRequests--;
-  if (requestQueue.length > 0) {
-    const nextRequest = requestQueue.shift();
-    if (nextRequest) {
-      activeRequests++;
-      nextRequest();
-    }
-  }
-}
-var KemetIcon = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.name = "house";
-    this.library = "bootstrap";
-    this.family = "regular";
-    this.size = 16;
-    this.dom = "initializing";
-    this.svg = null;
-    this.url = "https://unpkg.com/bootstrap-icons@latest/icons";
-    /** @internal */
-    this.isVisible = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateUrl();
-    if (!this.svg) {
-      this.isVisible = true;
-      this.setIcon();
-    }
-  }
-  updated() {
-    this.updateUrl();
-    this.updateSize();
-  }
-  firstUpdated() {
-    emitEvent(this, "kemet-icon-mounted", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        element: this
-      }
-    });
-    this.dom = "mounted";
-  }
-  render() {
-    if (this.svg) {
-      return this.svg;
-    }
-    if (!this.isVisible) {
-      this.isVisible = true;
-      this.setIcon();
-    }
-    return html`<svg part="svg" width="${this.size}" height="${this.size}" viewBox="0 0 16 16"></svg>`;
-  }
-  /** Public method to force icon loading */
-  loadIcon() {
-    this.isVisible = true;
-    this.setIcon();
-  }
-  async setIcon() {
-    if (!this.isVisible) return;
-    let iconResolver = iconCache.get(`${this.family}/${this.name}`);
-    if (!iconResolver) {
-      iconResolver = this.resolveIcon();
-      iconCache.set(`${this.family}/${this.name}`, iconResolver);
-    }
-    const svg = await iconResolver;
-    if (svg === RETRYABLE_ERROR) {
-      iconCache.delete(`${this.family}/${this.name}`);
-    }
-    if (isTemplateResult(svg)) {
-      this.svg = svg;
-    } else if (svg instanceof SVGSVGElement) {
-      this.svg = svg.cloneNode(true);
-    }
-  }
-  updateUrl() {
-    switch (this.library) {
-      case "fontawesome" /* FONTAWESOME */:
-        this.version = this.version || "7.3.1";
-        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;
-        break;
-      case "bootstrap" /* BOOTSTRAP */:
-        this.version = this.version || "1.11.3";
-        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;
-        break;
-    }
-  }
-  async resolveIcon() {
-    return new Promise((resolve) => {
-      queueRequest(async () => {
-        let fileData;
-        let fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
-        switch (this.library) {
-          case "fontawesome" /* FONTAWESOME */:
-            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
-            break;
-          case "bootstrap" /* BOOTSTRAP */:
-            fetchURL = `${this.url}/${this.name}.svg`;
-            break;
-        }
-        try {
-          fileData = await fetch(fetchURL);
-          if (!fileData.ok) {
-            requestComplete();
-            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);
-            return;
-          }
-        } catch {
-          requestComplete();
-          resolve(RETRYABLE_ERROR);
-          return;
-        }
-        try {
-          const div = document.createElement("div");
-          div.innerHTML = await fileData.text();
-          const svg = div.firstElementChild;
-          if (svg?.tagName?.toLowerCase() !== "svg") {
-            requestComplete();
-            resolve(CACHEABLE_ERROR);
-            return;
-          }
-          if (!parser) parser = new DOMParser();
-          const doc = parser.parseFromString(svg.outerHTML, "text/html");
-          const svgEl = doc.body.querySelector("svg");
-          if (!svgEl) {
-            requestComplete();
-            resolve(CACHEABLE_ERROR);
-            return;
-          }
-          svgEl.part.add("svg");
-          svgEl.setAttribute("width", `${this.size}px`);
-          svgEl.setAttribute("height", `${this.size}px`);
-          requestComplete();
-          resolve(document.adoptNode(svgEl));
-        } catch {
-          requestComplete();
-          resolve(CACHEABLE_ERROR);
-        }
-      });
-    });
-  }
-  updateSize() {
-    if (this.svg) {
-      const svg = this.svg;
-      svg.setAttribute("width", `${this.size}px`);
-      svg.setAttribute("height", `${this.size}px`);
-    }
-  }
-};
-KemetIcon.styles = [styles_css_default];
-__decorateClass([
-  property({ type: String })
-], KemetIcon.prototype, "name", 2);
-__decorateClass([
-  property({ type: String })
-], KemetIcon.prototype, "library", 2);
-__decorateClass([
-  property({ type: String })
-], KemetIcon.prototype, "family", 2);
-__decorateClass([
-  property({ type: Number })
-], KemetIcon.prototype, "size", 2);
-__decorateClass([
-  property({ type: String })
-], KemetIcon.prototype, "version", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetIcon.prototype, "polarity", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetIcon.prototype, "dom", 2);
-__decorateClass([
-  state()
-], KemetIcon.prototype, "svg", 2);
-__decorateClass([
-  state()
-], KemetIcon.prototype, "url", 2);
-KemetIcon = __decorateClass([
-  customElement("kemet-icon")
-], KemetIcon);
-
-// src/elements/input-files/styles.css.ts
-import { css as css2 } from "lit";
-var styles_css_default2 = css2`:host {
-  --kemet-upload-color: var(--kemet-color-font-base);
+  --kemet-upload-color: inherit;
   --kemet-upload-height: 364px;
-  --kemet-upload-border: 1rem solid transparent;
+  --kemet-upload-border: 0;
   --kemet-upload-background-color: transparent;
 
   color: var(--kemet-upload-color);
@@ -316,7 +108,7 @@ var preventDefaults = (event) => {
   event.preventDefault();
   event.stopPropagation();
 };
-var InputFiles = class extends LitElement2 {
+var InputFiles = class extends LitElement {
   constructor() {
     super(...arguments);
     this.slug = "upload";
@@ -357,7 +149,7 @@ var InputFiles = class extends LitElement2 {
     this.dom = "mounted";
   }
   render() {
-    return html2`
+    return html`
       <div class="upload" part="upload">
         <kemet-icon name="cloud-arrow-up" size="128"></kemet-icon>
         <input
@@ -397,51 +189,51 @@ var InputFiles = class extends LitElement2 {
     this.noDragDrop = !("draggable" in document.createElement("span"));
   }
 };
-InputFiles.styles = [styles_css_default2];
+InputFiles.styles = [styles_css_default];
 __decorateClass([
-  property2({ type: String })
+  property({ type: String })
 ], InputFiles.prototype, "slug", 2);
 __decorateClass([
-  property2({ type: String })
+  property({ type: String })
 ], InputFiles.prototype, "accept", 2);
 __decorateClass([
-  property2({ type: Boolean })
+  property({ type: Boolean })
 ], InputFiles.prototype, "multiple", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], InputFiles.prototype, "over", 2);
 __decorateClass([
-  property2({ type: String })
+  property({ type: String })
 ], InputFiles.prototype, "heading", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], InputFiles.prototype, "mobile", 2);
 __decorateClass([
-  property2({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFiles.prototype, "breakpoint", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true, attribute: "no-drag-drop" })
+  property({ type: Boolean, reflect: true, attribute: "no-drag-drop" })
 ], InputFiles.prototype, "noDragDrop", 2);
 __decorateClass([
-  property2({ type: Number, attribute: "max-size" })
+  property({ type: Number, attribute: "max-size" })
 ], InputFiles.prototype, "maxSize", 2);
 __decorateClass([
-  property2({ type: String, attribute: "button-label" })
+  property({ type: String, attribute: "button-label" })
 ], InputFiles.prototype, "buttonLabel", 2);
 __decorateClass([
-  property2({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFiles.prototype, "polarity", 2);
 __decorateClass([
-  property2({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFiles.prototype, "dom", 2);
 __decorateClass([
-  state2()
+  state()
 ], InputFiles.prototype, "fileInputElement", 2);
 __decorateClass([
-  state2()
+  state()
 ], InputFiles.prototype, "upload", 2);
 InputFiles = __decorateClass([
-  customElement2("kemet-input-files")
+  customElement("kemet-input-files")
 ], InputFiles);
 export {
   InputFiles as default

package/dist/elements/input-files/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input-files/index.ts","../../../src/utilities/events.ts","../../../src/elements/icon/index.ts","../../../src/elements/icon/styles.css.ts","../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetInputFileElement from '../input-file';\nimport '../icon';\nimport styles from './styles.css.ts';\n\n\nexport interface InterfaceUploadChangeDetails {\n  event: Event | DragEvent;\n  files: FileList;\n  fileElement: HTMLKemetInputFileElement;\n}\n\nconst preventDefaults = (event: Event) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-input-files\n * @summary An interface for inputing files.\n *\n * @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-input-files-change - Fires when files have been added\n *\n * @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n *\n * @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n *\n * @fires kemet-input-files-mounted - Fired when the input files is mounted to the DOM\n * @detail {HTMLElement} element - The input files element\n */\n\n@customElement('kemet-input-files')\nexport default class InputFiles extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'upload';\n\n  @property({ type: String })\n  accept!: string;\n\n  @property({ type: Boolean })\n  multiple!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  over!: boolean;\n\n  @property({ type: String })\n  heading: string = 'Drag & Drop Files';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: String, reflect: true })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n  noDragDrop!: boolean;\n\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize!: number;\n\n  @property({ type: String, attribute: 'button-label' })\n  buttonLabel: string = 'Browse Files';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  fileInputElement!: HTMLInputElement;\n\n  @state()\n  upload!: HTMLElement;\n\n  firstUpdated() {\n    this.fileInputElement = this.shadowRoot?.querySelector('[type=\"file\"]') as HTMLInputElement;\n    this.upload = this.shadowRoot?.querySelector('.upload') as HTMLElement;\n\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, event => preventDefaults(event), false);\n    });\n\n    ['dragenter', 'dragover'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, () => { this.over = true; }, false);\n    });\n\n    ['dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n    });\n\n    this.isMobile();\n    this.hasDragDrop();\n\n    window.addEventListener('resize', () => { this.isMobile(); });\n    this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n\n    emitEvent(this, 'kemet-input-files-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <div class=\"upload\" part=\"upload\">\n        <kemet-icon name=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n        <input\n          type=\"file\"\n          id=${this.slug}\n          ?multiple=${this.multiple}\n          accept=${ifDefined(this.accept) ? this.accept : null}\n          @change=${(event: Event) => this.handleChange(event)}\n        />\n        <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n        <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n      </div>\n      <div class=\"files\" part=\"files\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: event?.dataTransfer?.files || [],\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  hasDragDrop() {\n    this.noDragDrop = !('draggable' in document.createElement('span'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-files': InputFiles\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { html, HTMLTemplateResult, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n// Request queue with concurrency limit\nconst MAX_CONCURRENT_REQUESTS = 10;\nconst requestQueue: Array<() => void> = [];\nlet activeRequests = 0;\n\nfunction queueRequest(callback: () => void) {\n  if (activeRequests < MAX_CONCURRENT_REQUESTS) {\n    activeRequests++;\n    callback();\n  } else {\n    requestQueue.push(callback);\n  }\n}\n\nfunction requestComplete() {\n  activeRequests--;\n  if (requestQueue.length > 0) {\n    const nextRequest = requestQueue.shift();\n    if (nextRequest) {\n      activeRequests++;\n      nextRequest();\n    }\n  }\n}\n\nexport enum EnumLibrary {\n  FONTAWESOME = 'fontawesome',\n  BOOTSTRAP = 'bootstrap',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-icon\n * @summary An element that represents an icon from a predefined set of open sourced icons.\n *\n * @prop {string} name - The name of the icon to reference.\n * @prop {string} library - The library of icons to use. Values include: (bootstrap | fontawesome)\n * @prop {string} family - The family of icons to use. The family is relative to the library being used. Font awesome values include: (regular | solid | brand)\n * @prop {string} version - The version of the icon library to use. Use latest to grab the most recent version.\n * @prop {number} size - The width and height of the icon in pixels.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-icon-mounted - Fired when the icon is mounted to the DOM\n * @detail {HTMLElement} element - The icon element\n *\n */\n\n@customElement('kemet-icon')\nexport default class KemetIcon extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'house';\n\n  @property({ type: String })\n  library: string = 'bootstrap';\n\n  @property({ type: String })\n  family: string = 'regular';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: String })\n  version?: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /** @internal */\n  @state()\n  private url: string = 'https://unpkg.com/bootstrap-icons@latest/icons';\n\n  /** @internal */\n  private isVisible: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Load icon when connected to DOM\n    this.updateUrl();\n    if (!this.svg) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n  }\n\n  updated() {\n    this.updateUrl();\n    this.updateSize();\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-icon-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    // Return the svg if it's loaded, otherwise show placeholder\n    if (this.svg) {\n      return this.svg;\n    }\n\n    // If not loaded, trigger loading\n    if (!this.isVisible) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n\n    return html`<svg part=\"svg\" width=\"${this.size}\" height=\"${this.size}\" viewBox=\"0 0 16 16\"></svg>`;\n  }\n\n  /** Public method to force icon loading */\n  public loadIcon() {\n    this.isVisible = true;\n    this.setIcon();\n  }\n\n  async setIcon() {\n    if (!this.isVisible) return;\n\n    let iconResolver = iconCache.get(`${this.family}/${this.name}`);\n\n    if (!iconResolver) {\n      iconResolver = this.resolveIcon();\n      iconCache.set(`${this.family}/${this.name}`, iconResolver);\n    }\n\n    const svg = await iconResolver;\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(`${this.family}/${this.name}`);\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n    } else if (svg instanceof SVGSVGElement) {\n      // Clone the SVG so each icon instance gets its own copy\n      this.svg = svg.cloneNode(true) as SVGSVGElement;\n    }\n  }\n\n  private updateUrl() {\n    switch (this.library) {\n      case EnumLibrary.FONTAWESOME:\n        this.version = this.version || '7.3.1';\n        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;\n        break;\n      case EnumLibrary.BOOTSTRAP:\n        this.version = this.version || '1.11.3';\n        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;\n        break;\n    }\n  }\n\n  private async resolveIcon(): Promise<SVGResult> {\n    return new Promise((resolve) => {\n      queueRequest(async () => {\n        let fileData: Response;\n        let fetchURL: string = `${this.url}/${this.family}/${this.name}.svg`;\n\n        switch (this.library) {\n          case EnumLibrary.FONTAWESOME:\n            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;\n            break;\n          case EnumLibrary.BOOTSTRAP:\n            fetchURL = `${this.url}/${this.name}.svg`;\n            break;\n        }\n\n        try {\n          fileData = await fetch(fetchURL);\n          if (!fileData.ok) {\n            requestComplete();\n            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);\n            return;\n          }\n        } catch {\n          requestComplete();\n          resolve(RETRYABLE_ERROR);\n          return;\n        }\n\n        try {\n          const div = document.createElement('div');\n          div.innerHTML = await fileData.text();\n\n          const svg = div.firstElementChild;\n          if (svg?.tagName?.toLowerCase() !== 'svg') {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          if (!parser) parser = new DOMParser();\n          const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n          const svgEl = doc.body.querySelector('svg');\n          if (!svgEl) {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          svgEl.part.add('svg');\n          svgEl.setAttribute('width', `${this.size}px`);\n          svgEl.setAttribute('height', `${this.size}px`);\n\n          requestComplete();\n          resolve(document.adoptNode(svgEl));\n        } catch {\n          requestComplete();\n          resolve(CACHEABLE_ERROR);\n        }\n      });\n    });\n  }\n\n  private updateSize() {\n    if (this.svg) {\n      const svg = this.svg as SVGElement;\n      svg.setAttribute('width', `${this.size}px`);\n      svg.setAttribute('height', `${this.size}px`);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-icon': KemetIcon\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-color: var(--kemet-color-font-base);\n  --kemet-upload-height: 364px;\n  --kemet-upload-border: 1rem solid transparent;\n  --kemet-upload-background-color: transparent;\n\n  color: var(--kemet-upload-color);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  height: var(--kemet-upload-height);\n  border: var(--kemet-upload-border);\n  background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n  display: flex;\n  gap: 2rem;\n  flex-direction: column;\n  height: auto;\n}\n\ninput {\n  display: none;\n}\n\n.button {\n  cursor: pointer;\n  font-size: 1rem;\n  display: block;\n  color: inherit;\n  padding: 0.5rem 1rem;\n  border: 1px solid;\n  background-color: transparent;\n}\n\n.upload {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--kemet-upload-margin);\n  flex-direction: column;\n  border: 2px dashed;\n}\n\n:host([over]) .upload {\n  background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n  height: 280px;\n}\n\n.files {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  padding: 0 1rem;\n  overflow: auto;\n}\n\n:host([mobile]) .files {\n  padding: 0;\n}\n\n.heading {\n  font-size: 1.25rem;\n  margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n  display: none;\n}\n`;\n"],"mappings":"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","names":["html","LitElement","customElement","property","state","css","styles_css_default","LitElement","html","styles_css_default","property","state","customElement"]}
+{"version":3,"sources":["../../../src/elements/input-files/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetInputFileElement from '../input-file';\nimport styles from './styles.css.ts';\n\n\nexport interface InterfaceUploadChangeDetails {\n  event: Event | DragEvent;\n  files: FileList;\n  fileElement: HTMLKemetInputFileElement;\n}\n\nconst preventDefaults = (event: Event) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-input-files\n * @summary An interface for inputing files.\n * @ssrsafe yes\n *\n * @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-input-files-change - Fires when files have been added\n *\n * @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n *\n * @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n *\n * @fires kemet-input-files-mounted - Fired when the input files is mounted to the DOM\n * @detail {HTMLElement} element - The input files element\n */\n\n@customElement('kemet-input-files')\nexport default class InputFiles extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'upload';\n\n  @property({ type: String })\n  accept!: string;\n\n  @property({ type: Boolean })\n  multiple!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  over!: boolean;\n\n  @property({ type: String })\n  heading: string = 'Drag & Drop Files';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: String, reflect: true })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n  noDragDrop!: boolean;\n\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize!: number;\n\n  @property({ type: String, attribute: 'button-label' })\n  buttonLabel: string = 'Browse Files';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  fileInputElement!: HTMLInputElement;\n\n  @state()\n  upload!: HTMLElement;\n\n  firstUpdated() {\n    this.fileInputElement = this.shadowRoot?.querySelector('[type=\"file\"]') as HTMLInputElement;\n    this.upload = this.shadowRoot?.querySelector('.upload') as HTMLElement;\n\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, event => preventDefaults(event), false);\n    });\n\n    ['dragenter', 'dragover'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, () => { this.over = true; }, false);\n    });\n\n    ['dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n    });\n\n    this.isMobile();\n    this.hasDragDrop();\n\n    window.addEventListener('resize', () => { this.isMobile(); });\n    this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n\n    emitEvent(this, 'kemet-input-files-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <div class=\"upload\" part=\"upload\">\n        <kemet-icon name=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n        <input\n          type=\"file\"\n          id=${this.slug}\n          ?multiple=${this.multiple}\n          accept=${ifDefined(this.accept) ? this.accept : null}\n          @change=${(event: Event) => this.handleChange(event)}\n        />\n        <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n        <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n      </div>\n      <div class=\"files\" part=\"files\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: event?.dataTransfer?.files || [],\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  hasDragDrop() {\n    this.noDragDrop = !('draggable' in document.createElement('span'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-files': InputFiles\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-color: inherit;\n  --kemet-upload-height: 364px;\n  --kemet-upload-border: 0;\n  --kemet-upload-background-color: transparent;\n\n  color: var(--kemet-upload-color);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  height: var(--kemet-upload-height);\n  border: var(--kemet-upload-border);\n  background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n  display: flex;\n  gap: 2rem;\n  flex-direction: column;\n  height: auto;\n}\n\ninput {\n  display: none;\n}\n\n.button {\n  cursor: pointer;\n  font-size: 1rem;\n  display: block;\n  color: inherit;\n  padding: 0.5rem 1rem;\n  border: 1px solid;\n  background-color: transparent;\n}\n\n.upload {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--kemet-upload-margin);\n  flex-direction: column;\n  border: 2px dashed;\n}\n\n:host([over]) .upload {\n  background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n  height: 280px;\n}\n\n.files {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  padding: 0 1rem;\n  overflow: auto;\n}\n\n:host([mobile]) .files {\n  padding: 0;\n}\n\n.heading {\n  font-size: 1.25rem;\n  margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n  display: none;\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/input-files/styles.css.js

@@ -1,9 +1,9 @@
 // src/elements/input-files/styles.css.ts
 import { css } from "lit";
 var styles_css_default = css`:host {
-  --kemet-upload-color: var(--kemet-color-font-base);
+  --kemet-upload-color: inherit;
   --kemet-upload-height: 364px;
-  --kemet-upload-border: 1rem solid transparent;
+  --kemet-upload-border: 0;
   --kemet-upload-background-color: transparent;
 
   color: var(--kemet-upload-color);

package/dist/elements/input-files/styles.css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-color: var(--kemet-color-font-base);\n  --kemet-upload-height: 364px;\n  --kemet-upload-border: 1rem solid transparent;\n  --kemet-upload-background-color: transparent;\n\n  color: var(--kemet-upload-color);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  height: var(--kemet-upload-height);\n  border: var(--kemet-upload-border);\n  background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n  display: flex;\n  gap: 2rem;\n  flex-direction: column;\n  height: auto;\n}\n\ninput {\n  display: none;\n}\n\n.button {\n  cursor: pointer;\n  font-size: 1rem;\n  display: block;\n  color: inherit;\n  padding: 0.5rem 1rem;\n  border: 1px solid;\n  background-color: transparent;\n}\n\n.upload {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--kemet-upload-margin);\n  flex-direction: column;\n  border: 2px dashed;\n}\n\n:host([over]) .upload {\n  background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n  height: 280px;\n}\n\n.files {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  padding: 0 1rem;\n  overflow: auto;\n}\n\n:host([mobile]) .files {\n  padding: 0;\n}\n\n.heading {\n  font-size: 1.25rem;\n  margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n  display: none;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-color: inherit;\n  --kemet-upload-height: 364px;\n  --kemet-upload-border: 0;\n  --kemet-upload-background-color: transparent;\n\n  color: var(--kemet-upload-color);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  height: var(--kemet-upload-height);\n  border: var(--kemet-upload-border);\n  background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n  display: flex;\n  gap: 2rem;\n  flex-direction: column;\n  height: auto;\n}\n\ninput {\n  display: none;\n}\n\n.button {\n  cursor: pointer;\n  font-size: 1rem;\n  display: block;\n  color: inherit;\n  padding: 0.5rem 1rem;\n  border: 1px solid;\n  background-color: transparent;\n}\n\n.upload {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--kemet-upload-margin);\n  flex-direction: column;\n  border: 2px dashed;\n}\n\n:host([over]) .upload {\n  background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n  height: 280px;\n}\n\n.files {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  padding: 0 1rem;\n  overflow: auto;\n}\n\n:host([mobile]) .files {\n  padding: 0;\n}\n\n.heading {\n  font-size: 1.25rem;\n  margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n  display: none;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/input-otp/index.d.ts

@@ -8,6 +8,7 @@ import { LitElement } from 'lit';
  *
  * @tagname kemet-input-otp
  * @summary An input element that accepts multiple items from a combo.
+ * @ssrsafe yes
  *
  * @prop {number} digits - The number of inputs.
  * @prop {string} pattern - The pattern to match against for stripping characters

package/dist/elements/input-otp/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/input-otp/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property, queryAll, state } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/utilities/events.ts
 var emitEvent = (element, name, detail, bubbles = true, composed = true) => {

package/dist/elements/input-otp/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input-otp/index.ts","../../../src/utilities/events.ts","../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, queryAll, state } from 'lit/decorators.js';\nimport { EnumKeyCodes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-input-otp\n * @summary An input element that accepts multiple items from a combo.\n *\n * @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n *\n * @csspart input - The input elements.\n *\n * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n *\n * @event kemet-input-otp-completed - Fires when otp is filled out completely\n * @event kemet-input-otp-mounted - Fires when the component is mounted\n *\n */\n\n@customElement('kemet-input-otp')\nexport default class KemetInputOtp extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  digits: number = 6;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property()\n  pattern!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  autoFocus: boolean = true;\n\n  @state()\n  values: string[] = [];\n\n  @state()\n  lastInput!: string;\n\n  @state()\n  completed: boolean = false;\n\n  @queryAll('input')\n  inputElements!: NodeListOf<HTMLInputElement>;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-otp-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineCompleted();\n  }\n\n  render() {\n    return this.makeInputs();\n  }\n\n  determineCompleted() {\n    const hasBlankValues = this.values.includes('');\n    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n      emitEvent(this, 'kemet-input-otp-completed', {\n        detail: { value: this.value, element: this },\n        bubbles: true,\n        composed: true,\n      });\n      this.completed = true;\n    }\n  }\n\n  makeInputs() {\n    return Array.from(\n      { length: this.digits },\n      (_, index) => html`\n        <label>\n          <span>Enter digit ${index + 1}</span>\n          <input\n            part=\"input\"\n            id=\"${index}\"\n            maxlength=\"1\"\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @paste=${this.handlePaste}\n          />\n        </label>\n      `\n    );\n  }\n\n  eatCharacters(inputValue: string) {\n    const regex = new RegExp(this.pattern);\n    return inputValue.replace(regex, '');\n  }\n\n  handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const currentIndex = parseInt(input.getAttribute('id') ?? '0');\n    const nextInput = this.inputElements[currentIndex + 1];\n\n    if (this.pattern) {\n      input.value = this.eatCharacters(input.value);\n    }\n\n    this.values[currentIndex] = input.value;\n    this.value = this.values.join('');\n    this.lastInput = input.value;\n\n    const fullDigits = this.values.length === this.digits && !!input.value;\n\n    if (!fullDigits) {\n      this.completed = false;\n    }\n\n    if (nextInput && this.autoFocus && !!input.value) {\n      nextInput.focus();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n    const pasteData = event.clipboardData?.getData('text') ?? '';\n\n    // Trim and limit to number of digits\n    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n    const charactersArray = charactersString.split('');\n\n    // Fill the inputs and values array one by one\n    charactersArray.forEach((character, index) => {\n      const input = this.inputElements[index];\n      if (input && !!character) {\n        input.value = character;\n        this.values[index] = character;\n      }\n    });\n\n    const lastFilled = this.inputElements[charactersArray.length - 1];\n    lastFilled?.focus();\n    this.value = this.values.join('');\n    this.determineCompleted();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-otp': KemetInputOtp\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-otp-input-font-color: var(--kemet-color-font-base);\n  --kemet-otp-input-min-width: 3rem;\n  --kemet-otp-input-font-size: 2rem;\n  --kemet-otp-input-border: 1px solid;\n  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n  display: flex;\n  aspect-ratio: 4/3;\n}\n\nspan {\n  position: absolute;\n  margin: -1px;\n  width: 1px;\n  height: 1px;\n  display: block;\n  overflow: hidden;\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n[part=\"input\"] {\n  color: var(--kemet-otp-input-font-color);\n  text-align: center;\n  width: 100%;\n  height: 100%;\n  font-size: var(--kemet-otp-input-font-size);\n  border: var(--kemet-otp-input-border);\n  border-radius: var(--kemet-otp-input-border-radius);\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/input-otp/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, queryAll, state } from '../../utilities/decorators';\nimport { EnumKeyCodes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-input-otp\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\n *\n * @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n *\n * @csspart input - The input elements.\n *\n * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n *\n * @event kemet-input-otp-completed - Fires when otp is filled out completely\n * @event kemet-input-otp-mounted - Fires when the component is mounted\n *\n */\n\n@customElement('kemet-input-otp')\nexport default class KemetInputOtp extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  digits: number = 6;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property()\n  pattern!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  autoFocus: boolean = true;\n\n  @state()\n  values: string[] = [];\n\n  @state()\n  lastInput!: string;\n\n  @state()\n  completed: boolean = false;\n\n  @queryAll('input')\n  inputElements!: NodeListOf<HTMLInputElement>;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-otp-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineCompleted();\n  }\n\n  render() {\n    return this.makeInputs();\n  }\n\n  determineCompleted() {\n    const hasBlankValues = this.values.includes('');\n    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n      emitEvent(this, 'kemet-input-otp-completed', {\n        detail: { value: this.value, element: this },\n        bubbles: true,\n        composed: true,\n      });\n      this.completed = true;\n    }\n  }\n\n  makeInputs() {\n    return Array.from(\n      { length: this.digits },\n      (_, index) => html`\n        <label>\n          <span>Enter digit ${index + 1}</span>\n          <input\n            part=\"input\"\n            id=\"${index}\"\n            maxlength=\"1\"\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @paste=${this.handlePaste}\n          />\n        </label>\n      `\n    );\n  }\n\n  eatCharacters(inputValue: string) {\n    const regex = new RegExp(this.pattern);\n    return inputValue.replace(regex, '');\n  }\n\n  handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const currentIndex = parseInt(input.getAttribute('id') ?? '0');\n    const nextInput = this.inputElements[currentIndex + 1];\n\n    if (this.pattern) {\n      input.value = this.eatCharacters(input.value);\n    }\n\n    this.values[currentIndex] = input.value;\n    this.value = this.values.join('');\n    this.lastInput = input.value;\n\n    const fullDigits = this.values.length === this.digits && !!input.value;\n\n    if (!fullDigits) {\n      this.completed = false;\n    }\n\n    if (nextInput && this.autoFocus && !!input.value) {\n      nextInput.focus();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n    const pasteData = event.clipboardData?.getData('text') ?? '';\n\n    // Trim and limit to number of digits\n    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n    const charactersArray = charactersString.split('');\n\n    // Fill the inputs and values array one by one\n    charactersArray.forEach((character, index) => {\n      const input = this.inputElements[index];\n      if (input && !!character) {\n        input.value = character;\n        this.values[index] = character;\n      }\n    });\n\n    const lastFilled = this.inputElements[charactersArray.length - 1];\n    lastFilled?.focus();\n    this.value = this.values.join('');\n    this.determineCompleted();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-otp': KemetInputOtp\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-otp-input-font-color: var(--kemet-color-font-base);\n  --kemet-otp-input-min-width: 3rem;\n  --kemet-otp-input-font-size: 2rem;\n  --kemet-otp-input-border: 1px solid;\n  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n  display: flex;\n  aspect-ratio: 4/3;\n}\n\nspan {\n  position: absolute;\n  margin: -1px;\n  width: 1px;\n  height: 1px;\n  display: block;\n  overflow: hidden;\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n[part=\"input\"] {\n  color: var(--kemet-otp-input-font-color);\n  text-align: center;\n  width: 100%;\n  height: 100%;\n  font-size: var(--kemet-otp-input-font-size);\n  border: var(--kemet-otp-input-border);\n  border-radius: var(--kemet-otp-input-border-radius);\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/loader/index.d.ts

@@ -21,6 +21,7 @@ declare enum EnumVariants {
  *
  * @prop {string} variant - The style of loader to display
  * @prop {number} size - How large to make the loader.
+ * @ssrsafe yes
  *
  * @csspart loader - The main loader container
  *

package/dist/elements/loader/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/loader/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/elements/loader/styles.css.ts
 import { css } from "lit";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/loader/index.ts","../../../src/elements/loader/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumVariants {\n  NO_BORDER = 'no-border',\n  BORDER_TOP = 'border-top',\n  DOUBLE_BORDER = 'double-border',\n  DOUBLE_SPINNERS = 'double-spinners',\n  THREE_DOTS = 'three-dots',\n  FULL_CIRCLE = 'full-circle',\n  SPINNER = 'spinner',\n  MESH = 'mesh',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-loader\n * @summary Displays animations for a loading state.\n *\n * @prop {string} variant - The style of loader to display\n * @prop {number} size - How large to make the loader.\n *\n * @csspart loader - The main loader container\n *\n * @cssproperty --kemet-loader-color - The color of the loader.\n * @cssproperty --kemet-loader-thickness - The thickness of the loader.\n * @cssproperty --kemet-loader-dot-size - The size of the dots in the loader.\n * @cssproperty --kemet-loader-size - The size of the loader.\n *\n * @fires kemet-loader-mounted - Fired when the loader is mounted to the DOM\n * @detail {HTMLElement} element - The loader element\n */\n@customElement('kemet-loader')\nexport class KemetLoader extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  variant: EnumVariants = EnumVariants.NO_BORDER;\n\n  @property({ type: Number })\n  size: number = 48;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-loader-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n  }\n\n  render() {\n    if (\n      this.variant === EnumVariants.THREE_DOTS ||\n      this.variant === EnumVariants.FULL_CIRCLE ||\n      this.variant === EnumVariants.MESH\n    ) {\n      this.style.setProperty('--kemet-loader-dot-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    if (this.variant === EnumVariants.SPINNER) {\n      this.style.setProperty('--kemet-loader-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    return html`\n      <div style=\"width: ${this.size}px; height: ${this.size}px;\" part=\"loader\">\n        ${this.makeLoader()}\n      </div>\n    `;\n  }\n\n  makeLoader() {\n    switch (this.variant) {\n      case EnumVariants.NO_BORDER:\n        return html`\n          <div class=\"nb-spinner\"></div>\n        `;\n      case EnumVariants.BORDER_TOP:\n        return html`\n          <div class=\"bt-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_BORDER:\n        return html`\n          <div class=\"db-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_SPINNERS:\n        return html`\n          <div class=\"dbl-spinner\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n          <div class=\"dbl-spinner dbl-spinner--2\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n        `;\n      case EnumVariants.THREE_DOTS:\n        return html`\n          <div class=\"dot-loader\"></div>\n          <div class=\"dot-loader dot-loader--2\"></div>\n          <div class=\"dot-loader dot-loader--3\"></div>\n        `;\n      case EnumVariants.FULL_CIRCLE:\n        return html`\n          <div class=\"circle-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.SPINNER:\n        return html`\n          <div class=\"ml-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.MESH:\n        return html`\n          <div class=\"mesh-loader\">\n            <div class=\"set-one\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n            <div class=\"set-two\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n          </div>\n        `;\n    }\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-loader-color: var(--kemet-color-brand-primary-base);\n  --kemet-loader-thickness: 4px;\n  --kemet-loader-dot-size: 24px;\n  --kemet-loader-size: 48px;\n\n  /* private variables */\n  --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) * 0.5);\n  --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);\n  --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);\n  --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);\n  --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n:host([variant=three-dots]) > div {\n  display: inline-flex;\n  gap: var(--_kemet-loader-three-dot-gap);\n  align-items: center;\n  justify-content: center;\n}\n\n/* NO BORDER SPINNER */\n.nb-spinner {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  background: transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-right: var(--kemet-loader-thickness) solid transparent;\n  border-radius: 50%;\n  animation: 1s spin linear infinite;\n}\n\n/* BORDER TOP SPINNER */\n.bt-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid;\n  border-top-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE BORDER SPINNER */\n.db-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid #222;\n  border-top-color: var(--kemet-loader-color);\n  border-bottom-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE SPINNER */\n.double-spinner {\n  position: relative;\n}\n\n.dbl-spinner {\n  position: absolute;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-left: var(--kemet-loader-thickness) solid;\n  animation: 2s spin linear infinite;\n}\n\n.dbl-spinner--2 {\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n\n/* 3 DOT LOADER */\n.dot-loader {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  border-radius: 50%;\n  background-color: var(--kemet-loader-color);\n  position: relative;\n  animation: 1.2s grow ease-in-out infinite;\n}\n\n.dot-loader--2 {\n  animation: 1.2s grow ease-in-out infinite 0.15555s;\n}\n\n.dot-loader--3 {\n  animation: 1.2s grow ease-in-out infinite 0.3s;\n}\n\n\n/* CIRCLE DOT LOADER */\n.circle-loader {\n  position: relative;\n  display: flex;\n  align-self: center;\n  justify-self: center;\n  width: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n  height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n}\n\n.circle-loader div {\n  height: var(--kemet-loader-dot-size);\n  width: var(--kemet-loader-dot-size);\n  background-color: var(--kemet-loader-color);\n  border-radius: 50%;\n  position: absolute;\n  animation: 0.8s opaque ease-in-out infinite both;\n  transform: translate(-50%, -50%);\n}\n\n.circle-loader > div:nth-child(1) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  left: 50%;\n}\n\n.circle-loader > div:nth-child(2) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.1s;\n}\n\n.circle-loader > div:nth-child(3) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius));\n  animation-delay: 0.2s;\n}\n\n.circle-loader > div:nth-child(4) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.3s;\n}\n\n.circle-loader > div:nth-child(5) {\n  top: calc(50% + var(--_kemet-loader-circle-radius));\n  left: 50%;\n  animation-delay: 0.4s;\n}\n\n.circle-loader > div:nth-child(6) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.5s;\n}\n\n.circle-loader > div:nth-child(7) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  animation-delay: 0.6s;\n}\n\n.circle-loader > div:nth-child(8) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.7s;\n}\n\n\n/* MESH LOADER */\n.mesh-loader {\n  overflow: hidden;\n  height: inherit;\n  width: inherit;\n}\n\n.mesh-loader .circle {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  position: absolute;\n  background: var(--kemet-loader-color);\n  border-radius: 50%;\n  margin: calc(var(--kemet-loader-dot-size) / -2);\n  animation: mesh 3s ease-in-out infinite -1.5s;\n}\n\n.mesh-loader > div .circle:last-child {\n  animation-delay: 0s;\n}\n\n.mesh-loader > div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.mesh-loader > div:last-child {\n  transform: rotate(90deg);\n}\n\n\n/* SPINNER 13 */\n.ml-loader {\n  position: relative;\n  width: calc(var(--_kemet-loader-spinner-radius) * 2);\n  height: calc(var(--_kemet-loader-spinner-radius) * 2);\n}\n\n.ml-loader div {\n  transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);\n  animation: 1.2s opaque ease-in-out infinite both;\n}\n\n.ml-loader div::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);\n  width: var(--_kemet-loader-spinner-bar-width);\n  height: var(--_kemet-loader-spinner-bar-height);\n  border-radius: 10px;\n  background-color: var(--kemet-loader-color);\n}\n\n.ml-loader div:nth-child(1) {\n  transform: rotate(0);\n}\n\n.ml-loader div:nth-child(2) {\n  transform: rotate(30deg);\n  animation-delay: 0.1s;\n}\n\n.ml-loader div:nth-child(3) {\n  transform: rotate(60deg);\n  animation-delay: 0.2s;\n}\n\n.ml-loader div:nth-child(4) {\n  transform: rotate(90deg);\n  animation-delay: 0.3s;\n}\n\n.ml-loader div:nth-child(5) {\n  transform: rotate(120deg);\n  animation-delay: 0.4s;\n}\n\n.ml-loader div:nth-child(6) {\n  transform: rotate(150deg);\n  animation-delay: 0.5s;\n}\n\n.ml-loader div:nth-child(7) {\n  transform: rotate(180deg);\n  animation-delay: 0.6s;\n}\n\n.ml-loader div:nth-child(8) {\n  transform: rotate(210deg);\n  animation-delay: 0.7s;\n}\n\n.ml-loader div:nth-child(9) {\n  transform: rotate(240deg);\n  animation-delay: 0.8s;\n}\n\n.ml-loader div:nth-child(10) {\n  transform: rotate(270deg);\n  animation-delay: 0.9s;\n}\n\n.ml-loader div:nth-child(11) {\n  transform: rotate(300deg);\n  animation-delay: 1s;\n}\n\n.ml-loader div:nth-child(12) {\n  transform: rotate(330deg);\n  animation-delay: 1.1s;\n}\n\n.ml-loader div:nth-child(13) {\n  transform: rotate(360deg);\n  animation-delay: 1.2s;\n}\n\n\n\n@keyframes rotate {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinBack {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(-720deg);\n    transform: rotate(-720deg);\n  }\n}\n\n@keyframes spinBorder {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n    border-width: 15px;\n  }\n  50% {\n    -webkit-transform: rotate(180deg);\n    transform: rotate(180deg);\n    border-width: 3px;\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n    border-width: 15px;\n  }\n}\n\n@keyframes grow {\n  0%, 40%, 100% {\n    -webkit-transform: scale(0);\n            transform: scale(0);\n  }\n  40% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  5% {\n    -webkit-transform: rotate(45deg) scale(0.9);\n    transform: rotate(45deg) scale(0.9);\n  }\n  10% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  15% {\n    -webkit-transform: rotate(45deg) scale(1);\n    transform: rotate(45deg) scale(1);\n  }\n  50% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  100% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0.1;\n  }\n  40% {\n    opacity: 1;\n  }\n  80% {\n    opacity: 0.1;\n  }\n  100% {\n    opacity: 0.1;\n  }\n}\n\n@keyframes mesh {\n  0% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(0);\n    transform: rotate(0);\n  }\n  50% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n  50.1% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\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":["EnumVariants"]}
+{"version":3,"sources":["../../../src/elements/loader/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/loader/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumVariants {\n  NO_BORDER = 'no-border',\n  BORDER_TOP = 'border-top',\n  DOUBLE_BORDER = 'double-border',\n  DOUBLE_SPINNERS = 'double-spinners',\n  THREE_DOTS = 'three-dots',\n  FULL_CIRCLE = 'full-circle',\n  SPINNER = 'spinner',\n  MESH = 'mesh',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-loader\n * @summary Displays animations for a loading state.\n *\n * @prop {string} variant - The style of loader to display\n * @prop {number} size - How large to make the loader.\n * @ssrsafe yes\n *\n * @csspart loader - The main loader container\n *\n * @cssproperty --kemet-loader-color - The color of the loader.\n * @cssproperty --kemet-loader-thickness - The thickness of the loader.\n * @cssproperty --kemet-loader-dot-size - The size of the dots in the loader.\n * @cssproperty --kemet-loader-size - The size of the loader.\n *\n * @fires kemet-loader-mounted - Fired when the loader is mounted to the DOM\n * @detail {HTMLElement} element - The loader element\n */\n@customElement('kemet-loader')\nexport class KemetLoader extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  variant: EnumVariants = EnumVariants.NO_BORDER;\n\n  @property({ type: Number })\n  size: number = 48;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-loader-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n  }\n\n  render() {\n    if (\n      this.variant === EnumVariants.THREE_DOTS ||\n      this.variant === EnumVariants.FULL_CIRCLE ||\n      this.variant === EnumVariants.MESH\n    ) {\n      this.style.setProperty('--kemet-loader-dot-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    if (this.variant === EnumVariants.SPINNER) {\n      this.style.setProperty('--kemet-loader-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    return html`\n      <div style=\"width: ${this.size}px; height: ${this.size}px;\" part=\"loader\">\n        ${this.makeLoader()}\n      </div>\n    `;\n  }\n\n  makeLoader() {\n    switch (this.variant) {\n      case EnumVariants.NO_BORDER:\n        return html`\n          <div class=\"nb-spinner\"></div>\n        `;\n      case EnumVariants.BORDER_TOP:\n        return html`\n          <div class=\"bt-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_BORDER:\n        return html`\n          <div class=\"db-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_SPINNERS:\n        return html`\n          <div class=\"dbl-spinner\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n          <div class=\"dbl-spinner dbl-spinner--2\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n        `;\n      case EnumVariants.THREE_DOTS:\n        return html`\n          <div class=\"dot-loader\"></div>\n          <div class=\"dot-loader dot-loader--2\"></div>\n          <div class=\"dot-loader dot-loader--3\"></div>\n        `;\n      case EnumVariants.FULL_CIRCLE:\n        return html`\n          <div class=\"circle-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.SPINNER:\n        return html`\n          <div class=\"ml-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.MESH:\n        return html`\n          <div class=\"mesh-loader\">\n            <div class=\"set-one\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n            <div class=\"set-two\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n          </div>\n        `;\n    }\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-loader-color: var(--kemet-color-brand-primary-base);\n  --kemet-loader-thickness: 4px;\n  --kemet-loader-dot-size: 24px;\n  --kemet-loader-size: 48px;\n\n  /* private variables */\n  --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) * 0.5);\n  --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);\n  --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);\n  --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);\n  --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n:host([variant=three-dots]) > div {\n  display: inline-flex;\n  gap: var(--_kemet-loader-three-dot-gap);\n  align-items: center;\n  justify-content: center;\n}\n\n/* NO BORDER SPINNER */\n.nb-spinner {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  background: transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-right: var(--kemet-loader-thickness) solid transparent;\n  border-radius: 50%;\n  animation: 1s spin linear infinite;\n}\n\n/* BORDER TOP SPINNER */\n.bt-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid;\n  border-top-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE BORDER SPINNER */\n.db-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid #222;\n  border-top-color: var(--kemet-loader-color);\n  border-bottom-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE SPINNER */\n.double-spinner {\n  position: relative;\n}\n\n.dbl-spinner {\n  position: absolute;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-left: var(--kemet-loader-thickness) solid;\n  animation: 2s spin linear infinite;\n}\n\n.dbl-spinner--2 {\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n\n/* 3 DOT LOADER */\n.dot-loader {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  border-radius: 50%;\n  background-color: var(--kemet-loader-color);\n  position: relative;\n  animation: 1.2s grow ease-in-out infinite;\n}\n\n.dot-loader--2 {\n  animation: 1.2s grow ease-in-out infinite 0.15555s;\n}\n\n.dot-loader--3 {\n  animation: 1.2s grow ease-in-out infinite 0.3s;\n}\n\n\n/* CIRCLE DOT LOADER */\n.circle-loader {\n  position: relative;\n  display: flex;\n  align-self: center;\n  justify-self: center;\n  width: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n  height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n}\n\n.circle-loader div {\n  height: var(--kemet-loader-dot-size);\n  width: var(--kemet-loader-dot-size);\n  background-color: var(--kemet-loader-color);\n  border-radius: 50%;\n  position: absolute;\n  animation: 0.8s opaque ease-in-out infinite both;\n  transform: translate(-50%, -50%);\n}\n\n.circle-loader > div:nth-child(1) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  left: 50%;\n}\n\n.circle-loader > div:nth-child(2) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.1s;\n}\n\n.circle-loader > div:nth-child(3) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius));\n  animation-delay: 0.2s;\n}\n\n.circle-loader > div:nth-child(4) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.3s;\n}\n\n.circle-loader > div:nth-child(5) {\n  top: calc(50% + var(--_kemet-loader-circle-radius));\n  left: 50%;\n  animation-delay: 0.4s;\n}\n\n.circle-loader > div:nth-child(6) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.5s;\n}\n\n.circle-loader > div:nth-child(7) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  animation-delay: 0.6s;\n}\n\n.circle-loader > div:nth-child(8) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.7s;\n}\n\n\n/* MESH LOADER */\n.mesh-loader {\n  overflow: hidden;\n  height: inherit;\n  width: inherit;\n}\n\n.mesh-loader .circle {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  position: absolute;\n  background: var(--kemet-loader-color);\n  border-radius: 50%;\n  margin: calc(var(--kemet-loader-dot-size) / -2);\n  animation: mesh 3s ease-in-out infinite -1.5s;\n}\n\n.mesh-loader > div .circle:last-child {\n  animation-delay: 0s;\n}\n\n.mesh-loader > div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.mesh-loader > div:last-child {\n  transform: rotate(90deg);\n}\n\n\n/* SPINNER 13 */\n.ml-loader {\n  position: relative;\n  width: calc(var(--_kemet-loader-spinner-radius) * 2);\n  height: calc(var(--_kemet-loader-spinner-radius) * 2);\n}\n\n.ml-loader div {\n  transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);\n  animation: 1.2s opaque ease-in-out infinite both;\n}\n\n.ml-loader div::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);\n  width: var(--_kemet-loader-spinner-bar-width);\n  height: var(--_kemet-loader-spinner-bar-height);\n  border-radius: 10px;\n  background-color: var(--kemet-loader-color);\n}\n\n.ml-loader div:nth-child(1) {\n  transform: rotate(0);\n}\n\n.ml-loader div:nth-child(2) {\n  transform: rotate(30deg);\n  animation-delay: 0.1s;\n}\n\n.ml-loader div:nth-child(3) {\n  transform: rotate(60deg);\n  animation-delay: 0.2s;\n}\n\n.ml-loader div:nth-child(4) {\n  transform: rotate(90deg);\n  animation-delay: 0.3s;\n}\n\n.ml-loader div:nth-child(5) {\n  transform: rotate(120deg);\n  animation-delay: 0.4s;\n}\n\n.ml-loader div:nth-child(6) {\n  transform: rotate(150deg);\n  animation-delay: 0.5s;\n}\n\n.ml-loader div:nth-child(7) {\n  transform: rotate(180deg);\n  animation-delay: 0.6s;\n}\n\n.ml-loader div:nth-child(8) {\n  transform: rotate(210deg);\n  animation-delay: 0.7s;\n}\n\n.ml-loader div:nth-child(9) {\n  transform: rotate(240deg);\n  animation-delay: 0.8s;\n}\n\n.ml-loader div:nth-child(10) {\n  transform: rotate(270deg);\n  animation-delay: 0.9s;\n}\n\n.ml-loader div:nth-child(11) {\n  transform: rotate(300deg);\n  animation-delay: 1s;\n}\n\n.ml-loader div:nth-child(12) {\n  transform: rotate(330deg);\n  animation-delay: 1.1s;\n}\n\n.ml-loader div:nth-child(13) {\n  transform: rotate(360deg);\n  animation-delay: 1.2s;\n}\n\n\n\n@keyframes rotate {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinBack {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(-720deg);\n    transform: rotate(-720deg);\n  }\n}\n\n@keyframes spinBorder {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n    border-width: 15px;\n  }\n  50% {\n    -webkit-transform: rotate(180deg);\n    transform: rotate(180deg);\n    border-width: 3px;\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n    border-width: 15px;\n  }\n}\n\n@keyframes grow {\n  0%, 40%, 100% {\n    -webkit-transform: scale(0);\n            transform: scale(0);\n  }\n  40% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  5% {\n    -webkit-transform: rotate(45deg) scale(0.9);\n    transform: rotate(45deg) scale(0.9);\n  }\n  10% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  15% {\n    -webkit-transform: rotate(45deg) scale(1);\n    transform: rotate(45deg) scale(1);\n  }\n  50% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  100% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0.1;\n  }\n  40% {\n    opacity: 1;\n  }\n  80% {\n    opacity: 0.1;\n  }\n  100% {\n    opacity: 0.1;\n  }\n}\n\n@keyframes mesh {\n  0% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(0);\n    transform: rotate(0);\n  }\n  50% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n  50.1% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\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":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHCO,IAAK,eAAL,kBAAKA,kBAAL;AACL,EAAAA,cAAA,eAAY;AACZ,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,mBAAgB;AAChB,EAAAA,cAAA,qBAAkB;AAClB,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,iBAAc;AACd,EAAAA,cAAA,aAAU;AACV,EAAAA,cAAA,UAAO;AARG,SAAAA;AAAA,GAAA;AAiCL,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC;AAAA;AAIL,mBAAwB;AAGxB,gBAAe;AAAA;AAAA,EAEf,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,QACE,KAAK,YAAY,iCACjB,KAAK,YAAY,mCACjB,KAAK,YAAY,mBACjB;AACA,WAAK,MAAM,YAAY,2BAA2B,GAAG,KAAK,IAAI,IAAI;AAClE,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,QAAI,KAAK,YAAY,yBAAsB;AACzC,WAAK,MAAM,YAAY,uBAAuB,GAAG,KAAK,IAAI,IAAI;AAC9D,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,WAAO;AAAA,2BACgB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,UAClD,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,EAGzB;AAAA,EAEA,aAAa;AACX,YAAQ,KAAK,SAAS;AAAA,MACpB,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA,mDACoC,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,kEAClB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA;AAAA,MAE7F,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYX;AAAA,EACF;AACF;AAvHa,YACJ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAH9B,YAIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANf,YAOX;AAPW,cAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":["EnumVariants"]}