kemet-ui 5.0.0 → 5.0.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/dialog/index.ts","../../../src/utilities/events.ts","../../../src/elements/dialog/styles.css.ts","../../../src/elements/dialog/effects.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\nimport styles from './styles.css.ts';\nimport stylesEffects from './effects.css.ts';\n\nexport enum EnumEffects {\n  FadeinScaleup = 'fadein-scaleup',\n  SlideRight = 'slide-right',\n  SlideBottom = 'slide-bottom',\n  Newspaper = 'newspaper',\n  Fall = 'fall',\n  SideFall = 'side-fall',\n  FlipHorizontal = 'flip-horizontal',\n  FlipVertical = 'flip-vertical',\n  Sign3d = 'sign-3d',\n  SuperScaled = 'super-scaled',\n  Slit = 'slit',\n  RotateBottom = 'rotate-bottom',\n  RotateLeft = 'rotate-left'\n}\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-dialog\n * @summary A dialog that has many built-in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n * @prop {EnumRoundedSizes} rounded\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 dialog - The main contents of the dialog.\n * @csspart overlay - The surrounding scrim of the dialog.\n *\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.\n * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.\n * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.\n * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.\n * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n *\n * @event kemet-dialog-opened - Fires when the dialog opens\n * @event kemet-dialog-closed - Fires when the dialog closes\n *\n */\n\n@customElement('kemet-dialog')\nexport default class Dialog extends LitElement {\n  static styles = [styles, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect?: EnumEffects;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @query('dialog')\n  dialogElement!: HTMLDialogElement;\n\n  /** @internal */\n  @state()\n  focusableSelector!: string;\n\n  /** @internal */\n  @state()\n  focusableElements!: NodeListOf<Element>;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-dialog-close-pressed', () => { this.handleClose(); });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.handleClose();\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-dialog') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      (element as HTMLElement).addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\n\n    emitEvent(this, 'kemet-dialog-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.handleOpen();\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.handleClose();\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <dialog part=\"dialog\" @close=${() => this.handleClose()}>\n        <slot></slot>\n      </dialog>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleOpen() {\n    this.opened = true;\n    if (this.dialogElement?.showModal) this.dialogElement.showModal();\n    emitEvent(this, 'kemet-dialog-opened', { element: this });\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-dialog-closed', { element: this });\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-dialog': Dialog\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-dialog-transition-speed: 0.3s;\n  --kemet-dialog-min-width: 0;\n  --kemet-dialog-max-width: none;\n  --kemet-dialog-mobile-width: calc(100% - 2rem);\n  --kemet-dialog-mobile-margin: 0 auto;\n  --kemet-dialog-mobile-padding: 1rem;\n  --kemet-dialog-font-color: var(--kemet-color-font-base);\n  --kemet-dialog-background-color: var(--kemet-color-background-base);\n  --kemet-dialog-overlay-color: rgb(0 0 0 / 80%);\n\n  /* private */\n  --kemet-dialog-radius: 0;\n\n  position: fixed;\n  display: flex;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  width: 100%;\n  height: 100vh;\n  visibility: hidden;\n  backface-visibility: hidden;\n}\n\n:host([opened]) {\n  visibility: visible;\n}\n\ndialog {\n  color: var(--kemet-dialog-font-color);\n  display: block;\n  z-index: 3;\n  margin: auto;\n  min-width: var(--kemet-dialog-min-width);\n  max-width: var(--kemet-dialog-max-width);\n  border: 0;\n  border-radius: var(--kemet-dialog-radius);\n  background: var(--kemet-dialog-background-color);\n}\n\ndialog::backdrop {\n  background: none;\n}\n\n:host([mobile]) dialog {\n  margin: var(--kemet-dialog-mobile-margin);\n  width: var(--kemet-dialog-mobile-width);\n  padding: var(--kemet-dialog-mobile-padding);\n  inset-block-start: auto;\n}\n\n:host([rounded]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded][mobile]) dialog {\n  border-top-left-radius: var(--kemet-dialog-radius);\n  border-top-right-radius: var(--kemet-dialog-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n[part=overlay] {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  opacity: 0;\n  background: var(--kemet-dialog-overlay-color);\n  transition: all var(--kemet-dialog-transition-speed);\n}\n\n:host([opened]) [part=overlay] {\n  opacity: 1;\n  visibility: visible;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`/* default */\n:host([effect]) dialog {\n  transform: scale(0.7);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n/* fadein-scaleup */\n:host([effect=\"fadein-scaleup\"]) dialog {\n  transform: scale(0.7);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"fadein-scaleup\"][opened]) dialog {\n  transform: scale(1);\n  opacity: 1;\n}\n\n/* slide-right */\n:host([effect=\"slide-right\"]) dialog {\n  transform: translateX(20%);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n}\n\n:host([effect=\"slide-right\"][opened]) dialog {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/* slide-bottom */\n:host([effect=\"slide-bottom\"]) dialog {\n  transform: translateY(20%);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"slide-bottom\"][opened]) dialog {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n/* newspaper */\n:host([effect=\"newspaper\"]) dialog {\n  transform: scale(0) rotate(720deg);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"newspaper\"][opened]) dialog {\n  transform: scale(1) rotate(0deg);\n  opacity: 1;\n}\n\n/* fall */\n:host([effect=\"fall\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"fall\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(600px) rotateX(20deg);\n  opacity: 0;\n}\n\n:host([effect=\"fall\"][opened]) dialog {\n  transition: all var(--kemet-modal-transition-speed) ease-in;\n  transform: translateZ(0px) rotateX(0deg);\n  opacity: 1;\n}\n\n/* side-fall */\n:host([effect=\"side-fall\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"side-fall\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translate(30%) translateZ(600px) rotate(10deg);\n  opacity: 0;\n}\n\n:host([effect=\"side-fall\"][opened]) dialog {\n  transition: all var(--kemet-modal-transition-speed) ease-in;\n  transform: translate(0%) translateZ(0) rotate(0deg);\n  opacity: 1;\n}\n\n/* flip-horizontal */\n:host([effect=\"flip-horizontal\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"flip-horizontal\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateY(-70deg);\n  transition: all var(--kemet-modal-transition-speed);\n  opacity: 0;\n}\n\n:host([effect=\"flip-horizontal\"][opened]) dialog {\n  transform: rotateY(0deg);\n  opacity: 1;\n}\n\n/* flip-vertical */\n:host([effect=\"flip-vertical\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"flip-vertical\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateX(-70deg);\n  transition: all var(--kemet-modal-transition-speed);\n  opacity: 0;\n}\n\n:host([effect=\"flip-vertical\"][opened]) dialog {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n/* sign-3d */\n:host([effect=\"sign-3d\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"sign-3d\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateX(-60deg);\n  transform-origin: 50% 0;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"sign-3d\"][opened]) dialog {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n/* super-scaled */\n:host([effect=\"super-scaled\"]) dialog {\n  transform: scale(2);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"super-scaled\"][opened]) dialog {\n  transform: scale(1);\n  opacity: 1;\n}\n\n/* slit */\n:host([effect=\"slit\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"slit\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(-3000px) rotateY(90deg);\n  opacity: 0;\n}\n\n:host([effect=\"slit\"][opened]) dialog {\n  animation: slit .7s forwards ease-out;\n}\n\n@keyframes slit {\n  50% {\n    transform: translateZ(-250px) rotateY(89deg);\n    opacity: 1;\n    animation-timing-function: ease-in;}\n  100% {\n    transform: translateZ(0) rotateY(0deg);\n    opacity: 1;\n  }\n}\n\n/* rotate-bottom */\n:host([effect=\"rotate-bottom\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"rotate-bottom\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateY(100%) rotateX(90deg);\n  transform-origin: 0 100%;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed) ease-out;\n}\n\n:host([effect=\"rotate-bottom\"][opened]) dialog {\n  transform: translateY(0%) rotateX(0deg);\n  opacity: 1;\n}\n\n/* rotate-left */\n:host([effect=\"rotate-left\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"rotate-left\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  transform-origin: 0 100%;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"rotate-left\"][opened]) dialog {\n  transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  opacity: 1;\n}\n`;\n"],"mappings":"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","names":["css","EnumEffects"]}
+{"version":3,"sources":["../../../src/elements/dialog/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/dialog/styles.css.ts","../../../src/elements/dialog/effects.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\nimport styles from './styles.css.ts';\nimport stylesEffects from './effects.css.ts';\n\nexport enum EnumEffects {\n  FadeinScaleup = 'fadein-scaleup',\n  SlideRight = 'slide-right',\n  SlideBottom = 'slide-bottom',\n  Newspaper = 'newspaper',\n  Fall = 'fall',\n  SideFall = 'side-fall',\n  FlipHorizontal = 'flip-horizontal',\n  FlipVertical = 'flip-vertical',\n  Sign3d = 'sign-3d',\n  SuperScaled = 'super-scaled',\n  Slit = 'slit',\n  RotateBottom = 'rotate-bottom',\n  RotateLeft = 'rotate-left'\n}\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-dialog\n * @summary A dialog that has many built-in effects and flexible styles.\n * @ssrsafe yes\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n * @prop {EnumRoundedSizes} rounded\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 dialog - The main contents of the dialog.\n * @csspart overlay - The surrounding scrim of the dialog.\n *\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.\n * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.\n * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.\n * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.\n * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n *\n * @event kemet-dialog-opened - Fires when the dialog opens\n * @event kemet-dialog-closed - Fires when the dialog closes\n *\n */\n\n@customElement('kemet-dialog')\nexport default class Dialog extends LitElement {\n  static styles = [styles, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect?: EnumEffects;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @query('dialog')\n  dialogElement!: HTMLDialogElement;\n\n  /** @internal */\n  @state()\n  focusableSelector!: string;\n\n  /** @internal */\n  @state()\n  focusableElements!: NodeListOf<Element>;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-dialog-close-pressed', () => { this.handleClose(); });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.handleClose();\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-dialog') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      (element as HTMLElement).addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\n\n    emitEvent(this, 'kemet-dialog-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.handleOpen();\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.handleClose();\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <dialog part=\"dialog\" @close=${() => this.handleClose()}>\n        <slot></slot>\n      </dialog>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleOpen() {\n    this.opened = true;\n    if (this.dialogElement?.showModal) this.dialogElement.showModal();\n    emitEvent(this, 'kemet-dialog-opened', { element: this });\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-dialog-closed', { element: this });\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-dialog': Dialog\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-dialog-transition-speed: 0.3s;\n  --kemet-dialog-min-width: 0;\n  --kemet-dialog-max-width: none;\n  --kemet-dialog-mobile-width: calc(100% - 2rem);\n  --kemet-dialog-mobile-margin: 0 auto;\n  --kemet-dialog-mobile-padding: 1rem;\n  --kemet-dialog-font-color: var(--kemet-color-font-base);\n  --kemet-dialog-background-color: var(--kemet-color-background-base);\n  --kemet-dialog-overlay-color: rgb(0 0 0 / 80%);\n\n  /* private */\n  --kemet-dialog-radius: 0;\n\n  position: fixed;\n  display: flex;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  width: 100%;\n  height: 100vh;\n  visibility: hidden;\n  backface-visibility: hidden;\n}\n\n:host([opened]) {\n  visibility: visible;\n}\n\ndialog {\n  color: var(--kemet-dialog-font-color);\n  display: block;\n  z-index: 3;\n  margin: auto;\n  min-width: var(--kemet-dialog-min-width);\n  max-width: var(--kemet-dialog-max-width);\n  border: 0;\n  border-radius: var(--kemet-dialog-radius);\n  background: var(--kemet-dialog-background-color);\n}\n\ndialog::backdrop {\n  background: none;\n}\n\n:host([mobile]) dialog {\n  margin: var(--kemet-dialog-mobile-margin);\n  width: var(--kemet-dialog-mobile-width);\n  padding: var(--kemet-dialog-mobile-padding);\n  inset-block-start: auto;\n}\n\n:host([rounded]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) dialog {\n  --kemet-dialog-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded][mobile]) dialog {\n  border-top-left-radius: var(--kemet-dialog-radius);\n  border-top-right-radius: var(--kemet-dialog-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n[part=overlay] {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  opacity: 0;\n  background: var(--kemet-dialog-overlay-color);\n  transition: all var(--kemet-dialog-transition-speed);\n}\n\n:host([opened]) [part=overlay] {\n  opacity: 1;\n  visibility: visible;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`/* default */\n:host([effect]) dialog {\n  transform: scale(0.7);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n/* fadein-scaleup */\n:host([effect=\"fadein-scaleup\"]) dialog {\n  transform: scale(0.7);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"fadein-scaleup\"][opened]) dialog {\n  transform: scale(1);\n  opacity: 1;\n}\n\n/* slide-right */\n:host([effect=\"slide-right\"]) dialog {\n  transform: translateX(20%);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n}\n\n:host([effect=\"slide-right\"][opened]) dialog {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/* slide-bottom */\n:host([effect=\"slide-bottom\"]) dialog {\n  transform: translateY(20%);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"slide-bottom\"][opened]) dialog {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n/* newspaper */\n:host([effect=\"newspaper\"]) dialog {\n  transform: scale(0) rotate(720deg);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"newspaper\"][opened]) dialog {\n  transform: scale(1) rotate(0deg);\n  opacity: 1;\n}\n\n/* fall */\n:host([effect=\"fall\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"fall\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(600px) rotateX(20deg);\n  opacity: 0;\n}\n\n:host([effect=\"fall\"][opened]) dialog {\n  transition: all var(--kemet-modal-transition-speed) ease-in;\n  transform: translateZ(0px) rotateX(0deg);\n  opacity: 1;\n}\n\n/* side-fall */\n:host([effect=\"side-fall\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"side-fall\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translate(30%) translateZ(600px) rotate(10deg);\n  opacity: 0;\n}\n\n:host([effect=\"side-fall\"][opened]) dialog {\n  transition: all var(--kemet-modal-transition-speed) ease-in;\n  transform: translate(0%) translateZ(0) rotate(0deg);\n  opacity: 1;\n}\n\n/* flip-horizontal */\n:host([effect=\"flip-horizontal\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"flip-horizontal\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateY(-70deg);\n  transition: all var(--kemet-modal-transition-speed);\n  opacity: 0;\n}\n\n:host([effect=\"flip-horizontal\"][opened]) dialog {\n  transform: rotateY(0deg);\n  opacity: 1;\n}\n\n/* flip-vertical */\n:host([effect=\"flip-vertical\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"flip-vertical\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateX(-70deg);\n  transition: all var(--kemet-modal-transition-speed);\n  opacity: 0;\n}\n\n:host([effect=\"flip-vertical\"][opened]) dialog {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n/* sign-3d */\n:host([effect=\"sign-3d\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"sign-3d\"]) dialog {\n  transform-style: preserve-3d;\n  transform: rotateX(-60deg);\n  transform-origin: 50% 0;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"sign-3d\"][opened]) dialog {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n/* super-scaled */\n:host([effect=\"super-scaled\"]) dialog {\n  transform: scale(2);\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"super-scaled\"][opened]) dialog {\n  transform: scale(1);\n  opacity: 1;\n}\n\n/* slit */\n:host([effect=\"slit\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"slit\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(-3000px) rotateY(90deg);\n  opacity: 0;\n}\n\n:host([effect=\"slit\"][opened]) dialog {\n  animation: slit .7s forwards ease-out;\n}\n\n@keyframes slit {\n  50% {\n    transform: translateZ(-250px) rotateY(89deg);\n    opacity: 1;\n    animation-timing-function: ease-in;}\n  100% {\n    transform: translateZ(0) rotateY(0deg);\n    opacity: 1;\n  }\n}\n\n/* rotate-bottom */\n:host([effect=\"rotate-bottom\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"rotate-bottom\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateY(100%) rotateX(90deg);\n  transform-origin: 0 100%;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed) ease-out;\n}\n\n:host([effect=\"rotate-bottom\"][opened]) dialog {\n  transform: translateY(0%) rotateX(0deg);\n  opacity: 1;\n}\n\n/* rotate-left */\n:host([effect=\"rotate-left\"]) {\n  perspective: 1300px;\n}\n\n:host([effect=\"rotate-left\"]) dialog {\n  transform-style: preserve-3d;\n  transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  transform-origin: 0 100%;\n  opacity: 0;\n  transition: all var(--kemet-modal-transition-speed);\n}\n\n:host([effect=\"rotate-left\"][opened]) dialog {\n  transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  opacity: 1;\n}\n`;\n"],"mappings":"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","names":["css","EnumEffects"]}

package/dist/elements/dialog-close/index.d.ts

@@ -8,6 +8,7 @@ import { LitElement } from 'lit';
  *
  * @tagname kemet-dialog-close
  * @summary A close button for a dialog.
+ * @ssrsafe yes
  *
  * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
  * @prop {string} dom - The status of dom initalization.

package/dist/elements/dialog-close/index.js

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/dialog-close/index.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-dialog-close\n * @summary A close button for a dialog.\n *\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-dialog-close-pressed - Fires when the close button is pressed\n *\n * @fires kemet-dialog-close-mounted - Fired when the dialog close button is mounted to the DOM\n * @detail {HTMLElement} element - The dialog close button element\n *\n */\n\n@customElement('kemet-dialog-close')\nexport default class DialogClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        color: inherit;\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-dialog-close-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 @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-dialog-close-pressed', { element: this });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-dialog-close': DialogClose\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,KAAK,MAAM,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;;;ACDjC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ADkBA,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAkBE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,8BAA8B;AAAA,MAC5C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,qBACU,MAAM,KAAK,MAAM,CAAC,WAAW,MAAM,KAAK,MAAM,CAAC;AAAA;AAAA,EAElE;AAAA,EAEA,QAAQ;AACN,cAAU,MAAM,8BAA8B,EAAE,SAAS,KAAK,CAAC;AAAA,EACjE;AACF;AAxCqB,YACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAdtB,YAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjBtB,YAkBnB;AAlBmB,cAArB;AAAA,EADC,cAAc,oBAAoB;AAAA,GACd;","names":[]}
+{"version":3,"sources":["../../../src/elements/dialog-close/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-dialog-close\n * @summary A close button for a dialog.\n * @ssrsafe yes\n *\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-dialog-close-pressed - Fires when the close button is pressed\n *\n * @fires kemet-dialog-close-mounted - Fired when the dialog close button is mounted to the DOM\n * @detail {HTMLElement} element - The dialog close button element\n *\n */\n\n@customElement('kemet-dialog-close')\nexport default class DialogClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        color: inherit;\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-dialog-close-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 @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-dialog-close-pressed', { element: this });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-dialog-close': DialogClose\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,KAAK,MAAM,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;;;AFmBA,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAkBE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,8BAA8B;AAAA,MAC5C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,qBACU,MAAM,KAAK,MAAM,CAAC,WAAW,MAAM,KAAK,MAAM,CAAC;AAAA;AAAA,EAElE;AAAA,EAEA,QAAQ;AACN,cAAU,MAAM,8BAA8B,EAAE,SAAS,KAAK,CAAC;AAAA,EACjE;AACF;AAxCqB,YACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAdtB,YAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjBtB,YAkBnB;AAlBmB,cAArB;AAAA,EADC,cAAc,oBAAoB;AAAA,GACd;","names":[]}

package/dist/elements/drawer/effects.js

@@ -1,6 +1,6 @@
 // src/elements/drawer/effects.ts
 import { css, unsafeCSS } from "lit";
-var documentHeight = `${document.documentElement.scrollHeight}px`;
+var documentHeight = typeof document !== "undefined" ? `${document.documentElement.scrollHeight}px` : "100vh";
 var effects_default = css`
   /* slide */
   :host([effect='slide']) [part=drawer] {

package/dist/elements/drawer/effects.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/drawer/effects.ts"],"sourcesContent":["import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = `${document.documentElement.scrollHeight}px`;\n\nexport default css`\n  /* slide */\n  :host([effect='slide']) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) [part=drawer]:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='reveal']) [part=drawer] {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer] {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='push'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) [part=pusher] {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0) scale(0.75);\n  }\n\n  :host([effect='scale']) [part=drawer] {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n`;\n"],"mappings":";AAAA,SAAS,KAAK,iBAAiB;AAE/B,IAAM,iBAAiB,GAAG,SAAS,gBAAgB,YAAY;AAE/D,IAAO,kBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAqCiB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAsDzB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCA2DzB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAwDzB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/drawer/effects.ts"],"sourcesContent":["import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = typeof document !== 'undefined' ? `${document.documentElement.scrollHeight}px` : '100vh';\n\n\nexport default css`\n  /* slide */\n  :host([effect='slide']) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) [part=drawer]:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='reveal']) [part=drawer] {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer] {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='push'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) [part=pusher] {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0) scale(0.75);\n  }\n\n  :host([effect='scale']) [part=drawer] {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n`;\n"],"mappings":";AAAA,SAAS,KAAK,iBAAiB;AAE/B,IAAM,iBAAiB,OAAO,aAAa,cAAc,GAAG,SAAS,gBAAgB,YAAY,OAAO;AAGxG,IAAO,kBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAqCiB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAsDzB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCA2DzB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAwDzB,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -16,6 +16,7 @@ declare const directions: string[];
  *
  * @tagname kemet-drawer
  * @summary A component that adds an off-canvas menu with different effects.
+ * @ssrsafe yes
  *
  * @prop {boolean} opened - Determines if the drawer is opened or not.
  * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)

package/dist/elements/drawer/index.js

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/drawer/index.ts
 import { LitElement, html } 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) => {
@@ -32,7 +36,7 @@ var EnumDirections = /* @__PURE__ */ ((EnumDirections2) => {
 
 // src/elements/drawer/effects.ts
 import { css, unsafeCSS } from "lit";
-var documentHeight = `${document.documentElement.scrollHeight}px`;
+var documentHeight = typeof document !== "undefined" ? `${document.documentElement.scrollHeight}px` : "100vh";
 var effects_default = css`
   /* slide */
   :host([effect='slide']) [part=drawer] {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/drawer/index.ts","../../../src/utilities/events.ts","../../../src/utilities/constants.ts","../../../src/elements/drawer/effects.ts","../../../src/elements/drawer/styles.css.ts"],"sourcesContent":["import { LitElement, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumDirections } from '../../utilities/constants';\nimport effectsStyles from './effects';\nimport styles from './styles.css.ts';\n\n\nexport enum EnumEffects {\n  Slide = 'slide',\n  Reveal = 'reveal',\n  Push = 'push',\n  Scale = 'scale'\n}\n\nconst effects = Object.values(EnumEffects) as string[];\n\nconst directions = Object.values(EnumDirections) as string[];\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-drawer\n * @summary A component that adds an off-canvas menu with different effects.\n *\n * @prop {boolean} opened - Determines if the drawer is opened or not.\n * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)\n * @prop {EnumDirection} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)\n * @prop {boolean} overlay - Adds an overlay over the content section of the Drawer when opened\n * @prop {boolean} fillViewport - Makes the drawer fill the viewport height\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 sidebar - The off-screen nav area of your app or site\n * @slot body - The main content area of your app or site.\n *\n * @csspart container\n * @csspart drawer\n * @csspart pusher\n * @csspart content\n * @csspart wrapper\n *\n * @cssproperty --kemet-drawer-width - The width of the drawer.\n * @cssproperty --kemet-drawer-height - The height of the drawer.\n * @cssproperty --kemet-drawer-color - The text color of the drawer.\n * @cssproperty --kemet-drawer-background-color - The background color of the drawer.\n * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.\n *\n * @event kemet-drawer-opened - Fires when the drawer opens.\n * @event kemet-drawer-closed - Fires when the drawer closes.\n *\n * @fires kemet-drawer-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n *\n */\n\n@customElement('kemet-drawer')\nexport default class KemetDrawer extends LitElement {\n  static styles = [styles, effectsStyles];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: typeof effects[number] = EnumEffects.Slide;\n\n  @property({ type: String, reflect: true })\n  side: typeof directions[number] = EnumDirections.Left;\n\n  @property({ type: Boolean, reflect: true })\n  overlay: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'fill-viewport' })\n  fillViewport: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {\n        this.opened = false;\n      }\n    });\n\n    emitEvent(this, 'kemet-drawer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-drawer-opened', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-drawer-closed', { element: this });\n    }\n  }\n\n  render() {\n    return html`\n      <section part=\"container\">\n        <div part=\"drawer\" title=\"Drawer\">\n          <slot name=\"sidebar\"></slot>\n        </div>\n        <div part=\"pusher\">\n          <div part=\"content\">\n            <div part=\"wrapper\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-drawer': KemetDrawer\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 KemetCount from \"../elements/count\";\nimport HTMLKemetInputElement from \"../elements/input\";\n\nexport enum EnumKeyCodes {\n  ESCAPE = 'Escape',\n  ENTER = 'Enter',\n  SPACE = 'Space',\n  BACKSPACE = 'Backspace',\n  DELETE = 'Delete'\n}\n\nexport const directions = ['none','top', 'right', 'bottom', 'left'] as const;\nexport enum EnumDirections {\n  None = 'none',\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\nexport type TypeDirection = typeof directions[number];\n\nexport const appearances = ['neutral', 'brand', 'success', 'warning', 'error'] as const;\nexport enum EnumAppearances {\n  Neutral = 'neutral',\n  Brand = 'brand',\n  Success = 'success',\n  Warning = 'warning',\n  Error = 'error',\n  Info = 'info',\n  Link = 'link'\n}\nexport type TypeAppearance = typeof appearances[number];\n\nexport const axis = ['horizontal', 'vertical'] as const;\nexport enum EnumAxis {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical'\n}\nexport type TypeAxis = typeof axis[number];\n\nexport const roundedSizes = ['sm', 'md', 'lg', 'xl', 'circle', 'pill'] as const;\nexport enum EnumRoundedSizes {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  Circle = 'circle',\n  Pill = 'pill'\n}\nexport type TypeRoundedSizes = typeof roundedSizes[number];\n\nexport interface InterfaceInputDetails {\n  status: TypeAppearance;\n  validity: ValidityState;\n  element: HTMLElement | KemetCount | HTMLKemetInputElement;\n  value?: string;\n}\n","import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = `${document.documentElement.scrollHeight}px`;\n\nexport default css`\n  /* slide */\n  :host([effect='slide']) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) [part=drawer]:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='reveal']) [part=drawer] {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer] {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='push'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) [part=pusher] {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0) scale(0.75);\n  }\n\n  :host([effect='scale']) [part=drawer] {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-drawer-overlay-color: rgb(0 0 0 / 20%);\n  --kemet-drawer-width: 300px;\n  --kemet-drawer-height: 100%;\n  --kemet-drawer-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-drawer-background-color: var(--kemet-color-background-inverse);\n\n  width: 100%;\n  display: block;\n}\n\n[part=container] {\n  position: relative;\n  overflow: hidden;\n}\n\n[part=drawer] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  visibility: hidden;\n  height: 100%;\n  overflow: auto;\n  transition: all 0.5s;\n}\n\n[part=drawer]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.2);\n  content: '';\n  opacity: 1;\n  transition: opacity 0.5s;\n}\n\n:host([opened]) [part=drawer]::after {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n[part=pusher] {\n  position: relative;\n  left: 0;\n  z-index: 99;\n  height: 100%;\n  transition: transform 0.5s;\n}\n\n:host([overlay]) [part=pusher]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 0;\n  height: 0;\n  background: var(--kemet-drawer-overlay-color);\n  content: '';\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n:host([opened]) [part=pusher]::after {\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n  transition: opacity 0.5s;\n  transform: scale(2);\n}\n\n:host([fill-viewport]) [part=content] {\n  min-height: 100vh;\n}\n\n[part=wrapper]{\n  position: relative;\n}\n\n::slotted([slot=content]) {\n  min-height: 100vh;\n}\n\n[part=drawer] {\n  width: var(--kemet-drawer-width);\n  height: var(--kemet-drawer-height);\n  color: var(--kemet-drawer-font-color);\n  background: var(--kemet-drawer-background-color);\n}\n`;\n"],"mappings":"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","names":["EnumDirections","css","EnumEffects"]}
