kemet-ui 1.2.0 → 1.3.0

package/dist/kemet-components.js

@@ -459,107 +459,6 @@ 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;
@@ -911,51 +810,45 @@ class KemetButton extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-button') || customElements.define('kemet-button', KemetButton);
 
-class KemetCarouselCurrent extends s$1 {
+class KemetBadge extends s$1 {
   static get styles() {
     return [
       r$3`
         :host {
-          display: inline-block;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: var(--kemet-badge-padding, 10px);
+          line-height: 1;
+          color: var(--kemet-color-white);
         }
-      `,
-    ];
-  }
 
-  static get properties() {
-    return {
-      current: {
-        type: Number,
-      },
-    };
-  }
+        :host([status='primary']) {
+          background-color: var(--kemet-color-primary);
+        }
 
-  firstUpdated() {
-    this.carousel = this.closest('kemet-carousel');
-  }
+        :host([status='success']) {
+          background-color: var(--kemet-color-success);
+        }
 
-  updated() {
-    this.current = this.carousel.index + 1;
-  }
+        :host([status='standard']) {
+          background-color: var(--kemet-color-gray6);
+        }
 
-  render() {
-    return $`${this.current}`;
-  }
-}
+        :host([status='warning']) {
+          background-color: var(--kemet-color-warning);
+        }
 
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-current') || customElements.define('kemet-carousel-current', KemetCarouselCurrent);
+        :host([status='error']) {
+          background-color: var(--kemet-color-error);
+        }
 
-class KemetCarouselFirst extends s$1 {
-  static get styles() {
-    return [
-      r$3`
-        :host {
-          cursor: pointer;
+        :host([circle]) {
+          border-radius: 50%;
         }
 
-        :host([disabled]) {
-          cursor: not-allowed;
+        :host([pill]) {
+          border-radius: 99rem;
         }
       `,
     ];
@@ -963,195 +856,168 @@ class KemetCarouselFirst extends s$1 {
 
   static get properties() {
     return {
-      disabled: {
+      /**
+       * 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 $`
-      <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
-        <slot></slot>
-      </span>
-    `;
+    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
   }
 
-  first() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-first', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+  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-carousel-first') || customElements.define('kemet-carousel-first', KemetCarouselFirst);
+customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
 
-class KemetCarouselLast extends s$1 {
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const l$1=l=>null!=l?l:w;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const r=o=>void 0===o.strings,f={},s=(o,i=f)=>o._$AH=i;
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const l=e$1(class extends i{constructor(r$1){if(super(r$1),r$1.type!==t.PROPERTY&&r$1.type!==t.ATTRIBUTE&&r$1.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!r(r$1))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===b||t$1===w)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return b}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return b}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return b;return s(i),t$1}});
+
+class KemetCheckbox extends s$1 {
   static get styles() {
     return [
       r$3`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
         :host {
-          cursor: pointer;
+          display: inline-block;
         }
 
         :host([disabled]) {
-          cursor: not-allowed;
+          opacity: 0.5;
         }
-      `,
-    ];
-  }
 
-  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));
+        label {
+          display: inline-flex;
+          gap: 0.5rem;
+          align-items: center;
         }
 
-        :host(:not([selected])) {
+        input {
           cursor: pointer;
+          margin: 0;
+          padding: 0;
+          width: var(--kemet-checkbox-size, 18px);
+          height: var(--kemet-checkbox-size, 18px);
+          position: absolute;
+          opacity: 0;
         }
 
-        :host([disabled]) {
-          cursor: not-allowed;
+        button {
+          margin: 0;
+          border: none;
+          background: none;
         }
-      `,
-    ];
-  }
-
-  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;
+        [part='checkbox'] {
+          color: var(--kemet-checkbox-color, var(--kemet-color-primary));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--kemet-checkbox-size, 18px);
+          height: var(--kemet-checkbox-size, 18px);
+          border: var(--kemet-checkbox-border, 1px solid var(--kemet-color-primary));
         }
 
-        :host([disabled]) {
-          cursor: not-allowed;
+        :host([rounded]) [part='checkbox'] {
+          border-radius: var(--kemet-checkbox-border-radius, 4px);
         }
-      `,
-    ];
-  }
 
-  static get properties() {
-    return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
+        :host([filled][checked]) [part='checkbox'],
+        :host([filled][indeterminate]) [part='checkbox'] {
+          border: none;
+          background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
+        }
 
-  render() {
-    return $`
-      <span tabindex="0" @keyup=${() => this.next()} @click=${() => this.next()}>
-        <slot></slot>
-      </span>
-    `;
-  }
+        [part='mark'] {
+          display: flex;
+          width: calc(var(--kemet-checkbox-size, 18px) - 4px);
+          height: calc(var(--kemet-checkbox-size, 18px) - 4px);
+        }
 
-  next() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-next', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
-    }
-  }
-}
+        :host([filled][checked]) [part='mark'],
+        :host([filled][indeterminate]) [part='mark'] {
+          color: var(--kemet-checkbox-filled-color, var(--kemet-color-white));
+        }
 
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-next') || customElements.define('kemet-carousel-next', KemetCarouselNext);
+        [part='message'] {
+          display: block;
+          margin-top: 0.5rem;
+        }
 
-class KemetCarouselPrev extends s$1 {
-  static get styles() {
-    return [
-      r$3`
-        :host {
-          cursor: pointer;
+        :host([status='error']) [part='message'] {
+          color: var(--kemet-color-error);
         }
 
-        :host([disabled]) {
-          cursor: not-allowed;
+        :host([status='warning']) [part='message'] {
+          color: var(--kemet-color-error);
         }
       `,
     ];
@@ -1159,86 +1025,212 @@ class KemetCarouselPrev extends s$1 {
 
   static get properties() {
     return {
+      label: {
+        type: String,
+      },
+      checked: {
+        type: Boolean,
+        reflect: true,
+      },
+      indeterminate: {
+        type: Boolean,
+        reflect: true,
+      },
+      name: {
+        type: String,
+      },
+      value: {
+        type: String,
+      },
       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: {
+      required: {
         type: Boolean,
         reflect: true,
       },
-      'aria-hidden': {
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
+      rounded: {
+        type: Boolean,
+        reflect: true,
+      },
+      filled: {
+        type: Boolean,
+        reflect: true,
+      },
+      status: {
         type: String,
         reflect: true,
       },
+      message: {
+        type: String,
+      },
     };
   }
 
   constructor() {
     super();
-    this.selected = false;
-    this['aria-hidden'] = 'true';
+
+    // managed properties
+    this.label = '';
+    this.name = 'checkbox';
+    this.disabled = false;
+    this.required = false;
+    this.rounded = false;
+    this.filled = false;
+    this.status = 'standard';
+
+    /**
+     * Used only for form reactive controller
+     */
+    this.formSubmitController = new FormSubmitController(this);
+  }
+
+  firstUpdated() {
+    this.input = this.shadowRoot.querySelector('input');
   }
 
   render() {
     return $`
-      <slot></slot>
+      <label part="label">
+        <input
+          type="checkbox"
+          name=${l$1(this.name)}
+          .value=${this.value}
+          .indeterminate=${l(this.indeterminate)}
+          .checked=${l(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @click=${() => this.handleClick()}
+          @blur=${() => this.handleBlur()}
+          @focus=${() => this.handleFocus()}
+          @change=${() => this.handleChange()}
+        />
+        <button part="checkbox" aria-label=${this.label}>
+          ${this.makeCheckMark()}
+        </button>
+        <span part="text">${this.label}</span>
+      </label>
+      ${this.makeMessage()}
     `;
   }
+
+  click() {
+    this.input.click();
+  }
+
+  handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+
+    /**
+     * Fires when the state of the checkbox changes
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-change', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }),
+    );
+  }
+
+  handleBlur() {
+    this.focused = false;
+
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-focused', {
+        bubbles: true,
+        composed: true,
+        detail: false,
+      }),
+    );
+  }
+
+  handleFocus() {
+    this.focused = true;
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-focused', {
+        bubbles: true,
+        composed: true,
+        detail: true,
+      }),
+    );
+  }
+
+  handleChange() {
+    this.value = this.checked;
+
+    if (this.input.checkValidity()) {
+      this.status = 'standard';
+    }
+  }
+
+  makeMessage() {
+    if (this.status === 'error' || this.status === 'warning') {
+      return $`<span part="message">${this.message}</span>`;
+    }
+
+    return null;
+  }
+
+  makeCheckMark() {
+    if (this.checked) {
+      return $`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(3.428571, 3.428571)">
+                  <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
+                  <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+
+    if (!this.checked && this.indeterminate) {
+      return $`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(2.285714, 6.857143)">
+                  <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+
+    return null;
+  }
+
+  checkValidity() {
+    return this.input.checkValidity();
+  }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-slide') || customElements.define('kemet-carousel-slide', KemetCarouselSlide);
+customElements.get('kemet-checkbox') || customElements.define('kemet-checkbox', KemetCheckbox);
 
-class KemetCarouselTotal extends s$1 {
+class KemetCarouselCurrent extends s$1 {
   static get styles() {
     return [
       r$3`
@@ -1251,7 +1243,7 @@ class KemetCarouselTotal extends s$1 {
 
   static get properties() {
     return {
-      total: {
+      current: {
         type: Number,
       },
     };
@@ -1262,826 +1254,834 @@ class KemetCarouselTotal extends s$1 {
   }
 
   updated() {
-    this.total = this.carousel.total;
+    this.current = this.carousel.index + 1;
   }
 
   render() {
-    return $`${this.total}`;
+    return $`${this.current}`;
   }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-total') || customElements.define('kemet-carousel-total', KemetCarouselTotal);
+customElements.get('kemet-carousel-current') || customElements.define('kemet-carousel-current', KemetCarouselCurrent);
 
-class KemetCarousel extends s$1 {
+class KemetCarouselFirst 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;
-      }
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
 
-      :host(:hover) ::slotted([slot='next']),
-      :host(:hover) ::slotted([slot='prev']) {
-        opacity: var(--kemet-carousel-arrows-opacity-hover, 1);
-      }
-    `;
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
   }
 
   static get properties() {
     return {
-      /**
-       * The current slide index.
-       */
-      index: {
-        type: Number,
+      disabled: {
+        type: Boolean,
         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,
-      },
-    };
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
+        <slot></slot>
+      </span>
+    `;
+  }
 
-    // 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));
+  first() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-first', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
   }
+}
 
-  firstUpdated() {
-    // standard properties
-    this.slides = [];
-    this.links = [];
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-first') || customElements.define('kemet-carousel-first', KemetCarouselFirst);
 
-    // 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');
+class KemetCarouselLast extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
 
-    // events
-    window.addEventListener('resize', () => {
-      this.setSlideSize();
-      this.setToolbarSize();
-      this.updateIndex(this.index);
-    });
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
 
-    this.sliderElement.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
 
-    // methods
-    this.swipeMove = (event) => {
-      event.preventDefault();
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.last()} @click=${() => this.last()}>
+        <slot></slot>
+      </span>
+    `;
+  }
 
-      const pageX = event.touches ? event.touches[0].pageX : event.pageX;
-      const currentSlide = this.slides[this.index];
+  last() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-last', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
 
-      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
-    };
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-last') || customElements.define('kemet-carousel-last', KemetCarouselLast);
 
-    this.handleSlideShow = () => {
-      if (this.getOption('slideshow') > 0) {
-        this.updateIndex(this.index + 1);
-        clearTimeout(this.handleSlideShow);
-      }
+class KemetCarouselLink extends s$1 {
+  static get properties() {
+    return {
+      slide: {
+        type: Number,
+        reflect: true,
+      },
+      selected: {
+        type: Boolean,
+        reflect: true,
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
     };
-
-    // setup
-    this.setSlideSize();
-    this.goToSlide(this.index);
   }
 
-  updated(prevProps) {
-    this.setSlideSize();
-    this.setToolbarSize();
+  static get styles() {
+    return [
+      r$3`
+        :host([selected]) {
+          color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
+        }
 
-    if (prevProps.has('index')) {
-      this.updateIndex(this.index);
-      setTimeout(this.handleSlideShow, this.getOption('slideshow') * 1000);
-    }
+        :host(:not([selected])) {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
   }
 
   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>
+      <span tabindex="0" @keyup=${() => this.changed()} @click=${() => this.changed()}>
+        <slot></slot>
+      </span>
     `;
   }
 
-  swipeStart(event) {
-    this.startX = event.touches ? event.touches[0].pageX : event.pageX;
-
-    this.addEventListener('mousemove', this.swipeMove);
-    this.addEventListener('touchmove', this.swipeMove);
+  changed() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-link', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
   }
+}
 
-  swipeEnd(event) {
-    this.updateIndex(this.swipeUpdate(event));
-    this.removeEventListener('mousemove', this.swipeMove, false);
-    this.removeEventListener('touchmove', this.swipeMove, false);
-  }
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-link') || customElements.define('kemet-carousel-link', KemetCarouselLink);
 
-  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;
+class KemetCarouselNext extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
 
-    let { index } = this;
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
 
-    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;
-    }
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
 
-    return index;
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.next()} @click=${() => this.next()}>
+        <slot></slot>
+      </span>
+    `;
   }
 
-  swipeLeave() {
-    this.updateIndex(this.index);
-    this.removeEventListener('mousemove', this.swipeMove, false);
-    this.removeEventListener('touchmove', this.swipeMove, false);
+  next() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-next', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
   }
+}
 
-  setSlideSize() {
-    this.slideWidth = this.containerElement.offsetWidth / this.getOption('perView');
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-next') || customElements.define('kemet-carousel-next', KemetCarouselNext);
 
-    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`;
-    });
+class KemetCarouselPrev extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
 
-    this.sliderWidth = `${this.slideWidth * this.slides.length}px`;
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
   }
 
-  setToolbarSize() {
-    if (this.inner && this.toolbarElement) {
-      const width = this.slidesElement.offsetWidth;
-      this.toolbarElement.style.width = `${width}px`;
-    }
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
   }
 
-  makeToolbar() {
-    if (this.toolbarSlotElement) {
-      return $`
-        <section class="toolbar" part="toolbar">
-          <slot name="toolbar"></slot>
-        </section>
-      `;
-    }
-
-    return null;
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
+        <slot></slot>
+      </span>
+    `;
   }
 
-  handleSlotChange() {
-    const slides = this.querySelectorAll('kemet-carousel-slide');
-    const links = this.querySelectorAll('kemet-carousel-link');
+  prev() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
 
-    // handle slides
-    slides.forEach((slide) => {
-      this.slides.push(slide);
-    });
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-prev') || customElements.define('kemet-carousel-prev', KemetCarouselPrev);
 
-    this.updateInformation();
-    this.total = slides.length;
-    slides[this.index].selected = true;
+class KemetCarouselSlide extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host,
+        :host *,
+        :host *::before,
+        *::after {
+          box-sizing: border-box;
+        }
 
-    // handle links
-    links.forEach((link) => {
-      this.links.push(link);
-    });
+        :host {
+          flex: 0 0 auto;
+        }
+      `,
+    ];
   }
 
-  handleArrows() {
-    this.arrows = true;
+  static get properties() {
+    return {
+      /**
+       * Determines if the slide is selected
+       */
+      selected: {
+        type: Boolean,
+        reflect: true,
+      },
+      'aria-hidden': {
+        type: String,
+        reflect: true,
+      },
+    };
   }
 
-  handleFirst() {
-    this.updateIndex(0);
+  constructor() {
+    super();
+    this.selected = false;
+    this['aria-hidden'] = 'true';
   }
 
-  handleLast() {
-    this.updateIndex(this.slides.length - 1);
+  render() {
+    return $`
+      <slot></slot>
+    `;
   }
+}
 
-  handleNext() {
-    let newIndex = this.index + this.getOption('perMove');
-
-    if (newIndex >= this.slides.length) {
-      if (this.getOption('rewind')) {
-        newIndex = 0;
-      } else {
-        newIndex = this.index;
-      }
-    }
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-slide') || customElements.define('kemet-carousel-slide', KemetCarouselSlide);
 
-    this.updateIndex(newIndex);
+class KemetCarouselTotal extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          display: inline-block;
+        }
+      `,
+    ];
   }
 
-  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);
+  static get properties() {
+    return {
+      total: {
+        type: Number,
+      },
+    };
   }
 
-  updateIndex(newIndex) {
-    let currentSlide = this.slides[this.index];
-    let currentLink = this.links[newIndex];
+  firstUpdated() {
+    this.carousel = this.closest('kemet-carousel');
+  }
 
-    // remove selected from all links
-    this.links.forEach((link) => {
-      link.selected = false;
-    });
+  updated() {
+    this.total = this.carousel.total;
+  }
 
-    // if current link is invalid assume it's the first link
-    if (!currentLink) {
-      [currentLink] = this.links;
-    }
+  render() {
+    return $`${this.total}`;
+  }
+}
 
-    // add selected to current link
-    if (currentLink) {
-      currentLink.selected = true;
-    }
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-total') || customElements.define('kemet-carousel-total', KemetCarouselTotal);
 
-    if (currentSlide) {
-      currentSlide.setAttribute('aria-hidden', 'true');
+class KemetCarousel extends s$1 {
+  static get styles() {
+    return r$3`
+      :host,
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
 
-      // 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;
+      :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;
       }
 
-      // move
-      this.goToSlide(this.index);
+      :host([arrows]) {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+      }
 
-      // update new slide
-      currentSlide = this.slides[this.index];
-      currentSlide.setAttribute('aria-hidden', 'false');
-
-      this.slides.forEach((slide) => {
-        slide.selected = false;
-      });
-
-      currentSlide.selected = true;
+      .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);
+      }
 
-      // notify consumers of slide change
+      :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));
+      }
 
