kemet-ui 2.0.0 → 2.0.2

package/dist/kemet-components.cjs

@@ -1269,128 +1269,6 @@ KemetButton = __decorate([
     e$5('kemet-button')
 ], KemetButton);
 
-const stylesBase$9 = i$4 `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-card-padding: 1rem;
-    --kemet-card-border-color: var(--kemet-color-gray4);
-
-    color: var(--kemet-card-color, var(--kemet-color-black));
-    display: inline-flex;
-    flex-direction: column;
-    max-width: var(--kemet-card-max-width, 360px);
-    border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));
-    border-radius: var(--kemet-card-border-radius, 0);
-    background-color: var(--kemet-card-background-color, var(--kemet-color-white));
-  }
-
-  :host([center]) {
-    align-items: center;
-    text-align: center;
-  }
-
-  .body {
-    padding: var(--kemet-card-body-padding, var(--kemet-card-padding));
-  }
-
-  .media {
-    position: relative;
-  }
-
-  ::slotted(*) {
-    max-width: 100%;
-  }
-
-  ::slotted(img) {
-    display: flex;
-    max-width: 100%;
-  }
-
-  ::slotted([slot="header"]) {
-    padding: var(--kemet-card-header-padding, var(--kemet-card-padding));
-    border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));
-  }
-
-  ::slotted([slot="caption"]) {
-    color: var(--kemet-card-caption-color, var(--kemet-color-white));
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));
-    background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));
-  }
-
-  ::slotted([slot="footer"]) {
-    padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));
-    border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
-  }
-`;
-
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-card
- * @summary A highly configurable panel design to display media and information.
- *
- * @prop {boolean} center - Centers the elements in the card.
- *
- * @slot default - The contents of the alert.
- * @slot header - The cards's header.
- * @slot media - A slot for images, videos, or embeds.
- * @slot caption - Text for the media slot.
- * @slot footer - The card's footer.
- *
- *
- * @csspart media - The media area of the card.
- * @csspart body - The main contents of the card.
- *
- * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.
- * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).
- * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).
- * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.
- * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.
- * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).
- * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).
- * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).
- *
- */
-let KemetCard = class KemetCard extends s$1 {
-    render() {
-        return x `
-      <slot name="header"></slot>
-      <div class="media" part="media">
-        <slot name="media"></slot>
-        <slot name="caption"></slot>
-      </div>
-      <div class="body" part="body">
-        <slot></slot>
-      </div>
-      </div>
-      <slot name="footer"></slot>
-    `;
-    }
-};
-KemetCard.styles = [stylesBase$9];
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetCard.prototype, "center", void 0);
-KemetCard = __decorate([
-    e$5('kemet-card')
-], KemetCard);
-
 /**
  *
  * @since 1.1.0
@@ -1436,29 +1314,29 @@ KemetCarouselCurrent = __decorate([
  * @since 1.1.0
  * @status stable
  *
- * @tagname kemet-carousel-first
- * @summary A link to the first slide in the carousel.
+ * @tagname kemet-carousel-last
+ * @summary A link to the last slide in the carousel..
  *
  * @prop {boolean} disabled - Deactivates the button.
  *
- * @event kemet-carousel-first
+ * @event kemet-carousel-last
  *
  */
