kemet-ui 1.0.0 → 1.2.0

package/dist/kemet-components.cjs

@@ -463,6 +463,107 @@ class KemetAccordion extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-accordion') || customElements.define('kemet-accordion', KemetAccordion);
 
+class KemetBadge extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: var(--kemet-badge-padding, 10px);
+          line-height: 1;
+          color: var(--kemet-color-white);
+        }
+
+        :host([status='primary']) {
+          background-color: var(--kemet-color-primary);
+        }
+
+        :host([status='success']) {
+          background-color: var(--kemet-color-success);
+        }
+
+        :host([status='standard']) {
+          background-color: var(--kemet-color-gray6);
+        }
+
+        :host([status='warning']) {
+          background-color: var(--kemet-color-warning);
+        }
+
+        :host([status='error']) {
+          background-color: var(--kemet-color-error);
+        }
+
+        :host([circle]) {
+          border-radius: 50%;
+        }
+
+        :host([pill]) {
+          border-radius: 99rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The status of the badge
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * Displays the badge in a circle
+       */
+      circle: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Rounds the corners on the badge
+       */
+      pill: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Padding on the badge as a circle
+       */
+      circlePadding: {
+        type: Number,
+        attribute: 'circle-padding',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.status = 'primary';
+    this.pill = false;
+    this.circle = false;
+    this.circlePadding = 0;
+  }
+
+  render() {
+    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  }
+
+  handleSlotChange() {
+    if (this.circle) {
+      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
+      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
+
 class FormSubmitController {
   host;
   form;
@@ -508,10 +609,10 @@ class FormSubmitController {
     if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {
       if (Array.isArray(value)) {
         value.forEach((val) => {
-          event.formData.append(name, val.toString());
+          event.formData?.append(name, val.toString());
         });
       } else {
-        event.formData.append(name, value.toString());
+        event.formData?.append(name, value.toString());
       }
     }
   }
@@ -520,6 +621,8 @@ class FormSubmitController {
     const disabled = this.options.disabled(this.host);
     const checkValidity = this.options.checkValidity;
 
+    this.form = this.options.form(this.host);
+
     if (this.form && !this.form.noValidate && !disabled && !checkValidity(this.host)) {
       event.preventDefault();
       event.stopImmediatePropagation();
@@ -812,106 +915,858 @@ class KemetButton extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-button') || customElements.define('kemet-button', KemetButton);
 
-class KemetBadge extends s$1 {
+class KemetCarouselCurrent extends s$1 {
   static get styles() {
     return [
       r$3`
         :host {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          padding: var(--kemet-badge-padding, 10px);
-          line-height: 1;
-          color: var(--kemet-color-white);
+          display: inline-block;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      current: {
+        type: Number,
+      },
+    };
+  }
+
+  firstUpdated() {
+    this.carousel = this.closest('kemet-carousel');
+  }
+
+  updated() {
+    this.current = this.carousel.index + 1;
+  }
+
+  render() {
+    return $`${this.current}`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-current') || customElements.define('kemet-carousel-current', KemetCarouselCurrent);
+
+class KemetCarouselFirst extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  first() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-first', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-first') || customElements.define('kemet-carousel-first', KemetCarouselFirst);
+
+class KemetCarouselLast extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.last()} @click=${() => this.last()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  last() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-last', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-last') || customElements.define('kemet-carousel-last', KemetCarouselLast);
+
+class KemetCarouselLink extends s$1 {
+  static get properties() {
+    return {
+      slide: {
+        type: Number,
+        reflect: true,
+      },
+      selected: {
+        type: Boolean,
+        reflect: true,
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  static get styles() {
+    return [
+      r$3`
+        :host([selected]) {
+          color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
         }
 
-        :host([status='primary']) {
-          background-color: var(--kemet-color-primary);
-        }
+        :host(:not([selected])) {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.changed()} @click=${() => this.changed()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  changed() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-link', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-link') || customElements.define('kemet-carousel-link', KemetCarouselLink);
+
+class KemetCarouselNext extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.next()} @click=${() => this.next()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  next() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-next', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-next') || customElements.define('kemet-carousel-next', KemetCarouselNext);
+
+class KemetCarouselPrev extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  prev() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-prev') || customElements.define('kemet-carousel-prev', KemetCarouselPrev);
+
+class KemetCarouselSlide extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host,
+        :host *,
+        :host *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          flex: 0 0 auto;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Determines if the slide is selected
+       */
+      selected: {
+        type: Boolean,
+        reflect: true,
+      },
+      'aria-hidden': {
+        type: String,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.selected = false;
+    this['aria-hidden'] = 'true';
+  }
+
+  render() {
+    return $`
+      <slot></slot>
+    `;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-slide') || customElements.define('kemet-carousel-slide', KemetCarouselSlide);
+
+class KemetCarouselTotal extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          display: inline-block;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      total: {
+        type: Number,
+      },
+    };
+  }
+
+  firstUpdated() {
+    this.carousel = this.closest('kemet-carousel');
+  }
+
+  updated() {
+    this.total = this.carousel.total;
+  }
+
+  render() {
+    return $`${this.total}`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-total') || customElements.define('kemet-carousel-total', KemetCarouselTotal);
+
+class KemetCarousel extends s$1 {
+  static get styles() {
+    return r$3`
+      :host,
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      :host {
+        position: relative;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        align-items: center;
+        width: var(--kemet-carousel-width, 100%);
+        height: var(--kemet-carousel-height, auto);
+        overflow: visible;
+      }
+
+      :host([arrows]) {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+      }
+
+      .toolbar {
+        display: flex;
+        gap: var(--kemet-carousel-toolbar-gap, 1rem);
+        align-items: center;
+        justify-content: var(--kemet-carousel-toolbar-justify-content, center);
+        line-height: 1;
+        padding: var(--kemet-carousel-toolbar-padding, 1rem);
+      }
+
+      :host([inner]) .toolbar {
+        width: var(--kemet-carousel-toolbar-inner-width, 100%);
+        position: absolute;
+        bottom: var(--kemet-carousel-toolbar-inner-bottom, 0);
+        top: var(--kemet-carousel-toolbar-inner-top, auto);
+        color: var(--kemet-carousel-toolbar-inner-color, var(--kemet-color-white));
+        background-color: var(--kemet-carousel-toolbar-inner-background-color, rgba(0, 0, 0, 0.4));
+      }
+
+      .slides {
+        overflow: hidden;
+        position: relative;
+        padding: 1rem 0;
+        border: var(--kemet-carousel-slides-border, 1px solid var(--kemet-color-gray1));
+      }
+
+      .slider {
+        display: flex;
+        flex-wrap: nowrap;
+        transition: transform var(--kemet-carousel-transition-speed, 300ms) ease;
+      }
+
+      ::slotted([slot='next']),
+      ::slotted([slot='prev']) {
+        opacity: var(--kemet-carousel-arrows-opacity, 0.25);
+        transition: opacity var(--kemet-carousel-arrows-transition-speed, 300ms) ease-in-out;
+      }
+
+      :host(:hover) ::slotted([slot='next']),
+      :host(:hover) ::slotted([slot='prev']) {
+        opacity: var(--kemet-carousel-arrows-opacity-hover, 1);
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The current slide index.
+       */
+      index: {
+        type: Number,
+        reflect: true,
+      },
+      /**
+       * The total amount of slides
+       */
+      total: {
+        type: Number,
+      },
+      /**
+       * The width of the slider
+       */
+      sliderWidth: {
+        type: String,
+      },
+      /**
+       * The X position of the slider
+       */
+      sliderTranslateX: {
+        type: String,
+      },
+      /**
+       * Displays the toolbar inside the carousel container
+       */
+      inner: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether or not to display arrows
+       */
+      arrows: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Default options for the carousel
+       */
+      options: {
+        type: Object,
+      },
+      /**
+       * Options are different breakpoints for the carousel. Is mobile first.
+       */
+      breakpoints: {
+        type: Object,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    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,
+      },
+    };
+
+    // bindings
+    this.addEventListener('kemet-carousel-first', this.handleFirst.bind(this));
+    this.addEventListener('kemet-carousel-last', this.handleLast.bind(this));
+    this.addEventListener('kemet-carousel-next', this.handleNext.bind(this));
+    this.addEventListener('kemet-carousel-prev', this.handlePrev.bind(this));
+    this.addEventListener('kemet-carousel-link', this.handleLink.bind(this));
+  }
+
+  firstUpdated() {
+    // standard properties
+    this.slides = [];
+    this.links = [];
+
+    // elements
+    this.containerElement = this.shadowRoot.querySelector('[part="container"]');
+    this.slidesElement = this.shadowRoot.querySelector('[part="slides"]');
+    this.sliderElement = this.shadowRoot.querySelector('[part="slider"]');
+    this.toolbarElement = this.shadowRoot.querySelector('[part="toolbar"]');
+    this.toolbarSlotElement = this.querySelector('[slot="toolbar"]');
+    this.informationElement = this.querySelector('kemet-carousel-information');
+
+    // events
+    window.addEventListener('resize', () => {
+      this.setSlideSize();
+      this.setToolbarSize();
+      this.updateIndex(this.index);
+    });
+
+    this.sliderElement.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
+
+    // methods
+    this.swipeMove = (event) => {
+      event.preventDefault();
+
+      const pageX = event.touches ? event.touches[0].pageX : event.pageX;
+      const currentSlide = this.slides[this.index];
+
+      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
+    };
+
+    this.handleSlideShow = () => {
+      if (this.getOption('slideshow') > 0) {
+        this.updateIndex(this.index + 1);
+        clearTimeout(this.handleSlideShow);
+      }
+    };
+
+    // setup
+    this.setSlideSize();
+    this.goToSlide(this.index);
+  }
+
+  updated(prevProps) {
+    this.setSlideSize();
+    this.setToolbarSize();
+
+    if (prevProps.has('index')) {
+      this.updateIndex(this.index);
+      setTimeout(this.handleSlideShow, this.getOption('slideshow') * 1000);
+    }
+  }
+
+  render() {
+    return $`
+      <slot name="prev" @slotchange=${this.handleArrows}></slot>
+      <div class="container" part="container">
+        <section
+          class="slides"
+          part="slides"
+          @mousedown=${this.swipeStart}
+          @mouseup=${this.swipeEnd}
+          @touchstart=${this.swipeStart}
+          @touchend=${this.swipeEnd}
+          @mouseleave=${this.swipeLeave}
+        >
+          <div 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) {
+    this.startX = event.touches ? event.touches[0].pageX : 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) {
+    const pageX = event.changedTouches ? event.changedTouches[0].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 $`
+        <section 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');
+
+    // handle slides
+    slides.forEach((slide) => {
+      this.slides.push(slide);
+    });
+
+    this.updateInformation();
+    this.total = slides.length;
+    slides[this.index].selected = true;
+
+    // handle links
+    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');
+
+    // send them to the last slide
+    if (newIndex < 0) {
+      if (this.getOption('rewind')) {
+        newIndex = this.slides.length - 1;
+      } else {
+        newIndex = this.index;
+      }
+    }
+
+    this.updateIndex(newIndex);
+  }
 
-        :host([status='success']) {
-          background-color: var(--kemet-color-success);
-        }
+  updateIndex(newIndex) {
+    let currentSlide = this.slides[this.index];
+    let currentLink = this.links[newIndex];
 
-        :host([status='standard']) {
-          background-color: var(--kemet-color-gray6);
-        }
+    // remove selected from all links
+    this.links.forEach((link) => {
+      link.selected = false;
+    });
 
-        :host([status='warning']) {
-          background-color: var(--kemet-color-warning);
-        }
+    // if current link is invalid assume it's the first link
+    if (!currentLink) {
+      [currentLink] = this.links;
+    }
 
-        :host([status='error']) {
-          background-color: var(--kemet-color-error);
-        }
+    // add selected to current link
+    if (currentLink) {
+      currentLink.selected = true;
+    }
 
-        :host([circle]) {
-          border-radius: 50%;
-        }
+    if (currentSlide) {
+      currentSlide.setAttribute('aria-hidden', 'true');
 
-        :host([pill]) {
-          border-radius: 99rem;
-        }
-      `,
-    ];
-  }
+      // correct for invalid indexes
+      if (newIndex > -1 && newIndex < this.slides.length) {
+        this.index = newIndex;
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn('An invalid index number was entered. The kemet-carousel has been reset to the first slide.');
+        this.index = 0;
+      }
+
+      // move
+      this.goToSlide(this.index);
+
+      // update new slide
+      currentSlide = this.slides[this.index];
+      currentSlide.setAttribute('aria-hidden', 'false');
+
+      this.slides.forEach((slide) => {
+        slide.selected = false;
+      });
+
+      currentSlide.selected = true;
+
+      // notify consumers of slide change
 
-  static get properties() {
-    return {
-      /**
-       * The status of the badge
-       */
-      status: {
-        type: String,
-        reflect: true,
-      },
-      /**
-       * Displays the badge in a circle
-       */
-      circle: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Rounds the corners on the badge
-       */
-      pill: {
-        type: Boolean,
-        reflect: true,
-      },
       /**
-       * Padding on the badge as a circle
+       * Fires with the a slide has begun to change
        */
-      circlePadding: {
-        type: Number,
-        attribute: 'circle-padding',
-      },
-    };
+      this.dispatchEvent(new CustomEvent('kemet-carousel-change-start', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+
+      // update information element
+      this.updateInformation();
+    }
   }
 
-  constructor() {
-    super();
+  updateInformation() {
+    this.informationSlot = this.slides[this.index].querySelector('[slot="information"]');
 
-    this.status = 'primary';
-    this.pill = false;
-    this.circle = false;
-    this.circlePadding = 0;
+    if (this.informationElement) {
+      if (this.informationSlot) {
+        this.informationElement.innerHTML = this.informationSlot.outerHTML;
+      } else {
+        this.informationElement.innerHTML = '';
+      }
+    }
   }
 
-  render() {
-    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  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`;
+    }
   }
 
-  handleSlotChange() {
-    if (this.circle) {
-      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
-      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
+  handleTransitionEnd() {
+    const currentElement = this.querySelector('kemet-carousel-current');
+
+    if (currentElement) {
+      currentElement.current = this.index + 1;
     }
+
+    /**
+     * Fires when a slide has changed and finished animating
+     */
+    this.dispatchEvent(new CustomEvent('kemet-carousel-change-finished', {
+      bubbles: true,
+      composed: true,
+      detail: 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] !== undefined) {
+        value = this.breakpoints[breakpoint][option];
+      }
+
+      return value;
+    });
+
+    return value;
   }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
+customElements.get('kemet-carousel') || customElements.define('kemet-carousel', KemetCarousel);
 
 /**
  * @license
@@ -2091,26 +2946,234 @@ class KemetDrawer extends s$1 {
     }
   }
 
-  render() {
-    return $`
-      <section class="off-canvas" part="container">
-        <nav class="off-canvas__nav" part="drawer" title="Drawer">
-          <slot name="navigation"></slot>
-        </nav>
-        <div class="off-canvas__pusher" part="pusher">
-          <main class="off-canvas__content" part="content">
-            <div class="off-canvas__wrapper" part="wrapper">
-              <slot name="content"></slot>
-            </div>
-          </main>
-        </div>
-      </section>
-    `;
+  render() {
+    return $`
+      <section class="off-canvas" part="container">
+        <nav class="off-canvas__nav" part="drawer" title="Drawer">
+          <slot name="navigation"></slot>
+        </nav>
+        <div class="off-canvas__pusher" part="pusher">
+          <main class="off-canvas__content" part="content">
+            <div class="off-canvas__wrapper" part="wrapper">
+              <slot name="content"></slot>
+            </div>
+          </main>
+        </div>
+      </section>
+    `;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-drawer') || customElements.define('kemet-drawer', KemetDrawer);
+
+class KemetFAB extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          --kemet-fab-size: 50px;
+
+          display: inline-block;
+          position: relative;
+        }
+
+        button {
+          color: var(--kemet-fab-color, var(--kemet-color-white));
+          font-size: inherit;
+          display: inline-flex;
+          padding: 0;
+          position: relative;
+          min-height: var(--kemet-fab-size);
+          min-width: var(--kemet-fab-size);
+          max-width: var(--kemet-fab-size);
+          align-items: center;
+          justify-content: flex-start;
+          transition: all 0.4s ease;
+          border: none;
+          background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
+        }
+
+        :host([outlined]) button {
+          color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
+          border: var(--kemet-fab-outlined-border, 1px solid var(--kemet-color-primary));
+          background-color: transparent;
+        }
+
+        :host([pill]) button {
+          border-radius: var(--kemet-fab-pill-radius, 10rem);
+        }
+
+        button::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          transition: background-color 0.3s ease-in-out;
+          background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
+        }
+
+        :host([pill]) button::before {
+          border-radius: var(--kemet-fab-pill-radius, 10rem);
+        }
+
+        :host([outlined]) button::before {
+          border: var(--kemet-fab-outline-border, 1px solid var(--kemet-color-primary));
+          background-color: transparent;
+        }
+
+        :host([expanded]) button {
+          max-width: 99rem;
+          padding: 0 1.35rem 0 0.25rem;
+        }
+
+        :host([disabled]) button {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .icon {
+          width: var(--kemet-fab-size);
+          height: var(--kemet-fab-size);
+          display: flex;
+          flex: 0 0 auto;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .text {
+          color: var(--kemet-fab-color, var(--kemet-color-white));
+          z-index: 1;
+          white-space: nowrap;
+          pointer-events: none;
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out;
+        }
+
+        :host([outlined]) .text {
+          color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
+        }
+
+        :host([expanded]) .text {
+          opacity: 1;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The expanded state of the button
+       */
+      expanded: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Outline style for a button
+       */
+      outlined: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether not a button is disabled
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Displays the fab with rounded corners
+       */
+      pill: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The distance, in pixels, where the fab should automatically expand
+       */
+      expandPoint: {
+        type: Number,
+        attribute: 'expand-point',
+      },
+      /**
+       * The distance, in pixels, where the fab should automatically collapse
+       */
+      collapsePoint: {
+        type: Number,
+        attribute: 'collapse-point',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.outlined = false;
+    this.disabled = false;
+    this.expanded = false;
+  }
+
+  firstUpdated() {
+    // events
+    window.addEventListener('scroll', this.handleScroll.bind(this));
+    this.addEventListener('mouseover', this.handleMouseOver.bind(this));
+    this.addEventListener('mouseout', this.handleMouseOut.bind(this));
+  }
+
+  render() {
+    return $`
+      <button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>
+        <span class="icon" part="icon">
+          <slot name="icon"></slot>
+        </span>
+        <span class="text" part="text">
+          <slot></slot>
+        </span>
+      </button>
+    `;
+  }
+
+  handleMouseOver() {
+    if (!this.disabled) {
+      this.expanded = true;
+    }
+  }
+
+  handleMouseOut() {
+    if (!this.disabled) {
+      this.expanded = false;
+    }
+  }
+
+  handleScroll() {
+    if (window.scrollY > this.expandPoint) {
+      this.expanded = true;
+    }
+
+    if (window.scrollY < this.expandPoint) {
+      this.expanded = false;
+    }
+
+    if (window.scrollY > this.collapsePoint) {
+      this.expanded = false;
+    }
+
+    if (window.scrollY < this.collapsePoint) {
+      this.expanded = true;
+    }
   }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-drawer') || customElements.define('kemet-drawer', KemetDrawer);
+customElements.get('kemet-fab') || customElements.define('kemet-fab', KemetFAB);
 
 class KemetField extends s$1 {
   static get styles() {
@@ -2893,6 +3956,13 @@ class KemetInput extends s$1 {
       inputType: {
         type: String,
       },
+      /**
+       * Determines if the input is focused
+       */
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
     };
   }
 
@@ -2907,6 +3977,7 @@ class KemetInput extends s$1 {
     this.iconSize = 20;
     this.validateOnBlur = false;
     this.isPasswordVisible = false;
+    this.focused = false;
 
     /**
      * Used only for form reactive controller
@@ -2920,6 +3991,10 @@ class KemetInput extends s$1 {
     this.field = this.closest('kemet-field');
     this.form = this.closest('form');
     this.slug = this.field ? this.field.slug : 'input';
+
+    if (this.field) {
+      this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));
+    }
   }
 
   render() {
@@ -3034,7 +4109,7 @@ class KemetInput extends s$1 {
    * @private
    */
   handleFocus() {
-    this.hasFocus = true;
+    this.focused = true;
 
     /**
      * Fires when the input receives and loses focus
@@ -3058,7 +4133,7 @@ class KemetInput extends s$1 {
       this.validity = this.input.validity;
     }
 
-    this.hasFocus = false;
+    this.focused = false;
 
     /**
      * Fires when the input receives and loses focus
@@ -3108,8 +4183,7 @@ class KemetInput extends s$1 {
    * Handles when the input receives input
    * @private
    */
-  handleInput(e) {
-    this.inputType = e.inputType;
+  handleInput() {
     this.value = this.input.value;
 
     /**
@@ -3600,66 +4674,343 @@ class KemetModal extends s$1 {
         this.focusableElements[0].focus();
       }, 100);
 
-      /**
-       * Fires when the modal opens
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-modal-opened', {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        }),
-      );
-    }
+      /**
+       * Fires when the modal opens
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-modal-opened', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
+    }
+
+    if (prevProps.get('opened') && this.opened === false) {
+      /**
+       * Fires when the modal closes
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-modal-closed', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
+    }
+
+    this.isMobile();
+  }
+
+  render() {
+    return $`
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+      <div class="overlay" part="overlay"></div>
+    `;
+  }
+
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
+
+  handleFocusableDown(event) {
+    const firstFocusable = this.focusableElements[0];
+    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
+
+    if (event.key === 'Tab') {
+      if (event.shiftKey && document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      } else if (!event.shiftKey && document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-modal') || customElements.define('kemet-modal', KemetModal);
+
+class KemetPassword extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          color: inherit;
+          display: none;
+        }
+
+        :host([show]) {
+          display: block;
+        }
+
+        p {
+          margin: 1.6rem 0;
+        }
+
+        .status {
+          display: grid;
+          align-items: center;
+          grid-template-columns: 1fr auto;
+          line-height: 1;
+          margin-top: 0.8rem;
+        }
+
+        .status > span {
+          text-transform: capitalize;
+        }
+
+        .status--weak,
+        .status--better {
+          color: var(--kemet-color-error);
+        }
+
+        .status--strong {
+          color: var(--kemet-color-success);
+        }
+
+        .indicator {
+          display: flex;
+          gap: 0.4rem;
+          margin: 0;
+          list-style: none;
+        }
+
+        .indicator li {
+          width: 1.6rem;
+          height: 0.2rem;
+          background-color: var(--fds-color--gray2);
+        }
+
+        .status--weak .indicator li:nth-child(1) {
+          background-color: var(--kemet-color-error);
+        }
+
+        .status--better .indicator li:nth-child(1),
+        .status--better .indicator li:nth-child(2) {
+          background-color: var(--kemet-color-error);
+        }
+
+        .status--strong .indicator li {
+          background-color: var(--kemet-color-success);
+        }
+
+        .rules {
+          color: var(--kemet-color-primary);
+          list-style: none;
+          font-size: 90%;
+          padding-left: 2rem;
+        }
+
+        .rules li {
+          position: relative;
+        }
+
+        .rules kemet-icon {
+          color: var(--kemet-color-success);
+          position: absolute;
+          left: -2.4rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * An array of objects containing the rules the password must meet
+       */
+      rules: {
+        type: Array,
+      },
+      /**
+       * Controls the display of the component
+       */
+      show: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The value of the input component
+       */
+      value: {
+        type: String,
+      },
+      /**
+       * A message that is above the rules
+       */
+      message: {
+        type: String,
+      },
+      /**
+       * The strength of the password. Weak | Better | Strong
+       */
+      strength: {
+        type: String,
+      },
+      icon: {
+        type: String,
+      },
+      iconSize: {
+        type: Number,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.rules = [
+      { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },
+      { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },
+      { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },
+    ];
+    this.message = 'Please make sure you meet all the requirements.';
+    this.icon = 'check2';
+    this.iconSize = 16;
+  }
+
+  firstUpdated() {
+    // standard properties
+    this.field = this.closest('kemet-field');
+    this.input = this.field.querySelector('[slot="input"]');
+
+    // managed properties
+    this.slug = this.field.slug;
+
+    // events listeners
+    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
+  }
+
+  render() {
+    return $`
+      <div role="alert" aria-live="assertive">
+        <div class="status status--${this.strength}" part="status">
+          <span>${this.strength}</span>
+          <ul class="indicator" part="indicator">
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </div>
+        <p class="message" part="message">${this.message}</p>
+        <ul class="rules" part="rules">
+          ${this.makeRules()}
+        </ul>
+      </div>
+    `;
+  }
+
+  /**
+   * Makes the list of rules
+   * @private
+   * @returns {templateResults} the criteria rules
+   */
+  makeRules() {
+    if (this.input) {
+      const rules = this.rules.map((rule, index) => {
+        const regExp = new RegExp(rule.pattern);
+        const meetsCriteria = regExp.test(this.input.value);
+        this.rules[index].meetsCriteria = meetsCriteria;
+        return $`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;
+      });
+
+      return rules;
+    }
+
+    return null;
+  }
+
+  /**
+   * Makes the check icon if the criteria has been met
+   * @param {boolean} meetsCriteria
+   * @private
+   * @returns {templateResults} an icon component
+   */
+  makeCheckIcon(meetsCriteria) {
+    if (meetsCriteria) {
+      return $`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
+    }
+
+    return null;
+  }
+
+  /**
+   * Handles the kemet-input-input event
+   * @param {*} event
+   * @private
+   */
+  handleInput(event) {
+    this.value = event.detail;
+    this.setStrength();
+    this.visibility();
+  }
+
+  /**
+   * Determines the strength of the password
+   * @private
+   */
+  setStrength() {
+    // We use a setTimeout here because makeRules adds the meetsCriteria
+    // property to the rules. We need that to be set by render() before
+    // setting the Strength because the percentage calc is based on it
+    setTimeout(() => {
+      const totalRules = this.rules.length;
+      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;
+      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;
+
+      if (metRulesPercentage <= 0.33) {
+        this.strength = 'weak';
+        this.status = 'error';
+      }
+
+      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {
+        this.strength = 'better';
+        this.status = 'error';
+      }
+
+      if (metRulesPercentage > 0.67) {
+        this.strength = 'strong';
+        this.status = 'success';
+      }
 
-    if (prevProps.get('opened') && this.opened === false) {
       /**
-       * Fires when the modal closes
+       * Fires when there's a change in status.
        */
       this.dispatchEvent(
-        new CustomEvent('kemet-modal-closed', {
+        new CustomEvent('kemet-password-status', {
           bubbles: true,
           composed: true,
-          detail: this,
+          detail: {
+            status: this.status,
+            validity: { meetsPasswordCriteria: this.status === 'success' },
+            element: this,
+          },
         }),
       );
-    }
-
-    this.isMobile();
-  }
-
-  render() {
-    return $`
-      <div class="content" part="content">
-        <slot></slot>
-      </div>
-      <div class="overlay" part="overlay"></div>
-    `;
-  }
-
-  isMobile() {
-    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
-    this.mobile = mediaQuery.matches;
+    }, 1);
   }
 
-  handleFocusableDown(event) {
-    const firstFocusable = this.focusableElements[0];
-    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
-
-    if (event.key === 'Tab') {
-      if (event.shiftKey && document.activeElement === firstFocusable) {
-        event.preventDefault();
-        lastFocusable.focus();
-      } else if (!event.shiftKey && document.activeElement === lastFocusable) {
-        event.preventDefault();
-        firstFocusable.focus();
-      }
+  /**
+   * Determines whether to show or hide the component
+   * @private
+   */
+  visibility() {
+    if (this.value.length > 0) {
+      this.show = true;
+    } else {
+      this.show = false;
     }
   }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-modal') || customElements.define('kemet-modal', KemetModal);
+customElements.get('kemet-password') || customElements.define('kemet-password', KemetPassword);
 
 const keyCodes$1 = {
   ENTER: 13,
@@ -7903,6 +9254,324 @@ class KemetToggle extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-toggle') || customElements.define('kemet-toggle', KemetToggle);
 
+class KemetTrackerStep extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          --kemet-tracker-step-dot-size: 50px;
+          --kemet-tracker-step-dot-size-mobile: 25px;
+          --kemet-tracker-step-dot-gap: 4px;
+          --kemet-tracker-step-standard-line-weight: 1px;
+          --kemet-tracker-step-completed-line-weight: 3px;
+          --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
+
+          position: relative;
+          width: 100%;
+          text-align: center;
+        }
+
+        .dot {
+          font-size: var(--kemet-tracker-step-dot-font-size, 90%);
+          color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 auto;
+          position: relative;
+          z-index: 1;
+          width: var(--kemet-tracker-step-dot-size);
+          height: var(--kemet-tracker-step-dot-size);
+          border-radius: 100%;
+          transition: var(--kemet-tracker-step-dot-transition);
+          background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));
+        }
+
+        .dot::after {
+          content: "";
+          width: unset;
+          height: unset;
+          position: absolute;
+          top: var(--kemet-tracker-step-dot-gap);
+          left: var(--kemet-tracker-step-dot-gap);
+          right: var(--kemet-tracker-step-dot-gap);
+          bottom: var(--kemet-tracker-step-dot-gap);
+          z-index: -1;
+          border-radius: 100%;
+          transition: var(--kemet-tracker-step-dot-transition);
+          border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));
+          background-color: var(--kemet-tracker-step-dot-fill-color, transparent);
+        }
+
+        :host([completed]) .dot {
+          color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
+        }
+
+        :host([completed]) .dot::after {
+          border: 0;
+          background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
+        }
+
+        :host([current]) .dot.animate {
+          color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
+        }
+
+        :host([current]) .dot.animate::after {
+          border: 0;
+          background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
+        }
+
+        :host([mobile]) .dot {
+          width: var(--kemet-tracker-step-dot-size-mobile);
+          height: var(--kemet-tracker-step-dot-size-mobile);
+        }
+
+        .line {
+          display: block;
+          position: absolute;
+          left: 50%;
+          right: 0;
+          bottom: 0;
+          width: 100%;
+
+          /* standard */
+          top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+          height: var(--kemet-tracker-step-standard-line-weight);
+          background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));
+        }
+
+        .line.completed {
+          width: 100%;
+          transform: scaleX(0);
+          transform-origin: left center;
+          top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+          height: var(--kemet-tracker-step-completed-line-weight);
+          background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));
+          animation-name: grow;
+          animation-delay: 1s;
+          animation-duration: 600ms;
+          animation-fill-mode: forwards;
+        }
+
+        :host([mobile]) .line {
+          top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+        }
+
+        :host([mobile]) .line.completed {
+          top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+        }
+
+        @keyframes grow {
+          from { transform: scaleX(0); }
+          to { transform: scaleX(1); }
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The current step number
+       */
+      step: {
+        type: Number,
+      },
+      /**
+       * Determines whether or not a step renders as complete
+       */
+      completed: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether or not a step renders as the current step
+       */
+      current: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Is automatically added to the last step
+       */
+      last: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines if a step should render as mobile
+       */
+      mobile: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Hides the label inside of a dot
+       */
+      hideDotContent: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'hide-dot-content',
+      },
+      /**
+       * The icon size for the completed check mark
+       */
+      completedSize: {
+        type: Number,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.completedSize = 16;
+  }
+
+  firstUpdated() {
+    this.tracker = this.closest('kemet-tracker');
+  }
+
+  render() {
+    return $`
+      ${this.makeLine()}
+      ${this.makeCompletedLine()}
+      <div class="dot" part="dot">${this.makeDotContent()}</div>
+      ${this.makeSlotContent()}
+    `;
+  }
+
+  makeLine() {
+    if (!this.last) {
+      return $`<div class="line" part="line"></div>`;
+    }
+
+    return null;
+  }
+
+  makeCompletedLine() {
+    if (this.completed && !this.last) {
+      return $`<div class="line completed" part="completed-line" @animationend=${() => this.handleCompletedLineEnd()}></div>`;
+    }
+
+    return null;
+  }
+
+  makeDotContent() {
+    if (this.completed && !this.mobile && !this.hideDotContent) {
+      return $`
+        <kemet-icon icon="check2" size=${this.completedSize}></kemet-icon>
+      `;
+    }
+
+    if (!this.mobile && !this.hideDotContent) {
+      return $`
+        <span>${this.step}/${this.tracker?.total}</span>
+      `;
+    }
+
+    return null;
+  }
+
+  makeSlotContent() {
+    if (!this.mobile) {
+      return $`<slot></slot>`;
+    }
+
+    return null;
+  }
+
+  handleCompletedLineEnd() {
+    const currentDot = this.tracker.querySelector('[current]').shadowRoot.querySelector('.dot');
+
+    if (currentDot) {
+      currentDot.classList.add('animate');
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-tracker-step') || customElements.define('kemet-tracker-step', KemetTrackerStep);
+
+class KemetTracker extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          display: flex;
+          justify-content: center;
+          align-items: flex-start;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The total number of steps
+       */
+      total: {
+        type: Number,
+      },
+      /**
+       * The point at which the tracker goes from mobile to standard
+       */
+      breakpoint: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.breakpoint = '767px';
+  }
+
+  firstUpdated() {
+    // elements
+    this.steps = this.querySelectorAll('kemet-tracker-step');
+
+    // methods exe
+    this.isMobile();
+
+    // events
+    window.addEventListener('resize', () => {
+      this.isMobile();
+    });
+  }
+
+  render() {
+    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  }
+
+  handleSlotChange() {
+    this.total = this.steps.length;
+
+    this.steps.forEach((step, index) => {
+      step.step = index + 1;
+      if (step.step === this.total) {
+        step.last = true;
+      }
+    });
+  }
+
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+
+    this.steps.forEach((step) => {
+      step.mobile = mediaQuery.matches;
+    });
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-tracker') || customElements.define('kemet-tracker', KemetTracker);
+
+exports.KemetCarouselCurrent = KemetCarouselCurrent;
+exports.KemetCarouselFirst = KemetCarouselFirst;
+exports.KemetCarouselLast = KemetCarouselLast;
+exports.KemetCarouselPrev = KemetCarouselPrev;
+exports.KemetCarouselTotal = KemetCarouselTotal;
 exports.customTooltip = customTooltip;
 exports.fade = fade;
 exports.fall = fall;