kemet-ui 5.0.0 → 5.0.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/button/index.ts","../../../src/utilities/events.ts","../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { TypeRoundedSizes, TypeAppearance } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumVariants {\n  Standard = 'standard',\n  Text = 'text',\n  Outlined = 'outlined',\n  Plain = 'plain',\n  Edge = 'edge',\n}\n\nexport enum EnumTargets {\n  Blank = '_blank',\n  Self = '_self',\n  Parent = '_parent',\n  Top = '_top'\n}\n\nexport enum EnumTypes {\n  Button = 'button',\n  Submit = 'submit',\n  Reset = 'reset'\n}\n\nexport enum EnumSizes {\n  XSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  XLarge = 'xl'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n *\n * @prop {string} href - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {TypeVariants} variant - Controls the type of button.\n * @prop {TypeTargets} target - The target attribute for a link\n * @prop {TypeTypes} type - The type attribute for a button\n * @prop {TypeRoundedSizes} rounded - The border radius of the button\n * @prop {EnumSizes} size - The size of the button\n * @prop {boolean} loading - Determines if the button is in a loading state\n * @prop {EnumAppearance} appearance - The appearance of the button'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 * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover state.\n * @cssproperty --kemet-button-active-brightness - The brightness of the active state.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n *\n * @fires kemet-button-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  href!: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ reflect: true })\n  variant: EnumVariants = EnumVariants.Standard;\n\n  @property()\n  target: EnumTargets = EnumTargets.Self;\n\n  @property()\n  type: EnumTypes = EnumTypes.Button;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n  iconLeft: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n  iconRight: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-button' })\n  iconButton: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  loading: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance!: TypeAppearance;\n\n  @property({ type: String, reflect: true })\n  size!: EnumSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n  @query('button')\n  internalButton!: HTMLButtonElement;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-button-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    if (this.href && !this.disabled) {\n      return html`\n        <a\n          href=${this.href}\n          target=${this.target}\n          class=\"button\"\n          part=\"button\"\n          @click=${(event: PointerEvent) => this.handleClick(event)}\n        >\n          <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n          <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n          ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n          <span class=\"text\"><slot></slot></span>\n          <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"button\"\n        part=\"button\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=${this.loading ? 'Loading' : ''}\n        @click=${(event: PointerEvent) => this.handleClick(event)}\n      >\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n        ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n        <span class=\"text\"><slot></slot></span>\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n      </button>\n    `;\n  }\n\n  private handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  private handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n\n  private handleIconButtonChange() {\n    const iconButton = this.querySelector('[slot=\"icon-button\"]');\n    if (iconButton) this.iconButton = true;\n  }\n\n  private makeLightDOMButton() {\n    const button = document.createElement('button');\n\n    for (const attribute of this.attributes) {\n      button.setAttribute(attribute.name, attribute.value);\n    }\n\n    button.type = this.type;\n    button.style.position = 'absolute !important';\n    button.style.width = '0 !important';\n    button.style.height = '0 !important';\n    button.style.clipPath = 'inset(50%) !important';\n    button.style.overflow = 'hidden !important';\n    button.style.whiteSpace = 'nowrap !important';\n    button.value = '';\n\n    return button;\n  }\n\n  private handleClick(event: PointerEvent) {\n    if (this.disabled || this.loading) {\n      event?.preventDefault();\n      return;\n    }\n\n    const form = this.closest('form');\n\n    if (!form || (this.type !== EnumTypes.Submit && this.type !== EnumTypes.Reset)) {\n      return;\n    }\n\n    const lightDOMButton = this.makeLightDOMButton();\n\n    form.appendChild(lightDOMButton);\n    lightDOMButton.click();\n    lightDOMButton.remove();\n  }\n\n\n  /**\n   * Triggers a click event on the button element.\n   * @method click\n   * @public\n   * @returns {void}\n   */\n  click() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.click();\n  }\n\n  /**\n   * Triggers a blur on the button element.\n   * @method blur\n   * @public\n   * @returns {void}\n   */\n  blur() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.blur();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\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-button-hover-brightness: 1.25;\n  --kemet-button-active-brightness: 1.75;\n  --kemet-button-circle-size: 50px;\n  --kemet-button-transition-speed: 300ms;\n  --kemet-button-gap: 0.5rem;\n  --kemet-button-border-width: 1.5px;\n  --kemet-button-border-style: solid;\n\n  /* private */\n  --_kemet-button-brightness: 1;\n  --_kemet-button-font-size: inherit;\n  --_kemet-button-width: auto;\n  --_kemet-button-height: auto;\n  --_kemet-button-padding: 1rem 1.25rem;\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border: 0;\n  --_kemet-button-border-radius: 0;\n  --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-hover-decoration: underline;\n  --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_kemet-button-font-size);\n  color: var(--_kemet-button-font-color);\n  width: var(--_kemet-button-width);\n  height: var(--_kemet-button-height);\n  border: var(--_kemet-button-border);\n  border-radius: var(--_kemet-button-border-radius);\n  filter: brightness(var(--_kemet-button-brightness));\n  transition: filter var(--kemet-button-transition-speed) ease;\n  background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n  --_kemet-button-font-color: var(--kemet-color-font-disabled);\n  --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n  --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  gap: var(--kemet-button-gap);\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  font-size: inherit;\n  width: 100%;\n  padding: var(--_kemet-button-padding);\n  border: 0;\n  background: none;\n}\n\n:host([disabled]) .button {\n  cursor: not-allowed;\n}\n\n:host([variant=text]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n  text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n  --_kemet-button-width: var(--kemet-button-circle-size);\n  --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-success);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-warning);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-error);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-info);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-link);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-padding: 0;\n  --_kemet-button-border: none;\n  --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n  --_kemet-button-font-size: 0.8rem;\n  --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n  --_kemet-button-font-size: 0.9rem;\n  --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n  --_kemet-button-font-size: 1.1rem;\n  --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n  --_kemet-button-font-size: 1.2rem;\n  --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n  --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n  --_kemet-button-padding:  1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n  --kemet-loader-color: var(--_kemet-button-font-color);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n  visibility: hidden;\n}\n\n:host([icon-button]) .text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n"],"mappings":"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","names":["EnumVariants","EnumTargets","EnumTypes","EnumSizes"]}
+{"version":3,"sources":["../../../src/elements/button/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from '../../utilities/decorators';\nimport type { TypeRoundedSizes, TypeAppearance } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumVariants {\n  Standard = 'standard',\n  Text = 'text',\n  Outlined = 'outlined',\n  Plain = 'plain',\n  Edge = 'edge',\n}\n\nexport enum EnumTargets {\n  Blank = '_blank',\n  Self = '_self',\n  Parent = '_parent',\n  Top = '_top'\n}\n\nexport enum EnumTypes {\n  Button = 'button',\n  Submit = 'submit',\n  Reset = 'reset'\n}\n\nexport enum EnumSizes {\n  XSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  XLarge = 'xl'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n * @ssrsafe yes\n *\n * @prop {string} href - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {TypeVariants} variant - Controls the type of button.\n * @prop {TypeTargets} target - The target attribute for a link\n * @prop {TypeTypes} type - The type attribute for a button\n * @prop {TypeRoundedSizes} rounded - The border radius of the button\n * @prop {EnumSizes} size - The size of the button\n * @prop {boolean} loading - Determines if the button is in a loading state\n * @prop {EnumAppearance} appearance - The appearance of the button'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 * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover state.\n * @cssproperty --kemet-button-active-brightness - The brightness of the active state.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n *\n * @fires kemet-button-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  href!: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ reflect: true })\n  variant: EnumVariants = EnumVariants.Standard;\n\n  @property()\n  target: EnumTargets = EnumTargets.Self;\n\n  @property()\n  type: EnumTypes = EnumTypes.Button;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n  iconLeft: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n  iconRight: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-button' })\n  iconButton: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  loading: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance!: TypeAppearance;\n\n  @property({ type: String, reflect: true })\n  size!: EnumSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n  @query('button')\n  internalButton!: HTMLButtonElement;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-button-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    if (this.href && !this.disabled) {\n      return html`\n        <a\n          href=${this.href}\n          target=${this.target}\n          class=\"button\"\n          part=\"button\"\n          @click=${(event: PointerEvent) => this.handleClick(event)}\n        >\n          <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n          <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n          ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n          <span class=\"text\"><slot></slot></span>\n          <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"button\"\n        part=\"button\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=${this.loading ? 'Loading' : ''}\n        @click=${(event: PointerEvent) => this.handleClick(event)}\n      >\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n        ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n        <span class=\"text\"><slot></slot></span>\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n      </button>\n    `;\n  }\n\n  private handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  private handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n\n  private handleIconButtonChange() {\n    const iconButton = this.querySelector('[slot=\"icon-button\"]');\n    if (iconButton) this.iconButton = true;\n  }\n\n  private makeLightDOMButton() {\n    const button = document.createElement('button');\n\n    for (const attribute of this.attributes) {\n      button.setAttribute(attribute.name, attribute.value);\n    }\n\n    button.type = this.type;\n    button.style.position = 'absolute !important';\n    button.style.width = '0 !important';\n    button.style.height = '0 !important';\n    button.style.clipPath = 'inset(50%) !important';\n    button.style.overflow = 'hidden !important';\n    button.style.whiteSpace = 'nowrap !important';\n    button.value = '';\n\n    return button;\n  }\n\n  private handleClick(event: PointerEvent) {\n    if (this.disabled || this.loading) {\n      event?.preventDefault();\n      return;\n    }\n\n    const form = this.closest('form');\n\n    if (!form || (this.type !== EnumTypes.Submit && this.type !== EnumTypes.Reset)) {\n      return;\n    }\n\n    const lightDOMButton = this.makeLightDOMButton();\n\n    form.appendChild(lightDOMButton);\n    lightDOMButton.click();\n    lightDOMButton.remove();\n  }\n\n\n  /**\n   * Triggers a click event on the button element.\n   * @method click\n   * @public\n   * @returns {void}\n   */\n  click() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.click();\n  }\n\n  /**\n   * Triggers a blur on the button element.\n   * @method blur\n   * @public\n   * @returns {void}\n   */\n  blur() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.blur();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\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-button-hover-brightness: 1.25;\n  --kemet-button-active-brightness: 1.75;\n  --kemet-button-circle-size: 50px;\n  --kemet-button-transition-speed: 300ms;\n  --kemet-button-gap: 0.5rem;\n  --kemet-button-border-width: 1.5px;\n  --kemet-button-border-style: solid;\n\n  /* private */\n  --_kemet-button-brightness: 1;\n  --_kemet-button-font-size: inherit;\n  --_kemet-button-width: auto;\n  --_kemet-button-height: auto;\n  --_kemet-button-padding: 1rem 1.25rem;\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border: 0;\n  --_kemet-button-border-radius: 0;\n  --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-hover-decoration: underline;\n  --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_kemet-button-font-size);\n  color: var(--_kemet-button-font-color);\n  width: var(--_kemet-button-width);\n  height: var(--_kemet-button-height);\n  border: var(--_kemet-button-border);\n  border-radius: var(--_kemet-button-border-radius);\n  filter: brightness(var(--_kemet-button-brightness));\n  transition: filter var(--kemet-button-transition-speed) ease;\n  background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n  --_kemet-button-font-color: var(--kemet-color-font-disabled);\n  --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n  --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  gap: var(--kemet-button-gap);\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  font-size: inherit;\n  width: 100%;\n  padding: var(--_kemet-button-padding);\n  border: 0;\n  background: none;\n}\n\n:host([disabled]) .button {\n  cursor: not-allowed;\n}\n\n:host([variant=text]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n  text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n  --_kemet-button-width: var(--kemet-button-circle-size);\n  --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-success);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-warning);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-error);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-info);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-link);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-padding: 0;\n  --_kemet-button-border: none;\n  --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n  --_kemet-button-font-size: 0.8rem;\n  --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n  --_kemet-button-font-size: 0.9rem;\n  --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n  --_kemet-button-font-size: 1.1rem;\n  --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n  --_kemet-button-font-size: 1.2rem;\n  --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n  --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n  --_kemet-button-padding:  1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n  --kemet-loader-color: var(--_kemet-button-font-color);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n  visibility: hidden;\n}\n\n:host([icon-button]) .text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n"],"mappings":"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","names":["EnumVariants","EnumTargets","EnumTypes","EnumSizes"]}