-let KemetCarouselFirst = class KemetCarouselFirst extends s$1 {
+let KemetCarouselLast = class KemetCarouselLast extends s$1 {
     render() {
         return x `
-      <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
+      <span tabindex="0" @keyup=${() => this.last()} @click=${() => this.last()}>
         <slot></slot>
       </span>
     `;
     }
-    first() {
+    last() {
         if (!this.disabled) {
-            emitEvent(this, 'kemet-carousel-first', this);
+            emitEvent(this, 'kemet-carousel-last', this);
         }
     }
 };
-KemetCarouselFirst.styles = [
+KemetCarouselLast.styles = [
     i$4 `
       :host {
         cursor: pointer;
@@ -1471,39 +1349,39 @@ KemetCarouselFirst.styles = [
 ];
 __decorate([
     e$4({ type: Boolean, reflect: true })
-], KemetCarouselFirst.prototype, "disabled", void 0);
-KemetCarouselFirst = __decorate([
-    e$5('kemet-carousel-first')
-], KemetCarouselFirst);
+], KemetCarouselLast.prototype, "disabled", void 0);
+KemetCarouselLast = __decorate([
+    e$5('kemet-carousel-last')
+], KemetCarouselLast);
 
 /**
  *
  * @since 1.1.0
  * @status stable
  *
- * @tagname kemet-carousel-last
- * @summary A link to the last slide in the carousel..
+ * @tagname kemet-carousel-first
+ * @summary A link to the first slide in the carousel.
  *
  * @prop {boolean} disabled - Deactivates the button.
  *
- * @event kemet-carousel-last
+ * @event kemet-carousel-first
  *
  */
-let KemetCarouselLast = class KemetCarouselLast extends s$1 {
+let KemetCarouselFirst = class KemetCarouselFirst extends s$1 {
     render() {
         return x `
-      <span tabindex="0" @keyup=${() => this.last()} @click=${() => this.last()}>
+      <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
         <slot></slot>
       </span>
     `;
     }
-    last() {
+    first() {
         if (!this.disabled) {
-            emitEvent(this, 'kemet-carousel-last', this);
+            emitEvent(this, 'kemet-carousel-first', this);
         }
     }
 };
-KemetCarouselLast.styles = [
+KemetCarouselFirst.styles = [
     i$4 `
       :host {
         cursor: pointer;
@@ -1516,10 +1394,10 @@ KemetCarouselLast.styles = [
 ];
 __decorate([
     e$4({ type: Boolean, reflect: true })
-], KemetCarouselLast.prototype, "disabled", void 0);
-KemetCarouselLast = __decorate([
-    e$5('kemet-carousel-last')
-], KemetCarouselLast);
+], KemetCarouselFirst.prototype, "disabled", void 0);
+KemetCarouselFirst = __decorate([
+    e$5('kemet-carousel-first')
+], KemetCarouselFirst);
 
 /**
  *
@@ -1900,7 +1778,9 @@ let KemetCarousel = class KemetCarousel extends s$1 {
                 center: true,
             },
         };
+        /** @internal */
         this.slides = [];
+        /** @internal */
         this.links = [];
         // bindings
         this.addEventListener('kemet-carousel-first', this.handleFirst.bind(this));
@@ -2226,32 +2106,7 @@ KemetCarousel = __decorate([
     e$5('kemet-carousel')
 ], KemetCarousel);
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const l$1=l=>null!=l?l:A;
-
-/**
- * @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$2=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 e$1=o=>void 0===o.strings,f={},s=(o,l=f)=>o._$AH=l;
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const l=e$2(class extends i{constructor(r){if(super(r),r.type!==t.PROPERTY&&r.type!==t.ATTRIBUTE&&r.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!e$1(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===T||t$1===A)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return T}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return T}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return T;return s(i),t$1}});
-
-const stylesBase$8 = i$4 `
+const stylesBase$9 = i$4 `
   *,
   *::before,
   *::after {
@@ -2259,56 +2114,203 @@ const stylesBase$8 = i$4 `
   }
 
   :host {
-    display: inline-block;
-  }
+    --kemet-card-padding: 1rem;
+    --kemet-card-border-color: var(--kemet-color-gray4);
 
-  :host([disabled]) {
-    opacity: 0.5;
+    color: var(--kemet-card-color, var(--kemet-color-black));
+    display: inline-flex;
+    flex-direction: column;
+    max-width: var(--kemet-card-max-width, 360px);
+    border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));
+    border-radius: var(--kemet-card-border-radius, 0);
+    background-color: var(--kemet-card-background-color, var(--kemet-color-white));
   }
 
-  label {
-    display: inline-flex;
-    gap: 0.5rem;
+  :host([center]) {
     align-items: center;
+    text-align: center;
   }
 
-  input {
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    width: var(--kemet-checkbox-size, 18px);
-    height: var(--kemet-checkbox-size, 18px);
-    position: absolute;
-    opacity: 0;
+  .body {
+    padding: var(--kemet-card-body-padding, var(--kemet-card-padding));
   }
 
-  button {
-    margin: 0;
-    border: none;
-    background: none;
+  .media {
+    position: relative;
   }
 
-  [part='checkbox'] {
-    color: var(--kemet-checkbox-color, var(--kemet-color-background));
-    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-background));
+  ::slotted(*) {
+    max-width: 100%;
   }
 
-  :host([rounded]) [part='checkbox'] {
-    border-radius: var(--kemet-checkbox-border-radius, 4px);
+  ::slotted(img) {
+    display: flex;
+    max-width: 100%;
   }
 
-  :host([filled][checked]) [part='checkbox'],
-  :host([filled][indeterminate]) [part='checkbox'] {
-    border: none;
-    background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
+  ::slotted([slot="header"]) {
+    padding: var(--kemet-card-header-padding, var(--kemet-card-padding));
+    border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));
   }
 
-  [part='mark'] {
+  ::slotted([slot="caption"]) {
+    color: var(--kemet-card-caption-color, var(--kemet-color-white));
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));
+    background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));
+  }
+
+  ::slotted([slot="footer"]) {
+    padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));
+    border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
+  }
+`;
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-card
+ * @summary A highly configurable panel design to display media and information.
+ *
+ * @prop {boolean} center - Centers the elements in the card.
+ *
+ * @slot default - The contents of the alert.
+ * @slot header - The cards's header.
+ * @slot media - A slot for images, videos, or embeds.
+ * @slot caption - Text for the media slot.
+ * @slot footer - The card's footer.
+ *
+ *
+ * @csspart media - The media area of the card.
+ * @csspart body - The main contents of the card.
+ *
+ * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.
+ * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).
+ * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).
+ * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.
+ * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.
+ * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).
+ * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).
+ * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).
+ *
+ */
+let KemetCard = class KemetCard extends s$1 {
+    render() {
+        return x `
+      <slot name="header"></slot>
+      <div class="media" part="media">
+        <slot name="media"></slot>
+        <slot name="caption"></slot>
+      </div>
+      <div class="body" part="body">
+        <slot></slot>
+      </div>
+      </div>
+      <slot name="footer"></slot>
+    `;
+    }
+};
+KemetCard.styles = [stylesBase$9];
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetCard.prototype, "center", void 0);
+KemetCard = __decorate([
+    e$5('kemet-card')
+], KemetCard);
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const l$1=l=>null!=l?l:A;
+
+/**
+ * @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$2=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 e$1=o=>void 0===o.strings,f={},s=(o,l=f)=>o._$AH=l;
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const l=e$2(class extends i{constructor(r){if(super(r),r.type!==t.PROPERTY&&r.type!==t.ATTRIBUTE&&r.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!e$1(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===T||t$1===A)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return T}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return T}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return T;return s(i),t$1}});
+
+const stylesBase$8 = i$4 `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  label {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  input {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    width: var(--kemet-checkbox-size, 18px);
+    height: var(--kemet-checkbox-size, 18px);
+    position: absolute;
+    opacity: 0;
+  }
+
+  button {
+    margin: 0;
+    border: none;
+    background: none;
+  }
+
+  [part='checkbox'] {
+    color: var(--kemet-checkbox-color, var(--kemet-color-background));
+    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-background));
+  }
+
+  :host([rounded]) [part='checkbox'] {
+    border-radius: var(--kemet-checkbox-border-radius, 4px);
+  }
+
+  :host([filled][checked]) [part='checkbox'],
+  :host([filled][indeterminate]) [part='checkbox'] {
+    border: none;
+    background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
+  }
+
+  [part='mark'] {
     display: flex;
     width: calc(var(--kemet-checkbox-size, 18px) - 4px);
     height: calc(var(--kemet-checkbox-size, 18px) - 4px);
@@ -3988,117 +3990,304 @@ KemetFlipcard = __decorate([
     e$5('kemet-flipcard')
 ], KemetFlipcard);
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-modal-close
+ * @summary A close button for a modal.
+ *
+ * @event kemet-modal-close-pressed - Fires when the close button is pressed
+ *
+ */
+let KemetModalClose = class KemetModalClose extends s$1 {
+    render() {
+        return x `
+      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>
+    `;
+    }
+    close() {
+        emitEvent(this, 'kemet-modal-close-pressed', this);
+    }
+};
+KemetModalClose.styles = [
+    i$4 `
+      :host {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+    `,
+];
+KemetModalClose = __decorate([
+    e$5('kemet-modal-close')
+], KemetModalClose);
+
 const stylesBase$2 = i$4 `
-  :host {
-    position: relative;
-    display: block;
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
   }
 
-  input {
-    color: var(--kemet-color-text);
-    display: block;
-    font-size: 1rem;
+  :host {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    z-index: 99;
     width: 100%;
-    height: var(--kemet-input-height, 50px);
-    padding: var(--kemet-input-padding, 0.5rem 1rem);
-    border: var(--kemet-input-border, 1px solid var(--kemet-color-background));
-    appearance: none;
-    box-sizing: border-box;
-    background-color: transparent;
+    height: 100vh;
+    visibility: hidden;
+    backface-visibility: hidden;
   }
 
-  input[type='color'] {
-    min-width: 10rem;
+  :host([opened]) {
+    visibility: visible;
   }
 
-  input[type='search']::-webkit-search-decoration,
-  input[type='search']::-webkit-search-cancel-button,
-  input[type='search']::-webkit-search-results-button,
-  input[type='search']::-webkit-search-results-decoration {
-    display: none;
+  .content {
+    position: relative;
+    z-index: 3;
+    margin: auto;
+    min-width: var(--kemet-modal-content-min-width, 0);
+    max-width: var(--kemet-modal-content-max-width, none);
+    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));
   }
 
-  :host([status='error']) input {
-    border: var(--kemet-input-border-color-error, 1px solid var(--kemet-color-error));
+  :host([mobile]) .content {
+    min-width: var(--kemet-modal-content-mobile-min-width, 100%);
+    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
+    padding: var(--kemet-modal-content-mobile-padding, 1rem);
   }
 
-  :host([status='success']) input {
-    border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));
+  .overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    opacity: 0;
+    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
   }
 
-  :host([status='warning']) input {
-    border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));
+  :host([opened]) .overlay {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+const stylesEffects = i$4 `
+  /* fadein-scaleup */
+  :host([effect="fadein-scaleup"]) .content {
+    transform: scale(0.7);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
   }
 
-  :host([disabled]) input {
-    opacity: 0.5;
+  :host([effect="fadein-scaleup"][opened]) .content {
+    transform: scale(1);
+    opacity: 1;
   }
 
-  :host([icon-left]) input {
-    padding-left: var(--kemet-input-icon-left-padding, 3rem);
+  /* slide-right */
+  :host([effect="slide-right"]) .content {
+    transform: translateX(20%);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
   }
 
-  :host([icon-right]) input {
-    padding-right: var(--kemet-input-icon-right-padding, 3rem);
+  :host([effect="slide-right"][opened]) .content {
+    transform: translateX(0);
+    opacity: 1;
   }
 
-  :host([rounded]) input {
-    border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));
+  /* slide-bottom */
+  :host([effect="slide-bottom"]) .content {
+    transform: translateY(20%);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
   }
 
-  :host([filled]) input {
-    border: var(--kemet-input-border-filled, none);
-    color: var(--kemet-input-color-filled, var(--kemet-color-white));
-    background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));
+  :host([effect="slide-bottom"][opened]) .content {
+    transform: translateY(0);
+    opacity: 1;
   }
 
-  :host([filled]) kemet-icon,
-  :host([filled]) input::placeholder {
-    color: var(--kemet-input-color-filled, var(--kemet-color-white));
+  /* newspaper */
+  :host([effect="newspaper"]) .content {
+    transform: scale(0) rotate(720deg);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
   }
 
-  :host([status='error'][filled]) input {
-    background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));
+  :host([effect="newspaper"][opened]) .content {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
   }
 
-  :host([status='success'][filled]) input {
-    background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));
+  /* fall */
+  :host([effect="fall"]) {
+    perspective: 1300px;
   }
 
-  :host([status='warning'][filled]) input {
-    background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));
+  :host([effect="fall"]) .content {
+    transform-style: preserve-3d;
+    transform: translateZ(600px) rotateX(20deg);
+    opacity: 0;
   }
 
-  kemet-icon {
-    color: var(--kemet-color-text);
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+  :host([effect="fall"][opened]) .content {
+    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
+    transform: translateZ(0px) rotateX(0deg);
+    opacity: 1;
   }
 
-  kemet-icon.left {
-    left: 1rem;
+  /* side-fall */
+  :host([effect="side-fall"]) {
+    perspective: 1300px;
   }
 
-  kemet-icon.right {
-    right: 1rem;
+  :host([effect="side-fall"]) .content {
+    transform-style: preserve-3d;
+    transform: translate(30%) translateZ(600px) rotate(10deg);
+    opacity: 0;
   }
 
-  kemet-icon.eye,
-  kemet-icon.search {
-    cursor: pointer;
+  :host([effect="side-fall"][opened]) .content {
+    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
+    transform: translate(0%) translateZ(0) rotate(0deg);
+    opacity: 1;
   }
 
-  :host([status='error']) kemet-icon {
-    color: var(--kemet-color-error);
+  /* flip-horizontal */
+  :host([effect="flip-horizontal"]) {
+    perspective: 1300px;
   }
 
-  :host([status='warning']) kemet-icon {
-    color: var(--kemet-color-error);
+  :host([effect="flip-horizontal"]) .content {
+    transform-style: preserve-3d;
+    transform: rotateY(-70deg);
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    opacity: 0;
   }
 
-  :host([status='success']) kemet-icon {
-    color: var(--kemet-color-success);
+  :host([effect="flip-horizontal"][opened]) .content {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+
+  /* flip-vertical */
+  :host([effect="flip-vertical"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="flip-vertical"]) .content {
+    transform-style: preserve-3d;
+    transform: rotateX(-70deg);
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    opacity: 0;
+  }
+
+  :host([effect="flip-vertical"][opened]) .content {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+
+  /* sign-3d */
+  :host([effect="sign-3d"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="sign-3d"]) .content {
+    transform-style: preserve-3d;
+    transform: rotateX(-60deg);
+    transform-origin: 50% 0;
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="sign-3d"][opened]) .content {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+
+  /* super-scaled */
+  :host([effect="super-scaled"]) .content {
+    transform: scale(2);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="super-scaled"][opened]) .content {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  /* slit */
+  :host([effect="slit"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="slit"]) .content {
+    transform-style: preserve-3d;
+    transform: translateZ(-3000px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  :host([effect="slit"][opened]) .content {
+    animation: slit .7s forwards ease-out;
+  }
+
+  @keyframes slit {
+    50% {
+      transform: translateZ(-250px) rotateY(89deg);
+      opacity: 1;
+      animation-timing-function: ease-in;}
+    100% {
+      transform: translateZ(0) rotateY(0deg);
+      opacity: 1;
+    }
+  }
+
+  /* rotate-bottom */
+  :host([effect="rotate-bottom"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="rotate-bottom"]) .content {
+    transform-style: preserve-3d;
+    transform: translateY(100%) rotateX(90deg);
+    transform-origin: 0 100%;
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;
+  }
+
+  :host([effect="rotate-bottom"][opened]) .content {
+    transform: translateY(0%) rotateX(0deg);
+    opacity: 1;
+  }
+
+  /* rotate-left */
+  :host([effect="rotate-left"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="rotate-left"]) .content {
+    transform-style: preserve-3d;
+    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    transform-origin: 0 100%;
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="rotate-left"][opened]) .content {
+    transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    opacity: 1;
   }
 `;
 
@@ -4106,717 +4295,8 @@ const stylesBase$2 = i$4 `
  * @since 1.0.0
  * @status stable
  *
- * @tagname kemet-input
- * @summary An enhanced input element.
- *
- * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
- * @prop {string} name - The name of the input
- * @prop {string} placeholder - The placeholder attribute
- * @prop {string} minlength - The minlength attribute
- * @prop {string} maxlength - The maxlength attribute
- * @prop {string} min - The min attribute
- * @prop {string} max - The max attribute
- * @prop {string} step - The step attribute
- * @prop {string} autocomplete - The autocomplete attribute
- * @prop {string} pattern - The pattern attribute
- * @prop {string} inputmode - The input mode attribute
- * @prop {boolean} autofocus - The autofocus attribute
- * @prop {boolean} disabled - The disable attribute
- * @prop {boolean} readonly - The readonly attribute
- * @prop {boolean} required - The required attribute
- * @prop {string} type - The type of input
- * @prop {string} value - The input's value
- * @prop {boolean} invalid - States whether or not the input is invalid
- * @prop {string} status - The status of the input
- * @prop {boolean} validateOnBlur - Activates validation on blur
- * @prop {string} ariaAutoComplete - Aria Autocomplete
- * @prop {string} ariaControls - Aria Controls
- * @prop {string} ariaActiveDescendant - Aria Active Descendant
- * @prop {boolean} rounded - Displays rounded corners
- * @prop {boolean} filled - Displays a filled input box
- * @prop {string} iconRight - Custom Icon to the right of the input
- * @prop {string} iconLeft - Custom Icon to the left of the input
- * @prop {number} iconSize - Size of the icons
- * @prop {object} validity - The HTML5 validity object.
- * @prop {boolean} isPasswordVisible - Manages password visibility
- * @prop {string} inputType - Input Type of keypress handled through handleInput(e)
- * @prop {boolean} focused - Determines if the input is focused
- *
- * @csspart input
- *
- * @cssproperty --kemet-input-height - The height of the input. Default: 50px.
- * @cssproperty -kemet-input-padding - The padding on the input. Default: 0.5rem 1rem.
- * @cssproperty -kemet-input-border - The border of the input. Default: 1px solid var(--kemet-color-primary).
- * @cssproperty -kemet-input-border-color-error -  The border of the error state. Default: 1px solid var(--kemet-color-error).
- * @cssproperty -kemet-input-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).
- * @cssproperty -kemet-input-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning) |
- * @cssproperty -kemet-input-icon-left-padding - The icon-left padding. Default: 3rem.
- * @cssproperty -kemet-input-icon-right-padding - The icon-right padding. Default: 3rem.
- * @cssproperty -kemet-input-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).
- * @cssproperty -kemet-input-border-filled - The border on filled. Default: none.
- * @cssproperty -kemet-input-color-filled - The color on filled. Default: var(--kemet-color-white).
- * @cssproperty -kemet-input-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).
- * @cssproperty -kemet-input-background-color-error - The error state background color. Default: var(--kemet-color-error).
- * @cssproperty -kemet-input-background-color-success - The success state background color. Default: var(--kemet-color-success).
- * @cssproperty -kemet-input-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.
- * Use the validity object to support custom validation messages.
- * @event kemet-input-input - Fires when the input receives input
- *
- */
-let KemetInput = class KemetInput extends s$1 {
-    constructor() {
-        super();
-        this.name = 'input';
-        this.type = 'text';
-        this.value = '';
-        this.status = 'standard';
-        this.validateOnBlur = false;
-        this.iconSize = 20;
-        this.isPasswordVisible = false;
-        this.focused = false;
-        /** @internal */
-        this.formSubmitController = new FormSubmitController(this);
-    }
-    ;
-    firstUpdated() {
-        // elements
-        this.input = this.shadowRoot.querySelector('input');
-        this.field = this.closest('kemet-field');
-        this.form = this.closest('form');
-        this.slug = this.field ? this.field.slug : 'input';
-        if (this.field) {
-            this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));
-        }
-    }
-    render() {
-        return x `
-      <div>
-        ${this.makeIconLeft()}
-        <input
-          part="input"
-          id=${this.slug}
-          name=${this.name}
-          placeholder=${l$1(this.placeholder)}
-          minlength=${l$1(this.minlength)}
-          maxlength=${l$1(this.maxlength)}
-          min=${l$1(this.min)}
-          max=${l$1(this.max)}
-          step=${l$1(this.step)}
-          autocomplete=${l$1(this.autocomplete)}
-          aria-autocomplete=${l$1(this.ariaAutoComplete)}
-          aria-controls=${l$1(this.ariaControls)}
-          aria-activedescendant=${l$1(this.ariaActiveDescendant)}
-          pattern=${l$1(this.pattern)}
-          inputmode=${l$1(this.inputmode)}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
-          ?autofocus=${this.autofocus}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          .type="${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}"
-          .value=${l(this.value)}
-          @change=${this.handleChange}
-          @input=${this.handleInput}
-          @invalid=${this.handleInvalid}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-        />
-        ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}
-      </div>
-    `;
-    }
-    /**
-     * Makes the right icon
-     * @private
-     * @returns {templateResult} A right icon
-     */
-    makeIconRight() {
-        if (this.iconRight) {
-            return x `
-        <kemet-icon class="right" icon="${this.iconRight}" size="${this.iconSize ? this.iconSize : 20}"></kemet-icon>
-      `;
-        }
-        return null;
-    }
-    /**
-     * Makes the left icon
-     * @private
-     * @returns {templateResult} A left icon
-     */
-    makeIconLeft() {
-        if (this.iconLeft) {
-            return x `
-        <kemet-icon class="left" icon="${this.iconLeft}" size="${this.iconSize ? this.iconSize : 16}"></kemet-icon>
-      `;
-        }
-        return null;
-    }
-    /**
-     * Makes a clear icon for search.
-     * @private
-     * @returns {templateResult} A search icon
-     */
-    makeIconClear() {
-        if (this.type === 'search' && this.value !== '') {
-            return x `
-        <kemet-icon class="search right" icon="x-lg" size="${this.iconSize}" @click=${() => this.handleClear()}></kemet-icon>
-      `;
-        }
-        return null;
-    }
-    /**
-     * Makes a password visibility toggle button
-     * @returns {templateResult} A mask or unmask icon
-     */
-    makeVisibilityToggle() {
-        if (this.type === 'password') {
-            return x `<kemet-icon
-        class="eye right"
-        icon="${this.setPasswordIcon()}"
-        @click=${() => this.togglePasswordVisibility()}
-      ></kemet-icon>`;
-        }
-        return null;
-    }
-    setPasswordIcon() {
-        if (this.isPasswordVisible) {
-            return 'eye';
-        }
-        return 'eye-slash';
-    }
-    /**
-     * Handles when the input receives focus
-     * @private
-     */
-    handleFocus() {
-        this.focused = true;
-        emitEvent(this, 'kemet-input-focused', true);
-    }
-    /**
-     * Handles when the input loses focus
-     * @private
-     */
-    handleBlur() {
-        var _a, _b;
-        if (this.validateOnBlur && this.form && !this.form.noValidate) {
-            (_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity();
-            this.validity = (_b = this.input) === null || _b === void 0 ? void 0 : _b.validity;
-        }
-        this.focused = false;
-        emitEvent(this, 'kemet-input-focused', false);
-    }
-    /**
-     * Handles when the input changes value
-     * @private
-     */
-    handleChange() {
-        this.value = this.input.value;
-        if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {
-            this.invalid = false;
-            this.status = 'standard';
-            this.validity = this.input.validity;
-            emitEvent(this, 'kemet-input-status', {
-                status: 'standard',
-                validity: this.input.validity,
-                element: this,
-            });
-        }
-    }
-    /**
-     * Handles when the input receives input
-     * @private
-     */
-    handleInput() {
-        this.value = this.input.value;
-        emitEvent(this, 'kemet-input-input', this.value);
-    }
-    /**
-     * Handles when the input has an error
-     * @private
-     */
-    handleInvalid() {
-        var _a, _b;
-        this.validity = (_a = this.input) === null || _a === void 0 ? void 0 : _a.validity;
-        if (this.validateOnBlur) {
-            this.invalid = true;
-            this.status = 'error';
-            emitEvent(this, 'kemet-input-status', {
-                status: 'error',
-                validity: (_b = this.input) === null || _b === void 0 ? void 0 : _b.validity,
-                element: this,
-            });
-        }
-    }
-    handleStatus(event) {
-        this.status = event.detail.status;
-    }
-    /**
-     * Toggles password visibility
-     * @private
-     */
-    togglePasswordVisibility() {
-        this.isPasswordVisible = !this.isPasswordVisible;
-    }
-    /**
-     * Handles the clear button for search
-     * @private
-     */
-    handleClear() {
-        this.value = '';
-        emitEvent(this, 'kemet-input-input', this.value);
-    }
-    /**
-     * Checks the validity of the character limit for the count component
-     * @private
-     * @returns {boolean}
-     */
-    checkLimitValidity() {
-        if (this.field) {
-            const count = this.field.querySelector('kemet-count');
-            if (count) {
-                return this.value.length < count.limit;
-            }
-        }
-        return true;
-    }
-    /**
-     * Checks the validity of the standard input
-     * @public
-     * @returns {boolean}
-     */
-    checkValidity() {
-        var _a;
-        return (_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity();
-    }
-    /**
-     * Focuses the standard input
-     * @public
-     */
-    focus() {
-        var _a;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-};
-KemetInput.styles = [stylesBase$2];
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "slug", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "name", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "placeholder", void 0);
-__decorate([
-    e$4({ type: Number })
-], KemetInput.prototype, "minlength", void 0);
-__decorate([
-    e$4({ type: Number })
-], KemetInput.prototype, "maxlength", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "min", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "max", void 0);
-__decorate([
-    e$4({ type: Number })
-], KemetInput.prototype, "step", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "autocomplete", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "pattern", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "inputmode", void 0);
-__decorate([
-    e$4({ type: Boolean })
-], KemetInput.prototype, "autofocus", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetInput.prototype, "disabled", void 0);
-__decorate([
-    e$4({ type: Boolean })
-], KemetInput.prototype, "readonly", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetInput.prototype, "required", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "type", void 0);
-__decorate([
-    e$4({ type: String, reflect: true })
-], KemetInput.prototype, "value", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetInput.prototype, "invalid", void 0);
-__decorate([
-    e$4({ type: String, reflect: true })
-], KemetInput.prototype, "status", void 0);
-__decorate([
-    e$4({ type: Boolean, attribute: 'validate-on-blur' })
-], KemetInput.prototype, "validateOnBlur", void 0);
-__decorate([
-    e$4({ type: String, attribute: 'aria-autocomplete' })
-], KemetInput.prototype, "ariaAutoComplete", void 0);
-__decorate([
-    e$4({ type: String, attribute: 'aria-controls' })
-], KemetInput.prototype, "ariaControls", void 0);
-__decorate([
-    e$4({ type: String, attribute: 'aria-activedescendant' })
-], KemetInput.prototype, "ariaActiveDescendant", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetInput.prototype, "rounded", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetInput.prototype, "filled", void 0);
-__decorate([
-    e$4({ type: String, reflect: true, attribute: 'icon-right' })
-], KemetInput.prototype, "iconRight", void 0);
-__decorate([
-    e$4({ type: String, reflect: true, attribute: 'icon-left' })
-], KemetInput.prototype, "iconLeft", void 0);
-__decorate([
-    e$4({ type: Number })
-], KemetInput.prototype, "iconSize", void 0);
-__decorate([
-    e$4({ type: Object })
-], KemetInput.prototype, "validity", void 0);
-__decorate([
-    e$4({ type: Boolean })
-], KemetInput.prototype, "isPasswordVisible", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetInput.prototype, "inputType", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetInput.prototype, "focused", void 0);
-__decorate([
-    t$1()
-], KemetInput.prototype, "field", void 0);
-__decorate([
-    t$1()
-], KemetInput.prototype, "form", void 0);
-__decorate([
-    t$1()
-], KemetInput.prototype, "input", void 0);
-KemetInput = __decorate([
-    e$5('kemet-input')
-], KemetInput);
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal-close
- * @summary A close button for a modal.
- *
- * @event kemet-modal-close-pressed - Fires when the close button is pressed
- *
- */
-let KemetModalClose = class KemetModalClose extends s$1 {
-    render() {
-        return x `
-      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>
-    `;
-    }
-    close() {
-        emitEvent(this, 'kemet-modal-close-pressed', this);
-    }
-};
-KemetModalClose.styles = [
-    i$4 `
-      :host {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        border-radius: 50%;
-        cursor: pointer;
-      }
-    `,
-];
-KemetModalClose = __decorate([
-    e$5('kemet-modal-close')
-], KemetModalClose);
-
-const stylesBase$1 = i$4 `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    position: fixed;
-    display: flex;
-    top: 0;
-    left: 0;
-    z-index: 99;
-    width: 100%;
-    height: 100vh;
-    visibility: hidden;
-    backface-visibility: hidden;
-  }
-
-  :host([opened]) {
-    visibility: visible;
-  }
-
-  .content {
-    position: relative;
-    z-index: 3;
-    margin: auto;
-    min-width: var(--kemet-modal-content-min-width, 0);
-    max-width: var(--kemet-modal-content-max-width, none);
-    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));
-  }
-
-  :host([mobile]) .content {
-    min-width: var(--kemet-modal-content-mobile-min-width, 100%);
-    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
-    padding: var(--kemet-modal-content-mobile-padding, 1rem);
-  }
-
-  .overlay {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    opacity: 0;
-    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([opened]) .overlay {
-    opacity: 1;
-    visibility: visible;
-  }
-`;
-const stylesEffects = i$4 `
-  /* fadein-scaleup */
-  :host([effect="fadein-scaleup"]) .content {
-    transform: scale(0.7);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="fadein-scaleup"][opened]) .content {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  /* slide-right */
-  :host([effect="slide-right"]) .content {
-    transform: translateX(20%);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
-  }
-
-  :host([effect="slide-right"][opened]) .content {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  /* slide-bottom */
-  :host([effect="slide-bottom"]) .content {
-    transform: translateY(20%);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="slide-bottom"][opened]) .content {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  /* newspaper */
-  :host([effect="newspaper"]) .content {
-    transform: scale(0) rotate(720deg);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="newspaper"][opened]) .content {
-    transform: scale(1) rotate(0deg);
-    opacity: 1;
-  }
-
-  /* fall */
-  :host([effect="fall"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="fall"]) .content {
-    transform-style: preserve-3d;
-    transform: translateZ(600px) rotateX(20deg);
-    opacity: 0;
-  }
-
-  :host([effect="fall"][opened]) .content {
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
-    transform: translateZ(0px) rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* side-fall */
-  :host([effect="side-fall"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="side-fall"]) .content {
-    transform-style: preserve-3d;
-    transform: translate(30%) translateZ(600px) rotate(10deg);
-    opacity: 0;
-  }
-
-  :host([effect="side-fall"][opened]) .content {
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
-    transform: translate(0%) translateZ(0) rotate(0deg);
-    opacity: 1;
-  }
-
-  /* flip-horizontal */
-  :host([effect="flip-horizontal"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-horizontal"]) .content {
-    transform-style: preserve-3d;
-    transform: rotateY(-70deg);
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-horizontal"][opened]) .content {
-    transform: rotateY(0deg);
-    opacity: 1;
-  }
-
-  /* flip-vertical */
-  :host([effect="flip-vertical"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-vertical"]) .content {
-    transform-style: preserve-3d;
-    transform: rotateX(-70deg);
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-vertical"][opened]) .content {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* sign-3d */
-  :host([effect="sign-3d"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="sign-3d"]) .content {
-    transform-style: preserve-3d;
-    transform: rotateX(-60deg);
-    transform-origin: 50% 0;
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="sign-3d"][opened]) .content {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* super-scaled */
-  :host([effect="super-scaled"]) .content {
-    transform: scale(2);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="super-scaled"][opened]) .content {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  /* slit */
-  :host([effect="slit"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="slit"]) .content {
-    transform-style: preserve-3d;
-    transform: translateZ(-3000px) rotateY(90deg);
-    opacity: 0;
-  }
-
-  :host([effect="slit"][opened]) .content {
-    animation: slit .7s forwards ease-out;
-  }
-
-  @keyframes slit {
-    50% {
-      transform: translateZ(-250px) rotateY(89deg);
-      opacity: 1;
-      animation-timing-function: ease-in;}
-    100% {
-      transform: translateZ(0) rotateY(0deg);
-      opacity: 1;
-    }
-  }
-
-  /* rotate-bottom */
-  :host([effect="rotate-bottom"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="rotate-bottom"]) .content {
-    transform-style: preserve-3d;
-    transform: translateY(100%) rotateX(90deg);
-    transform-origin: 0 100%;
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;
-  }
-
-  :host([effect="rotate-bottom"][opened]) .content {
-    transform: translateY(0%) rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* rotate-left */
-  :host([effect="rotate-left"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="rotate-left"]) .content {
-    transform-style: preserve-3d;
-    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-    transform-origin: 0 100%;
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="rotate-left"][opened]) .content {
-    transform: translateZ(0px) translateX(0%) rotateY(0deg);
-    opacity: 1;
-  }
-`;
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal
- * @summary A dialog that has many built in effects and flexible styles.
+ * @tagname kemet-modal
+ * @summary A dialog that has many built in effects and flexible styles.
  *
  * @prop {boolean} opened
  * @prop {string} effect
@@ -4910,7 +4390,7 @@ let KemetModal = class KemetModal extends s$1 {
         }
     }
 };
-KemetModal.styles = [stylesBase$1, stylesEffects];
+KemetModal.styles = [stylesBase$2, stylesEffects];
 __decorate([
     e$4({ type: Boolean, reflect: true })
 ], KemetModal.prototype, "opened", void 0);
@@ -4936,50 +4416,7 @@ KemetModal = __decorate([
     e$5('kemet-modal')
 ], KemetModal);
 
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper-close
- * @summary A close button for the popper
- *
- * @event kemet-popper-close-btn
- *
- */
-let KemetPopperClose = class KemetPopperClose extends s$1 {
-    render() {
-        return x `
-      <button @click=${() => this.close()} @keyup=${event => this.handleKeyboard(event)}>
-        <slot></slot>
-      </button>
-    `;
-    }
-    close() {
-        emitEvent(this, 'kemet-popper-close-btn', this);
-    }
-    handleKeyboard(event) {
-        event.preventDefault();
-        if (event.keyCode === keyCodes.SPACE || event.keyCode === keyCodes.ENTER) {
-            this.close();
-        }
-    }
-};
-KemetPopperClose.styles = [
-    i$4 `
-      button {
-        font: inherit;
-        color: inherit;
-        cursor: pointer;
-        border: 0;
-        background: transparent;
-      }
-    `,
-];
-KemetPopperClose = __decorate([
-    e$5('kemet-popper-close')
-], KemetPopperClose);
-
-const stylesBase = i$4 `
+const stylesBase$1 = i$4 `
   :host {
     color: inherit;
     display: none;
@@ -5201,7 +4638,7 @@ let KemetPassword = class KemetPassword extends s$1 {
         }
     }
 };
-KemetPassword.styles = [stylesBase];
+KemetPassword.styles = [stylesBase$1];
 __decorate([
     e$4({ type: Array })
 ], KemetPassword.prototype, "rules", void 0);
@@ -5236,6 +4673,49 @@ KemetPassword = __decorate([
     e$5('kemet-password')
 ], KemetPassword);
 
+/**
+ * @since 2.0.0
+ * @status stable
+ *
+ * @tagname kemet-popper-close
+ * @summary A close button for the popper
+ *
+ * @event kemet-popper-close-btn
+ *
+ */
+let KemetPopperClose = class KemetPopperClose extends s$1 {
+    render() {
+        return x `
+      <button @click=${() => this.close()} @keyup=${event => this.handleKeyboard(event)}>
+        <slot></slot>
+      </button>
+    `;
+    }
+    close() {
+        emitEvent(this, 'kemet-popper-close-btn', this);
+    }
+    handleKeyboard(event) {
+        event.preventDefault();
+        if (event.keyCode === keyCodes.SPACE || event.keyCode === keyCodes.ENTER) {
+            this.close();
+        }
+    }
+};
+KemetPopperClose.styles = [
+    i$4 `
+      button {
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
+        border: 0;
+        background: transparent;
+      }
+    `,
+];
+KemetPopperClose = __decorate([
+    e$5('kemet-popper-close')
+], KemetPopperClose);
+
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -7568,422 +7048,152 @@ const stylesPopperSuperScaled = i$4 `
  * @prop {string} strategy - Sets the strategy option in Popper's api
  * @prop {number} skidding - Sets an offset to the Popper from the trigger
  * @prop {number} distance - Sets spacing between the Popper and the trigger
- *
- */
-let KemetPopper = class KemetPopper extends s$1 {
-    constructor() {
-        super();
-        this.placement = 'top';
-        this.effect = 'fade';
-        this.fireOn = 'hover';
-        this.strategy = 'fixed';
-        this.skidding = 0;
-        this.distance = 0;
-        this.addEventListener('kemet-popper-close-btn', () => this.opened = false);
-    }
-    firstUpdated() {
-        if (this.fireOn === 'click') {
-            this.focusableElements.forEach((element) => {
-                element.addEventListener('keydown', event => this.handleFocusableDown(event));
-            });
-        }
-    }
-    updated(prevProps) {
-        this.refresh();
-        if (!prevProps.get('opened') && this.opened === true) {
-            emitEvent(this, 'kemet-popper-opened', this);
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            emitEvent(this, 'kemet-popper-closed', this);
-        }
-    }
-    render() {
-        return x `
-      <div
-        id="trigger"
-        part="trigger"
-        tabIndex="0"
-        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}
-        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}
-        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
-        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}
-      >
-        <slot name="trigger"></slot>
-      </div>
-      <div
-        id="content"
-        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
-      >
-        <slot name="content" @slotchange=${() => this.makePopper()}></slot>
-      </div>
-    `;
-    }
-    refresh() {
-        var _a;
-        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
-            placement: this.placement,
-            strategy: this.strategy,
-            modifiers: [
-                { name: 'offset', options: { offset: [this.skidding, this.distance] } }
-            ],
-        });
-    }
-    makePopper() {
-        this.popperInstance = createPopper(this.triggerElement, this.contentElement, {
-            placement: this.placement,
-            strategy: this.strategy,
-            modifiers: [
-                { name: 'offset', options: { offset: [this.skidding, this.distance] } }
-            ],
-        });
-    }
-    toggle(event) {
-        const isSlotTrigger = event.target.getAttribute('slot') === 'trigger';
-        const isPartTrigger = event.target.getAttribute('part') === 'trigger';
-        if (isSlotTrigger || isPartTrigger) {
-            if (this.opened) {
-                this.opened = false;
-            }
-            else {
-                this.opened = true;
-            }
-        }
-    }
-    handleKeyUp(event) {
-        event.preventDefault();
-        if (event.keyCode === keyCodes.ESC) {
-            this.opened = false;
-        }
-        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
-            this.toggle(event);
-        }
-    }
-    handleFocusableDown(event) {
-        const firstFocusable = this.focusableElements[0];
-        const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
-        if (event.key === 'Tab') {
-            if (event.shiftKey && document.activeElement === firstFocusable) {
-                event.preventDefault();
-                lastFocusable.focus();
-            }
-            else if (!event.shiftKey && document.activeElement === lastFocusable) {
-                event.preventDefault();
-                firstFocusable.focus();
-            }
-        }
-    }
-};
-KemetPopper.styles = [stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
-__decorate([
-    e$4({ type: String, reflect: true })
-], KemetPopper.prototype, "placement", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetPopper.prototype, "opened", void 0);
-__decorate([
-    e$4({ type: String, reflect: true })
-], KemetPopper.prototype, "effect", void 0);
-__decorate([
-    e$4({ type: String, attribute: 'fire-on' })
-], KemetPopper.prototype, "fireOn", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetPopper.prototype, "strategy", void 0);
-__decorate([
-    e$4({ type: Number })
-], KemetPopper.prototype, "skidding", void 0);
-__decorate([
-    e$4({ type: Number })
-], KemetPopper.prototype, "distance", void 0);
-__decorate([
-    t$1()
-], KemetPopper.prototype, "popperInstance", void 0);
-__decorate([
-    i$1('#trigger')
-], KemetPopper.prototype, "triggerElement", void 0);
-__decorate([
-    i$1('#content')
-], KemetPopper.prototype, "contentElement", void 0);
-__decorate([
-    e$3('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')
-], KemetPopper.prototype, "focusableElements", void 0);
-KemetPopper = __decorate([
-    e$5('kemet-popper')
-], KemetPopper);
-var KemetPopper$1 = KemetPopper;
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class e extends i{constructor(i){if(super(i),this.et=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this.ft=void 0,this.et=r;if(r===T)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$2(e);
-
-const stylesRotator = i$4 `
-  :host {
-    display: flex;
-  }
-
-  .rotator__slide {
-    pointer-events: none;
-  }
-
-  .rotator__slide--active {
-    pointer-events: auto;
-  }
-
-  /* fade effect */
-  :host([effect="fade"]) .rotator {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-  }
-
-  :host([effect="fade"]) .rotator__slide {
-    width: 100%;
-    flex: none;
-    opacity: 0;
-    box-sizing: border-box;
-    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
-  }
-
-  :host([effect="fade"]) .rotator__slide:not(:first-child) {
-    margin-left: -100%; /* this is the bulk of the overlay trick */
-  }
-
-  :host([effect="fade"]) .rotator__slide--active {
-    opacity: 1;
-  }
-
-  /* flip effect */
-  :host([effect="flip"]) .rotator {
-    display: flex;
-    position: relative;
-
-    perspective: 500;
-  }
-
-  :host([effect="flip"]) .rotator__slide {
-    display: block;
-    width: auto;
-    position: absolute;
-    top: -20px;
-    left: 0;
-
-    opacity: 0;
-
-    transform: rotateX(90deg);
-    transform-origin: 0% 0%;
-    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
-  }
-
-  :host([effect="flip"]) .rotator__slide--active {
-    top: 0;
-    opacity: 1;
-
-    transform: rotateX(0deg);
-  }
-
-  :host([effect="flip"]) .rotator__slide--prev {
-    top: 40px;;
-    transform: rotateX(-90deg);
-  }
-`;
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-rotator
- * @summary A component that rotates through an array of text.
- *
- * @prop {number} activeSlide - The index number for the current slide.
- * @prop {string} width - The width of the rotator block.
- * @prop {string} height - The height of the rotator block.
- * @prop {array} messages - Text in the rotator. Supports HTML.
- * @prop {string} effect - The transition effect type.
- * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
- *
- * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
- *
- */
-let KemetRotator = class KemetRotator extends s$1 {
-    constructor() {
-        super(...arguments);
-        this.activeSlide = 0;
-        this.width = 'auto';
-        this.height = 'auto';
-        this.messages = [];
+ *
+ */
+let KemetPopper = class KemetPopper extends s$1 {
+    constructor() {
+        super();
+        this.placement = 'top';
         this.effect = 'fade';
-        this.rotationSpeed = 3;
+        this.fireOn = 'hover';
+        this.strategy = 'fixed';
+        this.skidding = 0;
+        this.distance = 0;
+        this.addEventListener('kemet-popper-close-btn', () => this.opened = false);
     }
     firstUpdated() {
-        // standard properties
-        this.prevSlide = null;
-        window.addEventListener('resize', this.setDimensions.bind(this));
+        if (this.fireOn === 'click') {
+            this.focusableElements.forEach((element) => {
+                element.addEventListener('keydown', event => this.handleFocusableDown(event));
+            });
+        }
     }
-    updated(changed) {
-        const widthHasChanged = !!changed.get('width');
-        const heightHasChanged = !!changed.get('height');
-        this.setDimensions();
-        // only trigger slide updates when width and height has not changed
-        if (!widthHasChanged && !heightHasChanged) {
-            setTimeout(() => {
-                if (this.rotationSpeed > 0) {
-                    this.nextSlide();
-                }
-            }, this.rotationSpeed * 1000);
+    updated(prevProps) {
+        this.refresh();
+        if (!prevProps.get('opened') && this.opened === true) {
+            emitEvent(this, 'kemet-popper-opened', this);
+        }
+        if (prevProps.get('opened') && this.opened === false) {
+            emitEvent(this, 'kemet-popper-closed', this);
         }
     }
     render() {
-        const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';
-        const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';
         return x `
-      <span class="rotator" style="${setWidth} ${setHeight}">
-        ${this.makeMessages()}
-      </span>
+      <div
+        id="trigger"
+        part="trigger"
+        tabIndex="0"
+        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}
+        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}
+        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
+        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        id="content"
+        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
+      >
+        <slot name="content" @slotchange=${() => this.makePopper()}></slot>
+      </div>
     `;
     }
-    makeMessages() {
-        const messages = this.messages.map((message, index) => {
-            const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';
-            const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';
-            return x `
-        <span class="rotator__slide ${setActiveClass} ${setPrevClass}">
-          ${o(message)}
-        </span>
-      `;
+    refresh() {
+        var _a;
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
+            placement: this.placement,
+            strategy: this.strategy,
+            modifiers: [
+                { name: 'offset', options: { offset: [this.skidding, this.distance] } }
+            ],
         });
-        return messages;
     }
-    setDimensions() {
-        if (this.effect === 'flip') {
-            this.width = `${this.offsetWidth}px`;
-            const slides = this.shadowRoot.querySelectorAll('.rotator__slide');
-            let tallest = 0;
-            slides.forEach((slide) => {
-                if (slide.offsetHeight > tallest) {
-                    tallest = slide.offsetHeight;
-                }
-            });
-            this.height = `${tallest}px`;
+    makePopper() {
+        this.popperInstance = createPopper(this.triggerElement, this.contentElement, {
+            placement: this.placement,
+            strategy: this.strategy,
+            modifiers: [
+                { name: 'offset', options: { offset: [this.skidding, this.distance] } }
+            ],
+        });
+    }
+    toggle(event) {
+        const isSlotTrigger = event.target.getAttribute('slot') === 'trigger';
+        const isPartTrigger = event.target.getAttribute('part') === 'trigger';
+        if (isSlotTrigger || isPartTrigger) {
+            if (this.opened) {
+                this.opened = false;
+            }
+            else {
+                this.opened = true;
+            }
         }
     }
-    nextSlide() {
-        if (this.activeSlide < this.messages.length - 1) {
-            this.activeSlide += 1;
-            this.prevSlide = this.activeSlide - 1;
+    handleKeyUp(event) {
+        event.preventDefault();
+        if (event.keyCode === keyCodes.ESC) {
+            this.opened = false;
         }
-        else {
-            this.activeSlide = 0;
-            this.prevSlide = this.messages.length - 1;
+        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
+            this.toggle(event);
+        }
+    }
+    handleFocusableDown(event) {
+        const firstFocusable = this.focusableElements[0];
+        const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
+        if (event.key === 'Tab') {
+            if (event.shiftKey && document.activeElement === firstFocusable) {
+                event.preventDefault();
+                lastFocusable.focus();
+            }
+            else if (!event.shiftKey && document.activeElement === lastFocusable) {
+                event.preventDefault();
+                firstFocusable.focus();
+            }
         }
     }
 };
-KemetRotator.styles = [stylesRotator];
-__decorate([
-    e$4({ type: Number })
-], KemetRotator.prototype, "activeSlide", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetRotator.prototype, "width", void 0);
+KemetPopper.styles = [stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
 __decorate([
-    e$4({ type: String })
-], KemetRotator.prototype, "height", void 0);
+    e$4({ type: String, reflect: true })
+], KemetPopper.prototype, "placement", void 0);
 __decorate([
-    e$4({ type: Array })
-], KemetRotator.prototype, "messages", void 0);
+    e$4({ type: Boolean, reflect: true })
+], KemetPopper.prototype, "opened", void 0);
 __decorate([
     e$4({ type: String, reflect: true })
-], KemetRotator.prototype, "effect", void 0);
+], KemetPopper.prototype, "effect", void 0);
 __decorate([
-    e$4({ type: Number, attribute: 'rotation-speed' })
-], KemetRotator.prototype, "rotationSpeed", void 0);
+    e$4({ type: String, attribute: 'fire-on' })
+], KemetPopper.prototype, "fireOn", void 0);
 __decorate([
-    t$1()
-], KemetRotator.prototype, "prevSlide", void 0);
-KemetRotator = __decorate([
-    e$5('kemet-rotator')
-], KemetRotator);
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-scroll-link
- * @summary A component that adds a smooth scrolling link to an target..
- *
- * @prop {object} element - A DOM element that establishes the context of scrolling.
- * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.
- * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.
- * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.
- *
- */
-let KemetScrollLink = class KemetScrollLink extends s$1 {
-    constructor() {
-        super(...arguments);
-        this.element = window;
-        this.target = document.querySelector('body');
-        this.xOffset = 0;
-        this.yOffset = 0;
-    }
-    firstUpdated() {
-        // standard properties
-        this.isSmoothSupported = 'scrollBehavior' in document.documentElement.style;
-    }
-    render() {
-        return x `
-      <div tabindex="0" @click=${() => this.handleScroll()} @keyup=${event => this.handleKeyup(event)}>
-        <slot></slot>
-      </div>
-    `;
-    }
-    handleKeyup(event) {
-        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
-            this.handleScroll();
-        }
-    }
-    handleScroll() {
-        const scrollTop = this.target.offsetTop + this.yOffset;
-        const scrollLeft = this.target.offsetLeft + this.xOffset;
-        if (this.isSmoothSupported) {
-            this.element.scrollTo({
-                top: scrollTop,
-                left: scrollLeft,
-                behavior: 'smooth',
-            });
-        }
-        else {
-            this.element.scrollTo(scrollLeft, scrollTop);
-        }
-    }
-};
-KemetScrollLink.styles = [i$4 `
-    :host {
-      cursor: pointer;
-      display: inline-block;
-    }
-  `];
+    e$4({ type: String })
+], KemetPopper.prototype, "strategy", void 0);
 __decorate([
-    e$4({ type: Object })
-], KemetScrollLink.prototype, "element", void 0);
+    e$4({ type: Number })
+], KemetPopper.prototype, "skidding", void 0);
 __decorate([
-    e$4({ type: Object })
-], KemetScrollLink.prototype, "target", void 0);
+    e$4({ type: Number })
+], KemetPopper.prototype, "distance", void 0);
 __decorate([
-    e$4({ type: Number, attribute: 'x-offset', reflect: true })
-], KemetScrollLink.prototype, "xOffset", void 0);
+    t$1()
+], KemetPopper.prototype, "popperInstance", void 0);
 __decorate([
-    e$4({ type: Number, attribute: 'y-offset', reflect: true })
-], KemetScrollLink.prototype, "yOffset", void 0);
+    i$1('#trigger')
+], KemetPopper.prototype, "triggerElement", void 0);
 __decorate([
-    t$1()
-], KemetScrollLink.prototype, "isSmoothSupported", void 0);
-KemetScrollLink = __decorate([
-    e$5('kemet-scroll-link')
-], KemetScrollLink);
+    i$1('#content')
+], KemetPopper.prototype, "contentElement", void 0);
+__decorate([
+    e$3('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')
+], KemetPopper.prototype, "focusableElements", void 0);
+KemetPopper = __decorate([
+    e$5('kemet-popper')
+], KemetPopper);
+var KemetPopper$1 = KemetPopper;
 
 const stylesRadio = i$4 `
   *,