+{"version":3,"sources":["../../../src/elements/drawer/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/utilities/constants.ts","../../../src/elements/drawer/effects.ts","../../../src/elements/drawer/styles.css.ts"],"sourcesContent":["import { LitElement, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumDirections } from '../../utilities/constants';\nimport effectsStyles from './effects';\nimport styles from './styles.css.ts';\n\n\nexport enum EnumEffects {\n  Slide = 'slide',\n  Reveal = 'reveal',\n  Push = 'push',\n  Scale = 'scale'\n}\n\nconst effects = Object.values(EnumEffects) as string[];\nconst directions = Object.values(EnumDirections) as string[];\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-drawer\n * @summary A component that adds an off-canvas menu with different effects.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the drawer is opened or not.\n * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)\n * @prop {EnumDirection} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)\n * @prop {boolean} overlay - Adds an overlay over the content section of the Drawer when opened\n * @prop {boolean} fillViewport - Makes the drawer fill the viewport height\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 sidebar - The off-screen nav area of your app or site\n * @slot body - The main content area of your app or site.\n *\n * @csspart container\n * @csspart drawer\n * @csspart pusher\n * @csspart content\n * @csspart wrapper\n *\n * @cssproperty --kemet-drawer-width - The width of the drawer.\n * @cssproperty --kemet-drawer-height - The height of the drawer.\n * @cssproperty --kemet-drawer-color - The text color of the drawer.\n * @cssproperty --kemet-drawer-background-color - The background color of the drawer.\n * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.\n *\n * @event kemet-drawer-opened - Fires when the drawer opens.\n * @event kemet-drawer-closed - Fires when the drawer closes.\n *\n * @fires kemet-drawer-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n *\n */\n\n@customElement('kemet-drawer')\nexport default class KemetDrawer extends LitElement {\n  static styles = [styles, effectsStyles];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: typeof effects[number] = EnumEffects.Slide;\n\n  @property({ type: String, reflect: true })\n  side: typeof directions[number] = EnumDirections.Left;\n\n  @property({ type: Boolean, reflect: true })\n  overlay: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'fill-viewport' })\n  fillViewport: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {\n        this.opened = false;\n      }\n    });\n\n    emitEvent(this, 'kemet-drawer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-drawer-opened', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-drawer-closed', { element: this });\n    }\n  }\n\n  render() {\n    return html`\n      <section part=\"container\">\n        <div part=\"drawer\" title=\"Drawer\">\n          <slot name=\"sidebar\"></slot>\n        </div>\n        <div part=\"pusher\">\n          <div part=\"content\">\n            <div part=\"wrapper\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-drawer': KemetDrawer\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 KemetCount from \"../elements/count\";\nimport HTMLKemetInputElement from \"../elements/input\";\n\nexport enum EnumKeyCodes {\n  ESCAPE = 'Escape',\n  ENTER = 'Enter',\n  SPACE = 'Space',\n  BACKSPACE = 'Backspace',\n  DELETE = 'Delete'\n}\n\nexport const directions = ['none','top', 'right', 'bottom', 'left'] as const;\nexport enum EnumDirections {\n  None = 'none',\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\nexport type TypeDirection = typeof directions[number];\n\nexport const appearances = ['neutral', 'brand', 'success', 'warning', 'error'] as const;\nexport enum EnumAppearances {\n  Neutral = 'neutral',\n  Brand = 'brand',\n  Success = 'success',\n  Warning = 'warning',\n  Error = 'error',\n  Info = 'info',\n  Link = 'link'\n}\nexport type TypeAppearance = typeof appearances[number];\n\nexport const axis = ['horizontal', 'vertical'] as const;\nexport enum EnumAxis {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical'\n}\nexport type TypeAxis = typeof axis[number];\n\nexport const roundedSizes = ['sm', 'md', 'lg', 'xl', 'circle', 'pill'] as const;\nexport enum EnumRoundedSizes {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  Circle = 'circle',\n  Pill = 'pill'\n}\nexport type TypeRoundedSizes = typeof roundedSizes[number];\n\nexport interface InterfaceInputDetails {\n  status: TypeAppearance;\n  validity: ValidityState;\n  element: HTMLElement | KemetCount | HTMLKemetInputElement;\n  value?: string;\n}\n","import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = typeof document !== 'undefined' ? `${document.documentElement.scrollHeight}px` : '100vh';\n\n\nexport default css`\n  /* slide */\n  :host([effect='slide']) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) [part=drawer]:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='reveal']) [part=drawer] {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer] {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='push'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) [part=pusher] {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0) scale(0.75);\n  }\n\n  :host([effect='scale']) [part=drawer] {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-drawer-overlay-color: rgb(0 0 0 / 20%);\n  --kemet-drawer-width: 300px;\n  --kemet-drawer-height: 100%;\n  --kemet-drawer-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-drawer-background-color: var(--kemet-color-background-inverse);\n\n  width: 100%;\n  display: block;\n}\n\n[part=container] {\n  position: relative;\n  overflow: hidden;\n}\n\n[part=drawer] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  visibility: hidden;\n  height: 100%;\n  overflow: auto;\n  transition: all 0.5s;\n}\n\n[part=drawer]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.2);\n  content: '';\n  opacity: 1;\n  transition: opacity 0.5s;\n}\n\n:host([opened]) [part=drawer]::after {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n[part=pusher] {\n  position: relative;\n  left: 0;\n  z-index: 99;\n  height: 100%;\n  transition: transform 0.5s;\n}\n\n:host([overlay]) [part=pusher]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 0;\n  height: 0;\n  background: var(--kemet-drawer-overlay-color);\n  content: '';\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n:host([opened]) [part=pusher]::after {\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n  transition: opacity 0.5s;\n  transform: scale(2);\n}\n\n:host([fill-viewport]) [part=content] {\n  min-height: 100vh;\n}\n\n[part=wrapper]{\n  position: relative;\n}\n\n::slotted([slot=content]) {\n  min-height: 100vh;\n}\n\n[part=drawer] {\n  width: var(--kemet-drawer-width);\n  height: var(--kemet-drawer-height);\n  color: var(--kemet-drawer-font-color);\n  background: var(--kemet-drawer-background-color);\n}\n`;\n"],"mappings":"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","names":["EnumDirections","css","EnumEffects"]}

