kemet-ui 3.1.0 → 4.0.1

package/dist/chunk-U4JLLOLD.mjs

@@ -0,0 +1,112 @@
+import {
+  stylesBase
+} from "./chunk-CK7STPSD.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/timer.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var formats = ["seconds", "minutes", "hours", "days"];
+var EnumFormats = /* @__PURE__ */ ((EnumFormats2) => {
+  EnumFormats2["Seconds"] = "seconds";
+  EnumFormats2["Minutes"] = "minutes";
+  EnumFormats2["Hours"] = "hours";
+  EnumFormats2["Days"] = "days";
+  return EnumFormats2;
+})(EnumFormats || {});
+var KemetTimer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.format = "seconds";
+    this.amount = 10;
+  }
+  firstUpdated() {
+    if (this.expires) {
+      this.countDown();
+    } else {
+      this.timer(this.getTimeInSeconds(this.amount));
+    }
+    emitEvent(this, "kemet-start", this);
+    emitEvent(this, "kemet-increment", this.getTimeInSeconds(this.amount));
+  }
+  updated(prevProps) {
+    const hasFormatOrAmountChanged = prevProps.get("format") || prevProps.get("amount");
+    const hasExpiredChanged = prevProps.get("expires");
+    if (hasFormatOrAmountChanged) {
+      clearInterval(this.interval);
+      this.timer(this.getTimeInSeconds(this.amount));
+    }
+    if (hasExpiredChanged) {
+      clearInterval(this.interval);
+      this.countDown();
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  getTimeInSeconds(time) {
+    switch (this.format) {
+      case "minutes":
+        return time * 60;
+      case "hours":
+        return time * 60 * 60;
+      case "days":
+        return time * 60 * 60 * 24;
+      default:
+        return time;
+    }
+  }
+  timer(seconds = 0) {
+    const now = Date.now();
+    const then = now + seconds * 1e3;
+    this.interval = setInterval(() => {
+      const secondsLeft = Math.round((then - Date.now()) / 1e3);
+      if (secondsLeft < 0) {
+        clearInterval(this.interval);
+        emitEvent(this, "kemet-complete", this);
+        return;
+      }
+      emitEvent(this, "kemet-increment", secondsLeft);
+    }, 1e3);
+  }
+  countDown() {
+    const expires = new Date(this.expires).getTime();
+    this.interval = setInterval(() => {
+      const secondsLeft = Math.round((expires - Date.now()) / 1e3);
+      if (secondsLeft < 0) {
+        clearInterval(this.interval);
+        emitEvent(this, "kemet-complete", this);
+        return;
+      }
+      emitEvent(this, "kemet-increment", secondsLeft);
+    }, 1e3);
+  }
+};
+KemetTimer.styles = [stylesBase];
+__decorateClass([
+  property({ type: String })
+], KemetTimer.prototype, "format", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTimer.prototype, "amount", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTimer.prototype, "expires", 2);
+__decorateClass([
+  state()
+], KemetTimer.prototype, "interval", 2);
+KemetTimer = __decorateClass([
+  customElement("kemet-timer")
+], KemetTimer);
+
+export {
+  formats,
+  EnumFormats,
+  KemetTimer
+};
+//# sourceMappingURL=chunk-U4JLLOLD.mjs.map

package/dist/chunk-U4JLLOLD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/timer.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/timer';\nimport { emitEvent } from '../utilities/events';\n\nexport const formats = ['seconds', 'minutes', 'hours', 'days'] as const;\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\nexport type TypeFormats = typeof formats[number];\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\n *\n * @event kemet-start - Fires when the timer starts\n * @event kemet-complete - Fires when the timer reaches 0\n * @event kemet-increment - Fires on tick of the timer\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires: string;\n\n  /** @internal */\n  @state()\n  interval;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-start', this);\n    emitEvent(this, 'kemet-increment', this.getTimeInSeconds(this.amount));\n  }\n\n  updated(prevProps) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-complete', this);\n        return;\n      }\n\n      emitEvent(this, 'kemet-increment', secondsLeft);\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-complete', this);\n        return;\n      }\n\n      emitEvent(this, 'kemet-increment', secondsLeft);\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAIxC,IAAM,UAAU,CAAC,WAAW,WAAW,SAAS,MAAM;AACtD,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,aAAU;AACV,EAAAA,aAAA,aAAU;AACV,EAAAA,aAAA,WAAQ;AACR,EAAAA,aAAA,UAAO;AAJG,SAAAA;AAAA,GAAA;AA0BZ,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,kBAAsB;AAGtB,kBAAiB;AAAA;AAAA,EASjB,eAAe;AACb,QAAI,KAAK,SAAS;AAChB,WAAK,UAAU;AAAA,IACjB,OAAO;AACL,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,cAAU,MAAM,eAAe,IAAI;AACnC,cAAU,MAAM,mBAAmB,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,EACvE;AAAA,EAEA,QAAQ,WAAW;AACjB,UAAM,2BAA2B,UAAU,IAAI,QAAQ,KAAK,UAAU,IAAI,QAAQ;AAClF,UAAM,oBAAoB,UAAU,IAAI,SAAS;AAEjD,QAAI,0BAA0B;AAC5B,oBAAc,KAAK,QAAQ;AAC3B,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,QAAI,mBAAmB;AACrB,oBAAc,KAAK,QAAQ;AAC3B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB,MAAsB;AACrC,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAW,eAAO,OAAO;AAAA,MAC9B,KAAK;AAAS,eAAO,OAAO,KAAK;AAAA,MACjC,KAAK;AAAQ,eAAO,OAAO,KAAK,KAAK;AAAA,MACrC;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,MAAM,UAAkB,GAAG;AACzB,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,OAAO,MAAM,UAAU;AAE7B,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,OAAO,KAAK,IAAI,KAAK,GAAI;AAEzD,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,kBAAkB,IAAI;AACtC;AAAA,MACF;AAEA,gBAAU,MAAM,mBAAmB,WAAW;AAAA,IAChD,GAAG,GAAI;AAAA,EACT;AAAA,EAEA,YAAY;AACV,UAAM,UAAU,IAAI,KAAK,KAAK,OAAO,EAAE,QAAQ;AAE/C,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,UAAU,KAAK,IAAI,KAAK,GAAI;AAE5D,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,kBAAkB,IAAI;AACtC;AAAA,MACF;AAEA,gBAAU,MAAM,mBAAmB,WAAW;AAAA,IAChD,GAAG,GAAI;AAAA,EACT;AACF;AAvFqB,WACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,WAUnB;AAIA;AAAA,EADC,MAAM;AAAA,GAbY,WAcnB;AAdmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":["EnumFormats"]}