@@ -8290,58 +7500,328 @@ let KemetRadios = class KemetRadios extends s$1 {
             this.radios[index].tabIndex = 0;
         }
     }
-    handleSlotChange() {
-        const radios = Array.from(this.radios);
-        const checkedRadio = radios.find((radio) => radio.checked);
-        this.radios.forEach((radio) => {
-            radio.tabIndex = -1;
-            radio.input.tabIndex = -1;
-        });
-        if (checkedRadio) {
-            checkedRadio.tabIndex = 0;
-        }
+    handleSlotChange() {
+        const radios = Array.from(this.radios);
+        const checkedRadio = radios.find((radio) => radio.checked);
+        this.radios.forEach((radio) => {
+            radio.tabIndex = -1;
+            radio.input.tabIndex = -1;
+        });
+        if (checkedRadio) {
+            checkedRadio.tabIndex = 0;
+        }
+    }
+    makeMessage() {
+        if (this.status === 'error' || this.status === 'warning') {
+            return x `<span part="message">${this.message}</span>`;
+        }
+        return null;
+    }
+    checkValidity() {
+        if (this.required) {
+            return !!this.value;
+        }
+        return true;
+    }
+};
+KemetRadios.styles = [stylesRadios];
+__decorate([
+    e$4({ type: String })
+], KemetRadios.prototype, "legend", void 0);
+__decorate([
+    e$4({ type: String, reflect: true })
+], KemetRadios.prototype, "axis", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetRadios.prototype, "value", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetRadios.prototype, "name", void 0);
+__decorate([
+    e$4({ type: String, reflect: true })
+], KemetRadios.prototype, "status", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetRadios.prototype, "message", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetRadios.prototype, "required", void 0);
+__decorate([
+    t$1()
+], KemetRadios.prototype, "radios", void 0);
+KemetRadios = __decorate([
+    e$5('kemet-radios')
+], KemetRadios);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class e extends i{constructor(i){if(super(i),this.et=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this.ft=void 0,this.et=r;if(r===T)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$2(e);
+
+const stylesRotator = i$4 `
+  :host {
+    display: flex;
+  }
+
+  .rotator__slide {
+    pointer-events: none;
+  }
+
+  .rotator__slide--active {
+    pointer-events: auto;
+  }
+
+  /* fade effect */
+  :host([effect="fade"]) .rotator {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+
+  :host([effect="fade"]) .rotator__slide {
+    width: 100%;
+    flex: none;
+    opacity: 0;
+    box-sizing: border-box;
+    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
+  }
+
+  :host([effect="fade"]) .rotator__slide:not(:first-child) {
+    margin-left: -100%; /* this is the bulk of the overlay trick */
+  }
+
+  :host([effect="fade"]) .rotator__slide--active {
+    opacity: 1;
+  }
+
+  /* flip effect */
+  :host([effect="flip"]) .rotator {
+    display: flex;
+    position: relative;
+
+    perspective: 500;
+  }
+
+  :host([effect="flip"]) .rotator__slide {
+    display: block;
+    width: auto;
+    position: absolute;
+    top: -20px;
+    left: 0;
+
+    opacity: 0;
+
+    transform: rotateX(90deg);
+    transform-origin: 0% 0%;
+    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
+  }
+
+  :host([effect="flip"]) .rotator__slide--active {
+    top: 0;
+    opacity: 1;
+
+    transform: rotateX(0deg);
+  }
+
+  :host([effect="flip"]) .rotator__slide--prev {
+    top: 40px;;
+    transform: rotateX(-90deg);
+  }
+`;
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-rotator
+ * @summary A component that rotates through an array of text.
+ *
+ * @prop {number} activeSlide - The index number for the current slide.
+ * @prop {string} width - The width of the rotator block.
+ * @prop {string} height - The height of the rotator block.
+ * @prop {array} messages - Text in the rotator. Supports HTML.
+ * @prop {string} effect - The transition effect type.
+ * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
+ *
+ * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
+ *
+ */
+let KemetRotator = class KemetRotator extends s$1 {
+    constructor() {
+        super(...arguments);
+        this.activeSlide = 0;
+        this.width = 'auto';
+        this.height = 'auto';
+        this.messages = [];
+        this.effect = 'fade';
+        this.rotationSpeed = 3;
+    }
+    firstUpdated() {
+        // standard properties
+        this.prevSlide = null;
+        window.addEventListener('resize', this.setDimensions.bind(this));
+    }
+    updated(changed) {
+        const widthHasChanged = !!changed.get('width');
+        const heightHasChanged = !!changed.get('height');
+        this.setDimensions();
+        // only trigger slide updates when width and height has not changed
+        if (!widthHasChanged && !heightHasChanged) {
+            setTimeout(() => {
+                if (this.rotationSpeed > 0) {
+                    this.nextSlide();
+                }
+            }, this.rotationSpeed * 1000);
+        }
+    }
+    render() {
+        const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';
+        const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';
+        return x `
+      <span class="rotator" style="${setWidth} ${setHeight}">
+        ${this.makeMessages()}
+      </span>
+    `;
+    }
+    makeMessages() {
+        const messages = this.messages.map((message, index) => {
+            const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';
+            const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';
+            return x `
+        <span class="rotator__slide ${setActiveClass} ${setPrevClass}">
+          ${o(message)}
+        </span>
+      `;
+        });
+        return messages;
+    }
+    setDimensions() {
+        if (this.effect === 'flip') {
+            this.width = `${this.offsetWidth}px`;
+            const slides = this.shadowRoot.querySelectorAll('.rotator__slide');
+            let tallest = 0;
+            slides.forEach((slide) => {
+                if (slide.offsetHeight > tallest) {
+                    tallest = slide.offsetHeight;
+                }
+            });
+            this.height = `${tallest}px`;
+        }
+    }
+    nextSlide() {
+        if (this.activeSlide < this.messages.length - 1) {
+            this.activeSlide += 1;
+            this.prevSlide = this.activeSlide - 1;
+        }
+        else {
+            this.activeSlide = 0;
+            this.prevSlide = this.messages.length - 1;
+        }
+    }
+};
+KemetRotator.styles = [stylesRotator];
+__decorate([
+    e$4({ type: Number })
+], KemetRotator.prototype, "activeSlide", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetRotator.prototype, "width", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetRotator.prototype, "height", void 0);
+__decorate([
+    e$4({ type: Array })
+], KemetRotator.prototype, "messages", void 0);
+__decorate([
+    e$4({ type: String, reflect: true })
+], KemetRotator.prototype, "effect", void 0);
+__decorate([
+    e$4({ type: Number, attribute: 'rotation-speed' })
+], KemetRotator.prototype, "rotationSpeed", void 0);
+__decorate([
+    t$1()
+], KemetRotator.prototype, "prevSlide", void 0);
+KemetRotator = __decorate([
+    e$5('kemet-rotator')
+], KemetRotator);
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-link
+ * @summary A component that adds a smooth scrolling link to an target..
+ *
+ * @prop {object} element - A DOM element that establishes the context of scrolling.
+ * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.
+ * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.
+ * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.
+ *
+ */
+let KemetScrollLink = class KemetScrollLink extends s$1 {
+    constructor() {
+        super(...arguments);
+        this.element = window;
+        this.target = document.querySelector('body');
+        this.xOffset = 0;
+        this.yOffset = 0;
+    }
+    firstUpdated() {
+        // standard properties
+        this.isSmoothSupported = 'scrollBehavior' in document.documentElement.style;
     }
-    makeMessage() {
-        if (this.status === 'error' || this.status === 'warning') {
-            return x `<span part="message">${this.message}</span>`;
+    render() {
+        return x `
+      <div tabindex="0" @click=${() => this.handleScroll()} @keyup=${event => this.handleKeyup(event)}>
+        <slot></slot>
+      </div>
+    `;
+    }
+    handleKeyup(event) {
+        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
+            this.handleScroll();
         }
-        return null;
     }
-    checkValidity() {
-        if (this.required) {
-            return !!this.value;
+    handleScroll() {
+        const scrollTop = this.target.offsetTop + this.yOffset;
+        const scrollLeft = this.target.offsetLeft + this.xOffset;
+        if (this.isSmoothSupported) {
+            this.element.scrollTo({
+                top: scrollTop,
+                left: scrollLeft,
+                behavior: 'smooth',
+            });
+        }
+        else {
+            this.element.scrollTo(scrollLeft, scrollTop);
         }
-        return true;
     }
 };
-KemetRadios.styles = [stylesRadios];
-__decorate([
-    e$4({ type: String })
-], KemetRadios.prototype, "legend", void 0);
-__decorate([
-    e$4({ type: String, reflect: true })
-], KemetRadios.prototype, "axis", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetRadios.prototype, "value", void 0);
+KemetScrollLink.styles = [i$4 `
+    :host {
+      cursor: pointer;
+      display: inline-block;
+    }
+  `];
 __decorate([
-    e$4({ type: String })
-], KemetRadios.prototype, "name", void 0);
+    e$4({ type: Object })
+], KemetScrollLink.prototype, "element", void 0);
 __decorate([
-    e$4({ type: String, reflect: true })
-], KemetRadios.prototype, "status", void 0);
+    e$4({ type: Object })
+], KemetScrollLink.prototype, "target", void 0);
 __decorate([
-    e$4({ type: String })
-], KemetRadios.prototype, "message", void 0);
+    e$4({ type: Number, attribute: 'x-offset', reflect: true })
+], KemetScrollLink.prototype, "xOffset", void 0);
 __decorate([
-    e$4({ type: String })
-], KemetRadios.prototype, "required", void 0);
+    e$4({ type: Number, attribute: 'y-offset', reflect: true })
+], KemetScrollLink.prototype, "yOffset", void 0);
 __decorate([
     t$1()
-], KemetRadios.prototype, "radios", void 0);
-KemetRadios = __decorate([
-    e$5('kemet-radios')
-], KemetRadios);
+], KemetScrollLink.prototype, "isSmoothSupported", void 0);
+KemetScrollLink = __decorate([
+    e$5('kemet-scroll-link')
+], KemetScrollLink);
 
 const stylesScrollNav = i$4 `
   :host {
@@ -8356,6 +7836,7 @@ const stylesScrollNav = i$4 `
   :host([effect="resize"]) {
     position: fixed;
     top: 0;
+    left: 0;
     width: 100%;
   }
 
