kemet-ui 4.0.2 → 5.0.0

package/dist/chunk-AEOXLPN2.mjs

@@ -1,198 +0,0 @@
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/rotator.ts
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-
-// src/styles/elements/rotator.ts
-import { css } from "lit";
-var stylesRotator = css`
-  :host {
-    --kemet-rotator-transition-speed: 500ms;
-
-    display: flex;
-  }
-
-  .rotator__slide {
-    pointer-events: none;
-  }
-
-  .rotator__slide--active {
-    pointer-events: auto;
-  }
-
-  /* fade effect */
-  :host([effect="fade"]) .rotator {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-  }
-
-  :host([effect="fade"]) .rotator__slide {
-    width: 100%;
-    flex: none;
-    opacity: 0;
-    box-sizing: border-box;
-    transition: all var(--kemet-rotator-transition-speed) ease;
-  }
-
-  :host([effect="fade"]) .rotator__slide:not(:first-child) {
-    margin-left: -100%; /* this is the bulk of the overlay trick */
-  }
-
-  :host([effect="fade"]) .rotator__slide--active {
-    opacity: 1;
-  }
-
-  /* flip effect */
-  :host([effect="flip"]) .rotator {
-    display: flex;
-    position: relative;
-
-    perspective: 500;
-  }
-
-  :host([effect="flip"]) .rotator__slide {
-    display: block;
-    width: auto;
-    position: absolute;
-    top: -20px;
-    left: 0;
-
-    opacity: 0;
-
-    transform: rotateX(90deg);
-    transform-origin: 0% 0%;
-    transition: all var(--kemet-rotator-transition-speed) ease;
-  }
-
-  :host([effect="flip"]) .rotator__slide--active {
-    top: 0;
-    opacity: 1;
-
-    transform: rotateX(0deg);
-  }
-
-  :host([effect="flip"]) .rotator__slide--prev {
-    top: 40px;;
-    transform: rotateX(-90deg);
-  }
-`;
-
-// src/elements/rotator.ts
-var effects = ["fade", "flip"];
-var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
-  EnumEffects2["Fade"] = "fade";
-  EnumEffects2["Flip"] = "flip";
-  return EnumEffects2;
-})(EnumEffects || {});
-var KemetRotator = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.activeSlide = 0;
-    this.width = "auto";
-    this.height = "auto";
-    this.messages = [];
-    this.effect = "fade" /* Fade */;
-    this.rotationSpeed = 3;
-  }
-  firstUpdated() {
-    this.prevSlide = null;
-    window.addEventListener("resize", this.setDimensions.bind(this));
-  }
-  updated(changed) {
-    const widthHasChanged = !!changed.get("width");
-    const heightHasChanged = !!changed.get("height");
-    this.setDimensions();
-    if (!widthHasChanged && !heightHasChanged) {
-      setTimeout(() => {
-        if (this.rotationSpeed > 0) {
-          this.nextSlide();
-        }
-      }, this.rotationSpeed * 1e3);
-    }
-  }
-  render() {
-    const setWidth = this.effect === "flip" ? `width:${this.width};` : "";
-    const setHeight = this.effect === "flip" ? `height:${this.height};` : "";
-    return html`
-      <span class="rotator" style="${setWidth} ${setHeight}">
-        ${this.makeMessages()}
-      </span>
-    `;
-  }
-  makeMessages() {
-    return this.messages.map((message, index) => {
-      const setActiveClass = this.activeSlide === index ? "rotator__slide--active" : "";
-      const setPrevClass = this.prevSlide === index ? "rotator__slide--prev" : "";
-      return html`
-        <span class="rotator__slide ${setActiveClass} ${setPrevClass}">
-          ${unsafeHTML(message)}
-        </span>
-      `;
-    });
-  }
-  setDimensions() {
-    if (this.effect === "flip") {
-      this.width = `${this.offsetWidth}px`;
-      const slides = this.shadowRoot.querySelectorAll(".rotator__slide");
-      let tallest = 0;
-      slides.forEach((slide) => {
-        if (slide.offsetHeight > tallest) {
-          tallest = slide.offsetHeight;
-        }
-      });
-      this.height = `${tallest}px`;
-    }
-  }
-  /**
-   * Rotates to the next slide.
-   * @public
-   * @method nextSlide
-   * @returns {void}
-   */
-  nextSlide() {
-    if (this.activeSlide < this.messages.length - 1) {
-      this.activeSlide += 1;
-      this.prevSlide = this.activeSlide - 1;
-    } else {
-      this.activeSlide = 0;
-      this.prevSlide = this.messages.length - 1;
-    }
-  }
-};
-KemetRotator.styles = [stylesRotator];
-__decorateClass([
-  property({ type: Number })
-], KemetRotator.prototype, "activeSlide", 2);
-__decorateClass([
-  property({ type: String })
-], KemetRotator.prototype, "width", 2);
-__decorateClass([
-  property({ type: String })
-], KemetRotator.prototype, "height", 2);
-__decorateClass([
-  property({ type: Array })
-], KemetRotator.prototype, "messages", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetRotator.prototype, "effect", 2);
-__decorateClass([
-  property({ type: Number, attribute: "rotation-speed" })
-], KemetRotator.prototype, "rotationSpeed", 2);
-__decorateClass([
-  state()
-], KemetRotator.prototype, "prevSlide", 2);
-KemetRotator = __decorateClass([
-  customElement("kemet-rotator")
-], KemetRotator);
-
-export {
-  effects,
-  EnumEffects,
-  KemetRotator
-};
-//# sourceMappingURL=chunk-AEOXLPN2.mjs.map

