kemet-ui 5.0.0 → 5.0.2

package/dist/wrappers/react.js

@@ -15,7 +15,11 @@ import { createComponent } from "@lit/react";
 
 // src/elements/accordion/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/elements/accordion/styles.css.ts
 import { css } from "lit";
@@ -192,7 +196,6 @@ KemetAccordion = __decorateClass([
 
 // src/elements/accordion-panel/index.ts
 import { html as html2, LitElement as LitElement2 } from "lit";
-import { customElement as customElement2, property as property2, state as state2 } from "lit/decorators.js";
 
 // src/elements/accordion-panel/styles.css.ts
 import { css as css2 } from "lit";
@@ -322,42 +325,41 @@ var KemetAccordionPanel = class extends LitElement2 {
 };
 KemetAccordionPanel.styles = [styles_css_default2];
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetAccordionPanel.prototype, "opened", 2);
 __decorateClass([
-  property2({ type: String, attribute: "max-height" })
+  property({ type: String, attribute: "max-height" })
 ], KemetAccordionPanel.prototype, "maxHeight", 2);
 __decorateClass([
-  property2({ type: String })
+  property({ type: String })
 ], KemetAccordionPanel.prototype, "slug", 2);
 __decorateClass([
-  property2({ type: Number })
+  property({ type: Number })
 ], KemetAccordionPanel.prototype, "index", 2);
 __decorateClass([
-  property2({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAccordionPanel.prototype, "dom", 2);
 __decorateClass([
-  property2({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAccordionPanel.prototype, "polarity", 2);
 __decorateClass([
-  state2()
+  state()
 ], KemetAccordionPanel.prototype, "focusableSelector", 2);
 __decorateClass([
-  state2()
+  state()
 ], KemetAccordionPanel.prototype, "bodyElement", 2);
 __decorateClass([
-  state2()
+  state()
 ], KemetAccordionPanel.prototype, "bodyElementFirst", 2);
 __decorateClass([
-  state2()
+  state()
 ], KemetAccordionPanel.prototype, "bodyElementLast", 2);
 KemetAccordionPanel = __decorateClass([
-  customElement2("kemet-accordion-panel")
+  customElement("kemet-accordion-panel")
 ], KemetAccordionPanel);
 
 // src/elements/button/index.ts
 import { html as html3, LitElement as LitElement3 } from "lit";
-import { customElement as customElement3, property as property3, query } from "lit/decorators.js";
 
 // src/elements/button/styles.css.ts
 import { css as css3 } from "lit";
@@ -794,57 +796,56 @@ var KemetButton = class extends LitElement3 {
 };
 KemetButton.styles = [styles_css_default3];
 __decorateClass([
-  property3({ type: String })
+  property({ type: String })
 ], KemetButton.prototype, "href", 2);
 __decorateClass([
-  property3({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetButton.prototype, "disabled", 2);
 __decorateClass([
-  property3({ reflect: true })
+  property({ reflect: true })
 ], KemetButton.prototype, "variant", 2);
 __decorateClass([
-  property3()
+  property()
 ], KemetButton.prototype, "target", 2);
 __decorateClass([
-  property3()
+  property()
 ], KemetButton.prototype, "type", 2);
 __decorateClass([
-  property3({ type: Boolean, reflect: true, attribute: "icon-left" })
+  property({ type: Boolean, reflect: true, attribute: "icon-left" })
 ], KemetButton.prototype, "iconLeft", 2);
 __decorateClass([
-  property3({ type: Boolean, reflect: true, attribute: "icon-right" })
+  property({ type: Boolean, reflect: true, attribute: "icon-right" })
 ], KemetButton.prototype, "iconRight", 2);
 __decorateClass([
-  property3({ type: Boolean, reflect: true, attribute: "icon-button" })
+  property({ type: Boolean, reflect: true, attribute: "icon-button" })
 ], KemetButton.prototype, "iconButton", 2);
 __decorateClass([
-  property3({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetButton.prototype, "rounded", 2);
 __decorateClass([
-  property3({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetButton.prototype, "loading", 2);
 __decorateClass([
-  property3({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetButton.prototype, "appearance", 2);
 __decorateClass([
-  property3({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetButton.prototype, "size", 2);
 __decorateClass([
-  property3({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetButton.prototype, "polarity", 2);
 __decorateClass([
-  property3({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetButton.prototype, "dom", 2);
 __decorateClass([
   query("button")
 ], KemetButton.prototype, "internalButton", 2);
 KemetButton = __decorateClass([
-  customElement3("kemet-button")
+  customElement("kemet-button")
 ], KemetButton);
 
 // src/elements/alert/index.ts
 import { html as html4, LitElement as LitElement4 } from "lit";
-import { customElement as customElement4, property as property4 } from "lit/decorators.js";
 
 // src/utilities/constants.ts
 var EnumDirections = /* @__PURE__ */ ((EnumDirections2) => {
@@ -1121,45 +1122,44 @@ var KemetAlert = class extends LitElement4 {
 };
 KemetAlert.styles = [styles_css_default4];
 __decorateClass([
-  property4({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetAlert.prototype, "opened", 2);
 __decorateClass([
-  property4({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetAlert.prototype, "reveal", 2);
 __decorateClass([
-  property4({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetAlert.prototype, "closable", 2);
 __decorateClass([
-  property4({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAlert.prototype, "appearance", 2);
 __decorateClass([
-  property4({ type: String, reflect: true, attribute: "border-appearance" })
+  property({ type: String, reflect: true, attribute: "border-appearance" })
 ], KemetAlert.prototype, "borderAppearance", 2);
 __decorateClass([
-  property4({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetAlert.prototype, "hidden", 2);
 __decorateClass([
-  property4({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAlert.prototype, "overlay", 2);
 __decorateClass([
-  property4({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAlert.prototype, "rounded", 2);
 __decorateClass([
-  property4({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetAlert.prototype, "filled", 2);
 __decorateClass([
-  property4({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAlert.prototype, "polarity", 2);
 __decorateClass([
-  property4({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAlert.prototype, "dom", 2);
 KemetAlert = __decorateClass([
-  customElement4("kemet-alert")
+  customElement("kemet-alert")
 ], KemetAlert);
 
 // src/elements/avatar/index.ts
 import { html as html5, LitElement as LitElement5 } from "lit";
-import { customElement as customElement5, property as property5 } from "lit/decorators.js";
 
 // src/elements/avatar/styles.css.ts
 import { css as css5 } from "lit";
@@ -1269,33 +1269,32 @@ var KemetAvatar = class extends LitElement5 {
 };
 KemetAvatar.styles = [styles_css_default5];
 __decorateClass([
-  property5({ type: String })
+  property({ type: String })
 ], KemetAvatar.prototype, "size", 2);
 __decorateClass([
-  property5({ type: String })
+  property({ type: String })
 ], KemetAvatar.prototype, "image", 2);
 __decorateClass([
-  property5({ type: String })
+  property({ type: String })
 ], KemetAvatar.prototype, "label", 2);
 __decorateClass([
-  property5({ type: String })
+  property({ type: String })
 ], KemetAvatar.prototype, "initials", 2);
 __decorateClass([
-  property5({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAvatar.prototype, "rounded", 2);
 __decorateClass([
-  property5({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAvatar.prototype, "polarity", 2);
 __decorateClass([
-  property5({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAvatar.prototype, "dom", 2);
 KemetAvatar = __decorateClass([
-  customElement5("kemet-avatar")
+  customElement("kemet-avatar")
 ], KemetAvatar);
 
 // src/elements/avatars/index.ts
 import { html as html6, LitElement as LitElement6 } from "lit";
-import { customElement as customElement6, property as property6 } from "lit/decorators.js";
 
 // src/elements/avatars/styles.css.ts
 import { css as css6 } from "lit";
@@ -1338,18 +1337,17 @@ var KemetAvatars = class extends LitElement6 {
 };
 KemetAvatars.styles = [styles_css_default6];
 __decorateClass([
-  property6({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAvatars.prototype, "polarity", 2);
 __decorateClass([
-  property6({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetAvatars.prototype, "dom", 2);
 KemetAvatars = __decorateClass([
-  customElement6("kemet-avatars")
+  customElement("kemet-avatars")
 ], KemetAvatars);
 
 // src/elements/badge/index.ts
 import { html as html7, LitElement as LitElement7 } from "lit";
-import { customElement as customElement7, property as property7, state as state3 } from "lit/decorators.js";
 
 // src/elements/badge/styles.css.ts
 import { css as css7 } from "lit";
@@ -1492,36 +1490,35 @@ var KemetBadge = class extends LitElement7 {
 };
 KemetBadge.styles = [styles_css_default7];
 __decorateClass([
-  property7({ reflect: true })
+  property({ reflect: true })
 ], KemetBadge.prototype, "appearance", 2);
 __decorateClass([
-  property7({ type: Number, attribute: "circle-padding" })
+  property({ type: Number, attribute: "circle-padding" })
 ], KemetBadge.prototype, "circlePadding", 2);
 __decorateClass([
-  property7({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetBadge.prototype, "rounded", 2);
 __decorateClass([
-  property7({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetBadge.prototype, "outlined", 2);
 __decorateClass([
-  property7({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetBadge.prototype, "polarity", 2);
 __decorateClass([
-  property7({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetBadge.prototype, "dom", 2);
 __decorateClass([
-  state3()
+  state()
 ], KemetBadge.prototype, "iconLeft", 2);
 __decorateClass([
-  state3()
+  state()
 ], KemetBadge.prototype, "iconRight", 2);
 KemetBadge = __decorateClass([
-  customElement7("kemet-badge")
+  customElement("kemet-badge")
 ], KemetBadge);
 
 // src/elements/card/index.ts
 import { html as html8, LitElement as LitElement8 } from "lit";
-import { customElement as customElement8, property as property8 } from "lit/decorators.js";
 
 // src/elements/card/styles.css.ts
 import { css as css8 } from "lit";
@@ -1701,33 +1698,32 @@ var KemetCard = class extends LitElement8 {
 };
 KemetCard.styles = [styles_css_default8];
 __decorateClass([
-  property8({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCard.prototype, "center", 2);
 __decorateClass([
-  property8({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetCard.prototype, "rounded", 2);
 __decorateClass([
-  property8({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCard.prototype, "filled", 2);
 __decorateClass([
-  property8({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCard.prototype, "borderless", 2);
 __decorateClass([
-  property8({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetCard.prototype, "elevation", 2);
 __decorateClass([
-  property8({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetCard.prototype, "polarity", 2);
 __decorateClass([
-  property8({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetCard.prototype, "dom", 2);
 KemetCard = __decorateClass([
-  customElement8("kemet-card")
+  customElement("kemet-card")
 ], KemetCard);
 
 // src/elements/checkbox/index.ts
 import { html as html9, LitElement as LitElement9 } from "lit";
-import { customElement as customElement9, property as property9, query as query2 } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 
@@ -2057,58 +2053,61 @@ var KemetCheckbox = class extends LitElement9 {
 };
 KemetCheckbox.styles = [styles_css_default9];
 __decorateClass([
-  property9({ type: String })
+  property({ type: String })
 ], KemetCheckbox.prototype, "label", 2);
 __decorateClass([
-  property9({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCheckbox.prototype, "checked", 2);
 __decorateClass([
-  property9({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCheckbox.prototype, "indeterminate", 2);
 __decorateClass([
-  property9({ type: String })
+  property({ type: String })
 ], KemetCheckbox.prototype, "name", 2);
 __decorateClass([
-  property9({ type: Boolean })
+  property({ type: Boolean })
 ], KemetCheckbox.prototype, "value", 2);
 __decorateClass([
-  property9({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCheckbox.prototype, "disabled", 2);
 __decorateClass([
-  property9({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCheckbox.prototype, "required", 2);
 __decorateClass([
-  property9({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCheckbox.prototype, "focused", 2);
 __decorateClass([
-  property9({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCheckbox.prototype, "rounded", 2);
 __decorateClass([
-  property9({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCheckbox.prototype, "filled", 2);
 __decorateClass([
-  property9({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetCheckbox.prototype, "appearance", 2);
 __decorateClass([
-  property9({ type: String })
+  property({ type: String })
 ], KemetCheckbox.prototype, "message", 2);
 __decorateClass([
-  property9({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetCheckbox.prototype, "polarity", 2);
 __decorateClass([
-  property9({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetCheckbox.prototype, "dom", 2);
 __decorateClass([
-  query2("input")
+  query("input")
 ], KemetCheckbox.prototype, "input", 2);
 KemetCheckbox = __decorateClass([
-  customElement9("kemet-checkbox")
+  customElement("kemet-checkbox")
 ], KemetCheckbox);
 
 // src/elements/count/index.ts
 import { html as html10, css as css10, LitElement as LitElement10 } from "lit";
-import { customElement as customElement10, property as property10, state as state4 } from "lit/decorators.js";
 var KemetCount = class extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this.dom = "initializing";
+  }
   firstUpdated() {
     this.field = this.closest("kemet-field");
     this.inputSlot = this.field.querySelector('[slot="input"]');
@@ -2117,12 +2116,25 @@ var KemetCount = class extends LitElement10 {
     this.field.addEventListener("kemet-textarea-input", (event) => this.handleInput(event));
     this.input = this.inputSlot?.shadowRoot?.querySelector("input") || null;
     this.textarea = this.inputSlot?.shadowRoot?.querySelector("textarea") || null;
+    emitEvent(this, "kemet-count-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
   }
   render() {
+    if (isNaN(this.remaining)) {
+      this.remaining = this.limit;
+    }
     return html10`${this.remaining} ${this.message}`;
   }
   handleInput(event) {
+    console.log("event detail", event.detail);
     this.remaining = this.limit - event.detail.value.length;
+    console.log("remaining", this.remaining);
     const nativeElement = this.input || this.textarea;
     if (nativeElement) {
       if (this.remaining < 0) {
@@ -2157,36 +2169,41 @@ KemetCount.styles = [
     `
 ];
 __decorateClass([
-  property10({ type: String })
+  property({ type: String })
 ], KemetCount.prototype, "message", 2);
 __decorateClass([
-  property10({ type: Number })
+  property({ type: Number })
 ], KemetCount.prototype, "limit", 2);
 __decorateClass([
-  property10({ type: Boolean, attribute: "validate-immediately" })
+  property({ type: Boolean, attribute: "validate-immediately" })
 ], KemetCount.prototype, "validateImmediately", 2);
 __decorateClass([
-  state4()
+  property({ type: String, reflect: true })
+], KemetCount.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetCount.prototype, "dom", 2);
+__decorateClass([
+  state()
 ], KemetCount.prototype, "remaining", 2);
 __decorateClass([
-  state4()
+  state()
 ], KemetCount.prototype, "field", 2);
 __decorateClass([
-  state4()
+  state()
 ], KemetCount.prototype, "inputSlot", 2);
 __decorateClass([
-  state4()
+  state()
 ], KemetCount.prototype, "input", 2);
 __decorateClass([
-  state4()
+  state()
 ], KemetCount.prototype, "textarea", 2);
 KemetCount = __decorateClass([
-  customElement10("kemet-count")
+  customElement("kemet-count")
 ], KemetCount);
 
 // src/elements/combo/index.ts
 import { html as html11, LitElement as LitElement11 } from "lit";
-import { customElement as customElement11, property as property11, state as state5 } from "lit/decorators.js";
 
 // src/elements/combo/styles.css.ts
 import { css as css11 } from "lit";
@@ -2362,34 +2379,33 @@ var KemetCombo = class extends LitElement11 {
 };
 KemetCombo.styles = [styles_css_default10];
 __decorateClass([
-  property11({ type: String })
+  property({ type: String })
 ], KemetCombo.prototype, "slug", 2);
 __decorateClass([
-  property11({ type: Array })
+  property({ type: Array })
 ], KemetCombo.prototype, "options", 2);
 __decorateClass([
-  property11({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetCombo.prototype, "show", 2);
 __decorateClass([
-  state5()
+  state()
 ], KemetCombo.prototype, "filteredOptions", 2);
 __decorateClass([
-  state5()
+  state()
 ], KemetCombo.prototype, "field", 2);
 __decorateClass([
-  state5()
+  state()
 ], KemetCombo.prototype, "input", 2);
 KemetCombo = __decorateClass([
-  customElement11("kemet-combo")
+  customElement("kemet-combo")
 ], KemetCombo);
 
 // src/elements/drawer/index.ts
 import { LitElement as LitElement12, html as html12 } from "lit";
-import { customElement as customElement12, property as property12 } from "lit/decorators.js";
 
 // src/elements/drawer/effects.ts
 import { css as css12, unsafeCSS as unsafeCSS11 } from "lit";
-var documentHeight = `${document.documentElement.scrollHeight}px`;
+var documentHeight = typeof document !== "undefined" ? `${document.documentElement.scrollHeight}px` : "100vh";
 var effects_default = css12`
   /* slide */
   :host([effect='slide']) [part=drawer] {
@@ -2763,33 +2779,32 @@ var KemetDrawer = class extends LitElement12 {
 };
 KemetDrawer.styles = [styles_css_default11, effects_default];
 __decorateClass([
-  property12({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetDrawer.prototype, "opened", 2);
 __decorateClass([
-  property12({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetDrawer.prototype, "effect", 2);
 __decorateClass([
-  property12({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetDrawer.prototype, "side", 2);
 __decorateClass([
-  property12({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetDrawer.prototype, "overlay", 2);
 __decorateClass([
-  property12({ type: Boolean, reflect: true, attribute: "fill-viewport" })
+  property({ type: Boolean, reflect: true, attribute: "fill-viewport" })
 ], KemetDrawer.prototype, "fillViewport", 2);
 __decorateClass([
-  property12({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetDrawer.prototype, "polarity", 2);
 __decorateClass([
-  property12({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetDrawer.prototype, "dom", 2);
 KemetDrawer = __decorateClass([
-  customElement12("kemet-drawer")
+  customElement("kemet-drawer")
 ], KemetDrawer);
 
 // src/elements/fab/index.ts
 import { html as html13, LitElement as LitElement13 } from "lit";
-import { customElement as customElement13, property as property13 } from "lit/decorators.js";
 
 // src/elements/fab/styles.css.ts
 import { css as css15 } from "lit";
@@ -2986,39 +3001,38 @@ var KemetFAB = class extends LitElement13 {
 };
 KemetFAB.styles = [styles_css_default12];
 __decorateClass([
-  property13({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetFAB.prototype, "expanded", 2);
 __decorateClass([
-  property13({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetFAB.prototype, "outlined", 2);
 __decorateClass([
-  property13({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetFAB.prototype, "disabled", 2);
 __decorateClass([
-  property13({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFAB.prototype, "rounded", 2);
 __decorateClass([
-  property13({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFAB.prototype, "appearance", 2);
 __decorateClass([
-  property13({ type: Number, attribute: "expand-point" })
+  property({ type: Number, attribute: "expand-point" })
 ], KemetFAB.prototype, "expandPoint", 2);
 __decorateClass([
-  property13({ type: Number, attribute: "collapse-point" })
+  property({ type: Number, attribute: "collapse-point" })
 ], KemetFAB.prototype, "collapsePoint", 2);
 __decorateClass([
-  property13({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFAB.prototype, "polarity", 2);
 __decorateClass([
-  property13({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFAB.prototype, "dom", 2);
 KemetFAB = __decorateClass([
-  customElement13("kemet-fab")
+  customElement("kemet-fab")
 ], KemetFAB);
 
 // src/elements/field/index.ts
 import { html as html14, LitElement as LitElement14 } from "lit";
-import { customElement as customElement14, property as property14, state as state6 } from "lit/decorators.js";
 
 // src/elements/field/styles.css.ts
 import { css as css16 } from "lit";
@@ -3133,54 +3147,53 @@ var HTMLKemetFieldElement = class extends LitElement14 {
 };
 HTMLKemetFieldElement.styles = [styles_css_default13];
 __decorateClass([
-  property14({ type: String })
+  property({ type: String })
 ], HTMLKemetFieldElement.prototype, "slug", 2);
 __decorateClass([
-  property14({ type: String })
+  property({ type: String })
 ], HTMLKemetFieldElement.prototype, "label", 2);
 __decorateClass([
-  property14({ type: String })
+  property({ type: String })
 ], HTMLKemetFieldElement.prototype, "message", 2);
 __decorateClass([
-  property14({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetFieldElement.prototype, "focused", 2);
 __decorateClass([
-  property14({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetFieldElement.prototype, "appearance", 2);
 __decorateClass([
-  property14({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetFieldElement.prototype, "filled", 2);
 __decorateClass([
-  property14({ type: Number })
+  property({ type: Number })
 ], HTMLKemetFieldElement.prototype, "length", 2);
 __decorateClass([
-  property14({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetFieldElement.prototype, "disabled", 2);
 __decorateClass([
-  property14({ type: String, attribute: "error-icon" })
+  property({ type: String, attribute: "error-icon" })
 ], HTMLKemetFieldElement.prototype, "errorIcon", 2);
 __decorateClass([
-  property14({ type: String, attribute: "success-icon" })
+  property({ type: String, attribute: "success-icon" })
 ], HTMLKemetFieldElement.prototype, "successIcon", 2);
 __decorateClass([
-  property14({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetFieldElement.prototype, "polarity", 2);
 __decorateClass([
-  property14({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetFieldElement.prototype, "dom", 2);
 __decorateClass([
-  state6()
+  state()
 ], HTMLKemetFieldElement.prototype, "slotInput", 2);
 __decorateClass([
-  state6()
+  state()
 ], HTMLKemetFieldElement.prototype, "slotCombo", 2);
 HTMLKemetFieldElement = __decorateClass([
-  customElement14("kemet-field")
+  customElement("kemet-field")
 ], HTMLKemetFieldElement);
 
 // src/elements/flipcard/index.ts
 import { html as html15, LitElement as LitElement15 } from "lit";
-import { customElement as customElement15, property as property15, state as state7, query as query3 } from "lit/decorators.js";
 
 // src/elements/flipcard/styles.css.ts
 import { css as css17 } from "lit";
@@ -3350,48 +3363,47 @@ var KemetFlipcard = class extends LitElement15 {
 };
 KemetFlipcard.styles = [styles_css_default14];
 __decorateClass([
-  property15({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFlipcard.prototype, "axis", 2);
 __decorateClass([
-  property15({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetFlipcard.prototype, "flipped", 2);
 __decorateClass([
-  property15({ type: Boolean, attribute: "flip-on-hover" })
+  property({ type: Boolean, attribute: "flip-on-hover" })
 ], KemetFlipcard.prototype, "flipOnHover", 2);
 __decorateClass([
-  property15({ type: String })
+  property({ type: String })
 ], KemetFlipcard.prototype, "height", 2);
 __decorateClass([
-  property15({ type: Boolean })
+  property({ type: Boolean })
 ], KemetFlipcard.prototype, "measure", 2);
 __decorateClass([
-  property15({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFlipcard.prototype, "rounded", 2);
 __decorateClass([
-  property15({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFlipcard.prototype, "polarity", 2);
 __decorateClass([
-  property15({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFlipcard.prototype, "dom", 2);
 __decorateClass([
-  query3('[name="front"]')
+  query('[name="front"]')
 ], KemetFlipcard.prototype, "frontChildren", 2);
 __decorateClass([
-  query3('[name="back"]')
+  query('[name="back"]')
 ], KemetFlipcard.prototype, "backChildren", 2);
 __decorateClass([
-  state7()
+  state()
 ], KemetFlipcard.prototype, "frontElement", 2);
 __decorateClass([
-  state7()
+  state()
 ], KemetFlipcard.prototype, "backElement", 2);
 KemetFlipcard = __decorateClass([
-  customElement15("kemet-flipcard")
+  customElement("kemet-flipcard")
 ], KemetFlipcard);
 
 // src/elements/flipcard-trigger/index.ts
 import { LitElement as LitElement16, html as html16, css as css18 } from "lit";
-import { customElement as customElement16, property as property16 } from "lit/decorators.js";
 var KemetFlipcardTrigger = class extends LitElement16 {
   constructor() {
     super(...arguments);
@@ -3434,18 +3446,17 @@ KemetFlipcardTrigger.styles = [
     `
 ];
 __decorateClass([
-  property16({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFlipcardTrigger.prototype, "polarity", 2);
 __decorateClass([
-  property16({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetFlipcardTrigger.prototype, "dom", 2);
 KemetFlipcardTrigger = __decorateClass([
-  customElement16("kemet-flipcard-trigger")
+  customElement("kemet-flipcard-trigger")
 ], KemetFlipcardTrigger);
 
 // src/elements/icon/index.ts
 import { html as html17, LitElement as LitElement17 } from "lit";
-import { customElement as customElement17, property as property17, state as state8 } from "lit/decorators.js";
 import { isTemplateResult } from "lit/directive-helpers.js";
 
 // src/elements/icon/styles.css.ts
@@ -3547,7 +3558,7 @@ var KemetIcon = class extends LitElement17 {
     }
     if (isTemplateResult(svg)) {
       this.svg = svg;
-    } else if (svg instanceof SVGSVGElement) {
+    } else if (typeof SVGSVGElement !== "undefined" && svg instanceof SVGSVGElement) {
       this.svg = svg.cloneNode(true);
     }
   }
@@ -3627,39 +3638,38 @@ var KemetIcon = class extends LitElement17 {
 };
 KemetIcon.styles = [styles_css_default15];
 __decorateClass([
-  property17({ type: String })
+  property({ type: String })
 ], KemetIcon.prototype, "name", 2);
 __decorateClass([
-  property17({ type: String })
+  property({ type: String })
 ], KemetIcon.prototype, "library", 2);
 __decorateClass([
-  property17({ type: String })
+  property({ type: String })
 ], KemetIcon.prototype, "family", 2);
 __decorateClass([
-  property17({ type: Number })
+  property({ type: Number })
 ], KemetIcon.prototype, "size", 2);
 __decorateClass([
-  property17({ type: String })
+  property({ type: String })
 ], KemetIcon.prototype, "version", 2);
 __decorateClass([
-  property17({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetIcon.prototype, "polarity", 2);
 __decorateClass([
-  property17({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetIcon.prototype, "dom", 2);
 __decorateClass([
-  state8()
+  state()
 ], KemetIcon.prototype, "svg", 2);
 __decorateClass([
-  state8()
+  state()
 ], KemetIcon.prototype, "url", 2);
 KemetIcon = __decorateClass([
-  customElement17("kemet-icon")
+  customElement("kemet-icon")
 ], KemetIcon);
 
 // src/elements/input/index.ts
 import { html as html18, LitElement as LitElement18 } from "lit";
-import { customElement as customElement18, property as property18, state as state9 } from "lit/decorators.js";
 import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
 import { live as live2 } from "lit/directives/live.js";
 
@@ -3668,8 +3678,8 @@ import { css as css20 } from "lit";
 var styles_css_default16 = css20`:host {
   /* public */
   --kemet-input-height: 50px;
-  --kemet-input-color: var(--kemet-color-font-base);
-  --kemet-input-border: 1px solid var(--kemet-input-color);
+  --kemet-input-color: inherit;
+  --kemet-input-border: 1px solid;
   --kemet-input-padding-y: 0.5rem;
   --kemet-input-padding-x: 1rem;
   --kemet-input-icon-gap: 3rem;
@@ -4055,117 +4065,116 @@ var HTMLKemetInputElement = class extends LitElement18 {
 };
 HTMLKemetInputElement.styles = [styles_css_default16];
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "slug", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "name", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "placeholder", 2);
 __decorateClass([
-  property18({ type: Number })
+  property({ type: Number })
 ], HTMLKemetInputElement.prototype, "minlength", 2);
 __decorateClass([
-  property18({ type: Number })
+  property({ type: Number })
 ], HTMLKemetInputElement.prototype, "maxlength", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "min", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "max", 2);
 __decorateClass([
-  property18({ type: Number })
+  property({ type: Number })
 ], HTMLKemetInputElement.prototype, "step", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "autocomplete", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "pattern", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "inputmode", 2);
 __decorateClass([
-  property18({ type: Boolean })
+  property({ type: Boolean })
 ], HTMLKemetInputElement.prototype, "autofocus", 2);
 __decorateClass([
-  property18({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetInputElement.prototype, "disabled", 2);
 __decorateClass([
-  property18({ type: Boolean })
+  property({ type: Boolean })
 ], HTMLKemetInputElement.prototype, "readonly", 2);
 __decorateClass([
-  property18({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetInputElement.prototype, "required", 2);
 __decorateClass([
-  property18({ type: String })
+  property({ type: String })
 ], HTMLKemetInputElement.prototype, "type", 2);
 __decorateClass([
-  property18({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetInputElement.prototype, "value", 2);
 __decorateClass([
-  property18({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetInputElement.prototype, "invalid", 2);
 __decorateClass([
-  property18({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetInputElement.prototype, "appearance", 2);
 __decorateClass([
-  property18({ type: Boolean, attribute: "validate-on-blur" })
+  property({ type: Boolean, attribute: "validate-on-blur" })
 ], HTMLKemetInputElement.prototype, "validateOnBlur", 2);
 __decorateClass([
-  property18({ type: String, attribute: "aria-autocomplete" })
+  property({ type: String, attribute: "aria-autocomplete" })
 ], HTMLKemetInputElement.prototype, "ariaAutoComplete", 2);
 __decorateClass([
-  property18({ type: String, attribute: "aria-controls" })
+  property({ type: String, attribute: "aria-controls" })
 ], HTMLKemetInputElement.prototype, "ariaControls", 2);
 __decorateClass([
-  property18({ type: String, attribute: "aria-activedescendant" })
+  property({ type: String, attribute: "aria-activedescendant" })
 ], HTMLKemetInputElement.prototype, "ariaActiveDescendant", 2);
 __decorateClass([
-  property18({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetInputElement.prototype, "filled", 2);
 __decorateClass([
-  property18({ type: Boolean, reflect: true, attribute: "icon-right" })
+  property({ type: Boolean, reflect: true, attribute: "icon-right" })
 ], HTMLKemetInputElement.prototype, "iconRight", 2);
 __decorateClass([
-  property18({ type: Boolean, reflect: true, attribute: "icon-left" })
+  property({ type: Boolean, reflect: true, attribute: "icon-left" })
 ], HTMLKemetInputElement.prototype, "iconLeft", 2);
 __decorateClass([
-  property18({ type: Object })
+  property({ type: Object })
 ], HTMLKemetInputElement.prototype, "validity", 2);
 __decorateClass([
-  property18({ type: Boolean })
+  property({ type: Boolean })
 ], HTMLKemetInputElement.prototype, "isPasswordVisible", 2);
 __decorateClass([
-  property18({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], HTMLKemetInputElement.prototype, "focused", 2);
 __decorateClass([
-  property18({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetInputElement.prototype, "rounded", 2);
 __decorateClass([
-  property18({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetInputElement.prototype, "polarity", 2);
 __decorateClass([
-  property18({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], HTMLKemetInputElement.prototype, "dom", 2);
 __decorateClass([
-  state9()
+  state()
 ], HTMLKemetInputElement.prototype, "field", 2);
 __decorateClass([
-  state9()
+  state()
 ], HTMLKemetInputElement.prototype, "form", 2);
 __decorateClass([
-  state9()
+  state()
 ], HTMLKemetInputElement.prototype, "input", 2);
 HTMLKemetInputElement = __decorateClass([
-  customElement18("kemet-input")
+  customElement("kemet-input")
 ], HTMLKemetInputElement);
 
 // src/elements/dialog/index.ts
 import { html as html19, LitElement as LitElement19 } from "lit";
-import { customElement as customElement19, property as property19, query as query4, state as state10 } from "lit/decorators.js";
 
 // src/elements/dialog/styles.css.ts
 import { css as css21 } from "lit";
@@ -4578,45 +4587,44 @@ var Dialog = class extends LitElement19 {
 };
 Dialog.styles = [styles_css_default17, effects_css_default];
 __decorateClass([
-  property19({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], Dialog.prototype, "opened", 2);
 __decorateClass([
-  property19({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], Dialog.prototype, "effect", 2);
 __decorateClass([
-  property19({ type: Boolean, attribute: "close-on-click" })
+  property({ type: Boolean, attribute: "close-on-click" })
 ], Dialog.prototype, "closeOnClick", 2);
 __decorateClass([
-  property19({ type: String })
+  property({ type: String })
 ], Dialog.prototype, "breakpoint", 2);
 __decorateClass([
-  property19({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], Dialog.prototype, "mobile", 2);
 __decorateClass([
-  property19({ reflect: true })
+  property({ reflect: true })
 ], Dialog.prototype, "rounded", 2);
 __decorateClass([
-  property19({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], Dialog.prototype, "polarity", 2);
 __decorateClass([
-  property19({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], Dialog.prototype, "dom", 2);
 __decorateClass([
-  query4("dialog")
+  query("dialog")
 ], Dialog.prototype, "dialogElement", 2);
 __decorateClass([
-  state10()
+  state()
 ], Dialog.prototype, "focusableSelector", 2);
 __decorateClass([
-  state10()
+  state()
 ], Dialog.prototype, "focusableElements", 2);
 Dialog = __decorateClass([
-  customElement19("kemet-dialog")
+  customElement("kemet-dialog")
 ], Dialog);
 
 // src/elements/dialog-close/index.ts
 import { css as css23, html as html20, LitElement as LitElement20 } from "lit";
-import { customElement as customElement20, property as property20 } from "lit/decorators.js";
 var DialogClose = class extends LitElement20 {
   constructor() {
     super(...arguments);
@@ -4654,18 +4662,17 @@ DialogClose.styles = [
     `
 ];
 __decorateClass([
-  property20({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], DialogClose.prototype, "polarity", 2);
 __decorateClass([
-  property20({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], DialogClose.prototype, "dom", 2);
 DialogClose = __decorateClass([
-  customElement20("kemet-dialog-close")
+  customElement("kemet-dialog-close")
 ], DialogClose);
 
 // src/elements/input-combo/index.ts
 import { html as html21, LitElement as LitElement21 } from "lit";
-import { customElement as customElement21, property as property21, query as query5, state as state11 } from "lit/decorators.js";
 import { live as live3 } from "lit/directives/live.js";
 
 // src/elements/input-combo/styles.css.ts
@@ -5004,63 +5011,62 @@ var InputCombo = class extends LitElement21 {
 };
 InputCombo.styles = [styles_css_default18];
 __decorateClass([
-  property21({ type: String })
+  property({ type: String })
 ], InputCombo.prototype, "slug", 2);
 __decorateClass([
-  property21({ type: String })
+  property({ type: String })
 ], InputCombo.prototype, "placeholder", 2);
 __decorateClass([
-  property21({ type: Boolean })
+  property({ type: Boolean })
 ], InputCombo.prototype, "disabled", 2);
 __decorateClass([
-  property21({ type: Boolean })
+  property({ type: Boolean })
 ], InputCombo.prototype, "filled", 2);
 __decorateClass([
-  property21({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputCombo.prototype, "rounded", 2);
 __decorateClass([
-  property21({ type: String })
+  property({ type: String })
 ], InputCombo.prototype, "name", 2);
 __decorateClass([
-  property21({ reflect: true })
+  property({ reflect: true })
 ], InputCombo.prototype, "appearance", 2);
 __decorateClass([
-  property21({ type: Boolean })
+  property({ type: Boolean })
 ], InputCombo.prototype, "required", 2);
 __decorateClass([
-  property21({ type: Boolean })
+  property({ type: Boolean })
 ], InputCombo.prototype, "invalid", 2);
 __decorateClass([
-  property21({ type: Boolean, attribute: "validate-on-blur" })
+  property({ type: Boolean, attribute: "validate-on-blur" })
 ], InputCombo.prototype, "validateOnBlur", 2);
 __decorateClass([
-  state11()
+  state()
 ], InputCombo.prototype, "value", 2);
 __decorateClass([
-  state11()
+  state()
 ], InputCombo.prototype, "selections", 2);
 __decorateClass([
-  state11()
+  state()
 ], InputCombo.prototype, "paddingLeft", 2);
 __decorateClass([
-  state11()
+  state()
 ], InputCombo.prototype, "field", 2);
 __decorateClass([
-  state11()
+  state()
 ], InputCombo.prototype, "combo", 2);
 __decorateClass([
-  query5("[part=chips]")
+  query("[part=chips]")
 ], InputCombo.prototype, "chips", 2);
 __decorateClass([
-  query5("input")
+  query("input")
 ], InputCombo.prototype, "input", 2);
 InputCombo = __decorateClass([
-  customElement21("kemet-input-combo")
+  customElement("kemet-input-combo")
 ], InputCombo);
 
 // src/elements/password/index.ts
 import { html as html22, LitElement as LitElement22 } from "lit";
-import { customElement as customElement22, property as property22, state as state12 } from "lit/decorators.js";
 
 // src/elements/password/styles.css.ts
 import { css as css25 } from "lit";
@@ -5258,42 +5264,41 @@ var KemetPassword = class extends LitElement22 {
 };
 KemetPassword.styles = [styles_css_default19];
 __decorateClass([
-  property22({ type: Array })
+  property({ type: Array })
 ], KemetPassword.prototype, "rules", 2);
 __decorateClass([
-  property22({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetPassword.prototype, "show", 2);
 __decorateClass([
-  property22({ type: String })
+  property({ type: String })
 ], KemetPassword.prototype, "value", 2);
 __decorateClass([
-  property22({ type: String })
+  property({ type: String })
 ], KemetPassword.prototype, "message", 2);
 __decorateClass([
-  property22({ type: String })
+  property({ type: String })
 ], KemetPassword.prototype, "strength", 2);
 __decorateClass([
-  property22({ type: String })
+  property({ type: String })
 ], KemetPassword.prototype, "icon", 2);
 __decorateClass([
-  property22({ type: Number })
+  property({ type: Number })
 ], KemetPassword.prototype, "iconSize", 2);
 __decorateClass([
-  state12()
+  state()
 ], KemetPassword.prototype, "appearance", 2);
 __decorateClass([
-  state12()
+  state()
 ], KemetPassword.prototype, "field", 2);
 __decorateClass([
-  state12()
+  state()
 ], KemetPassword.prototype, "input", 2);
 KemetPassword = __decorateClass([
-  customElement22("kemet-password")
+  customElement("kemet-password")
 ], KemetPassword);
 
 // src/elements/radio/index.ts
 import { html as html23, LitElement as LitElement23 } from "lit";
-import { customElement as customElement23, property as property23, state as state13 } from "lit/decorators.js";
 import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
 import { live as live4 } from "lit/directives/live.js";
 
@@ -5459,42 +5464,41 @@ var KemetRadio = class extends LitElement23 {
 };
 KemetRadio.styles = [styles_css_default20];
 __decorateClass([
-  property23({ type: String })
+  property({ type: String })
 ], KemetRadio.prototype, "label", 2);
 __decorateClass([
-  property23({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetRadio.prototype, "checked", 2);
 __decorateClass([
-  property23({ type: String })
+  property({ type: String })
 ], KemetRadio.prototype, "name", 2);
 __decorateClass([
-  property23({ type: String })
+  property({ type: String })
 ], KemetRadio.prototype, "value", 2);
 __decorateClass([
-  property23({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetRadio.prototype, "disabled", 2);
 __decorateClass([
-  property23({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetRadio.prototype, "focused", 2);
 __decorateClass([
-  property23({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetRadio.prototype, "filled", 2);
 __decorateClass([
-  property23({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRadio.prototype, "polarity", 2);
 __decorateClass([
-  property23({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRadio.prototype, "dom", 2);
 __decorateClass([
-  state13()
+  state()
 ], KemetRadio.prototype, "input", 2);
 KemetRadio = __decorateClass([
-  customElement23("kemet-radio")
+  customElement("kemet-radio")
 ], KemetRadio);
 
 // src/elements/radios/index.ts
 import { html as html24, LitElement as LitElement24 } from "lit";
-import { customElement as customElement24, property as property24, state as state14 } from "lit/decorators.js";
 
 // src/elements/radios/styles.css.ts
 import { css as css27 } from "lit";
@@ -5636,42 +5640,41 @@ var KemetRadios = class extends LitElement24 {
 };
 KemetRadios.styles = [styles_css_default21];
 __decorateClass([
-  property24({ type: String })
+  property({ type: String })
 ], KemetRadios.prototype, "legend", 2);
 __decorateClass([
-  property24({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRadios.prototype, "axis", 2);
 __decorateClass([
-  property24({ type: String })
+  property({ type: String })
 ], KemetRadios.prototype, "value", 2);
 __decorateClass([
-  property24({ type: String })
+  property({ type: String })
 ], KemetRadios.prototype, "name", 2);
 __decorateClass([
-  property24({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRadios.prototype, "appearance", 2);
 __decorateClass([
-  property24({ type: String })
+  property({ type: String })
 ], KemetRadios.prototype, "message", 2);
 __decorateClass([
-  property24({ type: Boolean })
+  property({ type: Boolean })
 ], KemetRadios.prototype, "required", 2);
 __decorateClass([
-  property24({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRadios.prototype, "polarity", 2);
 __decorateClass([
-  property24({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRadios.prototype, "dom", 2);
 __decorateClass([
-  state14()
+  state()
 ], KemetRadios.prototype, "radios", 2);
 KemetRadios = __decorateClass([
-  customElement24("kemet-radios")
+  customElement("kemet-radios")
 ], KemetRadios);
 
 // src/elements/rotator/index.ts
 import { html as html25, LitElement as LitElement25 } from "lit";
-import { customElement as customElement25, property as property25, state as state15 } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 // src/elements/rotator/styles.css.ts
@@ -5786,7 +5789,6 @@ var KemetRotator = class extends LitElement25 {
   render() {
     const setWidth = this.effect === "flip" ? `width:${this.width};` : "";
     const setHeight = this.effect === "flip" ? `height:${this.height};` : "";
-    console.log(this.height);
     return html25`
       <span part="rotator" style="${setWidth} ${setHeight}">
         ${this.makeMessages()}
@@ -5835,39 +5837,38 @@ var KemetRotator = class extends LitElement25 {
 };
 KemetRotator.styles = [styles_css_default22];
 __decorateClass([
-  property25({ type: Number, attribute: "active-slide" })
+  property({ type: Number, attribute: "active-slide" })
 ], KemetRotator.prototype, "activeSlide", 2);
 __decorateClass([
-  property25({ type: Array })
+  property({ type: Array })
 ], KemetRotator.prototype, "messages", 2);
 __decorateClass([
-  property25({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRotator.prototype, "effect", 2);
 __decorateClass([
-  property25({ type: Number })
+  property({ type: Number })
 ], KemetRotator.prototype, "speed", 2);
 __decorateClass([
-  property25({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRotator.prototype, "polarity", 2);
 __decorateClass([
-  property25({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetRotator.prototype, "dom", 2);
 __decorateClass([
-  state15()
+  state()
 ], KemetRotator.prototype, "width", 2);
 __decorateClass([
-  state15()
+  state()
 ], KemetRotator.prototype, "height", 2);
 __decorateClass([
-  state15()
+  state()
 ], KemetRotator.prototype, "prevSlide", 2);
 KemetRotator = __decorateClass([
-  customElement25("kemet-rotator")
+  customElement("kemet-rotator")
 ], KemetRotator);
 
 // src/elements/select/index.ts
 import { html as html26, LitElement as LitElement26 } from "lit";
-import { customElement as customElement26, property as property26, state as state16 } from "lit/decorators.js";
 
 // src/elements/select/styles.css.ts
 import { css as css29 } from "lit";
@@ -6018,9 +6019,9 @@ var KemetSelect = class extends LitElement26 {
     this.invalid = false;
     this.hasFocus = false;
     this.formSubmitController = new FormSubmitController(this);
-    this.control = this.closest("kemet-field");
   }
   firstUpdated() {
+    this.control = this.closest("kemet-field");
     this.select = this.shadowRoot?.querySelector("select");
     this.selectedOption = this.querySelector("[selected]");
     this.value = this.selectedOption ? this.selectedOption.value : "";
@@ -6158,96 +6159,94 @@ var KemetSelect = class extends LitElement26 {
 };
 KemetSelect.styles = [styles_css_default23];
 __decorateClass([
-  property26({ type: String })
+  property({ type: String })
 ], KemetSelect.prototype, "slug", 2);
 __decorateClass([
-  property26({ type: String })
+  property({ type: String })
 ], KemetSelect.prototype, "name", 2);
 __decorateClass([
-  property26({ type: String })
+  property({ type: String })
 ], KemetSelect.prototype, "value", 2);
 __decorateClass([
-  property26({ type: Array })
+  property({ type: Array })
 ], KemetSelect.prototype, "options", 2);
 __decorateClass([
-  property26({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetSelect.prototype, "appearance", 2);
 __decorateClass([
-  property26({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetSelect.prototype, "required", 2);
 __decorateClass([
-  property26({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetSelect.prototype, "disabled", 2);
 __decorateClass([
-  property26({ type: Boolean })
+  property({ type: Boolean })
 ], KemetSelect.prototype, "multiple", 2);
 __decorateClass([
-  property26({ type: String })
+  property({ type: String })
 ], KemetSelect.prototype, "icon", 2);
 __decorateClass([
-  property26({ type: Number, attribute: "icon-size" })
+  property({ type: Number, attribute: "icon-size" })
 ], KemetSelect.prototype, "iconSize", 2);
 __decorateClass([
-  property26({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetSelect.prototype, "filled", 2);
 __decorateClass([
-  property26({ reflect: true })
+  property({ reflect: true })
 ], KemetSelect.prototype, "rounded", 2);
 __decorateClass([
-  property26({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetSelect.prototype, "polarity", 2);
 __decorateClass([
-  property26({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetSelect.prototype, "dom", 2);
 __decorateClass([
-  state16()
+  state()
 ], KemetSelect.prototype, "invalid", 2);
 __decorateClass([
-  state16()
+  state()
 ], KemetSelect.prototype, "control", 2);
 __decorateClass([
-  state16()
+  state()
 ], KemetSelect.prototype, "select", 2);
 __decorateClass([
-  state16()
+  state()
 ], KemetSelect.prototype, "selectedOption", 2);
 __decorateClass([
-  state16()
+  state()
 ], KemetSelect.prototype, "optionElements", 2);
 __decorateClass([
-  state16()
+  state()
 ], KemetSelect.prototype, "hasFocus", 2);
 KemetSelect = __decorateClass([
-  customElement26("kemet-select")
+  customElement("kemet-select")
 ], KemetSelect);
 
 // src/elements/select-option/index.ts
 import { html as html27, LitElement as LitElement27 } from "lit";
-import { customElement as customElement27, property as property27 } from "lit/decorators.js";
 var KemetSelectOption = class extends LitElement27 {
   render() {
     return html27`<slot></slot>`;
   }
 };
 __decorateClass([
-  property27({ type: String })
+  property({ type: String })
 ], KemetSelectOption.prototype, "label", 2);
 __decorateClass([
-  property27({ type: String })
+  property({ type: String })
 ], KemetSelectOption.prototype, "value", 2);
 __decorateClass([
-  property27({ type: Boolean })
+  property({ type: Boolean })
 ], KemetSelectOption.prototype, "disabled", 2);
 __decorateClass([
-  property27({ type: Boolean })
+  property({ type: Boolean })
 ], KemetSelectOption.prototype, "selected", 2);
 KemetSelectOption = __decorateClass([
-  customElement27("kemet-select-option")
+  customElement("kemet-select-option")
 ], KemetSelectOption);
 
 // src/elements/sortable/index.ts
 import { html as html28, LitElement as LitElement28 } from "lit";
-import { customElement as customElement28, property as property28, state as state17 } from "lit/decorators.js";
 import { polyfill } from "mobile-drag-drop";
 
 // src/elements/sortable/styles.css.ts
@@ -6338,21 +6337,20 @@ var KemetSortable = class extends LitElement28 {
 };
 KemetSortable.styles = [styles_css_default24];
 __decorateClass([
-  property28({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetSortable.prototype, "polarity", 2);
 __decorateClass([
-  property28({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetSortable.prototype, "dom", 2);
 __decorateClass([
-  state17()
+  state()
 ], KemetSortable.prototype, "sortableItem", 2);
 KemetSortable = __decorateClass([
-  customElement28("kemet-sortable")
+  customElement("kemet-sortable")
 ], KemetSortable);
 
 // src/elements/sortable-item/index.ts
 import { html as html29, LitElement as LitElement29 } from "lit";
-import { customElement as customElement29, property as property29 } from "lit/decorators.js";
 
 // src/elements/sortable-item/styles.css.ts
 import { css as css31 } from "lit";
@@ -6392,21 +6390,20 @@ var KemetSortableItem = class extends LitElement29 {
 };
 KemetSortableItem.styles = [styles_css_default25];
 __decorateClass([
-  property29({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetSortableItem.prototype, "ghost", 2);
 __decorateClass([
-  property29({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetSortableItem.prototype, "polarity", 2);
 __decorateClass([
-  property29({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetSortableItem.prototype, "dom", 2);
 KemetSortableItem = __decorateClass([
-  customElement29("kemet-sortable-item")
+  customElement("kemet-sortable-item")
 ], KemetSortableItem);
 
 // src/elements/tab/index.ts
 import { LitElement as LitElement30, html as html30 } from "lit";
-import { customElement as customElement30, property as property30 } from "lit/decorators.js";
 
 // src/elements/tab/styles.css.ts
 import { css as css32 } from "lit";
@@ -6485,30 +6482,29 @@ var KemetTab = class extends LitElement30 {
 };
 KemetTab.styles = [styles_css_default26];
 __decorateClass([
-  property30({ type: Number })
+  property({ type: Number })
 ], KemetTab.prototype, "index", 2);
 __decorateClass([
-  property30({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTab.prototype, "selected", 2);
 __decorateClass([
-  property30({ type: String })
+  property({ type: String })
 ], KemetTab.prototype, "link", 2);
 __decorateClass([
-  property30({ type: Boolean })
+  property({ type: Boolean })
 ], KemetTab.prototype, "closable", 2);
 __decorateClass([
-  property30({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTab.prototype, "polarity", 2);
 __decorateClass([
-  property30({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTab.prototype, "dom", 2);
 KemetTab = __decorateClass([
-  customElement30("kemet-tab")
+  customElement("kemet-tab")
 ], KemetTab);
 
 // src/elements/tab-panel/index.ts
 import { LitElement as LitElement31, html as html31 } from "lit";
-import { customElement as customElement31, property as property31 } from "lit/decorators.js";
 
 // src/elements/tab-panel/styles.css.ts
 import { css as css33 } from "lit";
@@ -6597,27 +6593,26 @@ var KemetTabPanel = class extends LitElement31 {
 };
 KemetTabPanel.styles = [styles_css_default27];
 __decorateClass([
-  property31({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTabPanel.prototype, "selected", 2);
 __decorateClass([
-  property31({ type: String })
+  property({ type: String })
 ], KemetTabPanel.prototype, "panel", 2);
 __decorateClass([
-  property31({ type: Number })
+  property({ type: Number })
 ], KemetTabPanel.prototype, "index", 2);
 __decorateClass([
-  property31({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTabPanel.prototype, "polarity", 2);
 __decorateClass([
-  property31({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTabPanel.prototype, "dom", 2);
 KemetTabPanel = __decorateClass([
-  customElement31("kemet-tab-panel")
+  customElement("kemet-tab-panel")
 ], KemetTabPanel);
 
 // src/elements/tabs/index.ts
 import { LitElement as LitElement32, html as html32 } from "lit";
-import { customElement as customElement32, property as property32, query as query6, state as state18 } from "lit/decorators.js";
 
 // src/elements/tabs/styles.css.ts
 import { css as css34 } from "lit";
@@ -6837,9 +6832,12 @@ var KemetTabs = class extends LitElement32 {
     this.hideInk = false;
     this.overflow = false;
     this.dom = "initializing";
+    this._handleTabKeydown = this.handleTabKeydown.bind(this);
     this.addEventListener("kemet-tab-selected", this.tabSelectedChange.bind(this));
     this.addEventListener("kemet-tab-closed", this.handleTabClose.bind(this));
-    window.addEventListener("resize", this.handleResize.bind(this));
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", this.handleResize.bind(this));
+    }
   }
   firstUpdated() {
     this.tabs = [];
@@ -6847,6 +6845,8 @@ var KemetTabs = class extends LitElement32 {
     this.xDown = null;
     this.yDown = null;
     this.links = this.shadowRoot?.getElementById("links");
+    this.handleLinksSlotChange();
+    this.handlePanelsSlotChange();
     emitEvent(this, "kemet-tabs-mounted", {
       bubbles: true,
       composed: true,
@@ -6888,13 +6888,15 @@ var KemetTabs = class extends LitElement32 {
     }
   }
   handleLinksSlotChange() {
+    this.tabs?.forEach((tab) => tab.removeEventListener("keydown", this._handleTabKeydown));
+    this.tabs = [];
     const tabs = this.querySelectorAll("kemet-tab");
     let index = 0;
     tabs.forEach((tab) => {
       tab.index = index;
       index += 1;
       this.tabs = this.tabs.concat(tab);
-      tab.addEventListener("keydown", (event) => this.handleTabKeydown(event));
+      tab.addEventListener("keydown", this._handleTabKeydown);
     });
     const firstTab = this.tabs[0];
     if (firstTab) firstTab.selected = true;
@@ -6904,6 +6906,7 @@ var KemetTabs = class extends LitElement32 {
     this.determineOverflow();
   }
   handlePanelsSlotChange() {
+    this.panels = [];
     const panels = this.querySelectorAll("kemet-tab-panel");
     const panelElement = this.shadowRoot?.getElementById("panels");
     let index = 0;
@@ -7232,69 +7235,68 @@ var KemetTabs = class extends LitElement32 {
 };
 KemetTabs.styles = [styles_css_default28];
 __decorateClass([
-  property32({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTabs.prototype, "selected", 2);
 __decorateClass([
-  property32({ type: Number })
+  property({ type: Number, reflect: true, attribute: "selected-index" })
 ], KemetTabs.prototype, "selectedIndex", 2);
 __decorateClass([
-  property32({ type: Number })
+  property({ type: Number })
 ], KemetTabs.prototype, "panelPosition", 2);
 __decorateClass([
-  property32({ type: String, reflect: true, attribute: "panel-effect" })
+  property({ type: String, reflect: true, attribute: "panel-effect" })
 ], KemetTabs.prototype, "panelEffect", 2);
 __decorateClass([
-  property32({ type: Boolean })
+  property({ type: Boolean })
 ], KemetTabs.prototype, "swipe", 2);
 __decorateClass([
-  property32({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTabs.prototype, "placement", 2);
 __decorateClass([
-  property32({ type: Boolean })
+  property({ type: Boolean })
 ], KemetTabs.prototype, "divider", 2);
 __decorateClass([
-  property32({ type: String, reflect: true, attribute: "tabs-align" })
+  property({ type: String, reflect: true, attribute: "tabs-align" })
 ], KemetTabs.prototype, "tabsAlign", 2);
 __decorateClass([
-  property32({ type: Object })
+  property({ type: Object })
 ], KemetTabs.prototype, "ink", 2);
 __decorateClass([
-  property32({ type: Boolean, attribute: "hide-ink" })
+  property({ type: Boolean, attribute: "hide-ink" })
 ], KemetTabs.prototype, "hideInk", 2);
 __decorateClass([
-  property32({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTabs.prototype, "overflow", 2);
 __decorateClass([
-  property32({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTabs.prototype, "polarity", 2);
 __decorateClass([
-  property32({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTabs.prototype, "dom", 2);
 __decorateClass([
-  state18()
+  state()
 ], KemetTabs.prototype, "tabs", 2);
 __decorateClass([
-  state18()
+  state()
 ], KemetTabs.prototype, "panels", 2);
 __decorateClass([
-  state18()
+  state()
 ], KemetTabs.prototype, "xDown", 2);
 __decorateClass([
-  state18()
+  state()
 ], KemetTabs.prototype, "yDown", 2);
 __decorateClass([
-  state18()
+  state()
 ], KemetTabs.prototype, "links", 2);
 __decorateClass([
-  query6("#panels")
+  query("#panels")
 ], KemetTabs.prototype, "panelsElement", 2);
 KemetTabs = __decorateClass([
-  customElement32("kemet-tabs")
+  customElement("kemet-tabs")
 ], KemetTabs);
 
 // src/elements/toggle/index.ts
 import { html as html33, LitElement as LitElement33 } from "lit";
-import { customElement as customElement33, property as property33, state as state19 } from "lit/decorators.js";
 
 // src/elements/toggle/styles.css.ts
 import { css as css35 } from "lit";
@@ -7455,45 +7457,44 @@ var KemetToggle = class extends LitElement33 {
 };
 KemetToggle.styles = [styles_css_default29];
 __decorateClass([
-  property33({ type: String })
+  property({ type: String })
 ], KemetToggle.prototype, "name", 2);
 __decorateClass([
-  property33({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetToggle.prototype, "checked", 2);
 __decorateClass([
-  property33({ type: Boolean })
+  property({ type: Boolean })
 ], KemetToggle.prototype, "disabled", 2);
 __decorateClass([
-  property33({ type: String })
+  property({ type: String })
 ], KemetToggle.prototype, "label", 2);
 __decorateClass([
-  property33({ type: Boolean })
+  property({ type: Boolean })
 ], KemetToggle.prototype, "show", 2);
 __decorateClass([
-  property33({ type: Boolean })
+  property({ type: Boolean })
 ], KemetToggle.prototype, "squared", 2);
 __decorateClass([
-  property33({ type: String, attribute: "option-checked" })
+  property({ type: String, attribute: "option-checked" })
 ], KemetToggle.prototype, "optionChecked", 2);
 __decorateClass([
-  property33({ type: String, attribute: "option-unchecked" })
+  property({ type: String, attribute: "option-unchecked" })
 ], KemetToggle.prototype, "optionUnchecked", 2);
 __decorateClass([
-  property33({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetToggle.prototype, "polarity", 2);
 __decorateClass([
-  property33({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetToggle.prototype, "dom", 2);
 __decorateClass([
-  state19()
+  state()
 ], KemetToggle.prototype, "value", 2);
 KemetToggle = __decorateClass([
-  customElement33("kemet-toggle")
+  customElement("kemet-toggle")
 ], KemetToggle);
 
 // src/elements/timer/index.ts
 import { html as html34, LitElement as LitElement34 } from "lit";
-import { customElement as customElement34, property as property34, state as state20 } from "lit/decorators.js";
 
 // src/elements/timer/styles.css.ts
 import { css as css36 } from "lit";
@@ -7582,30 +7583,29 @@ var KemetTimer = class extends LitElement34 {
 };
 KemetTimer.styles = [styles_css_default30];
 __decorateClass([
-  property34({ type: String })
+  property({ type: String })
 ], KemetTimer.prototype, "format", 2);
 __decorateClass([
-  property34({ type: Number })
+  property({ type: Number })
 ], KemetTimer.prototype, "amount", 2);
 __decorateClass([
-  property34({ type: String })
+  property({ type: String })
 ], KemetTimer.prototype, "expires", 2);
 __decorateClass([
-  property34({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTimer.prototype, "polarity", 2);
 __decorateClass([
-  property34({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTimer.prototype, "dom", 2);
 __decorateClass([
-  state20()
+  state()
 ], KemetTimer.prototype, "interval", 2);
 KemetTimer = __decorateClass([
-  customElement34("kemet-timer")
+  customElement("kemet-timer")
 ], KemetTimer);
 
 // src/elements/timer-display/index.ts
 import { html as html35, LitElement as LitElement35 } from "lit";
-import { customElement as customElement35, property as property35, state as state21 } from "lit/decorators.js";
 
 // src/elements/timer-display/styles.css.ts
 import { css as css37 } from "lit";
@@ -7617,12 +7617,12 @@ var styles_css_default31 = css37`:host {
 // src/elements/timer-display/index.ts
 var KemetTimerDisplay = class extends LitElement35 {
   constructor() {
-    super();
+    super(...arguments);
     this.format = "seconds" /* Seconds */;
     this.dom = "initializing";
-    this.getTime();
   }
   firstUpdated() {
+    this.getTime();
     emitEvent(this, "kemet-timer-display-mounted", {
       bubbles: true,
       composed: true,
@@ -7671,24 +7671,23 @@ var KemetTimerDisplay = class extends LitElement35 {
 };
 KemetTimerDisplay.styles = [styles_css_default31];
 __decorateClass([
-  property35({ type: String })
+  property({ type: String })
 ], KemetTimerDisplay.prototype, "format", 2);
 __decorateClass([
-  state21()
+  state()
 ], KemetTimerDisplay.prototype, "displayTime", 2);
 __decorateClass([
-  property35({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTimerDisplay.prototype, "polarity", 2);
 __decorateClass([
-  property35({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTimerDisplay.prototype, "dom", 2);
 KemetTimerDisplay = __decorateClass([
-  customElement35("kemet-timer-display")
+  customElement("kemet-timer-display")
 ], KemetTimerDisplay);
 
 // src/elements/tracker/index.ts
 import { html as html36, LitElement as LitElement36 } from "lit";
-import { customElement as customElement36, property as property36, state as state22 } from "lit/decorators.js";
 
 // src/elements/tracker/styles.css.ts
 import { css as css38 } from "lit";
@@ -7703,16 +7702,11 @@ var styles_css_default32 = css38`:host {
 // src/elements/tracker/index.ts
 var KemetTracker = class extends LitElement36 {
   constructor() {
-    super();
+    super(...arguments);
     this.dom = "initializing";
-    this.breakpoint = "767px";
   }
   firstUpdated() {
-    this.steps = this.querySelectorAll("kemet-tracker-step");
-    this.isMobile();
-    window.addEventListener("resize", () => {
-      this.isMobile();
-    });
+    this.initializeSteps();
     emitEvent(this, "kemet-tracker-mounted", {
       bubbles: true,
       composed: true,
@@ -7723,9 +7717,10 @@ var KemetTracker = class extends LitElement36 {
     this.dom = "mounted";
   }
   render() {
-    return html36`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+    return html36`<slot @slotchange=${() => this.initializeSteps()}></slot>`;
   }
-  handleSlotChange() {
+  initializeSteps() {
+    this.steps = this.querySelectorAll("kemet-tracker-step");
     this.total = this.steps.length;
     this.steps.forEach((step, index) => {
       step.step = index + 1;
@@ -7734,36 +7729,26 @@ var KemetTracker = class extends LitElement36 {
       }
     });
   }
-  isMobile() {
-    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
-    this.steps.forEach((step) => {
-      step.mobile = mediaQuery.matches;
-    });
-  }
 };
 KemetTracker.styles = [styles_css_default32];
 __decorateClass([
-  property36({ type: Number })
+  property({ type: Number })
 ], KemetTracker.prototype, "total", 2);
 __decorateClass([
-  property36({ type: String })
-], KemetTracker.prototype, "breakpoint", 2);
-__decorateClass([
-  property36({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTracker.prototype, "polarity", 2);
 __decorateClass([
-  property36({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTracker.prototype, "dom", 2);
 __decorateClass([
-  state22()
+  state()
 ], KemetTracker.prototype, "steps", 2);
 KemetTracker = __decorateClass([
-  customElement36("kemet-tracker")
+  customElement("kemet-tracker")
 ], KemetTracker);
 
 // src/elements/tracker-step/index.ts
 import { html as html37, LitElement as LitElement37 } from "lit";
-import { customElement as customElement37, property as property37, state as state23 } from "lit/decorators.js";
 
 // src/elements/tracker-step/styles.css.ts
 import { css as css39 } from "lit";
@@ -7891,12 +7876,18 @@ var styles_css_default33 = css39`:host {
 var KemetTrackerStep = class extends LitElement37 {
   constructor() {
     super(...arguments);
+    this.breakpoint = "767px";
     this.completedSize = 16;
+    this.total = 0;
     this.dom = "initializing";
   }
   firstUpdated() {
-    this.tracker = this.closest("kemet-tracker");
-    emitEvent(this, "kemet-button-mounted", {
+    this.last = this.step === this.total;
+    this.isMobile();
+    window.addEventListener("resize", () => {
+      this.isMobile();
+    });
+    emitEvent(this, "kemet-tracker-step-mounted", {
       bubbles: true,
       composed: true,
       detail: {
@@ -7933,7 +7924,7 @@ var KemetTrackerStep = class extends LitElement37 {
     }
     if (!this.mobile && !this.hideDotContent) {
       return html37`
-        <span>${this.step}/${this.tracker?.total}</span>
+        <span>${this.step}/${this.total}</span>
       `;
     }
     return null;
@@ -7945,58 +7936,67 @@ var KemetTrackerStep = class extends LitElement37 {
     return null;
   }
   handleCompletedLineEnd() {
-    const currentDot = this.tracker?.querySelector("[current]")?.shadowRoot?.querySelector(".dot");
+    const currentDot = this.current ? this.shadowRoot?.querySelector(".dot") : null;
     if (currentDot) {
       currentDot.classList.add("animate");
     }
   }
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
 };
 KemetTrackerStep.styles = [styles_css_default33];
 __decorateClass([
-  property37({ type: Number })
+  property({ type: Number })
 ], KemetTrackerStep.prototype, "step", 2);
 __decorateClass([
-  property37({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "completed", 2);
 __decorateClass([
-  property37({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "current", 2);
 __decorateClass([
-  property37({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "last", 2);
 __decorateClass([
-  property37({ type: Boolean, reflect: true })
+  property({ type: String })
+], KemetTrackerStep.prototype, "breakpoint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
 ], KemetTrackerStep.prototype, "mobile", 2);
 __decorateClass([
-  property37({ type: Boolean, reflect: true, attribute: "hide-dot-content" })
+  property({ type: Boolean, reflect: true, attribute: "hide-dot-content" })
 ], KemetTrackerStep.prototype, "hideDotContent", 2);
 __decorateClass([
-  property37({ type: Number })
+  property({ type: Number })
 ], KemetTrackerStep.prototype, "completedSize", 2);
 __decorateClass([
-  property37({ type: String, reflect: true })
+  property({ type: Number })
+], KemetTrackerStep.prototype, "total", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
 ], KemetTrackerStep.prototype, "polarity", 2);
 __decorateClass([
-  property37({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTrackerStep.prototype, "dom", 2);
 __decorateClass([
-  state23()
+  state()
 ], KemetTrackerStep.prototype, "tracker", 2);
 KemetTrackerStep = __decorateClass([
-  customElement37("kemet-tracker-step")
+  customElement("kemet-tracker-step")
 ], KemetTrackerStep);
 
 // src/elements/input-files/index.ts
 import { html as html38, LitElement as LitElement38 } from "lit";
-import { customElement as customElement38, property as property38, state as state24 } from "lit/decorators.js";
 import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 
 // src/elements/input-files/styles.css.ts
 import { css as css40 } from "lit";
 var styles_css_default34 = css40`:host {
-  --kemet-upload-color: var(--kemet-color-font-base);
+  --kemet-upload-color: inherit;
   --kemet-upload-height: 364px;
-  --kemet-upload-border: 1rem solid transparent;
+  --kemet-upload-border: 0;
   --kemet-upload-background-color: transparent;
 
   color: var(--kemet-upload-color);
@@ -8155,62 +8155,61 @@ var InputFiles = class extends LitElement38 {
 };
 InputFiles.styles = [styles_css_default34];
 __decorateClass([
-  property38({ type: String })
+  property({ type: String })
 ], InputFiles.prototype, "slug", 2);
 __decorateClass([
-  property38({ type: String })
+  property({ type: String })
 ], InputFiles.prototype, "accept", 2);
 __decorateClass([
-  property38({ type: Boolean })
+  property({ type: Boolean })
 ], InputFiles.prototype, "multiple", 2);
 __decorateClass([
-  property38({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], InputFiles.prototype, "over", 2);
 __decorateClass([
-  property38({ type: String })
+  property({ type: String })
 ], InputFiles.prototype, "heading", 2);
 __decorateClass([
-  property38({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], InputFiles.prototype, "mobile", 2);
 __decorateClass([
-  property38({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFiles.prototype, "breakpoint", 2);
 __decorateClass([
-  property38({ type: Boolean, reflect: true, attribute: "no-drag-drop" })
+  property({ type: Boolean, reflect: true, attribute: "no-drag-drop" })
 ], InputFiles.prototype, "noDragDrop", 2);
 __decorateClass([
-  property38({ type: Number, attribute: "max-size" })
+  property({ type: Number, attribute: "max-size" })
 ], InputFiles.prototype, "maxSize", 2);
 __decorateClass([
-  property38({ type: String, attribute: "button-label" })
+  property({ type: String, attribute: "button-label" })
 ], InputFiles.prototype, "buttonLabel", 2);
 __decorateClass([
-  property38({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFiles.prototype, "polarity", 2);
 __decorateClass([
-  property38({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFiles.prototype, "dom", 2);
 __decorateClass([
-  state24()
+  state()
 ], InputFiles.prototype, "fileInputElement", 2);
 __decorateClass([
-  state24()
+  state()
 ], InputFiles.prototype, "upload", 2);
 InputFiles = __decorateClass([
-  customElement38("kemet-input-files")
+  customElement("kemet-input-files")
 ], InputFiles);
 
 // src/elements/input-file/index.ts
 import { html as html39, LitElement as LitElement39 } from "lit";
-import { customElement as customElement39, property as property39 } from "lit/decorators.js";
 
 // src/elements/input-file/styles.css.ts
 import { css as css41 } from "lit";
 var styles_css_default35 = css41`:host {
   --kemet-upload-file-ripple-color: var(--kemet-color-font-active);
-  --kemet-upload-file-color: var(--kemet-color-font-base);
+  --kemet-upload-file-color: inherit;
   --kemet-upload-file-padding: 0.5rem 1rem;
-  --kemet-upload-file-border: 1px solid var(--kemet-color-font-base);
+  --kemet-upload-file-border: 1px solid;
 
   color: var(--kemet-upload-file-color);
   display: grid;
@@ -8223,11 +8222,11 @@ var styles_css_default35 = css41`:host {
   border: var(--kemet-upload-file-border);
 }
 
-:host([status='error']) {
+:host([status=error]) {
   border: 1px solid var(--kemet-color-font-error);
 }
 
-:host([status='complete']) {
+:host([status=complete]) {
   border: 1px solid var(--kemet-color-font-success);
 }
 
@@ -8245,13 +8244,13 @@ h3 {
   transform: scale(0.8);
 }
 
-:host([status='complete']) .message,
-:host([status='complete']) .indicator {
+:host([status=complete]) .message,
+:host([status=complete]) .indicator {
   color: rgb(var(--kemet-color-success));
 }
 
-:host([status='error']) .message,
-:host([status='error']) .indicator {
+:host([status=error]) .message,
+:host([status=error]) .indicator {
   color: rgb(var(--kemet-color-error));
 }
 `;
@@ -8373,39 +8372,38 @@ var InputFile = class extends LitElement39 {
 };
 InputFile.styles = [styles_css_default35, loaders_css_default];
 __decorateClass([
-  property39({ type: String })
+  property({ type: String })
 ], InputFile.prototype, "name", 2);
 __decorateClass([
-  property39({ type: Number })
+  property({ type: Number })
 ], InputFile.prototype, "loaded", 2);
 __decorateClass([
-  property39({ type: Number })
+  property({ type: Number })
 ], InputFile.prototype, "size", 2);
 __decorateClass([
-  property39({ type: String })
+  property({ type: String })
 ], InputFile.prototype, "type", 2);
 __decorateClass([
-  property39({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFile.prototype, "status", 2);
 __decorateClass([
-  property39({ type: Number })
+  property({ type: Number })
 ], InputFile.prototype, "percent", 2);
 __decorateClass([
-  property39({ type: String })
+  property({ type: String })
 ], InputFile.prototype, "message", 2);
 __decorateClass([
-  property39({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFile.prototype, "polarity", 2);
 __decorateClass([
-  property39({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], InputFile.prototype, "dom", 2);
 InputFile = __decorateClass([
-  customElement39("kemet-input-file")
+  customElement("kemet-input-file")
 ], InputFile);
 
 // src/elements/typewriter/index.ts
 import { html as html40, LitElement as LitElement40 } from "lit";
-import { customElement as customElement40, property as property40 } from "lit/decorators.js";
 import Typewriter from "typewriter-effect/dist/core";
 var KemetTypewriter = class extends LitElement40 {
   constructor() {
@@ -8480,28 +8478,28 @@ var KemetTypewriter = class extends LitElement40 {
   }
 };
 __decorateClass([
-  property40({ type: String })
+  property({ type: String })
 ], KemetTypewriter.prototype, "content", 2);
 __decorateClass([
-  property40({ type: Number })
+  property({ type: Number })
 ], KemetTypewriter.prototype, "delay", 2);
 __decorateClass([
-  property40({ type: String })
+  property({ type: String })
 ], KemetTypewriter.prototype, "cursor", 2);
 __decorateClass([
-  property40({ type: Boolean })
+  property({ type: Boolean })
 ], KemetTypewriter.prototype, "loop", 2);
 __decorateClass([
-  property40({ type: Number, attribute: "restart-delay" })
+  property({ type: Number, attribute: "restart-delay" })
 ], KemetTypewriter.prototype, "restartDelay", 2);
 __decorateClass([
-  property40({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTypewriter.prototype, "polarity", 2);
 __decorateClass([
-  property40({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], KemetTypewriter.prototype, "dom", 2);
 KemetTypewriter = __decorateClass([
-  customElement40("kemet-typewriter")
+  customElement("kemet-typewriter")
 ], KemetTypewriter);
 
 // src/wrappers/react.ts