@@ -9652,6 +9133,20 @@ const stylesKemetTabPanel = i$4 `
   :host(.vertical[selected]) {
     display: block;
   }
+
+  :host(.stacked) {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  :host(.stacked[selected]) {
+    position: relative;
+    z-index: 1;
+    opacity: 1;
+    visibility: visible;
+  }
 `;
 
 /**
@@ -9792,8 +9287,6 @@ KemetTab = __decorate([
  * @prop {object} ink - An object that contains information about the ink
  * @prop {boolean} hideInk - Determines whether or not to hide the ink
  * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container
- * @prop {number} measureHeight - If set to anything greater than 1, will measure the height of the panels and dynamically change the height of the tabs given the size
- * @prop {number} measureHeightOffset - Adds spacing to the calculated height from measureHeight
  *
  * @slot tab - Place the tabs here.
  * @slot panel - Place the panels here.
@@ -9824,8 +9317,6 @@ let KemetTabs = class KemetTabs extends s$1 {
         this.placement = 'top';
         this.tabsAlign = 'center';
         this.hideInk = false;
-        this.measureHeight = 1;
-        this.measureHeightOffset = 48;
         this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));
         this.addEventListener('kemet-tab-close', this.handleTabClose.bind(this));
         window.addEventListener('resize', this.handleResize.bind(this));
@@ -9837,7 +9328,6 @@ let KemetTabs = class KemetTabs extends s$1 {
         this.xDown = null;
         this.yDown = null;
         this.links = this.shadowRoot.getElementById('links');
-        setTimeout(() => this.measure(), this.measureHeight);
     }
     render() {
         return x `
@@ -9860,6 +9350,7 @@ let KemetTabs = class KemetTabs extends s$1 {
     }
     updated() {
         this.determineFade();
+        this.determineStacked();
     }
     handleLinksSlotChange() {
         const tabs = this.querySelectorAll('kemet-tab');
@@ -10074,22 +9565,6 @@ let KemetTabs = class KemetTabs extends s$1 {
         this.selectTab();
         this.selectPanel();
         this.dispatchTabChange();
-        setTimeout(() => this.measure());
-    }
-    measure() {
-        if (this.measureHeight > 1) {
-            const currentPanel = this.selected ? this.querySelector(`kemet-tab-panel[selected]`) : this.panels[this.selectedIndex];
-            const clone = currentPanel.cloneNode(true);
-            clone.style.display = 'block';
-            clone.style.visibility = 'hidden';
-            clone.style.pointerEvents = 'none';
-            document.body.appendChild(clone);
-            setTimeout(() => {
-                const panelHeight = clone.offsetHeight;
-                this.panelsElement.style.maxHeight = `${panelHeight + this.measureHeightOffset}px`;
-                document.body.removeChild(clone);
-            }, 1);
-        }
     }
     determineFade() {
         this.panels.forEach((panel) => {
@@ -10098,6 +9573,13 @@ let KemetTabs = class KemetTabs extends s$1 {
                 panel.classList.add('fade');
         });
     }
+    determineStacked() {
+        this.panels.forEach((panel) => {
+            // add fade class if panel effect is fade
+            if (this.panelEffect === 'stacked')
+                panel.classList.add('stacked');
+        });
+    }
     determineOverflow() {
         const tabsContainerWidth = this.offsetWidth;
         const tabElements = this.querySelectorAll('kemet-tab');
@@ -10278,12 +9760,6 @@ __decorate([
 __decorate([
     e$4({ type: Boolean, reflect: true })
 ], KemetTabs.prototype, "overflow", void 0);
-__decorate([
-    e$4({ type: Number, attribute: 'measure-height' })
-], KemetTabs.prototype, "measureHeight", void 0);
-__decorate([
-    e$4({ type: Number, attribute: 'measure-height-offset' })
-], KemetTabs.prototype, "measureHeightOffset", void 0);
 __decorate([
     t$1()
 ], KemetTabs.prototype, "tabs", void 0);
@@ -10815,55 +10291,175 @@ let KemetToggle = class KemetToggle extends s$1 {
       </label>
     `;
     }
-    handleChange() {
-        this.checked = !this.checked;
-        this.value = this.checked ? this.optionChecked : this.optionUnchecked;
-        emitEvent(this, 'kemet-toggle-change', true);
-    }
-    makeUncheckedOption() {
-        if (this.show) {
-            return x `<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
-        }
-        return null;
-    }
-    makeCheckedOption() {
-        if (this.show) {
-            return x `<span class="option" part="checked">${this.optionChecked}</span>`;
-        }
-        return null;
+    handleChange() {
+        this.checked = !this.checked;
+        this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+        emitEvent(this, 'kemet-toggle-change', true);
+    }
+    makeUncheckedOption() {
+        if (this.show) {
+            return x `<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
+        }
+        return null;
+    }
+    makeCheckedOption() {
+        if (this.show) {
+            return x `<span class="option" part="checked">${this.optionChecked}</span>`;
+        }
+        return null;
+    }
+};
+KemetToggle.styles = [stylesToggle];
+__decorate([
+    e$4({ type: String })
+], KemetToggle.prototype, "name", void 0);
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetToggle.prototype, "checked", void 0);
+__decorate([
+    e$4({ type: Boolean })
+], KemetToggle.prototype, "disabled", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetToggle.prototype, "label", void 0);
+__decorate([
+    e$4({ type: Boolean })
+], KemetToggle.prototype, "show", void 0);
+__decorate([
+    e$4({ type: Boolean })
+], KemetToggle.prototype, "squared", void 0);
+__decorate([
+    e$4({ type: String, attribute: 'option-checked' })
+], KemetToggle.prototype, "optionChecked", void 0);
+__decorate([
+    e$4({ type: String, attribute: 'option-unchecked' })
+], KemetToggle.prototype, "optionUnchecked", void 0);
+__decorate([
+    t$1()
+], KemetToggle.prototype, "value", void 0);
+KemetToggle = __decorate([
+    e$5('kemet-toggle')
+], KemetToggle);
+
+const stylesTooltip = i$4 `
+  :host {
+    --kemet-tooltip-deg: -45deg;
+    --kemet-tooltip-size: 22px;
+    --kemet-tooltip-border-size: 1px;
+    --kemet-tooltip-rounded-tip: 4px;
+    --kemet-tooltip-background-color: var(--kemet-color-foreground);
+    --kemet-tooltip-border-color: var(--kemet-color-background);
+    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);
+  }
+
+  #arrow {
+    content: '';
+    width: var(--kemet-tooltip-size);
+    height: var(--kemet-tooltip-size);
+    position: relative;
+    display: inline-block;
+    background: linear-gradient(
+        var(--kemet-tooltip-deg),
+        transparent calc(var(--kemet-tooltip-size) / 1.5),
+        var(--kemet-tooltip-background-color) 0
+      )
+      no-repeat;
+    background-repeat: no-repeat;
+    transform-origin: center center;
+    border-top-left-radius: var(--kemet-tooltip-rounded-tip);
+    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
+    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
+  }
+
+  [data-popper-placement^="top"] #arrow {
+    top: var(--kemet-tooltip-placement-offset);
+    transform: rotate(225deg);
+
+  }
+
+  [data-popper-placement^="bottom"] #arrow-container {
+    top: 0px;
+  }
+
+  [data-popper-placement^="bottom"] #arrow {
+    top: var(--kemet-tooltip-placement-offset);
+    transform: rotate(45deg);
+  }
+
+  [data-popper-placement^="right"] #arrow {
+    left: var(--kemet-tooltip-placement-offset);
+    transform: rotate(-45deg);
+  }
+
+  [data-popper-placement^="left"] #arrow-container {
+    right: 0;
+  }
+
+  [data-popper-placement^="left"] #arrow {
+    right: var(--kemet-tooltip-placement-offset);
+    transform: rotate(135deg);
+  }
+`;
+
+/**
+ * @since 2.0.0
+ * @status stable
+ *
+ * @tagname kemet-tooltip
+ * @summary A tooltip is a Popper component that displays an dynamic arrow pointing to the trigger.
+ *
+ * @slot trigger - Controls opening and closing the tooltip.
+ * @slot content - The contents of the tooltip.
+ *
+ * @csspart trigger - Contains the trigger for the tooltip.
+ * @csspart content - Contains the content for the tooltip.
+ *
+ * @cssproperty --kemet-tooltip-content-height - The height of the content.
+ * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
+ * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
+ * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
+ * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
+ * @cssproperty --kemet-tooltip-border-color - The border color of the the arrow
+ * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
+ *
+ */
+let KemetTooltip = class KemetTooltip extends KemetPopper$1 {
+    render() {
+        return x `
+      <div
+        id="trigger"
+        part="trigger"
+        tabIndex="0"
+        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}
+        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}
+        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
+        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        id="content"
+        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
+      >
+        <slot name="content" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>
+        <div id="arrow-container" part="arrow-container" data-popper-arrow>
+          <div id="arrow" part="arrow"></div>
+        </div>
+      </div>
+    `;
+    }
+    measureContent() {
+        const height = this.contentElement.offsetHeight;
+        this.contentElement.style.setProperty("--kemet-tooltip-content-height", `${height}px`);
     }
 };