package/dist/chunk-VDX3OED3.mjs

@@ -0,0 +1,102 @@
+// src/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = void 0) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+export {
+  FormSubmitController
+};
+//# sourceMappingURL=chunk-VDX3OED3.mjs.map

package/dist/chunk-VDX3OED3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utilities/form-controller.ts"],"sourcesContent":["export class FormSubmitController {\n  host;\n  form;\n  options;\n\n  constructor(host, options = undefined) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: input => input.closest('form'),\n      name: input => input.name,\n      value: input => input.value,\n      disabled: input => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-VHOXQRZV.mjs

@@ -0,0 +1,450 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel.ts
+import { html, LitElement } from "lit";
+import {
+  customElement,
+  property,
+  state,
+  query
+} from "lit/decorators.js";
+
+// src/styles/elements/carousel.ts
+import { css } from "lit";
+var stylesCarousel = css`
+  :host,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-carousel-width: 100%;
+    --kemet-carousel-height: auto;
+    --kemet-carousel-toolbar-gap: 1rem;
+    --kemet-carousel-toolbar-justify-content: center;
+    --kemet-carousel-toolbar-padding: 1rem;
+    --kemet-carousel-toolbar-inner-width: 100%;
+    --kemet-carousel-toolbar-inner-bottom: 0;
+    --kemet-carousel-toolbar-inner-top: auto;
+    --kemet-carousel-toolbar-inner-color: rgb(var(--kemet-color-white));
+    --kemet-carousel-toolbar-inner-background-color: rgb(var(--kemet-color-black) / 40%);
+    --kemet-carousel-slides-border: 1px solid rgb(var(--kemet-color-gray-50));
+    --kemet-carousel-transition-speed: 300ms;
+    --kemet-carousel-arrows-opacity: 0.25;
+    --kemet-carousel-arrows-transition-speed: 300ms;
+    --kemet-carousel-arrows-opacity-hover: 1;
+
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    width: var(--kemet-carousel-width);
+    height: var(--kemet-carousel-height);
+    overflow: visible;
+  }
+
+  :host([arrows]) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .toolbar {
+    display: flex;
+    gap: var(--kemet-carousel-toolbar-gap);
+    align-items: center;
+    justify-content: var(--kemet-carousel-toolbar-justify-content);
+    line-height: 1;
+    padding: var(--kemet-carousel-toolbar-padding);
+  }
+
+  :host([inner]) .toolbar {
+    width: var(--kemet-carousel-toolbar-inner-width);
+    position: absolute;
+    bottom: var(--kemet-carousel-toolbar-inner-bottom);
+    top: var(--kemet-carousel-toolbar-inner-top);
+    color: var(--kemet-carousel-toolbar-inner-color);
+    background-color: var(--kemet-carousel-toolbar-inner-background-color);
+  }
+
+  .slides {
+    overflow: hidden;
+    position: relative;
+    padding: 1rem 0;
+    border: var(--kemet-carousel-slides-border);
+  }
+
+  .slider {
+    display: flex;
+    flex-wrap: nowrap;
+    transition: transform var(--kemet-carousel-transition-speed) ease;
+  }
+
+  ::slotted([slot='next']),
+  ::slotted([slot='prev']) {
+    opacity: var(--kemet-carousel-arrows-opacity);
+    transition: opacity var(--kemet-carousel-arrows-transition-speed) ease-in-out;
+  }
+
+  :host(:hover) ::slotted([slot='next']),
+  :host(:hover) ::slotted([slot='prev']) {
+    opacity: var(--kemet-carousel-arrows-opacity-hover);
+  }
+`;
+
+// src/elements/carousel.ts
+var KemetCarousel = class extends LitElement {
+  constructor() {
+    super();
+    this.index = 0;
+    this.total = 0;
+    this.sliderWidth = "auto";
+    this.sliderTranslateX = "0";
+    this.inner = false;
+    this.arrows = false;
+    this.options = {
+      perView: 1,
+      perMove: 1,
+      gap: 12,
+      slideshow: 0,
+      rewind: true,
+      center: false
+    };
+    this.breakpoints = {
+      768: {
+        perView: 2,
+        gap: 24,
+        rewind: false
+      },
+      1280: {
+        perView: 2.5,
+        center: true
+      }
+    };
+    this.slides = [];
+    this.links = [];
+    this.addEventListener("kemet-first-activated", this.handleFirst.bind(this));
+    this.addEventListener("kemet-last-activated", this.handleLast.bind(this));
+    this.addEventListener("kemet-next-activated", this.handleNext.bind(this));
+    this.addEventListener("kemet-prev-activated", this.handlePrev.bind(this));
+    this.addEventListener("kemet-link-activated", this.handleLink.bind(this));
+  }
+  firstUpdated() {
+    this.toolbarSlotElement = this.querySelector('[slot="toolbar"]');
+    this.informationElement = this.querySelector("kemet-carousel-information");
+    window.addEventListener("resize", () => {
+      this.setSlideSize();
+      this.setToolbarSize();
+      this.updateIndex(this.index);
+    });
+    this.sliderElement?.addEventListener("transitionend", this.handleTransitionEnd.bind(this));
+    this.swipeMove = (event) => {
+      event.preventDefault();
+      let pageX;
+      if ("touches" in event) {
+        pageX = event.touches[0].pageX;
+      } else {
+        pageX = event.pageX;
+      }
+      const currentSlide = this.slides[this.index];
+      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
+    };
+    this.setSlideSize();
+    this.goToSlide(this.index);
+  }
+  updated(prevProps) {
+    this.setSlideSize();
+    this.setToolbarSize();
+    if (prevProps.has("index")) {
+      this.updateIndex(this.index);
+      this.slideShowID = window.setTimeout(() => {
+        if (this.getOption("slideshow") > 0) {
+          this.updateIndex(this.index + 1);
+          clearTimeout(this.slideShowID);
+        }
+      }, this.getOption("slideshow") * 1e3);
+    }
+  }
+  render() {
+    return html`
+      <slot name="prev" @slotchange=${this.handleArrows}></slot>
+      <div id="container" class="container" part="container">
+        <section
+          id="slides"
+          class="slides"
+          part="slides"
+          @mousedown=${this.swipeStart}
+          @mouseup=${this.swipeEnd}
+          @touchstart=${this.swipeStart}
+          @touchend=${this.swipeEnd}
+          @mouseleave=${this.swipeLeave}
+        >
+          <div id="slider" class="slider" part="slider" style="width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});">
+            <slot name="slides" @slotchange="${this.handleSlotChange}"></slot>
+          </div>
+        </section>
+        ${this.makeToolbar()}
+      </div>
+      <slot name="next" @slotchange=${this.handleArrows}></slot>
+    `;
+  }
+  swipeStart(event) {
+    if ("touches" in event) {
+      this.startX = event.touches[0].pageX;
+    } else {
+      this.startX = event.pageX;
+    }
+    this.addEventListener("mousemove", this.swipeMove);
+    this.addEventListener("touchmove", this.swipeMove);
+  }
+  swipeEnd(event) {
+    this.updateIndex(this.swipeUpdate(event));
+    this.removeEventListener("mousemove", this.swipeMove, false);
+    this.removeEventListener("touchmove", this.swipeMove, false);
+  }
+  swipeUpdate(event) {
+    let pageX;
+    if ("changedTouches" in event) {
+      pageX = event.changedTouches[0].pageX;
+    } else {
+      pageX = event.pageX;
+    }
+    const direction = this.startX > pageX ? "right" : "left";
+    const threshold = this.slidesElement.offsetWidth / 3;
+    const diff = this.startX - pageX;
+    const shouldUpdate = Math.abs(diff) > threshold;
+    let { index } = this;
+    if (shouldUpdate && direction === "right") {
+      index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;
+    }
+    if (shouldUpdate && direction === "left") {
+      index = this.index < 1 ? 0 : this.index - 1;
+    }
+    return index;
+  }
+  swipeLeave() {
+    this.updateIndex(this.index);
+    this.removeEventListener("mousemove", this.swipeMove, false);
+    this.removeEventListener("touchmove", this.swipeMove, false);
+  }
+  setSlideSize() {
+    this.slideWidth = this.containerElement?.offsetWidth / this.getOption("perView");
+    this.slides.forEach((slide) => {
+      slide.style.marginLeft = `${this.getOption("gap") / 2}px`;
+      slide.style.marginRight = `${this.getOption("gap") / 2}px`;
+      slide.style.width = `${this.slideWidth - this.getOption("gap")}px`;
+    });
+    this.sliderWidth = `${this.slideWidth * this.slides.length}px`;
+  }
+  setToolbarSize() {
+    if (this.inner && this.toolbarElement) {
+      const width = this.slidesElement.offsetWidth;
+      this.toolbarElement.style.width = `${width}px`;
+    }
+  }
+  makeToolbar() {
+    if (this.toolbarSlotElement) {
+      return html`
+        <section id="toolbar" class="toolbar" part="toolbar">
+          <slot name="toolbar"></slot>
+        </section>
+      `;
+    }
+    return null;
+  }
+  handleSlotChange() {
+    const slides = this.querySelectorAll("kemet-carousel-slide");
+    const links = this.querySelectorAll("kemet-carousel-link");
+    slides.forEach((slide) => {
+      this.slides.push(slide);
+    });
+    this.updateInformation();
+    this.total = slides.length;
+    slides[this.index].selected = true;
+    links.forEach((link) => {
+      this.links.push(link);
+    });
+  }
+  handleArrows() {
+    this.arrows = true;
+  }
+  handleFirst() {
+    this.updateIndex(0);
+  }
+  handleLast() {
+    this.updateIndex(this.slides.length - 1);
+  }
+  handleNext() {
+    let newIndex = this.index + this.getOption("perMove");
+    if (newIndex >= this.slides.length) {
+      if (this.getOption("rewind")) {
+        newIndex = 0;
+      } else {
+        newIndex = this.index;
+      }
+    }
+    this.updateIndex(newIndex);
+  }
+  handlePrev() {
+    let newIndex = this.index - this.getOption("perMove");
+    if (newIndex < 0) {
+      if (this.getOption("rewind")) {
+        newIndex = this.slides.length - 1;
+      } else {
+        newIndex = this.index;
+      }
+    }
+    this.updateIndex(newIndex);
+  }
+  updateIndex(newIndex) {
+    let currentSlide = this.slides[this.index];
+    let currentLink = this.links[newIndex];
+    this.links.forEach((link) => {
+      link.selected = false;
+    });
+    if (!currentLink) {
+      [currentLink] = this.links;
+    }
+    if (currentLink) {
+      currentLink.selected = true;
+    }
+    if (currentSlide) {
+      currentSlide.setAttribute("aria-hidden", "true");
+      if (newIndex > -1 && newIndex < this.slides.length) {
+        this.index = newIndex;
+      } else {
+        console.warn("An invalid index number was entered. The kemet-carousel has been reset to the first slide.");
+        this.index = 0;
+      }
+      this.goToSlide(this.index);
+      currentSlide = this.slides[this.index];
+      currentSlide.setAttribute("aria-hidden", "false");
+      this.slides.forEach((slide) => {
+        slide.selected = false;
+      });
+      currentSlide.selected = true;
+      emitEvent(this, "kemet-change-start", this);
+      this.updateInformation();
+    }
+  }
+  updateInformation() {
+    this.informationSlot = this.slides[this.index].querySelector('[slot="information"]');
+    if (this.informationElement) {
+      if (this.informationSlot) {
+        this.informationElement.innerHTML = this.informationSlot.outerHTML;
+      } else {
+        this.informationElement.innerHTML = "";
+      }
+    }
+  }
+  goToSlide(index) {
+    if (this.getOption("center") === true) {
+      const slidesCenter = this.slidesElement.offsetWidth / 2;
+      const slideX = this.slideWidth * index;
+      this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;
+    } else {
+      this.sliderTranslateX = `${this.slideWidth * index * -1}px`;
+    }
+  }
+  handleTransitionEnd() {
+    const currentElement = this.querySelector("kemet-carousel-current");
+    if (currentElement) {
+      currentElement.current = this.index + 1;
+    }
+    emitEvent(this, "kemet-change-finished", this);
+  }
+  handleLink(event) {
+    this.updateIndex(event.detail.slide);
+  }
+  getOption(option) {
+    const breakpoints = Object.keys(this.breakpoints);
+    let value = this.options[option];
+    breakpoints.forEach((breakpoint) => {
+      if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== void 0) {
+        value = this.breakpoints[breakpoint][option];
+      }
+      return value;
+    });
+    return value;
+  }
+};
+KemetCarousel.styles = [stylesCarousel];
+__decorateClass([
+  property({ type: Number, reflect: true })
+], KemetCarousel.prototype, "index", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetCarousel.prototype, "total", 2);
+__decorateClass([
+  property({ type: String })
+], KemetCarousel.prototype, "sliderWidth", 2);
+__decorateClass([
+  property({ type: String })
+], KemetCarousel.prototype, "sliderTranslateX", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarousel.prototype, "inner", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarousel.prototype, "arrows", 2);
+__decorateClass([
+  property({ type: Object })
+], KemetCarousel.prototype, "options", 2);
+__decorateClass([
+  property({ type: Object })
+], KemetCarousel.prototype, "breakpoints", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "slides", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "links", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "toolbarSlotElement", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "informationElement", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "swipeMove", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "handleSlideShow", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "slideShowID", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "startX", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "slideWidth", 2);
+__decorateClass([
+  state()
+], KemetCarousel.prototype, "informationSlot", 2);
+__decorateClass([
+  query("#container")
+], KemetCarousel.prototype, "containerElement", 2);
+__decorateClass([
+  query("#slides")
+], KemetCarousel.prototype, "slidesElement", 2);
+__decorateClass([
+  query("#slider")
+], KemetCarousel.prototype, "sliderElement", 2);
+__decorateClass([
+  query("#toolbar")
+], KemetCarousel.prototype, "toolbarElement", 2);
+KemetCarousel = __decorateClass([
+  customElement("kemet-carousel")
+], KemetCarousel);
+
+export {
+  KemetCarousel
+};
+//# sourceMappingURL=chunk-VHOXQRZV.mjs.map