kemet-ui 5.0.4 → 5.0.5

package/dist/elements/field/index.js

@@ -22,6 +22,7 @@ import { css } from "lit";
 var styles_css_default = css`:host {
   /* private */
   --_kemet-field-message-color: inherit;
+  --_kemet-field-message-display: none;
 
   display: block;
 }
@@ -43,27 +44,35 @@ label span {
   margin-bottom: 0.8rem;
 }
 
-.message {
+[part=message] {
+  display: var(--_kemet-field-message-display);
   color: var(--_kemet-field-message-color);
   font-size: 0.9rem;
   line-height: 1;
-  display: block;
   margin-top: 0.8rem;
 }
 
-:host([appearance=error]) .message {
+:host([appearance]) {
+  --_kemet-field-message-display: block;
+}
+
+:host([appearance=neutral]) {
+  --_kemet-field-message-display: none;
+}
+
+:host([appearance=error]) {
   --_kemet-field-message-color: var(--kemet-color-font-error);
 }
 
-:host([appearance=success]) .message {
+:host([appearance=success]) {
   --_kemet-field-message-color: var(--kemet-color-font-success);
 }
 
-:host([appearance=warning]) .message {
+:host([appearance=warning]) {
   --_kemet-field-message-color: var(--kemet-color-font-warning);
 }
 
-:host([appearance=link]) .message {
+:host([appearance=link]) {
   --_kemet-field-message-color: var(--kemet-color-font-link);
 }
 `;
@@ -79,7 +88,6 @@ var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
 var HTMLKemetFieldElement = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.appearance = "neutral" /* Neutral */;
     this.errorIcon = "exclamation-triangle-fill";
     this.successIcon = "check-lg";
     this.dom = "initializing";