-KemetToggle.styles = [stylesToggle];
-__decorate([
-    e$4({ type: String })
-], KemetToggle.prototype, "name", void 0);
-__decorate([
-    e$4({ type: Boolean, reflect: true })
-], KemetToggle.prototype, "checked", void 0);
-__decorate([
-    e$4({ type: Boolean })
-], KemetToggle.prototype, "disabled", void 0);
-__decorate([
-    e$4({ type: String })
-], KemetToggle.prototype, "label", void 0);
-__decorate([
-    e$4({ type: Boolean })
-], KemetToggle.prototype, "show", void 0);
-__decorate([
-    e$4({ type: Boolean })
-], KemetToggle.prototype, "squared", void 0);
-__decorate([
-    e$4({ type: String, attribute: 'option-checked' })
-], KemetToggle.prototype, "optionChecked", void 0);
-__decorate([
-    e$4({ type: String, attribute: 'option-unchecked' })
-], KemetToggle.prototype, "optionUnchecked", void 0);
-__decorate([
-    t$1()
-], KemetToggle.prototype, "value", void 0);
-KemetToggle = __decorate([
-    e$5('kemet-toggle')
-], KemetToggle);
+KemetTooltip.styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
+KemetTooltip = __decorate([
+    e$5('kemet-tooltip')
+], KemetTooltip);
 
 const stylesStep = i$4 `
   :host {
@@ -11163,397 +10759,799 @@ KemetTracker = __decorate([
     e$5('kemet-tracker')
 ], KemetTracker);
 
-const stylesTooltip = i$4 `
+const stylesUpload = i$4 `
   :host {
-    --kemet-tooltip-deg: -45deg;
-    --kemet-tooltip-size: 22px;
-    --kemet-tooltip-border-size: 1px;
-    --kemet-tooltip-rounded-tip: 4px;
-    --kemet-tooltip-background-color: var(--kemet-color-foreground);
-    --kemet-tooltip-border-color: var(--kemet-color-background);
-    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);
+    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-gray1-to-transparent));
+    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));
   }
 
-  #arrow {
-    content: '';
-    width: var(--kemet-tooltip-size);
-    height: var(--kemet-tooltip-size);
-    position: relative;
-    display: inline-block;
-    background: linear-gradient(
-        var(--kemet-tooltip-deg),
-        transparent calc(var(--kemet-tooltip-size) / 1.5),
-        var(--kemet-tooltip-background-color) 0
-      )
-      no-repeat;
-    background-repeat: no-repeat;
-    transform-origin: center center;
-    border-top-left-radius: var(--kemet-tooltip-rounded-tip);
-    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
-    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
+  :host([mobile]) {
+    display: block;
+    height: auto;
   }
 
-  [data-popper-placement^="top"] #arrow {
-    top: var(--kemet-tooltip-placement-offset);
-    transform: rotate(225deg);
+  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;
   }
 
-  [data-popper-placement^="bottom"] #arrow-container {
-    top: 0px;
+  .upload {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: var(--kemet-upload-margin);
+    flex-direction: column;
+    border: 2px dashed var(--kemet-color-white);
   }
 
-  [data-popper-placement^="bottom"] #arrow {
-    top: var(--kemet-tooltip-placement-offset);
-    transform: rotate(45deg);
+  :host([over]) .upload {
+    background-color: green;
   }
 
-  [data-popper-placement^="right"] #arrow {
-    left: var(--kemet-tooltip-placement-offset);
-    transform: rotate(-45deg);
+  :host([mobile]) .upload {
+    height: 280px;
   }
 
-  [data-popper-placement^="left"] #arrow-container {
-    right: 0;
+  .files {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+    padding: 0 1rem;
+    overflow: auto;
+    background-color: var(--kemet-color-gray1-to-transparent);
   }
 
-  [data-popper-placement^="left"] #arrow {
-    right: var(--kemet-tooltip-placement-offset);
-    transform: rotate(135deg);
+  :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;
+  }
+`;
+const stylesUploadFile = i$4 `
+  :host {
+    --kemet-upload-file-ripple-color: var(--kemet-color-primary);
+
+    color: var(--kemet-upload-file-color, var(--kemet-color-text));
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    height: 100%;
+    max-height: 50%;
+    padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
+    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
+  }
+
+  :host([status='error']) {
+    border: 1px solid var(--kemet-color-error);
+  }
+
+  :host([status='complete']) {
+    border: 1px solid var(--kemet-color-success);
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  .percentage {
+    font-size: clamp(2rem, 3vw, 2.5rem);
+    align-self: center;
+    justify-self: center;
+  }
+
+  .indicator {
+    transform: scale(0.8);
+  }
+
+  :host([status='complete']) .message,
+  :host([status='complete']) .indicator {
+    color: var(--kemet-color-success);
+  }
+
+  :host([status='error']) .message,
+  :host([status='error']) .indicator {
+    color: var(--kemet-color-error);
+  }
+`;
+const stylesLoaders = i$4 `
+  .lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+
+  .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;
+    }
   }
 `;
 