package/dist/chunk-AEOXLPN2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/rotator.ts","../src/styles/elements/rotator.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { stylesRotator } from '../styles/elements/rotator';\n\nexport const effects = ['fade', 'flip'] as const;\nexport enum EnumEffects {\n  Fade = 'fade',\n  Flip = 'flip',\n}\nexport type TypeEffects = typeof effects[number];\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {string} width - The width of the rotator block.\n * @prop {string} height - The height of the rotator block.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {TypeEffects} effect - The transition effect type.\n * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [stylesRotator];\n\n  @property({ type: Number })\n  activeSlide: number = 0;\n\n  @property({ type: String })\n  width: string = 'auto';\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffects = EnumEffects.Fade;\n\n  @property({ type: Number, attribute: 'rotation-speed' })\n  rotationSpeed: number = 3;\n\n  @state()\n  prevSlide: number | null;\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n  }\n\n  updated(changed: Map<string, never>) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.rotationSpeed > 0) {\n          this.nextSlide();\n        }\n      }, this.rotationSpeed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span class=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    return this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';\n      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';\n\n      return html`\n        <span class=\"rotator__slide ${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');\n      let tallest = 0;\n\n      slides.forEach((slide: HTMLElement) => {\n        if (slide.offsetHeight > tallest) {\n          tallest = slide.offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  /**\n   * Rotates to the next slide.\n   * @public\n   * @method nextSlide\n   * @returns {void}\n   */\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesRotator = css`\n  :host {\n    --kemet-rotator-transition-speed: 500ms;\n\n    display: flex;\n  }\n\n  .rotator__slide {\n    pointer-events: none;\n  }\n\n  .rotator__slide--active {\n    pointer-events: auto;\n  }\n\n  /* fade effect */\n  :host([effect=\"fade\"]) .rotator {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide {\n    width: 100%;\n    flex: none;\n    opacity: 0;\n    box-sizing: border-box;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide:not(:first-child) {\n    margin-left: -100%; /* this is the bulk of the overlay trick */\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide--active {\n    opacity: 1;\n  }\n\n  /* flip effect */\n  :host([effect=\"flip\"]) .rotator {\n    display: flex;\n    position: relative;\n\n    perspective: 500;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide {\n    display: block;\n    width: auto;\n    position: absolute;\n    top: -20px;\n    left: 0;\n\n    opacity: 0;\n\n    transform: rotateX(90deg);\n    transform-origin: 0% 0%;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--active {\n    top: 0;\n    opacity: 1;\n\n    transform: rotateX(0deg);\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--prev {\n    top: 40px;;\n    transform: rotateX(-90deg);\n  }\n`;\n"],"mappings":"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","names":["EnumEffects"]}