@@ -87,6 +95,10 @@ var HTMLKemetFieldElement = class extends LitElement {
   firstUpdated() {
     this.slotInput = this.querySelector('[slot="input"]');
     this.slotCombo = this.querySelector('[slot="combo"]');
+    this.slotInput?.addEventListener("kemet-input-appearance-change", (event) => this.handleAppearance(event));
+    this.slotInput?.addEventListener("kemet-select-appearance-change", (event) => this.handleAppearance(event));
+    this.slotInput?.addEventListener("kemet-textarea-appearance-change", (event) => this.handleAppearance(event));
+    this.slotCombo?.addEventListener("kemet-select-appearance-change", (event) => this.handleAppearance(event));
     this.slotCombo?.addEventListener("kemet-input-combo-selection", (event) => this.handleSelection(event));
     if (this.slotInput.value) {
       this.length = this.slotInput.value.length;
@@ -103,21 +115,16 @@ var HTMLKemetFieldElement = class extends LitElement {
     this.dom = "mounted";
   }
   render() {
+    this.appearance = this.appearance ?? "neutral" /* Neutral */;
     return html`
       <label for="${this.slug}" id="${this.slug}-label" part="label">
         <span part="text">${this.label}</span>
         <slot name="input"></slot>
       </label>
-      ${this.makeStatusMessage()}
+     ${this.appearance === "neutral" /* Neutral */ ? null : html`<span part="message">${this.message}</span>`}
       <slot name="component"></slot>
     `;
   }
-  makeStatusMessage() {
-    if (this.appearance !== "neutral") {
-      return html`<span class="message" part="message">${this.message}</span>`;
-    }
-    return null;
-  }
   handleFocused(event) {
     this.focused = event.detail;
     if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {
@@ -125,7 +132,9 @@ var HTMLKemetFieldElement = class extends LitElement {
     }
   }
   handleAppearance(event) {
-    this.appearance = event.detail.appearance;
+    const detail = event.detail;
+    const appearance = !!detail.appearance ? detail.appearance : "neutral";
+    this.appearance = appearance;
   }
   handleInput(event) {
     this.length = event.detail.value.length ?? 0;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/field/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/field/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumAppearances } from '../../utilities/constants';\nimport HTMLKemetComboElement from '../combo';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n *\n * @tagname kemet-field\n * @summary Used in combination with Input, Select, and Textarea, to make a Field.\n * @ssrsafe yes\n *\n * @prop {string} slug - Uniquely identifies the control. Use the same slug for slotted subcomponents.\n * @prop {string} label - The label text\n * @prop {string} message - The validation message for error or success\n * @prop {boolean} focused - Determines if the containing input is focused\n * @prop {EnumAppearances} appearance - The appearance of the input\n * @prop {boolean} filled - Is true when the containing input has a value\n * @prop {number} length - The length of the containing input\n * @prop {boolean} disabled - Determines the disabled state of the control\n * @prop {string} errorIcon - The icon while in an error or warning state\n * @prop {string} successIcon - The icon while in a success state\n *\n * @slot component - Allows subcomponents of the field to display.\n *\n * @csspart label - The label of the field.\n * @csspart message - The validation message of the field.\n * @csspart text - The text in the label.\n *\n * @event kemet-input - Fires when input fires on the input slot\n *\n */\n\n@customElement('kemet-field')\nexport default class HTMLKemetFieldElement extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug!: string;\n\n  @property({ type: String })\n  label!: string;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Boolean, reflect: true })\n  focused!: boolean;\n\n  @property({ type: String, reflect: true })\n  appearance: EnumAppearances = EnumAppearances.Neutral;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: Number })\n  length!: number;\n\n  @property({ type: Boolean, reflect: true })\n  disabled!: boolean;\n\n  @property({ type: String, attribute: 'error-icon' })\n  errorIcon: string = 'exclamation-triangle-fill';\n\n  @property({ type: String, attribute: 'success-icon' })\n  successIcon: string = 'check-lg';\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  slotInput!: HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n  @state()\n  slotCombo!: HTMLKemetComboElement;\n\n  firstUpdated() {\n    this.slotInput = this.querySelector('[slot=\"input\"]') as HTMLKemetInputElement | HTMLKemetTextareaElement;\n    this.slotCombo = this.querySelector('[slot=\"combo\"]') as HTMLKemetComboElement;\n\n    // TODO: trace what components should be listened to\n    // this.slotInput.addEventListener('kemet-focus', (event: Event) => this.handleFocused(event));\n    // this.slotInput.addEventListener('kemet-status-change', (event: Event) => this.handleAppearance(event));\n    // this.slotInput.addEventListener('kemet-input', (event: Event) => this.handleInput(event));\n    this.slotCombo?.addEventListener('kemet-input-combo-selection', (event: Event) => this.handleSelection(event));\n\n\n    if (this.slotInput.value) {\n      this.length = this.slotInput.value.length;\n    } else {\n      this.length = 0;\n    }\n\n    emitEvent(this, 'kemet-field-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 for=\"${this.slug}\" id=\"${this.slug}-label\" part=\"label\">\n        <span part=\"text\">${this.label}</span>\n        <slot name=\"input\"></slot>\n      </label>\n      ${this.makeStatusMessage()}\n      <slot name=\"component\"></slot>\n    `;\n  }\n\n  makeStatusMessage() {\n    if (this.appearance !== 'neutral') {\n      return html`<span class=\"message\" part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  handleFocused(event: Event) {\n    this.focused = (event as CustomEvent).detail;\n\n    if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {\n      this.slotCombo.show = false;\n    }\n  }\n\n  handleAppearance(event: Event) {\n    this.appearance = (event as CustomEvent).detail.appearance;\n  }\n\n  handleInput(event: Event) {\n    this.length = (event as CustomEvent).detail.value.length ?? 0;\n    this.filled = (event as CustomEvent).detail.value !== '';\n  }\n\n  handleSelection(event: Event) {\n    this.slotInput.setAttribute('aria-activedescendant', (event as CustomEvent).detail);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-field': HTMLKemetFieldElement\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* private */\n  --_kemet-field-message-color: inherit;\n\n  display: block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  position: relative;\n  display: block;\n}\n\nlabel span {\n  color: inherit;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.8rem;\n}\n\n.message {\n  color: var(--_kemet-field-message-color);\n  font-size: 0.9rem;\n  line-height: 1;\n  display: block;\n  margin-top: 0.8rem;\n}\n\n:host([appearance=error]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-link);\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/field/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/field/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumAppearances } from '../../utilities/constants';\nimport HTMLKemetComboElement from '../combo';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n *\n * @tagname kemet-field\n * @summary Used in combination with Input, Select, and Textarea, to make a Field.\n * @ssrsafe yes\n *\n * @prop {string} slug - Uniquely identifies the control. Use the same slug for slotted subcomponents.\n * @prop {string} label - The label text\n * @prop {string} message - The validation message for error or success\n * @prop {boolean} focused - Determines if the containing input is focused\n * @prop {EnumAppearances} appearance - The appearance of the input\n * @prop {boolean} filled - Is true when the containing input has a value\n * @prop {number} length - The length of the containing input\n * @prop {boolean} disabled - Determines the disabled state of the control\n * @prop {string} errorIcon - The icon while in an error or warning state\n * @prop {string} successIcon - The icon while in a success state\n *\n * @slot component - Allows subcomponents of the field to display.\n *\n * @csspart label - The label of the field.\n * @csspart message - The validation message of the field.\n * @csspart text - The text in the label.\n *\n * @event kemet-input - Fires when input fires on the input slot\n *\n */\n\n@customElement('kemet-field')\nexport default class HTMLKemetFieldElement extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug!: string;\n\n  @property({ type: String })\n  label!: string;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Boolean, reflect: true })\n  focused!: boolean;\n\n  @property({ type: String, reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: Number })\n  length!: number;\n\n  @property({ type: Boolean, reflect: true })\n  disabled!: boolean;\n\n  @property({ type: String, attribute: 'error-icon' })\n  errorIcon: string = 'exclamation-triangle-fill';\n\n  @property({ type: String, attribute: 'success-icon' })\n  successIcon: string = 'check-lg';\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  slotInput!: HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n  @state()\n  slotCombo!: HTMLKemetComboElement;\n\n  firstUpdated() {\n    this.slotInput = this.querySelector('[slot=\"input\"]') as HTMLKemetInputElement | HTMLKemetTextareaElement;\n    this.slotCombo = this.querySelector('[slot=\"combo\"]') as HTMLKemetComboElement;\n\n    // this.slotInput.addEventListener('kemet-focus', (event: Event) => this.handleFocused(event));\n    this.slotInput?.addEventListener('kemet-input-appearance-change', (event: Event) => this.handleAppearance(event));\n    this.slotInput?.addEventListener('kemet-select-appearance-change', (event: Event) => this.handleAppearance(event));\n    this.slotInput?.addEventListener('kemet-textarea-appearance-change', (event: Event) => this.handleAppearance(event));\n    this.slotCombo?.addEventListener('kemet-select-appearance-change', (event: Event) => this.handleAppearance(event));\n    this.slotCombo?.addEventListener('kemet-input-combo-selection', (event: Event) => this.handleSelection(event));\n\n\n    if (this.slotInput.value) {\n      this.length = this.slotInput.value.length;\n    } else {\n      this.length = 0;\n    }\n\n    emitEvent(this, 'kemet-field-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    this.appearance = this.appearance ?? EnumAppearances.Neutral;\n    return html`\n      <label for=\"${this.slug}\" id=\"${this.slug}-label\" part=\"label\">\n        <span part=\"text\">${this.label}</span>\n        <slot name=\"input\"></slot>\n      </label>\n     ${this.appearance === EnumAppearances.Neutral\n      ? null\n      : html`<span part=\"message\">${this.message}</span>`}\n      <slot name=\"component\"></slot>\n    `;\n  }\n\n  handleFocused(event: Event) {\n    this.focused = (event as CustomEvent).detail;\n\n    if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {\n      this.slotCombo.show = false;\n    }\n  }\n\n  handleAppearance(event: Event) {\n    const detail = (event as CustomEvent).detail;\n    const appearance = !!detail.appearance ? detail.appearance : 'neutral';\n    this.appearance = appearance;\n  }\n\n  handleInput(event: Event) {\n    this.length = (event as CustomEvent).detail.value.length ?? 0;\n    this.filled = (event as CustomEvent).detail.value !== '';\n  }\n\n  handleSelection(event: Event) {\n    this.slotInput.setAttribute('aria-activedescendant', (event as CustomEvent).detail);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-field': HTMLKemetFieldElement\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* private */\n  --_kemet-field-message-color: inherit;\n  --_kemet-field-message-display: none;\n\n  display: block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  position: relative;\n  display: block;\n}\n\nlabel span {\n  color: inherit;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.8rem;\n}\n\n[part=message] {\n  display: var(--_kemet-field-message-display);\n  color: var(--_kemet-field-message-color);\n  font-size: 0.9rem;\n  line-height: 1;\n  margin-top: 0.8rem;\n}\n\n:host([appearance]) {\n  --_kemet-field-message-display: block;\n}\n\n:host([appearance=neutral]) {\n  --_kemet-field-message-display: none;\n}\n\n:host([appearance=error]) {\n  --_kemet-field-message-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --_kemet-field-message-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-field-message-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --_kemet-field-message-color: var(--kemet-color-font-link);\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/elements/field/styles.css.js

@@ -3,6 +3,7 @@ import { css } from "lit";
 var styles_css_default = css`:host {
   /* private */
   --_kemet-field-message-color: inherit;
+  --_kemet-field-message-display: none;
 
   display: block;
 }
@@ -24,27 +25,35 @@ label span {
   margin-bottom: 0.8rem;
 }
 
-.message {
+[part=message] {
+  display: var(--_kemet-field-message-display);
   color: var(--_kemet-field-message-color);
   font-size: 0.9rem;
   line-height: 1;
-  display: block;
   margin-top: 0.8rem;
 }
 
-:host([appearance=error]) .message {
+:host([appearance]) {
+  --_kemet-field-message-display: block;
+}
+
+:host([appearance=neutral]) {
+  --_kemet-field-message-display: none;
+}
+
+:host([appearance=error]) {
   --_kemet-field-message-color: var(--kemet-color-font-error);
 }
 
-:host([appearance=success]) .message {
+:host([appearance=success]) {
   --_kemet-field-message-color: var(--kemet-color-font-success);
 }
 
-:host([appearance=warning]) .message {
+:host([appearance=warning]) {
   --_kemet-field-message-color: var(--kemet-color-font-warning);
 }
 
-:host([appearance=link]) .message {
+:host([appearance=link]) {
   --_kemet-field-message-color: var(--kemet-color-font-link);
 }
 `;

package/dist/elements/field/styles.css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/field/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* private */\n  --_kemet-field-message-color: inherit;\n\n  display: block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  position: relative;\n  display: block;\n}\n\nlabel span {\n  color: inherit;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.8rem;\n}\n\n.message {\n  color: var(--_kemet-field-message-color);\n  font-size: 0.9rem;\n  line-height: 1;\n  display: block;\n  margin-top: 0.8rem;\n}\n\n:host([appearance=error]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-link);\n}\n`;\n"],"mappings":";AAAA,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;","names":[]}
+{"version":3,"sources":["../../../src/elements/field/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* private */\n  --_kemet-field-message-color: inherit;\n  --_kemet-field-message-display: none;\n\n  display: block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  position: relative;\n  display: block;\n}\n\nlabel span {\n  color: inherit;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.8rem;\n}\n\n[part=message] {\n  display: var(--_kemet-field-message-display);\n  color: var(--_kemet-field-message-color);\n  font-size: 0.9rem;\n  line-height: 1;\n  margin-top: 0.8rem;\n}\n\n:host([appearance]) {\n  --_kemet-field-message-display: block;\n}\n\n:host([appearance=neutral]) {\n  --_kemet-field-message-display: none;\n}\n\n:host([appearance=error]) {\n  --_kemet-field-message-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --_kemet-field-message-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-field-message-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --_kemet-field-message-color: var(--kemet-color-font-link);\n}\n`;\n"],"mappings":";AAAA,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;","names":[]}

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

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { d as EnumRoundedSizes } from '../../constants-C4-3KYlX.js';
+import { e as EnumRoundedSizes } from '../../constants-BsAfWV-a.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/flipcard/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/flipcard/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state, query } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard\n * @summary A card that has a front and back side which can be flipped.\n * @ssrsafe yes\n *\n * @prop {string} axis\n * @prop {boolean} flipped\n * @prop {boolean} flipOnHover\n * @prop {string} height\n * @prop {boolean} measure\n * @prop {EnumRoundedSizes} rounded - The border radius of the card\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 * @slot front - The front of the card.\n * @slot back - The back of the card.\n *\n * @csspart front - The front of the card.\n * @csspart back - The back of the card.\n * @csspart wrapper - A container for both front and back of the card.\n *\n * @cssproperty --kemet-flipcard-width - The width of the card.\n * @cssproperty --kemet-flipcard-height - The height of the card.\n * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card.\n * @cssproperty --kemet-flipcard-border-radius - The border radius of the card.\n * @cssproperty --kemet-flipcard-border - The border of the card.\n *\n * @fires kemet-flipcard-mounted - Fired when the flipcard is mounted to the DOM\n * @detail {HTMLElement} element - The flipcard element\n *\n */\n\n@customElement('kemet-flipcard')\nexport default class KemetFlipcard extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  axis: string = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  flipped: boolean = false;\n\n  @property({ type: Boolean, attribute: 'flip-on-hover' })\n  flipOnHover: boolean = false;\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  @property({ type: String, 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  @query('[name=\"front\"]')\n  frontChildren!: HTMLSlotElement;\n\n  @query('[name=\"back\"]')\n  backChildren!: HTMLSlotElement;\n\n  @state()\n  frontElement!: HTMLElement;\n\n  @state()\n  backElement!: HTMLElement;\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-flipcard-trigger-flipped', () => {\n      this.flipped = !this.flipped;\n    });\n  }\n\n  firstUpdated() {\n    this.frontElement = this.querySelector('[slot=front]') as HTMLElement;\n    this.backElement = this.querySelector('[slot=back]') as HTMLElement;\n    window.addEventListener('resize', this.determineHeight.bind(this));\n\n    emitEvent(this, 'kemet-flipcard-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineHeight();\n  }\n\n  render() {\n    return html`\n      <section\n        tabindex=\"0\"\n        part=\"wrapper\"\n        @blur=${() => { if (this.flipOnHover) this.flipped = false; }}\n        @focus=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseover=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseout=${() => { if (this.flipOnHover) this.flipped = false; }}>\n        <div id=\"front\" class=\"front\" part=\"front\">\n          <slot name=\"front\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n        <div id=\"back\" class=\"back\" part=\"back\">\n          <slot name=\"back\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  determineHeight() {\n    // setTimeout is need to simulate a DOM repaint\n    // without the repaint, offsetHeight on Custom Elements = 0\n    // so this is needed for 'measure' to work correctly\n\n    setTimeout(() => {\n      if (this.measure) {\n        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {\n          this.height = `${this.frontElement?.offsetHeight}px`;\n        } else {\n          this.height = `${this.backElement?.offsetHeight}px`;\n        }\n\n        this.style.height = this.height;\n      } else {\n        this.style.removeProperty('height');\n      }\n    }, 0);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard': KemetFlipcard\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-flipcard-width: 100%;\n  --kemet-flipcard-height: auto;\n  --kemet-flipcard-ratio: 16/9;\n  --kemet-flipcard-border-radius: 0;\n  --kemet-flipcard-border: 1px solid;\n\n  display: inline-block;\n  width: var(--kemet-flipcard-width);\n  height: var(--kemet-flipcard-height);\n  aspect-ratio: var(--kemet-flipcard-ratio);\n  perspective: 1000px;\n}\n\nsection {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.8s;\n  transform-style: preserve-3d;\n}\n\n.front,\n.back {\n  color: inherit;\n  position: absolute;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n  /* overflow: hidden; */\n  border-radius: var(--kemet-flipcard-border-radius);\n  border: var(--kemet-flipcard-border);\n}\n\n:host([rounded]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=pill]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded=circle]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([flipped]) .front {\n  z-index: -1;\n}\n\n:host([axis=\"horizontal\"]) .back {\n  transform: rotateY(180deg);\n}\n\n:host([flipped][axis=\"horizontal\"]) section {\n  transform: rotateY(180deg);\n}\n\n:host([axis=\"vertical\"]) .back {\n  transform: rotateX(180deg);\n}\n\n:host([flipped][axis=\"vertical\"]) section {\n  transform: rotateX(180deg);\n}\n\n:host([flip-on-hover]) section {\n  cursor: pointer;\n}\n\n::slotted([slot=\"front\"]),\n::slotted([slot=\"back\"]) {\n  display: inline-block;\n  margin: auto;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/flipcard/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/flipcard/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state, query } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard\n * @summary A card that has a front and back side which can be flipped.\n * @ssrsafe yes\n *\n * @prop {string} axis\n * @prop {boolean} flipped\n * @prop {boolean} flipOnHover\n * @prop {string} height\n * @prop {boolean} measure\n * @prop {EnumRoundedSizes} rounded - The border radius of the card\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 * @slot front - The front of the card.\n * @slot back - The back of the card.\n *\n * @csspart front - The front of the card.\n * @csspart back - The back of the card.\n * @csspart wrapper - A container for both front and back of the card.\n *\n * @cssproperty --kemet-flipcard-width - The width of the card.\n * @cssproperty --kemet-flipcard-height - The height of the card.\n * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card.\n * @cssproperty --kemet-flipcard-border-radius - The border radius of the card.\n * @cssproperty --kemet-flipcard-border - The border of the card.\n *\n * @fires kemet-flipcard-mounted - Fired when the flipcard is mounted to the DOM\n * @detail {HTMLElement} element - The flipcard element\n *\n */\n\n@customElement('kemet-flipcard')\nexport default class KemetFlipcard extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  axis: string = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  flipped: boolean = false;\n\n  @property({ type: Boolean, attribute: 'flip-on-hover' })\n  flipOnHover: boolean = false;\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  @property({ type: String, 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  @query('[name=\"front\"]')\n  frontChildren!: HTMLSlotElement;\n\n  @query('[name=\"back\"]')\n  backChildren!: HTMLSlotElement;\n\n  @state()\n  frontElement!: HTMLElement;\n\n  @state()\n  backElement!: HTMLElement;\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-flipcard-trigger-flipped', () => {\n      this.flipped = !this.flipped;\n    });\n  }\n\n  firstUpdated() {\n    this.frontElement = this.querySelector('[slot=front]') as HTMLElement;\n    this.backElement = this.querySelector('[slot=back]') as HTMLElement;\n    window.addEventListener('resize', this.determineHeight.bind(this));\n\n    emitEvent(this, 'kemet-flipcard-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineHeight();\n  }\n\n  render() {\n    return html`\n      <section\n        tabindex=\"0\"\n        part=\"wrapper\"\n        @blur=${() => { if (this.flipOnHover) this.flipped = false; }}\n        @focus=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseover=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseout=${() => { if (this.flipOnHover) this.flipped = false; }}>\n        <div id=\"front\" class=\"front\" part=\"front\">\n          <slot name=\"front\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n        <div id=\"back\" class=\"back\" part=\"back\">\n          <slot name=\"back\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  determineHeight() {\n    // setTimeout is need to simulate a DOM repaint\n    // without the repaint, offsetHeight on Custom Elements = 0\n    // so this is needed for 'measure' to work correctly\n\n    setTimeout(() => {\n      if (this.measure) {\n        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {\n          this.height = `${this.frontElement?.offsetHeight}px`;\n        } else {\n          this.height = `${this.backElement?.offsetHeight}px`;\n        }\n\n        this.style.height = this.height;\n      } else {\n        this.style.removeProperty('height');\n      }\n    }, 0);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard': KemetFlipcard\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-flipcard-width: 100%;\n  --kemet-flipcard-height: auto;\n  --kemet-flipcard-ratio: 16/9;\n  --kemet-flipcard-border-radius: 0;\n  --kemet-flipcard-border: 1px solid;\n\n  display: inline-block;\n  width: var(--kemet-flipcard-width);\n  height: var(--kemet-flipcard-height);\n  aspect-ratio: var(--kemet-flipcard-ratio);\n  perspective: 1000px;\n}\n\nsection {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.8s;\n  transform-style: preserve-3d;\n}\n\n.front,\n.back {\n  color: inherit;\n  position: absolute;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n  /* overflow: hidden; */\n  border-radius: var(--kemet-flipcard-border-radius);\n  border: var(--kemet-flipcard-border);\n}\n\n:host([rounded]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=pill]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded=circle]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([flipped]) .front {\n  z-index: -1;\n}\n\n:host([axis=\"horizontal\"]) .back {\n  transform: rotateY(180deg);\n}\n\n:host([flipped][axis=\"horizontal\"]) section {\n  transform: rotateY(180deg);\n}\n\n:host([axis=\"vertical\"]) .back {\n  transform: rotateX(180deg);\n}\n\n:host([flipped][axis=\"vertical\"]) section {\n  transform: rotateX(180deg);\n}\n\n:host([flip-on-hover]) section {\n  cursor: pointer;\n}\n\n::slotted([slot=\"front\"]),\n::slotted([slot=\"back\"]) {\n  display: inline-block;\n  margin: auto;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/elements/flipcard-trigger/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/flipcard-trigger/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard-trigger\n * @summary Triggers a flipcard component to flip.\n * @ssrsafe yes\n *\n * @event kemet-flipcard-trigger-flipped - Fires when a flipcard is flipped\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\n@customElement('kemet-flipcard-trigger')\nexport default class KemetFlipcardTrigger extends LitElement {\n  static styles = [\n    css`\n      :host {\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-flipcard-trigger-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      <slot tabindex=\"0\" @click=${() => this.trigger()} @keypress=${(event: KeyboardEvent) => this.handleKeyup(event)}></slot>\n    `;\n  }\n\n  trigger() {\n    emitEvent(this, 'kemet-flipcard-trigger-flipped', {\n      bubbles: true,\n      composed: true,\n      detail: { element: this }\n    });\n  }\n\n  handleKeyup(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Enter') {\n      this.trigger();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard-trigger': KemetFlipcardTrigger\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,MAAM,WAAW;;;ACAtC,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;;;ACXC,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;;;AFeA,IAAqB,uBAArB,cAAkD,WAAW;AAAA,EAA7D;AAAA;AAaE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,kCAAkC;AAAA,MAChD,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,kCACuB,MAAM,KAAK,QAAQ,CAAC,cAAc,CAAC,UAAyB,KAAK,YAAY,KAAK,CAAC;AAAA;AAAA,EAEnH;AAAA,EAEA,UAAU;AACR,cAAU,MAAM,kCAAkC;AAAA,MAChD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,SAAS,KAAK;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAEA,YAAY,OAAsB;AAChC,UAAM,eAAe;AAErB,QAAI,MAAM,QAAQ,SAAS;AACzB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;AA/CqB,qBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAKF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,qBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,qBAanB;AAbmB,uBAArB;AAAA,EADC,cAAc,wBAAwB;AAAA,GAClB;","names":[]}
+{"version":3,"sources":["../../../src/elements/flipcard-trigger/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard-trigger\n * @summary Triggers a flipcard component to flip.\n * @ssrsafe yes\n *\n * @event kemet-flipcard-trigger-flipped - Fires when a flipcard is flipped\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\n@customElement('kemet-flipcard-trigger')\nexport default class KemetFlipcardTrigger extends LitElement {\n  static styles = [\n    css`\n      :host {\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-flipcard-trigger-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      <slot tabindex=\"0\" @click=${() => this.trigger()} @keypress=${(event: KeyboardEvent) => this.handleKeyup(event)}></slot>\n    `;\n  }\n\n  trigger() {\n    emitEvent(this, 'kemet-flipcard-trigger-flipped', {\n      bubbles: true,\n      composed: true,\n      detail: { element: this }\n    });\n  }\n\n  handleKeyup(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Enter') {\n      this.trigger();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard-trigger': KemetFlipcardTrigger\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,MAAM,WAAW;;;ACAtC,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;;;ACXC,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;;;AFeA,IAAqB,uBAArB,cAAkD,WAAW;AAAA,EAA7D;AAAA;AAaE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,kCAAkC;AAAA,MAChD,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,kCACuB,MAAM,KAAK,QAAQ,CAAC,cAAc,CAAC,UAAyB,KAAK,YAAY,KAAK,CAAC;AAAA;AAAA,EAEnH;AAAA,EAEA,UAAU;AACR,cAAU,MAAM,kCAAkC;AAAA,MAChD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,SAAS,KAAK;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAEA,YAAY,OAAsB;AAChC,UAAM,eAAe;AAErB,QAAI,MAAM,QAAQ,SAAS;AACzB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;AA/CqB,qBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAKF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,qBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,qBAanB;AAbmB,uBAArB;AAAA,EADC,cAAc,wBAAwB;AAAA,GAClB;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/icon/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/icon/styles.css.ts"],"sourcesContent":["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","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: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n}\n`;\n"],"mappings":"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","names":["EnumLibrary"]}
+{"version":3,"sources":["../../../src/elements/icon/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/icon/styles.css.ts"],"sourcesContent":["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","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: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAA0B,kBAA6B;;;ACAhE,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,wBAAwB;;;AEF1B,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;;;AHIf,IAAM,kBAAkB,uBAAO;AAC/B,IAAM,kBAAkB,uBAAO;AAG/B,IAAI;AACJ,IAAM,YAAY,oBAAI,IAAgC;AAGtD,IAAM,0BAA0B;AAChC,IAAM,eAAkC,CAAC;AACzC,IAAI,iBAAiB;AAErB,SAAS,aAAa,UAAsB;AAC1C,MAAI,iBAAiB,yBAAyB;AAC5C;AACA,aAAS;AAAA,EACX,OAAO;AACL,iBAAa,KAAK,QAAQ;AAAA,EAC5B;AACF;AAEA,SAAS,kBAAkB;AACzB;AACA,MAAI,aAAa,SAAS,GAAG;AAC3B,UAAM,cAAc,aAAa,MAAM;AACvC,QAAI,aAAa;AACf;AACA,kBAAY;AAAA,IACd;AAAA,EACF;AACF;AAEO,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,iBAAc;AACd,EAAAA,aAAA,eAAY;AAFF,SAAAA;AAAA,GAAA;AA2BZ,IAAqB,YAArB,cAAuC,WAAW;AAAA,EAAlD;AAAA;AAIE,gBAAe;AAGf,mBAAkB;AAGlB,kBAAiB;AAGjB,gBAAe;AASf,eAAc;AAId,SAAQ,MAA8C;AAItD,SAAQ,MAAc;AAGtB;AAAA,SAAQ,YAAqB;AAAA;AAAA,EAE7B,oBAAoB;AAClB,UAAM,kBAAkB;AAExB,SAAK,UAAU;AACf,QAAI,CAAC,KAAK,KAAK;AACb,WAAK,YAAY;AACjB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AACR,SAAK,UAAU;AACf,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,eAAe;AACb,cAAU,MAAM,sBAAsB;AAAA,MACpC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AAEP,QAAI,KAAK,KAAK;AACZ,aAAO,KAAK;AAAA,IACd;AAGA,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,YAAY;AACjB,WAAK,QAAQ;AAAA,IACf;AAEA,WAAO,8BAA8B,KAAK,IAAI,aAAa,KAAK,IAAI;AAAA,EACtE;AAAA;AAAA,EAGO,WAAW;AAChB,SAAK,YAAY;AACjB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,MAAM,UAAU;AACd,QAAI,CAAC,KAAK,UAAW;AAErB,QAAI,eAAe,UAAU,IAAI,GAAG,KAAK,MAAM,IAAI,KAAK,IAAI,EAAE;AAE9D,QAAI,CAAC,cAAc;AACjB,qBAAe,KAAK,YAAY;AAChC,gBAAU,IAAI,GAAG,KAAK,MAAM,IAAI,KAAK,IAAI,IAAI,YAAY;AAAA,IAC3D;AAEA,UAAM,MAAM,MAAM;AAElB,QAAI,QAAQ,iBAAiB;AAC3B,gBAAU,OAAO,GAAG,KAAK,MAAM,IAAI,KAAK,IAAI,EAAE;AAAA,IAChD;AAEA,QAAI,iBAAiB,GAAG,GAAG;AACzB,WAAK,MAAM;AAAA,IACb,WAAW,OAAO,kBAAkB,eAAe,eAAe,eAAe;AAE/E,WAAK,MAAM,IAAI,UAAU,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EAEQ,YAAY;AAClB,YAAQ,KAAK,SAAS;AAAA,MACpB,KAAK;AACH,aAAK,UAAU,KAAK,WAAW;AAC/B,aAAK,MAAM,mDAAmD,KAAK,OAAO;AAC1E;AAAA,MACF,KAAK;AACH,aAAK,UAAU,KAAK,WAAW;AAC/B,aAAK,MAAM,qCAAqC,KAAK,OAAO;AAC5D;AAAA,IACJ;AAAA,EACF;AAAA,EAEA,MAAc,cAAkC;AAC9C,WAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,mBAAa,YAAY;AACvB,YAAI;AACJ,YAAI,WAAmB,GAAG,KAAK,GAAG,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAE9D,gBAAQ,KAAK,SAAS;AAAA,UACpB,KAAK;AACH,uBAAW,GAAG,KAAK,GAAG,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAClD;AAAA,UACF,KAAK;AACH,uBAAW,GAAG,KAAK,GAAG,IAAI,KAAK,IAAI;AACnC;AAAA,QACJ;AAEA,YAAI;AACF,qBAAW,MAAM,MAAM,QAAQ;AAC/B,cAAI,CAAC,SAAS,IAAI;AAChB,4BAAgB;AAChB,oBAAQ,SAAS,WAAW,MAAM,kBAAkB,eAAe;AACnE;AAAA,UACF;AAAA,QACF,QAAQ;AACN,0BAAgB;AAChB,kBAAQ,eAAe;AACvB;AAAA,QACF;AAEA,YAAI;AACF,gBAAM,MAAM,SAAS,cAAc,KAAK;AACxC,cAAI,YAAY,MAAM,SAAS,KAAK;AAEpC,gBAAM,MAAM,IAAI;AAChB,cAAI,KAAK,SAAS,YAAY,MAAM,OAAO;AACzC,4BAAgB;AAChB,oBAAQ,eAAe;AACvB;AAAA,UACF;AAEA,cAAI,CAAC,OAAQ,UAAS,IAAI,UAAU;AACpC,gBAAM,MAAM,OAAO,gBAAgB,IAAI,WAAW,WAAW;AAE7D,gBAAM,QAAQ,IAAI,KAAK,cAAc,KAAK;AAC1C,cAAI,CAAC,OAAO;AACV,4BAAgB;AAChB,oBAAQ,eAAe;AACvB;AAAA,UACF;AAEA,gBAAM,KAAK,IAAI,KAAK;AACpB,gBAAM,aAAa,SAAS,GAAG,KAAK,IAAI,IAAI;AAC5C,gBAAM,aAAa,UAAU,GAAG,KAAK,IAAI,IAAI;AAE7C,0BAAgB;AAChB,kBAAQ,SAAS,UAAU,KAAK,CAAC;AAAA,QACnC,QAAQ;AACN,0BAAgB;AAChB,kBAAQ,eAAe;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa;AACnB,QAAI,KAAK,KAAK;AACZ,YAAM,MAAM,KAAK;AACjB,UAAI,aAAa,SAAS,GAAG,KAAK,IAAI,IAAI;AAC1C,UAAI,aAAa,UAAU,GAAG,KAAK,IAAI,IAAI;AAAA,IAC7C;AAAA,EACF;AACF;AA7LqB,UACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,UAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,UAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,UAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,UAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,UAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,UAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,UAsBnB;AAIQ;AAAA,EADP,MAAM;AAAA,GAzBY,UA0BX;AAIA;AAAA,EADP,MAAM;AAAA,GA7BY,UA8BX;AA9BW,YAArB;AAAA,EADC,cAAc,YAAY;AAAA,GACN;","names":["EnumLibrary"]}

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

@@ -1,4 +1,4 @@
 import 'lit-html';
 import 'lit';
 import '../../form-controller-3q581XcZ.js';
-export { i as EnumAriaAutoComplete, j as EnumAutoComplete, k as EnumInputModes, l as EnumInputTypes, c as default } from '../../constants-C4-3KYlX.js';
+export { i as EnumAriaAutoComplete, j as EnumAutoComplete, k as EnumInputModes, l as EnumInputTypes, c as default } from '../../constants-BsAfWV-a.js';

package/dist/elements/input/index.js

@@ -36,10 +36,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);
     }
