kemet-ui 5.0.0 → 5.0.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/tracker/index.ts","../../../src/elements/tracker/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type KemetTrackerStep from '../tracker-step';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @prop {number} total - The total number of steps\n * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\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-tracker-mounted - Fired when the tracker is mounted to the DOM\n * @detail {HTMLElement} element - The tracker element\n *\n */\n\n@customElement('kemet-tracker')\nexport default class KemetTracker extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  total!: number;\n\n  @property({ type: String })\n  breakpoint!: 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  steps!: NodeListOf<KemetTrackerStep>;\n\n  constructor() {\n    super();\n    this.breakpoint = '767px';\n  }\n\n  firstUpdated() {\n    // elements\n    this.steps = this.querySelectorAll('kemet-tracker-step');\n\n    // methods exe\n    this.isMobile();\n\n    // events\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    emitEvent(this, 'kemet-tracker-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`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    this.total = this.steps.length;\n\n    this.steps.forEach((step, index) => {\n      step.step = index + 1;\n      if (step.step === this.total) {\n        step.last = true;\n      }\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n\n    this.steps.forEach((step) => {\n      step.mobile = mediaQuery.matches;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker': KemetTracker\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  width: 100%;\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;AAC5C,SAAS,eAAe,UAAU,aAAa;;;ACD/C,SAAS,WAAW;AAEpB,IAAO,qBAAQ;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;;;AFkBA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAkBnD,cAAc;AACZ,UAAM;AANR,eAAc;AAOZ,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,eAAe;AAEb,SAAK,QAAQ,KAAK,iBAAiB,oBAAoB;AAGvD,SAAK,SAAS;AAGd,WAAO,iBAAiB,UAAU,MAAM;AACtC,WAAK,SAAS;AAAA,IAChB,CAAC;AAED,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO,yBAAyB,MAAM,KAAK,iBAAiB,CAAC;AAAA,EAC/D;AAAA,EAEA,mBAAmB;AACjB,SAAK,QAAQ,KAAK,MAAM;AAExB,SAAK,MAAM,QAAQ,CAAC,MAAM,UAAU;AAClC,WAAK,OAAO,QAAQ;AACpB,UAAI,KAAK,SAAS,KAAK,OAAO;AAC5B,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,WAAW;AACT,UAAM,aAAa,OAAO,WAAW,eAAe,KAAK,UAAU,GAAG;AAEtE,SAAK,MAAM,QAAQ,CAAC,SAAS;AAC3B,WAAK,SAAS,WAAW;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;AAnEqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,aAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,aAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,aAanB;AAGA;AAAA,EADC,MAAM;AAAA,GAfY,aAgBnB;AAhBmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}
+{"version":3,"sources":["../../../src/elements/tracker/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/tracker/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport type KemetTrackerStep from '../tracker-step';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-tracker\n * @summary A tracker for a multi step process\n * @ssrsafe yes\n *\n * @prop {number} total - The total number of steps\n * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\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-tracker-mounted - Fired when the tracker is mounted to the DOM\n * @detail {HTMLElement} element - The tracker element\n *\n */\n\n@customElement('kemet-tracker')\nexport default class KemetTracker extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  total?: number;\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  steps!: NodeListOf<KemetTrackerStep>;\n\n  firstUpdated() {\n    this.initializeSteps();\n    emitEvent(this, 'kemet-tracker-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`<slot @slotchange=${() => this.initializeSteps()}></slot>`;\n  }\n\n  initializeSteps() {\n    this.steps = this.querySelectorAll('kemet-tracker-step');\n    this.total = this.steps.length;\n\n    this.steps.forEach((step, index) => {\n      step.step = index + 1;\n      if (step.step === this.total) {\n        step.last = true;\n      }\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker': KemetTracker\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  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  width: 100%;\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,kBAAkB;;;ACAjC,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;;;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;;;AHsBA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAUE,eAAc;AAAA;AAAA,EAKd,eAAe;AACb,SAAK,gBAAgB;AACrB,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO,yBAAyB,MAAM,KAAK,gBAAgB,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AAChB,SAAK,QAAQ,KAAK,iBAAiB,oBAAoB;AACvD,SAAK,QAAQ,KAAK,MAAM;AAExB,SAAK,MAAM,QAAQ,CAAC,MAAM,UAAU;AAClC,WAAK,OAAO,QAAQ;AACpB,UAAI,KAAK,SAAS,KAAK,OAAO;AAC5B,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH;AACF;AA1CqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,aAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,aAanB;AAbmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/elements/tracker-step/index.d.ts

@@ -1,4 +1,3 @@
 import 'lit-html';
 import 'lit';
-export { a as default } from '../../index-h1DTXXCf.js';
-import '../icon/index.js';
+export { a as default } from '../../index-n43o0UmE.js';

package/dist/elements/tracker-step/index.js

@@ -10,8 +10,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/elements/tracker-step/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/utilities/events.ts
 var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
@@ -20,223 +24,9 @@ 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/tracker-step/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/tracker-step/styles.css.ts
-import { css as css2 } from "lit";
-var styles_css_default2 = css2`:host {
     --kemet-tracker-step-dot-size: 50px;
     --kemet-tracker-step-dot-size-mobile: 25px;
     --kemet-tracker-step-dot-gap: 4px;
@@ -357,15 +147,21 @@ var styles_css_default2 = css2`:host {
 `;
 
 // src/elements/tracker-step/index.ts
-var KemetTrackerStep = class extends LitElement2 {
+var KemetTrackerStep = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.breakpoint = "767px";
     this.completedSize = 16;
+    this.total = 0;
     this.dom = "initializing";
   }
   firstUpdated() {
-    this.tracker = this.closest("kemet-tracker");
-    emitEvent(this, "kemet-button-mounted", {
+    this.last = this.step === this.total;
+    this.isMobile();
+    window.addEventListener("resize", () => {
+      this.isMobile();
+    });
+    emitEvent(this, "kemet-tracker-step-mounted", {
       bubbles: true,
       composed: true,
       detail: {
@@ -375,7 +171,7 @@ var KemetTrackerStep = class extends LitElement2 {
     this.dom = "mounted";
   }
   render() {
-    return html2`
+    return html`
       ${this.makeLine()}
       ${this.makeCompletedLine()}
       <div class="dot" part="dot">${this.makeDotContent()}</div>
@@ -384,75 +180,85 @@ var KemetTrackerStep = class extends LitElement2 {
   }
   makeLine() {
     if (!this.last) {
-      return html2`<div class="line" part="line"></div>`;
+      return html`<div class="line" part="line"></div>`;
     }
     return null;
   }
   makeCompletedLine() {
     if (this.completed && !this.last) {
-      return html2`<div class="line completed" part="completed-line" @animationend=${() => this.handleCompletedLineEnd()}></div>`;
+      return html`<div class="line completed" part="completed-line" @animationend=${() => this.handleCompletedLineEnd()}></div>`;
     }
     return null;
   }
   makeDotContent() {
     if (this.completed && !this.mobile && !this.hideDotContent) {
-      return html2`
+      return html`
         <kemet-icon name="check2" size=${this.completedSize}></kemet-icon>
       `;
     }
     if (!this.mobile && !this.hideDotContent) {
-      return html2`
-        <span>${this.step}/${this.tracker?.total}</span>
+      return html`
+        <span>${this.step}/${this.total}</span>
       `;
     }
     return null;
   }
   makeSlotContent() {
     if (!this.mobile) {
-      return html2`<slot></slot>`;
+      return html`<slot></slot>`;
     }
     return null;
   }
   handleCompletedLineEnd() {
-    const currentDot = this.tracker?.querySelector("[current]")?.shadowRoot?.querySelector(".dot");
+    const currentDot = this.current ? this.shadowRoot?.querySelector(".dot") : null;
     if (currentDot) {
       currentDot.classList.add("animate");
     }
   }
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
 };
-KemetTrackerStep.styles = [styles_css_default2];
+KemetTrackerStep.styles = [styles_css_default];
 __decorateClass([
-  property2({ type: Number })
+  property({ type: Number })
 ], KemetTrackerStep.prototype, "step", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "completed", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "current", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "last", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: String })
+], KemetTrackerStep.prototype, "breakpoint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "mobile", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true, attribute: "hide-dot-content" })
+  property({ type: Boolean, reflect: true, attribute: "hide-dot-content" })
 ], KemetTrackerStep.prototype, "hideDotContent", 2);
 __decorateClass([
-  property2({ type: Number })
+  property({ type: Number })
 ], KemetTrackerStep.prototype, "completedSize", 2);
 __decorateClass([
-  property2({ type: String, reflect: true })
+  property({ type: Number })
+], KemetTrackerStep.prototype, "total", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
 ], KemetTrackerStep.prototype, "polarity", 2);
 __decorateClass([
-  property2({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTrackerStep.prototype, "dom", 2);
 __decorateClass([
-  state2()
+  state()
 ], KemetTrackerStep.prototype, "tracker", 2);
 KemetTrackerStep = __decorateClass([
-  customElement2("kemet-tracker-step")
+  customElement("kemet-tracker-step")
 ], KemetTrackerStep);
 export {
   KemetTrackerStep as default

package/dist/elements/tracker-step/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/tracker-step/index.ts","../../../src/utilities/events.ts","../../../src/elements/icon/index.ts","../../../src/elements/icon/styles.css.ts","../../../src/elements/tracker-step/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetTrackerElement from '../tracker';\nimport '../icon';\nimport styles from './styles.css.ts';\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-tracker-step\n * @summary A step in the Tracker\n *\n * @prop {number} step - The current step number\n * @prop {boolean} completed - Determines whether a step renders as complete\n * @prop {boolean} current - Determines whether a step renders as the current step\n * @prop {boolean} last - Is automatically added to the last step\n * @prop {boolean} mobile - Determines if a step should render as mobile\n * @prop {boolean} hideDotContent - Hides the label inside of a dot\n * @prop {number} completedSize - The icon size for the completed check mark\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 * @cssproperty --kemet-tracker-step-dot-font-size - The font size.\n * @cssproperty --kemet-tracker-step-dot-color - The text color.\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color.\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.\n *\n * @csspart dot - The container for the dot.\n * @csspart line - A connector line from dot to dot.\n * @csspart completed-line - A completed connector line.\n *\n * @fires kemet-tracker-step-mounted - Fired when the tracker step is mounted to the DOM\n * @detail {HTMLElement} element - The tracker step element\n *\n */\n\n@customElement('kemet-tracker-step')\nexport default class KemetTrackerStep extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  step!: number;\n\n  @property({ type: Boolean, reflect: true })\n  completed!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  current!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  last!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })\n  hideDotContent!: boolean;\n\n  @property({ type: Number })\n  completedSize: number = 16;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n\n  @state()\n  tracker!: HTMLKemetTrackerElement;\n\n  firstUpdated() {\n    this.tracker = this.closest('kemet-tracker') as HTMLKemetTrackerElement;\n    emitEvent(this, 'kemet-button-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      ${this.makeLine()}\n      ${this.makeCompletedLine()}\n      <div class=\"dot\" part=\"dot\">${this.makeDotContent()}</div>\n      ${this.makeSlotContent()}\n    `;\n  }\n\n  makeLine() {\n    if (!this.last) {\n      return html`<div class=\"line\" part=\"line\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeCompletedLine() {\n    if (this.completed && !this.last) {\n      return html`<div class=\"line completed\" part=\"completed-line\" @animationend=${() => this.handleCompletedLineEnd()}></div>`;\n    }\n\n    return null;\n  }\n\n  makeDotContent() {\n    if (this.completed && !this.mobile && !this.hideDotContent) {\n      return html`\n        <kemet-icon name=\"check2\" size=${this.completedSize}></kemet-icon>\n      `;\n    }\n\n    if (!this.mobile && !this.hideDotContent) {\n      return html`\n        <span>${this.step}/${this.tracker?.total}</span>\n      `;\n    }\n\n    return null;\n  }\n\n  makeSlotContent() {\n    if (!this.mobile) {\n      return html`<slot></slot>`;\n    }\n\n    return null;\n  }\n\n  handleCompletedLineEnd() {\n    const currentDot = this.tracker?.querySelector('[current]')?.shadowRoot?.querySelector('.dot');\n\n    if (currentDot) {\n      currentDot.classList.add('animate');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker-step': KemetTrackerStep\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-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n    --kemet-tracker-step-dot-font-size: 90%;\n    --kemet-tracker-step-dot-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-background-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-dot-border: 1px solid var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-fill-color: transparent;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-completed-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-completed-fill-color: var(--kemet-color-background-success);\n    --kemet-tracker-step-current-color: var(--kemet-color-font-inverse-base);\n    --kemet-tracker-step-current-fill-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-line-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-completed-line-color: var(--kemet-color-font-active);\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size);\n    color: var(--kemet-tracker-step-dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color);\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border);\n    background-color: var(--kemet-tracker-step-dot-fill-color);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color);\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color);\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color);\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color);\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color);\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color);\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,QAAAA,OAAM,cAAAC,mBAA6B;AAC5C,SAAS,iBAAAC,gBAAe,YAAAC,WAAU,SAAAC,cAAa;;;ACDxC,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;;;ACJA,SAAS,MAA0B,kBAA6B;AAChE,SAAS,eAAe,UAAU,aAAa;AAC/C,SAAS,wBAAwB;;;ACFjC,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADIf,IAAM,kBAAkB,uBAAO;AAC/B,IAAM,kBAAkB,uBAAO;AAG/B,IAAI;AACJ,IAAM,YAAY,oBAAI,IAAgC;AAGtD,IAAM,0BAA0B;AAChC,IAAM,eAAkC,CAAC;AACzC,IAAI,iBAAiB;AAErB,SAAS,aAAa,UAAsB;AAC1C,MAAI,iBAAiB,yBAAyB;AAC5C;AACA,aAAS;AAAA,EACX,OAAO;AACL,iBAAa,KAAK,QAAQ;AAAA,EAC5B;AACF;AAEA,SAAS,kBAAkB;AACzB;AACA,MAAI,aAAa,SAAS,GAAG;AAC3B,UAAM,cAAc,aAAa,MAAM;AACvC,QAAI,aAAa;AACf;AACA,kBAAY;AAAA,IACd;AAAA,EACF;AACF;AA4BA,IAAqB,YAArB,cAAuC,WAAW;AAAA,EAAlD;AAAA;AAIE,gBAAe;AAGf,mBAAkB;AAGlB,kBAAiB;AAGjB,gBAAe;AASf,eAAc;AAId,SAAQ,MAA8C;AAItD,SAAQ,MAAc;AAGtB;AAAA,SAAQ,YAAqB;AAAA;AAAA,EAE7B,oBAAoB;AAClB,UAAM,kBAAkB;AAExB,SAAK,UAAU;AACf,QAAI,CAAC,KAAK,KAAK;AACb,WAAK,YAAY;AACjB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AACR,SAAK,UAAU;AACf,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,eAAe;AACb,cAAU,MAAM,sBAAsB;AAAA,MACpC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AAEP,QAAI,KAAK,KAAK;AACZ,aAAO,KAAK;AAAA,IACd;AAGA,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,YAAY;AACjB,WAAK,QAAQ;AAAA,IACf;AAEA,WAAO,8BAA8B,KAAK,IAAI,aAAa,KAAK,IAAI;AAAA,EACtE;AAAA;AAAA,EAGO,WAAW;AAChB,SAAK,YAAY;AACjB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,MAAM,UAAU;AACd,QAAI,CAAC,KAAK,UAAW;AAErB,QAAI,eAAe,UAAU,IAAI,GAAG,KAAK,MAAM,IAAI,KAAK,IAAI,EAAE;AAE9D,QAAI,CAAC,cAAc;AACjB,qBAAe,KAAK,YAAY;AAChC,gBAAU,IAAI,GAAG,KAAK,MAAM,IAAI,KAAK,IAAI,IAAI,YAAY;AAAA,IAC3D;AAEA,UAAM,MAAM,MAAM;AAElB,QAAI,QAAQ,iBAAiB;AAC3B,gBAAU,OAAO,GAAG,KAAK,MAAM,IAAI,KAAK,IAAI,EAAE;AAAA,IAChD;AAEA,QAAI,iBAAiB,GAAG,GAAG;AACzB,WAAK,MAAM;AAAA,IACb,WAAW,eAAe,eAAe;AAEvC,WAAK,MAAM,IAAI,UAAU,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EAEQ,YAAY;AAClB,YAAQ,KAAK,SAAS;AAAA,MACpB,KAAK;AACH,aAAK,UAAU,KAAK,WAAW;AAC/B,aAAK,MAAM,mDAAmD,KAAK,OAAO;AAC1E;AAAA,MACF,KAAK;AACH,aAAK,UAAU,KAAK,WAAW;AAC/B,aAAK,MAAM,qCAAqC,KAAK,OAAO;AAC5D;AAAA,IACJ;AAAA,EACF;AAAA,EAEA,MAAc,cAAkC;AAC9C,WAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,mBAAa,YAAY;AACvB,YAAI;AACJ,YAAI,WAAmB,GAAG,KAAK,GAAG,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAE9D,gBAAQ,KAAK,SAAS;AAAA,UACpB,KAAK;AACH,uBAAW,GAAG,KAAK,GAAG,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAClD;AAAA,UACF,KAAK;AACH,uBAAW,GAAG,KAAK,GAAG,IAAI,KAAK,IAAI;AACnC;AAAA,QACJ;AAEA,YAAI;AACF,qBAAW,MAAM,MAAM,QAAQ;AAC/B,cAAI,CAAC,SAAS,IAAI;AAChB,4BAAgB;AAChB,oBAAQ,SAAS,WAAW,MAAM,kBAAkB,eAAe;AACnE;AAAA,UACF;AAAA,QACF,QAAQ;AACN,0BAAgB;AAChB,kBAAQ,eAAe;AACvB;AAAA,QACF;AAEA,YAAI;AACF,gBAAM,MAAM,SAAS,cAAc,KAAK;AACxC,cAAI,YAAY,MAAM,SAAS,KAAK;AAEpC,gBAAM,MAAM,IAAI;AAChB,cAAI,KAAK,SAAS,YAAY,MAAM,OAAO;AACzC,4BAAgB;AAChB,oBAAQ,eAAe;AACvB;AAAA,UACF;AAEA,cAAI,CAAC,OAAQ,UAAS,IAAI,UAAU;AACpC,gBAAM,MAAM,OAAO,gBAAgB,IAAI,WAAW,WAAW;AAE7D,gBAAM,QAAQ,IAAI,KAAK,cAAc,KAAK;AAC1C,cAAI,CAAC,OAAO;AACV,4BAAgB;AAChB,oBAAQ,eAAe;AACvB;AAAA,UACF;AAEA,gBAAM,KAAK,IAAI,KAAK;AACpB,gBAAM,aAAa,SAAS,GAAG,KAAK,IAAI,IAAI;AAC5C,gBAAM,aAAa,UAAU,GAAG,KAAK,IAAI,IAAI;AAE7C,0BAAgB;AAChB,kBAAQ,SAAS,UAAU,KAAK,CAAC;AAAA,QACnC,QAAQ;AACN,0BAAgB;AAChB,kBAAQ,eAAe;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa;AACnB,QAAI,KAAK,KAAK;AACZ,YAAM,MAAM,KAAK;AACjB,UAAI,aAAa,SAAS,GAAG,KAAK,IAAI,IAAI;AAC1C,UAAI,aAAa,UAAU,GAAG,KAAK,IAAI,IAAI;AAAA,IAC7C;AAAA,EACF;AACF;AA7LqB,UACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,UAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,UAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,UAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,UAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,UAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,UAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,UAsBnB;AAIQ;AAAA,EADP,MAAM;AAAA,GAzBY,UA0BX;AAIA;AAAA,EADP,MAAM;AAAA,GA7BY,UA8BX;AA9BW,YAArB;AAAA,EADC,cAAc,YAAY;AAAA,GACN;;;AEhErB,SAAS,OAAAC,YAAW;AAEpB,IAAOC,sBAAQD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AJiDf,IAAqB,mBAArB,cAA8CE,YAAW;AAAA,EAAzD;AAAA;AAsBE,yBAAwB;AAMxB,eAAc;AAAA;AAAA,EAOd,eAAe;AACb,SAAK,UAAU,KAAK,QAAQ,eAAe;AAC3C,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,QACH,KAAK,SAAS,CAAC;AAAA,QACf,KAAK,kBAAkB,CAAC;AAAA,oCACI,KAAK,eAAe,CAAC;AAAA,QACjD,KAAK,gBAAgB,CAAC;AAAA;AAAA,EAE5B;AAAA,EAEA,WAAW;AACT,QAAI,CAAC,KAAK,MAAM;AACd,aAAOA;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,oBAAoB;AAClB,QAAI,KAAK,aAAa,CAAC,KAAK,MAAM;AAChC,aAAOA,wEAAuE,MAAM,KAAK,uBAAuB,CAAC;AAAA,IACnH;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB;AACf,QAAI,KAAK,aAAa,CAAC,KAAK,UAAU,CAAC,KAAK,gBAAgB;AAC1D,aAAOA;AAAA,yCAC4B,KAAK,aAAa;AAAA;AAAA,IAEvD;AAEA,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,gBAAgB;AACxC,aAAOA;AAAA,gBACG,KAAK,IAAI,IAAI,KAAK,SAAS,KAAK;AAAA;AAAA,IAE5C;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,kBAAkB;AAChB,QAAI,CAAC,KAAK,QAAQ;AAChB,aAAOA;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,yBAAyB;AACvB,UAAM,aAAa,KAAK,SAAS,cAAc,WAAW,GAAG,YAAY,cAAc,MAAM;AAE7F,QAAI,YAAY;AACd,iBAAW,UAAU,IAAI,SAAS;AAAA,IACpC;AAAA,EACF;AACF;AAvGqB,iBACZ,SAAS,CAACC,mBAAM;AAGvB;AAAA,EADCC,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,iBAInB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,iBAOnB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATvB,iBAUnB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,iBAanB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,iBAgBnB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,mBAAmB,CAAC;AAAA,GAlBtD,iBAmBnB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArBP,iBAsBnB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxBtB,iBAyBnB;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BtB,iBA4BnB;AAKA;AAAA,EADCC,OAAM;AAAA,GAhCY,iBAiCnB;AAjCmB,mBAArB;AAAA,EADCC,eAAc,oBAAoB;AAAA,GACd;","names":["html","LitElement","customElement","property","state","css","styles_css_default","LitElement","html","styles_css_default","property","state","customElement"]}
+{"version":3,"sources":["../../../src/elements/tracker-step/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/tracker-step/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetTrackerElement from '../tracker';\nimport styles from './styles.css.ts';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n\n * @tagname kemet-tracker-step\n * @summary A step in the Tracker\n * @ssrsafe yes\n *\n * @prop {number} step - The current step number\n * @prop {boolean} completed - Determines whether a step renders as complete\n * @prop {boolean} current - Determines whether a step renders as the current step\n * @prop {boolean} last - Is automatically added to the last step\n * @prop {string} breakpoint - The breakpoint to use for mobile rendering\n * @prop {boolean} mobile - Determines if a step should render as mobile\n * @prop {boolean} hideDotContent - Hides the label inside of a dot\n * @prop {number} completedSize - The icon size for the completed check mark\n * @prop {number} total - The total number of steps\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 * @cssproperty --kemet-tracker-step-dot-font-size - The font size.\n * @cssproperty --kemet-tracker-step-dot-color - The text color.\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color.\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.\n *\n * @csspart dot - The container for the dot.\n * @csspart line - A connector line from dot to dot.\n * @csspart completed-line - A completed connector line.\n *\n * @fires kemet-tracker-step-mounted - Fired when the tracker step is mounted to the DOM\n * @detail {HTMLElement} element - The tracker step element\n *\n */\n\n@customElement('kemet-tracker-step')\nexport default class KemetTrackerStep extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number})\n  step!: number;\n\n  @property({ type: Boolean, reflect: true })\n  completed!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  current!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  last!: boolean;\n\n  @property({ type: String })\n  breakpoint: string = '767px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })\n  hideDotContent!: boolean;\n\n  @property({ type: Number })\n  completedSize: number = 16;\n\n  @property({ type: Number })\n  total: number = 0;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n\n  @state()\n  tracker!: HTMLKemetTrackerElement;\n\n  firstUpdated() {\n    this.last = this.step === this.total;\n\n    this.isMobile();\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    emitEvent(this, 'kemet-tracker-step-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      ${this.makeLine()}\n      ${this.makeCompletedLine()}\n      <div class=\"dot\" part=\"dot\">${this.makeDotContent()}</div>\n      ${this.makeSlotContent()}\n    `;\n  }\n\n  makeLine() {\n    if (!this.last) {\n      return html`<div class=\"line\" part=\"line\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeCompletedLine() {\n    if (this.completed && !this.last) {\n      return html`<div class=\"line completed\" part=\"completed-line\" @animationend=${() => this.handleCompletedLineEnd()}></div>`;\n    }\n\n    return null;\n  }\n\n  makeDotContent() {\n    if (this.completed && !this.mobile && !this.hideDotContent) {\n      return html`\n        <kemet-icon name=\"check2\" size=${this.completedSize}></kemet-icon>\n      `;\n    }\n\n    if (!this.mobile && !this.hideDotContent) {\n      return html`\n        <span>${this.step}/${this.total}</span>\n      `;\n    }\n\n    return null;\n  }\n\n  makeSlotContent() {\n    if (!this.mobile) {\n      return html`<slot></slot>`;\n    }\n\n    return null;\n  }\n\n  handleCompletedLineEnd() {\n    const currentDot = this.current ? this.shadowRoot?.querySelector('.dot') : null;\n\n    if (currentDot) {\n      currentDot.classList.add('animate');\n    }\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker-step': KemetTrackerStep\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-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n    --kemet-tracker-step-dot-font-size: 90%;\n    --kemet-tracker-step-dot-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-background-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-dot-border: 1px solid var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-fill-color: transparent;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-completed-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-completed-fill-color: var(--kemet-color-background-success);\n    --kemet-tracker-step-current-color: var(--kemet-color-font-inverse-base);\n    --kemet-tracker-step-current-fill-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-line-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-completed-line-color: var(--kemet-color-font-active);\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size);\n    color: var(--kemet-tracker-step-dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color);\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border);\n    background-color: var(--kemet-tracker-step-dot-fill-color);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color);\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color);\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color);\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color);\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color);\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color);\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"],"mappings":"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","names":[]}

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

@@ -7,6 +7,7 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * @tagname kemet-typewriter
  * @summary An element that types out content.
+ * @ssrsafe no - Depends on client-side effect library
  *
  * @prop {string} content - The content to be typed.
  * @prop {number} delay - The delay between each character.

package/dist/elements/typewriter/index.js

@@ -11,7 +11,13 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/typewriter/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/typewriter/index.ts
 import Typewriter from "typewriter-effect/dist/core";
 
 // src/utilities/events.ts

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/typewriter/index.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport Typewriter from 'typewriter-effect/dist/core';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-typewriter\n * @summary An element that types out content.\n *\n * @prop {string} content - The content to be typed.\n * @prop {number} delay - The delay between each character.\n * @prop {string} cursor - The cursor to be displayed.\n * @prop {boolean} loop - Whether to loop the content.\n * @prop {number} restartDelay - The delay before restarting the typewriter.\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-typewriter-completed - Fires when typewriter is completed\n *\n * @fires kemet-typewriter-mounted - Fired when the typewriter is mounted to the DOM\n * @detail {HTMLElement} element - The typewriter element\n *\n */\n\n@customElement('kemet-typewriter')\nexport default class KemetTypewriter extends LitElement {\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Number })\n  delay: number = 10;\n\n  @property({ type: String })\n  cursor: string = '';\n\n  @property({ type: Boolean })\n  loop: boolean = false;\n\n  @property({ type: Number, attribute: 'restart-delay' })\n  restartDelay: number = 1000;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private typewriter!: Typewriter;\n  private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  firstUpdated() {\n    const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n    this.typewriter = new Typewriter(target, {\n      cursor: this.cursor,\n      loop: this.loop,\n      delay: this.delay,\n    });\n\n    this.restartTypewriter();\n\n    emitEvent(this, 'kemet-typewriter-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('content') ||\n      changedProperties.has('delay') ||\n      changedProperties.has('cursor') ||\n      changedProperties.has('loop')\n    ) {\n      const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n      if (this.typewriter) {\n        this.typewriter.stop();\n      }\n\n      this.typewriter = new Typewriter(target, {\n        cursor: this.cursor,\n        loop: this.loop,\n        delay: this.delay,\n      });\n\n      this.restartTypewriter();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n      this.timeoutId = null;\n    }\n\n    if (this.typewriter) {\n      this.typewriter.stop();\n    }\n  }\n\n  render() {\n    return html`\n      <kemet-typewriter-target></kemet-typewriter-target>\n    `;\n  }\n\n  restartTypewriter() {\n    if (!this.typewriter) return;\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n    }\n\n    this.timeoutId = setTimeout(() => {\n      this.typewriter\n        .deleteAll(1)\n        .typeString(this.content)\n        .callFunction(() => {\n          emitEvent(this, 'kemet-typewriter-completed', { element: this });\n        })\n        .start();\n    }, this.restartDelay);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-typewriter': KemetTypewriter;\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":[]}
+{"version":3,"sources":["../../../src/elements/typewriter/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport Typewriter from 'typewriter-effect/dist/core';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-typewriter\n * @summary An element that types out content.\n * @ssrsafe no - Depends on client-side effect library\n *\n * @prop {string} content - The content to be typed.\n * @prop {number} delay - The delay between each character.\n * @prop {string} cursor - The cursor to be displayed.\n * @prop {boolean} loop - Whether to loop the content.\n * @prop {number} restartDelay - The delay before restarting the typewriter.\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-typewriter-completed - Fires when typewriter is completed\n *\n * @fires kemet-typewriter-mounted - Fired when the typewriter is mounted to the DOM\n * @detail {HTMLElement} element - The typewriter element\n *\n */\n\n@customElement('kemet-typewriter')\nexport default class KemetTypewriter extends LitElement {\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Number })\n  delay: number = 10;\n\n  @property({ type: String })\n  cursor: string = '';\n\n  @property({ type: Boolean })\n  loop: boolean = false;\n\n  @property({ type: Number, attribute: 'restart-delay' })\n  restartDelay: number = 1000;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private typewriter!: Typewriter;\n  private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  firstUpdated() {\n    const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n    this.typewriter = new Typewriter(target, {\n      cursor: this.cursor,\n      loop: this.loop,\n      delay: this.delay,\n    });\n\n    this.restartTypewriter();\n\n    emitEvent(this, 'kemet-typewriter-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('content') ||\n      changedProperties.has('delay') ||\n      changedProperties.has('cursor') ||\n      changedProperties.has('loop')\n    ) {\n      const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n      if (this.typewriter) {\n        this.typewriter.stop();\n      }\n\n      this.typewriter = new Typewriter(target, {\n        cursor: this.cursor,\n        loop: this.loop,\n        delay: this.delay,\n      });\n\n      this.restartTypewriter();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n      this.timeoutId = null;\n    }\n\n    if (this.typewriter) {\n      this.typewriter.stop();\n    }\n  }\n\n  render() {\n    return html`\n      <kemet-typewriter-target></kemet-typewriter-target>\n    `;\n  }\n\n  restartTypewriter() {\n    if (!this.typewriter) return;\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n    }\n\n    this.timeoutId = setTimeout(() => {\n      this.typewriter\n        .deleteAll(1)\n        .typeString(this.content)\n        .callFunction(() => {\n          emitEvent(this, 'kemet-typewriter-completed', { element: this });\n        })\n        .start();\n    }, this.restartDelay);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-typewriter': KemetTypewriter;\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"],"mappings":"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","names":[]}

package/dist/{index-h1DTXXCf.d.ts → index-n43o0UmE.d.ts}

@@ -1,23 +1,25 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import './elements/icon/index.js';
 
 /**
  *
  * @since 1.2.0
  * @status stable
- *
+
  * @tagname kemet-tracker-step
  * @summary A step in the Tracker
+ * @ssrsafe yes
  *
  * @prop {number} step - The current step number
  * @prop {boolean} completed - Determines whether a step renders as complete
  * @prop {boolean} current - Determines whether a step renders as the current step
  * @prop {boolean} last - Is automatically added to the last step
+ * @prop {string} breakpoint - The breakpoint to use for mobile rendering
  * @prop {boolean} mobile - Determines if a step should render as mobile
  * @prop {boolean} hideDotContent - Hides the label inside of a dot
  * @prop {number} completedSize - The icon size for the completed check mark
+ * @prop {number} total - The total number of steps
  * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
  * @prop {string} dom - The status of dom initalization.
  *
@@ -52,9 +54,11 @@ declare class KemetTrackerStep extends LitElement {
     completed: boolean;
     current: boolean;
     last: boolean;
+    breakpoint: string;
     mobile: boolean;
     hideDotContent: boolean;
     completedSize: number;
+    total: number;
     polarity?: 'light' | 'dark';
     dom: string;
     tracker: KemetTracker;
@@ -65,6 +69,7 @@ declare class KemetTrackerStep extends LitElement {
     makeDotContent(): lit_html.TemplateResult<1> | null;
     makeSlotContent(): lit_html.TemplateResult<1> | null;
     handleCompletedLineEnd(): void;
+    isMobile(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -77,6 +82,10 @@ declare global {
  * @since 1.2.0
  * @status stable
  *
+ * @tagname kemet-tracker
+ * @summary A tracker for a multi step process
+ * @ssrsafe yes
+ *
  * @prop {number} total - The total number of steps
  * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
  * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
@@ -88,16 +97,13 @@ declare global {
  */
 declare class KemetTracker extends LitElement {
     static styles: lit.CSSResult[];
-    total: number;
-    breakpoint: string;
+    total?: number;
     polarity?: 'light' | 'dark';
     dom: string;
     steps: NodeListOf<KemetTrackerStep>;
-    constructor();
     firstUpdated(): void;
     render(): lit_html.TemplateResult<1>;
-    handleSlotChange(): void;
-    isMobile(): void;
+    initializeSteps(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {