kemet-ui 5.0.4 → 5.0.5

package/dist/elements/timer-display/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/timer-display/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/timer/index.ts","../../../src/utilities/events.ts","../../../src/elements/timer/styles.css.ts","../../../src/elements/timer-display/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumFormats } from '../timer';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n * @ssrsafe yes\n *\n * @prop {EnumFormats} format - The format to display the remaining time in\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-timer-display-mounted - Fired when the timer display is mounted to the DOM\n * @detail {HTMLElement} element - The timer display element\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @state()\n  displayTime!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    this.getTime();\n\n    emitEvent(this, 'kemet-timer-display-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer')?.addEventListener('kemet-timer-increment', (event: Event) => {\n      const secondsLeft = (event as CustomEvent).detail.timeleft;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time: number) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n * @ssrsafe yes\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-block;\n}\n`;\n"],"mappings":"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","names":["html","LitElement","css","styles_css_default","LitElement","html","styles_css_default"]}
+{"version":3,"sources":["../../../src/elements/timer-display/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/timer/index.ts","../../../src/utilities/events.ts","../../../src/elements/timer/styles.css.ts","../../../src/elements/timer-display/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumFormats } from '../timer';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n * @ssrsafe yes\n *\n * @prop {EnumFormats} format - The format to display the remaining time in\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-timer-display-mounted - Fired when the timer display is mounted to the DOM\n * @detail {HTMLElement} element - The timer display element\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @state()\n  displayTime!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    this.getTime();\n\n    emitEvent(this, 'kemet-timer-display-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer')?.addEventListener('kemet-timer-increment', (event: Event) => {\n      const secondsLeft = (event as CustomEvent).detail.timeleft;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time: number) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n * @ssrsafe yes\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-block;\n}\n`;\n"],"mappings":"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","names":["html","LitElement","css","styles_css_default","LitElement","html","styles_css_default"]}

package/dist/elements/toggle/index.js