-      /**
-       * Fires with the a slide has begun to change
-       */
-      this.dispatchEvent(new CustomEvent('kemet-carousel-change-start', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+      .slides {
+        overflow: hidden;
+        position: relative;
+        padding: 1rem 0;
+        border: var(--kemet-carousel-slides-border, 1px solid var(--kemet-color-gray1));
+      }
 
-      // update information element
-      this.updateInformation();
-    }
-  }
+      .slider {
+        display: flex;
+        flex-wrap: nowrap;
+        transition: transform var(--kemet-carousel-transition-speed, 300ms) ease;
+      }
 
-  updateInformation() {
-    this.informationSlot = this.slides[this.index].querySelector('[slot="information"]');
+      ::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;
+      }
 
-    if (this.informationElement) {
-      if (this.informationSlot) {
-        this.informationElement.innerHTML = this.informationSlot.outerHTML;
-      } else {
-        this.informationElement.innerHTML = '';
+      :host(:hover) ::slotted([slot='next']),
+      :host(:hover) ::slotted([slot='prev']) {
+        opacity: var(--kemet-carousel-arrows-opacity-hover, 1);
       }
-    }
+    `;
   }
 
-  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`;
-    }
+  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,
+      },
+    };
   }
 
-  handleTransitionEnd() {
-    const currentElement = this.querySelector('kemet-carousel-current');
-
-    if (currentElement) {
-      currentElement.current = this.index + 1;
-    }
+  constructor() {
+    super();
 
-    /**
-     * Fires when a slide has changed and finished animating
-     */
-    this.dispatchEvent(new CustomEvent('kemet-carousel-change-finished', {
-      bubbles: true,
-      composed: true,
-      detail: this,
-    }));
-  }
+    // 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,
+      },
+    };
 
