kemet-ui 4.0.2 → 5.0.0

package/dist/elements/carousel.js

@@ -1,472 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-
-// src/elements/carousel.ts
-var carousel_exports = {};
-__export(carousel_exports, {
-  default: () => KemetCarousel
-});
-module.exports = __toCommonJS(carousel_exports);
-var import_lit2 = require("lit");
-var import_decorators = require("lit/decorators.js");
-
-// src/utilities/events.ts
-var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
-  element.dispatchEvent(
-    new CustomEvent(name, { bubbles, composed, detail })
-  );
-};
-
-// src/styles/elements/carousel.ts
-var import_lit = require("lit");
-var stylesCarousel = import_lit.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 import_lit2.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 import_lit2.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 import_lit2.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([
-  (0, import_decorators.property)({ type: Number, reflect: true })
-], KemetCarousel.prototype, "index", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Number })
-], KemetCarousel.prototype, "total", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetCarousel.prototype, "sliderWidth", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetCarousel.prototype, "sliderTranslateX", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean, reflect: true })
-], KemetCarousel.prototype, "inner", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean, reflect: true })
-], KemetCarousel.prototype, "arrows", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Object })
-], KemetCarousel.prototype, "options", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Object })
-], KemetCarousel.prototype, "breakpoints", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "slides", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "links", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "toolbarSlotElement", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "informationElement", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "swipeMove", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "handleSlideShow", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "slideShowID", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "startX", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "slideWidth", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCarousel.prototype, "informationSlot", 2);
-__decorateClass([
-  (0, import_decorators.query)("#container")
-], KemetCarousel.prototype, "containerElement", 2);
-__decorateClass([
-  (0, import_decorators.query)("#slides")
-], KemetCarousel.prototype, "slidesElement", 2);
-__decorateClass([
-  (0, import_decorators.query)("#slider")
-], KemetCarousel.prototype, "sliderElement", 2);
-__decorateClass([
-  (0, import_decorators.query)("#toolbar")
-], KemetCarousel.prototype, "toolbarElement", 2);
-KemetCarousel = __decorateClass([
-  (0, import_decorators.customElement)("kemet-carousel")
-], KemetCarousel);
-//# sourceMappingURL=carousel.js.map