package/dist/chunk-AF3CJRDB.mjs

@@ -1,60 +0,0 @@
-import {
-  stylesBase
-} from "./chunk-ASA4GA5J.mjs";
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/avatar.ts
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-var KemetAvatar = class extends LitElement {
-  firstUpdated() {
-    this.makeSize();
-  }
-  render() {
-    return html`
-      ${this.makeContent()}
-      <slot name="status"></slot>
-    `;
-  }
-  makeSize() {
-    if (this.size) {
-      this.style.width = `${this.size}px`;
-      this.style.height = `${this.size}px`;
-    }
-  }
-  makeContent() {
-    if (this.image) {
-      return html`<img part="avatar-image" src=${this.image} alt=${this.label} />`;
-    }
-    if (this.initials) {
-      return html`<div part="initials" class="initials">${this.initials}</div>`;
-    }
-    return html`<slot></slot>`;
-  }
-};
-KemetAvatar.styles = [stylesBase];
-__decorateClass([
-  property({ type: String })
-], KemetAvatar.prototype, "size", 2);
-__decorateClass([
-  property({ type: String })
-], KemetAvatar.prototype, "image", 2);
-__decorateClass([
-  property({ type: String })
-], KemetAvatar.prototype, "label", 2);
-__decorateClass([
-  property({ type: String })
-], KemetAvatar.prototype, "initials", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetAvatar.prototype, "rounded", 2);
-KemetAvatar = __decorateClass([
-  customElement("kemet-avatar")
-], KemetAvatar);
-
-export {
-  KemetAvatar
-};
-//# sourceMappingURL=chunk-AF3CJRDB.mjs.map

package/dist/chunk-AF3CJRDB.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/avatar';\nimport { TypeRoundedSizes } from '../utilities/constants';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatar\n * @summary A representation of a person or thing.\n *\n * @prop {string} size - The size in pixels.\n * @prop {string} image - Url to an image.\n * @prop {string} label - Labels the avatar.\n * @prop {string} initials - Initials of the user.\n * @prop {boolean} circle - Displays in a circle.\n * @prop {TypeRoundedSizes} rounded - Displays with rounded corners\n *\n * @slot status - A slot for an icon or element that indicates the status of the avatar.\n *\n * @csspart initials - Contains the initials for the avatar.\n *\n * @cssproperty --kemet-avatar-color - The color of the text.\n * @cssproperty --kemet-avatar-background-color - The color of the background.\n * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type.\n * @cssproperty --kemet-avatar-initials-margin - The space around the initials.\n *\n */\n\n@customElement('kemet-avatar')\nexport default class KemetAvatar extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  size: string;\n\n  @property({ type: String })\n  image: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  initials: string;\n\n  @property({ type: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  firstUpdated() {\n    this.makeSize();\n  }\n\n  render() {\n    return html`\n      ${this.makeContent()}\n      <slot name=\"status\"></slot>\n    `;\n  }\n\n  makeSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  makeContent() {\n    if (this.image) {\n      return html`<img part=\"avatar-image\" src=${this.image} alt=${this.label} />`;\n    }\n\n    if (this.initials) {\n      return html`<div part=\"initials\" class=\"initials\">${this.initials}</div>`;\n    }\n\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatar': KemetAvatar\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;AA8BxC,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAkBlD,eAAe;AACb,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,EAGxB;AAAA,EAEA,WAAW;AACT,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,OAAO;AACd,aAAO,oCAAoC,KAAK,KAAK,QAAQ,KAAK,KAAK;AAAA,IACzE;AAEA,QAAI,KAAK,UAAU;AACjB,aAAO,6CAA6C,KAAK,QAAQ;AAAA,IACnE;AAEA,WAAO;AAAA,EACT;AACF;AA/CqB,YACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,YAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,YAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,YAgBnB;AAhBmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":[]}

package/dist/chunk-AMTRXWZ7.mjs