@@ -60,7 +58,6 @@ var FormSubmitController = class {
     }
   }
   handleFormSubmit(event) {
-    console.log("~~Form submitted~~");
     event.preventDefault();
     event.stopImmediatePropagation();
     const disabled = this.options.disabled(this.host);
@@ -71,14 +68,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
                 }
@@ -368,6 +364,14 @@ var HTMLKemetInputElement = class extends LitElement {
     this.dom = "initializing";
     this.formSubmitController = new FormSubmitController(this);
   }
+  updated(changedProperties) {
+    if (changedProperties.has("appearance")) {
+      emitEvent(this, "kemet-input-appearance-change", {
+        appearance: this.appearance,
+        element: this
+      });
+    }
+  }
   firstUpdated() {
     this.input = this.shadowRoot?.querySelector("input");
     this.field = this.closest("kemet-field");
@@ -493,6 +497,7 @@ var HTMLKemetInputElement = class extends LitElement {
    */
   handleInput(event) {
     this.value = this.input.value;
+    this.appearance = "neutral" /* Neutral */;
     emitEvent(this, "kemet-input-input", {
       appearance: this.appearance,
       validity: this.input.validity,
@@ -510,7 +515,7 @@ var HTMLKemetInputElement = class extends LitElement {
       this.invalid = true;
       this.appearance = "error" /* Error */;
       emitEvent(this, "kemet-input-appearance-change", {
-        status: "error" /* Error */,
+        appearance: "error" /* Error */,
         validity: this.input?.validity,
         element: this,
         value: event.target.value
@@ -518,7 +523,7 @@ var HTMLKemetInputElement = class extends LitElement {
     }
   }
   handleStatus(event) {
-    this.appearance = event.detail.status;
+    this.appearance = event.detail.appearance;
   }
   /**
    * Toggles password visibility