package/dist/elements/card/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 EnumRoundedSizes } from '../../constants-W9QKPlZP.js';
+import { e as EnumRoundedSizes } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumElevation {
@@ -19,6 +19,7 @@ declare enum EnumElevation {
  *
  * @tagname kemet-card
  * @summary A highly configurable panel design to display media and information.
+ * @ssrsafe yes
  *
  * @prop {boolean} center - Centers the elements in the card.
  * @prop {boolean} filled - Fills the card with a background color.

package/dist/elements/card/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/card/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/card/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/card/index.ts","../../../src/utilities/events.ts","../../../src/elements/card/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumElevation {\n  Level1 = 'level1',\n  Level2 = 'level2',\n  Level3 = 'level3',\n  Level4 = 'level4',\n  Level5 = 'level5',\n  Level6 = 'level6',\n  Inner = 'inner',\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n *\n * @prop {boolean} center - Centers the elements in the card.\n * @prop {boolean} filled - Fills the card with a background color.\n * @prop {boolean} borderless - Removes the border from the card.\n * @prop {EnumElevation} elevation - The elevation level of the card.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot default - The contents of the alert.\n * @slot header - The card's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements.\n * @cssproperty --kemet-card-border-color - The color of the borders.\n * @cssproperty --kemet-card-color - The color of the text. Default:\n * @cssproperty --kemet-card-max-width - The max width of the card.\n * @cssproperty --kemet-card-border - The border around the card.\n * @cssproperty --kemet-card-body-padding - The body spacing.\n * @cssproperty --kemet-card-header-padding - The header spacing.\n * @cssproperty --kemet-card-header-border-bottom - The header border.\n * @cssproperty --kemet-card-caption-color - The caption text color.\n * @cssproperty --kemet-card-caption-padding - The caption spacing.\n * @cssproperty --kemet-card-caption-background-color - The caption background color.\n * @cssproperty --kemet-card-footer-padding - The footer spacing.\n * @cssproperty --kemet-card-footer-border-top - The footer border.\n * @cssproperty --kemet-card-filled-color - The filled background color.\n *\n * @fires kemet-card-mounted - Fired when the card is mounted to the DOM\n * @detail {HTMLElement} element - The card element\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  borderless: boolean = false;\n\n  @property({ type: String, reflect: true })\n  elevation!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-card-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=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\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-card-font-color: inherit;\n  --kemet-card-max-width: 600px;\n  --kemet-card-padding: 1rem;\n  --kemet-card-border: 1px solid;\n  --kemet-card-caption-font-color: var(--kemet-color-font-base-inverse);\n  --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n  --kemet-card-caption-background-color: var(--kemet-color-background-overlay-dark);\n  --kemet-card-body-padding: var(--kemet-card-padding);\n  --kemet-card-header-padding: var(--kemet-card-padding);\n  --kemet-card-header-border-bottom: 1px solid;\n  --kemet-card-footer-padding: var(--kemet-card-padding);\n  --kemet-card-footer-border-top: 1px solid;\n  --kemet-card-filled-color: var(--kemet-color-background-base);\n\n  /* private */\n  --_kemet-card-border-radius: 0;\n  --_kemet-card-background-color: transparent;\n  --_kemet-card-elevation: none;\n\n  color: var(--kemet-card-font-color);\n  display: inline-flex;\n  flex-direction: column;\n  max-width: var(--kemet-card-max-width);\n  border: var(--kemet-card-border);\n  border-radius: var(--_kemet-card-border-radius);\n  background-color: var(--_kemet-card-background-color);\n  box-shadow: var(--_kemet-card-elevation);\n}\n\n:host([center]) {\n  align-items: center;\n  text-align: center;\n}\n\n:host([borderless]) ::slotted(*) {\n  border: none;\n}\n\n.body {\n  padding: var(--kemet-card-body-padding);\n}\n\n.media {\n  position: relative;\n}\n\n::slotted(*) {\n  max-width: 100%;\n}\n\n::slotted(img) {\n  display: flex;\n  max-width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-header-padding);\n  border-bottom: var(--kemet-card-header-border-bottom);\n}\n\n::slotted([slot=\"caption\"]) {\n  color: var(--kemet-card-caption-font-color);\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-caption-padding);\n  background-color: var(--kemet-card-caption-background-color);\n}\n\n:host([polarity=dark]) {\n  --kemet-card-caption-font-color: var(--kemet-color-font-base);\n}\n\n::slotted([slot=\"footer\"]) {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-footer-padding);\n  border-top: var(--kemet-card-footer-border-top);\n}\n\n:host([rounded]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([filled]) {\n  --kemet-card-border: none;\n  --_kemet-card-background-color: var(--kemet-card-filled-color);\n}\n\n:host([polarity=dark][filled]) {\n  --kemet-card-filled-color: var(--kemet-color-background-inverse);\n}\n\n:host([elevation]),\n:host([elevation=level1]) {\n  --_kemet-card-elevation: 0 1px 2px 0 rgba(0, 0, 0, .05);\n}\n\n:host([elevation=level2]) {\n  --_kemet-card-elevation: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);\n}\n\n:host([elevation=level3]) {\n  --_kemet-card-elevation: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);;\n}\n\n:host([elevation=level4]) {\n  --_kemet-card-elevation: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);;\n}\n\n:host([elevation=level5]) {\n  --_kemet-card-elevation: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);\n}\n\n:host([elevation=level6]) {\n  --_kemet-card-elevation: 0 25px 50px -12px rgba(0, 0, 0, .25);\n}\n\n:host([elevation=inner]) {\n  --_kemet-card-elevation: inset 0 2px 4px 0 rgba(0, 0, 0, .05);\n}\n`;\n"],"mappings":"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","names":["EnumElevation"]}
+{"version":3,"sources":["../../../src/elements/card/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/card/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumElevation {\n  Level1 = 'level1',\n  Level2 = 'level2',\n  Level3 = 'level3',\n  Level4 = 'level4',\n  Level5 = 'level5',\n  Level6 = 'level6',\n  Inner = 'inner',\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n * @ssrsafe yes\n *\n * @prop {boolean} center - Centers the elements in the card.\n * @prop {boolean} filled - Fills the card with a background color.\n * @prop {boolean} borderless - Removes the border from the card.\n * @prop {EnumElevation} elevation - The elevation level of the card.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot default - The contents of the alert.\n * @slot header - The card's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements.\n * @cssproperty --kemet-card-border-color - The color of the borders.\n * @cssproperty --kemet-card-color - The color of the text. Default:\n * @cssproperty --kemet-card-max-width - The max width of the card.\n * @cssproperty --kemet-card-border - The border around the card.\n * @cssproperty --kemet-card-body-padding - The body spacing.\n * @cssproperty --kemet-card-header-padding - The header spacing.\n * @cssproperty --kemet-card-header-border-bottom - The header border.\n * @cssproperty --kemet-card-caption-color - The caption text color.\n * @cssproperty --kemet-card-caption-padding - The caption spacing.\n * @cssproperty --kemet-card-caption-background-color - The caption background color.\n * @cssproperty --kemet-card-footer-padding - The footer spacing.\n * @cssproperty --kemet-card-footer-border-top - The footer border.\n * @cssproperty --kemet-card-filled-color - The filled background color.\n *\n * @fires kemet-card-mounted - Fired when the card is mounted to the DOM\n * @detail {HTMLElement} element - The card element\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  borderless: boolean = false;\n\n  @property({ type: String, reflect: true })\n  elevation!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-card-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=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\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-card-font-color: inherit;\n  --kemet-card-max-width: 600px;\n  --kemet-card-padding: 1rem;\n  --kemet-card-border: 1px solid;\n  --kemet-card-caption-font-color: var(--kemet-color-font-base-inverse);\n  --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n  --kemet-card-caption-background-color: var(--kemet-color-background-overlay-dark);\n  --kemet-card-body-padding: var(--kemet-card-padding);\n  --kemet-card-header-padding: var(--kemet-card-padding);\n  --kemet-card-header-border-bottom: 1px solid;\n  --kemet-card-footer-padding: var(--kemet-card-padding);\n  --kemet-card-footer-border-top: 1px solid;\n  --kemet-card-filled-color: var(--kemet-color-background-base);\n\n  /* private */\n  --_kemet-card-border-radius: 0;\n  --_kemet-card-background-color: transparent;\n  --_kemet-card-elevation: none;\n\n  color: var(--kemet-card-font-color);\n  display: inline-flex;\n  flex-direction: column;\n  max-width: var(--kemet-card-max-width);\n  border: var(--kemet-card-border);\n  border-radius: var(--_kemet-card-border-radius);\n  background-color: var(--_kemet-card-background-color);\n  box-shadow: var(--_kemet-card-elevation);\n}\n\n:host([center]) {\n  align-items: center;\n  text-align: center;\n}\n\n:host([borderless]) ::slotted(*) {\n  border: none;\n}\n\n.body {\n  padding: var(--kemet-card-body-padding);\n}\n\n.media {\n  position: relative;\n}\n\n::slotted(*) {\n  max-width: 100%;\n}\n\n::slotted(img) {\n  display: flex;\n  max-width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-header-padding);\n  border-bottom: var(--kemet-card-header-border-bottom);\n}\n\n::slotted([slot=\"caption\"]) {\n  color: var(--kemet-card-caption-font-color);\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-caption-padding);\n  background-color: var(--kemet-card-caption-background-color);\n}\n\n:host([polarity=dark]) {\n  --kemet-card-caption-font-color: var(--kemet-color-font-base);\n}\n\n::slotted([slot=\"footer\"]) {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-footer-padding);\n  border-top: var(--kemet-card-footer-border-top);\n}\n\n:host([rounded]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([filled]) {\n  --kemet-card-border: none;\n  --_kemet-card-background-color: var(--kemet-card-filled-color);\n}\n\n:host([polarity=dark][filled]) {\n  --kemet-card-filled-color: var(--kemet-color-background-inverse);\n}\n\n:host([elevation]),\n:host([elevation=level1]) {\n  --_kemet-card-elevation: 0 1px 2px 0 rgba(0, 0, 0, .05);\n}\n\n:host([elevation=level2]) {\n  --_kemet-card-elevation: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);\n}\n\n:host([elevation=level3]) {\n  --_kemet-card-elevation: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);;\n}\n\n:host([elevation=level4]) {\n  --_kemet-card-elevation: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);;\n}\n\n:host([elevation=level5]) {\n  --_kemet-card-elevation: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);\n}\n\n:host([elevation=level6]) {\n  --_kemet-card-elevation: 0 25px 50px -12px rgba(0, 0, 0, .25);\n}\n\n:host([elevation=inner]) {\n  --_kemet-card-elevation: inset 0 2px 4px 0 rgba(0, 0, 0, .05);\n}\n`;\n"],"mappings":"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","names":["EnumElevation"]}

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

@@ -2,7 +2,7 @@ import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
 import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
-import { E as EnumAppearances } from '../../constants-W9QKPlZP.js';
+import { E as EnumAppearances } from '../../constants-CHvA2ed5.js';
 
 /**
  * @since 1.0.0
@@ -10,6 +10,7 @@ import { E as EnumAppearances } from '../../constants-W9QKPlZP.js';
  *
  * @tagname kemet-checkbox
  * @summary An enhanced checkbox.
+ * @ssrsafe yes
  *
  * @prop {string} label - Label text for the checkbox
  * @prop {boolean} checked - Determines if the checkbox is selected

package/dist/elements/checkbox/index.js

@@ -11,7 +11,13 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/checkbox/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/elements/checkbox/index.ts
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/checkbox/index.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/checkbox/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances } from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-checkbox\n * @summary An enhanced checkbox.\n *\n * @prop {string} label - Label text for the checkbox\n * @prop {boolean} checked - Determines if the checkbox is selected\n * @prop {boolean} indeterminate - An indeterminate selection status\n * @prop {string} name - Name of the checkbox\n * @prop {string} value - Value of the checkbox\n * @prop {boolean} disabled - Determines if a checkbox is disabled\n * @prop {boolean} required - Determines if a checkbox is required\n * @prop {boolean} focused - Is true when the checkbox is focused\n * @prop {boolean} rounded - Gives the checkbox rounded edges\n * @prop {boolean} filled - Fills the checkbox with color\n * @prop {EnumAppearances} appearance - The status of the checkbox\n * @prop {string} message - Message associated with checkbox status\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @csspart label - The label element.\n * @csspart text - The label's text.\n * @csspart mark - The icon of the check mark.\n *\n * @cssproperty --kemet-checkbox-size - The width and height of the checkbox.\n * @cssproperty --kemet-checkbox-color - The color of the checkbox mark.\n * @cssproperty --kemet-checkbox-border - The border of the checkbox.\n * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox.\n * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox mark.\n * @cssproperty --kemet-checkbox-filled-background-color - The filled background color.\n *\n * @fires kemet-change - Fires when the state of the checkbox changes\n * @details {KemetCheckbox} element - The checkbox element\n *\n * @fires kemet-focus - Fires when the checkbox receives focus\n * @details {KemetCheckbox} element - The checkbox element\n *\n * @fires kemet-blur - Fires when the checkbox loses focus\n * @details {KemetCheckbox} element - The checkbox element\n *\n * @fires kemet-checkbox-mounted - Fires when the checkbox is mounted to the dom\n * @details {KemetCheckbox} element -The checkbox element\n *\n */\n\n@customElement('kemet-checkbox')\nexport default class KemetCheckbox extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate: boolean = false;\n\n  @property({ type: String })\n  name: string = 'checkbox';\n\n  @property({ type: Boolean })\n  value: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: String })\n  message: string = '';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-checkbox-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  constructor() {\n    super();\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"checkbox\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .indeterminate=${live(this.indeterminate)}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @click=${() => this.handleClick()}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n          @change=${() => this.handleChange()}\n        />\n        <button part=\"checkbox\" aria-label=${this.label}>\n          ${this.makeCheckMark()}\n        </button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n      ${this.makeMessage()}\n    `;\n  }\n\n  /**\n   * Simulates a click on the input element.\n   * @public\n   * @method click\n   * @returns {void}\n   */\n  click(): void {\n    this.input.click();\n  }\n\n  handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    emitEvent(this, 'kemet-change', { element: this });\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-blur', { element: this });\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-focus', { element: this });\n  }\n\n  handleChange() {\n    this.value = this.checked;\n  }\n\n  makeMessage() {\n    if (this.appearance === EnumAppearances.Error || this.appearance === EnumAppearances.Warning) {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckMark() {\n    if (this.checked) {\n      return html`\n        <span part=\"mark\">\n          <svg viewBox=\"0 0 16 16\">\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n              <g stroke=\"currentColor\" stroke-width=\"2\">\n                <g transform=\"translate(3.428571, 3.428571)\">\n                  <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                  <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n        </span>\n      `;\n    }\n\n    if (!this.checked && this.indeterminate) {\n      return html`\n        <span part=\"mark\">\n          <svg viewBox=\"0 0 16 16\">\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n              <g stroke=\"currentColor\" stroke-width=\"2\">\n                <g transform=\"translate(2.285714, 6.857143)\">\n                  <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n        </span>\n      `;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-checkbox': KemetCheckbox\n  }\n}\n","export class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-checkbox-size: 18px;\n  --kemet-checkbox-color: var(--kemet-color-background-inverse);\n  --kemet-checkbox-mark-color: var(--kemet-checkbox-color);\n  --kemet-checkbox-border: 1px solid var(--kemet-checkbox-color);\n  --kemet-checkbox-border-radius: 0;\n\n  /* private */\n  --_kemet-checkbox-background-color: transparent;\n\n  display: inline-block;\n}\n\n:host([disabled]) {\n  --kemet-checkbox-color: var(--kemet-color-background-disabled)\n}\n\nlabel {\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\ninput {\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  width: var(--kemet-checkbox-size);\n  height: var(--kemet-checkbox-size);\n  position: relative;\n  z-index: 99;\n  opacity: 0;\n}\n\nbutton {\n  margin: 0;\n  border: none;\n  background: none;\n}\n\n[part=checkbox] {\n  color: var(--kemet-checkbox-mark-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--kemet-checkbox-size);\n  height: var(--kemet-checkbox-size);\n  border: var(--kemet-checkbox-border);\n  border-radius: var(--kemet-checkbox-border-radius);\n  background-color: var(--_kemet-checkbox-background-color);\n  position: absolute;\n}\n\n:host([rounded]) [part=checkbox] {\n  --kemet-checkbox-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([filled]) {\n  --kemet-checkbox-mark-color: var(--kemet-color-font-inverse-base);\n  --kemet-checkbox-border: 1px solid var(--kemet-checkbox-color);\n  --_kemet-checkbox-background-color: var(--kemet-checkbox-color);\n}\n\n\n[part=mark] {\n  display: flex;\n  width: calc(var(--kemet-checkbox-size) - 4px);\n  height: calc(var(--kemet-checkbox-size) - 4px);\n}\n\n:host([filled][checked]) [part=mark],\n:host([filled][indeterminate]) [part=mark] {\n  --kemet-checkbox-mark-color: var(--kemet-color-font-base-inverse);\n}\n\n[part=message] {\n  display: block;\n  margin-top: 0.5rem;\n}\n\n:host([appearance=brand]) {\n  --kemet-checkbox-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-checkbox-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=warning]) {\n  --kemet-checkbox-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-checkbox-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-checkbox-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/checkbox/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/checkbox/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances } from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-checkbox\n * @summary An enhanced checkbox.\n * @ssrsafe yes\n *\n * @prop {string} label - Label text for the checkbox\n * @prop {boolean} checked - Determines if the checkbox is selected\n * @prop {boolean} indeterminate - An indeterminate selection status\n * @prop {string} name - Name of the checkbox\n * @prop {string} value - Value of the checkbox\n * @prop {boolean} disabled - Determines if a checkbox is disabled\n * @prop {boolean} required - Determines if a checkbox is required\n * @prop {boolean} focused - Is true when the checkbox is focused\n * @prop {boolean} rounded - Gives the checkbox rounded edges\n * @prop {boolean} filled - Fills the checkbox with color\n * @prop {EnumAppearances} appearance - The status of the checkbox\n * @prop {string} message - Message associated with checkbox status\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @csspart label - The label element.\n * @csspart text - The label's text.\n * @csspart mark - The icon of the check mark.\n *\n * @cssproperty --kemet-checkbox-size - The width and height of the checkbox.\n * @cssproperty --kemet-checkbox-color - The color of the checkbox mark.\n * @cssproperty --kemet-checkbox-border - The border of the checkbox.\n * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox.\n * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox mark.\n * @cssproperty --kemet-checkbox-filled-background-color - The filled background color.\n *\n * @fires kemet-change - Fires when the state of the checkbox changes\n * @details {KemetCheckbox} element - The checkbox element\n *\n * @fires kemet-focus - Fires when the checkbox receives focus\n * @details {KemetCheckbox} element - The checkbox element\n *\n * @fires kemet-blur - Fires when the checkbox loses focus\n * @details {KemetCheckbox} element - The checkbox element\n *\n * @fires kemet-checkbox-mounted - Fires when the checkbox is mounted to the dom\n * @details {KemetCheckbox} element -The checkbox element\n *\n */\n\n@customElement('kemet-checkbox')\nexport default class KemetCheckbox extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate: boolean = false;\n\n  @property({ type: String })\n  name: string = 'checkbox';\n\n  @property({ type: Boolean })\n  value: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: String })\n  message: string = '';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-checkbox-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  constructor() {\n    super();\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"checkbox\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .indeterminate=${live(this.indeterminate)}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @click=${() => this.handleClick()}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n          @change=${() => this.handleChange()}\n        />\n        <button part=\"checkbox\" aria-label=${this.label}>\n          ${this.makeCheckMark()}\n        </button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n      ${this.makeMessage()}\n    `;\n  }\n\n  /**\n   * Simulates a click on the input element.\n   * @public\n   * @method click\n   * @returns {void}\n   */\n  click(): void {\n    this.input.click();\n  }\n\n  handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    emitEvent(this, 'kemet-change', { element: this });\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-blur', { element: this });\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-focus', { element: this });\n  }\n\n  handleChange() {\n    this.value = this.checked;\n  }\n\n  makeMessage() {\n    if (this.appearance === EnumAppearances.Error || this.appearance === EnumAppearances.Warning) {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckMark() {\n    if (this.checked) {\n      return html`\n        <span part=\"mark\">\n          <svg viewBox=\"0 0 16 16\">\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n              <g stroke=\"currentColor\" stroke-width=\"2\">\n                <g transform=\"translate(3.428571, 3.428571)\">\n                  <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                  <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n        </span>\n      `;\n    }\n\n    if (!this.checked && this.indeterminate) {\n      return html`\n        <span part=\"mark\">\n          <svg viewBox=\"0 0 16 16\">\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n              <g stroke=\"currentColor\" stroke-width=\"2\">\n                <g transform=\"translate(2.285714, 6.857143)\">\n                  <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n        </span>\n      `;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-checkbox': KemetCheckbox\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 class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-checkbox-size: 18px;\n  --kemet-checkbox-color: var(--kemet-color-background-inverse);\n  --kemet-checkbox-mark-color: var(--kemet-checkbox-color);\n  --kemet-checkbox-border: 1px solid var(--kemet-checkbox-color);\n  --kemet-checkbox-border-radius: 0;\n\n  /* private */\n  --_kemet-checkbox-background-color: transparent;\n\n  display: inline-block;\n}\n\n:host([disabled]) {\n  --kemet-checkbox-color: var(--kemet-color-background-disabled)\n}\n\nlabel {\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\ninput {\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  width: var(--kemet-checkbox-size);\n  height: var(--kemet-checkbox-size);\n  position: relative;\n  z-index: 99;\n  opacity: 0;\n}\n\nbutton {\n  margin: 0;\n  border: none;\n  background: none;\n}\n\n[part=checkbox] {\n  color: var(--kemet-checkbox-mark-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--kemet-checkbox-size);\n  height: var(--kemet-checkbox-size);\n  border: var(--kemet-checkbox-border);\n  border-radius: var(--kemet-checkbox-border-radius);\n  background-color: var(--_kemet-checkbox-background-color);\n  position: absolute;\n}\n\n:host([rounded]) [part=checkbox] {\n  --kemet-checkbox-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([filled]) {\n  --kemet-checkbox-mark-color: var(--kemet-color-font-inverse-base);\n  --kemet-checkbox-border: 1px solid var(--kemet-checkbox-color);\n  --_kemet-checkbox-background-color: var(--kemet-checkbox-color);\n}\n\n\n[part=mark] {\n  display: flex;\n  width: calc(var(--kemet-checkbox-size) - 4px);\n  height: calc(var(--kemet-checkbox-size) - 4px);\n}\n\n:host([filled][checked]) [part=mark],\n:host([filled][indeterminate]) [part=mark] {\n  --kemet-checkbox-mark-color: var(--kemet-color-font-base-inverse);\n}\n\n[part=message] {\n  display: block;\n  margin-top: 0.5rem;\n}\n\n:host([appearance=brand]) {\n  --kemet-checkbox-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-checkbox-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=warning]) {\n  --kemet-checkbox-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-checkbox-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-checkbox-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":"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","names":[]}

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

@@ -1,4 +1,4 @@
 import 'lit-html';
 import 'lit';
-export { I as InterfaceKemetSelectionEvent, K as default } from '../../constants-W9QKPlZP.js';
+export { I as InterfaceKemetSelectionEvent, K as default } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';

package/dist/elements/combo/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/combo/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/combo/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/combo/index.ts","../../../src/utilities/events.ts","../../../src/elements/combo/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport type HTMLKemetFieldElement from '../field';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceKemetSelectionEvent {\n  element: KemetCombo;\n  text: string;\n  id: string;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-combo\n * @summary Allows the user to select a choice filtered through an Input. May only be used as a component of Field.\n *\n * @prop {string} slug - Uniquely identifies the component. Should match the slug used in a control.\n * @prop {array} options - An array of items listed for the combo box\n * @prop {boolean} show - Controls the display of the combo box\n *\n * @csspart combobox - The combo's container element.\n * @csspart listbox - The list element in the combo.\n *\n * @cssproperty --kemet-combo-width - The width of the combo box.\n * @cssproperty --kemet-combo-margin - The margins on the combo box.\n * @cssproperty --kemet-combo-max-height - The max height of the combo box.\n * @cssproperty --kemet-combo-border - The border of the combo box.\n * @cssproperty --kemet-combo-border-radius - The border radius of the combo box.\n * @cssproperty --kemet-combo-background-color - The background color of the combo box.\n * @cssproperty --kemet-combo-shadow - The shadow of the combo box.\n * @cssproperty --kemet-combo-hover-color - The hover item's text color.\n * @cssproperty --kemet-combo-hover-background-color - The hover item's background color.\n *\n * @event kemet-combo-selection - Fires when a selection has been made\n *\n */\n\n\n@customElement('kemet-combo')\nexport default class KemetCombo extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug?: string;\n\n  @property({ type: Array })\n  options: string[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  show!: boolean;\n\n  @state()\n  filteredOptions: string[] = [];\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  input!: HTMLInputElement;\n\n  firstUpdated() {\n    // standard properties\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.input = this.field.querySelector('[slot=\"input\"]') as HTMLInputElement;\n\n    // managed properties\n    this.slug = this.field.slug || 'slug';\n\n    // events listeners\n    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n    this.input.addEventListener('kemet-input-focus', this.handleFocus.bind(this));\n    this.input.addEventListener('kemet-input-combo-input', this.handleInput.bind(this));\n    this.input.addEventListener('kemet-input-combo-focus', this.handleFocus.bind(this));\n    this.input.addEventListener('keydown', event => this.handleInputKeyDown(event));\n  }\n\n  render() {\n    return html`\n      <div\n        role=\"combobox\"\n        part=\"combobox\"\n        aria-expanded=${this.show}\n        aria-controls=\"${this.slug}-listbox\"\n        aria-haspopup=\"listbox\"\n        id=\"${this.slug}-combobox\"\n        aria-label=\"${this.field?.label}\"\n      >\n        <ul role=\"listbox\" aria-labelledby=\"${this.slug}-label\" id=\"${this.slug}-listbox\" part=\"listbox\">\n          ${this.makeOptions()}\n        </ul>\n      </div>\n    `;\n  }\n\n  makeOptions() {\n    if (this.input) {\n      this.filteredOptions = this.options.filter(\n        option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,\n      );\n\n      if (this.filteredOptions.length < 1) {\n        this.show = false;\n        return null;\n      }\n\n      return this.filteredOptions.map(\n        (option, index) => html`<li\n            id=\"${this.slug}-option-${index}\"\n            role=\"option\"\n            tabindex=\"0\"\n            aria-selected=\"false\"\n            @click=${(event: KeyboardEvent) => this.handleSelection(event)}\n            @keydown=${(event: KeyboardEvent) => this.handleOptionKeyDown(event)}\n          >\n            ${option}\n          </li>`,\n      );\n    }\n\n    return null;\n  }\n\n  handleInput(event: Event) {\n    this.makeOptions();\n    this.show = (event as CustomEvent).detail.value.length > 0;\n  }\n\n  handleFocus() {\n    this.makeOptions();\n    this.show = true;\n  }\n\n  handleSelection(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    this.input.value = target.innerText;\n    this.show = false;\n\n    emitEvent(this, 'kemet-combo-selection', {\n      element: target,\n      text: target.innerText,\n      id: target.getAttribute('id'),\n    });\n  }\n\n  handleOptionKeyDown(event: KeyboardEvent) {\n    event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (event.code === 'ArrowDown') {\n      const next = target.nextElementSibling as HTMLElement;\n\n      if (next) {\n        next.focus();\n      } else {\n        this.shadowRoot?.querySelector('li')?.focus();\n      }\n    }\n\n    if (event.code === 'ArrowUp') {\n      const previous = target.previousElementSibling as HTMLElement;\n      const lastChild = this.shadowRoot?.querySelector('li:last-child') as HTMLElement;\n\n      if (previous) {\n        previous.focus();\n      } else {\n        lastChild.focus();\n      }\n    }\n\n    if (event.code === 'Escape' || event.code === 'Tab') {\n      this.show = false;\n      this.input.focus();\n    }\n\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.handleSelection(event);\n    }\n  }\n\n  handleInputKeyDown(event: KeyboardEvent) {\n    if (event.code === 'ArrowDown') {\n      this.shadowRoot?.querySelector('li')?.focus();\n    }\n\n    if (event.code === 'Escape') {\n      this.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-combo': KemetCombo\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-combo-width: calc(100% - 2px);\n  --kemet-combo-margin: 1rem auto;\n  --kemet-combo-max-height: calc(5 * 3rem);\n  --kemet-combo-border: 1px solid;\n  --kemet-combo-border-radius: var(--kemet-border-radius-md);\n  --kemet-combo-shadow: var(--kemet-elevation-layer-5);\n  --kemet-combo-font-color: var(--kemet-color-font-base);\n  --kemet-combo-background-color: var(--kemet-color-background-base);\n  --kemet-combo-item-background-color: var(--kemet-color-background-base);\n\n\n  opacity: 0;\n  width: var(--kemet-combo-width);\n  margin: var(--kemet-combo-margin);\n  pointer-events: none;\n  display: block;\n  position: relative;\n  transition: opacity 0.3s ease-in-out;\n}\n\n:host([show]) {\n  opacity: 1;\n  pointer-events: auto;\n}\n\nul {\n  width: 100%;\n  max-height: var(--kemet-combo-max-height);\n  position: absolute;\n  z-index: 1;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  border: var(--kemet-combo-border);\n  border-radius: var(--kemet-combo-border-radius);\n  box-shadow: var(--kemet-combo-shadow);\n  background-color: var(--kemet-combo-background-color);\n}\n\nli {\n  color: var(--kemet-combo-font-color);\n  line-height: 3rem;\n  padding: 0 1.5rem;\n  cursor: pointer;\n  background-color: var(--kemet-combo-item-background-color);\n}\n\nli:hover,\nli:focus {\n  --kemet-combo-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-combo-item-background-color: var(--kemet-color-background-inverse);\n  outline: none;\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/combo/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/combo/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport type HTMLKemetFieldElement from '../field';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceKemetSelectionEvent {\n  element: KemetCombo;\n  text: string;\n  id: string;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-combo\n * @summary Allows the user to select a choice filtered through an Input. May only be used as a component of Field.\n * @ssrsafe yes\n *\n * @prop {string} slug - Uniquely identifies the component. Should match the slug used in a control.\n * @prop {array} options - An array of items listed for the combo box\n * @prop {boolean} show - Controls the display of the combo box\n *\n * @csspart combobox - The combo's container element.\n * @csspart listbox - The list element in the combo.\n *\n * @cssproperty --kemet-combo-width - The width of the combo box.\n * @cssproperty --kemet-combo-margin - The margins on the combo box.\n * @cssproperty --kemet-combo-max-height - The max height of the combo box.\n * @cssproperty --kemet-combo-border - The border of the combo box.\n * @cssproperty --kemet-combo-border-radius - The border radius of the combo box.\n * @cssproperty --kemet-combo-background-color - The background color of the combo box.\n * @cssproperty --kemet-combo-shadow - The shadow of the combo box.\n * @cssproperty --kemet-combo-hover-color - The hover item's text color.\n * @cssproperty --kemet-combo-hover-background-color - The hover item's background color.\n *\n * @event kemet-combo-selection - Fires when a selection has been made\n *\n */\n\n\n@customElement('kemet-combo')\nexport default class KemetCombo extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug?: string;\n\n  @property({ type: Array })\n  options: string[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  show!: boolean;\n\n  @state()\n  filteredOptions: string[] = [];\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  input!: HTMLInputElement;\n\n  firstUpdated() {\n    // standard properties\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.input = this.field.querySelector('[slot=\"input\"]') as HTMLInputElement;\n\n    // managed properties\n    this.slug = this.field.slug || 'slug';\n\n    // events listeners\n    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n    this.input.addEventListener('kemet-input-focus', this.handleFocus.bind(this));\n    this.input.addEventListener('kemet-input-combo-input', this.handleInput.bind(this));\n    this.input.addEventListener('kemet-input-combo-focus', this.handleFocus.bind(this));\n    this.input.addEventListener('keydown', event => this.handleInputKeyDown(event));\n  }\n\n  render() {\n    return html`\n      <div\n        role=\"combobox\"\n        part=\"combobox\"\n        aria-expanded=${this.show}\n        aria-controls=\"${this.slug}-listbox\"\n        aria-haspopup=\"listbox\"\n        id=\"${this.slug}-combobox\"\n        aria-label=\"${this.field?.label}\"\n      >\n        <ul role=\"listbox\" aria-labelledby=\"${this.slug}-label\" id=\"${this.slug}-listbox\" part=\"listbox\">\n          ${this.makeOptions()}\n        </ul>\n      </div>\n    `;\n  }\n\n  makeOptions() {\n    if (this.input) {\n      this.filteredOptions = this.options.filter(\n        option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,\n      );\n\n      if (this.filteredOptions.length < 1) {\n        this.show = false;\n        return null;\n      }\n\n      return this.filteredOptions.map(\n        (option, index) => html`<li\n            id=\"${this.slug}-option-${index}\"\n            role=\"option\"\n            tabindex=\"0\"\n            aria-selected=\"false\"\n            @click=${(event: KeyboardEvent) => this.handleSelection(event)}\n            @keydown=${(event: KeyboardEvent) => this.handleOptionKeyDown(event)}\n          >\n            ${option}\n          </li>`,\n      );\n    }\n\n    return null;\n  }\n\n  handleInput(event: Event) {\n    this.makeOptions();\n    this.show = (event as CustomEvent).detail.value.length > 0;\n  }\n\n  handleFocus() {\n    this.makeOptions();\n    this.show = true;\n  }\n\n  handleSelection(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    this.input.value = target.innerText;\n    this.show = false;\n\n    emitEvent(this, 'kemet-combo-selection', {\n      element: target,\n      text: target.innerText,\n      id: target.getAttribute('id'),\n    });\n  }\n\n  handleOptionKeyDown(event: KeyboardEvent) {\n    event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (event.code === 'ArrowDown') {\n      const next = target.nextElementSibling as HTMLElement;\n\n      if (next) {\n        next.focus();\n      } else {\n        this.shadowRoot?.querySelector('li')?.focus();\n      }\n    }\n\n    if (event.code === 'ArrowUp') {\n      const previous = target.previousElementSibling as HTMLElement;\n      const lastChild = this.shadowRoot?.querySelector('li:last-child') as HTMLElement;\n\n      if (previous) {\n        previous.focus();\n      } else {\n        lastChild.focus();\n      }\n    }\n\n    if (event.code === 'Escape' || event.code === 'Tab') {\n      this.show = false;\n      this.input.focus();\n    }\n\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.handleSelection(event);\n    }\n  }\n\n  handleInputKeyDown(event: KeyboardEvent) {\n    if (event.code === 'ArrowDown') {\n      this.shadowRoot?.querySelector('li')?.focus();\n    }\n\n    if (event.code === 'Escape') {\n      this.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-combo': KemetCombo\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-combo-width: calc(100% - 2px);\n  --kemet-combo-margin: 1rem auto;\n  --kemet-combo-max-height: calc(5 * 3rem);\n  --kemet-combo-border: 1px solid;\n  --kemet-combo-border-radius: var(--kemet-border-radius-md);\n  --kemet-combo-shadow: var(--kemet-elevation-layer-5);\n  --kemet-combo-font-color: var(--kemet-color-font-base);\n  --kemet-combo-background-color: var(--kemet-color-background-base);\n  --kemet-combo-item-background-color: var(--kemet-color-background-base);\n\n\n  opacity: 0;\n  width: var(--kemet-combo-width);\n  margin: var(--kemet-combo-margin);\n  pointer-events: none;\n  display: block;\n  position: relative;\n  transition: opacity 0.3s ease-in-out;\n}\n\n:host([show]) {\n  opacity: 1;\n  pointer-events: auto;\n}\n\nul {\n  width: 100%;\n  max-height: var(--kemet-combo-max-height);\n  position: absolute;\n  z-index: 1;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  border: var(--kemet-combo-border);\n  border-radius: var(--kemet-combo-border-radius);\n  box-shadow: var(--kemet-combo-shadow);\n  background-color: var(--kemet-combo-background-color);\n}\n\nli {\n  color: var(--kemet-combo-font-color);\n  line-height: 3rem;\n  padding: 0 1.5rem;\n  cursor: pointer;\n  background-color: var(--kemet-combo-item-background-color);\n}\n\nli:hover,\nli:focus {\n  --kemet-combo-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-combo-item-background-color: var(--kemet-color-background-inverse);\n  outline: none;\n}\n`;\n"],"mappings":"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","names":[]}

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

@@ -1,4 +1,4 @@
 import 'lit-html';
 import 'lit';
-export { m as InterfaceAppearanceChangeEvent, a as default } from '../../constants-W9QKPlZP.js';
+export { m as InterfaceAppearanceChangeEvent, a as default } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';

package/dist/elements/count/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/count/index.ts
 import { html, css, 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) => {
@@ -22,6 +26,10 @@ var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
 
 // src/elements/count/index.ts
 var KemetCount = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dom = "initializing";
+  }
   firstUpdated() {
     this.field = this.closest("kemet-field");
     this.inputSlot = this.field.querySelector('[slot="input"]');
@@ -30,12 +38,25 @@ var KemetCount = class extends LitElement {
     this.field.addEventListener("kemet-textarea-input", (event) => this.handleInput(event));
     this.input = this.inputSlot?.shadowRoot?.querySelector("input") || null;
     this.textarea = this.inputSlot?.shadowRoot?.querySelector("textarea") || null;
+    emitEvent(this, "kemet-count-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
   }
   render() {
+    if (isNaN(this.remaining)) {
+      this.remaining = this.limit;
+    }
     return html`${this.remaining} ${this.message}`;
   }
   handleInput(event) {
+    console.log("event detail", event.detail);
     this.remaining = this.limit - event.detail.value.length;
+    console.log("remaining", this.remaining);
     const nativeElement = this.input || this.textarea;
     if (nativeElement) {
       if (this.remaining < 0) {
@@ -78,6 +99,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "validate-immediately" })
 ], KemetCount.prototype, "validateImmediately", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetCount.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetCount.prototype, "dom", 2);
 __decorateClass([
   state()
 ], KemetCount.prototype, "remaining", 2);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/count/index.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport { EnumAppearances } from '../../utilities/constants';\n\nexport interface InterfaceAppearanceChangeEvent {\n  appearance: EnumAppearances;\n  validity: ValidityState;\n  element: HTMLKemetFieldElement;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-count\n * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.\n *\n * @prop {string} message - The text label shown to users\n * @prop {number} remaining - The number of characters remaining\n * @prop {number} limit - The maximum number of characters allowed\n * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached\n *\n * @cssproperty --kemet-count-font-size - The font size. Default: 90%.\n *\n * @fires kemet-count-appearance-change - Fires when there's a change in status.\n *\n */\n\n@customElement('kemet-count')\nexport default class KemetCount extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        font-size: var(--kemet-count-font-size, 90%);\n        margin-top: 0.8rem;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Number })\n  limit!: number;\n\n  @property({ type: Boolean, attribute: 'validate-immediately' })\n  validateImmediately!: boolean;\n\n  @state()\n  remaining!: number;\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  inputSlot!: HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n  @state()\n  input!: HTMLInputElement | null;\n\n  @state()\n  textarea!: HTMLTextAreaElement | null;\n\n  firstUpdated() {\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.inputSlot = this.field.querySelector('[slot=\"input\"]') as HTMLKemetInputElement | HTMLKemetTextareaElement;\n    this.remaining = this.limit - this.field.length;\n\n    this.field.addEventListener('kemet-input-input', (event: Event) => this.handleInput(event));\n    this.field.addEventListener('kemet-textarea-input', (event: Event) => this.handleInput(event));\n\n    this.input = this.inputSlot?.shadowRoot?.querySelector('input') || null;\n    this.textarea = this.inputSlot?.shadowRoot?.querySelector('textarea') || null;\n  }\n\n  render() {\n    return html`${this.remaining} ${this.message}`;\n  }\n\n  handleInput(event: Event) {\n    this.remaining = this.limit - (event as CustomEvent).detail.value.length;\n\n    const nativeElement = this.input || this.textarea;\n\n    if (nativeElement) {\n      if (this.remaining < 0) {\n        if (this.validateImmediately) {\n          (this.inputSlot as any).appearance = EnumAppearances.Error;\n          (this.inputSlot as any).invalid = true;\n\n          emitEvent(this, 'kemet-count-appearance-change', {\n            status: EnumAppearances.Error,\n            validity: nativeElement.validity,\n            element: this.inputSlot,\n          });\n        }\n      } else {\n        (this.inputSlot as any).appearance = EnumAppearances.Neutral;\n        nativeElement.checkValidity();\n\n        emitEvent(this, 'kemet-count-appearance-change', {\n          appearance: EnumAppearances.Neutral,\n          validity: nativeElement.validity,\n          element: this.inputSlot,\n        });\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-count': KemetCount\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,KAAK,kBAAkB;AACtC,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;;;AD6BA,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAmCjD,eAAe;AACb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,YAAY,KAAK,MAAM,cAAc,gBAAgB;AAC1D,SAAK,YAAY,KAAK,QAAQ,KAAK,MAAM;AAEzC,SAAK,MAAM,iBAAiB,qBAAqB,CAAC,UAAiB,KAAK,YAAY,KAAK,CAAC;AAC1F,SAAK,MAAM,iBAAiB,wBAAwB,CAAC,UAAiB,KAAK,YAAY,KAAK,CAAC;AAE7F,SAAK,QAAQ,KAAK,WAAW,YAAY,cAAc,OAAO,KAAK;AACnE,SAAK,WAAW,KAAK,WAAW,YAAY,cAAc,UAAU,KAAK;AAAA,EAC3E;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,SAAS,IAAI,KAAK,OAAO;AAAA,EAC9C;AAAA,EAEA,YAAY,OAAc;AACxB,SAAK,YAAY,KAAK,QAAS,MAAsB,OAAO,MAAM;AAElE,UAAM,gBAAgB,KAAK,SAAS,KAAK;AAEzC,QAAI,eAAe;AACjB,UAAI,KAAK,YAAY,GAAG;AACtB,YAAI,KAAK,qBAAqB;AAC5B,UAAC,KAAK,UAAkB;AACxB,UAAC,KAAK,UAAkB,UAAU;AAElC,oBAAU,MAAM,iCAAiC;AAAA,YAC/C;AAAA,YACA,UAAU,cAAc;AAAA,YACxB,SAAS,KAAK;AAAA,UAChB,CAAC;AAAA,QACH;AAAA,MACF,OAAO;AACL,QAAC,KAAK,UAAkB;AACxB,sBAAc,cAAc;AAE5B,kBAAU,MAAM,iCAAiC;AAAA,UAC/C;AAAA,UACA,UAAU,cAAc;AAAA,UACxB,SAAS,KAAK;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;AAhFqB,WACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,WAYnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,WAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,uBAAuB,CAAC;AAAA,GAjB3C,WAkBnB;AAGA;AAAA,EADC,MAAM;AAAA,GApBY,WAqBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAvBY,WAwBnB;AAGA;AAAA,EADC,MAAM;AAAA,GA1BY,WA2BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA7BY,WA8BnB;AAGA;AAAA,EADC,MAAM;AAAA,GAhCY,WAiCnB;AAjCmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}
+{"version":3,"sources":["../../../src/elements/count/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport { EnumAppearances } from '../../utilities/constants';\n\nexport interface InterfaceAppearanceChangeEvent {\n  appearance: EnumAppearances;\n  validity: ValidityState;\n  element: HTMLKemetFieldElement;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-count\n * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.\n * @ssrsafe yes\n *\n * @prop {string} message - The text label shown to users\n * @prop {number} remaining - The number of characters remaining\n * @prop {number} limit - The maximum number of characters allowed\n * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @cssproperty --kemet-count-font-size - The font size. Default: 90%.\n *\n * @fires kemet-count-appearance-change - Fires when there's a change in status.\n *\n * @fires kemet-count-mounted - Fired when the count is mounted to the DOM\n * @detail {HTMLElement} element - The count element\n *\n */\n\n@customElement('kemet-count')\nexport default class KemetCount extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        font-size: var(--kemet-count-font-size, 90%);\n        margin-top: 0.8rem;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Number })\n  limit!: number;\n\n  @property({ type: Boolean, attribute: 'validate-immediately' })\n  validateImmediately!: boolean;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  remaining!: number;\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  inputSlot!: HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n  @state()\n  input!: HTMLInputElement | null;\n\n  @state()\n  textarea!: HTMLTextAreaElement | null;\n\n  firstUpdated() {\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.inputSlot = this.field.querySelector('[slot=\"input\"]') as HTMLKemetInputElement | HTMLKemetTextareaElement;\n    this.remaining = this.limit - this.field.length;\n\n    this.field.addEventListener('kemet-input-input', (event: Event) => this.handleInput(event));\n    this.field.addEventListener('kemet-textarea-input', (event: Event) => this.handleInput(event));\n\n    this.input = this.inputSlot?.shadowRoot?.querySelector('input') || null;\n    this.textarea = this.inputSlot?.shadowRoot?.querySelector('textarea') || null;\n\n    emitEvent(this, 'kemet-count-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    if (isNaN(this.remaining)) {\n      this.remaining = this.limit;\n    }\n    return html`${this.remaining} ${this.message}`;\n  }\n\n  handleInput(event: Event) {\n    console.log('event detail', (event as CustomEvent).detail);\n    this.remaining = this.limit - (event as CustomEvent).detail.value.length;\n    console.log('remaining', this.remaining);\n\n    const nativeElement = this.input || this.textarea;\n\n    if (nativeElement) {\n      if (this.remaining < 0) {\n        if (this.validateImmediately) {\n          (this.inputSlot as any).appearance = EnumAppearances.Error;\n          (this.inputSlot as any).invalid = true;\n\n          emitEvent(this, 'kemet-count-appearance-change', {\n            status: EnumAppearances.Error,\n            validity: nativeElement.validity,\n            element: this.inputSlot,\n          });\n        }\n      } else {\n        (this.inputSlot as any).appearance = EnumAppearances.Neutral;\n        nativeElement.checkValidity();\n\n        emitEvent(this, 'kemet-count-appearance-change', {\n          appearance: EnumAppearances.Neutral,\n          validity: nativeElement.validity,\n          element: this.inputSlot,\n        });\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-count': KemetCount\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;;;ACAtC,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AFmCA,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAwBE,eAAc;AAAA;AAAA,EAiBd,eAAe;AACb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,YAAY,KAAK,MAAM,cAAc,gBAAgB;AAC1D,SAAK,YAAY,KAAK,QAAQ,KAAK,MAAM;AAEzC,SAAK,MAAM,iBAAiB,qBAAqB,CAAC,UAAiB,KAAK,YAAY,KAAK,CAAC;AAC1F,SAAK,MAAM,iBAAiB,wBAAwB,CAAC,UAAiB,KAAK,YAAY,KAAK,CAAC;AAE7F,SAAK,QAAQ,KAAK,WAAW,YAAY,cAAc,OAAO,KAAK;AACnE,SAAK,WAAW,KAAK,WAAW,YAAY,cAAc,UAAU,KAAK;AAEzE,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,QAAI,MAAM,KAAK,SAAS,GAAG;AACzB,WAAK,YAAY,KAAK;AAAA,IACxB;AACA,WAAO,OAAO,KAAK,SAAS,IAAI,KAAK,OAAO;AAAA,EAC9C;AAAA,EAEA,YAAY,OAAc;AACxB,YAAQ,IAAI,gBAAiB,MAAsB,MAAM;AACzD,SAAK,YAAY,KAAK,QAAS,MAAsB,OAAO,MAAM;AAClE,YAAQ,IAAI,aAAa,KAAK,SAAS;AAEvC,UAAM,gBAAgB,KAAK,SAAS,KAAK;AAEzC,QAAI,eAAe;AACjB,UAAI,KAAK,YAAY,GAAG;AACtB,YAAI,KAAK,qBAAqB;AAC5B,UAAC,KAAK,UAAkB;AACxB,UAAC,KAAK,UAAkB,UAAU;AAElC,oBAAU,MAAM,iCAAiC;AAAA,YAC/C;AAAA,YACA,UAAU,cAAc;AAAA,YACxB,SAAS,KAAK;AAAA,UAChB,CAAC;AAAA,QACH;AAAA,MACF,OAAO;AACL,QAAC,KAAK,UAAkB;AACxB,sBAAc,cAAc;AAE5B,kBAAU,MAAM,iCAAiC;AAAA,UAC/C;AAAA,UACA,UAAU,cAAc;AAAA,UACxB,SAAS,KAAK;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;AApGqB,WACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,WAYnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,WAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,uBAAuB,CAAC;AAAA,GAjB3C,WAkBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GApBtB,WAqBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAvBtB,WAwBnB;AAGA;AAAA,EADC,MAAM;AAAA,GA1BY,WA2BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA7BY,WA8BnB;AAGA;AAAA,EADC,MAAM;AAAA,GAhCY,WAiCnB;AAGA;AAAA,EADC,MAAM;AAAA,GAnCY,WAoCnB;AAGA;AAAA,EADC,MAAM;AAAA,GAtCY,WAuCnB;AAvCmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}

package/dist/elements/dialog/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 EnumRoundedSizes } from '../../constants-W9QKPlZP.js';
+import { e as EnumRoundedSizes } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumEffects {
@@ -25,6 +25,7 @@ declare enum EnumEffects {
  *
  * @tagname kemet-dialog
  * @summary A dialog that has many built-in effects and flexible styles.
+ * @ssrsafe yes
  *
  * @prop {boolean} opened
  * @prop {string} effect

package/dist/elements/dialog/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/dialog/index.ts
 import { html, LitElement } from "lit";
-import { customElement, property, query, 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) => {