kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-AEOXLPN2.mjs

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

@@ -0,0 +1 @@
+{"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":";;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAC/C,SAAS,kBAAkB;;;ACF3B,SAAS,WAAW;AAEb,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADGtB,IAAM,UAAU,CAAC,QAAQ,MAAM;AAC/B,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,UAAO;AACP,EAAAA,aAAA,UAAO;AAFG,SAAAA;AAAA,GAAA;AAyBZ,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAIE,uBAAsB;AAGtB,iBAAgB;AAGhB,kBAAiB;AAGjB,oBAAqB,CAAC;AAGtB,kBAAsB;AAGtB,yBAAwB;AAAA;AAAA,EAKxB,eAAe;AAEb,SAAK,YAAY;AAEjB,WAAO,iBAAiB,UAAU,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA,EACjE;AAAA,EAEA,QAAQ,SAA6B;AACnC,UAAM,kBAAkB,CAAC,CAAC,QAAQ,IAAI,OAAO;AAC7C,UAAM,mBAAmB,CAAC,CAAC,QAAQ,IAAI,QAAQ;AAE/C,SAAK,cAAc;AAGnB,QAAI,CAAC,mBAAmB,CAAC,kBAAkB;AACzC,iBAAW,MAAM;AACf,YAAI,KAAK,gBAAgB,GAAG;AAC1B,eAAK,UAAU;AAAA,QACjB;AAAA,MACF,GAAG,KAAK,gBAAgB,GAAI;AAAA,IAC9B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,WAAW,SAAS,SAAS,KAAK,KAAK,MAAM;AACnE,UAAM,YAAY,KAAK,WAAW,SAAS,UAAU,KAAK,MAAM,MAAM;AAEtE,WAAO;AAAA,qCAC0B,QAAQ,IAAI,SAAS;AAAA,UAChD,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA,EAG3B;AAAA,EAEA,eAAe;AACb,WAAO,KAAK,SAAS,IAAI,CAAC,SAAS,UAAU;AAC3C,YAAM,iBAAiB,KAAK,gBAAgB,QAAQ,2BAA2B;AAC/E,YAAM,eAAe,KAAK,cAAc,QAAQ,yBAAyB;AAEzE,aAAO;AAAA,sCACyB,cAAc,IAAI,YAAY;AAAA,YACxD,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,IAG3B,CAAC;AAAA,EACH;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,WAAW,QAAQ;AAC1B,WAAK,QAAQ,GAAG,KAAK,WAAW;AAEhC,YAAM,SAAS,KAAK,WAAW,iBAAiB,iBAAiB;AACjE,UAAI,UAAU;AAEd,aAAO,QAAQ,CAAC,UAAuB;AACrC,YAAI,MAAM,eAAe,SAAS;AAChC,oBAAU,MAAM;AAAA,QAClB;AAAA,MACF,CAAC;AAED,WAAK,SAAS,GAAG,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAY;AACV,QAAI,KAAK,cAAc,KAAK,SAAS,SAAS,GAAG;AAC/C,WAAK,eAAe;AACpB,WAAK,YAAY,KAAK,cAAc;AAAA,IACtC,OAAO;AACL,WAAK,cAAc;AACnB,WAAK,YAAY,KAAK,SAAS,SAAS;AAAA,IAC1C;AAAA,EACF;AACF;AAvGqB,aACZ,SAAS,CAAC,aAAa;AAG9B;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,OAAO,CAAC;AAAA,GATP,aAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GAZN,aAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,aAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB,CAAC;AAAA,GAlBpC,aAmBnB;AAGA;AAAA,EADC,MAAM;AAAA,GArBY,aAsBnB;AAtBmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":["EnumEffects"]}

package/dist/chunk-AF3CJRDB.mjs

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"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":[]}