package/dist/elements/carousel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/carousel.ts","../../src/utilities/events.ts","../../src/styles/elements/carousel.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesCarousel } from '../styles/elements/carousel';\n\nimport type KemetCarouselCurrent from './carousel-current';\nimport type KemetCarouselLink from './carousel-link';\nimport type KemetCarouselSlide from './carousel-slide';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel\n * @summary The Carousel allows you to click or swipe through content.\n *\n * @prop {number} index - The current slide index.\n * @prop {number} total - The total amount of slides.\n * @prop {string} sliderWidth - The width of the slider.\n * @prop {string} sliderTranslateX - The X position of the slider.\n * @prop {boolean} inner - Displays the toolbar inside the carousel container.\n * @prop {boolean} arrows - Determines whether to display arrows.\n * @prop {object} options - Default options for the carousel.\n * @prop {object} breakpoints - Options at different breakpoints for the carousel. Is mobile first.\n *\n * @event kemet-change-start - Fires when the slide has begun to change.\n * @event kemet-change-finished - Fires when a slide has changed and finished animating\n *\n * @slot slides - Place the slide elements here.\n * @slot toolbar - Allows you to construct a toolbar within the carousel. Place things like pagination here.\n * @slot prev - A slot for the previous arrow.\n * @slot next - A slot for the next arrow.\n * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.\n *\n * @cssproperty --kemet-carousel-width - The width of the carousel.\n * @cssproperty --kemet-carousel-height - The height of the carousel.\n * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar.\n * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar.\n * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar.\n * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width.\n * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar.\n * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar.\n * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color.\n * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color.\n * @cssproperty --kemet-carousel-slides-border - The border around the slides.\n * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides.\n * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity.\n * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity.\n * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed.\n *\n * @csspart container - Contains the slides and toolbar.\n * @csspart slides - Wrapper for the slider.\n * @csspart slider - Contains the slides.\n * @csspart toolbar - Contains the toolbar.\n *\n */\n\n@customElement('kemet-carousel')\nexport default class KemetCarousel extends LitElement {\n  static styles = [stylesCarousel];\n\n  @property({ type: Number, reflect: true })\n  index: number = 0;\n\n  @property({ type: Number })\n  total: number = 0;\n\n  @property({ type: String })\n  sliderWidth: string = 'auto';\n\n  @property({ type: String })\n  sliderTranslateX: string = '0';\n\n  @property({ type: Boolean, reflect: true })\n  inner: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  arrows: boolean = false;\n\n  @property({ type: Object })\n  options: object = {\n    perView: 1,\n    perMove: 1,\n    gap: 12,\n    slideshow: 0,\n    rewind: true,\n    center: false,\n  };\n\n  @property({ type: Object })\n  breakpoints: object = {\n    768: {\n      perView: 2,\n      gap: 24,\n      rewind: false,\n    },\n    1280: {\n      perView: 2.5,\n      center: true,\n    },\n  };\n\n  /** @internal */\n  @state()\n  slides: KemetCarouselSlide[] = [];\n\n  /** @internal */\n  @state()\n  links: KemetCarouselLink[] = [];\n\n  /** @internal */\n  @state()\n  toolbarSlotElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  informationElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  swipeMove: (event: TouchEvent | MouseEvent) => void;\n\n  /** @internal */\n  @state()\n  handleSlideShow: () => void;\n\n  /** @internal */\n  @state()\n  slideShowID: number;\n\n  /** @internal */\n  @state()\n  startX: number;\n\n  /** @internal */\n  @state()\n  slideWidth: number;\n\n  /** @internal */\n  @state()\n  informationSlot: HTMLElement;\n\n  /** @internal */\n  @query('#container')\n  containerElement: HTMLElement;\n\n  /** @internal */\n  @query('#slides')\n  slidesElement: HTMLElement;\n\n  /** @internal */\n  @query('#slider')\n  sliderElement: HTMLElement;\n\n  /** @internal */\n  @query('#toolbar')\n  toolbarElement: HTMLElement;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-first-activated', this.handleFirst.bind(this));\n    this.addEventListener('kemet-last-activated', this.handleLast.bind(this));\n    this.addEventListener('kemet-next-activated', this.handleNext.bind(this));\n    this.addEventListener('kemet-prev-activated', this.handlePrev.bind(this));\n    this.addEventListener('kemet-link-activated', this.handleLink.bind(this));\n  }\n\n  firstUpdated() {\n    // elements\n    this.toolbarSlotElement = this.querySelector('[slot=\"toolbar\"]');\n    this.informationElement = this.querySelector('kemet-carousel-information');\n\n    // events\n    window.addEventListener('resize', () => {\n      this.setSlideSize();\n      this.setToolbarSize();\n      this.updateIndex(this.index);\n    });\n\n    this.sliderElement?.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n\n    // methods\n    this.swipeMove = (event) => {\n      event.preventDefault();\n      let pageX: number;\n\n      if ('touches' in event) {\n        pageX = event.touches[0].pageX;\n      } else {\n        pageX = event.pageX;\n      }\n      const currentSlide = this.slides[this.index];\n\n      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;\n    };\n\n    // setup\n    this.setSlideSize();\n    this.goToSlide(this.index);\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.setSlideSize();\n    this.setToolbarSize();\n\n    if (prevProps.has('index')) {\n      this.updateIndex(this.index);\n      this.slideShowID = window.setTimeout(() => {\n          if (this.getOption('slideshow') > 0) {\n            this.updateIndex(this.index + 1);\n            clearTimeout(this.slideShowID);\n          }\n      }, this.getOption('slideshow') * 1000);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"prev\" @slotchange=${this.handleArrows}></slot>\n      <div id=\"container\" class=\"container\" part=\"container\">\n        <section\n          id=\"slides\"\n          class=\"slides\"\n          part=\"slides\"\n          @mousedown=${this.swipeStart}\n          @mouseup=${this.swipeEnd}\n          @touchstart=${this.swipeStart}\n          @touchend=${this.swipeEnd}\n          @mouseleave=${this.swipeLeave}\n        >\n          <div id=\"slider\" class=\"slider\" part=\"slider\" style=\"width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});\">\n            <slot name=\"slides\" @slotchange=\"${this.handleSlotChange}\"></slot>\n          </div>\n        </section>\n        ${this.makeToolbar()}\n      </div>\n      <slot name=\"next\" @slotchange=${this.handleArrows}></slot>\n    `;\n  }\n\n  swipeStart(event: TouchEvent | MouseEvent) {\n    if ('touches' in event) {\n      this.startX = event.touches[0].pageX;\n    } else {\n      this.startX = event.pageX;\n    }\n\n    this.addEventListener('mousemove', this.swipeMove);\n    this.addEventListener('touchmove', this.swipeMove);\n  }\n\n  swipeEnd(event: TouchEvent | MouseEvent) {\n    this.updateIndex(this.swipeUpdate(event));\n    this.removeEventListener('mousemove', this.swipeMove, false);\n    this.removeEventListener('touchmove', this.swipeMove, false);\n  }\n\n  swipeUpdate(event: TouchEvent | MouseEvent) {\n    let pageX: number;\n\n    if ('changedTouches' in event) {\n      pageX = event.changedTouches[0].pageX;\n    } else {\n      pageX = event.pageX;\n    }\n\n    const direction = this.startX > pageX ? 'right' : 'left';\n    const threshold = this.slidesElement.offsetWidth / 3;\n    const diff = this.startX - pageX;\n    const shouldUpdate = Math.abs(diff) > threshold;\n\n    let { index } = this;\n\n    if (shouldUpdate && direction === 'right') {\n      index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;\n    }\n\n    if (shouldUpdate && direction === 'left') {\n      index = this.index < 1 ? 0 : this.index - 1;\n    }\n\n    return index;\n  }\n\n  swipeLeave() {\n    this.updateIndex(this.index);\n    this.removeEventListener('mousemove', this.swipeMove, false);\n    this.removeEventListener('touchmove', this.swipeMove, false);\n  }\n\n  setSlideSize() {\n    this.slideWidth = this.containerElement?.offsetWidth as number / this.getOption('perView');\n\n    this.slides.forEach((slide) => {\n      slide.style.marginLeft = `${this.getOption('gap') / 2}px`;\n      slide.style.marginRight = `${this.getOption('gap') / 2}px`;\n      slide.style.width = `${this.slideWidth - this.getOption('gap')}px`;\n    });\n\n    this.sliderWidth = `${this.slideWidth * this.slides.length}px`;\n  }\n\n  setToolbarSize() {\n    if (this.inner && this.toolbarElement) {\n      const width = this.slidesElement.offsetWidth;\n      this.toolbarElement.style.width = `${width}px`;\n    }\n  }\n\n  makeToolbar() {\n    if (this.toolbarSlotElement) {\n      return html`\n        <section id=\"toolbar\" class=\"toolbar\" part=\"toolbar\">\n          <slot name=\"toolbar\"></slot>\n        </section>\n      `;\n    }\n\n    return null;\n  }\n\n  handleSlotChange() {\n    const slides = this.querySelectorAll('kemet-carousel-slide') as NodeListOf<KemetCarouselSlide>;\n    const links = this.querySelectorAll('kemet-carousel-link') as NodeListOf<KemetCarouselLink>;\n\n    // handle slides\n    slides.forEach((slide) => {\n      this.slides.push(slide);\n    });\n\n    this.updateInformation();\n    this.total = slides.length;\n    slides[this.index].selected = true;\n\n    // handle links\n    links.forEach((link) => {\n      this.links.push(link);\n    });\n  }\n\n  handleArrows() {\n    this.arrows = true;\n  }\n\n  handleFirst() {\n    this.updateIndex(0);\n  }\n\n  handleLast() {\n    this.updateIndex(this.slides.length - 1);\n  }\n\n  handleNext() {\n    let newIndex = this.index + this.getOption('perMove');\n\n    if (newIndex >= this.slides.length) {\n      if (this.getOption('rewind')) {\n        newIndex = 0;\n      } else {\n        newIndex = this.index;\n      }\n    }\n\n    this.updateIndex(newIndex);\n  }\n\n  handlePrev() {\n    let newIndex = this.index - this.getOption('perMove');\n\n    // send them to the last slide\n    if (newIndex < 0) {\n      if (this.getOption('rewind')) {\n        newIndex = this.slides.length - 1;\n      } else {\n        newIndex = this.index;\n      }\n    }\n\n    this.updateIndex(newIndex);\n  }\n\n  updateIndex(newIndex: number) {\n    let currentSlide = this.slides[this.index];\n    let currentLink = this.links[newIndex];\n\n    // remove selected from all links\n    this.links.forEach((link) => {\n      link.selected = false;\n    });\n\n    // if current link is invalid assume it's the first link\n    if (!currentLink) {\n      [currentLink] = this.links;\n    }\n\n    // add selected to current link\n    if (currentLink) {\n      currentLink.selected = true;\n    }\n\n    if (currentSlide) {\n      currentSlide.setAttribute('aria-hidden', 'true');\n\n      // correct for invalid indexes\n      if (newIndex > -1 && newIndex < this.slides.length) {\n        this.index = newIndex;\n      } else {\n        console.warn('An invalid index number was entered. The kemet-carousel has been reset to the first slide.');\n        this.index = 0;\n      }\n\n      // move\n      this.goToSlide(this.index);\n\n      // update new slide\n      currentSlide = this.slides[this.index];\n      currentSlide.setAttribute('aria-hidden', 'false');\n\n      this.slides.forEach((slide) => {\n        slide.selected = false;\n      });\n\n      currentSlide.selected = true;\n\n      // notify consumers of slide change\n      emitEvent(this, 'kemet-change-start', this);\n\n      // update information element\n      this.updateInformation();\n    }\n  }\n\n  updateInformation() {\n    this.informationSlot = this.slides[this.index].querySelector('[slot=\"information\"]');\n\n    if (this.informationElement) {\n      if (this.informationSlot) {\n        this.informationElement.innerHTML = this.informationSlot.outerHTML;\n      } else {\n        this.informationElement.innerHTML = '';\n      }\n    }\n  }\n\n  goToSlide(index: number) {\n    if (this.getOption('center') === true) {\n      const slidesCenter = this.slidesElement.offsetWidth / 2;\n      const slideX = this.slideWidth * index;\n      this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;\n    } else {\n      this.sliderTranslateX = `${(this.slideWidth * index) * -1}px`;\n    }\n  }\n\n  handleTransitionEnd() {\n    const currentElement = this.querySelector('kemet-carousel-current') as KemetCarouselCurrent;\n\n    if (currentElement) {\n      currentElement.current = this.index + 1;\n    }\n\n    emitEvent(this, 'kemet-change-finished', this);\n  }\n\n  handleLink(event: CustomEvent) {\n    this.updateIndex(event.detail.slide);\n  }\n\n  getOption(option: string) {\n    const breakpoints = Object.keys(this.breakpoints);\n    let value = this.options[option];\n\n    breakpoints.forEach((breakpoint) => {\n      if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== undefined) {\n        value = this.breakpoints[breakpoint][option];\n      }\n\n      return value;\n    });\n\n    return value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel': KemetCarousel\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport const stylesCarousel = css`\n  :host,\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-carousel-width: 100%;\n    --kemet-carousel-height: auto;\n    --kemet-carousel-toolbar-gap: 1rem;\n    --kemet-carousel-toolbar-justify-content: center;\n    --kemet-carousel-toolbar-padding: 1rem;\n    --kemet-carousel-toolbar-inner-width: 100%;\n    --kemet-carousel-toolbar-inner-bottom: 0;\n    --kemet-carousel-toolbar-inner-top: auto;\n    --kemet-carousel-toolbar-inner-color: rgb(var(--kemet-color-white));\n    --kemet-carousel-toolbar-inner-background-color: rgb(var(--kemet-color-black) / 40%);\n    --kemet-carousel-slides-border: 1px solid rgb(var(--kemet-color-gray-50));\n    --kemet-carousel-transition-speed: 300ms;\n    --kemet-carousel-arrows-opacity: 0.25;\n    --kemet-carousel-arrows-transition-speed: 300ms;\n    --kemet-carousel-arrows-opacity-hover: 1;\n\n    position: relative;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-items: center;\n    width: var(--kemet-carousel-width);\n    height: var(--kemet-carousel-height);\n    overflow: visible;\n  }\n\n  :host([arrows]) {\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: var(--kemet-carousel-toolbar-gap);\n    align-items: center;\n    justify-content: var(--kemet-carousel-toolbar-justify-content);\n    line-height: 1;\n    padding: var(--kemet-carousel-toolbar-padding);\n  }\n\n  :host([inner]) .toolbar {\n    width: var(--kemet-carousel-toolbar-inner-width);\n    position: absolute;\n    bottom: var(--kemet-carousel-toolbar-inner-bottom);\n    top: var(--kemet-carousel-toolbar-inner-top);\n    color: var(--kemet-carousel-toolbar-inner-color);\n    background-color: var(--kemet-carousel-toolbar-inner-background-color);\n  }\n\n  .slides {\n    overflow: hidden;\n    position: relative;\n    padding: 1rem 0;\n    border: var(--kemet-carousel-slides-border);\n  }\n\n  .slider {\n    display: flex;\n    flex-wrap: nowrap;\n    transition: transform var(--kemet-carousel-transition-speed) ease;\n  }\n\n  ::slotted([slot='next']),\n  ::slotted([slot='prev']) {\n    opacity: var(--kemet-carousel-arrows-opacity);\n    transition: opacity var(--kemet-carousel-arrows-transition-speed) ease-in-out;\n  }\n\n  :host(:hover) ::slotted([slot='next']),\n  :host(:hover) ::slotted([slot='prev']) {\n    opacity: var(--kemet-carousel-arrows-opacity-hover);\n  }\n`;\n"],"mappings":"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","names":["import_lit"]}