+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 / k ** i).toFixed(dm))} ${sizes[i]}`;
+};
 /**
- * @since 2.0.0
+ * @since 1.3.0
  * @status stable
  *
- * @tagname kemet-tooltip
- * @summary A tooltip is a Popper component that displays an dynamic arrow pointing to the trigger.
+ * @tagname kemet-upload-file
+ * @summary A file in the upload.
  *
- * @slot trigger - Controls opening and closing the tooltip.
- * @slot content - The contents of the tooltip.
+ * @prop {string} name - The name of the file
+ * @prop {number} loaded - The number of bytes loaded
+ * @prop {number} size - The file size in bytes
+ * @prop {string} type - The file type
+ * @prop {string} status - The status of the file. Values are complete | uploading | error.
+ * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
+ * @prop {string} message - An error message to give to users
  *
- * @csspart trigger - Contains the trigger for the tooltip.
- * @csspart content - Contains the content for the tooltip.
+ * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
+ * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
+ * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
  *
- * @cssproperty --kemet-tooltip-content-height - The height of the content.
- * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
- * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
- * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
- * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
- * @cssproperty --kemet-tooltip-border-color - The border color of the the arrow
- * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
+ * @csspart percentage - Area that displays the percentage.
+ * @csspart filename - Area that displays file name.
+ * @csspart loaded - Area that displays how much has uploaded.
+ * @csspart message - Area for the error message.
+ * @csspart indicator - Area for status icon.
  *
  */
-let KemetTooltip = class KemetTooltip extends KemetPopper$1 {
+let KemetUploadFile = class KemetUploadFile extends s$1 {
+    constructor() {
+        super(...arguments);
+        this.loaded = 0;
+        this.size = 0;
+        this.percent = 0;
+    }
+    updated() {
+        this.percent = this.calculatePercent();
+    }
     render() {
         return x `
