kemet-ui 3.1.0 → 4.0.1

package/dist/elements/carousel.js

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

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

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

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

package/dist/elements/checkbox.d.mts

@@ -0,0 +1,83 @@
+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 };