@@ -1,41 +0,0 @@
-import {
-  emitEvent
-} from "./chunk-LHEY3UOF.mjs";
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/flipcard-trigger.ts
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-var KemetFlipcardTrigger = class extends LitElement {
-  render() {
-    return html`
-      <slot tabindex="0" @click=${() => this.trigger()} @keypress=${(event) => this.handleKeyup(event)}></slot>
-    `;
-  }
-  trigger() {
-    emitEvent(this, "kemet-flipped", this);
-  }
-  handleKeyup(event) {
-    event.preventDefault();
-    if (event.key === "Enter") {
-      this.trigger();
-    }
-  }
-};
-KemetFlipcardTrigger.styles = [
-  css`
-      :host {
-        cursor: pointer;
-      }
-    `
-];
-KemetFlipcardTrigger = __decorateClass([
-  customElement("kemet-flipcard-trigger")
-], KemetFlipcardTrigger);
-
-export {
-  KemetFlipcardTrigger
-};
-//# sourceMappingURL=chunk-AMTRXWZ7.mjs.map

package/dist/chunk-AMTRXWZ7.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/flipcard-trigger.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard-trigger\n * @summary Triggers a flipcard component to flip.\n *\n * @event kemet-flipped - Fires when a flipcard is flipped\n */\n\n@customElement('kemet-flipcard-trigger')\nexport default class KemetFlipcardTrigger extends LitElement {\n  static styles = [\n    css`\n      :host {\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot tabindex=\"0\" @click=${() => this.trigger()} @keypress=${(event: KeyboardEvent) => this.handleKeyup(event)}></slot>\n    `;\n  }\n\n  trigger() {\n    emitEvent(this, 'kemet-flipped', this);\n  }\n\n  handleKeyup(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Enter') {\n      this.trigger();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard-trigger': KemetFlipcardTrigger\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,MAAM,WAAW;AACtC,SAAS,qBAAqB;AAc9B,IAAqB,uBAArB,cAAkD,WAAW;AAAA,EAS3D,SAAS;AACP,WAAO;AAAA,kCACuB,MAAM,KAAK,QAAQ,CAAC,cAAc,CAAC,UAAyB,KAAK,YAAY,KAAK,CAAC;AAAA;AAAA,EAEnH;AAAA,EAEA,UAAU;AACR,cAAU,MAAM,iBAAiB,IAAI;AAAA,EACvC;AAAA,EAEA,YAAY,OAAsB;AAChC,UAAM,eAAe;AAErB,QAAI,MAAM,QAAQ,SAAS;AACzB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;AA1BqB,qBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAKF;AAPmB,uBAArB;AAAA,EADC,cAAc,wBAAwB;AAAA,GAClB;","names":[]}

package/dist/chunk-ARM72B3S.mjs

@@ -1,65 +0,0 @@
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/tracker.ts
-import { html, css, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-var KemetTracker = class extends LitElement {
-  constructor() {
-    super();
-    this.breakpoint = "767px";
-  }
-  firstUpdated() {
-    this.steps = this.querySelectorAll("kemet-tracker-step");
-    this.isMobile();
-    window.addEventListener("resize", () => {
-      this.isMobile();
-    });
-  }
-  render() {
-    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
-  }
-  handleSlotChange() {
-    this.total = this.steps.length;
-    this.steps.forEach((step, index) => {
-      step.step = index + 1;
-      if (step.step === this.total) {
-        step.last = true;
-      }
-    });
-  }
-  isMobile() {
-    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
-    this.steps.forEach((step) => {
-      step.mobile = mediaQuery.matches;
-    });
-  }
-};
-KemetTracker.styles = [
-  css`
-      :host {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
-        width: 100%;
-      }
-    `
-];
-__decorateClass([
-  property({ type: Number })
-], KemetTracker.prototype, "total", 2);
-__decorateClass([
-  property({ type: String })
-], KemetTracker.prototype, "breakpoint", 2);
-__decorateClass([
-  state()
-], KemetTracker.prototype, "steps", 2);
-KemetTracker = __decorateClass([
-  customElement("kemet-tracker")
-], KemetTracker);
-
-export {
-  KemetTracker
-};
-//# sourceMappingURL=chunk-ARM72B3S.mjs.map

package/dist/chunk-ARM72B3S.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/tracker.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type KemetTrackerStep from './tracker-step';\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\n *\n */\n\n@customElement('kemet-tracker')\nexport default class KemetTracker extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        justify-content: center;\n        align-items: flex-start;\n        width: 100%;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  total: number;\n\n  @property({ type: String })\n  breakpoint: string;\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\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"],"mappings":";;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,UAAU,aAAa;AAc/C,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAqBnD,cAAc;AACZ,UAAM;AACN,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;AAAA,EACH;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;AA7DqB,aACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,aAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,aAgBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAlBY,aAmBnB;AAnBmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/chunk-ASA4GA5J.mjs

@@ -1,84 +0,0 @@
-// src/styles/elements/avatar.ts
-import { css } from "lit";
-var stylesBase = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-avatar-color: rgb(var(--kemet-color-white));
-    --kemet-avatar-background-color: rgb(var(--kemet-color-gray-300));
-    --kemet-avatar-rounded: 0;
-    --kemet-avatar-initials-margin: 1rem;
-
-    display: inline-flex;
-    color: var(--kemet-color-white);
-    position: relative;
-    border-radius: var(--kemet-avatar-rounded);
-    background-color: var(--kemet-avatar-background-color);
-  }
-
-  :host > * {
-    border-radius: var(--kemet-avatar-rounded);
-  }
-
-  :host([rounded]) {
-    --kemet-avatar-rounded: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=sm]) {
-    --kemet-avatar-rounded: var(--kemet-border-radius-sm);
-  }
-
-  :host([rounded=lg]) {
-    --kemet-avatar-rounded: var(--kemet-border-radius-lg);
-  }
-
-  :host([rounded=xl]) {
-    --kemet-avatar-rounded: var(--kemet-border-radius-xl);
-  }
-
-  :host([rounded=circle]) {
-    --kemet-avatar-rounded: var(--kemet-border-radius-circle);
-  }
-
-  :host([rounded=pill]) {
-    --kemet-avatar-rounded: var(--kemet-border-radius-pill);
-  }
-
-  .initials {
-    margin: var(--kemet-avatar-initials-margin);
-  }
-
-  ::slotted(kemet-badge) {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    border-radius: var(--kemet-border-radius-circle);
-  }
-`;
-var stylesAvatars = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-avatars-squeeze: -1.5rem;
-
-    display: inline-flex;
-  }
-
-  ::slotted(kemet-avatar:not(:first-of-type)) {
-    margin-left: var(--kemet-avatars-squeeze);
-  }
-`;
-
-export {
-  stylesBase,
-  stylesAvatars
-};
-//# sourceMappingURL=chunk-ASA4GA5J.mjs.map

package/dist/chunk-ASA4GA5J.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/styles/elements/avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-avatar-color: rgb(var(--kemet-color-white));\n    --kemet-avatar-background-color: rgb(var(--kemet-color-gray-300));\n    --kemet-avatar-rounded: 0;\n    --kemet-avatar-initials-margin: 1rem;\n\n    display: inline-flex;\n    color: var(--kemet-color-white);\n    position: relative;\n    border-radius: var(--kemet-avatar-rounded);\n    background-color: var(--kemet-avatar-background-color);\n  }\n\n  :host > * {\n    border-radius: var(--kemet-avatar-rounded);\n  }\n\n  :host([rounded]) {\n    --kemet-avatar-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) {\n    --kemet-avatar-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=lg]) {\n    --kemet-avatar-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) {\n    --kemet-avatar-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) {\n    --kemet-avatar-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) {\n    --kemet-avatar-rounded: var(--kemet-border-radius-pill);\n  }\n\n  .initials {\n    margin: var(--kemet-avatar-initials-margin);\n  }\n\n  ::slotted(kemet-badge) {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    border-radius: var(--kemet-border-radius-circle);\n  }\n`;\n\nexport const stylesAvatars = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-avatars-squeeze: -1.5rem;\n\n    display: inline-flex;\n  }\n\n  ::slotted(kemet-avatar:not(:first-of-type)) {\n    margin-left: var(--kemet-avatars-squeeze);\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DnB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}