kemet-ui 5.0.0 → 5.0.2

package/dist/{constants-W9QKPlZP.d.ts → constants-CHvA2ed5.d.ts}

@@ -14,6 +14,7 @@ interface InterfaceKemetSelectionEvent {
  *
  * @tagname kemet-combo
  * @summary Allows the user to select a choice filtered through an Input. May only be used as a component of Field.
+ * @ssrsafe yes
  *
  * @prop {string} slug - Uniquely identifies the component. Should match the slug used in a control.
  * @prop {array} options - An array of items listed for the combo box
@@ -115,6 +116,7 @@ declare enum EnumInputModes {
  *
  * @tagname kemet-input
  * @summary An enhanced input element.
+ * @ssrsafe yes
  *
  * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
  * @prop {string} name - The name of the input
@@ -292,6 +294,7 @@ declare global {
  *
  * @tagname kemet-textarea
  * @summary An enhanced textarea element.
+ * @ssrsafe yes
  *
  * @prop {string} slug
  * @prop {string}  name
@@ -426,8 +429,10 @@ declare global {
  * @since 1.0.0
  * @status stable
  *
+ *
  * @tagname kemet-field
  * @summary Used in combination with Input, Select, and Textarea, to make a Field.
+ * @ssrsafe yes
  *
  * @prop {string} slug - Uniquely identifies the control. Use the same slug for slotted subcomponents.
  * @prop {string} label - The label text
@@ -490,22 +495,30 @@ interface InterfaceAppearanceChangeEvent {
  *
  * @tagname kemet-count
  * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.
+ * @ssrsafe yes
  *
  * @prop {string} message - The text label shown to users
  * @prop {number} remaining - The number of characters remaining
  * @prop {number} limit - The maximum number of characters allowed
  * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
  *
  * @cssproperty --kemet-count-font-size - The font size. Default: 90%.
  *
  * @fires kemet-count-appearance-change - Fires when there's a change in status.
  *
+ * @fires kemet-count-mounted - Fired when the count is mounted to the DOM
+ * @detail {HTMLElement} element - The count element
+ *
  */
 declare class KemetCount extends LitElement {
     static styles: lit.CSSResult[];
     message: string;
     limit: number;
     validateImmediately: boolean;
+    polarity?: 'light' | 'dark';
+    dom: string;
     remaining: number;
     field: HTMLKemetFieldElement;
     inputSlot: HTMLKemetInputElement | HTMLKemetTextareaElement;

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

@@ -9,6 +9,7 @@ import KemetAccordionPanel from '../accordion-panel/index.js';
  *
  * @tagname kemet-accordion
  * @summary A component that acts like a standard accordion.
+ * @ssrsafe yes
  *
  * @prop {number} currentPanel - The index value for the most recently opened panel
  * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened

package/dist/elements/accordion/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/accordion/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/elements/accordion/styles.css.ts
 import { css } from "lit";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/accordion/index.ts","../../../src/elements/accordion/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport HTMLKemetAccordionPanelElement from '../accordion-panel';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n * @fires kemet-accordion-mounted - Fired when the accordion is mounted to the DOM\n * @detail {HTMLElement} element - The accordion element\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'current-panel' })\n  currentPanel: number = 0;\n\n  @property({ type: Boolean, attribute: 'toggle-panels' })\n  togglePanels: boolean = false;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  panels!: NodeListOf<HTMLKemetAccordionPanelElement>;\n\n  @state()\n  onKeyDown!: (event: KeyboardEvent) => void;\n\n  @state()\n  currentPanelFocus!: number;\n\n  handlePanelOpenedBound!: (event: Event) => void;\n\n  constructor() {\n    super();\n    this.handlePanelOpenedBound = this.handlePanelOpened.bind(this);\n    this.addEventListener('kemet-opened', this.handlePanelOpenedBound);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('kemet-opened', this.handlePanelOpenedBound);\n    this.panels?.forEach((panel) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n    emitEvent(this, 'kemet-accordion-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    const newPanels = this.querySelectorAll('kemet-accordion-panel');\n\n    // Remove listeners from panels that are no longer in the DOM\n    if (this.panels) {\n      this.panels.forEach((oldPanel) => {\n        if (!Array.from(newPanels).includes(oldPanel)) {\n          oldPanel.removeEventListener('keydown', this.onKeyDown);\n        }\n      });\n    }\n\n    this.panels = newPanels;\n\n    this.panels.forEach((panel: HTMLKemetAccordionPanelElement, index) => {\n      panel.index = index;\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: Event) {\n    const customEvent = event as CustomEvent;\n    this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n      if (panel === customEvent.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n        if (panel !== customEvent.detail.element) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction: string) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel]?.shadowRoot?.querySelector('button')?.focus();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Expands all panels in the accordion\n   * @public\n   * @method expandAll\n   * @returns {void}\n   */\n  expandAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  /**\n   * Collapses all panels in the accordion\n   * @public\n   * @method collapseAll\n   * @returns {void}\n   */\n  collapseAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\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/accordion/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/accordion/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport HTMLKemetAccordionPanelElement from '../accordion-panel';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n * @ssrsafe yes\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n * @fires kemet-accordion-mounted - Fired when the accordion is mounted to the DOM\n * @detail {HTMLElement} element - The accordion element\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'current-panel' })\n  currentPanel: number = 0;\n\n  @property({ type: Boolean, attribute: 'toggle-panels' })\n  togglePanels: boolean = false;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  panels!: NodeListOf<HTMLKemetAccordionPanelElement>;\n\n  @state()\n  onKeyDown!: (event: KeyboardEvent) => void;\n\n  @state()\n  currentPanelFocus!: number;\n\n  handlePanelOpenedBound!: (event: Event) => void;\n\n  constructor() {\n    super();\n    this.handlePanelOpenedBound = this.handlePanelOpened.bind(this);\n    this.addEventListener('kemet-opened', this.handlePanelOpenedBound);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('kemet-opened', this.handlePanelOpenedBound);\n    this.panels?.forEach((panel) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n    emitEvent(this, 'kemet-accordion-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    const newPanels = this.querySelectorAll('kemet-accordion-panel');\n\n    // Remove listeners from panels that are no longer in the DOM\n    if (this.panels) {\n      this.panels.forEach((oldPanel) => {\n        if (!Array.from(newPanels).includes(oldPanel)) {\n          oldPanel.removeEventListener('keydown', this.onKeyDown);\n        }\n      });\n    }\n\n    this.panels = newPanels;\n\n    this.panels.forEach((panel: HTMLKemetAccordionPanelElement, index) => {\n      panel.index = index;\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: Event) {\n    const customEvent = event as CustomEvent;\n    this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n      if (panel === customEvent.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n        if (panel !== customEvent.detail.element) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction: string) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel]?.shadowRoot?.querySelector('button')?.focus();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Expands all panels in the accordion\n   * @public\n   * @method expandAll\n   * @returns {void}\n   */\n  expandAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  /**\n   * Collapses all panels in the accordion\n   * @public\n   * @method collapseAll\n   * @returns {void}\n   */\n  collapseAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,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;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHkBA,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAyBrD,cAAc;AACZ,UAAM;AAtBR,wBAAuB;AAGvB,wBAAwB;AAGxB,eAAc;AAiBZ,SAAK,yBAAyB,KAAK,kBAAkB,KAAK,IAAI;AAC9D,SAAK,iBAAiB,gBAAgB,KAAK,sBAAsB;AAAA,EACnE;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,oBAAoB,gBAAgB,KAAK,sBAAsB;AACpE,SAAK,QAAQ,QAAQ,CAAC,UAAU;AAC9B,YAAM,oBAAoB,WAAW,KAAK,SAAS;AAAA,IACrD,CAAC;AAAA,EACH;AAAA,EAEA,eAAe;AACb,SAAK,YAAY,WAAS,KAAK,cAAc,KAAK;AAClD,cAAU,MAAM,2BAA2B;AAAA,MACzC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO,yBAAyB,MAAM,KAAK,iBAAiB,CAAC;AAAA,EAC/D;AAAA,EAEA,mBAAmB;AACjB,UAAM,YAAY,KAAK,iBAAiB,uBAAuB;AAG/D,QAAI,KAAK,QAAQ;AACf,WAAK,OAAO,QAAQ,CAAC,aAAa;AAChC,YAAI,CAAC,MAAM,KAAK,SAAS,EAAE,SAAS,QAAQ,GAAG;AAC7C,mBAAS,oBAAoB,WAAW,KAAK,SAAS;AAAA,QACxD;AAAA,MACF,CAAC;AAAA,IACH;AAEA,SAAK,SAAS;AAEd,SAAK,OAAO,QAAQ,CAAC,OAAuC,UAAU;AACpE,YAAM,QAAQ;AACd,YAAM,iBAAiB,WAAW,KAAK,SAAS;AAAA,IAClD,CAAC;AAAA,EACH;AAAA,EAEA,kBAAkB,OAAc;AAC9B,UAAM,cAAc;AACpB,SAAK,QAAQ,QAAQ,CAAC,UAA0C;AAC9D,UAAI,UAAU,YAAY,QAAQ;AAChC,aAAK,eAAe,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,QAAI,KAAK,cAAc;AACrB,WAAK,QAAQ,QAAQ,CAAC,UAA0C;AAC9D,YAAI,UAAU,YAAY,OAAO,SAAS;AACxC,gBAAM,SAAS;AAAA,QACjB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,eAAe,WAAmB;AAChC,YAAQ,WAAW;AAAA,MACjB,KAAK;AACH,aAAK,eAAe;AACpB;AAAA,MACF,KAAK;AACH,aAAK,eAAe,KAAK,OAAO,SAAS;AACzC;AAAA,MACF,KAAK;AACH,aAAK,gBAAgB;AACrB;AAAA,MACF,KAAK;AACH,aAAK,gBAAgB;AACrB;AAAA,MACF;AACE,aAAK,oBAAoB;AACzB;AAAA,IACJ;AAEA,QAAI,KAAK,eAAe,KAAK,OAAO,SAAS,EAAG,MAAK,eAAe;AACpE,QAAI,KAAK,eAAe,EAAG,MAAK,eAAe,KAAK,OAAO,SAAS;AAEpE,SAAK,OAAO,KAAK,YAAY,GAAG,YAAY,cAAc,QAAQ,GAAG,MAAM;AAAA,EAC7E;AAAA,EAEA,cAAc,OAAsB;AAClC,UAAM,SAAS,MAAM;AACrB,YAAQ,MAAM,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK;AACH,cAAM,eAAe;AACrB,eAAO,MAAM;AACb;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,MAAM;AAC1B;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,MAAM;AAC1B;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,KAAK;AACzB;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,MAAM;AAC1B;AAAA,MACF;AACE;AAAA,IACJ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAkB;AAChB,SAAK,OAAO,QAAQ,CAAC,UAAU;AAC7B,YAAM,SAAS;AAAA,IACjB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,cAAoB;AAClB,SAAK,OAAO,QAAQ,CAAC,UAAU;AAC7B,YAAM,SAAS;AAAA,IACjB,CAAC;AAAA,EACH;AACF;AA3KqB,eACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAHnC,eAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB,CAAC;AAAA,GANpC,eAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,eAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,eAanB;AAKA;AAAA,EADC,MAAM;AAAA,GAjBY,eAkBnB;AAGA;AAAA,EADC,MAAM;AAAA,GApBY,eAqBnB;AArBmB,iBAArB;AAAA,EADC,cAAc,iBAAiB;AAAA,GACX;","names":[]}

package/dist/elements/accordion-panel/index.d.ts

@@ -8,6 +8,7 @@ import { LitElement } from 'lit';
  *
  * @tagname kemet-accordion-panel
  * @summary A blade for an accordion.
+ * @ssrsafe yes
  *
  * @prop {boolean} opened - Determines the opened state of the panel
  * @prop {string} maxHeight - Sets the max height of the panel's body

package/dist/elements/accordion-panel/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/accordion-panel/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/utilities/events.ts
 var emitEvent = (element, name, detail, bubbles = true, composed = true) => {

package/dist/elements/accordion-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/accordion-panel/index.ts","../../../src/utilities/events.ts","../../../src/elements/accordion-panel/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\n\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @fires kemet-opened - Fires when a panel is opened\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-closed - Fires when a panel is closed\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-accordion-panel-mounted - Fired when the accordion panel is mounted to the DOM\n * @detail {HTMLElement} element - The accordion panel element\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height' })\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  @property({ type: Number })\n  index!: number;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  /** @internal */\n  @state()\n  focusableSelector!: string;\n\n  /** @internal */\n  @state()\n  bodyElement!: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n\n    emitEvent(this, 'kemet-accordion-panel-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-opened', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-closed', { element: this });\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  /**\n   * Toggles the opened state of the panel.\n   * @method toggle\n   * @public\n   * @returns {void}\n   */\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\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`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n  padding: 1.5rem 1rem;\n  border-bottom: 1px solid;\n}\n\n.trigger {\n  color: inherit;\n  cursor: pointer;\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: 1fr auto;\n  width: 100%;\n  text-align: left;\n  padding: 0;\n  border: none;\n  background: none;\n}\n\n.body {\n  overflow: hidden;\n  transition: all 300ms ease;\n}\n\n::slotted([slot='body']) {\n  padding: 1rem 0;\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;AAC5C,SAAS,eAAe,UAAU,aAAa;;;ACDxC,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;;;AFkCf,IAAqB,sBAArB,cAAiD,WAAW;AAAA,EAA5D;AAAA;AAIE,kBAA8B;AAG9B,qBAAoB;AAGpB,gBAAe;AAMf,eAAc;AAAA;AAAA,EAqBd,eAAe;AACb,SAAK,oBAAoB;AACzB,SAAK,cAAc,KAAK,cAAc,eAAe;AACrD,SAAK,mBAAmB,KAAK,aAAa,cAAc,cAAc;AACtE,SAAK,kBAAkB,KAAK,aAAa,cAAc,aAAa;AAEpE,QAAI,KAAK,iBAAkB,MAAK,iBAAiB,MAAM,YAAY;AACnE,QAAI,KAAK,gBAAiB,MAAK,gBAAgB,MAAM,eAAe;AAEpE,cAAU,MAAM,iCAAiC;AAAA,MAC/C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,QAAQ,WAA+B;AACrC,QAAI,CAAC,UAAU,IAAI,QAAQ,KAAK,KAAK,WAAW,MAAM;AACpD,WAAK,YAAY,GAAG,KAAK,aAAa,YAAY;AAClD,gBAAU,MAAM,gBAAgB,EAAE,SAAS,KAAK,CAAC;AAAA,IACnD;AAEA,QAAI,UAAU,IAAI,QAAQ,KAAK,KAAK,WAAW,OAAO;AACpD,WAAK,YAAY;AACjB,gBAAU,MAAM,gBAAgB,EAAE,SAAS,KAAK,CAAC;AAAA,IACnD;AAEA,SAAK,KAAK;AACV,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,iBAIM,MAAM,KAAK,OAAO,CAAC;AAAA,mBACjB,CAAC,UAAyB,KAAK,cAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4DAKV,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,EAIxE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS;AACP,SAAK,SAAS,CAAC,KAAK;AAAA,EACtB;AAAA,EAEA,wBAAwB;AACtB,UAAM,oBAAoB,KAAK,aAAa,iBAAiB,KAAK,iBAAiB;AAEnF,QAAI,KAAK,QAAQ;AACf,yBAAmB,QAAQ,CAAC,YAAY;AACtC,gBAAQ,gBAAgB,UAAU;AAAA,MACpC,CAAC;AAAA,IACH,OAAO;AACL,yBAAmB,QAAQ,CAAC,YAAY;AACtC,gBAAQ,aAAa,YAAY,IAAI;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,OAAO;AACL,UAAM,UAAU,KAAK,YAAY,cAAc,UAAU;AACzD,UAAM,OAAO,KAAK,YAAY,cAAc,OAAO;AAEnD,aAAS,aAAa,MAAM,GAAG,KAAK,IAAI,SAAS;AACjD,aAAS,aAAa,iBAAiB,GAAG,KAAK,IAAI,UAAU;AAE7D,UAAM,aAAa,MAAM,GAAG,KAAK,IAAI,UAAU;AAC/C,UAAM,aAAa,mBAAmB,GAAG,KAAK,IAAI,SAAS;AAC3D,UAAM,aAAa,eAAe,GAAG,CAAC,KAAK,MAAM,EAAE;AAAA,EACrD;AAAA,EAEA,cAAc,OAAsB;AAClC,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,SAAS;AAClD,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AACF;AAjIqB,oBACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,oBAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GANhC,oBAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,oBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,oBAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,oBAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,oBAmBnB;AAIA;AAAA,EADC,MAAM;AAAA,GAtBY,oBAuBnB;AAIA;AAAA,EADC,MAAM;AAAA,GA1BY,oBA2BnB;AAIA;AAAA,EADC,MAAM;AAAA,GA9BY,oBA+BnB;AAIA;AAAA,EADC,MAAM;AAAA,GAlCY,oBAmCnB;AAnCmB,sBAArB;AAAA,EADC,cAAc,uBAAuB;AAAA,GACjB;","names":[]}
+{"version":3,"sources":["../../../src/elements/accordion-panel/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/accordion-panel/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\n\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @fires kemet-opened - Fires when a panel is opened\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-closed - Fires when a panel is closed\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-accordion-panel-mounted - Fired when the accordion panel is mounted to the DOM\n * @detail {HTMLElement} element - The accordion panel element\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height' })\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  @property({ type: Number })\n  index!: number;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  /** @internal */\n  @state()\n  focusableSelector!: string;\n\n  /** @internal */\n  @state()\n  bodyElement!: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n\n    emitEvent(this, 'kemet-accordion-panel-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-opened', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-closed', { element: this });\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  /**\n   * Toggles the opened state of the panel.\n   * @method toggle\n   * @public\n   * @returns {void}\n   */\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\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`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n  padding: 1.5rem 1rem;\n  border-bottom: 1px solid;\n}\n\n.trigger {\n  color: inherit;\n  cursor: pointer;\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: 1fr auto;\n  width: 100%;\n  text-align: left;\n  padding: 0;\n  border: none;\n  background: none;\n}\n\n.body {\n  overflow: hidden;\n  transition: all 300ms ease;\n}\n\n::slotted([slot='body']) {\n  padding: 1rem 0;\n}\n`;\n"],"mappings":"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","names":[]}

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

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { T as TypeAppearance, d as TypeRoundedSizes } from '../../constants-W9QKPlZP.js';
+import { T as TypeAppearance, d as TypeRoundedSizes } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumOverlayPositions {
@@ -25,6 +25,7 @@ declare enum EnumBorderAppearances {
  *
  * @tagname kemet-alert
  * @summary Calls out important messages and notifications.
+ * @ssrsafe yes
  *
  * @prop {boolean} opened - Determines if the alert is opened or not.
  * @prop {boolean} reveal - Fades in the alert when opened.

package/dist/elements/alert/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/alert/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/utilities/events.ts
 var emitEvent = (element, name, detail, bubbles = true, composed = true) => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\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 icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n  @property({ type: String, reflect: true, attribute: 'border-appearance' })\n  borderAppearance!: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden!: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: constants.TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: 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  private handleTransitionEnd = () => {\n    if (!this.opened) {\n      this.hidden = true;\n    }\n  };\n\n  private handleAnimationEnd = () => {\n    this.reveal = false;\n  };\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-alert-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  private makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  private handleMotion() {\n    this.addEventListener('transitionend', this.handleTransitionEnd);\n    this.addEventListener('animationend', this.handleAnimationEnd);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.removeEventListener('animationend', this.handleAnimationEnd);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\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    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}
+{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\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 icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n  @property({ type: String, reflect: true, attribute: 'border-appearance' })\n  borderAppearance!: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden!: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: constants.TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: 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  private handleTransitionEnd = () => {\n    if (!this.opened) {\n      this.hidden = true;\n    }\n  };\n\n  private handleAnimationEnd = () => {\n    this.reveal = false;\n  };\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-alert-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  private makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  private handleMotion() {\n    this.addEventListener('transitionend', this.handleTransitionEnd);\n    this.addEventListener('animationend', this.handleAnimationEnd);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.removeEventListener('animationend', this.handleAnimationEnd);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\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    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}

package/dist/elements/avatar/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 TypeRoundedSizes } from '../../constants-W9QKPlZP.js';
+import { d as TypeRoundedSizes } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**
@@ -10,6 +10,7 @@ import '../../form-controller-3q581XcZ.js';
  *
  * @tagname kemet-avatar
  * @summary A representation of a person or thing.
+ * @ssrsafe yes
  *
  * @prop {string} size - The size in pixels.
  * @prop {string} image - Url to an image.

package/dist/elements/avatar/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/avatar/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/utilities/events.ts
 var emitEvent = (element, name, detail, bubbles = true, composed = true) => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/avatar/index.ts","../../../src/utilities/events.ts","../../../src/elements/avatar/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { type TypeRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatar\n * @summary A representation of a person or thing.\n *\n * @prop {string} size - The size in pixels.\n * @prop {string} image - Url to an image.\n * @prop {string} label - Labels the avatar.\n * @prop {string} initials - Initials of the user.\n * @prop {boolean} circle - Displays in a circle.\n * @prop {TypeRoundedSizes} rounded - Displays with rounded corners\n *\n * @slot status - A slot for an icon or element that indicates the status of the avatar.\n *\n * @csspart initials - Contains the initials for the avatar.\n *\n * @cssproperty --kemet-avatar-initials-margin - The space around the initials.\n *\n * @fires kemet-avatar-mounted - Fires when the avatar is mounted.\n * @detail {element: HTMLElement} - The avatar element.\n */\n\n@customElement('kemet-avatar')\nexport default class KemetAvatar extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  size!: string;\n\n  @property({ type: String })\n  image!: string;\n\n  @property({ type: String })\n  label!: string;\n\n  @property({ type: String })\n  initials!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\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-avatar-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.makeSize();\n  }\n\n  render() {\n    return html`\n      ${this.makeContent()}\n      <slot name=\"status\"></slot>\n    `;\n  }\n\n  makeSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  makeContent() {\n    if (this.image) {\n      return html`<img part=\"avatar-image\" src=${this.image} alt=${this.label} />`;\n    }\n\n    if (this.initials) {\n      return html`<div part=\"initials\" class=\"initials\">${this.initials}</div>`;\n    }\n\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatar': KemetAvatar\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`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  /* public */\n  --kemet-avatar-initials-margin: 1rem;\n\n  /* private */\n  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);\n  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);\n  --_kemet-avatar-rounded: 0;\n\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_kemet-avatar-color);\n  position: relative;\n  border-radius: var(--_kemet-avatar-rounded);\n  background-color: var(--_kemet-avatar-background-color);\n}\n\n:host > * {\n  border-radius: var(--_kemet-avatar-rounded);\n}\n\n:host([rounded]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);\n}\n\n.initials {\n  margin: var(--kemet-avatar-initials-margin);\n}\n\n::slotted(kemet-badge) {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: var(--kemet-border-radius-circle);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;AAC5C,SAAS,eAAe,gBAAgB;;;ACDjC,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;;;AF8Bf,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAsBE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AACX,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,EAGxB;AAAA,EAEA,WAAW;AACT,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,OAAO;AACd,aAAO,oCAAoC,KAAK,KAAK,QAAQ,KAAK,KAAK;AAAA,IACzE;AAEA,QAAI,KAAK,UAAU;AACjB,aAAO,6CAA6C,KAAK,QAAQ;AAAA,IACnE;AAEA,WAAO;AAAA,EACT;AACF;AA7DqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,YAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,YAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,YAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,YAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,YAsBnB;AAtBmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":[]}
+{"version":3,"sources":["../../../src/elements/avatar/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/avatar/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { type TypeRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatar\n * @summary A representation of a person or thing.\n * @ssrsafe yes\n *\n * @prop {string} size - The size in pixels.\n * @prop {string} image - Url to an image.\n * @prop {string} label - Labels the avatar.\n * @prop {string} initials - Initials of the user.\n * @prop {boolean} circle - Displays in a circle.\n * @prop {TypeRoundedSizes} rounded - Displays with rounded corners\n *\n * @slot status - A slot for an icon or element that indicates the status of the avatar.\n *\n * @csspart initials - Contains the initials for the avatar.\n *\n * @cssproperty --kemet-avatar-initials-margin - The space around the initials.\n *\n * @fires kemet-avatar-mounted - Fires when the avatar is mounted.\n * @detail {element: HTMLElement} - The avatar element.\n */\n\n@customElement('kemet-avatar')\nexport default class KemetAvatar extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  size!: string;\n\n  @property({ type: String })\n  image!: string;\n\n  @property({ type: String })\n  label!: string;\n\n  @property({ type: String })\n  initials!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\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-avatar-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.makeSize();\n  }\n\n  render() {\n    return html`\n      ${this.makeContent()}\n      <slot name=\"status\"></slot>\n    `;\n  }\n\n  makeSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  makeContent() {\n    if (this.image) {\n      return html`<img part=\"avatar-image\" src=${this.image} alt=${this.label} />`;\n    }\n\n    if (this.initials) {\n      return html`<div part=\"initials\" class=\"initials\">${this.initials}</div>`;\n    }\n\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatar': KemetAvatar\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`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  /* public */\n  --kemet-avatar-initials-margin: 1rem;\n\n  /* private */\n  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);\n  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);\n  --_kemet-avatar-rounded: 0;\n\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_kemet-avatar-color);\n  position: relative;\n  border-radius: var(--_kemet-avatar-rounded);\n  background-color: var(--_kemet-avatar-background-color);\n}\n\n:host > * {\n  border-radius: var(--_kemet-avatar-rounded);\n}\n\n:host([rounded]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);\n}\n\n.initials {\n  margin: var(--kemet-avatar-initials-margin);\n}\n\n::slotted(kemet-badge) {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: var(--kemet-border-radius-circle);\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;;;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;;;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;;;AH+Bf,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAsBE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AACX,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,EAGxB;AAAA,EAEA,WAAW;AACT,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,OAAO;AACd,aAAO,oCAAoC,KAAK,KAAK,QAAQ,KAAK,KAAK;AAAA,IACzE;AAEA,QAAI,KAAK,UAAU;AACjB,aAAO,6CAA6C,KAAK,QAAQ;AAAA,IACnE;AAEA,WAAO;AAAA,EACT;AACF;AA7DqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,YAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,YAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,YAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,YAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,YAsBnB;AAtBmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":[]}

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

@@ -8,6 +8,7 @@ import { LitElement } from 'lit';
  *
  * @tagname kemet-avatars
  * @summary Groups multiple avatar elements.
+ * @ssrsafe yes
  *
  * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.
  *

package/dist/elements/avatars/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/avatars/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/elements/avatars/styles.css.ts
 import { css } from "lit";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/avatars/index.ts","../../../src/elements/avatars/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatar elements.\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n * @fires kemet-avatars-mounted - Fires when the avatars are mounted.\n * @detail {element: HTMLElement} - The avatars element.\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars 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  firstUpdated() {\n    emitEvent(this, 'kemet-avatars-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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\n  }\n}\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --kemet-avatars-squeeze: -1.5rem;\n\n  display: inline-flex;\n}\n\n::slotted(kemet-avatar:not(:first-of-type)) {\n  margin-left: var(--kemet-avatars-squeeze);\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;AAC5C,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AFeA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAOE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAvBqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAPmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}
+{"version":3,"sources":["../../../src/elements/avatars/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/avatars/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatar elements.\n * @ssrsafe yes\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n * @fires kemet-avatars-mounted - Fires when the avatars are mounted.\n * @detail {element: HTMLElement} - The avatars element.\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars 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  firstUpdated() {\n    emitEvent(this, 'kemet-avatars-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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\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`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --kemet-avatars-squeeze: -1.5rem;\n\n  display: inline-flex;\n}\n\n::slotted(kemet-avatar:not(:first-of-type)) {\n  margin-left: var(--kemet-avatars-squeeze);\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,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;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHgBA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAOE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAvBqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAPmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

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

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { E as EnumAppearances, e as EnumRoundedSizes } from '../../constants-W9QKPlZP.js';
+import { E as EnumAppearances, e as EnumRoundedSizes } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**
@@ -10,6 +10,7 @@ import '../../form-controller-3q581XcZ.js';
  *
  * @tagname kemet-badge
  * @summary Badges display the status of information.
+ * @ssrsafe yes
  *
  * @prop {TypeStatus} status - The status of the badge
  * @prop {number} circlePadding - Padding on the badge as a circle

package/dist/elements/badge/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/badge/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/utilities/events.ts
 var emitEvent = (element, name, detail, bubbles = true, composed = true) => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\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-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: 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  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-badge-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 name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.Circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\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  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n * @ssrsafe yes\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\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-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: 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  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-badge-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 name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.Circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\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  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\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;;;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;;;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AH+Bf,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAOE,yBAAwB;AAMxB,oBAAoB;AAMpB,eAAc;AAGd,oBAAoB;AAGpB,qBAAqB;AAAA;AAAA,EAErB,eAAe;AACb,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,sCAC2B,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC3D,KAAK,WAAW,eAAe,EAAE;AAAA,0BACf,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC/C,KAAK,YAAY,eAAe,EAAE;AAAA,uCACH,MAAM,KAAK,kBAAkB,CAAC;AAAA;AAAA,EAEnE;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,mCAAqC;AAC5C,WAAK,MAAM,SAAS,GAAG,KAAK,cAAc,KAAK,aAAa;AAC5D,WAAK,MAAM,QAAQ,GAAG,KAAK,cAAc,KAAK,aAAa;AAAA,IAC7D;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,UAAM,OAAO,KAAK,cAAc,eAAe;AAC/C,QAAI,KAAM,MAAK,WAAW;AAAA,EAC5B;AAAA,EAEA,oBAAoB;AAClB,UAAM,QAAQ,KAAK,cAAc,gBAAgB;AACjD,QAAI,MAAO,MAAK,YAAY;AAAA,EAC9B;AACF;AAhEqB,WACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAHR,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB,CAAC;AAAA,GANpC,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,WAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,WAmBnB;AAGA;AAAA,EADC,MAAM;AAAA,GArBY,WAsBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAxBY,WAyBnB;AAzBmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}

package/dist/elements/button/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 TypeRoundedSizes, T as TypeAppearance } from '../../constants-W9QKPlZP.js';
+import { d as TypeRoundedSizes, T as TypeAppearance } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumVariants {
@@ -35,6 +35,7 @@ declare enum EnumSizes {
  *
  * @tagname kemet-button
  * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.
+ * @ssrsafe yes
  *
  * @prop {string} href - The url a button should link too
  * @prop {boolean} outlined - Outline style for a button

package/dist/elements/button/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/button/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+
+// src/utilities/decorators.ts
+import { property, state, query, queryAll } from "lit/decorators.js";
+import { customElement as litCustomElement } from "lit/decorators.js";
+var customElement = (tagName) => (classOrDescriptor) => typeof customElements !== "undefined" && !customElements.get(tagName) ? litCustomElement(tagName)(classOrDescriptor) : classOrDescriptor;
 
 // src/utilities/events.ts
 var emitEvent = (element, name, detail, bubbles = true, composed = true) => {