kemet-ui 5.0.4 → 5.0.5

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/password/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/password/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport styles from './styles.css.ts';\n\ninterface InterfaceOptions {\n  pattern: string;\n  message: string;\n  meetsCriteria?: boolean;\n}\n\nexport interface InterfacePasswordStrengthChangeDetails {\n  appearance: EnumAppearances;\n  meetsPasswordCriteria: boolean;\n  element: KemetPassword;\n}\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n * @ssrsafe yes\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-password-strength-change - Fires when there's a change in strength.\n *\n * @csspart strength - Indicates password strength.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Array })\n  rules: InterfaceOptions[] = [\n    { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n    { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n    { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  show: boolean = false;\n\n  @property({ type: String })\n  value!: string;\n\n  @property({ type: String })\n  message: string = 'Please make sure you meet all the requirements.';\n\n  @property({ type: String })\n  strength!: string;\n\n  @property({ type: String })\n  icon: string = 'check2';\n\n  @property({ type: Number })\n  iconSize: number = 18;\n\n  @state()\n  appearance?: EnumAppearances;\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  input!: HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.input = this.field.querySelector('[slot=\"input\"]') as HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n    // events listeners\n    this.input?.addEventListener('kemet-input-input', this.handleInput.bind(this));\n  }\n\n  render() {\n    return html`\n      <div role=\"alert\" aria-live=\"assertive\">\n        <div class=\"${this.strength}\" part=\"strength\">\n          <span>${this.strength}</span>\n          <ul part=\"indicator\">\n            <li></li>\n            <li></li>\n            <li></li>\n          </ul>\n        </div>\n        <p part=\"message\">${this.message}</p>\n        <ul part=\"rules\">\n          ${this.makeRules()}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the list of rules\n   * @private\n   * @returns {TemplateResult<1>[]} the criteria rules\n   */\n  makeRules(): TemplateResult<1>[] {\n    if (this.input) {\n      return this.rules.map((rule) => {\n        const regExp = new RegExp(rule.pattern);\n        const meetsCriteria = regExp.test(this.input.value);\n        rule.meetsCriteria = meetsCriteria;\n        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n      });\n    }\n\n    return [];\n  }\n\n  /**\n   * Makes the check icon if the criteria has been met\n   * @param {boolean} meetsCriteria\n   * @private\n   * @returns {TemplateResult} an icon component\n   */\n  makeCheckIcon(meetsCriteria: boolean): TemplateResult {\n    if (meetsCriteria) {\n      return html`<kemet-icon name=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return html``;\n  }\n\n  /**\n   * Handles the kemet-input-input event\n   * @param {*} event\n   * @private\n   */\n  handleInput(event: Event) {\n    this.value = (event as CustomEvent).detail.value;\n    this.setStrength();\n    this.visibility();\n  }\n\n  /**\n   * Determines the strength of the password\n   * @private\n   */\n  setStrength() {\n    // We use a setTimeout here because makeRules adds the meetsCriteria\n    // property to the rules. We need that to be set by render() before\n    // setting the Strength because the percentage calc is based on it\n    setTimeout(() => {\n      const totalRules = this.rules.length;\n      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;\n\n      if (metRulesPercentage <= 0.33) {\n        this.strength = 'weak';\n        this.appearance = EnumAppearances.Error;\n      }\n\n      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n        this.strength = 'better';\n        this.appearance = EnumAppearances.Error;\n      }\n\n      if (metRulesPercentage > 0.67) {\n        this.strength = 'strong';\n        this.appearance = EnumAppearances.Success;\n      }\n\n      emitEvent(this, 'kemet-password-strength-change', {\n        appearance: this.appearance,\n        meetsPasswordCriteria: this.appearance === EnumAppearances.Success,\n        element: this,\n      });\n    }, 1);\n  }\n\n  /**\n   * Determines whether to show or hide the component\n   * @private\n   */\n  visibility() {\n    this.show = this.value.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-password': KemetPassword\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  color: inherit;\n  display: none;\n}\n\n:host([show]) {\n  display: block;\n}\n\np {\n  margin: 1.6rem 0;\n}\n\n[part=strength] {\n  display: grid;\n  align-items: center;\n  grid-template-columns: 1fr auto;\n  line-height: 1;\n  margin-top: 0.8rem;\n}\n\n[part=strength] > span {\n  text-transform: capitalize;\n}\n\n.weak {\n  color: var(--kemet-color-font-error);\n}\n\n.better {\n  color: var(--kemet-color-font-warning);\n}\n\n.strong {\n  color: var(--kemet-color-font-success);\n}\n\n[part=indicator] {\n  display: flex;\n  gap: 0.4rem;\n  margin: 0;\n  list-style: none;\n}\n\n[part=indicator] li {\n  width: 1.6rem;\n  height: 0.2rem;\n}\n\n.weak [part=indicator] li:nth-child(1) {\n  background-color: var(--kemet-color-font-error);\n}\n\n.better [part=indicator] li:nth-child(1),\n.better [part=indicator] li:nth-child(2) {\n  background-color: var(--kemet-color-font-warning);\n}\n\n.strong [part=indicator] li {\n  background-color: var(--kemet-color-font-success);\n}\n\n[part=rules] {\n  color: inherit;\n  line-height: 1.5;\n  list-style: none;\n  font-size: 90%;\n  padding-left: 2rem;\n}\n\n[part=rules] li {\n  position: relative;\n}\n\n[part=rules] kemet-icon {\n  color: var(--kemet-color-font-success);\n  position: absolute;\n  left: -2rem;\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/password/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/password/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport styles from './styles.css.ts';\n\ninterface InterfaceOptions {\n  pattern: string;\n  message: string;\n  meetsCriteria?: boolean;\n}\n\nexport interface InterfacePasswordStrengthChangeDetails {\n  appearance: EnumAppearances;\n  meetsPasswordCriteria: boolean;\n  element: KemetPassword;\n}\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n * @ssrsafe yes\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-password-strength-change - Fires when there's a change in strength.\n *\n * @csspart strength - Indicates password strength.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Array })\n  rules: InterfaceOptions[] = [\n    { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n    { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n    { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  show: boolean = false;\n\n  @property({ type: String })\n  value!: string;\n\n  @property({ type: String })\n  message: string = 'Please make sure you meet all the requirements.';\n\n  @property({ type: String })\n  strength!: string;\n\n  @property({ type: String })\n  icon: string = 'check2';\n\n  @property({ type: Number })\n  iconSize: number = 18;\n\n  @state()\n  appearance?: EnumAppearances;\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  input!: HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.input = this.field.querySelector('[slot=\"input\"]') as HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n    // events listeners\n    this.input?.addEventListener('kemet-input-input', this.handleInput.bind(this));\n  }\n\n  render() {\n    return html`\n      <div role=\"alert\" aria-live=\"assertive\">\n        <div class=\"${this.strength}\" part=\"strength\">\n          <span>${this.strength}</span>\n          <ul part=\"indicator\">\n            <li></li>\n            <li></li>\n            <li></li>\n          </ul>\n        </div>\n        <p part=\"message\">${this.message}</p>\n        <ul part=\"rules\">\n          ${this.makeRules()}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the list of rules\n   * @private\n   * @returns {TemplateResult<1>[]} the criteria rules\n   */\n  makeRules(): TemplateResult<1>[] {\n    if (this.input) {\n      return this.rules.map((rule) => {\n        const regExp = new RegExp(rule.pattern);\n        const meetsCriteria = regExp.test(this.input.value);\n        rule.meetsCriteria = meetsCriteria;\n        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n      });\n    }\n\n    return [];\n  }\n\n  /**\n   * Makes the check icon if the criteria has been met\n   * @param {boolean} meetsCriteria\n   * @private\n   * @returns {TemplateResult} an icon component\n   */\n  makeCheckIcon(meetsCriteria: boolean): TemplateResult {\n    if (meetsCriteria) {\n      return html`<kemet-icon name=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return html``;\n  }\n\n  /**\n   * Handles the kemet-input-input event\n   * @param {*} event\n   * @private\n   */\n  handleInput(event: Event) {\n    this.value = (event as CustomEvent).detail.value;\n    this.setStrength();\n    this.visibility();\n  }\n\n  /**\n   * Determines the strength of the password\n   * @private\n   */\n  setStrength() {\n    // We use a setTimeout here because makeRules adds the meetsCriteria\n    // property to the rules. We need that to be set by render() before\n    // setting the Strength because the percentage calc is based on it\n    setTimeout(() => {\n      const totalRules = this.rules.length;\n      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;\n\n      if (metRulesPercentage <= 0.33) {\n        this.strength = 'weak';\n        this.appearance = EnumAppearances.Error;\n      }\n\n      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n        this.strength = 'better';\n        this.appearance = EnumAppearances.Error;\n      }\n\n      if (metRulesPercentage > 0.67) {\n        this.strength = 'strong';\n        this.appearance = EnumAppearances.Success;\n      }\n\n      emitEvent(this, 'kemet-password-strength-change', {\n        appearance: this.appearance,\n        meetsPasswordCriteria: this.appearance === EnumAppearances.Success,\n        element: this,\n      });\n    }, 1);\n  }\n\n  /**\n   * Determines whether to show or hide the component\n   * @private\n   */\n  visibility() {\n    this.show = this.value.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-password': KemetPassword\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  color: inherit;\n  display: none;\n}\n\n:host([show]) {\n  display: block;\n}\n\np {\n  margin: 1.6rem 0;\n}\n\n[part=strength] {\n  display: grid;\n  align-items: center;\n  grid-template-columns: 1fr auto;\n  line-height: 1;\n  margin-top: 0.8rem;\n}\n\n[part=strength] > span {\n  text-transform: capitalize;\n}\n\n.weak {\n  color: var(--kemet-color-font-error);\n}\n\n.better {\n  color: var(--kemet-color-font-warning);\n}\n\n.strong {\n  color: var(--kemet-color-font-success);\n}\n\n[part=indicator] {\n  display: flex;\n  gap: 0.4rem;\n  margin: 0;\n  list-style: none;\n}\n\n[part=indicator] li {\n  width: 1.6rem;\n  height: 0.2rem;\n}\n\n.weak [part=indicator] li:nth-child(1) {\n  background-color: var(--kemet-color-font-error);\n}\n\n.better [part=indicator] li:nth-child(1),\n.better [part=indicator] li:nth-child(2) {\n  background-color: var(--kemet-color-font-warning);\n}\n\n.strong [part=indicator] li {\n  background-color: var(--kemet-color-font-success);\n}\n\n[part=rules] {\n  color: inherit;\n  line-height: 1.5;\n  list-style: none;\n  font-size: 90%;\n  padding-left: 2rem;\n}\n\n[part=rules] li {\n  position: relative;\n}\n\n[part=rules] kemet-icon {\n  color: var(--kemet-color-font-success);\n  position: absolute;\n  left: -2rem;\n}\n`;\n"],"mappings":"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","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/radio/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/radio/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetRadiosElements from '../radios';\nimport styles from './styles.css.ts'\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n * @ssrsafe yes\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\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 that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-radio-focus -  Fires when the checkbox receives focus\n * @event kemet-radio-blur - Fires when the checkbox loses focus\n *\n * @fires kemet-radio-mounted - Fired when the radio is mounted to the DOM\n * @detail {HTMLElement} element - The radio element\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: String })\n  name: string = '';\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\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  input: HTMLInputElement = undefined as any;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as HTMLKemetRadiosElements;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot?.querySelector('input') as HTMLInputElement;\n\n    emitEvent(this, 'kemet-radio-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        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\">${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  /**\n    * Simulates a click on the input element.\n    * @public\n    * @method click\n    * @returns {void}\n    */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Calls blur on the input element.\n   * @public\n   * @method blur\n   * @returns {void}\n   */\n  blur(): void {\n    this.input.blur();\n  }\n\n  /**\n   * Calls focus on the input element.\n   * @public\n   * @method focus\n   * @returns {void}\n   */\n  focus(): void {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-radio-blur', { element: this });\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-radio-focus', { element: this });\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\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-radio-size: 18px;\n  --kemet-radio-border: 1px solid var(--kemet-color-font-active);\n  --kemet-radio-dot-color: var(--kemet-color-font-active);\n  --kemet-radio-dot-border: none;\n  --kemet-radio-dot-border-width: 3px;\n  --kemet-radio-dot-ring-color: var(--kemet-color-font-inverse-base);\n  --kemet-radio-dot-color-filled: var(--kemet-color-font-inverse-base);\n  --kemet-radio-dot-border-width: 4px;\n  --kemet-radio-dot-border-color: var(--kemet-color-font-active);\n\n  display: inline-block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  cursor: pointer;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-right: 0.5rem;\n}\n\ninput {\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  width: var(--kemet-radio-size);\n  height: var(--kemet-radio-size);\n  position: absolute;\n  opacity: 0;\n}\n\n[part=button] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--kemet-radio-size);\n  height: var(--kemet-radio-size);\n  padding: 0;\n  border-radius: var(--kemet-border-radius-circle);\n  background: none;\n  border: var(--kemet-radio-border);\n}\n\n[part=dot] {\n  display: inline-flex;\n  border-radius: var(--kemet-border-radius-circle);\n  width: calc(var(--kemet-radio-size) - 2px);\n  height: calc(var(--kemet-radio-size) - 2px);\n  background: var(--kemet-radio-dot-color);\n  border: var(--kemet-radio-dot-border);\n  box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n}\n\n:host([filled]) [part=dot] {\n  background: var(--kemet-radio-dot-color-filled);\n  box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\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;;;ADTN,SAAS,iBAAiB;AAC1B,SAAS,YAAY;;;AEHd,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;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AH8Cf,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,iBAAgB;AAGhB,mBAAmB;AAGnB,gBAAe;AAGf,iBAAgB;AAGhB,oBAAoB;AAGpB,mBAAmB;AAGnB,kBAAkB;AAMlB,eAAc;AAGd,iBAA0B;AAAA;AAAA,EAE1B,eAAe;AACb,UAAM,gBAAgB,KAAK,QAAQ,cAAc;AAEjD,SAAK,OAAO,cAAc,QAAQ;AAClC,SAAK,QAAQ,KAAK,YAAY,cAAc,OAAO;AAEnD,cAAU,MAAM,uBAAuB;AAAA,MACrC,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;AAAA;AAAA;AAAA;AAAA,iBAIM,UAAU,KAAK,IAAI,CAAC;AAAA,mBAClB,KAAK,KAAK;AAAA,qBACR,KAAK,KAAK,OAAO,CAAC;AAAA,sBACjB,KAAK,QAAQ;AAAA,kBACjB,MAAM,KAAK,WAAW,CAAC;AAAA,mBACtB,MAAM,KAAK,YAAY,CAAC;AAAA;AAAA,gCAEX,KAAK,QAAQ,CAAC;AAAA,4BAClB,KAAK,KAAK;AAAA;AAAA;AAAA,EAGpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAQ;AACN,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAa;AACX,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAc;AACZ,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EAEA,aAAa;AACX,SAAK,UAAU;AACf,cAAU,MAAM,oBAAoB,EAAE,SAAS,KAAK,CAAC;AAAA,EACvD;AAAA,EAEA,cAAc;AACZ,SAAK,UAAU;AACf,cAAU,MAAM,qBAAqB,EAAE,SAAS,KAAK,CAAC;AAAA,EACxD;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,SAAS;AAChB,aAAO;AAAA;AAAA;AAAA,IAGT;AAEA,WAAO;AAAA,EACT;AACF;AApHqB,WACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,WAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,WAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBvB,WAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxBtB,WAyBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BtB,WA4BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA9BY,WA+BnB;AA/BmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}
+{"version":3,"sources":["../../../src/elements/radio/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/radio/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetRadiosElements from '../radios';\nimport styles from './styles.css.ts'\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n * @ssrsafe yes\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\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 that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-radio-focus -  Fires when the checkbox receives focus\n * @event kemet-radio-blur - Fires when the checkbox loses focus\n *\n * @fires kemet-radio-mounted - Fired when the radio is mounted to the DOM\n * @detail {HTMLElement} element - The radio element\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: String })\n  name: string = '';\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\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  input: HTMLInputElement = undefined as any;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as HTMLKemetRadiosElements;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot?.querySelector('input') as HTMLInputElement;\n\n    emitEvent(this, 'kemet-radio-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        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\">${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  /**\n    * Simulates a click on the input element.\n    * @public\n    * @method click\n    * @returns {void}\n    */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Calls blur on the input element.\n   * @public\n   * @method blur\n   * @returns {void}\n   */\n  blur(): void {\n    this.input.blur();\n  }\n\n  /**\n   * Calls focus on the input element.\n   * @public\n   * @method focus\n   * @returns {void}\n   */\n  focus(): void {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-radio-blur', { element: this });\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-radio-focus', { element: this });\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\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-radio-size: 18px;\n  --kemet-radio-border: 1px solid var(--kemet-color-font-active);\n  --kemet-radio-dot-color: var(--kemet-color-font-active);\n  --kemet-radio-dot-border: none;\n  --kemet-radio-dot-border-width: 3px;\n  --kemet-radio-dot-ring-color: var(--kemet-color-font-inverse-base);\n  --kemet-radio-dot-color-filled: var(--kemet-color-font-inverse-base);\n  --kemet-radio-dot-border-width: 4px;\n  --kemet-radio-dot-border-color: var(--kemet-color-font-active);\n\n  display: inline-block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  cursor: pointer;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-right: 0.5rem;\n}\n\ninput {\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  width: var(--kemet-radio-size);\n  height: var(--kemet-radio-size);\n  position: absolute;\n  opacity: 0;\n}\n\n[part=button] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--kemet-radio-size);\n  height: var(--kemet-radio-size);\n  padding: 0;\n  border-radius: var(--kemet-border-radius-circle);\n  background: none;\n  border: var(--kemet-radio-border);\n}\n\n[part=dot] {\n  display: inline-flex;\n  border-radius: var(--kemet-border-radius-circle);\n  width: calc(var(--kemet-radio-size) - 2px);\n  height: calc(var(--kemet-radio-size) - 2px);\n  background: var(--kemet-radio-dot-color);\n  border: var(--kemet-radio-dot-border);\n  box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n}\n\n:host([filled]) [part=dot] {\n  background: var(--kemet-radio-dot-color-filled);\n  box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/radios/index.d.ts

@@ -2,7 +2,7 @@ import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
 import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
-import { g as EnumAxis, E as EnumAppearances } from '../../constants-C4-3KYlX.js';
+import { g as EnumAxis, E as EnumAppearances } from '../../constants-BsAfWV-a.js';
 import KemetRadio from '../radio/index.js';
 
 /**

package/dist/elements/radios/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/radios/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/radios/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/radios/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAxis, EnumAppearances } from '../../utilities/constants';\nimport type HTMLKemetRadioElement from '../radio';\nimport styles from './styles.css.ts'\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n * @ssrsafe yes\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {TypeAxis} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {EnumAppearances} appearance - The appearance of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\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 fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n * @fires kemet-radios-mounted - Fired when the radios is mounted to the DOM\n * @detail {HTMLElement} element - The radios element\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: EnumAxis = EnumAxis.Horizontal;\n\n  @property({ type: String })\n  value!: string;\n\n  @property({ type: String })\n  name: string = 'radios';\n\n  @property({ type: String, reflect: true })\n  appearance: EnumAppearances = EnumAppearances.Neutral;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Boolean })\n  required!: boolean;\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  radios!: NodeListOf<HTMLKemetRadioElement>;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.radios = this.querySelectorAll('kemet-radio');\n\n    emitEvent(this, 'kemet-radios-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      <fieldset part=\"fieldset\">\n        ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n        <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}></slot>\n      </fieldset>\n      ${this.makeMessage()}\n    `;\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as HTMLKemetRadioElement;\n\n    if (!target.disabled) {\n      target.checked = true;\n      target.setAttribute('aria-checked', 'true');\n      this.value = target.value;\n      this.appearance = EnumAppearances.Neutral;\n\n      emitEvent(this, 'kemet-radios-change', this);\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const radios = Array.from(this.radios);\n    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n    const forwardKeys = ['ArrowRight', 'ArrowDown'];\n    const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n    const checkedIndex: number | HTMLKemetRadioElement = radios.findIndex((radio: HTMLKemetRadioElement) => radio.checked) ?? radios[0];\n\n    let index: number;\n\n    if (typeof checkedIndex === 'number') {\n      index = checkedIndex + shift;\n    } else {\n      index = shift;\n    }\n\n    if (arrowKeys.includes(event.key)) {\n      if (index < 0) {\n        index = radios.length - 1;\n      }\n\n      if (index > radios.length - 1) {\n        index = 0;\n      }\n\n      this.radios.forEach((radio) => {\n        radio.checked = false;\n        radio.tabIndex = -1;\n      });\n\n      const radio = this.radios[index];\n      if (radio) {\n        radio.focus();\n        radio.checked = true;\n        radio.tabIndex = 0;\n      }\n    }\n  }\n\n  makeMessage() {\n    if (this.appearance === 'error' || this.appearance === 'warning') {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    if (this.required) {\n      return !!this.value;\n    }\n\n    return true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radios': KemetRadios\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  display: block;\n}\n\nfieldset {\n  border: 0;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: 0.5rem;\n}\n\nlegend {\n  margin-bottom: 1rem;\n}\n\n:host([axis=vertical]) fieldset {\n  flex-direction: column;\n}\n\n[part=message] {\n  display: block;\n  margin-top: 0.5rem;\n}\n\n:host([appearance=error]) [part=message] {\n  color: var(--kemet-color-font-error);\n}\n\n:host([appearance=warning]) [part=message] {\n  color: var(--kemet-color-font-warning);\n}\n`;\n"],"mappings":"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","names":["radio"]}
+{"version":3,"sources":["../../../src/elements/radios/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/radios/styles.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAxis, EnumAppearances } from '../../utilities/constants';\nimport type HTMLKemetRadioElement from '../radio';\nimport styles from './styles.css.ts'\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n * @ssrsafe yes\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {TypeAxis} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {EnumAppearances} appearance - The appearance of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\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 fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n * @fires kemet-radios-mounted - Fired when the radios is mounted to the DOM\n * @detail {HTMLElement} element - The radios element\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: EnumAxis = EnumAxis.Horizontal;\n\n  @property({ type: String })\n  value!: string;\n\n  @property({ type: String })\n  name: string = 'radios';\n\n  @property({ type: String, reflect: true })\n  appearance: EnumAppearances = EnumAppearances.Neutral;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Boolean })\n  required!: boolean;\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  radios!: NodeListOf<HTMLKemetRadioElement>;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.radios = this.querySelectorAll('kemet-radio');\n\n    emitEvent(this, 'kemet-radios-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      <fieldset part=\"fieldset\">\n        ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n        <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}></slot>\n      </fieldset>\n      ${this.makeMessage()}\n    `;\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as HTMLKemetRadioElement;\n\n    if (!target.disabled) {\n      target.checked = true;\n      target.setAttribute('aria-checked', 'true');\n      this.value = target.value;\n      this.appearance = EnumAppearances.Neutral;\n\n      emitEvent(this, 'kemet-radios-change', this);\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const radios = Array.from(this.radios);\n    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n    const forwardKeys = ['ArrowRight', 'ArrowDown'];\n    const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n    const checkedIndex: number | HTMLKemetRadioElement = radios.findIndex((radio: HTMLKemetRadioElement) => radio.checked) ?? radios[0];\n\n    let index: number;\n\n    if (typeof checkedIndex === 'number') {\n      index = checkedIndex + shift;\n    } else {\n      index = shift;\n    }\n\n    if (arrowKeys.includes(event.key)) {\n      if (index < 0) {\n        index = radios.length - 1;\n      }\n\n      if (index > radios.length - 1) {\n        index = 0;\n      }\n\n      this.radios.forEach((radio) => {\n        radio.checked = false;\n        radio.tabIndex = -1;\n      });\n\n      const radio = this.radios[index];\n      if (radio) {\n        radio.focus();\n        radio.checked = true;\n        radio.tabIndex = 0;\n      }\n    }\n  }\n\n  makeMessage() {\n    if (this.appearance === 'error' || this.appearance === 'warning') {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    if (this.required) {\n      return !!this.value;\n    }\n\n    return true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radios': KemetRadios\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  display: block;\n}\n\nfieldset {\n  border: 0;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: 0.5rem;\n}\n\nlegend {\n  margin-bottom: 1rem;\n}\n\n:host([axis=vertical]) fieldset {\n  flex-direction: column;\n}\n\n[part=message] {\n  display: block;\n  margin-top: 0.5rem;\n}\n\n:host([appearance=error]) [part=message] {\n  color: var(--kemet-color-font-error);\n}\n\n:host([appearance=warning]) [part=message] {\n  color: var(--kemet-color-font-warning);\n}\n`;\n"],"mappings":"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","names":["radio"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/rotator/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/rotator/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumEffects {\n  Fade = 'fade',\n  Flip = 'flip',\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n * @ssrsafe yes\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {TypeEffects} effect - The transition effect type.\n * @prop {number} speed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\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-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n * @fires kemet-rotator-mounted - Fired when the rotator is mounted to the DOM\n * @detail {HTMLElement} element - The rotator element\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'active-slide' })\n  activeSlide: number = 0;\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: EnumEffects = EnumEffects.Fade;\n\n  @property({ type: Number })\n  speed: number = 3;\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  width: string = 'auto';\n\n  @state()\n  height: string = 'auto';\n\n  @state()\n  prevSlide!: number | null;\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n\n    emitEvent(this, 'kemet-rotator-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(changed: Map<string, never>) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.speed > 0) {\n          this.nextSlide();\n        }\n      }, this.speed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span part=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    return this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'active' : '';\n      const setPrevClass = this.prevSlide === index ? 'previous' : '';\n\n      return html`\n        <span part=\"slide\" class=\"${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot?.querySelectorAll('[part=\"slide\"]');\n      let tallest = 0;\n\n      slides?.forEach((slide: Element) => {\n        if ((slide as HTMLElement).offsetHeight > tallest) {\n          tallest = (slide as HTMLElement).offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  /**\n   * Rotates to the next slide.\n   * @public\n   * @method nextSlide\n   * @returns {void}\n   */\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\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-rotator-transition-speed: 500ms;\n\n  display: flex;\n}\n\n[part=slide] {\n  pointer-events: none;\n}\n\n.rotator__slide--active {\n  pointer-events: auto;\n}\n\n/* fade effect */\n:host([effect=fade]) [part=rotator] {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n}\n\n:host([effect=fade]) [part=slide] {\n  width: 100%;\n  flex: none;\n  opacity: 0;\n  box-sizing: border-box;\n  transition: all var(--kemet-rotator-transition-speed) ease;\n}\n\n:host([effect=fade]) [part=slide]:not(:first-child) {\n  margin-left: -100%; /* this is the bulk of the overlay trick */\n}\n\n:host([effect=fade]) .active {\n  opacity: 1;\n}\n\n/* flip effect */\n:host([effect=flip]) [part=rotator] {\n  display: flex;\n  position: relative;\n  perspective: 500px;\n}\n\n:host([effect=flip]) [part=slide] {\n  display: block;\n  width: auto;\n  position: absolute;\n  top: -20px;\n  left: 0;\n\n  opacity: 0;\n\n  transform: rotateX(90deg);\n  transform-origin: 0% 0%;\n  transition: all var(--kemet-rotator-transition-speed) ease;\n}\n\n:host([effect=flip]) .active {\n  top: 0;\n  opacity: 1;\n\n  transform: rotateX(0deg);\n}\n\n:host([effect=flip]) .previous {\n  top: 40px;;\n  transform: rotateX(-90deg);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,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,SAAS,kBAAkB;;;AEFpB,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;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AHIR,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,UAAO;AACP,EAAAA,aAAA,UAAO;AAFG,SAAAA;AAAA,GAAA;AA4BZ,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAIE,uBAAsB;AAGtB,oBAAqB,CAAC;AAGtB,kBAAsB;AAGtB,iBAAgB;AAMhB,eAAc;AAGd,iBAAgB;AAGhB,kBAAiB;AAAA;AAAA,EAKjB,eAAe;AAEb,SAAK,YAAY;AAEjB,WAAO,iBAAiB,UAAU,KAAK,cAAc,KAAK,IAAI,CAAC;AAE/D,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,QAAQ,SAA6B;AACnC,UAAM,kBAAkB,CAAC,CAAC,QAAQ,IAAI,OAAO;AAC7C,UAAM,mBAAmB,CAAC,CAAC,QAAQ,IAAI,QAAQ;AAE/C,SAAK,cAAc;AAGnB,QAAI,CAAC,mBAAmB,CAAC,kBAAkB;AACzC,iBAAW,MAAM;AACf,YAAI,KAAK,QAAQ,GAAG;AAClB,eAAK,UAAU;AAAA,QACjB;AAAA,MACF,GAAG,KAAK,QAAQ,GAAI;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,WAAW,SAAS,SAAS,KAAK,KAAK,MAAM;AACnE,UAAM,YAAY,KAAK,WAAW,SAAS,UAAU,KAAK,MAAM,MAAM;AAEtE,WAAO;AAAA,oCACyB,QAAQ,IAAI,SAAS;AAAA,UAC/C,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA,EAG3B;AAAA,EAEA,eAAe;AACb,WAAO,KAAK,SAAS,IAAI,CAAC,SAAS,UAAU;AAC3C,YAAM,iBAAiB,KAAK,gBAAgB,QAAQ,WAAW;AAC/D,YAAM,eAAe,KAAK,cAAc,QAAQ,aAAa;AAE7D,aAAO;AAAA,oCACuB,cAAc,IAAI,YAAY;AAAA,YACtD,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,IAG3B,CAAC;AAAA,EACH;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,WAAW,QAAQ;AAC1B,WAAK,QAAQ,GAAG,KAAK,WAAW;AAEhC,YAAM,SAAS,KAAK,YAAY,iBAAiB,gBAAgB;AACjE,UAAI,UAAU;AAEd,cAAQ,QAAQ,CAAC,UAAmB;AAClC,YAAK,MAAsB,eAAe,SAAS;AACjD,oBAAW,MAAsB;AAAA,QACnC;AAAA,MACF,CAAC;AAED,WAAK,SAAS,GAAG,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAY;AACV,QAAI,KAAK,cAAc,KAAK,SAAS,SAAS,GAAG;AAC/C,WAAK,eAAe;AACpB,WAAK,YAAY,KAAK,cAAc;AAAA,IACtC,OAAO;AACL,WAAK,cAAc;AACnB,WAAK,YAAY,KAAK,SAAS,SAAS;AAAA,IAC1C;AAAA,EACF;AACF;AAtHqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAHlC,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GANN,aAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,aAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,aAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,aAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,aAmBnB;AAGA;AAAA,EADC,MAAM;AAAA,GArBY,aAsBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAxBY,aAyBnB;AAGA;AAAA,EADC,MAAM;AAAA,GA3BY,aA4BnB;AA5BmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":["EnumEffects"]}
+{"version":3,"sources":["../../../src/elements/rotator/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/rotator/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumEffects {\n  Fade = 'fade',\n  Flip = 'flip',\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n * @ssrsafe yes\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {TypeEffects} effect - The transition effect type.\n * @prop {number} speed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\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-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n * @fires kemet-rotator-mounted - Fired when the rotator is mounted to the DOM\n * @detail {HTMLElement} element - The rotator element\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'active-slide' })\n  activeSlide: number = 0;\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: EnumEffects = EnumEffects.Fade;\n\n  @property({ type: Number })\n  speed: number = 3;\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  width: string = 'auto';\n\n  @state()\n  height: string = 'auto';\n\n  @state()\n  prevSlide!: number | null;\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n\n    emitEvent(this, 'kemet-rotator-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(changed: Map<string, never>) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.speed > 0) {\n          this.nextSlide();\n        }\n      }, this.speed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span part=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    return this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'active' : '';\n      const setPrevClass = this.prevSlide === index ? 'previous' : '';\n\n      return html`\n        <span part=\"slide\" class=\"${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot?.querySelectorAll('[part=\"slide\"]');\n      let tallest = 0;\n\n      slides?.forEach((slide: Element) => {\n        if ((slide as HTMLElement).offsetHeight > tallest) {\n          tallest = (slide as HTMLElement).offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  /**\n   * Rotates to the next slide.\n   * @public\n   * @method nextSlide\n   * @returns {void}\n   */\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\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-rotator-transition-speed: 500ms;\n\n  display: flex;\n}\n\n[part=slide] {\n  pointer-events: none;\n}\n\n.rotator__slide--active {\n  pointer-events: auto;\n}\n\n/* fade effect */\n:host([effect=fade]) [part=rotator] {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n}\n\n:host([effect=fade]) [part=slide] {\n  width: 100%;\n  flex: none;\n  opacity: 0;\n  box-sizing: border-box;\n  transition: all var(--kemet-rotator-transition-speed) ease;\n}\n\n:host([effect=fade]) [part=slide]:not(:first-child) {\n  margin-left: -100%; /* this is the bulk of the overlay trick */\n}\n\n:host([effect=fade]) .active {\n  opacity: 1;\n}\n\n/* flip effect */\n:host([effect=flip]) [part=rotator] {\n  display: flex;\n  position: relative;\n  perspective: 500px;\n}\n\n:host([effect=flip]) [part=slide] {\n  display: block;\n  width: auto;\n  position: absolute;\n  top: -20px;\n  left: 0;\n\n  opacity: 0;\n\n  transform: rotateX(90deg);\n  transform-origin: 0% 0%;\n  transition: all var(--kemet-rotator-transition-speed) ease;\n}\n\n:host([effect=flip]) .active {\n  top: 0;\n  opacity: 1;\n\n  transform: rotateX(0deg);\n}\n\n:host([effect=flip]) .previous {\n  top: 40px;;\n  transform: rotateX(-90deg);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,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,SAAS,kBAAkB;;;AEFpB,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;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AHIR,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,UAAO;AACP,EAAAA,aAAA,UAAO;AAFG,SAAAA;AAAA,GAAA;AA4BZ,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAIE,uBAAsB;AAGtB,oBAAqB,CAAC;AAGtB,kBAAsB;AAGtB,iBAAgB;AAMhB,eAAc;AAGd,iBAAgB;AAGhB,kBAAiB;AAAA;AAAA,EAKjB,eAAe;AAEb,SAAK,YAAY;AAEjB,WAAO,iBAAiB,UAAU,KAAK,cAAc,KAAK,IAAI,CAAC;AAE/D,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,QAAQ,SAA6B;AACnC,UAAM,kBAAkB,CAAC,CAAC,QAAQ,IAAI,OAAO;AAC7C,UAAM,mBAAmB,CAAC,CAAC,QAAQ,IAAI,QAAQ;AAE/C,SAAK,cAAc;AAGnB,QAAI,CAAC,mBAAmB,CAAC,kBAAkB;AACzC,iBAAW,MAAM;AACf,YAAI,KAAK,QAAQ,GAAG;AAClB,eAAK,UAAU;AAAA,QACjB;AAAA,MACF,GAAG,KAAK,QAAQ,GAAI;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,WAAW,SAAS,SAAS,KAAK,KAAK,MAAM;AACnE,UAAM,YAAY,KAAK,WAAW,SAAS,UAAU,KAAK,MAAM,MAAM;AAEtE,WAAO;AAAA,oCACyB,QAAQ,IAAI,SAAS;AAAA,UAC/C,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA,EAG3B;AAAA,EAEA,eAAe;AACb,WAAO,KAAK,SAAS,IAAI,CAAC,SAAS,UAAU;AAC3C,YAAM,iBAAiB,KAAK,gBAAgB,QAAQ,WAAW;AAC/D,YAAM,eAAe,KAAK,cAAc,QAAQ,aAAa;AAE7D,aAAO;AAAA,oCACuB,cAAc,IAAI,YAAY;AAAA,YACtD,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,IAG3B,CAAC;AAAA,EACH;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,WAAW,QAAQ;AAC1B,WAAK,QAAQ,GAAG,KAAK,WAAW;AAEhC,YAAM,SAAS,KAAK,YAAY,iBAAiB,gBAAgB;AACjE,UAAI,UAAU;AAEd,cAAQ,QAAQ,CAAC,UAAmB;AAClC,YAAK,MAAsB,eAAe,SAAS;AACjD,oBAAW,MAAsB;AAAA,QACnC;AAAA,MACF,CAAC;AAED,WAAK,SAAS,GAAG,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAY;AACV,QAAI,KAAK,cAAc,KAAK,SAAS,SAAS,GAAG;AAC/C,WAAK,eAAe;AACpB,WAAK,YAAY,KAAK,cAAc;AAAA,IACtC,OAAO;AACL,WAAK,cAAc;AACnB,WAAK,YAAY,KAAK,SAAS,SAAS;AAAA,IAC1C;AAAA,EACF;AACF;AAtHqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAHlC,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GANN,aAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,aAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,aAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,aAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,aAmBnB;AAGA;AAAA,EADC,MAAM;AAAA,GArBY,aAsBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAxBY,aAyBnB;AAGA;AAAA,EADC,MAAM;AAAA,GA3BY,aA4BnB;AA5BmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":["EnumEffects"]}

package/dist/elements/select/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit from 'lit';
 import { LitElement, TemplateResult } from 'lit';
 import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
-import { d as EnumRoundedSizes, H as HTMLKemetFieldElement } from '../../constants-C4-3KYlX.js';
+import { e as EnumRoundedSizes, H as HTMLKemetFieldElement } from '../../constants-BsAfWV-a.js';
 import KemetSelectOption from '../select-option/index.js';
 import '../icon/index.js';
 import 'lit-html';
@@ -83,6 +83,7 @@ declare class KemetSelect extends LitElement {
     optionElements: NodeListOf<KemetSelectOption>;
     hasFocus: boolean;
     constructor();
+    updated(changedProperties: Map<string, any>): void;
     firstUpdated(): void;
     render(): TemplateResult<1>;
     /**

package/dist/elements/select/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
                 }
@@ -488,6 +484,14 @@ var KemetSelect = class extends LitElement2 {
     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");
@@ -587,6 +591,7 @@ var KemetSelect = class extends LitElement2 {
    */
   handleChange(event) {
     this.value = this.select.value;
+    this.appearance = "neutral" /* Neutral */;
     emitEvent(this, "kemet-select-change", {
       appearance: this.appearance,
       validity: this.select.validity,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/select/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/icon/index.ts","../../../src/elements/icon/styles.css.ts","../../../src/elements/select/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport type HTMLKemetOptionElement from '../select-option';\nimport '../icon';\nimport styles from './styles.css.ts';\n\ninterface IOptions {\n  label: string;\n  value: string;\n  disabled: boolean;\n  selected: boolean;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n * @ssrsafe no - This element queriesAll for child elements which is not supported in SSR.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {EnumAppearances} appearance - The status of the select\n * @prop {boolean} required - Determines whether the field is required\n * @prop {boolean} disabled - Determines whether the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {EnumRoundedSizes} rounded - Displays rounded corners\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 select\n * @csspart option\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea.\n * @cssproperty --kemet-select-border - The border of the textarea.\n * @cssproperty --kemet-select-border-color-error - The border of the error state.\n * @cssproperty --kemet-select-border-color-success - The border of the success state.\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-select-border-filled - The border on filled.\n * @cssproperty --kemet-select-color-filled - The color on filled.\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-select-background-color-error - The error state background color.\n * @cssproperty --kemet-select-background-color-success - The success state background color.\n * @cssproperty --kemet-select-background-color-warning - The warning state background color.\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon.\n *\n * @fires kemet-select-mounted - Fires when the select is mounted\n * @fires kemet-select-focus - Fires when the input receives focus\n * @fires kemet-select-blur - Fires when the input loses focus\n * @fires kemet-select-appearance-change - Fires when there's a change in appearance\n * @fires kemet-select-change - Fires when the select input changes\n *\n */\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = '';\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Array })\n  options: IOptions[] = [];\n\n  @property({ type: String, reflect: true })\n  appearance: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean })\n  multiple: boolean = false;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 18;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\n\n  @property({ reflect: true })\n  rounded?: EnumRoundedSizes;\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  invalid: boolean = false;\n\n  @state()\n  control!: HTMLKemetFieldElement;\n\n  @state()\n  select!: HTMLSelectElement;\n\n  @state()\n  selectedOption!: HTMLOptionElement;\n\n  @state()\n  optionElements!: NodeListOf<HTMLKemetOptionElement>;\n\n  @state()\n  hasFocus: boolean = false;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.control = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.select = this.shadowRoot?.querySelector('select') as HTMLSelectElement;\n    this.selectedOption = this.querySelector('[selected]') as HTMLOptionElement;\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n\n    emitEvent(this, 'kemet-select-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      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions(): TemplateResult<1>[] {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-select-option');\n\n    this.optionElements.forEach((option: HTMLKemetOptionElement) => {\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option part=\"option\" value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n        ${option.label}\n      </option>`,\n    );\n  }\n\n  /**\n   * Generates a dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon name=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-select-focus', { focused: true, element: this });\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-select-blur', { focused: false, element: this });\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.appearance = EnumAppearances.Error;\n      this.control.appearance = EnumAppearances.Error;\n\n      emitEvent(this, 'kemet-select-appearance-change', {\n        status: EnumAppearances.Error,\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange(event: Event) {\n    this.value = this.select.value;\n    emitEvent(this, 'kemet-select-change', {\n      appearance: this.appearance,\n      validity: this.select.validity,\n      element: this,\n      value: (event.target as HTMLSelectElement).value,\n    });\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      // this.appearance = EnumAppearances.Neutral;\n\n      emitEvent(this, 'kemet-select-appearancce-change', {\n        appearance: EnumAppearances.Neutral,\n        validity: this.select.validity,\n        element: this,\n        value: (event.target as HTMLSelectElement).value,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.appearance = EnumAppearances.Error;\n\n    emitEvent(this, 'kemet-select-appearance-change', {\n      appearance: EnumAppearances.Error,\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\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 { html, HTMLTemplateResult, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n// Request queue with concurrency limit\nconst MAX_CONCURRENT_REQUESTS = 10;\nconst requestQueue: Array<() => void> = [];\nlet activeRequests = 0;\n\nfunction queueRequest(callback: () => void) {\n  if (activeRequests < MAX_CONCURRENT_REQUESTS) {\n    activeRequests++;\n    callback();\n  } else {\n    requestQueue.push(callback);\n  }\n}\n\nfunction requestComplete() {\n  activeRequests--;\n  if (requestQueue.length > 0) {\n    const nextRequest = requestQueue.shift();\n    if (nextRequest) {\n      activeRequests++;\n      nextRequest();\n    }\n  }\n}\n\nexport enum EnumLibrary {\n  FONTAWESOME = 'fontawesome',\n  BOOTSTRAP = 'bootstrap',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-icon\n * @summary An element that represents an icon from a predefined set of open sourced icons.\n * @ssrsafe yes\n *\n * @prop {string} name - The name of the icon to reference.\n * @prop {string} library - The library of icons to use. Values include: (bootstrap | fontawesome)\n * @prop {string} family - The family of icons to use. The family is relative to the library being used. Font awesome values include: (regular | solid | brand)\n * @prop {string} version - The version of the icon library to use. Use latest to grab the most recent version.\n * @prop {number} size - The width and height of the icon in pixels.\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-icon-mounted - Fired when the icon is mounted to the DOM\n * @detail {HTMLElement} element - The icon element\n *\n */\n\n@customElement('kemet-icon')\nexport default class KemetIcon extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'house';\n\n  @property({ type: String })\n  library: string = 'bootstrap';\n\n  @property({ type: String })\n  family: string = 'regular';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: String })\n  version?: 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  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /** @internal */\n  @state()\n  private url: string = 'https://unpkg.com/bootstrap-icons@latest/icons';\n\n  /** @internal */\n  private isVisible: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Load icon when connected to DOM\n    this.updateUrl();\n    if (!this.svg) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n  }\n\n  updated() {\n    this.updateUrl();\n    this.updateSize();\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-icon-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    // Return the svg if it's loaded, otherwise show placeholder\n    if (this.svg) {\n      return this.svg;\n    }\n\n    // If not loaded, trigger loading\n    if (!this.isVisible) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n\n    return html`<svg part=\"svg\" width=\"${this.size}\" height=\"${this.size}\" viewBox=\"0 0 16 16\"></svg>`;\n  }\n\n  /** Public method to force icon loading */\n  public loadIcon() {\n    this.isVisible = true;\n    this.setIcon();\n  }\n\n  async setIcon() {\n    if (!this.isVisible) return;\n\n    let iconResolver = iconCache.get(`${this.family}/${this.name}`);\n\n    if (!iconResolver) {\n      iconResolver = this.resolveIcon();\n      iconCache.set(`${this.family}/${this.name}`, iconResolver);\n    }\n\n    const svg = await iconResolver;\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(`${this.family}/${this.name}`);\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n    } else if (typeof SVGSVGElement !== 'undefined' && svg instanceof SVGSVGElement) {\n      // Clone the SVG so each icon instance gets its own copy\n      this.svg = svg.cloneNode(true) as SVGSVGElement;\n    }\n  }\n\n  private updateUrl() {\n    switch (this.library) {\n      case EnumLibrary.FONTAWESOME:\n        this.version = this.version || '7.3.1';\n        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;\n        break;\n      case EnumLibrary.BOOTSTRAP:\n        this.version = this.version || '1.11.3';\n        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;\n        break;\n    }\n  }\n\n  private async resolveIcon(): Promise<SVGResult> {\n    return new Promise((resolve) => {\n      queueRequest(async () => {\n        let fileData: Response;\n        let fetchURL: string = `${this.url}/${this.family}/${this.name}.svg`;\n\n        switch (this.library) {\n          case EnumLibrary.FONTAWESOME:\n            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;\n            break;\n          case EnumLibrary.BOOTSTRAP:\n            fetchURL = `${this.url}/${this.name}.svg`;\n            break;\n        }\n\n        try {\n          fileData = await fetch(fetchURL);\n          if (!fileData.ok) {\n            requestComplete();\n            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);\n            return;\n          }\n        } catch {\n          requestComplete();\n          resolve(RETRYABLE_ERROR);\n          return;\n        }\n\n        try {\n          const div = document.createElement('div');\n          div.innerHTML = await fileData.text();\n\n          const svg = div.firstElementChild;\n          if (svg?.tagName?.toLowerCase() !== 'svg') {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          if (!parser) parser = new DOMParser();\n          const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n          const svgEl = doc.body.querySelector('svg');\n          if (!svgEl) {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          svgEl.part.add('svg');\n          svgEl.setAttribute('width', `${this.size}px`);\n          svgEl.setAttribute('height', `${this.size}px`);\n\n          requestComplete();\n          resolve(document.adoptNode(svgEl));\n        } catch {\n          requestComplete();\n          resolve(CACHEABLE_ERROR);\n        }\n      });\n    });\n  }\n\n  private updateSize() {\n    if (this.svg) {\n      const svg = this.svg as SVGElement;\n      svg.setAttribute('width', `${this.size}px`);\n      svg.setAttribute('height', `${this.size}px`);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-icon': KemetIcon\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-select-padding: 1rem;\n  --kemet-select-color: var(--kemet-color-font-base);\n  --kemet-select-font-color: var(--kemet-color-font-base);\n  --kemet-select-border: 1px solid var(--kemet-select-color);\n  --kemet-select-border-radius: 0;\n  --kemet-select-icon-gap: 1rem;\n\n  /* private */\n  --_kemet-select-background-color: transparent;\n\n\n  position: relative;\n  display: block;\n}\n\nselect {\n  color: var(--kemet-select-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  padding: var(--kemet-select-padding);\n  border: var(--kemet-select-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-select-background-color);\n  border-radius: var(--kemet-select-border-radius);\n}\n\noption {\n  color: var(--kemet-color-font-base);\n  display: flex;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n:host([polarity=dark]) {\n  --kemet-select-color: var(--kemet-color-font-inverse-base);\n  --kemet-select-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --kemet-select-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-select-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-select-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-select-color: var(--kemet-color-background-warning);\n}\n\n:host([disabled]) {\n  --kemet-select-font-color: var(--kemet-color-font-disabled);\n  --kemet-select-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-select-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-select-background-color: var(--kemet-color-background-inverse);\n  --kemet-select-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-link);\n}\n\n\nkemet-icon {\n  color: var(--kemet-select-font-color);\n  position: absolute;\n  right: var(--kemet-select-icon-gap);\n  top: 50%;\n  transform: translateY(-50%);\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/select/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/icon/index.ts","../../../src/elements/icon/styles.css.ts","../../../src/elements/select/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport type HTMLKemetOptionElement from '../select-option';\nimport '../icon';\nimport styles from './styles.css.ts';\n\ninterface IOptions {\n  label: string;\n  value: string;\n  disabled: boolean;\n  selected: boolean;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n * @ssrsafe no - This element queriesAll for child elements which is not supported in SSR.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {EnumAppearances} appearance - The status of the select\n * @prop {boolean} required - Determines whether the field is required\n * @prop {boolean} disabled - Determines whether the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {EnumRoundedSizes} rounded - Displays rounded corners\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 select\n * @csspart option\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea.\n * @cssproperty --kemet-select-border - The border of the textarea.\n * @cssproperty --kemet-select-border-color-error - The border of the error state.\n * @cssproperty --kemet-select-border-color-success - The border of the success state.\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-select-border-filled - The border on filled.\n * @cssproperty --kemet-select-color-filled - The color on filled.\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-select-background-color-error - The error state background color.\n * @cssproperty --kemet-select-background-color-success - The success state background color.\n * @cssproperty --kemet-select-background-color-warning - The warning state background color.\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon.\n *\n * @fires kemet-select-mounted - Fires when the select is mounted\n * @fires kemet-select-focus - Fires when the input receives focus\n * @fires kemet-select-blur - Fires when the input loses focus\n * @fires kemet-select-appearance-change - Fires when there's a change in appearance\n * @fires kemet-select-change - Fires when the select input changes\n *\n */\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = '';\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Array })\n  options: IOptions[] = [];\n\n  @property({ type: String, reflect: true })\n  appearance: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean })\n  multiple: boolean = false;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 18;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\n\n  @property({ reflect: true })\n  rounded?: EnumRoundedSizes;\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  invalid: boolean = false;\n\n  @state()\n  control!: HTMLKemetFieldElement;\n\n  @state()\n  select!: HTMLSelectElement;\n\n  @state()\n  selectedOption!: HTMLOptionElement;\n\n  @state()\n  optionElements!: NodeListOf<HTMLKemetOptionElement>;\n\n  @state()\n  hasFocus: boolean = false;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('appearance')) {\n      emitEvent(this, 'kemet-select-appearance-change', {\n        appearance: this.appearance,\n        element: this,\n      });\n    }\n  }\n\n  firstUpdated() {\n    this.control = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.select = this.shadowRoot?.querySelector('select') as HTMLSelectElement;\n    this.selectedOption = this.querySelector('[selected]') as HTMLOptionElement;\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n\n    emitEvent(this, 'kemet-select-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      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions(): TemplateResult<1>[] {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-select-option');\n\n    this.optionElements.forEach((option: HTMLKemetOptionElement) => {\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option part=\"option\" value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n        ${option.label}\n      </option>`,\n    );\n  }\n\n  /**\n   * Generates a dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon name=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-select-focus', { focused: true, element: this });\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-select-blur', { focused: false, element: this });\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.appearance = EnumAppearances.Error;\n      this.control.appearance = EnumAppearances.Error;\n\n      emitEvent(this, 'kemet-select-appearance-change', {\n        status: EnumAppearances.Error,\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange(event: Event) {\n    this.value = this.select.value;\n    this.appearance = EnumAppearances.Neutral;\n\n    emitEvent(this, 'kemet-select-change', {\n      appearance: this.appearance,\n      validity: this.select.validity,\n      element: this,\n      value: (event.target as HTMLSelectElement).value,\n    });\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      // this.appearance = EnumAppearances.Neutral;\n\n      emitEvent(this, 'kemet-select-appearancce-change', {\n        appearance: EnumAppearances.Neutral,\n        validity: this.select.validity,\n        element: this,\n        value: (event.target as HTMLSelectElement).value,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.appearance = EnumAppearances.Error;\n\n    emitEvent(this, 'kemet-select-appearance-change', {\n      appearance: EnumAppearances.Error,\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\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 { html, HTMLTemplateResult, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n// Request queue with concurrency limit\nconst MAX_CONCURRENT_REQUESTS = 10;\nconst requestQueue: Array<() => void> = [];\nlet activeRequests = 0;\n\nfunction queueRequest(callback: () => void) {\n  if (activeRequests < MAX_CONCURRENT_REQUESTS) {\n    activeRequests++;\n    callback();\n  } else {\n    requestQueue.push(callback);\n  }\n}\n\nfunction requestComplete() {\n  activeRequests--;\n  if (requestQueue.length > 0) {\n    const nextRequest = requestQueue.shift();\n    if (nextRequest) {\n      activeRequests++;\n      nextRequest();\n    }\n  }\n}\n\nexport enum EnumLibrary {\n  FONTAWESOME = 'fontawesome',\n  BOOTSTRAP = 'bootstrap',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-icon\n * @summary An element that represents an icon from a predefined set of open sourced icons.\n * @ssrsafe yes\n *\n * @prop {string} name - The name of the icon to reference.\n * @prop {string} library - The library of icons to use. Values include: (bootstrap | fontawesome)\n * @prop {string} family - The family of icons to use. The family is relative to the library being used. Font awesome values include: (regular | solid | brand)\n * @prop {string} version - The version of the icon library to use. Use latest to grab the most recent version.\n * @prop {number} size - The width and height of the icon in pixels.\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-icon-mounted - Fired when the icon is mounted to the DOM\n * @detail {HTMLElement} element - The icon element\n *\n */\n\n@customElement('kemet-icon')\nexport default class KemetIcon extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'house';\n\n  @property({ type: String })\n  library: string = 'bootstrap';\n\n  @property({ type: String })\n  family: string = 'regular';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: String })\n  version?: 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  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /** @internal */\n  @state()\n  private url: string = 'https://unpkg.com/bootstrap-icons@latest/icons';\n\n  /** @internal */\n  private isVisible: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Load icon when connected to DOM\n    this.updateUrl();\n    if (!this.svg) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n  }\n\n  updated() {\n    this.updateUrl();\n    this.updateSize();\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-icon-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    // Return the svg if it's loaded, otherwise show placeholder\n    if (this.svg) {\n      return this.svg;\n    }\n\n    // If not loaded, trigger loading\n    if (!this.isVisible) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n\n    return html`<svg part=\"svg\" width=\"${this.size}\" height=\"${this.size}\" viewBox=\"0 0 16 16\"></svg>`;\n  }\n\n  /** Public method to force icon loading */\n  public loadIcon() {\n    this.isVisible = true;\n    this.setIcon();\n  }\n\n  async setIcon() {\n    if (!this.isVisible) return;\n\n    let iconResolver = iconCache.get(`${this.family}/${this.name}`);\n\n    if (!iconResolver) {\n      iconResolver = this.resolveIcon();\n      iconCache.set(`${this.family}/${this.name}`, iconResolver);\n    }\n\n    const svg = await iconResolver;\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(`${this.family}/${this.name}`);\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n    } else if (typeof SVGSVGElement !== 'undefined' && svg instanceof SVGSVGElement) {\n      // Clone the SVG so each icon instance gets its own copy\n      this.svg = svg.cloneNode(true) as SVGSVGElement;\n    }\n  }\n\n  private updateUrl() {\n    switch (this.library) {\n      case EnumLibrary.FONTAWESOME:\n        this.version = this.version || '7.3.1';\n        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;\n        break;\n      case EnumLibrary.BOOTSTRAP:\n        this.version = this.version || '1.11.3';\n        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;\n        break;\n    }\n  }\n\n  private async resolveIcon(): Promise<SVGResult> {\n    return new Promise((resolve) => {\n      queueRequest(async () => {\n        let fileData: Response;\n        let fetchURL: string = `${this.url}/${this.family}/${this.name}.svg`;\n\n        switch (this.library) {\n          case EnumLibrary.FONTAWESOME:\n            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;\n            break;\n          case EnumLibrary.BOOTSTRAP:\n            fetchURL = `${this.url}/${this.name}.svg`;\n            break;\n        }\n\n        try {\n          fileData = await fetch(fetchURL);\n          if (!fileData.ok) {\n            requestComplete();\n            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);\n            return;\n          }\n        } catch {\n          requestComplete();\n          resolve(RETRYABLE_ERROR);\n          return;\n        }\n\n        try {\n          const div = document.createElement('div');\n          div.innerHTML = await fileData.text();\n\n          const svg = div.firstElementChild;\n          if (svg?.tagName?.toLowerCase() !== 'svg') {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          if (!parser) parser = new DOMParser();\n          const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n          const svgEl = doc.body.querySelector('svg');\n          if (!svgEl) {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          svgEl.part.add('svg');\n          svgEl.setAttribute('width', `${this.size}px`);\n          svgEl.setAttribute('height', `${this.size}px`);\n\n          requestComplete();\n          resolve(document.adoptNode(svgEl));\n        } catch {\n          requestComplete();\n          resolve(CACHEABLE_ERROR);\n        }\n      });\n    });\n  }\n\n  private updateSize() {\n    if (this.svg) {\n      const svg = this.svg as SVGElement;\n      svg.setAttribute('width', `${this.size}px`);\n      svg.setAttribute('height', `${this.size}px`);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-icon': KemetIcon\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-select-padding: 1rem;\n  --kemet-select-color: var(--kemet-color-font-base);\n  --kemet-select-font-color: var(--kemet-color-font-base);\n  --kemet-select-border: 1px solid var(--kemet-select-color);\n  --kemet-select-border-radius: 0;\n  --kemet-select-icon-gap: 1rem;\n\n  /* private */\n  --_kemet-select-background-color: transparent;\n\n\n  position: relative;\n  display: block;\n}\n\nselect {\n  color: var(--kemet-select-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  padding: var(--kemet-select-padding);\n  border: var(--kemet-select-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-select-background-color);\n  border-radius: var(--kemet-select-border-radius);\n}\n\noption {\n  color: var(--kemet-color-font-base);\n  display: flex;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n:host([polarity=dark]) {\n  --kemet-select-color: var(--kemet-color-font-inverse-base);\n  --kemet-select-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --kemet-select-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-select-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-select-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-select-color: var(--kemet-color-background-warning);\n}\n\n:host([disabled]) {\n  --kemet-select-font-color: var(--kemet-color-font-disabled);\n  --kemet-select-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-select-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-select-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-select-background-color: var(--kemet-color-background-inverse);\n  --kemet-select-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-select-background-color: var(--kemet-color-font-link);\n}\n\n\nkemet-icon {\n  color: var(--kemet-select-font-color);\n  position: absolute;\n  right: var(--kemet-select-icon-gap);\n  top: 50%;\n  transform: translateY(-50%);\n}\n`;\n"],"mappings":"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","names":["html","LitElement","css","styles_css_default","LitElement","html","styles_css_default"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/sortable/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/sortable/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../../utilities/events';\nimport type HTMLKemetSortableItemElement from '../sortable-item';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceSortableDragDetails {\n  event: DragEvent,\n  current: HTMLKemetSortableItemElement,\n  all: NodeListOf<HTMLKemetSortableItemElement>,\n}\n\nconst getMouseOffset = (event: DragEvent) => {\n  const target = event.target as HTMLElement;\n  const targetRect = target.getBoundingClientRect();\n  return {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n};\n\nconst getElementVerticalCenter = (element: HTMLElement) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n * @ssrsafe no - This component uses a drag and drop polyfill which is not supported on the server.\n *\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-drag-start - Fires when an item starts to be moved.\n * @event kemet-drag-over - Fires when an item is moving to a new spot.\n * @event kemet-drag-end - Fires when an item has been moved to a new spot.\n *\n * @fires kemet-sortable-mounted - Fired when the sortable is mounted to the DOM\n * @detail {HTMLElement} element - The sortable element\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [styles];\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  sortableItem!: HTMLKemetSortableItemElement;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n\n    emitEvent(this, 'kemet-sortable-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></slot>`;\n  }\n\n  handleDragStart(event: DragEvent) {\n    this.sortableItem = event.target as HTMLKemetSortableItemElement;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n\n      emitEvent(this, 'kemet-drag-start', {\n        event,\n        current: this.sortableItem,\n        all: this.querySelectorAll('kemet-sortable-item'),\n      });\n    }, 0);\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n\n    const target = event.target as HTMLKemetSortableItemElement;\n\n    emitEvent(this, 'kemet-drag-over', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event: DragEvent) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\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  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/sortable/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/sortable/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../../utilities/events';\nimport type HTMLKemetSortableItemElement from '../sortable-item';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceSortableDragDetails {\n  event: DragEvent,\n  current: HTMLKemetSortableItemElement,\n  all: NodeListOf<HTMLKemetSortableItemElement>,\n}\n\nconst getMouseOffset = (event: DragEvent) => {\n  const target = event.target as HTMLElement;\n  const targetRect = target.getBoundingClientRect();\n  return {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n};\n\nconst getElementVerticalCenter = (element: HTMLElement) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n * @ssrsafe no - This component uses a drag and drop polyfill which is not supported on the server.\n *\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-drag-start - Fires when an item starts to be moved.\n * @event kemet-drag-over - Fires when an item is moving to a new spot.\n * @event kemet-drag-end - Fires when an item has been moved to a new spot.\n *\n * @fires kemet-sortable-mounted - Fired when the sortable is mounted to the DOM\n * @detail {HTMLElement} element - The sortable element\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [styles];\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  sortableItem!: HTMLKemetSortableItemElement;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n\n    emitEvent(this, 'kemet-sortable-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></slot>`;\n  }\n\n  handleDragStart(event: DragEvent) {\n    this.sortableItem = event.target as HTMLKemetSortableItemElement;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n\n      emitEvent(this, 'kemet-drag-start', {\n        event,\n        current: this.sortableItem,\n        all: this.querySelectorAll('kemet-sortable-item'),\n      });\n    }, 0);\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n\n    const target = event.target as HTMLKemetSortableItemElement;\n\n    emitEvent(this, 'kemet-drag-over', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event: DragEvent) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\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  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n}\n`;\n"],"mappings":"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","names":[]}