@@ -32,10 +32,8 @@ var FormSubmitController = class {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
   }
   hostConnected() {
-    console.log("what?!");
     this.form = this.options.form(this.host);
     if (this.form) {
-      console.log("Adding form listeners");
       this.form.addEventListener("formdata", this.handleFormData);
       this.form.addEventListener("submit", this.handleFormSubmit);
     }
@@ -56,7 +54,6 @@ var FormSubmitController = class {
     }
   }
   handleFormSubmit(event) {
-    console.log("~~Form submitted~~");
     event.preventDefault();
     event.stopImmediatePropagation();
     const disabled = this.options.disabled(this.host);
@@ -67,14 +64,13 @@ var FormSubmitController = class {
         if (component.checkValidity) {
           component.checkValidity();
           if (!component.checkValidity()) {
+            console.log("invalid", component);
             component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
-                bubbles: true,
-                composed: true,
                 detail: {
-                  status: "error" /* Error */,
+                  appearance: "error" /* Error */,
                   validity: component.validity ? component.validity : {},
                   element: component
                 }

package/dist/elements/toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/toggle/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/toggle/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n * @ssrsafe yes\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n * @fires kemet-toggle-mounted - Fired when the toggle is mounted to the DOM\n * @detail {HTMLElement} element - The toggle element\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-toggle-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', { element: this });\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { EnumAppearances } from \"./constants\";\n\nexport class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n\n\n  }\n\n  hostConnected() {\n    console.log('what?!');\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      console.log('Adding form listeners');\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    console.log('~~Form submitted~~');\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: EnumAppearances.Error,\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-toggle-width: 3.5rem;\n  --kemet-toggle-height: 2rem;\n  --kemet-toggle-handle-diameter: 1.6rem;\n  --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n  --kemet-toggle-track-border: none;\n  --kemet-toggle-track-color: var(--kemet-color-background-base);\n  --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(0 0 0 / 15%), inset 0 -0.2rem 0.4rem 0 rgb(0 0 0 / 5%);\n  --kemet-toggle-handle-border: none;\n  --kemet-toggle-handle-color: var(--kemet-color-font-active);\n  --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(0 0 0 / 10%), 0 0.5rem 0.5rem 0 rgb(0 0 0 / 20%);\n\n  display: flex;\n  align-items: center;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  font-size: inherit;\n  color: inherit;\n}\n\n:host([disabled]) label {\n  cursor: not-allowed;\n}\n\ninput {\n  display: none;\n}\n\n[part='control'] {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n}\n\n[part='control'] > span {\n  transition: 300ms ease-in-out;\n}\n\n[part='track'] {\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n  border: var(--kemet-toggle-track-border);\n  border-radius: var(--kemet-toggle-height);\n  background-color: var(--kemet-toggle-track-color);\n  box-shadow: var(--kemet-toggle-track-shadow);\n}\n\n:host([squared]) [part='track'] {\n  border-radius: 0;\n}\n\n[part='handle'] {\n  position: absolute;\n  top: var(--kemet-toggle-handle-margin);\n  left: var(--kemet-toggle-handle-margin);\n  width: var(--kemet-toggle-handle-diameter);\n  height: var(--kemet-toggle-handle-diameter);\n  transform: translateX(0);\n  border: var(--kemet-toggle-handle-border);\n  border-radius: var(--kemet-toggle-handle-diameter);\n  background-color: var(--kemet-toggle-handle-color);\n  box-shadow: var(--kemet-toggle-handle-shadow);\n}\n\n:host([squared]) [part='handle'] {\n  border-radius: 0;\n}\n\n:host([checked]) [part='handle'] {\n  transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n}\n\n.option {\n  font-size: 90%;\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/toggle/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/toggle/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n * @ssrsafe yes\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n * @fires kemet-toggle-mounted - Fired when the toggle is mounted to the DOM\n * @detail {HTMLElement} element - The toggle element\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-toggle-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', { element: this });\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { EnumAppearances } from \"./constants\";\n\nexport class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n\n\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            console.log('invalid', component);\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                detail: {\n                  appearance: EnumAppearances.Error,\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-toggle-width: 3.5rem;\n  --kemet-toggle-height: 2rem;\n  --kemet-toggle-handle-diameter: 1.6rem;\n  --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n  --kemet-toggle-track-border: none;\n  --kemet-toggle-track-color: var(--kemet-color-background-base);\n  --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(0 0 0 / 15%), inset 0 -0.2rem 0.4rem 0 rgb(0 0 0 / 5%);\n  --kemet-toggle-handle-border: none;\n  --kemet-toggle-handle-color: var(--kemet-color-font-active);\n  --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(0 0 0 / 10%), 0 0.5rem 0.5rem 0 rgb(0 0 0 / 20%);\n\n  display: flex;\n  align-items: center;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  font-size: inherit;\n  color: inherit;\n}\n\n:host([disabled]) label {\n  cursor: not-allowed;\n}\n\ninput {\n  display: none;\n}\n\n[part='control'] {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n}\n\n[part='control'] > span {\n  transition: 300ms ease-in-out;\n}\n\n[part='track'] {\n  width: var(--kemet-toggle-width);\n  height: var(--kemet-toggle-height);\n  border: var(--kemet-toggle-track-border);\n  border-radius: var(--kemet-toggle-height);\n  background-color: var(--kemet-toggle-track-color);\n  box-shadow: var(--kemet-toggle-track-shadow);\n}\n\n:host([squared]) [part='track'] {\n  border-radius: 0;\n}\n\n[part='handle'] {\n  position: absolute;\n  top: var(--kemet-toggle-handle-margin);\n  left: var(--kemet-toggle-handle-margin);\n  width: var(--kemet-toggle-handle-diameter);\n  height: var(--kemet-toggle-handle-diameter);\n  transform: translateX(0);\n  border: var(--kemet-toggle-handle-border);\n  border-radius: var(--kemet-toggle-handle-diameter);\n  background-color: var(--kemet-toggle-handle-color);\n  box-shadow: var(--kemet-toggle-handle-shadow);\n}\n\n:host([squared]) [part='handle'] {\n  border-radius: 0;\n}\n\n:host([checked]) [part='handle'] {\n  transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n}\n\n.option {\n  font-size: 90%;\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/tracker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/tracker/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/tracker/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport type KemetTrackerStep from '../tracker-step';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-tracker\n * @summary A tracker for a multi step process\n * @ssrsafe yes\n *\n * @prop {number} total - The total number of steps\n * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-tracker-mounted - Fired when the tracker is mounted to the DOM\n * @detail {HTMLElement} element - The tracker element\n *\n */\n\n@customElement('kemet-tracker')\nexport default class KemetTracker extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  total?: number;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  steps!: NodeListOf<KemetTrackerStep>;\n\n  firstUpdated() {\n    this.initializeSteps();\n    emitEvent(this, 'kemet-tracker-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.initializeSteps()}></slot>`;\n  }\n\n  initializeSteps() {\n    this.steps = this.querySelectorAll('kemet-tracker-step');\n    this.total = this.steps.length;\n\n    this.steps.forEach((step, index) => {\n      step.step = index + 1;\n      if (step.step === this.total) {\n        step.last = true;\n      }\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker': KemetTracker\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  width: 100%;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;;;ACAjC,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHsBA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAUE,eAAc;AAAA;AAAA,EAKd,eAAe;AACb,SAAK,gBAAgB;AACrB,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO,yBAAyB,MAAM,KAAK,gBAAgB,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AAChB,SAAK,QAAQ,KAAK,iBAAiB,oBAAoB;AACvD,SAAK,QAAQ,KAAK,MAAM;AAExB,SAAK,MAAM,QAAQ,CAAC,MAAM,UAAU;AAClC,WAAK,OAAO,QAAQ;AACpB,UAAI,KAAK,SAAS,KAAK,OAAO;AAC5B,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH;AACF;AA1CqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,aAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,aAanB;AAbmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}
+{"version":3,"sources":["../../../src/elements/tracker/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/tracker/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport type KemetTrackerStep from '../tracker-step';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-tracker\n * @summary A tracker for a multi step process\n * @ssrsafe yes\n *\n * @prop {number} total - The total number of steps\n * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-tracker-mounted - Fired when the tracker is mounted to the DOM\n * @detail {HTMLElement} element - The tracker element\n *\n */\n\n@customElement('kemet-tracker')\nexport default class KemetTracker extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  total?: number;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  steps!: NodeListOf<KemetTrackerStep>;\n\n  firstUpdated() {\n    this.initializeSteps();\n    emitEvent(this, 'kemet-tracker-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.initializeSteps()}></slot>`;\n  }\n\n  initializeSteps() {\n    this.steps = this.querySelectorAll('kemet-tracker-step');\n    this.total = this.steps.length;\n\n    this.steps.forEach((step, index) => {\n      step.step = index + 1;\n      if (step.step === this.total) {\n        step.last = true;\n      }\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker': KemetTracker\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  width: 100%;\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;;;ACAjC,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAsB,MAAc,QAAa,UAAU,MAAM,WAAW,SAAS;AAC7G,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHsBA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAUE,eAAc;AAAA;AAAA,EAKd,eAAe;AACb,SAAK,gBAAgB;AACrB,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO,yBAAyB,MAAM,KAAK,gBAAgB,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AAChB,SAAK,QAAQ,KAAK,iBAAiB,oBAAoB;AACvD,SAAK,QAAQ,KAAK,MAAM;AAExB,SAAK,MAAM,QAAQ,CAAC,MAAM,UAAU;AAClC,WAAK,OAAO,QAAQ;AACpB,UAAI,KAAK,SAAS,KAAK,OAAO;AAC5B,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH;AACF;AA1CqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,aAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,aAanB;AAbmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/elements/tracker-step/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/tracker-step/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/tracker-step/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetTrackerElement from '../tracker';\nimport styles from './styles.css.ts';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n\n * @tagname kemet-tracker-step\n * @summary A step in the Tracker\n * @ssrsafe yes\n *\n * @prop {number} step - The current step number\n * @prop {boolean} completed - Determines whether a step renders as complete\n * @prop {boolean} current - Determines whether a step renders as the current step\n * @prop {boolean} last - Is automatically added to the last step\n * @prop {string} breakpoint - The breakpoint to use for mobile rendering\n * @prop {boolean} mobile - Determines if a step should render as mobile\n * @prop {boolean} hideDotContent - Hides the label inside of a dot\n * @prop {number} completedSize - The icon size for the completed check mark\n * @prop {number} total - The total number of steps\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @cssproperty --kemet-tracker-step-dot-font-size - The font size.\n * @cssproperty --kemet-tracker-step-dot-color - The text color.\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color.\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.\n *\n * @csspart dot - The container for the dot.\n * @csspart line - A connector line from dot to dot.\n * @csspart completed-line - A completed connector line.\n *\n * @fires kemet-tracker-step-mounted - Fired when the tracker step is mounted to the DOM\n * @detail {HTMLElement} element - The tracker step element\n *\n */\n\n@customElement('kemet-tracker-step')\nexport default class KemetTrackerStep extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number})\n  step!: number;\n\n  @property({ type: Boolean, reflect: true })\n  completed!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  current!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  last!: boolean;\n\n  @property({ type: String })\n  breakpoint: string = '767px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })\n  hideDotContent!: boolean;\n\n  @property({ type: Number })\n  completedSize: number = 16;\n\n  @property({ type: Number })\n  total: number = 0;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n\n  @state()\n  tracker!: HTMLKemetTrackerElement;\n\n  firstUpdated() {\n    this.last = this.step === this.total;\n\n    this.isMobile();\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    emitEvent(this, 'kemet-tracker-step-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      ${this.makeLine()}\n      ${this.makeCompletedLine()}\n      <div class=\"dot\" part=\"dot\">${this.makeDotContent()}</div>\n      ${this.makeSlotContent()}\n    `;\n  }\n\n  makeLine() {\n    if (!this.last) {\n      return html`<div class=\"line\" part=\"line\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeCompletedLine() {\n    if (this.completed && !this.last) {\n      return html`<div class=\"line completed\" part=\"completed-line\" @animationend=${() => this.handleCompletedLineEnd()}></div>`;\n    }\n\n    return null;\n  }\n\n  makeDotContent() {\n    if (this.completed && !this.mobile && !this.hideDotContent) {\n      return html`\n        <kemet-icon name=\"check2\" size=${this.completedSize}></kemet-icon>\n      `;\n    }\n\n    if (!this.mobile && !this.hideDotContent) {\n      return html`\n        <span>${this.step}/${this.total}</span>\n      `;\n    }\n\n    return null;\n  }\n\n  makeSlotContent() {\n    if (!this.mobile) {\n      return html`<slot></slot>`;\n    }\n\n    return null;\n  }\n\n  handleCompletedLineEnd() {\n    const currentDot = this.current ? this.shadowRoot?.querySelector('.dot') : null;\n\n    if (currentDot) {\n      currentDot.classList.add('animate');\n    }\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker-step': KemetTrackerStep\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n    --kemet-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n    --kemet-tracker-step-dot-font-size: 90%;\n    --kemet-tracker-step-dot-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-background-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-dot-border: 1px solid var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-fill-color: transparent;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-completed-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-completed-fill-color: var(--kemet-color-background-success);\n    --kemet-tracker-step-current-color: var(--kemet-color-font-inverse-base);\n    --kemet-tracker-step-current-fill-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-line-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-completed-line-color: var(--kemet-color-font-active);\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size);\n    color: var(--kemet-tracker-step-dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color);\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border);\n    background-color: var(--kemet-tracker-step-dot-fill-color);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color);\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color);\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color);\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color);\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color);\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color);\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/tracker-step/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/tracker-step/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetTrackerElement from '../tracker';\nimport styles from './styles.css.ts';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n\n * @tagname kemet-tracker-step\n * @summary A step in the Tracker\n * @ssrsafe yes\n *\n * @prop {number} step - The current step number\n * @prop {boolean} completed - Determines whether a step renders as complete\n * @prop {boolean} current - Determines whether a step renders as the current step\n * @prop {boolean} last - Is automatically added to the last step\n * @prop {string} breakpoint - The breakpoint to use for mobile rendering\n * @prop {boolean} mobile - Determines if a step should render as mobile\n * @prop {boolean} hideDotContent - Hides the label inside of a dot\n * @prop {number} completedSize - The icon size for the completed check mark\n * @prop {number} total - The total number of steps\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @cssproperty --kemet-tracker-step-dot-font-size - The font size.\n * @cssproperty --kemet-tracker-step-dot-color - The text color.\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color.\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.\n *\n * @csspart dot - The container for the dot.\n * @csspart line - A connector line from dot to dot.\n * @csspart completed-line - A completed connector line.\n *\n * @fires kemet-tracker-step-mounted - Fired when the tracker step is mounted to the DOM\n * @detail {HTMLElement} element - The tracker step element\n *\n */\n\n@customElement('kemet-tracker-step')\nexport default class KemetTrackerStep extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number})\n  step!: number;\n\n  @property({ type: Boolean, reflect: true })\n  completed!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  current!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  last!: boolean;\n\n  @property({ type: String })\n  breakpoint: string = '767px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })\n  hideDotContent!: boolean;\n\n  @property({ type: Number })\n  completedSize: number = 16;\n\n  @property({ type: Number })\n  total: number = 0;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n\n  @state()\n  tracker!: HTMLKemetTrackerElement;\n\n  firstUpdated() {\n    this.last = this.step === this.total;\n\n    this.isMobile();\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    emitEvent(this, 'kemet-tracker-step-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      ${this.makeLine()}\n      ${this.makeCompletedLine()}\n      <div class=\"dot\" part=\"dot\">${this.makeDotContent()}</div>\n      ${this.makeSlotContent()}\n    `;\n  }\n\n  makeLine() {\n    if (!this.last) {\n      return html`<div class=\"line\" part=\"line\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeCompletedLine() {\n    if (this.completed && !this.last) {\n      return html`<div class=\"line completed\" part=\"completed-line\" @animationend=${() => this.handleCompletedLineEnd()}></div>`;\n    }\n\n    return null;\n  }\n\n  makeDotContent() {\n    if (this.completed && !this.mobile && !this.hideDotContent) {\n      return html`\n        <kemet-icon name=\"check2\" size=${this.completedSize}></kemet-icon>\n      `;\n    }\n\n    if (!this.mobile && !this.hideDotContent) {\n      return html`\n        <span>${this.step}/${this.total}</span>\n      `;\n    }\n\n    return null;\n  }\n\n  makeSlotContent() {\n    if (!this.mobile) {\n      return html`<slot></slot>`;\n    }\n\n    return null;\n  }\n\n  handleCompletedLineEnd() {\n    const currentDot = this.current ? this.shadowRoot?.querySelector('.dot') : null;\n\n    if (currentDot) {\n      currentDot.classList.add('animate');\n    }\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker-step': KemetTrackerStep\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n    --kemet-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n    --kemet-tracker-step-dot-font-size: 90%;\n    --kemet-tracker-step-dot-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-background-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-dot-border: 1px solid var(--kemet-color-font-active);\n    --kemet-tracker-step-dot-fill-color: transparent;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-completed-color: var(--kemet-color-background-base);\n    --kemet-tracker-step-completed-fill-color: var(--kemet-color-background-success);\n    --kemet-tracker-step-current-color: var(--kemet-color-font-inverse-base);\n    --kemet-tracker-step-current-fill-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-line-color: var(--kemet-color-font-active);\n    --kemet-tracker-step-completed-line-color: var(--kemet-color-font-active);\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size);\n    color: var(--kemet-tracker-step-dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color);\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border);\n    background-color: var(--kemet-tracker-step-dot-fill-color);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color);\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color);\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color);\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color);\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color);\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color);\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/typewriter/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/typewriter/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport Typewriter from 'typewriter-effect/dist/core';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-typewriter\n * @summary An element that types out content.\n * @ssrsafe no - Depends on client-side effect library\n *\n * @prop {string} content - The content to be typed.\n * @prop {number} delay - The delay between each character.\n * @prop {string} cursor - The cursor to be displayed.\n * @prop {boolean} loop - Whether to loop the content.\n * @prop {number} restartDelay - The delay before restarting the typewriter.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-typewriter-completed - Fires when typewriter is completed\n *\n * @fires kemet-typewriter-mounted - Fired when the typewriter is mounted to the DOM\n * @detail {HTMLElement} element - The typewriter element\n *\n */\n\n@customElement('kemet-typewriter')\nexport default class KemetTypewriter extends LitElement {\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Number })\n  delay: number = 10;\n\n  @property({ type: String })\n  cursor: string = '';\n\n  @property({ type: Boolean })\n  loop: boolean = false;\n\n  @property({ type: Number, attribute: 'restart-delay' })\n  restartDelay: number = 1000;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private typewriter!: Typewriter;\n  private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  firstUpdated() {\n    const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n    this.typewriter = new Typewriter(target, {\n      cursor: this.cursor,\n      loop: this.loop,\n      delay: this.delay,\n    });\n\n    this.restartTypewriter();\n\n    emitEvent(this, 'kemet-typewriter-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('content') ||\n      changedProperties.has('delay') ||\n      changedProperties.has('cursor') ||\n      changedProperties.has('loop')\n    ) {\n      const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n      if (this.typewriter) {\n        this.typewriter.stop();\n      }\n\n      this.typewriter = new Typewriter(target, {\n        cursor: this.cursor,\n        loop: this.loop,\n        delay: this.delay,\n      });\n\n      this.restartTypewriter();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n      this.timeoutId = null;\n    }\n\n    if (this.typewriter) {\n      this.typewriter.stop();\n    }\n  }\n\n  render() {\n    return html`\n      <kemet-typewriter-target></kemet-typewriter-target>\n    `;\n  }\n\n  restartTypewriter() {\n    if (!this.typewriter) return;\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n    }\n\n    this.timeoutId = setTimeout(() => {\n      this.typewriter\n        .deleteAll(1)\n        .typeString(this.content)\n        .callFunction(() => {\n          emitEvent(this, 'kemet-typewriter-completed', { element: this });\n        })\n        .start();\n    }, this.restartDelay);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-typewriter': KemetTypewriter;\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/typewriter/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport Typewriter from 'typewriter-effect/dist/core';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-typewriter\n * @summary An element that types out content.\n * @ssrsafe no - Depends on client-side effect library\n *\n * @prop {string} content - The content to be typed.\n * @prop {number} delay - The delay between each character.\n * @prop {string} cursor - The cursor to be displayed.\n * @prop {boolean} loop - Whether to loop the content.\n * @prop {number} restartDelay - The delay before restarting the typewriter.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-typewriter-completed - Fires when typewriter is completed\n *\n * @fires kemet-typewriter-mounted - Fired when the typewriter is mounted to the DOM\n * @detail {HTMLElement} element - The typewriter element\n *\n */\n\n@customElement('kemet-typewriter')\nexport default class KemetTypewriter extends LitElement {\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Number })\n  delay: number = 10;\n\n  @property({ type: String })\n  cursor: string = '';\n\n  @property({ type: Boolean })\n  loop: boolean = false;\n\n  @property({ type: Number, attribute: 'restart-delay' })\n  restartDelay: number = 1000;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private typewriter!: Typewriter;\n  private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  firstUpdated() {\n    const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n    this.typewriter = new Typewriter(target, {\n      cursor: this.cursor,\n      loop: this.loop,\n      delay: this.delay,\n    });\n\n    this.restartTypewriter();\n\n    emitEvent(this, 'kemet-typewriter-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('content') ||\n      changedProperties.has('delay') ||\n      changedProperties.has('cursor') ||\n      changedProperties.has('loop')\n    ) {\n      const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n      if (this.typewriter) {\n        this.typewriter.stop();\n      }\n\n      this.typewriter = new Typewriter(target, {\n        cursor: this.cursor,\n        loop: this.loop,\n        delay: this.delay,\n      });\n\n      this.restartTypewriter();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n      this.timeoutId = null;\n    }\n\n    if (this.typewriter) {\n      this.typewriter.stop();\n    }\n  }\n\n  render() {\n    return html`\n      <kemet-typewriter-target></kemet-typewriter-target>\n    `;\n  }\n\n  restartTypewriter() {\n    if (!this.typewriter) return;\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n    }\n\n    this.timeoutId = setTimeout(() => {\n      this.typewriter\n        .deleteAll(1)\n        .typeString(this.content)\n        .callFunction(() => {\n          emitEvent(this, 'kemet-typewriter-completed', { element: this });\n        })\n        .start();\n    }, this.restartDelay);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-typewriter': KemetTypewriter;\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkC;;;ACAjD,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ADTN,OAAO,gBAAgB;;;AEFhB,IAAM,YAAY,CAAC,SAAsB,MAAc,QAAa,UAAU,MAAM,WAAW,SAAS;AAC7G,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AFyBA,IAAqB,kBAArB,cAA6C,WAAW;AAAA,EAAxD;AAAA;AAEE,mBAAkB;AAGlB,iBAAgB;AAGhB,kBAAiB;AAGjB,gBAAgB;AAGhB,wBAAuB;AAMvB,eAAc;AAGd,SAAQ,YAAkD;AAAA;AAAA,EAE1D,mBAAmB;AACjB,WAAO;AAAA,EACT;AAAA,EAEA,eAAe;AACb,UAAM,SAAS,KAAK,cAAc,yBAAyB;AAE3D,SAAK,aAAa,IAAI,WAAW,QAAQ;AAAA,MACvC,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,IACd,CAAC;AAED,SAAK,kBAAkB;AAEvB,cAAU,MAAM,4BAA4B;AAAA,MAC1C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,QAAQ,mBAAyC;AAC/C,QACE,kBAAkB,IAAI,SAAS,KAC/B,kBAAkB,IAAI,OAAO,KAC7B,kBAAkB,IAAI,QAAQ,KAC9B,kBAAkB,IAAI,MAAM,GAC5B;AACA,YAAM,SAAS,KAAK,cAAc,yBAAyB;AAE3D,UAAI,KAAK,YAAY;AACnB,aAAK,WAAW,KAAK;AAAA,MACvB;AAEA,WAAK,aAAa,IAAI,WAAW,QAAQ;AAAA,QACvC,QAAQ,KAAK;AAAA,QACb,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,MACd,CAAC;AAED,WAAK,kBAAkB;AAAA,IACzB;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAE3B,QAAI,KAAK,WAAW;AAClB,mBAAa,KAAK,SAAS;AAC3B,WAAK,YAAY;AAAA,IACnB;AAEA,QAAI,KAAK,YAAY;AACnB,WAAK,WAAW,KAAK;AAAA,IACvB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,oBAAoB;AAClB,QAAI,CAAC,KAAK,WAAY;AAEtB,QAAI,KAAK,WAAW;AAClB,mBAAa,KAAK,SAAS;AAAA,IAC7B;AAEA,SAAK,YAAY,WAAW,MAAM;AAChC,WAAK,WACF,UAAU,CAAC,EACX,WAAW,KAAK,OAAO,EACvB,aAAa,MAAM;AAClB,kBAAU,MAAM,8BAA8B,EAAE,SAAS,KAAK,CAAC;AAAA,MACjE,CAAC,EACA,MAAM;AAAA,IACX,GAAG,KAAK,YAAY;AAAA,EACtB;AACF;AA3GE;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADP,gBAEnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJP,gBAKnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPP,gBAQnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,gBAWnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAbnC,gBAcnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhBtB,gBAiBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAnBtB,gBAoBnB;AApBmB,kBAArB;AAAA,EADC,cAAc,kBAAkB;AAAA,GACZ;","names":[]}

package/dist/wrappers/react.d.ts

@@ -9,7 +9,7 @@ import KemetAvatars$1 from '../elements/avatars/index.js';
 import KemetBadge$1 from '../elements/badge/index.js';
 import KemetCard$1 from '../elements/card/index.js';
 import KemetCheckbox$1 from '../elements/checkbox/index.js';
-import { K as KemetCombo$1, I as InterfaceKemetSelectionEvent, a as KemetCount$1, b as InterfaceInputDetails, H as HTMLKemetFieldElement, c as HTMLKemetInputElement } from '../constants-C4-3KYlX.js';
+import { K as KemetCombo$1, I as InterfaceKemetSelectionEvent, a as KemetCount$1, b as InterfaceInputDetails, H as HTMLKemetFieldElement, c as HTMLKemetInputElement } from '../constants-BsAfWV-a.js';
 import KemetDrawer$1 from '../elements/drawer/index.js';
 import KemetFAB from '../elements/fab/index.js';
 import KemetFlipcard$1 from '../elements/flipcard/index.js';

package/dist/wrappers/react.js

@@ -1742,10 +1742,8 @@ var FormSubmitController = class {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
   }
   hostConnected() {
-    console.log("what?!");
     this.form = this.options.form(this.host);
     if (this.form) {
-      console.log("Adding form listeners");
       this.form.addEventListener("formdata", this.handleFormData);
       this.form.addEventListener("submit", this.handleFormSubmit);
     }
@@ -1766,7 +1764,6 @@ var FormSubmitController = class {
     }
   }
   handleFormSubmit(event) {
-    console.log("~~Form submitted~~");
     event.preventDefault();
     event.stopImmediatePropagation();
     const disabled = this.options.disabled(this.host);
@@ -1777,14 +1774,13 @@ var FormSubmitController = class {
         if (component.checkValidity) {
           component.checkValidity();
           if (!component.checkValidity()) {
+            console.log("invalid", component);
             component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
-                bubbles: true,
-                composed: true,
                 detail: {
-                  status: "error" /* Error */,
+                  appearance: "error" /* Error */,
                   validity: component.validity ? component.validity : {},
                   element: component
                 }
@@ -3042,6 +3038,7 @@ import { css as css16 } from "lit";
 var styles_css_default13 = css16`:host {
   /* private */
   --_kemet-field-message-color: inherit;
+  --_kemet-field-message-display: none;
 
   display: block;
 }
@@ -3063,27 +3060,35 @@ label span {
   margin-bottom: 0.8rem;
 }
 
-.message {
+[part=message] {
+  display: var(--_kemet-field-message-display);
   color: var(--_kemet-field-message-color);
   font-size: 0.9rem;
   line-height: 1;
-  display: block;
   margin-top: 0.8rem;
 }
 
-:host([appearance=error]) .message {
+:host([appearance]) {
+  --_kemet-field-message-display: block;
+}
+
+:host([appearance=neutral]) {
+  --_kemet-field-message-display: none;
+}
+
+:host([appearance=error]) {
   --_kemet-field-message-color: var(--kemet-color-font-error);
 }
 
-:host([appearance=success]) .message {
+:host([appearance=success]) {
   --_kemet-field-message-color: var(--kemet-color-font-success);
 }
 
-:host([appearance=warning]) .message {
+:host([appearance=warning]) {
   --_kemet-field-message-color: var(--kemet-color-font-warning);
 }
 
-:host([appearance=link]) .message {
+:host([appearance=link]) {
   --_kemet-field-message-color: var(--kemet-color-font-link);
 }
 `;
@@ -3092,7 +3097,6 @@ label span {
 var HTMLKemetFieldElement = class extends LitElement14 {
   constructor() {
     super(...arguments);
-    this.appearance = "neutral" /* Neutral */;
     this.errorIcon = "exclamation-triangle-fill";
     this.successIcon = "check-lg";
     this.dom = "initializing";
@@ -3100,6 +3104,10 @@ var HTMLKemetFieldElement = class extends LitElement14 {
   firstUpdated() {
     this.slotInput = this.querySelector('[slot="input"]');
     this.slotCombo = this.querySelector('[slot="combo"]');
+    this.slotInput?.addEventListener("kemet-input-appearance-change", (event) => this.handleAppearance(event));
+    this.slotInput?.addEventListener("kemet-select-appearance-change", (event) => this.handleAppearance(event));
+    this.slotInput?.addEventListener("kemet-textarea-appearance-change", (event) => this.handleAppearance(event));
+    this.slotCombo?.addEventListener("kemet-select-appearance-change", (event) => this.handleAppearance(event));
     this.slotCombo?.addEventListener("kemet-input-combo-selection", (event) => this.handleSelection(event));
     if (this.slotInput.value) {
       this.length = this.slotInput.value.length;
@@ -3116,21 +3124,16 @@ var HTMLKemetFieldElement = class extends LitElement14 {
     this.dom = "mounted";
   }
   render() {
+    this.appearance = this.appearance ?? "neutral" /* Neutral */;
     return html14`
       <label for="${this.slug}" id="${this.slug}-label" part="label">
         <span part="text">${this.label}</span>
         <slot name="input"></slot>
       </label>
-      ${this.makeStatusMessage()}
+     ${this.appearance === "neutral" /* Neutral */ ? null : html14`<span part="message">${this.message}</span>`}
       <slot name="component"></slot>
     `;
   }
-  makeStatusMessage() {
-    if (this.appearance !== "neutral") {
-      return html14`<span class="message" part="message">${this.message}</span>`;
-    }
-    return null;
-  }
   handleFocused(event) {
     this.focused = event.detail;
     if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {
@@ -3138,7 +3141,9 @@ var HTMLKemetFieldElement = class extends LitElement14 {
     }
   }
   handleAppearance(event) {
-    this.appearance = event.detail.appearance;
+    const detail = event.detail;
+    const appearance = !!detail.appearance ? detail.appearance : "neutral";
+    this.appearance = appearance;
   }
   handleInput(event) {
     this.length = event.detail.value.length ?? 0;
@@ -3860,6 +3865,14 @@ var HTMLKemetInputElement = class extends LitElement18 {
     this.dom = "initializing";
     this.formSubmitController = new FormSubmitController(this);
   }
+  updated(changedProperties) {
+    if (changedProperties.has("appearance")) {
+      emitEvent(this, "kemet-input-appearance-change", {
+        appearance: this.appearance,
+        element: this
+      });
+    }
+  }
   firstUpdated() {
     this.input = this.shadowRoot?.querySelector("input");
     this.field = this.closest("kemet-field");
@@ -3985,6 +3998,7 @@ var HTMLKemetInputElement = class extends LitElement18 {
    */
   handleInput(event) {
     this.value = this.input.value;
+    this.appearance = "neutral" /* Neutral */;
     emitEvent(this, "kemet-input-input", {
       appearance: this.appearance,
       validity: this.input.validity,
@@ -4002,7 +4016,7 @@ var HTMLKemetInputElement = class extends LitElement18 {
       this.invalid = true;
       this.appearance = "error" /* Error */;
       emitEvent(this, "kemet-input-appearance-change", {
-        status: "error" /* Error */,
+        appearance: "error" /* Error */,
         validity: this.input?.validity,
         element: this,
         value: event.target.value
@@ -4010,7 +4024,7 @@ var HTMLKemetInputElement = class extends LitElement18 {
     }
   }
   handleStatus(event) {
-    this.appearance = event.detail.status;
+    this.appearance = event.detail.appearance;
   }
   /**
    * Toggles password visibility
@@ -6000,6 +6014,14 @@ var KemetSelect = class extends LitElement26 {
     this.hasFocus = false;
     this.formSubmitController = new FormSubmitController(this);
   }
+  updated(changedProperties) {
+    if (changedProperties.has("appearance")) {
+      emitEvent(this, "kemet-select-appearance-change", {
+        appearance: this.appearance,
+        element: this
+      });
+    }
+  }
   firstUpdated() {
     this.control = this.closest("kemet-field");
     this.select = this.shadowRoot?.querySelector("select");
@@ -6099,6 +6121,7 @@ var KemetSelect = class extends LitElement26 {
    */
   handleChange(event) {
     this.value = this.select.value;
+    this.appearance = "neutral" /* Neutral */;
     emitEvent(this, "kemet-select-change", {
       appearance: this.appearance,
       validity: this.select.validity,