-  handleLink(event) {
-    this.updateIndex(event.detail.slide);
+    // 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));
   }
 
-  getOption(option) {
-    const breakpoints = Object.keys(this.breakpoints);
-    let value = this.options[option];
+  firstUpdated() {
+    // standard properties
+    this.slides = [];
+    this.links = [];
 
-    breakpoints.forEach((breakpoint) => {
-      if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== undefined) {
-        value = this.breakpoints[breakpoint][option];
-      }
+    // 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');
 
-      return value;
+    // events
+    window.addEventListener('resize', () => {
+      this.setSlideSize();
+      this.setToolbarSize();
+      this.updateIndex(this.index);
     });
 
-    return value;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel') || customElements.define('kemet-carousel', KemetCarousel);
+    this.sliderElement.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const l$1=l=>null!=l?l:w;
+    // methods
+    this.swipeMove = (event) => {
+      event.preventDefault();
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+      const pageX = event.touches ? event.touches[0].pageX : event.pageX;
+      const currentSlide = this.slides[this.index];
 
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const r=o=>void 0===o.strings,f={},s=(o,i=f)=>o._$AH=i;
+      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
+    };
 
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const l=e$1(class extends i{constructor(r$1){if(super(r$1),r$1.type!==t.PROPERTY&&r$1.type!==t.ATTRIBUTE&&r$1.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!r(r$1))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===b||t$1===w)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return b}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return b}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return b;return s(i),t$1}});
+    this.handleSlideShow = () => {
+      if (this.getOption('slideshow') > 0) {
+        this.updateIndex(this.index + 1);
+        clearTimeout(this.handleSlideShow);
+      }
+    };
 
-class KemetCheckbox extends s$1 {
-  static get styles() {
-    return [
-      r$3`
-        *,
-        *::before,
-        *::after {
-          box-sizing: border-box;
-        }
+    // setup
+    this.setSlideSize();
+    this.goToSlide(this.index);
+  }
 
-        :host {
-          display: inline-block;
-        }
+  updated(prevProps) {
+    this.setSlideSize();
+    this.setToolbarSize();
 
-        :host([disabled]) {
-          opacity: 0.5;
-        }
+    if (prevProps.has('index')) {
+      this.updateIndex(this.index);
+      setTimeout(this.handleSlideShow, this.getOption('slideshow') * 1000);
+    }
+  }
 
-        label {
-          display: inline-flex;
-          gap: 0.5rem;
-          align-items: center;
-        }
+  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>
+    `;
+  }
 
-        input {
-          cursor: pointer;
-          margin: 0;
-          padding: 0;
-          width: var(--kemet-checkbox-size, 18px);
-          height: var(--kemet-checkbox-size, 18px);
-          position: absolute;
-          opacity: 0;
-        }
+  swipeStart(event) {
+    this.startX = event.touches ? event.touches[0].pageX : event.pageX;
 
-        button {
-          margin: 0;
-          border: none;
-          background: none;
-        }
+    this.addEventListener('mousemove', this.swipeMove);
+    this.addEventListener('touchmove', this.swipeMove);
+  }
 
-        [part='checkbox'] {
-          color: var(--kemet-checkbox-color, var(--kemet-color-primary));
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: var(--kemet-checkbox-size, 18px);
-          height: var(--kemet-checkbox-size, 18px);
-          border: var(--kemet-checkbox-border, 1px solid var(--kemet-color-primary));
-        }
+  swipeEnd(event) {
+    this.updateIndex(this.swipeUpdate(event));
+    this.removeEventListener('mousemove', this.swipeMove, false);
+    this.removeEventListener('touchmove', this.swipeMove, false);
+  }
 
-        :host([rounded]) [part='checkbox'] {
-          border-radius: var(--kemet-checkbox-border-radius, 4px);
-        }
+  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;
 
-        :host([filled][checked]) [part='checkbox'],
-        :host([filled][indeterminate]) [part='checkbox'] {
-          border: none;
-          background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
-        }
+    let { index } = this;
 
-        [part='mark'] {
-          display: flex;
-          width: calc(var(--kemet-checkbox-size, 18px) - 4px);
-          height: calc(var(--kemet-checkbox-size, 18px) - 4px);
-        }
+    if (shouldUpdate && direction === 'right') {
+      index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;
+    }
 
-        :host([filled][checked]) [part='mark'],
-        :host([filled][indeterminate]) [part='mark'] {
-          color: var(--kemet-checkbox-filled-color, var(--kemet-color-white));
-        }
+    if (shouldUpdate && direction === 'left') {
+      index = this.index < 1 ? 0 : this.index - 1;
+    }
 
-        [part='message'] {
-          display: block;
-          margin-top: 0.5rem;
-        }
+    return index;
+  }
 
-        :host([status='error']) [part='message'] {
-          color: var(--kemet-color-error);
-        }
+  swipeLeave() {
+    this.updateIndex(this.index);
+    this.removeEventListener('mousemove', this.swipeMove, false);
+    this.removeEventListener('touchmove', this.swipeMove, false);
+  }
 
-        :host([status='warning']) [part='message'] {
-          color: var(--kemet-color-error);
-        }
-      `,
-    ];
+  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`;
   }
 
-  static get properties() {
-    return {
-      label: {
-        type: String,
-      },
-      checked: {
-        type: Boolean,
-        reflect: true,
-      },
-      indeterminate: {
-        type: Boolean,
-        reflect: true,
-      },
-      name: {
-        type: String,
-      },
-      value: {
-        type: String,
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-      required: {
-        type: Boolean,
-        reflect: true,
-      },
-      focused: {
-        type: Boolean,
-        reflect: true,
-      },
-      rounded: {
-        type: Boolean,
-        reflect: true,
-      },
-      filled: {
-        type: Boolean,
-        reflect: true,
-      },
-      status: {
-        type: String,
-        reflect: true,
-      },
-      message: {
-        type: String,
-      },
-    };
+  setToolbarSize() {
+    if (this.inner && this.toolbarElement) {
+      const width = this.slidesElement.offsetWidth;
+      this.toolbarElement.style.width = `${width}px`;
+    }
   }
 
-  constructor() {
-    super();
+  makeToolbar() {
+    if (this.toolbarSlotElement) {
+      return $`
+        <section class="toolbar" part="toolbar">
+          <slot name="toolbar"></slot>
+        </section>
+      `;
+    }
 
-    // managed properties
-    this.label = '';
-    this.name = 'checkbox';
-    this.disabled = false;
-    this.required = false;
-    this.rounded = false;
-    this.filled = false;
-    this.status = 'standard';
+    return null;
+  }
 
-    /**
-     * Used only for form reactive controller
-     */
-    this.formSubmitController = new FormSubmitController(this);
+  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);
+    });
   }
 
-  firstUpdated() {
-    this.input = this.shadowRoot.querySelector('input');
+  handleArrows() {
+    this.arrows = true;
   }
 
-  render() {
-    return $`
-      <label part="label">
-        <input
-          type="checkbox"
-          name=${l$1(this.name)}
-          .value=${this.value}
-          .indeterminate=${l(this.indeterminate)}
-          .checked=${l(this.checked)}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          aria-checked=${this.checked ? 'true' : 'false'}
-          @click=${() => this.handleClick()}
-          @blur=${() => this.handleBlur()}
-          @focus=${() => this.handleFocus()}
-          @change=${() => this.handleChange()}
-        />
-        <button part="checkbox" aria-label=${this.label}>
-          ${this.makeCheckMark()}
-        </button>
-        <span part="text">${this.label}</span>
-      </label>
-      ${this.makeMessage()}
-    `;
+  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);
   }
 