package/dist/elements/carousel.mjs

@@ -1,9 +0,0 @@
-import {
-  KemetCarousel
-} from "../chunk-VHOXQRZV.mjs";
-import "../chunk-LHEY3UOF.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetCarousel as default
-};
-//# sourceMappingURL=carousel.mjs.map

package/dist/elements/carousel.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/checkbox.d.mts

@@ -1,83 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-import { F as FormSubmitController } from '../form-controller-BR0gZhrG.mjs';
-import { T as TypeStatus } from '../constants-BEtO8uLN.mjs';
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-checkbox
- * @summary An enhanced checkbox.
- *
- * @prop {string} label - Label text for the checkbox
- * @prop {boolean} checked - Determines if the checkbox is selected
- * @prop {boolean} indeterminate - An indeterminate selection status
- * @prop {string} name - Name of the checkbox
- * @prop {string} value - Value of the checkbox
- * @prop {boolean} disabled - Determines if a checkbox is disabled
- * @prop {boolean} required - Determines if a checkbox is required
- * @prop {boolean} focused - Is true when the checkbox is focused
- * @prop {boolean} rounded - Gives the checkbox rounded edges
- * @prop {boolean} filled - Fills the checkbox with color
- * @prop {TypeStatus} status - The status of the checkbox
- * @prop {string} message - Message associated with checkbox status
- *
- * @csspart label - The label element.
- * @csspart text - The label's text.
- * @csspart mark - The icon of the check mark.
- *
- * @cssproperty --kemet-checkbox-size - The width and height of the checkbox.
- * @cssproperty --kemet-checkbox-color - The color of the checkbox mark.
- * @cssproperty --kemet-checkbox-border - The border of the checkbox.
- * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox.
- * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox mark.
- * @cssproperty --kemet-checkbox-filled-background-color - The filled background color.
- *
- * @event kemet-change - Fires when the state of the checkbox changes
- * @event kemet-focus - Fires when the checkbox receives focus
- * @event kemet-blur - Fires when the checkbox loses focus
- *
- */
-declare class KemetCheckbox extends LitElement {
-    /** @internal */
-    formSubmitController: FormSubmitController;
-    static styles: lit.CSSResult[];
-    label: string;
-    checked: boolean;
-    indeterminate: boolean;
-    name: string;
-    value: boolean;
-    disabled: boolean;
-    required: boolean;
-    focused: boolean;
-    rounded: boolean;
-    filled: boolean;
-    status: TypeStatus;
-    message: string;
-    input: HTMLInputElement;
-    constructor();
-    render(): lit_html.TemplateResult<1>;
-    /**
-     * Simulates a click on the input element.
-     * @public
-     * @method click
-     * @returns {void}
-     */
-    click(): void;
-    handleClick(): void;
-    handleBlur(): void;
-    handleFocus(): void;
-    handleChange(): void;
-    makeMessage(): lit_html.TemplateResult<1>;
-    makeCheckMark(): lit_html.TemplateResult<1>;
-    checkValidity(): boolean;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-checkbox': KemetCheckbox;
-    }
-}
-
-export { KemetCheckbox as default };