kemet-ui 1.1.0 → 1.2.0

package/dist/kemet-components.cjs

@@ -609,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());
       }
     }
   }
@@ -621,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();
@@ -2965,6 +2967,214 @@ class KemetDrawer extends s$1 {
 // 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-fab') || customElements.define('kemet-fab', KemetFAB);
+
 class KemetField extends s$1 {
   static get styles() {
     return [
@@ -3746,6 +3956,13 @@ class KemetInput extends s$1 {
       inputType: {
         type: String,
       },
+      /**
+       * Determines if the input is focused
+       */
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
     };
   }
 
@@ -3760,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
@@ -3773,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() {
@@ -3887,7 +4109,7 @@ class KemetInput extends s$1 {
    * @private
    */
   handleFocus() {
-    this.hasFocus = true;
+    this.focused = true;
 
     /**
      * Fires when the input receives and loses focus
@@ -3911,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
@@ -3961,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;
 
     /**
@@ -4453,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,
@@ -8756,6 +9254,319 @@ 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;