-  click() {
-    this.input.click();
-  }
+  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);
+  }
+
+  updateIndex(newIndex) {
+    let currentSlide = this.slides[this.index];
+    let currentLink = this.links[newIndex];
+
+    // remove selected from all links
+    this.links.forEach((link) => {
+      link.selected = false;
+    });
+
+    // if current link is invalid assume it's the first link
+    if (!currentLink) {
+      [currentLink] = this.links;
+    }
+
+    // add selected to current link
+    if (currentLink) {
+      currentLink.selected = true;
+    }
+
+    if (currentSlide) {
+      currentSlide.setAttribute('aria-hidden', 'true');
+
+      // 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);
 
-  handleClick() {
-    this.checked = !this.checked;
-    this.indeterminate = false;
+      // update new slide
+      currentSlide = this.slides[this.index];
+      currentSlide.setAttribute('aria-hidden', 'false');
 
-    /**
-     * Fires when the state of the checkbox changes
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-checkbox-change', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
-  }
+      this.slides.forEach((slide) => {
+        slide.selected = false;
+      });
 
-  handleBlur() {
-    this.focused = false;
+      currentSlide.selected = true;
 
-    /**
-     * Fires when the checkbox loses or receives focus
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-checkbox-focused', {
-        bubbles: true,
-        composed: true,
-        detail: false,
-      }),
-    );
-  }
+      // notify consumers of slide change
 
-  handleFocus() {
-    this.focused = true;
-    /**
-     * Fires when the checkbox loses or receives focus
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-checkbox-focused', {
+      /**
+       * Fires with the a slide has begun to change
+       */
+      this.dispatchEvent(new CustomEvent('kemet-carousel-change-start', {
         bubbles: true,
         composed: true,
-        detail: true,
-      }),
-    );
+        detail: this,
+      }));
+
+      // update information element
+      this.updateInformation();
+    }
   }
 