package/dist/elements/fab/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, E as EnumAppearances } from '../../constants-W9QKPlZP.js';
+import { e as EnumRoundedSizes, E as EnumAppearances } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**
@@ -10,6 +10,7 @@ import '../../form-controller-3q581XcZ.js';
  *
  * @tagname kemet-fab
  * @summary The FAB, or Floating Action Button, performs a primary action on a page.
+ * @ssrsafe yes
  *
  * @prop {boolean} expanded - The expanded state of the button.
  * @prop {boolean} outlined - Outline style for a button.

package/dist/elements/fab/index.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/fab/index.ts","../../../src/elements/fab/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-fab\n * @summary The FAB, or Floating Action Button, performs a primary action on a page.\n *\n * @prop {boolean} expanded - The expanded state of the button.\n * @prop {boolean} outlined - Outline style for a button.\n * @prop {boolean} disabled - Determines whether not a button is disabled.\n * @prop {EnumRoundedSizes} rounded - Displays the fab with rounded corners.\n * @prop {EnumAppearances} appearance - The appearance of the fab.\n * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.\n * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background.\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot Icon - A slot for an icon to display.\n * @slot default - The text for the FAB.\n * *\n * @cssproperty --kemet-fab-size - The width and height of the fab.\n * @cssproperty --kemet-fab-color - The text color of the fab.\n * @cssproperty --kemet-fab-icon-color - The color of the fab icon.\n * @cssproperty --kemet-fab-label-color - The color of the fab label.\n * @cssproperty --kemet-fab-padding - The padding of the fab.\n * @cssproperty --kemet-fab-border - The border of the fab.\n *\n * @csspart button - The button's container.\n * @csspart icon -  The FAB icon.\n * @csspart label - The text in the FAB.\n *\n */\n\n@customElement('kemet-fab')\nexport default class KemetFAB extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  expanded: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Number, attribute: 'expand-point' })\n  expandPoint: number = 0;\n\n  @property({ type: Number, attribute: 'collapse-point' })\n  collapsePoint: number = 0;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n  firstUpdated() {\n    // events\n    window.addEventListener('scroll', this.handleScroll.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n\n    emitEvent(this, 'kemet-fab-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      <button class=\"button\" part=\"button\" ?disabled=${this.disabled}>\n        <span part=\"icon\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span part=\"label\">\n          <slot></slot>\n        </span>\n      </button>\n    `;\n  }\n\n  handleMouseOver() {\n    if (!this.disabled) {\n      this.expanded = true;\n    }\n  }\n\n  handleMouseOut() {\n    if (!this.disabled) {\n      this.expanded = false;\n    }\n  }\n\n  handleScroll() {\n    if (window.scrollY > this.expandPoint && window.scrollY < this.collapsePoint) {\n      this.expanded = true;\n    } else {\n      this.expanded = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-fab': KemetFAB\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-fab-size: 50px;\n  --kemet-fab-color: var(--kemet-color-background-inverse);\n  --kemet-fab-icon-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-label-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-padding: 0 1.35rem 0 0.25rem;\n  --kemet-fab-border: 1px solid var(--kemet-fab-color);\n\n  /* private */\n  --_kemet-fab-border-radius: 0;\n  --_kemet-fab-background-color: var(--kemet-fab-color);\n\n  display: inline-block;\n  position: relative;\n}\n\nbutton {\n  color: var(--kemet-fab-icon-color);\n  font-size: inherit;\n  display: inline-flex;\n  padding: 0;\n  position: relative;\n  min-height: var(--kemet-fab-size);\n  min-width: var(--kemet-fab-size);\n  max-width: var(--kemet-fab-size);\n  align-items: center;\n  justify-content: flex-start;\n  transition: all 0.4s ease;\n  border: var(--kemet-fab-border);\n  border-radius: var(--_kemet-button-border-radius);\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([outlined]) {\n  --kemet-fab-icon-color: var(--kemet-fab-color);\n  --kemet-fab-label-color: var(--kemet-fab-color);\n  --_kemet-fab-background-color: transparent;\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}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([appearance=brand]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-link);\n}\n\n\n\nbutton::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--_kemet-button-border-radius);\n  transition: background-color 0.3s ease-in-out;\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([expanded]) button {\n  max-width: 99rem;\n  padding: 0 1.35rem 0 0.25rem;\n}\n\n:host([disabled]) {\n  --kemet-fab-color: var(--kemet-color-background-disabled);\n}\n\n[part=icon] {\n  width: var(--kemet-fab-size);\n  height: var(--kemet-fab-size);\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n}\n\n[part=label] {\n  color: var(--kemet-fab-label-color);\n  z-index: 1;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n:host([expanded]) [part=label] {\n  opacity: 1;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/fab/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/fab/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-fab\n * @summary The FAB, or Floating Action Button, performs a primary action on a page.\n * @ssrsafe yes\n *\n * @prop {boolean} expanded - The expanded state of the button.\n * @prop {boolean} outlined - Outline style for a button.\n * @prop {boolean} disabled - Determines whether not a button is disabled.\n * @prop {EnumRoundedSizes} rounded - Displays the fab with rounded corners.\n * @prop {EnumAppearances} appearance - The appearance of the fab.\n * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.\n * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background.\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot Icon - A slot for an icon to display.\n * @slot default - The text for the FAB.\n * *\n * @cssproperty --kemet-fab-size - The width and height of the fab.\n * @cssproperty --kemet-fab-color - The text color of the fab.\n * @cssproperty --kemet-fab-icon-color - The color of the fab icon.\n * @cssproperty --kemet-fab-label-color - The color of the fab label.\n * @cssproperty --kemet-fab-padding - The padding of the fab.\n * @cssproperty --kemet-fab-border - The border of the fab.\n *\n * @csspart button - The button's container.\n * @csspart icon -  The FAB icon.\n * @csspart label - The text in the FAB.\n *\n */\n\n@customElement('kemet-fab')\nexport default class KemetFAB extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  expanded: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Number, attribute: 'expand-point' })\n  expandPoint: number = 0;\n\n  @property({ type: Number, attribute: 'collapse-point' })\n  collapsePoint: number = 0;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n  firstUpdated() {\n    // events\n    window.addEventListener('scroll', this.handleScroll.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n\n    emitEvent(this, 'kemet-fab-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      <button class=\"button\" part=\"button\" ?disabled=${this.disabled}>\n        <span part=\"icon\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span part=\"label\">\n          <slot></slot>\n        </span>\n      </button>\n    `;\n  }\n\n  handleMouseOver() {\n    if (!this.disabled) {\n      this.expanded = true;\n    }\n  }\n\n  handleMouseOut() {\n    if (!this.disabled) {\n      this.expanded = false;\n    }\n  }\n\n  handleScroll() {\n    if (window.scrollY > this.expandPoint && window.scrollY < this.collapsePoint) {\n      this.expanded = true;\n    } else {\n      this.expanded = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-fab': KemetFAB\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-fab-size: 50px;\n  --kemet-fab-color: var(--kemet-color-background-inverse);\n  --kemet-fab-icon-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-label-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-padding: 0 1.35rem 0 0.25rem;\n  --kemet-fab-border: 1px solid var(--kemet-fab-color);\n\n  /* private */\n  --_kemet-fab-border-radius: 0;\n  --_kemet-fab-background-color: var(--kemet-fab-color);\n\n  display: inline-block;\n  position: relative;\n}\n\nbutton {\n  color: var(--kemet-fab-icon-color);\n  font-size: inherit;\n  display: inline-flex;\n  padding: 0;\n  position: relative;\n  min-height: var(--kemet-fab-size);\n  min-width: var(--kemet-fab-size);\n  max-width: var(--kemet-fab-size);\n  align-items: center;\n  justify-content: flex-start;\n  transition: all 0.4s ease;\n  border: var(--kemet-fab-border);\n  border-radius: var(--_kemet-button-border-radius);\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([outlined]) {\n  --kemet-fab-icon-color: var(--kemet-fab-color);\n  --kemet-fab-label-color: var(--kemet-fab-color);\n  --_kemet-fab-background-color: transparent;\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}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([appearance=brand]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-link);\n}\n\n\n\nbutton::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--_kemet-button-border-radius);\n  transition: background-color 0.3s ease-in-out;\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([expanded]) button {\n  max-width: 99rem;\n  padding: 0 1.35rem 0 0.25rem;\n}\n\n:host([disabled]) {\n  --kemet-fab-color: var(--kemet-color-background-disabled);\n}\n\n[part=icon] {\n  width: var(--kemet-fab-size);\n  height: var(--kemet-fab-size);\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n}\n\n[part=label] {\n  color: var(--kemet-fab-label-color);\n  z-index: 1;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n:host([expanded]) [part=label] {\n  opacity: 1;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

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

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

package/dist/elements/field/index.js

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

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

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

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

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { e as EnumRoundedSizes } from '../../constants-W9QKPlZP.js';
+import { e as EnumRoundedSizes } from '../../constants-CHvA2ed5.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**
@@ -10,6 +10,7 @@ import '../../form-controller-3q581XcZ.js';
  *
  * @tagname kemet-flipcard
  * @summary A card that has a front and back side which can be flipped.
+ * @ssrsafe yes
  *
  * @prop {string} axis
  * @prop {boolean} flipped

package/dist/elements/flipcard/index.js

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

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

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

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

@@ -8,6 +8,7 @@ import { LitElement } from 'lit';
  *
  * @tagname kemet-flipcard-trigger
  * @summary Triggers a flipcard component to flip.
+ * @ssrsafe yes
  *
  * @event kemet-flipcard-trigger-flipped - Fires when a flipcard is flipped
  *

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

@@ -11,7 +11,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/elements/flipcard-trigger/index.ts
 import { LitElement, html, css } 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) => {