-      <div
-        id="trigger"
-        part="trigger"
-        tabIndex="0"
-        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}
-        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}
-        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
-        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}
-      >
-        <slot name="trigger"></slot>
+      <div class="percentage" part="percentage">
+        <span>${this.percent}%</span>
       </div>
-      <div
-        id="content"
-        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
-      >
-        <slot name="content" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>
-        <div id="arrow-container" part="arrow-container" data-popper-arrow>
-          <div id="arrow" part="arrow"></div>
-        </div>
+      <div>
+        <h3 part="filename">${this.name}</h3>
+        <span part="loaded">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>
+        ${this.message ? x `<div class="message" part="message">${this.message}</div>` : null}
+      </div>
+      <div class="indicator" part="indicator">
+        ${this.getStatusIcon()}
       </div>
     `;
     }
-    measureContent() {
-        const height = this.contentElement.offsetHeight;
-        this.contentElement.style.setProperty("--kemet-tooltip-content-height", `${height}px`);
+    calculatePercent() {
+        const percent = Math.round((this.loaded * 100.0) / this.size);
+        return percent > 100 ? 100 : percent;
+    }
+    getStatusIcon() {
+        if (this.status === 'uploading') {
+            return x `<div class="lds-ripple"><div></div><div></div></div>`;
+        }
+        if (this.status === 'complete') {
+            return x `<kemet-icon icon="check-circle" size="48"></kemet-icon>`;
+        }
+        if (this.status === 'error') {
+            return x `<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`;
+        }
+        return null;
     }
 };
-KemetTooltip.styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
-KemetTooltip = __decorate([
-    e$5('kemet-tooltip')
-], KemetTooltip);
+KemetUploadFile.styles = [stylesUploadFile, stylesLoaders];
+__decorate([
+    e$4({ type: String })
+], KemetUploadFile.prototype, "name", void 0);
+__decorate([
+    e$4({ type: Number })
+], KemetUploadFile.prototype, "loaded", void 0);
+__decorate([
+    e$4({ type: Number })
+], KemetUploadFile.prototype, "size", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetUploadFile.prototype, "type", void 0);
+__decorate([
+    e$4({ type: String, reflect: true })
+], KemetUploadFile.prototype, "status", void 0);
+__decorate([
+    e$4({ type: Number })
+], KemetUploadFile.prototype, "percent", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetUploadFile.prototype, "message", void 0);
+KemetUploadFile = __decorate([
+    e$5('kemet-upload-file')
+], KemetUploadFile);
 
-const stylesUpload = i$4 `
+const stylesBase = i$4 `
   :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-gray1-to-transparent));
-    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));
+    position: relative;
+    display: block;
   }
 
-  :host([mobile]) {
+  input {
+    color: var(--kemet-color-text);
     display: block;
-    height: auto;
+    font-size: 1rem;
+    width: 100%;
+    height: var(--kemet-input-height, 50px);
+    padding: var(--kemet-input-padding, 0.5rem 1rem);
+    border: var(--kemet-input-border, 1px solid var(--kemet-color-background));
+    appearance: none;
+    box-sizing: border-box;
+    background-color: transparent;
   }
 
-  input {
+  input[type='color'] {
+    min-width: 10rem;
+  }
+
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
     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;
+  :host([status='error']) input {
+    border: var(--kemet-input-border-color-error, 1px solid var(--kemet-color-error));
   }
 
-  .upload {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: var(--kemet-upload-margin);
-    flex-direction: column;
-    border: 2px dashed var(--kemet-color-white);
+  :host([status='success']) input {
+    border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));
   }
 
-  :host([over]) .upload {
-    background-color: green;
+  :host([status='warning']) input {
+    border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));
   }
 
-  :host([mobile]) .upload {
-    height: 280px;
+  :host([disabled]) input {
+    opacity: 0.5;
   }
 
-  .files {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-    padding: 0 1rem;
-    overflow: auto;
-    background-color: var(--kemet-color-gray1-to-transparent);
+  :host([icon-left]) input {
+    padding-left: var(--kemet-input-icon-left-padding, 3rem);
   }
 
-  :host([mobile]) .files {
-    padding: 0;
-    max-height: 280px;
+  :host([icon-right]) input {
+    padding-right: var(--kemet-input-icon-right-padding, 3rem);
   }
 
-  .heading {
-    font-size: 1.25rem;
-    margin: 0 0 2rem 0;
+  :host([rounded]) input {
+    border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));
   }
 
-  :host([no-drag-drop]) .heading {
-    display: none;
+  :host([filled]) input {
+    border: var(--kemet-input-border-filled, none);
+    color: var(--kemet-input-color-filled, var(--kemet-color-white));
+    background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));
   }
-`;
-const stylesUploadFile = i$4 `
-  :host {
-    --kemet-upload-file-ripple-color: var(--kemet-color-primary);
 
-    color: var(--kemet-upload-file-color, var(--kemet-color-text));
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    height: 100%;
-    max-height: 50%;
-    padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
-    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
+  :host([filled]) kemet-icon,
+  :host([filled]) input::placeholder {
+    color: var(--kemet-input-color-filled, var(--kemet-color-white));
   }
 
-  :host([status='error']) {
-    border: 1px solid var(--kemet-color-error);
+  :host([status='error'][filled]) input {
+    background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));
   }
 
-  :host([status='complete']) {
-    border: 1px solid var(--kemet-color-success);
+  :host([status='success'][filled]) input {
+    background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));
   }
 
-  h3 {
-    margin: 0;
+  :host([status='warning'][filled]) input {
+    background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));
   }
 
-  .percentage {
-    font-size: clamp(2rem, 3vw, 2.5rem);
-    align-self: center;
-    justify-self: center;
+  kemet-icon {
+    color: var(--kemet-color-text);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
-  .indicator {
-    transform: scale(0.8);
+  kemet-icon.left {
+    left: 1rem;
   }
 
-  :host([status='complete']) .message,
-  :host([status='complete']) .indicator {
-    color: var(--kemet-color-success);
+  kemet-icon.right {
+    right: 1rem;
   }
 
-  :host([status='error']) .message,
-  :host([status='error']) .indicator {
-    color: var(--kemet-color-error);
-  }
-`;
-const stylesLoaders = i$4 `
-  .lds-ripple {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
+  kemet-icon.eye,
+  kemet-icon.search {
+    cursor: pointer;
   }
 
-  .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;
+  :host([status='error']) kemet-icon {
+    color: var(--kemet-color-error);
   }
 
-  .lds-ripple div:nth-child(2) {
-    animation-delay: -0.5s;
+  :host([status='warning']) kemet-icon {
+    color: var(--kemet-color-error);
   }
 
-  @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;
-    }
+  :host([status='success']) kemet-icon {
+    color: var(--kemet-color-success);
   }
 `;
 