-  handleChange() {
-    this.value = this.checked;
+  updateInformation() {
+    this.informationSlot = this.slides[this.index].querySelector('[slot="information"]');
 
-    if (this.input.checkValidity()) {
-      this.status = 'standard';
+    if (this.informationElement) {
+      if (this.informationSlot) {
+        this.informationElement.innerHTML = this.informationSlot.outerHTML;
+      } else {
+        this.informationElement.innerHTML = '';
+      }
     }
   }
 
-  makeMessage() {
-    if (this.status === 'error' || this.status === 'warning') {
-      return $`<span part="message">${this.message}</span>`;
+  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`;
     }
-
-    return null;
   }
 
-  makeCheckMark() {
-    if (this.checked) {
-      return $`
-        <span part="mark">
-          <svg viewBox="0 0 16 16">
-            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-              <g stroke="currentColor" stroke-width="2">
-                <g transform="translate(3.428571, 3.428571)">
-                  <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
-                  <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
-                </g>
-              </g>
-            </g>
-          </svg>
-        </span>
-      `;
-    }
+  handleTransitionEnd() {
+    const currentElement = this.querySelector('kemet-carousel-current');
 
-    if (!this.checked && this.indeterminate) {
-      return $`
-        <span part="mark">
-          <svg viewBox="0 0 16 16">
-            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-              <g stroke="currentColor" stroke-width="2">
-                <g transform="translate(2.285714, 6.857143)">
-                  <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
-                </g>
-              </g>
-            </g>
-          </svg>
-        </span>
-      `;
+    if (currentElement) {
+      currentElement.current = this.index + 1;
     }
 
-    return null;
+    /**
+     * Fires when a slide has changed and finished animating
+     */
+    this.dispatchEvent(new CustomEvent('kemet-carousel-change-finished', {
+      bubbles: true,
+      composed: true,
+      detail: this,
+    }));
   }
 
-  checkValidity() {
-    return this.input.checkValidity();
+  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-checkbox') || customElements.define('kemet-checkbox', KemetCheckbox);
+customElements.get('kemet-carousel') || customElements.define('kemet-carousel', KemetCarousel);
 
 class KemetCombo extends s$1 {
   static get styles() {
@@ -2167,7 +2167,7 @@ class KemetCombo extends s$1 {
     this.input = this.field.querySelector('[slot="input"]');
 
     // managed properties
-    this.slug = this.field.slug;
+    this.slug = this.field.slug || 'slug';
 
     // events listeners
     this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
@@ -2182,7 +2182,7 @@ class KemetCombo extends s$1 {
         aria-controls="${this.slug}-listbox"
         aria-haspopup="listbox"
         id="${this.slug}-combobox"
-        aria-label="${this.field.label}"
+        aria-label="${this.field?.label}"
       >
         <ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox">
           ${this.makeOptions()}
@@ -2237,7 +2237,11 @@ class KemetCombo extends s$1 {
       new CustomEvent('kemet-combo-selection', {
         bubbles: true,
         composed: true,
-        detail: event.target.getAttribute('id'),
+        detail: {
+          element: event.target,
+          text: event.target.innerText,
+          id: event.target.getAttribute('id'),
+        },
       }),
     );
   }
@@ -4667,7 +4671,7 @@ class KemetModal extends s$1 {
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
       setTimeout(() => {
-        this.focusableElements[0].focus();
+        this.focusableElements[0]?.focus();
       }, 100);
 
       /**
@@ -7490,42 +7494,185 @@ class KemetSelect extends s$1 {
     }
   }
 
-  /**
-   * Handles when the input has an error
-   * @private
-   */
-  handleInvalid() {
-    this.invalid = true;
-    this.status = 'error';
+  /**
+   * Handles when the input has an error
+   * @private
+   */
+  handleInvalid() {
+    this.invalid = true;
+    this.status = 'error';
+
+    /**
+     * Fires when there's a change in status
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-input-status', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          status: 'error',
+          validity: this.select.validity,
+          element: this,
+        },
+      }),
+    );
+  }
+
+  /**
+   * Checks the validity of the standard select
+   * @public
+   * @returns {boolean}
+   */
+  checkValidity() {
+    this.select.checkValidity();
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-select') || customElements.define('kemet-select', KemetSelect);
+
+class KemetSortableItem extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: grab;
+          display: block;
+          padding: 1rem;
+          border: 1px solid var(--kemet-color-primary);
+        }
+
+        :host([ghost]) {
+          opacity: 0.5;
+          border-style: dashed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /* Automatically set to true when an item is dragged to a new spot */
+      ghost: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  firstUpdated() {
+    this.draggable = true;
+  }
+
+  render() {
+    return $`<slot></slot>`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-sortable-item') || customElements.define('kemet-sortable-item', KemetSortableItem);
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var index_min = {exports: {}};
+
+/*! mobile-drag-drop 2.1.0 | Copyright (c) 2017 Tim Ruffles | MIT License */
+
+(function (module, exports) {
+	!function(a,b){b(exports);}(commonjsGlobal,function(a){function b(){var a={dragEvents:"ondragstart"in document.documentElement,draggable:"draggable"in document.documentElement,touchEvents:"ontouchstart"in document.documentElement,userAgentSupportingNativeDnD:void 0},b=!!window.chrome||/chrome/i.test(navigator.userAgent);return a.userAgentSupportingNativeDnD=!(/iPad|iPhone|iPod|Android/.test(navigator.userAgent)||b&&a.touchEvents),a}function c(){var a=!1;try{var b=Object.defineProperty({},"passive",{get:function(){a=!0;}});window.addEventListener("test",null,b);}catch(a){}return a}function d(a){if(a&&Object.keys(a).forEach(function(b){B[b]=a[b];}),!B.forceApply){var d=b();if(d.userAgentSupportingNativeDnD&&d.draggable&&d.dragEvents)return !1}return y=c(),B.holdToDrag?h("touchstart",w,!1):h("touchstart",e,!1),!0}function e(a){if(!z){var b=f(a);if(b)try{z=new J(a,B,b,g);}catch(b){throw g(B,a,3),b}}}function f(a){var b=a.target;do if(b.draggable!==!1&&b.getAttribute&&"true"===b.getAttribute("draggable"))return b;while((b=b.parentNode)&&b!==document.body)}function g(a,b,c){if(0===c&&a.defaultActionOverride)try{a.defaultActionOverride(b),b.defaultPrevented;}catch(a){}z=null;}function h(a,b,c){void 0===c&&(c=!0),document.addEventListener(a,b,!!y&&{passive:c});}function i(a,b){document.removeEventListener(a,b);}function j(a){return 0===a.length?0:a.reduce(function(a,b){return b+a},0)/a.length}function k(a){return a&&a.tagName}function l(a,b){for(var c=0;c<a.changedTouches.length;c++){var d=a.changedTouches[c];if(d.identifier===b)return !0}return !1}function m(a,b,c,d,e,f,g){void 0===g&&(g=null);var h=b.changedTouches[0],i=new Event(c,{bubbles:!0,cancelable:d});i.dataTransfer=f,i.relatedTarget=g,i.screenX=h.screenX,i.screenY=h.screenY,i.clientX=h.clientX,i.clientY=h.clientY,i.pageX=h.pageX,i.pageY=h.pageY;var j=a.getBoundingClientRect();return i.offsetX=i.clientX-j.left,i.offsetY=i.clientY-j.top,i}function n(a,b,c){for(var d=[],e=[],f=0;f<b.touches.length;f++){var g=b.touches[f];d.push(g[a+"X"]),e.push(g[a+"Y"]);}c.x=j(d),c.y=j(e);}function o(a,b){if(1===a.nodeType){for(var c=getComputedStyle(a),d=0;d<c.length;d++){var e=c[d];b.style.setProperty(e,c.getPropertyValue(e),c.getPropertyPriority(e));}b.style.pointerEvents="none",b.removeAttribute("id"),b.removeAttribute("class"),b.removeAttribute("draggable");}if(a.hasChildNodes())for(var d=0;d<a.childNodes.length;d++)o(a.childNodes[d],b.childNodes[d]);}function p(a){var b=a.cloneNode(!0);return o(a,b),b.style.position="absolute",b.style.left="0px",b.style.top="0px",b.style.zIndex="999999",b.classList.add(G),b.classList.add(I),b}function q(a){return E.map(function(b){var c=a.style[b+"transform"];return c&&"none"!==c?c.replace(/translate\(\D*\d+[^,]*,\D*\d+[^,]*\)\s*/g,""):""})}function r(a,b,c,d,e){void 0===e&&(e=!0);var f=b.x,g=b.y;d&&(f+=d.x,g+=d.y),e&&(f-=parseInt(a.offsetWidth,10)/2,g-=parseInt(a.offsetHeight,10)/2);for(var h="translate3d("+f+"px,"+g+"px, 0)",i=0;i<E.length;i++){var j=E[i]+"transform";a.style[j]=h+" "+c[i];}}function s(a,b,c,d){var e=getComputedStyle(a);if("hidden"===e.visibility||"none"===e.display)return void d();b.classList.add(H);var f=getComputedStyle(b),g=parseFloat(f.transitionDuration);if(isNaN(g)||0===g)return void d();var h=a.getBoundingClientRect(),i={x:h.left,y:h.top};i.x+=document.body.scrollLeft||document.documentElement.scrollLeft,i.y+=document.body.scrollTop||document.documentElement.scrollTop,i.x-=parseInt(e.marginLeft,10),i.y-=parseInt(e.marginTop,10);var j=parseFloat(f.transitionDelay),k=Math.round(1e3*(g+j));r(b,i,c,void 0,!1),setTimeout(d,k);}function t(a,b){return a?a===C[0]?D[0]:0===a.indexOf(C[1])||a===C[7]?D[1]:0===a.indexOf(C[4])?D[3]:a===C[6]?D[2]:D[1]:3===b.nodeType&&"A"===b.tagName?D[3]:D[1]}function u(a,b,c,d,e,f,g){if(void 0===f&&(f=!0),void 0===g&&(g=null),A);var k=m(b,c,a,f,document.defaultView,e,g),l=!b.dispatchEvent(k);return d.g=0,l}function v(a,b){if(!a||a===C[7])return b;if(b===D[1]){if(0===a.indexOf(D[1]))return D[1]}else if(b===D[3]){if(0===a.indexOf(D[3])||a.indexOf("Link")>-1)return D[3]}else if(b===D[2]&&(0===a.indexOf(D[2])||a.indexOf("Move")>-1))return D[2];return D[0]}function w(a){var b=a.target,c=function(){g.off(),h.off(),i.off(),e(a);},d=function(){g.off(),h.off(),i.off(),clearTimeout(f);},f=setTimeout(c,B.holdToDrag),g=x(b,"touchend",d,this),h=x(b,"touchcancel",d,this),i=x(window,"scroll",d,this);}function x(a,b,c,d){return d&&(c=c.bind(d)),a.addEventListener(b,c),{off:function(){return a.removeEventListener(b,c)}}}var y,z,A=!1,B={iterationInterval:150},C=["none","copy","copyLink","copyMove","link","linkMove","move","all"],D=["none","copy","move","link"],E=["","-webkit-"],F="dnd-poly-",G=F+"drag-image",H=F+"snapback",I=F+"icon",J=function(){function a(a,b,c,d){this.h=a,this.i=b,this.j=c,this.k=d,this.l=0,this.m=null,this.o=null,this.p=a,this.q=a.changedTouches[0],this.s=this.t.bind(this),this.u=this.v.bind(this),h("touchmove",this.s,!1),h("touchend",this.u,!1),h("touchcancel",this.u,!1);}return a.prototype.A=function(){var a=this;this.l=1,this.B=D[0],this.C={D:{},F:void 0,g:3,G:[]},this.H={x:null,y:null},this.I={x:null,y:null};var b=this.j;if(this.J=new K(this.C,function(c,d,e){b=c,"number"!=typeof d&&"number"!=typeof e||(a.K={x:d||0,y:e||0});}),this.C.g=2,this.J.dropEffect=D[0],u("dragstart",this.j,this.p,this.C,this.J))return this.l=3,this.L(),!1;if(n("page",this.p,this.I),this.M=p(b),this.N=q(this.M),!this.K)if(this.i.dragImageOffset)this.K={x:this.i.dragImageOffset.x,y:this.i.dragImageOffset.y};else if(this.i.dragImageCenterOnTouch){var c=getComputedStyle(b);this.K={x:0-parseInt(c.marginLeft,10),y:0-parseInt(c.marginTop,10)};}else {var d=b.getBoundingClientRect(),c=getComputedStyle(b);this.K={x:d.left-this.q.clientX-parseInt(c.marginLeft,10)+d.width/2,y:d.top-this.q.clientY-parseInt(c.marginTop,10)+d.height/2};}return r(this.M,this.I,this.N,this.K,this.i.dragImageCenterOnTouch),document.body.appendChild(this.M),this.O=setInterval(function(){a.P||(a.P=!0,a.R(),a.P=!1);},this.i.iterationInterval),!0},a.prototype.L=function(){this.O&&(clearInterval(this.O),this.O=null),i("touchmove",this.s),i("touchend",this.u),i("touchcancel",this.u),this.M&&(this.M.parentNode.removeChild(this.M),this.M=null),this.k(this.i,this.p,this.l);},a.prototype.t=function(a){var b=this;if(l(a,this.q.identifier)!==!1){if(this.p=a,0===this.l){var c=void 0;if(this.i.dragStartConditionOverride)try{c=this.i.dragStartConditionOverride(a);}catch(a){c=!1;}else c=1===a.touches.length;return c?void(this.A()===!0&&(this.h.preventDefault(),a.preventDefault())):void this.L()}if(a.preventDefault(),n("client",a,this.H),n("page",a,this.I),this.i.dragImageTranslateOverride)try{var d=!1;if(this.i.dragImageTranslateOverride(a,{x:this.H.x,y:this.H.y},this.m,function(a,c){b.M&&(d=!0,b.H.x+=a,b.H.y+=c,b.I.x+=a,b.I.y+=c,r(b.M,b.I,b.N,b.K,b.i.dragImageCenterOnTouch));}),d)return}catch(a){}r(this.M,this.I,this.N,this.K,this.i.dragImageCenterOnTouch);}},a.prototype.v=function(a){if(l(a,this.q.identifier)!==!1){if(this.i.dragImageTranslateOverride)try{this.i.dragImageTranslateOverride(void 0,void 0,void 0,function(){});}catch(a){}if(0===this.l)return void this.L();a.preventDefault(),this.l="touchcancel"===a.type?3:2;}},a.prototype.R=function(){var a=this;var e=this.B;this.C.g=3,this.J.dropEffect=D[0];var f=u("drag",this.j,this.p,this.C,this.J);if(f&&(this.B=D[0]),f||2===this.l||3===this.l){var g=this.S(this.l);return g?void s(this.j,this.M,this.N,function(){a.T();}):void this.T()}var h=document.elementFromPoint(this.H.x,this.H.y),i=this.o;h!==this.m&&h!==this.o&&(this.m=h,null!==this.o&&(this.C.g=3,this.J.dropEffect=D[0],u("dragexit",this.o,this.p,this.C,this.J,!1)),null===this.m?this.o=this.m:(this.C.g=3,this.J.dropEffect=t(this.C.F,this.j),u("dragenter",this.m,this.p,this.C,this.J)?(this.o=this.m,this.B=v(this.J.effectAllowed,this.J.dropEffect)):this.m!==document.body&&(this.o=document.body))),i!==this.o&&k(i)&&(this.C.g=3,this.J.dropEffect=D[0],u("dragleave",i,this.p,this.C,this.J,!1,this.o)),k(this.o)&&(this.C.g=3,this.J.dropEffect=t(this.C.F,this.j),u("dragover",this.o,this.p,this.C,this.J)===!1?this.B=D[0]:this.B=v(this.J.effectAllowed,this.J.dropEffect)),e!==this.B&&this.M.classList.remove(F+e);var j=F+this.B;this.M.classList.contains(j)===!1&&this.M.classList.add(j);},a.prototype.S=function(a){var d=this.B===D[0]||null===this.o||3===a;return d?k(this.o)&&(this.C.g=3,this.J.dropEffect=D[0],u("dragleave",this.o,this.p,this.C,this.J,!1)):k(this.o)&&(this.C.g=1,this.J.dropEffect=this.B,u("drop",this.o,this.p,this.C,this.J)===!0?this.B=this.J.dropEffect:this.B=D[0]),d},a.prototype.T=function(){this.C.g=3,this.J.dropEffect=this.B,u("dragend",this.j,this.p,this.C,this.J,!1),this.l=2,this.L();},a}(),K=function(){function a(a,b){this.U=a,this.V=b,this.W=D[0];}return Object.defineProperty(a.prototype,"types",{get:function(){if(0!==this.U.g)return Object.freeze(this.U.G)},enumerable:!0,configurable:!0}),a.prototype.setData=function(a,b){if(2===this.U.g){if(a.indexOf(" ")>-1)throw new Error("illegal arg: type contains space");this.U.D[a]=b,this.U.G.indexOf(a)===-1&&this.U.G.push(a);}},a.prototype.getData=function(a){if(1===this.U.g||2===this.U.g)return this.U.D[a]||""},a.prototype.clearData=function(a){if(2===this.U.g){if(a&&this.U.D[a]){delete this.U.D[a];var b=this.U.G.indexOf(a);return void(b>-1&&this.U.G.splice(b,1))}this.U.D={},this.U.G=[];}},a.prototype.setDragImage=function(a,b,c){2===this.U.g&&this.V(a,b,c);},Object.defineProperty(a.prototype,"effectAllowed",{get:function(){return this.U.F},set:function(a){2===this.U.g&&C.indexOf(a)>-1&&(this.U.F=a);},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"dropEffect",{get:function(){return this.W},set:function(a){0!==this.U.g&&C.indexOf(a)>-1&&(this.W=a);},enumerable:!0,configurable:!0}),a}();a.polyfill=d,Object.defineProperty(a,"__esModule",{value:!0});});
+	
+} (index_min, index_min.exports));
+
+const getMouseOffset = (event) => {
+  const targetRect = event.target.getBoundingClientRect();
+  const offset = {
+    x: event.pageX - targetRect.left,
+    y: event.pageY - targetRect.top,
+  };
+
+  return offset;
+};
+
+const getElementVerticalCenter = (element) => {
+  const rect = element.getBoundingClientRect();
+  return (rect.bottom - rect.top) / 2;
+};
+
+class KemetSortable extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          display: flex;
+          gap: 1rem;
+          flex-direction: column;
+        }
+      `,
+    ];
+  }
+
+  firstUpdated() {
+    index_min.exports.polyfill();
+
+    this.addEventListener('dragstart', event => this.handleDragStart(event), false);
+    this.addEventListener('dragenter', (event) => { event.preventDefault(); });
+  }
+
+  render() {
+    return $`<slot></slot>`;
+  }
+
+  handleDragStart(event) {
+    this.sortableItem = event.target;
+
+    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);
+    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);
+
+    setTimeout(() => {
+      this.sortableItem.ghost = true;
+    }, 0);
+  }
+
+  handleDragOver(event) {
+    event.preventDefault();
+
+    const { target } = event;
+
+    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {
+      const offset = getMouseOffset(event);
+      const middleY = getElementVerticalCenter(event.target);
+
+      if (offset.y > middleY) {
+        this.insertBefore(this.sortableItem, target.nextSibling);
+      } else {
+        this.insertBefore(this.sortableItem, target);
+      }
+    }
+  }
+
+  handleDragEnd(event) {
+    event.preventDefault();
+    this.sortableItem.ghost = false;
 
     /**
-     * Fires when there's a change in status
+     * Fires when an item has been moved to a new spot
      */
     this.dispatchEvent(
-      new CustomEvent('kemet-input-status', {
+      new CustomEvent('kemet-sortable-drag-end', {
         bubbles: true,
         composed: true,
         detail: {
-          status: 'error',
-          validity: this.select.validity,
-          element: this,
+          event,
+          current: this.sortableItem,
+          all: this.querySelectorAll('kemet-sortable-item'),
         },
       }),
     );
   }
-
-  /**
-   * Checks the validity of the standard select
-   * @public
-   * @returns {boolean}
-   */
-  checkValidity() {
-    this.select.checkValidity();
-  }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-select') || customElements.define('kemet-select', KemetSelect);
+customElements.get('kemet-sortable') || customElements.define('kemet-sortable', KemetSortable);
 
 class KemetSVG extends s$1 {
   static get styles() {
@@ -9015,101 +9162,487 @@ class KemetTextarea extends s$1 {
     return this.textarea.checkValidity();
   }
 
-  /**
-   * Focuses the standard input
-   * @public
-   */
-  focus() {
-    return this.textarea.focus();
+  /**
+   * Focuses the standard input
+   * @public
+   */
+  focus() {
+    return this.textarea.focus();
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-textarea') || customElements.define('kemet-textarea', KemetTextarea);
+
+class KemetToggle extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          --kemet-toggle-width: 3.5rem;
+          --kemet-toggle-height: 2rem;
+          --kemet-toggle-handle-diameter: 1.6rem;
+          --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
+
+          display: flex;
+          align-items: center;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+        }
+
+        label {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          font-size: inherit;
+          color: inherit;
+        }
+
+        :host([disabled]) label {
+          cursor: not-allowed;
+        }
+
+        input {
+          display: none;
+        }
+
+        [part='control'] {
+          position: relative;
+          display: inline-flex;
+          margin: 0;
+          width: var(--kemet-toggle-width);
+          height: var(--kemet-toggle-height);
+        }
+
+        [part='control'] > span {
+          transition: 300ms ease-in-out;
+        }
+
+        [part='track'] {
+          width: var(--kemet-toggle-width);
+          height: var(--kemet-toggle-height);
+          border: var(--kemet-toggle-track-border, none);
+          border-radius: var(--kemet-toggle-height);
+          background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));
+          box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));
+        }
+
+        :host([squared]) [part='track'] {
+          border-radius: 0;
+        }
+
+        [part='handle'] {
+          position: absolute;
+          top: var(--kemet-toggle-handle-margin);
+          left: var(--kemet-toggle-handle-margin);
+          width: var(--kemet-toggle-handle-diameter);
+          height: var(--kemet-toggle-handle-diameter);
+          transform: translateX(0);
+          border: var(--kemet-toggle-handle-border, none);
+          border-radius: var(--kemet-toggle-handle-diameter);
+          background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));
+          box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));
+        }
+
+        :host([squared]) [part='handle'] {
+          border-radius: 0;
+        }
+
+        :host([checked]) [part='handle'] {
+          transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
+        }
+
+        .option {
+          font-size: 90%;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The name on the input field
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * Determines whether or not the toggle is checked
+       */
+      checked: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether or not the toggle is disabled
+       */
+      disabled: {
+        type: Boolean,
+      },
+      /**
+       * A description of the toggle's purpose
+       */
+      label: {
+        type: String,
+      },
+      /**
+       * Determines whether or not to show text options
+       */
+      show: {
+        type: Boolean,
+      },
+      /**
+       * Displays the toggle as squared instead of rounded
+       */
+      squared: {
+        type: Boolean,
+      },
+      /**
+       * The checked option text
+       */
+      optionChecked: {
+        type: String,
+        attribute: 'option-checked',
+      },
+      /**
+       * The unchecked option text
+       */
+      optionUnchecked: {
+        type: String,
+        attribute: 'option-unchecked',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.name = 'toggle-switch';
+    this.disabled = false;
+    this.checked = false;
+    this.show = false;
+    this.squared = false;
+    this.label = '';
+    this.optionChecked = 'on';
+    this.optionUnchecked = 'off';
+    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+
+    /**
+     * Used only for form reactive controller
+     */
+    this.formSubmitController = new FormSubmitController(this);
+  }
+
+  render() {
+    return $`
+      <label part="label">
+        ${this.makeUncheckedOption()}
+        <span part="control">
+          <span part="track"></span>
+          <span part="handle"></span>
+        </span>
+        <input
+          role="switch"
+          type="checkbox"
+          name="${this.name}"
+          aria-label="${this.label}"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          ?disabled=${this.disabled}
+          ?checked=${this.checked}
+          @change=${this.handleChange}
+        />
+        ${this.makeCheckedOption()}
+        <span part="text">${this.label}</span>
+      </label>
+    `;
+  }
+
+  handleChange() {
+    this.checked = !this.checked;
+    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+
+    /**
+     * Fires when the toggle changes state
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-toggle-change', {
+        bubbles: true,
+        composed: true,
+        detail: true,
+      }),
+    );
+  }
+
+  makeUncheckedOption() {
+    if (this.show) {
+      return $`<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
+    }
+
+    return null;
+  }
+
+  makeCheckedOption() {
+    if (this.show) {
+      return $`<span class="option" part="checked">${this.optionChecked}</span>`;
+    }
+
+    return null;
   }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-textarea') || customElements.define('kemet-textarea', KemetTextarea);
+customElements.get('kemet-toggle') || customElements.define('kemet-toggle', KemetToggle);
 
-class KemetToggle extends s$1 {
+class KemetTrackerStep extends s$1 {
   static get styles() {
     return [
       r$3`
         :host {
-          --kemet-toggle-width: 3.5rem;
-          --kemet-toggle-height: 2rem;
-          --kemet-toggle-handle-diameter: 1.6rem;
-          --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
+          --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));
         }
 
-        :host([disabled]) {
-          opacity: 0.5;
+        .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);
         }
 
-        label {
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          gap: 1rem;
-          font-size: inherit;
-          color: inherit;
+        :host([completed]) .dot {
+          color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
         }
 
-        :host([disabled]) label {
-          cursor: not-allowed;
+        :host([completed]) .dot::after {
+          border: 0;
+          background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
         }
 
-        input {
-          display: none;
+        :host([current]) .dot.animate {
+          color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
         }
 
-        [part='control'] {
-          position: relative;
-          display: inline-flex;
-          margin: 0;
-          width: var(--kemet-toggle-width);
-          height: var(--kemet-toggle-height);
+        :host([current]) .dot.animate::after {
+          border: 0;
+          background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
         }
 
-        [part='control'] > span {
-          transition: 300ms ease-in-out;
+        :host([mobile]) .dot {
+          width: var(--kemet-tracker-step-dot-size-mobile);
+          height: var(--kemet-tracker-step-dot-size-mobile);
         }
 
-        [part='track'] {
-          width: var(--kemet-toggle-width);
-          height: var(--kemet-toggle-height);
-          border: var(--kemet-toggle-track-border, none);
-          border-radius: var(--kemet-toggle-height);
-          background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));
-          box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));
+        .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));
         }
 
-        :host([squared]) [part='track'] {
-          border-radius: 0;
+        .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;
         }
 
-        [part='handle'] {
-          position: absolute;
-          top: var(--kemet-toggle-handle-margin);
-          left: var(--kemet-toggle-handle-margin);
-          width: var(--kemet-toggle-handle-diameter);
-          height: var(--kemet-toggle-handle-diameter);
-          transform: translateX(0);
-          border: var(--kemet-toggle-handle-border, none);
-          border-radius: var(--kemet-toggle-handle-diameter);
-          background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));
-          box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));
+        :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>`;
+    }
 
-        :host([squared]) [part='handle'] {
-          border-radius: 0;
-        }
+    return null;
+  }
 
-        :host([checked]) [part='handle'] {
-          transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
-        }
+  handleCompletedLineEnd() {
+    const currentDot = this.tracker.querySelector('[current]').shadowRoot.querySelector('.dot');
 
-        .option {
-          font-size: 90%;
+    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;
         }
       `,
     ];
@@ -9118,384 +9651,361 @@ class KemetToggle extends s$1 {
   static get properties() {
     return {
       /**
-       * The name on the input field
-       */
-      name: {
-        type: String,
-      },
-      /**
-       * Determines whether or not the toggle is checked
-       */
-      checked: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Determines whether or not the toggle is disabled
-       */
-      disabled: {
-        type: Boolean,
-      },
-      /**
-       * A description of the toggle's purpose
-       */
-      label: {
-        type: String,
-      },
-      /**
-       * Determines whether or not to show text options
-       */
-      show: {
-        type: Boolean,
-      },
-      /**
-       * Displays the toggle as squared instead of rounded
-       */
-      squared: {
-        type: Boolean,
-      },
-      /**
-       * The checked option text
+       * The total number of steps
        */
-      optionChecked: {
-        type: String,
-        attribute: 'option-checked',
+      total: {
+        type: Number,
       },
       /**
-       * The unchecked option text
+       * The point at which the tracker goes from mobile to standard
        */
-      optionUnchecked: {
+      breakpoint: {
         type: String,
-        attribute: 'option-unchecked',
       },
     };
   }
 
   constructor() {
     super();
+    this.breakpoint = '767px';
+  }
 
-    this.name = 'toggle-switch';
-    this.disabled = false;
-    this.checked = false;
-    this.show = false;
-    this.squared = false;
-    this.label = '';
-    this.optionChecked = 'on';
-    this.optionUnchecked = 'off';
-    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+  firstUpdated() {
+    // elements
+    this.steps = this.querySelectorAll('kemet-tracker-step');
 
-    /**
-     * Used only for form reactive controller
-     */
-    this.formSubmitController = new FormSubmitController(this);
+    // methods exe
+    this.isMobile();
+
+    // events
+    window.addEventListener('resize', () => {
+      this.isMobile();
+    });
   }
 
   render() {
-    return $`
-      <label part="label">
-        ${this.makeUncheckedOption()}
-        <span part="control">
-          <span part="track"></span>
-          <span part="handle"></span>
-        </span>
-        <input
-          role="switch"
-          type="checkbox"
-          name="${this.name}"
-          aria-label="${this.label}"
-          aria-checked=${this.checked ? 'true' : 'false'}
-          ?disabled=${this.disabled}
-          ?checked=${this.checked}
-          @change=${this.handleChange}
-        />
-        ${this.makeCheckedOption()}
-        <span part="text">${this.label}</span>
-      </label>
-    `;
+    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
   }
 
-  handleChange() {
-    this.checked = !this.checked;
-    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+  handleSlotChange() {
+    this.total = this.steps.length;
 
-    /**
-     * Fires when the toggle changes state
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-toggle-change', {
-        bubbles: true,
-        composed: true,
-        detail: true,
-      }),
-    );
+    this.steps.forEach((step, index) => {
+      step.step = index + 1;
+      if (step.step === this.total) {
+        step.last = true;
+      }
+    });
   }
 
-  makeUncheckedOption() {
-    if (this.show) {
-      return $`<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
-    }
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
 
-    return null;
+    this.steps.forEach((step) => {
+      step.mobile = mediaQuery.matches;
+    });
   }
+}
 
-  makeCheckedOption() {
-    if (this.show) {
-      return $`<span class="option" part="checked">${this.optionChecked}</span>`;
-    }
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-tracker') || customElements.define('kemet-tracker', KemetTracker);
 
-    return null;
+const stylesLoaders = r$3`
+  .lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
   }
-}
 
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-toggle') || customElements.define('kemet-toggle', KemetToggle);
+  .lds-ripple div {
+    position: absolute;
+    border: 4px solid var(--kemet-upload-file-ripple-color);
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+  }
+
+  .lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+  }
+
+  @keyframes lds-ripple {
+    0% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    4.9% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    5% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
+    100% {
+      top: 0px;
+      left: 0px;
+      width: 72px;
+      height: 72px;
+      opacity: 0;
+    }
+  }
+`;
 
-class KemetTrackerStep extends s$1 {
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  // eslint-disable-next-line no-restricted-properties
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+
+class KemetUploadFile 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;
-        }
+          --kemet-upload-file-ripple-color: var(--kemet-color-primary);
 
-        .dot {
-          font-size: var(--kemet-tracker-step-dot-font-size, 90%);
-          color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
-          display: flex;
+          color: var(--kemet-upload-file-color, var(--kemet-color-gray7));
+          display: grid;
+          gap: 1rem;
+          grid-template-columns: auto 1fr auto;
           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);
+          padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
+          border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
         }
 
-        :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([status='error']) {
+          border: 1px solid var(--kemet-color-error);
         }
 
-        :host([mobile]) .dot {
-          width: var(--kemet-tracker-step-dot-size-mobile);
-          height: var(--kemet-tracker-step-dot-size-mobile);
+        :host([status='complete']) {
+          border: 1px solid var(--kemet-color-success);
         }
 
-        .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));
+        h3 {
+          margin: 0;
         }
 
-        .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;
+        .percentage {
+          font-size: clamp(2rem, 3vw, 2.5rem);
+          align-self: center;
+          justify-self: center;
         }
 
-        :host([mobile]) .line {
-          top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+        .indicator {
+          transform: scale(0.8);
         }
 
-        :host([mobile]) .line.completed {
-          top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+        :host([status='complete']) .message,
+        :host([status='complete']) .indicator {
+          color: var(--kemet-color-success);
         }
 
-        @keyframes grow {
-          from { transform: scaleX(0); }
-          to { transform: scaleX(1); }
+        :host([status='error']) .message,
+        :host([status='error']) .indicator {
+          color: var(--kemet-color-error);
         }
       `,
+      stylesLoaders,
     ];
   }
 
   static get properties() {
     return {
       /**
-       * The current step number
+       * The name of the file
        */
-      step: {
-        type: Number,
+      name: {
+        type: String,
       },
       /**
-       * Determines whether or not a step renders as complete
+       * The number of bytes loaded
        */
-      completed: {
-        type: Boolean,
-        reflect: true,
+      loaded: {
+        type: Number,
       },
       /**
-       * Determines whether or not a step renders as the current step
+       * The file size in bytes
        */
-      current: {
-        type: Boolean,
-        reflect: true,
+      size: {
+        type: Number,
       },
       /**
-       * Is automatically added to the last step
+       * The file type
        */
-      last: {
-        type: Boolean,
-        reflect: true,
+      type: {
+        type: String,
       },
       /**
-       * Determines if a step should render as mobile
+       * The status of the file. Values are complete | uploading | error.
        */
-      mobile: {
-        type: Boolean,
+      status: {
+        type: String,
         reflect: true,
       },
       /**
-       * Hides the label inside of a dot
+       * A percentage of file completion that's calculated by the loaded property
        */
-      hideDotContent: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'hide-dot-content',
+      percent: {
+        type: Number,
       },
       /**
-       * The icon size for the completed check mark
+       * An error message to give to users
        */
-      completedSize: {
-        type: Number,
+      message: {
+        type: String,
       },
     };
   }
 
   constructor() {
     super();
-    this.completedSize = 16;
+    this.loaded = 0;
+    this.size = 0;
+    this.percent = 0;
   }
 
-  firstUpdated() {
-    this.tracker = this.closest('kemet-tracker');
+  updated() {
+    this.percent = this.calculatePercent();
   }
 
   render() {
     return $`
-      ${this.makeLine()}
-      ${this.makeCompletedLine()}
-      <div class="dot" part="dot">${this.makeDotContent()}</div>
-      ${this.makeSlotContent()}
+      <div class="percentage" part="percentage">
+        <span>${this.percent}%</span>
+      </div>
+      <div>
+        <h3 part="filename">${this.name}</h3>
+        <span part="loaded">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>
+        ${this.message ? $`<div class="message" part="message">${this.message}</div>` : null}
+      </div>
+      <div class="indicator" part="indicator">
+        ${this.getStatusIcon()}
+      </div>
     `;
   }
 
-  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;
+  calculatePercent() {
+    const percent = Math.round((this.loaded * 100.0) / this.size);
+    return percent > 100 ? 100 : percent;
   }
 
-  makeDotContent() {
-    if (this.completed && !this.mobile && !this.hideDotContent) {
-      return $`
-        <kemet-icon icon="check2" size=${this.completedSize}></kemet-icon>
-      `;
+  getStatusIcon() {
+    if (this.status === 'uploading') {
+      return $`<div class="lds-ripple"><div></div><div></div></div>`;
     }
 
-    if (!this.mobile && !this.hideDotContent) {
-      return $`
-        <span>${this.step}/${this.tracker?.total}</span>
-      `;
+    if (this.status === 'complete') {
+      return $`<kemet-icon icon="check-circle" size="48"></kemet-icon>`;
     }
 
-    return null;
-  }
-
-  makeSlotContent() {
-    if (!this.mobile) {
-      return $`<slot></slot>`;
+    if (this.status === 'error') {
+      return $`<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`;
     }
 
     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);
+customElements.get('kemet-upload-file') || customElements.define('kemet-upload-file', KemetUploadFile);
 
-class KemetTracker extends s$1 {
+const preventDefaults = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+class KemetUpload extends s$1 {
   static get styles() {
     return [
       r$3`
         :host {
+          color: var(--kemet-upload-color, var(--kemet-color-white));
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          height: var(--kemet-upload-height, 364px);
+          border: var(--kemet-upload-border, 1rem solid var(--kemet-color-white));
+          background-color: var(--kemet-upload-background-color, var(--kemet-color-primary));
+        }
+
+        :host([mobile]) {
+          display: block;
+          height: auto;
+        }
+
+        input {
+          display: none;
+        }
+
+        .button {
+          cursor: pointer;
+          font-size: 1rem;
+          display: block;
+          color: var(--kemet-color-white);
+          padding: 0.5rem 1rem;
+          border: 1px solid var(--kemet-color-white);
+          background-color: transparent;
+        }
+
+        .upload {
           display: flex;
+          align-items: center;
           justify-content: center;
-          align-items: flex-start;
+          margin: 1rem;
+          flex-direction: column;
+          border: 2px dashed var(--kemet-color-white);
+        }
+
+        :host([over]) .upload {
+          background-color: green;
+        }
+
+        :host([mobile]) .upload {
+          height: 280px;
+        }
+
+        .files {
+          display: flex;
+          gap: 1rem;
+          flex-direction: column;
+          padding: 0 1rem;
+          overflow: auto;
+          background-color: var(--kemet-color-white);
+        }
+
+        :host([mobile]) .files {
+          padding: 0;
+          max-height: 280px;
+        }
+
+        .heading {
+          font-size: 1.25rem;
+          margin: 0 0 2rem 0;
+        }
+
+        :host([no-drag-drop]) .heading {
+          display: none;
+        }
+
+        ::slotted(:first-child) {
+          margin-top: 1rem;
         }
       `,
     ];
@@ -9504,63 +10014,175 @@ class KemetTracker extends s$1 {
   static get properties() {
     return {
       /**
-       * The total number of steps
+       * A unique identifier for the component
        */
-      total: {
-        type: Number,
+      slug: {
+        type: String,
       },
       /**
-       * The point at which the tracker goes from mobile to standard
+       * Determines what file types are accepted
+       */
+      accept: {
+        type: String,
+      },
+      /**
+       * Allows for multiple files
+       */
+      multiple: {
+        type: Boolean,
+      },
+      /**
+       * Automatically is true when a file is being dragged over the upload area
+       */
+      over: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Descriptive text for the upload area
+       */
+      heading: {
+        type: String,
+      },
+      /**
+       * Displays the component in a mobile context
+       */
+      mobile: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Controls the point at which the component is considered mobile
        */
       breakpoint: {
         type: String,
+        reflect: true,
+      },
+      /**
+       * If true if drag and drop support is not detected
+       */
+      noDragDrop: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-drag-drop',
+      },
+      /**
+       * The maximum file size for uploads
+       */
+      maxSize: {
+        type: Number,
+        attribute: 'max-size',
+      },
+      /**
+       * The browse files button text
+       */
+      buttonLabel: {
+        type: String,
+        attribute: 'button-label',
       },
     };
   }
 
   constructor() {
     super();
-    this.breakpoint = '767px';
+    this.slug = 'upload';
+    this.breakpoint = '600px';
+    this.buttonLabel = 'Browse Files';
+    this.heading = 'Drag & Drop Files';
   }
 
   firstUpdated() {
-    // elements
-    this.steps = this.querySelectorAll('kemet-tracker-step');
+    this.fileInputElement = this.shadowRoot.querySelector('[type="file"]');
+    this.upload = this.shadowRoot.querySelector('.upload');
 
-    // methods exe
-    this.isMobile();
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.upload.addEventListener(eventName, event => preventDefaults(event), false);
+    });
 
-    // events
-    window.addEventListener('resize', () => {
-      this.isMobile();
+    ['dragenter', 'dragover'].forEach((eventName) => {
+      this.upload.addEventListener(eventName, () => { this.over = true; }, false);
+    });
+
+    ['dragleave', 'drop'].forEach((eventName) => {
+      this.upload.addEventListener(eventName, () => { this.over = false; }, false);
     });
+
+    this.isMobile();
+    this.hasDragDrop();
+
+    window.addEventListener('resize', () => { this.isMobile(); });
+    this.upload.addEventListener('drop', event => this.handleDrop(event), false);
   }
 
   render() {
-    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+    return $`
+      <div class="upload" part="upload">
+        <kemet-icon icon="cloud-arrow-up" size="128"></kemet-icon>
+        <input
+          type="file"
+          id=${this.slug}
+          ?multiple=${this.multiple}
+          accept=${l$1(this.accept) ? this.accept : null}
+          @change=${event => this.handleChange(event)}
+        />
+        <h3 class="heading" part="heading">${this.heading}</h3>
+        <label class="button" part="button" for=${this.slug}>${this.buttonLabel}</label>
+      </div>
+      <div class="files" part="files">
+        <slot></slot>
+      </div>
+    `;
   }
 
-  handleSlotChange() {
-    this.total = this.steps.length;
+  handleChange(event) {
+    /**
+     * Fires when files have been added
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-upload-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+          files: this.fileInputElement.files,
+          fileElement: this.fileInputElement,
+        },
+      }),
+    );
+  }
 
-    this.steps.forEach((step, index) => {
-      step.step = index + 1;
-      if (step.step === this.total) {
-        step.last = true;
-      }
-    });
+  handleDrop(event) {
+    /**
+     * Fires when files have been added
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-upload-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+          files: event?.dataTransfer.files || [],
+          fileElement: this.fileInputElement,
+        },
+      }),
+    );
   }
 
   isMobile() {
     const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
 
-    this.steps.forEach((step) => {
-      step.mobile = mediaQuery.matches;
-    });
+  hasDragDrop() {
+    if ('draggable' in document.createElement('span')) {
+      this.noDragDrop = false;
+    } else {
+      this.noDragDrop = true;
+    }
   }
 }
 
 // eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-tracker') || customElements.define('kemet-tracker', KemetTracker);
+customElements.get('kemet-upload') || customElements.define('kemet-upload', KemetUpload);
 
-export { KemetCarouselCurrent, KemetCarouselFirst, KemetCarouselLast, KemetCarouselPrev, KemetCarouselTotal, customTooltip, fade, fall, flipHorizontal, flipVertical, scale, sign, slide, stylesKemetTabs, superScaled, tooltip };
+export { KemetCarouselCurrent, KemetCarouselFirst, KemetCarouselLast, KemetCarouselPrev, KemetCarouselTotal, customTooltip, fade, fall, flipHorizontal, flipVertical, scale, sign, slide, stylesKemetTabs, stylesLoaders, superScaled, tooltip };