-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 / k ** i).toFixed(dm))} ${sizes[i]}`;
-};
 /**
- * @since 1.3.0
+ * @since 1.0.0
  * @status stable
  *
- * @tagname kemet-upload-file
- * @summary A file in the upload.
+ * @tagname kemet-input
+ * @summary An enhanced input element.
  *
- * @prop {string} name - The name of the file
- * @prop {number} loaded - The number of bytes loaded
- * @prop {number} size - The file size in bytes
- * @prop {string} type - The file type
- * @prop {string} status - The status of the file. Values are complete | uploading | error.
- * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
- * @prop {string} message - An error message to give to users
+ * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
+ * @prop {string} name - The name of the input
+ * @prop {string} placeholder - The placeholder attribute
+ * @prop {string} minlength - The minlength attribute
+ * @prop {string} maxlength - The maxlength attribute
+ * @prop {string} min - The min attribute
+ * @prop {string} max - The max attribute
+ * @prop {string} step - The step attribute
+ * @prop {string} autocomplete - The autocomplete attribute
+ * @prop {string} pattern - The pattern attribute
+ * @prop {string} inputmode - The input mode attribute
+ * @prop {boolean} autofocus - The autofocus attribute
+ * @prop {boolean} disabled - The disable attribute
+ * @prop {boolean} readonly - The readonly attribute
+ * @prop {boolean} required - The required attribute
+ * @prop {string} type - The type of input
+ * @prop {string} value - The input's value
+ * @prop {boolean} invalid - States whether or not the input is invalid
+ * @prop {string} status - The status of the input
+ * @prop {boolean} validateOnBlur - Activates validation on blur
+ * @prop {string} ariaAutoComplete - Aria Autocomplete
+ * @prop {string} ariaControls - Aria Controls
+ * @prop {string} ariaActiveDescendant - Aria Active Descendant
+ * @prop {boolean} rounded - Displays rounded corners
+ * @prop {boolean} filled - Displays a filled input box
+ * @prop {string} iconRight - Custom Icon to the right of the input
+ * @prop {string} iconLeft - Custom Icon to the left of the input
+ * @prop {number} iconSize - Size of the icons
+ * @prop {object} validity - The HTML5 validity object.
+ * @prop {boolean} isPasswordVisible - Manages password visibility
+ * @prop {string} inputType - Input Type of keypress handled through handleInput(e)
+ * @prop {boolean} focused - Determines if the input is focused
  *
- * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
- * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
- * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
+ * @csspart input
  *
- * @csspart percentage - Area that displays the percentage.
- * @csspart filename - Area that displays file name.
- * @csspart loaded - Area that displays how much has uploaded.
- * @csspart message - Area for the error message.
- * @csspart indicator - Area for status icon.
+ * @cssproperty --kemet-input-height - The height of the input. Default: 50px.
+ * @cssproperty -kemet-input-padding - The padding on the input. Default: 0.5rem 1rem.
+ * @cssproperty -kemet-input-border - The border of the input. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty -kemet-input-border-color-error -  The border of the error state. Default: 1px solid var(--kemet-color-error).
+ * @cssproperty -kemet-input-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).
+ * @cssproperty -kemet-input-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning) |
+ * @cssproperty -kemet-input-icon-left-padding - The icon-left padding. Default: 3rem.
+ * @cssproperty -kemet-input-icon-right-padding - The icon-right padding. Default: 3rem.
+ * @cssproperty -kemet-input-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).
+ * @cssproperty -kemet-input-border-filled - The border on filled. Default: none.
+ * @cssproperty -kemet-input-color-filled - The color on filled. Default: var(--kemet-color-white).
+ * @cssproperty -kemet-input-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).
+ * @cssproperty -kemet-input-background-color-error - The error state background color. Default: var(--kemet-color-error).
+ * @cssproperty -kemet-input-background-color-success - The success state background color. Default: var(--kemet-color-success).
+ * @cssproperty -kemet-input-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).
+ *
+ * @event kemet-input-focused - Fires when the input receives and loses focus
+ * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.
+ * Use the validity object to support custom validation messages.
+ * @event kemet-input-input - Fires when the input receives input
  *
  */
-let KemetUploadFile = class KemetUploadFile extends s$1 {
+let KemetInput = class KemetInput extends s$1 {
     constructor() {
-        super(...arguments);
-        this.loaded = 0;
-        this.size = 0;
-        this.percent = 0;
+        super();
+        this.name = 'input';
+        this.type = 'text';
+        this.value = '';
+        this.status = 'standard';
+        this.validateOnBlur = false;
+        this.iconSize = 20;
+        this.isPasswordVisible = false;
+        this.focused = false;
+        /** @internal */
+        this.formSubmitController = new FormSubmitController(this);
+    }
+    ;
+    firstUpdated() {
+        // elements
+        this.input = this.shadowRoot.querySelector('input');
+        this.field = this.closest('kemet-field');
+        this.form = this.closest('form');
+        this.slug = this.field ? this.field.slug : 'input';
+        if (this.field) {
+            this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));
+        }
+    }
+    render() {
+        return x `
+      <div>
+        ${this.makeIconLeft()}
+        <input
+          part="input"
+          id=${this.slug}
+          name=${this.name}
+          placeholder=${l$1(this.placeholder)}
+          minlength=${l$1(this.minlength)}
+          maxlength=${l$1(this.maxlength)}
+          min=${l$1(this.min)}
+          max=${l$1(this.max)}
+          step=${l$1(this.step)}
+          autocomplete=${l$1(this.autocomplete)}
+          aria-autocomplete=${l$1(this.ariaAutoComplete)}
+          aria-controls=${l$1(this.ariaControls)}
+          aria-activedescendant=${l$1(this.ariaActiveDescendant)}
+          pattern=${l$1(this.pattern)}
+          inputmode=${l$1(this.inputmode)}
+          aria-invalid=${this.invalid ? 'true' : 'false'}
+          ?autofocus=${this.autofocus}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          .type="${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}"
+          .value=${l(this.value)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}
+      </div>
+    `;
+    }
+    /**
+     * Makes the right icon
+     * @private
+     * @returns {templateResult} A right icon
+     */
+    makeIconRight() {
+        if (this.iconRight) {
+            return x `
+        <kemet-icon class="right" icon="${this.iconRight}" size="${this.iconSize ? this.iconSize : 20}"></kemet-icon>
+      `;
+        }
+        return null;
+    }
+    /**
+     * Makes the left icon
+     * @private
+     * @returns {templateResult} A left icon
+     */
+    makeIconLeft() {
+        if (this.iconLeft) {
+            return x `
+        <kemet-icon class="left" icon="${this.iconLeft}" size="${this.iconSize ? this.iconSize : 16}"></kemet-icon>
+      `;
+        }
+        return null;
+    }
+    /**
+     * Makes a clear icon for search.
+     * @private
+     * @returns {templateResult} A search icon
+     */
+    makeIconClear() {
+        if (this.type === 'search' && this.value !== '') {
+            return x `
+        <kemet-icon class="search right" icon="x-lg" size="${this.iconSize}" @click=${() => this.handleClear()}></kemet-icon>
+      `;
+        }
+        return null;
+    }
+    /**
+     * Makes a password visibility toggle button
+     * @returns {templateResult} A mask or unmask icon
+     */
+    makeVisibilityToggle() {
+        if (this.type === 'password') {
+            return x `<kemet-icon
+        class="eye right"
+        icon="${this.setPasswordIcon()}"
+        @click=${() => this.togglePasswordVisibility()}
+      ></kemet-icon>`;
+        }
+        return null;
     }
-    updated() {
-        this.percent = this.calculatePercent();
+    setPasswordIcon() {
+        if (this.isPasswordVisible) {
+            return 'eye';
+        }
+        return 'eye-slash';
     }
-    render() {
-        return x `
-      <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 ? x `<div class="message" part="message">${this.message}</div>` : null}
-      </div>
-      <div class="indicator" part="indicator">
-        ${this.getStatusIcon()}
-      </div>
-    `;
+    /**
+     * Handles when the input receives focus
+     * @private
+     */
+    handleFocus() {
+        this.focused = true;
+        emitEvent(this, 'kemet-input-focused', true);
     }
-    calculatePercent() {
-        const percent = Math.round((this.loaded * 100.0) / this.size);
-        return percent > 100 ? 100 : percent;
+    /**
+     * Handles when the input loses focus
+     * @private
+     */
+    handleBlur() {
+        var _a, _b;
+        if (this.validateOnBlur && this.form && !this.form.noValidate) {
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity();
+            this.validity = (_b = this.input) === null || _b === void 0 ? void 0 : _b.validity;
+        }
+        this.focused = false;
+        emitEvent(this, 'kemet-input-focused', false);
     }
-    getStatusIcon() {
-        if (this.status === 'uploading') {
-            return x `<div class="lds-ripple"><div></div><div></div></div>`;
+    /**
+     * Handles when the input changes value
+     * @private
+     */
+    handleChange() {
+        this.value = this.input.value;
+        if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {
+            this.invalid = false;
+            this.status = 'standard';
+            this.validity = this.input.validity;
+            emitEvent(this, 'kemet-input-status', {
+                status: 'standard',
+                validity: this.input.validity,
+                element: this,
+            });
         }
-        if (this.status === 'complete') {
-            return x `<kemet-icon icon="check-circle" size="48"></kemet-icon>`;
+    }
+    /**
+     * Handles when the input receives input
+     * @private
+     */
+    handleInput() {
+        this.value = this.input.value;
+        emitEvent(this, 'kemet-input-input', this.value);
+    }
+    /**
+     * Handles when the input has an error
+     * @private
+     */
+    handleInvalid() {
+        var _a, _b;
+        this.validity = (_a = this.input) === null || _a === void 0 ? void 0 : _a.validity;
+        if (this.validateOnBlur) {
+            this.invalid = true;
+            this.status = 'error';
+            emitEvent(this, 'kemet-input-status', {
+                status: 'error',
+                validity: (_b = this.input) === null || _b === void 0 ? void 0 : _b.validity,
+                element: this,
+            });
         }
-        if (this.status === 'error') {
-            return x `<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`;
+    }
+    handleStatus(event) {
+        this.status = event.detail.status;
+    }
+    /**
+     * Toggles password visibility
+     * @private
+     */
+    togglePasswordVisibility() {
+        this.isPasswordVisible = !this.isPasswordVisible;
+    }
+    /**
+     * Handles the clear button for search
+     * @private
+     */
+    handleClear() {
+        this.value = '';
+        emitEvent(this, 'kemet-input-input', this.value);
+    }
+    /**
+     * Checks the validity of the character limit for the count component
+     * @private
+     * @returns {boolean}
+     */
+    checkLimitValidity() {
+        if (this.field) {
+            const count = this.field.querySelector('kemet-count');
+            if (count) {
+                return this.value.length < count.limit;
+            }
         }
-        return null;
+        return true;
+    }
+    /**
+     * Checks the validity of the standard input
+     * @public
+     * @returns {boolean}
+     */
+    checkValidity() {
+        var _a;
+        return (_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity();
+    }
+    /**
+     * Focuses the standard input
+     * @public
+     */
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
     }
 };
-KemetUploadFile.styles = [stylesUploadFile, stylesLoaders];
+KemetInput.styles = [stylesBase];
 __decorate([
     e$4({ type: String })
-], KemetUploadFile.prototype, "name", void 0);
+], KemetInput.prototype, "slug", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetInput.prototype, "name", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetInput.prototype, "placeholder", void 0);
 __decorate([
     e$4({ type: Number })
-], KemetUploadFile.prototype, "loaded", void 0);
+], KemetInput.prototype, "minlength", void 0);
 __decorate([
     e$4({ type: Number })
-], KemetUploadFile.prototype, "size", void 0);
+], KemetInput.prototype, "maxlength", void 0);
 __decorate([
     e$4({ type: String })
-], KemetUploadFile.prototype, "type", void 0);
+], KemetInput.prototype, "min", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetInput.prototype, "max", void 0);
+__decorate([
+    e$4({ type: Number })
+], KemetInput.prototype, "step", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetInput.prototype, "autocomplete", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetInput.prototype, "pattern", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetInput.prototype, "inputmode", void 0);
+__decorate([
+    e$4({ type: Boolean })
+], KemetInput.prototype, "autofocus", void 0);
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetInput.prototype, "disabled", void 0);
+__decorate([
+    e$4({ type: Boolean })
+], KemetInput.prototype, "readonly", void 0);
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetInput.prototype, "required", void 0);
+__decorate([
+    e$4({ type: String })
+], KemetInput.prototype, "type", void 0);
 __decorate([
     e$4({ type: String, reflect: true })
-], KemetUploadFile.prototype, "status", void 0);
+], KemetInput.prototype, "value", void 0);
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetInput.prototype, "invalid", void 0);
+__decorate([
+    e$4({ type: String, reflect: true })
+], KemetInput.prototype, "status", void 0);
+__decorate([
+    e$4({ type: Boolean, attribute: 'validate-on-blur' })
+], KemetInput.prototype, "validateOnBlur", void 0);
+__decorate([
+    e$4({ type: String, attribute: 'aria-autocomplete' })
+], KemetInput.prototype, "ariaAutoComplete", void 0);
+__decorate([
+    e$4({ type: String, attribute: 'aria-controls' })
+], KemetInput.prototype, "ariaControls", void 0);
+__decorate([
+    e$4({ type: String, attribute: 'aria-activedescendant' })
+], KemetInput.prototype, "ariaActiveDescendant", void 0);
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetInput.prototype, "rounded", void 0);
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetInput.prototype, "filled", void 0);
+__decorate([
+    e$4({ type: String, reflect: true, attribute: 'icon-right' })
+], KemetInput.prototype, "iconRight", void 0);
+__decorate([
+    e$4({ type: String, reflect: true, attribute: 'icon-left' })
+], KemetInput.prototype, "iconLeft", void 0);
 __decorate([
     e$4({ type: Number })
-], KemetUploadFile.prototype, "percent", void 0);
+], KemetInput.prototype, "iconSize", void 0);
+__decorate([
+    e$4({ type: Object })
+], KemetInput.prototype, "validity", void 0);
+__decorate([
+    e$4({ type: Boolean })
+], KemetInput.prototype, "isPasswordVisible", void 0);
 __decorate([
     e$4({ type: String })
-], KemetUploadFile.prototype, "message", void 0);
-KemetUploadFile = __decorate([
-    e$5('kemet-upload-file')
-], KemetUploadFile);
+], KemetInput.prototype, "inputType", void 0);
+__decorate([
+    e$4({ type: Boolean, reflect: true })
+], KemetInput.prototype, "focused", void 0);
+__decorate([
+    t$1()
+], KemetInput.prototype, "field", void 0);
+__decorate([
+    t$1()
+], KemetInput.prototype, "form", void 0);
+__decorate([
+    t$1()
+], KemetInput.prototype, "input", void 0);
+KemetInput = __decorate([
+    e$5('kemet-input')
+], KemetInput);
 
 const preventDefaults = (event) => {
     event.preventDefault();