kemet-ui 5.0.3 → 5.0.5

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/tabs/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/tabs/styles.css.ts"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, query, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumDirections } from '../../utilities/constants';\nimport type KemetTab from '../tab';\nimport type KemetTabPanel from '../tab-panel';\nimport styles from './styles.css.ts';\n\n\ninterface InterfaceLink {\n  width: string;\n  height: string;\n  positionX: string;\n  positionY: string;\n}\n\nexport interface InterfaceTabsDetails {\n  element: KemetTabs;\n  selectedName: string;\n  selectedIndex: number;\n}\n\nexport enum EnumPanelEffect {\n  None = 'none',\n  Slide = 'slide',\n  Fade = 'fade',\n  Stacked = 'stacked'\n}\n\n\nexport enum EnumTabsAlign {\n  Center = 'center',\n  Between = 'between',\n  Around = 'around',\n  Evenly = 'evenly',\n  Start = 'start',\n  End = 'end'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tabs\n * @summary A group of tabs and panels.\n * @ssrsafe yes\n *\n * @prop {string} selected - The selected tab by name\n * @prop {number} selectedIndex - The selected tab by index\n * @prop {number} panelPosition - Positions the current panel\n * @prop {string} panelEffect - The transition effect for panels\n * @prop {boolean} swipe - Determines whether to enable swipe behavior\n * @prop {TypeDirection} placement - Places the tabs to the top, right, bottom, or left\n * @prop {boolean} divider - Determines whether to show a divider line\n * @prop {TypeTabsAlign} tabsAlign - Spacing alignment of the tabs\n * @prop {object} ink - An object that contains information about the ink\n * @prop {boolean} hideInk - Determines whether to hide the ink\n * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container\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 tab - Place the tabs here.\n * @slot panel - Place the panels here.\n *\n * @csspart links - The container for the tablist.\n * @csspart tablist - Contains the tabs.\n * @csspart panels - Contains the panels.\n * @csspart ink - The ink element.\n * @csspart divider - The divider element.\n *\n * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.\n * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.\n * @cssproperty --kemet-tabs-ink-color - The color of the ink.\n * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.\n * @cssproperty --kemet-tabs-divider-color - The color of the divider.\n * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.\n * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.\n *\n * @event kemet-tabs-change - Fires when a tab is changed\n *\n * @fires kemet-tabs-mounted - Fired when the tabs are mounted to the DOM\n * @detail {HTMLElement} element - The tabs element\n *\n */\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  selected?: string;\n\n  @property({ type: Number, reflect: true, attribute: 'selected-index' })\n  selectedIndex: number = 0;\n\n  @property({ type: Number })\n  panelPosition: number = 0;\n\n  @property({ type: String, reflect: true, attribute: 'panel-effect' })\n  panelEffect: EnumPanelEffect = EnumPanelEffect.None;\n\n  @property({ type: Boolean })\n  swipe: boolean = false;\n\n  @property({ type: String, reflect: true })\n  placement: EnumDirections = EnumDirections.Top;\n\n  @property({ type: Boolean })\n  divider: boolean = false;\n\n  @property({ type: String, reflect: true, attribute: 'tabs-align' })\n  tabsAlign: EnumTabsAlign = EnumTabsAlign.Center;\n\n  @property({ type: Object })\n  ink: InterfaceLink = { width: '0', height: '0', positionX: '0', positionY: '0' };\n\n  @property({ type: Boolean, attribute: 'hide-ink' })\n  hideInk: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  overflow: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  tabs!: KemetTab[];\n\n  @state()\n  panels!: KemetTabPanel[];\n\n  @state()\n  xDown!: number | null;\n\n  @state()\n  yDown!: number | null;\n\n  @state()\n  links!: HTMLElement;\n\n  @query('#panels')\n  panelsElement!: HTMLElement;\n\n  private _handleTabKeydown = this.handleTabKeydown.bind(this);\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));\n    this.addEventListener('kemet-tab-closed', this.handleTabClose.bind(this));\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('resize', this.handleResize.bind(this));\n    }\n  }\n\n  firstUpdated() {\n    // standard properties\n    this.tabs = [];\n    this.panels = [];\n    this.xDown = null;\n    this.yDown = null;\n\n    this.links = this.shadowRoot?.getElementById('links') as HTMLElement;\n\n    this.handleLinksSlotChange();\n    this.handlePanelsSlotChange();\n\n    emitEvent(this, 'kemet-tabs-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      ${this.makeLeftArrow()}\n      ${this.makeRightArrow()}\n      <div id=\"links\" part=\"links\">\n        <div part='tablist' role=\"tablist\">\n          <slot name=\"tab\" @slotchange=${() => this.handleLinksSlotChange()}></slot>\n        </div>\n        ${this.makeInk('links')}\n      </div>\n      ${this.makeInk('host')}\n      ${this.makeDivider()}\n      <section id=\"panels\" part=\"panels\" style=\"transform:translateX(${this.panelPosition}px);\">\n        <div>\n          <slot name=\"panel\" @slotchange=${() => this.handlePanelsSlotChange()}></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.determineFade();\n    this.determineStacked();\n\n    if (prevProps.get('selected') && prevProps.get('selected') !== this.selected) {\n      this.selectTab();\n      this.selectPanel();\n    }\n\n    if (typeof prevProps.get('selectedIndex') === 'number' && prevProps.get('selectedIndex') !== this.selected) {\n      this.selectTab();\n      this.selectPanel();\n    }\n  }\n\n  handleLinksSlotChange() {\n    this.tabs?.forEach((tab) => tab.removeEventListener('keydown', this._handleTabKeydown));\n    this.tabs = [];\n\n    const tabs = this.querySelectorAll('kemet-tab');\n    let index = 0;\n\n    tabs.forEach((tab: KemetTab) => {\n      // give each tab an index to select by if link/panel is not used\n      tab.index = index;\n      index += 1;\n\n      // store the list of tabs\n      this.tabs = this.tabs.concat(tab);\n\n      // add keyboard support\n      tab.addEventListener('keydown', this._handleTabKeydown);\n    });\n\n    // default to the first tab/panel selected\n    const firstTab = this.tabs[0];\n    if (firstTab) firstTab.selected = true;\n\n    setTimeout(() => {\n      this.selectTab();\n    }, 1);\n    this.determineOverflow();\n  }\n\n  handlePanelsSlotChange() {\n    this.panels = [];\n\n    const panels = this.querySelectorAll('kemet-tab-panel');\n    const panelElement = this.shadowRoot?.getElementById('panels');\n    let index = 0;\n\n    panels.forEach((panel: KemetTabPanel) => {\n      // give each panel an index to select by if link/panel is not used\n      panel.index = index;\n      index += 1;\n\n      // store the list of panels\n      this.panels = this.panels.concat(panel);\n    });\n\n    // default to the first tab/panel selected\n    if (this.panels.length > 0) {\n      const firstPanel = this.panels[0];\n      if (firstPanel) firstPanel.selected = true;\n    }\n\n    // add swipe support\n    if (this.swipe) {\n      panelElement?.addEventListener('touchstart', event => this.handleTouchStart(event), false);\n      panelElement?.addEventListener('touchmove', event => this.handleTouchMove(event), false);\n    }\n\n    this.selectPanel();\n  }\n\n  handleLeftArrow() {\n    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[0];\n    if (!selectedElement) return;\n    const previousElement = selectedElement.previousElementSibling as KemetTab;\n    const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n    if (this.selected) {\n      this.selected = previousElement ? previousElement.link : selectedElement.link;\n    } else {\n      this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;\n    }\n\n    if (previousElement) {\n      this.links.scrollLeft = previousElement.offsetLeft - 20;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n  }\n\n  handleRightArrow() {\n    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[this.tabs.length - 1];\n    if (!selectedElement) return;\n    const nextElement = selectedElement.nextElementSibling as KemetTab;\n    const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n    if (this.selected) {\n      this.selected = nextElement ? nextElement.link : selectedElement.link;\n    } else {\n      this.selectedIndex = selectedIndex < this.tabs.length - 1\n        ? selectedIndex + 1\n        : this.tabs.length - 1;\n    }\n\n    if (nextElement) {\n      this.links.scrollLeft = nextElement.offsetLeft - 20;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n  }\n\n  handleTabClose(event: Event) {\n    const tab = (event as CustomEvent).detail.element;\n    const panel = this.panels[tab.index];\n\n    if (this.tabs[0]) {\n      this.selected = this.tabs[0].link;\n    }\n    this.selectedIndex = 0;\n\n    panel?.remove();\n    tab.remove();\n  }\n\n  makeInk(location: string) {\n    if (this.hideInk) {\n      return null;\n    }\n\n    if ((this.placement === 'top' || this.placement === 'bottom') && this.ink && location === 'links') {\n      return html`<div part=\"ink\" style=\"width:${this.ink.width}; transform:translateX(${this.ink.positionX})\"></div>`;\n    }\n\n    if ((this.placement === 'left' || this.placement === 'right') && this.ink && location === 'host') {\n      return html`<div part=\"ink\" style=\"height:${this.ink.height}; transform:translateY(${this.ink.positionY})\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeDivider() {\n    if (this.divider) {\n      return html`<div part=\"divider\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeLeftArrow() {\n    if (this.overflow) {\n      return html`<kemet-icon name='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  makeRightArrow() {\n    if (this.overflow) {\n      return html`<kemet-icon name='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  selectTab() {\n    const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n    const overflowOffset = this.overflow ? marginLeft : 0;\n\n    // if the user uses the selected attribute select by it\n    if (this.selected) {\n      this.tabs.forEach((tab) => {\n        const tabName = tab.getAttribute('link');\n\n        if (tabName === this.selected) {\n          tab.selected = true;\n          this.selected = tabName;\n\n          this.ink = {\n            width: `${tab.offsetWidth}px`,\n            height: `${tab.offsetHeight}px`,\n            positionX: `${tab.offsetLeft - overflowOffset}px`,\n            positionY: `${tab.offsetTop}px`,\n          };\n\n          this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n        } else {\n          tab.selected = false;\n        }\n      });\n\n      // otherwise select by index\n    } else {\n      this.tabs.forEach((tab) => {\n        if (this.selectedIndex === tab.index) {\n          tab.selected = true;\n\n          this.ink = {\n            width: `${tab.offsetWidth}px`,\n            height: `${tab.offsetHeight}px`,\n            positionX: `${tab.offsetLeft - overflowOffset}px`,\n            positionY: `${tab.offsetTop}px`,\n          };\n\n          this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n        } else {\n          tab.selected = false;\n        }\n      });\n    }\n  }\n\n  selectPanel() {\n    // if the user uses the selected attribute select by it\n    if (this.selected) {\n      this.panels.forEach((panel) => {\n        const panelName = panel.getAttribute('panel');\n\n        if (this.panelEffect === 'fade' && panel.index !== 0) {\n          panel.classList.add('push');\n        }\n\n        if (this.placement === 'left' || this.placement === 'right') {\n          panel.classList.add('vertical');\n        }\n\n        if (panelName === this.selected) {\n          panel.selected = true;\n          this.animatePanel(panelName, null);\n        } else {\n          panel.selected = false;\n        }\n      });\n\n      // otherwise select by index\n    } else {\n      this.panels.forEach((panel) => {\n        if (this.panelEffect === 'fade' && panel.index !== 0) {\n          panel.classList.add('push');\n        }\n\n        if (this.placement === 'left' || this.placement === 'right') {\n          panel.classList.add('vertical');\n        }\n\n        if (this.selectedIndex === panel.index) {\n          panel.selected = true;\n          this.animatePanel(null, panel.index);\n        } else {\n          panel.selected = false;\n        }\n      });\n    }\n  }\n\n  dispatchTabChange() {\n    emitEvent(this, 'kemet-tabs-change', {\n      element: this,\n      selectedName: this.selected,\n      selectedIndex: this.selectedIndex\n    });\n  }\n\n  tabSelectedChange(event: Event) {\n    if (this.selected) {\n      // if selected has been set, use the string attribute\n      this.selected = (event as CustomEvent).detail.element.getAttribute('link');\n    } else {\n      // otherwise use the generated index\n      this.selectedIndex = (event as CustomEvent).detail.element.index;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n    this.dispatchTabChange();\n  }\n\n  determineFade() {\n    this.panels.forEach((panel) => {\n      // add fade class if panel effect is fade\n      if (this.panelEffect === 'fade') panel.classList.add('fade');\n    });\n  }\n\n  determineStacked() {\n    this.panels.forEach((panel) => {\n      // add fade class if panel effect is fade\n      if (this.panelEffect === 'stacked') panel.classList.add('stacked');\n    });\n  }\n\n  determineOverflow() {\n    const tabsContainerWidth = this.offsetWidth;\n    const tabElements = this.querySelectorAll('kemet-tab');\n\n    let totalTabsWidth = 0;\n\n    tabElements.forEach((tab) => {\n      totalTabsWidth += tab.offsetWidth;\n    });\n\n    this.overflow = totalTabsWidth > tabsContainerWidth && (this.placement === 'top' || this.placement === 'bottom');\n  }\n\n  handleResize() {\n    if (this.tabs && this.panels) {\n      const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n      const overflowOffset = this.overflow ? marginLeft : 0;\n      const selectedElement = this.tabs.find(tab => tab.selected);\n\n      if (selectedElement) {\n        this.ink = {\n          width: `${selectedElement.offsetWidth}px`,\n          height: `${selectedElement.offsetHeight}px`,\n          positionX: `${selectedElement.offsetLeft - overflowOffset}px`,\n          positionY: `${selectedElement.offsetTop}px`,\n        };\n      }\n\n      this.determineOverflow();\n\n      if (this.selected) {\n        this.animatePanel(this.selected, null);\n      } else {\n        this.animatePanel(null, this.selectedIndex);\n      }\n    }\n  }\n\n  animatePanel(panelName: string | null, panelIndex: number | null) {\n    if (panelName) {\n      const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanel;\n      if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n    } else {\n      if (panelIndex !== null && this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;\n    }\n  }\n\n  handleTabKeydown(event: KeyboardEvent) {\n    if (this.selected) {\n      switch (event.key) {\n        case 'Home':\n          if (this.tabs[0]) {\n            this.selected = this.tabs[0].getAttribute('link') ?? undefined;\n          }\n          break;\n        case 'End':\n          const lastTab = this.tabs[this.tabs.length - 1];\n          if (lastTab) {\n            this.selected = lastTab.getAttribute('link') ?? undefined;\n          }\n          break;\n        case 'ArrowRight':\n          const nextLinkElement = this.querySelector('kemet-tab[selected]')?.nextElementSibling;\n          const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;\n\n          if (nextLink) {\n            this.selected = nextLink;\n          }\n          break;\n        case 'ArrowLeft':\n          const previousLinkElement = this.querySelector('kemet-tab[selected]')?.previousElementSibling;\n          const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;\n\n          if (previousLink) {\n            this.selected = previousLink;\n          }\n          break;\n        default: break;\n      }\n\n      const tabToFocus = this.tabs.find(tab => tab.link === this.selected);\n      if (tabToFocus) tabToFocus.focus();\n    } else {\n      switch (event.key) {\n        case 'Home':\n          this.selectedIndex = 0;\n          break;\n        case 'End':\n          this.selectedIndex = this.tabs.length - 1;\n          break;\n        case 'ArrowRight':\n          if (this.selectedIndex < this.tabs.length - 1) {\n            this.selectedIndex += 1;\n          } else {\n            this.selectedIndex = this.tabs.length - 1;\n          }\n          break;\n        case 'ArrowLeft':\n          if (this.selectedIndex < 1) {\n            this.selectedIndex = 0;\n          } else {\n            this.selectedIndex -= 1;\n          }\n          break;\n        default: break;\n      }\n\n      if (this.tabs[this.selectedIndex]) {\n        this.tabs[this.selectedIndex]?.focus();\n      }\n    }\n  }\n\n  handleTouchStart(event: TouchEvent) {\n    this.xDown = event.touches[0]?.clientX ?? 0;\n    this.yDown = event.touches[0]?.clientY ?? 0;\n  }\n\n  handleTouchMove(event: TouchEvent) {\n    if (!this.xDown || !this.yDown) {\n      return;\n    }\n\n    const xUp = event.touches[0]?.clientX ?? 0;\n    const yUp = event.touches[0]?.clientY ?? 0;\n    const xDiff = this.xDown - xUp;\n    const yDiff = this.yDown - yUp;\n\n    const nextElement = this.querySelector('kemet-tab-panel[selected]')?.nextElementSibling;\n    const next = nextElement ? nextElement.getAttribute('panel') : false;\n    const previousElement = this.querySelector('kemet-tab-panel[selected]')?.previousElementSibling;\n    const previous = previousElement ? previousElement.getAttribute('panel') : false;\n\n    if (Math.abs(xDiff) > Math.abs(yDiff)) {\n      if (xDiff > 0) {\n        if (this.selected) {\n          if (next) this.selected = next;\n        } else {\n          if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;\n        }\n      } else {\n        if (this.selected) {\n          if (previous) this.selected = previous;\n        } else {\n          if (this.selectedIndex > 0) this.selectedIndex -= 1;\n        }\n      }\n\n      this.selectTab();\n      this.selectPanel();\n    }\n\n    this.xDown = null;\n    this.yDown = null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tabs': KemetTabs\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-tabs-ink-size: 6px;\n  --kemet-tabs-ink-radius: 6px;\n  --kemet-tabs-divider-size: 1px;\n  --kemet-tabs-spacer: 1rem;\n  --kemet-tabs-transition-speed: 0.5s;\n  --kemet-tabs-divider-color: var(--kemet-color-font-base);\n  --kemet-tabs-ink-color: var(--kemet-color-font-active);\n\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([placement='bottom']) {\n  flex-direction: column-reverse;\n}\n\n:host([placement='left']) {\n  flex-direction: row;\n}\n\n:host([placement='right']) {\n  flex-direction: row-reverse;\n}\n\n:host([placement='left']),\n:host([placement='right']) {\n  overflow: unset;\n}\n\n/* panels */\n\n[part='panels'] > div {\n  display: flex;\n}\n\n:host([panel-effect='slide']) [part='panels'] {\n  transition: transform var(--kemet-tabs-transition-speed) linear;\n}\n\n:host([panel-effect='fade']) [part='panels'] {\n  transform: none !important;\n}\n\n:host([panel-effect='fade']) [part='panels'] > div {\n  flex-flow: row nowrap;\n}\n\n:host([placement='left']) [part='panels'],\n:host([placement='right']) [part='panels'] {\n  transform: none !important;\n  position: relative;\n  width: 100%;\n}\n\n:host([placement='top']) [part='panels'] > div {\n  margin-top: var(--kemet-tabs-spacer);\n}\n\n:host([placement='right']) [part='panels'] > div {\n  margin-right: var(--kemet-tabs-spacer);\n}\n\n:host([placement='bottom']) [part='panels'] > div {\n  margin-bottom: var(--kemet-tabs-spacer);\n}\n\n:host([placement='left']) [part='panels'] > div {\n  margin-left: var(--kemet-tabs-spacer);\n}\n\n/* tablist */\n\n[part='tablist'] {\n  display: flex;\n}\n\n:host([placement='left']) [part='tablist'],\n:host([placement='right']) [part='tablist'] {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n}\n\n:host([tabs-align='center']) [part='tablist'] {\n  justify-content: center;\n}\n\n:host([tabs-align='between']) [part='tablist'] {\n  justify-content: space-between;\n}\n\n:host([tabs-align='evenly']) [part='tablist'] {\n  justify-content: space-evenly;\n}\n\n:host([tabs-align='around']) [part='tablist'] {\n  justify-content: space-around\n}\n\n:host([tabs-align='start']) [part='tablist'] {\n  justify-content: flex-start;\n}\n\n:host([tabs-align='end']) [part='tablist'] {\n  justify-content: flex-end;\n}\n\n:host([overflow]) [part='tablist'] {\n  justify-content: start;\n}\n\n/* divider */\n\n[part='divider'] {\n  height: var(--kemet-tabs-divider-size);\n  background-color: var(--kemet-tabs-divider-color);\n}\n\n:host([placement='left']) [part='divider'],\n:host([placement='right']) [part='divider'] {\n  width: var(--kemet-tabs-divider-size);\n  height: auto;\n}\n\n/* ink */\n\n[part='ink'] {\n  height: var(--kemet-tabs-ink-size);\n  border-top-left-radius: var(--kemet-tabs-ink-radius);\n  border-top-right-radius: var(--kemet-tabs-ink-radius);\n  transition: all 300ms ease;\n  background-color: var(--kemet-tabs-ink-color);\n}\n\n:host([placement='right']) [part='ink'] {\n  width: var(--kemet-tabs-ink-size);\n  border-top-right-radius: var(--kemet-tabs-ink-radius);\n  border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n\n:host([placement='left']) [part='ink'] {\n  width: var(--kemet-tabs-ink-size);\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: 0px;\n  border-top-left-radius: var(--kemet-tabs-ink-radius);\n  border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n}\n\n:host([placement='bottom']) [part='ink'] {\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n}\n\n/* links */\n\n:host([overflow]) [part='links'] {\n  overflow-x: auto;\n  margin: 0 2rem;\n  scroll-behavior: smooth;\n}\n\n:host([overflow]) [part='links']::-webkit-scrollbar {\n  display: none;\n  width: 0;\n  background: transparent;\n}\n\n:host([placement='bottom']) [part='links'] {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n/* icon */\n\n[icon*='chevron'] {\n  cursor: pointer;\n  position: absolute;\n  top: 1rem;\n}\n\n[icon='chevron-left'] {\n  left: 0;\n}\n\n[icon='chevron-right'] {\n  right: 0;\n}\n\n:host([placement='bottom']) [icon*='chevron'] {\n  top: auto;\n  bottom: 1rem;\n}\n`;\n"],"mappings":"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","names":["EnumPanelEffect","EnumTabsAlign"]}
+{"version":3,"sources":["../../../src/elements/tabs/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/tabs/styles.css.ts"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, query, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumDirections } from '../../utilities/constants';\nimport type KemetTab from '../tab';\nimport type KemetTabPanel from '../tab-panel';\nimport styles from './styles.css.ts';\n\n\ninterface InterfaceLink {\n  width: string;\n  height: string;\n  positionX: string;\n  positionY: string;\n}\n\nexport interface InterfaceTabsDetails {\n  element: KemetTabs;\n  selectedName: string;\n  selectedIndex: number;\n}\n\nexport enum EnumPanelEffect {\n  None = 'none',\n  Slide = 'slide',\n  Fade = 'fade',\n  Stacked = 'stacked'\n}\n\n\nexport enum EnumTabsAlign {\n  Center = 'center',\n  Between = 'between',\n  Around = 'around',\n  Evenly = 'evenly',\n  Start = 'start',\n  End = 'end'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tabs\n * @summary A group of tabs and panels.\n * @ssrsafe yes\n *\n * @prop {string} selected - The selected tab by name\n * @prop {number} selectedIndex - The selected tab by index\n * @prop {number} panelPosition - Positions the current panel\n * @prop {string} panelEffect - The transition effect for panels\n * @prop {boolean} swipe - Determines whether to enable swipe behavior\n * @prop {TypeDirection} placement - Places the tabs to the top, right, bottom, or left\n * @prop {boolean} divider - Determines whether to show a divider line\n * @prop {TypeTabsAlign} tabsAlign - Spacing alignment of the tabs\n * @prop {object} ink - An object that contains information about the ink\n * @prop {boolean} hideInk - Determines whether to hide the ink\n * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container\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 tab - Place the tabs here.\n * @slot panel - Place the panels here.\n *\n * @csspart links - The container for the tablist.\n * @csspart tablist - Contains the tabs.\n * @csspart panels - Contains the panels.\n * @csspart ink - The ink element.\n * @csspart divider - The divider element.\n *\n * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.\n * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.\n * @cssproperty --kemet-tabs-ink-color - The color of the ink.\n * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.\n * @cssproperty --kemet-tabs-divider-color - The color of the divider.\n * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.\n * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.\n *\n * @event kemet-tabs-change - Fires when a tab is changed\n *\n * @fires kemet-tabs-mounted - Fired when the tabs are mounted to the DOM\n * @detail {HTMLElement} element - The tabs element\n *\n */\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  selected?: string;\n\n  @property({ type: Number, reflect: true, attribute: 'selected-index' })\n  selectedIndex: number = 0;\n\n  @property({ type: Number })\n  panelPosition: number = 0;\n\n  @property({ type: String, reflect: true, attribute: 'panel-effect' })\n  panelEffect: EnumPanelEffect = EnumPanelEffect.None;\n\n  @property({ type: Boolean })\n  swipe: boolean = false;\n\n  @property({ type: String, reflect: true })\n  placement: EnumDirections = EnumDirections.Top;\n\n  @property({ type: Boolean })\n  divider: boolean = false;\n\n  @property({ type: String, reflect: true, attribute: 'tabs-align' })\n  tabsAlign: EnumTabsAlign = EnumTabsAlign.Center;\n\n  @property({ type: Object })\n  ink: InterfaceLink = { width: '0', height: '0', positionX: '0', positionY: '0' };\n\n  @property({ type: Boolean, attribute: 'hide-ink' })\n  hideInk: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  overflow: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  tabs!: KemetTab[];\n\n  @state()\n  panels!: KemetTabPanel[];\n\n  @state()\n  xDown!: number | null;\n\n  @state()\n  yDown!: number | null;\n\n  @state()\n  links!: HTMLElement;\n\n  @query('#panels')\n  panelsElement!: HTMLElement;\n\n  private _handleTabKeydown = this.handleTabKeydown.bind(this);\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));\n    this.addEventListener('kemet-tab-closed', this.handleTabClose.bind(this));\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('resize', this.handleResize.bind(this));\n    }\n  }\n\n  firstUpdated() {\n    // standard properties\n    this.tabs = [];\n    this.panels = [];\n    this.xDown = null;\n    this.yDown = null;\n\n    this.links = this.shadowRoot?.getElementById('links') as HTMLElement;\n\n    this.handleLinksSlotChange();\n    this.handlePanelsSlotChange();\n\n    emitEvent(this, 'kemet-tabs-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      ${this.makeLeftArrow()}\n      ${this.makeRightArrow()}\n      <div id=\"links\" part=\"links\">\n        <div part='tablist' role=\"tablist\">\n          <slot name=\"tab\" @slotchange=${() => this.handleLinksSlotChange()}></slot>\n        </div>\n        ${this.makeInk('links')}\n      </div>\n      ${this.makeInk('host')}\n      ${this.makeDivider()}\n      <section id=\"panels\" part=\"panels\" style=\"transform:translateX(${this.panelPosition}px);\">\n        <div>\n          <slot name=\"panel\" @slotchange=${() => this.handlePanelsSlotChange()}></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.determineFade();\n    this.determineStacked();\n\n    if (prevProps.get('selected') && prevProps.get('selected') !== this.selected) {\n      this.selectTab();\n      this.selectPanel();\n    }\n\n    if (typeof prevProps.get('selectedIndex') === 'number' && prevProps.get('selectedIndex') !== this.selected) {\n      this.selectTab();\n      this.selectPanel();\n    }\n  }\n\n  handleLinksSlotChange() {\n    this.tabs?.forEach((tab) => tab.removeEventListener('keydown', this._handleTabKeydown));\n    this.tabs = [];\n\n    const tabs = this.querySelectorAll('kemet-tab');\n    let index = 0;\n\n    tabs.forEach((tab: KemetTab) => {\n      // give each tab an index to select by if link/panel is not used\n      tab.index = index;\n      index += 1;\n\n      // store the list of tabs\n      this.tabs = this.tabs.concat(tab);\n\n      // add keyboard support\n      tab.addEventListener('keydown', this._handleTabKeydown);\n    });\n\n    // default to the first tab/panel selected\n    const firstTab = this.tabs[0];\n    if (firstTab) firstTab.selected = true;\n\n    setTimeout(() => {\n      this.selectTab();\n    }, 1);\n    this.determineOverflow();\n  }\n\n  handlePanelsSlotChange() {\n    this.panels = [];\n\n    const panels = this.querySelectorAll('kemet-tab-panel');\n    const panelElement = this.shadowRoot?.getElementById('panels');\n    let index = 0;\n\n    panels.forEach((panel: KemetTabPanel) => {\n      // give each panel an index to select by if link/panel is not used\n      panel.index = index;\n      index += 1;\n\n      // store the list of panels\n      this.panels = this.panels.concat(panel);\n    });\n\n    // default to the first tab/panel selected\n    if (this.panels.length > 0) {\n      const firstPanel = this.panels[0];\n      if (firstPanel) firstPanel.selected = true;\n    }\n\n    // add swipe support\n    if (this.swipe) {\n      panelElement?.addEventListener('touchstart', event => this.handleTouchStart(event), false);\n      panelElement?.addEventListener('touchmove', event => this.handleTouchMove(event), false);\n    }\n\n    this.selectPanel();\n  }\n\n  handleLeftArrow() {\n    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[0];\n    if (!selectedElement) return;\n    const previousElement = selectedElement.previousElementSibling as KemetTab;\n    const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n    if (this.selected) {\n      this.selected = previousElement ? previousElement.link : selectedElement.link;\n    } else {\n      this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;\n    }\n\n    if (previousElement) {\n      this.links.scrollLeft = previousElement.offsetLeft - 20;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n  }\n\n  handleRightArrow() {\n    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[this.tabs.length - 1];\n    if (!selectedElement) return;\n    const nextElement = selectedElement.nextElementSibling as KemetTab;\n    const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n    if (this.selected) {\n      this.selected = nextElement ? nextElement.link : selectedElement.link;\n    } else {\n      this.selectedIndex = selectedIndex < this.tabs.length - 1\n        ? selectedIndex + 1\n        : this.tabs.length - 1;\n    }\n\n    if (nextElement) {\n      this.links.scrollLeft = nextElement.offsetLeft - 20;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n  }\n\n  handleTabClose(event: Event) {\n    const tab = (event as CustomEvent).detail.element;\n    const panel = this.panels[tab.index];\n\n    if (this.tabs[0]) {\n      this.selected = this.tabs[0].link;\n    }\n    this.selectedIndex = 0;\n\n    panel?.remove();\n    tab.remove();\n  }\n\n  makeInk(location: string) {\n    if (this.hideInk) {\n      return null;\n    }\n\n    if ((this.placement === 'top' || this.placement === 'bottom') && this.ink && location === 'links') {\n      return html`<div part=\"ink\" style=\"width:${this.ink.width}; transform:translateX(${this.ink.positionX})\"></div>`;\n    }\n\n    if ((this.placement === 'left' || this.placement === 'right') && this.ink && location === 'host') {\n      return html`<div part=\"ink\" style=\"height:${this.ink.height}; transform:translateY(${this.ink.positionY})\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeDivider() {\n    if (this.divider) {\n      return html`<div part=\"divider\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeLeftArrow() {\n    if (this.overflow) {\n      return html`<kemet-icon name='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  makeRightArrow() {\n    if (this.overflow) {\n      return html`<kemet-icon name='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  selectTab() {\n    const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n    const overflowOffset = this.overflow ? marginLeft : 0;\n\n    // if the user uses the selected attribute select by it\n    if (this.selected) {\n      this.tabs.forEach((tab) => {\n        const tabName = tab.getAttribute('link');\n\n        if (tabName === this.selected) {\n          tab.selected = true;\n          this.selected = tabName;\n\n          this.ink = {\n            width: `${tab.offsetWidth}px`,\n            height: `${tab.offsetHeight}px`,\n            positionX: `${tab.offsetLeft - overflowOffset}px`,\n            positionY: `${tab.offsetTop}px`,\n          };\n\n          this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n        } else {\n          tab.selected = false;\n        }\n      });\n\n      // otherwise select by index\n    } else {\n      this.tabs.forEach((tab) => {\n        if (this.selectedIndex === tab.index) {\n          tab.selected = true;\n\n          this.ink = {\n            width: `${tab.offsetWidth}px`,\n            height: `${tab.offsetHeight}px`,\n            positionX: `${tab.offsetLeft - overflowOffset}px`,\n            positionY: `${tab.offsetTop}px`,\n          };\n\n          this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n        } else {\n          tab.selected = false;\n        }\n      });\n    }\n  }\n\n  selectPanel() {\n    // if the user uses the selected attribute select by it\n    if (this.selected) {\n      this.panels.forEach((panel) => {\n        const panelName = panel.getAttribute('panel');\n\n        if (this.panelEffect === 'fade' && panel.index !== 0) {\n          panel.classList.add('push');\n        }\n\n        if (this.placement === 'left' || this.placement === 'right') {\n          panel.classList.add('vertical');\n        }\n\n        if (panelName === this.selected) {\n          panel.selected = true;\n          this.animatePanel(panelName, null);\n        } else {\n          panel.selected = false;\n        }\n      });\n\n      // otherwise select by index\n    } else {\n      this.panels.forEach((panel) => {\n        if (this.panelEffect === 'fade' && panel.index !== 0) {\n          panel.classList.add('push');\n        }\n\n        if (this.placement === 'left' || this.placement === 'right') {\n          panel.classList.add('vertical');\n        }\n\n        if (this.selectedIndex === panel.index) {\n          panel.selected = true;\n          this.animatePanel(null, panel.index);\n        } else {\n          panel.selected = false;\n        }\n      });\n    }\n  }\n\n  dispatchTabChange() {\n    emitEvent(this, 'kemet-tabs-change', {\n      element: this,\n      selectedName: this.selected,\n      selectedIndex: this.selectedIndex\n    });\n  }\n\n  tabSelectedChange(event: Event) {\n    if (this.selected) {\n      // if selected has been set, use the string attribute\n      this.selected = (event as CustomEvent).detail.element.getAttribute('link');\n    } else {\n      // otherwise use the generated index\n      this.selectedIndex = (event as CustomEvent).detail.element.index;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n    this.dispatchTabChange();\n  }\n\n  determineFade() {\n    this.panels.forEach((panel) => {\n      // add fade class if panel effect is fade\n      if (this.panelEffect === 'fade') panel.classList.add('fade');\n    });\n  }\n\n  determineStacked() {\n    this.panels.forEach((panel) => {\n      // add fade class if panel effect is fade\n      if (this.panelEffect === 'stacked') panel.classList.add('stacked');\n    });\n  }\n\n  determineOverflow() {\n    const tabsContainerWidth = this.offsetWidth;\n    const tabElements = this.querySelectorAll('kemet-tab');\n\n    let totalTabsWidth = 0;\n\n    tabElements.forEach((tab) => {\n      totalTabsWidth += tab.offsetWidth;\n    });\n\n    this.overflow = totalTabsWidth > tabsContainerWidth && (this.placement === 'top' || this.placement === 'bottom');\n  }\n\n  handleResize() {\n    if (this.tabs && this.panels) {\n      const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n      const overflowOffset = this.overflow ? marginLeft : 0;\n      const selectedElement = this.tabs.find(tab => tab.selected);\n\n      if (selectedElement) {\n        this.ink = {\n          width: `${selectedElement.offsetWidth}px`,\n          height: `${selectedElement.offsetHeight}px`,\n          positionX: `${selectedElement.offsetLeft - overflowOffset}px`,\n          positionY: `${selectedElement.offsetTop}px`,\n        };\n      }\n\n      this.determineOverflow();\n\n      if (this.selected) {\n        this.animatePanel(this.selected, null);\n      } else {\n        this.animatePanel(null, this.selectedIndex);\n      }\n    }\n  }\n\n  animatePanel(panelName: string | null, panelIndex: number | null) {\n    if (panelName) {\n      const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanel;\n      if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n    } else {\n      if (panelIndex !== null && this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;\n    }\n  }\n\n  handleTabKeydown(event: KeyboardEvent) {\n    if (this.selected) {\n      switch (event.key) {\n        case 'Home':\n          if (this.tabs[0]) {\n            this.selected = this.tabs[0].getAttribute('link') ?? undefined;\n          }\n          break;\n        case 'End':\n          const lastTab = this.tabs[this.tabs.length - 1];\n          if (lastTab) {\n            this.selected = lastTab.getAttribute('link') ?? undefined;\n          }\n          break;\n        case 'ArrowRight':\n          const nextLinkElement = this.querySelector('kemet-tab[selected]')?.nextElementSibling;\n          const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;\n\n          if (nextLink) {\n            this.selected = nextLink;\n          }\n          break;\n        case 'ArrowLeft':\n          const previousLinkElement = this.querySelector('kemet-tab[selected]')?.previousElementSibling;\n          const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;\n\n          if (previousLink) {\n            this.selected = previousLink;\n          }\n          break;\n        default: break;\n      }\n\n      const tabToFocus = this.tabs.find(tab => tab.link === this.selected);\n      if (tabToFocus) tabToFocus.focus();\n    } else {\n      switch (event.key) {\n        case 'Home':\n          this.selectedIndex = 0;\n          break;\n        case 'End':\n          this.selectedIndex = this.tabs.length - 1;\n          break;\n        case 'ArrowRight':\n          if (this.selectedIndex < this.tabs.length - 1) {\n            this.selectedIndex += 1;\n          } else {\n            this.selectedIndex = this.tabs.length - 1;\n          }\n          break;\n        case 'ArrowLeft':\n          if (this.selectedIndex < 1) {\n            this.selectedIndex = 0;\n          } else {\n            this.selectedIndex -= 1;\n          }\n          break;\n        default: break;\n      }\n\n      if (this.tabs[this.selectedIndex]) {\n        this.tabs[this.selectedIndex]?.focus();\n      }\n    }\n  }\n\n  handleTouchStart(event: TouchEvent) {\n    this.xDown = event.touches[0]?.clientX ?? 0;\n    this.yDown = event.touches[0]?.clientY ?? 0;\n  }\n\n  handleTouchMove(event: TouchEvent) {\n    if (!this.xDown || !this.yDown) {\n      return;\n    }\n\n    const xUp = event.touches[0]?.clientX ?? 0;\n    const yUp = event.touches[0]?.clientY ?? 0;\n    const xDiff = this.xDown - xUp;\n    const yDiff = this.yDown - yUp;\n\n    const nextElement = this.querySelector('kemet-tab-panel[selected]')?.nextElementSibling;\n    const next = nextElement ? nextElement.getAttribute('panel') : false;\n    const previousElement = this.querySelector('kemet-tab-panel[selected]')?.previousElementSibling;\n    const previous = previousElement ? previousElement.getAttribute('panel') : false;\n\n    if (Math.abs(xDiff) > Math.abs(yDiff)) {\n      if (xDiff > 0) {\n        if (this.selected) {\n          if (next) this.selected = next;\n        } else {\n          if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;\n        }\n      } else {\n        if (this.selected) {\n          if (previous) this.selected = previous;\n        } else {\n          if (this.selectedIndex > 0) this.selectedIndex -= 1;\n        }\n      }\n\n      this.selectTab();\n      this.selectPanel();\n    }\n\n    this.xDown = null;\n    this.yDown = null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tabs': KemetTabs\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-tabs-ink-size: 6px;\n  --kemet-tabs-ink-radius: 6px;\n  --kemet-tabs-divider-size: 1px;\n  --kemet-tabs-spacer: 1rem;\n  --kemet-tabs-transition-speed: 0.5s;\n  --kemet-tabs-divider-color: var(--kemet-color-font-base);\n  --kemet-tabs-ink-color: var(--kemet-color-font-active);\n\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([placement='bottom']) {\n  flex-direction: column-reverse;\n}\n\n:host([placement='left']) {\n  flex-direction: row;\n}\n\n:host([placement='right']) {\n  flex-direction: row-reverse;\n}\n\n:host([placement='left']),\n:host([placement='right']) {\n  overflow: unset;\n}\n\n/* panels */\n\n[part='panels'] > div {\n  display: flex;\n}\n\n:host([panel-effect='slide']) [part='panels'] {\n  transition: transform var(--kemet-tabs-transition-speed) linear;\n}\n\n:host([panel-effect='fade']) [part='panels'] {\n  transform: none !important;\n}\n\n:host([panel-effect='fade']) [part='panels'] > div {\n  flex-flow: row nowrap;\n}\n\n:host([placement='left']) [part='panels'],\n:host([placement='right']) [part='panels'] {\n  transform: none !important;\n  position: relative;\n  width: 100%;\n}\n\n:host([placement='top']) [part='panels'] > div {\n  margin-top: var(--kemet-tabs-spacer);\n}\n\n:host([placement='right']) [part='panels'] > div {\n  margin-right: var(--kemet-tabs-spacer);\n}\n\n:host([placement='bottom']) [part='panels'] > div {\n  margin-bottom: var(--kemet-tabs-spacer);\n}\n\n:host([placement='left']) [part='panels'] > div {\n  margin-left: var(--kemet-tabs-spacer);\n}\n\n/* tablist */\n\n[part='tablist'] {\n  display: flex;\n}\n\n:host([placement='left']) [part='tablist'],\n:host([placement='right']) [part='tablist'] {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n}\n\n:host([tabs-align='center']) [part='tablist'] {\n  justify-content: center;\n}\n\n:host([tabs-align='between']) [part='tablist'] {\n  justify-content: space-between;\n}\n\n:host([tabs-align='evenly']) [part='tablist'] {\n  justify-content: space-evenly;\n}\n\n:host([tabs-align='around']) [part='tablist'] {\n  justify-content: space-around\n}\n\n:host([tabs-align='start']) [part='tablist'] {\n  justify-content: flex-start;\n}\n\n:host([tabs-align='end']) [part='tablist'] {\n  justify-content: flex-end;\n}\n\n:host([overflow]) [part='tablist'] {\n  justify-content: start;\n}\n\n/* divider */\n\n[part='divider'] {\n  height: var(--kemet-tabs-divider-size);\n  background-color: var(--kemet-tabs-divider-color);\n}\n\n:host([placement='left']) [part='divider'],\n:host([placement='right']) [part='divider'] {\n  width: var(--kemet-tabs-divider-size);\n  height: auto;\n}\n\n/* ink */\n\n[part='ink'] {\n  height: var(--kemet-tabs-ink-size);\n  border-top-left-radius: var(--kemet-tabs-ink-radius);\n  border-top-right-radius: var(--kemet-tabs-ink-radius);\n  transition: all 300ms ease;\n  background-color: var(--kemet-tabs-ink-color);\n}\n\n:host([placement='right']) [part='ink'] {\n  width: var(--kemet-tabs-ink-size);\n  border-top-right-radius: var(--kemet-tabs-ink-radius);\n  border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n\n:host([placement='left']) [part='ink'] {\n  width: var(--kemet-tabs-ink-size);\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: 0px;\n  border-top-left-radius: var(--kemet-tabs-ink-radius);\n  border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n}\n\n:host([placement='bottom']) [part='ink'] {\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n}\n\n/* links */\n\n:host([overflow]) [part='links'] {\n  overflow-x: auto;\n  margin: 0 2rem;\n  scroll-behavior: smooth;\n}\n\n:host([overflow]) [part='links']::-webkit-scrollbar {\n  display: none;\n  width: 0;\n  background: transparent;\n}\n\n:host([placement='bottom']) [part='links'] {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n/* icon */\n\n[icon*='chevron'] {\n  cursor: pointer;\n  position: absolute;\n  top: 1rem;\n}\n\n[icon='chevron-left'] {\n  left: 0;\n}\n\n[icon='chevron-right'] {\n  right: 0;\n}\n\n:host([placement='bottom']) [icon*='chevron'] {\n  top: auto;\n  bottom: 1rem;\n}\n`;\n"],"mappings":";;;;;;;;;;;;AACA,SAAS,YAAY,YAAuB;;;ACD5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAsB,MAAc,QAAa,UAAU,MAAM,WAAW,SAAS;AAC7G,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AHqBR,IAAK,kBAAL,kBAAKA,qBAAL;AACL,EAAAA,iBAAA,UAAO;AACP,EAAAA,iBAAA,WAAQ;AACR,EAAAA,iBAAA,UAAO;AACP,EAAAA,iBAAA,aAAU;AAJA,SAAAA;AAAA,GAAA;AAQL,IAAK,gBAAL,kBAAKC,mBAAL;AACL,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,SAAM;AANI,SAAAA;AAAA,GAAA;AAwDZ,IAAqB,YAArB,cAAuC,WAAW;AAAA,EA8DhD,cAAc;AACZ,UAAM;AAxDR,yBAAwB;AAGxB,yBAAwB;AAGxB,uBAA+B;AAG/B,iBAAiB;AAGjB;AAGA,mBAAmB;AAGnB,qBAA2B;AAG3B,eAAqB,EAAE,OAAO,KAAK,QAAQ,KAAK,WAAW,KAAK,WAAW,IAAI;AAG/E,mBAAmB;AAGnB,oBAAoB;AAMpB,eAAc;AAoBd,SAAQ,oBAAoB,KAAK,iBAAiB,KAAK,IAAI;AAKzD,SAAK,iBAAiB,sBAAsB,KAAK,kBAAkB,KAAK,IAAI,CAAC;AAC7E,SAAK,iBAAiB,oBAAoB,KAAK,eAAe,KAAK,IAAI,CAAC;AAExE,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO,iBAAiB,UAAU,KAAK,aAAa,KAAK,IAAI,CAAC;AAAA,IAChE;AAAA,EACF;AAAA,EAEA,eAAe;AAEb,SAAK,OAAO,CAAC;AACb,SAAK,SAAS,CAAC;AACf,SAAK,QAAQ;AACb,SAAK,QAAQ;AAEb,SAAK,QAAQ,KAAK,YAAY,eAAe,OAAO;AAEpD,SAAK,sBAAsB;AAC3B,SAAK,uBAAuB;AAE5B,cAAU,MAAM,sBAAsB;AAAA,MACpC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,cAAc,CAAC;AAAA,QACpB,KAAK,eAAe,CAAC;AAAA;AAAA;AAAA,yCAGY,MAAM,KAAK,sBAAsB,CAAC;AAAA;AAAA,UAEjE,KAAK,QAAQ,OAAO,CAAC;AAAA;AAAA,QAEvB,KAAK,QAAQ,MAAM,CAAC;AAAA,QACpB,KAAK,YAAY,CAAC;AAAA,uEAC6C,KAAK,aAAa;AAAA;AAAA,2CAE9C,MAAM,KAAK,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA,EAI5E;AAAA,EAEA,QAAQ,WAA+B;AACrC,SAAK,cAAc;AACnB,SAAK,iBAAiB;AAEtB,QAAI,UAAU,IAAI,UAAU,KAAK,UAAU,IAAI,UAAU,MAAM,KAAK,UAAU;AAC5E,WAAK,UAAU;AACf,WAAK,YAAY;AAAA,IACnB;AAEA,QAAI,OAAO,UAAU,IAAI,eAAe,MAAM,YAAY,UAAU,IAAI,eAAe,MAAM,KAAK,UAAU;AAC1G,WAAK,UAAU;AACf,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,SAAK,MAAM,QAAQ,CAAC,QAAQ,IAAI,oBAAoB,WAAW,KAAK,iBAAiB,CAAC;AACtF,SAAK,OAAO,CAAC;AAEb,UAAM,OAAO,KAAK,iBAAiB,WAAW;AAC9C,QAAI,QAAQ;AAEZ,SAAK,QAAQ,CAAC,QAAkB;AAE9B,UAAI,QAAQ;AACZ,eAAS;AAGT,WAAK,OAAO,KAAK,KAAK,OAAO,GAAG;AAGhC,UAAI,iBAAiB,WAAW,KAAK,iBAAiB;AAAA,IACxD,CAAC;AAGD,UAAM,WAAW,KAAK,KAAK,CAAC;AAC5B,QAAI,SAAU,UAAS,WAAW;AAElC,eAAW,MAAM;AACf,WAAK,UAAU;AAAA,IACjB,GAAG,CAAC;AACJ,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,yBAAyB;AACvB,SAAK,SAAS,CAAC;AAEf,UAAM,SAAS,KAAK,iBAAiB,iBAAiB;AACtD,UAAM,eAAe,KAAK,YAAY,eAAe,QAAQ;AAC7D,QAAI,QAAQ;AAEZ,WAAO,QAAQ,CAAC,UAAyB;AAEvC,YAAM,QAAQ;AACd,eAAS;AAGT,WAAK,SAAS,KAAK,OAAO,OAAO,KAAK;AAAA,IACxC,CAAC;AAGD,QAAI,KAAK,OAAO,SAAS,GAAG;AAC1B,YAAM,aAAa,KAAK,OAAO,CAAC;AAChC,UAAI,WAAY,YAAW,WAAW;AAAA,IACxC;AAGA,QAAI,KAAK,OAAO;AACd,oBAAc,iBAAiB,cAAc,WAAS,KAAK,iBAAiB,KAAK,GAAG,KAAK;AACzF,oBAAc,iBAAiB,aAAa,WAAS,KAAK,gBAAgB,KAAK,GAAG,KAAK;AAAA,IACzF;AAEA,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,kBAAkB;AAChB,UAAM,kBAAkB,KAAK,KAAK,KAAK,SAAO,IAAI,QAAQ,KAAK,KAAK,KAAK,CAAC;AAC1E,QAAI,CAAC,gBAAiB;AACtB,UAAM,kBAAkB,gBAAgB;AACxC,UAAM,gBAAgB,KAAK,KAAK,UAAU,SAAO,IAAI,QAAQ;AAE7D,QAAI,KAAK,UAAU;AACjB,WAAK,WAAW,kBAAkB,gBAAgB,OAAO,gBAAgB;AAAA,IAC3E,OAAO;AACL,WAAK,gBAAgB,gBAAgB,IAAI,gBAAgB,IAAI;AAAA,IAC/D;AAEA,QAAI,iBAAiB;AACnB,WAAK,MAAM,aAAa,gBAAgB,aAAa;AAAA,IACvD;AAEA,SAAK,UAAU;AACf,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,mBAAmB;AACjB,UAAM,kBAAkB,KAAK,KAAK,KAAK,SAAO,IAAI,QAAQ,KAAK,KAAK,KAAK,KAAK,KAAK,SAAS,CAAC;AAC7F,QAAI,CAAC,gBAAiB;AACtB,UAAM,cAAc,gBAAgB;AACpC,UAAM,gBAAgB,KAAK,KAAK,UAAU,SAAO,IAAI,QAAQ;AAE7D,QAAI,KAAK,UAAU;AACjB,WAAK,WAAW,cAAc,YAAY,OAAO,gBAAgB;AAAA,IACnE,OAAO;AACL,WAAK,gBAAgB,gBAAgB,KAAK,KAAK,SAAS,IACpD,gBAAgB,IAChB,KAAK,KAAK,SAAS;AAAA,IACzB;AAEA,QAAI,aAAa;AACf,WAAK,MAAM,aAAa,YAAY,aAAa;AAAA,IACnD;AAEA,SAAK,UAAU;AACf,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,eAAe,OAAc;AAC3B,UAAM,MAAO,MAAsB,OAAO;AAC1C,UAAM,QAAQ,KAAK,OAAO,IAAI,KAAK;AAEnC,QAAI,KAAK,KAAK,CAAC,GAAG;AAChB,WAAK,WAAW,KAAK,KAAK,CAAC,EAAE;AAAA,IAC/B;AACA,SAAK,gBAAgB;AAErB,WAAO,OAAO;AACd,QAAI,OAAO;AAAA,EACb;AAAA,EAEA,QAAQ,UAAkB;AACxB,QAAI,KAAK,SAAS;AAChB,aAAO;AAAA,IACT;AAEA,SAAK,KAAK,cAAc,SAAS,KAAK,cAAc,aAAa,KAAK,OAAO,aAAa,SAAS;AACjG,aAAO,oCAAoC,KAAK,IAAI,KAAK,0BAA0B,KAAK,IAAI,SAAS;AAAA,IACvG;AAEA,SAAK,KAAK,cAAc,UAAU,KAAK,cAAc,YAAY,KAAK,OAAO,aAAa,QAAQ;AAChG,aAAO,qCAAqC,KAAK,IAAI,MAAM,0BAA0B,KAAK,IAAI,SAAS;AAAA,IACzG;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,SAAS;AAChB,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,UAAU;AACjB,aAAO,wDAAwD,MAAM,KAAK,gBAAgB,CAAC;AAAA,IAC7F;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB;AACf,QAAI,KAAK,UAAU;AACjB,aAAO,yDAAyD,MAAM,KAAK,iBAAiB,CAAC;AAAA,IAC/F;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,YAAY;AACV,UAAM,aAAa,KAAK,QAAQ,SAAS,OAAO,iBAAiB,KAAK,KAAK,EAAE,WAAW,QAAQ,MAAM,EAAE,GAAG,EAAE,IAAI;AACjH,UAAM,iBAAiB,KAAK,WAAW,aAAa;AAGpD,QAAI,KAAK,UAAU;AACjB,WAAK,KAAK,QAAQ,CAAC,QAAQ;AACzB,cAAM,UAAU,IAAI,aAAa,MAAM;AAEvC,YAAI,YAAY,KAAK,UAAU;AAC7B,cAAI,WAAW;AACf,eAAK,WAAW;AAEhB,eAAK,MAAM;AAAA,YACT,OAAO,GAAG,IAAI,WAAW;AAAA,YACzB,QAAQ,GAAG,IAAI,YAAY;AAAA,YAC3B,WAAW,GAAG,IAAI,aAAa,cAAc;AAAA,YAC7C,WAAW,GAAG,IAAI,SAAS;AAAA,UAC7B;AAEA,eAAK,MAAM,aAAa,IAAI,aAAa;AAAA,QAC3C,OAAO;AACL,cAAI,WAAW;AAAA,QACjB;AAAA,MACF,CAAC;AAAA,IAGH,OAAO;AACL,WAAK,KAAK,QAAQ,CAAC,QAAQ;AACzB,YAAI,KAAK,kBAAkB,IAAI,OAAO;AACpC,cAAI,WAAW;AAEf,eAAK,MAAM;AAAA,YACT,OAAO,GAAG,IAAI,WAAW;AAAA,YACzB,QAAQ,GAAG,IAAI,YAAY;AAAA,YAC3B,WAAW,GAAG,IAAI,aAAa,cAAc;AAAA,YAC7C,WAAW,GAAG,IAAI,SAAS;AAAA,UAC7B;AAEA,eAAK,MAAM,aAAa,IAAI,aAAa;AAAA,QAC3C,OAAO;AACL,cAAI,WAAW;AAAA,QACjB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,cAAc;AAEZ,QAAI,KAAK,UAAU;AACjB,WAAK,OAAO,QAAQ,CAAC,UAAU;AAC7B,cAAM,YAAY,MAAM,aAAa,OAAO;AAE5C,YAAI,KAAK,gBAAgB,UAAU,MAAM,UAAU,GAAG;AACpD,gBAAM,UAAU,IAAI,MAAM;AAAA,QAC5B;AAEA,YAAI,KAAK,cAAc,UAAU,KAAK,cAAc,SAAS;AAC3D,gBAAM,UAAU,IAAI,UAAU;AAAA,QAChC;AAEA,YAAI,cAAc,KAAK,UAAU;AAC/B,gBAAM,WAAW;AACjB,eAAK,aAAa,WAAW,IAAI;AAAA,QACnC,OAAO;AACL,gBAAM,WAAW;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IAGH,OAAO;AACL,WAAK,OAAO,QAAQ,CAAC,UAAU;AAC7B,YAAI,KAAK,gBAAgB,UAAU,MAAM,UAAU,GAAG;AACpD,gBAAM,UAAU,IAAI,MAAM;AAAA,QAC5B;AAEA,YAAI,KAAK,cAAc,UAAU,KAAK,cAAc,SAAS;AAC3D,gBAAM,UAAU,IAAI,UAAU;AAAA,QAChC;AAEA,YAAI,KAAK,kBAAkB,MAAM,OAAO;AACtC,gBAAM,WAAW;AACjB,eAAK,aAAa,MAAM,MAAM,KAAK;AAAA,QACrC,OAAO;AACL,gBAAM,WAAW;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,oBAAoB;AAClB,cAAU,MAAM,qBAAqB;AAAA,MACnC,SAAS;AAAA,MACT,cAAc,KAAK;AAAA,MACnB,eAAe,KAAK;AAAA,IACtB,CAAC;AAAA,EACH;AAAA,EAEA,kBAAkB,OAAc;AAC9B,QAAI,KAAK,UAAU;AAEjB,WAAK,WAAY,MAAsB,OAAO,QAAQ,aAAa,MAAM;AAAA,IAC3E,OAAO;AAEL,WAAK,gBAAiB,MAAsB,OAAO,QAAQ;AAAA,IAC7D;AAEA,SAAK,UAAU;AACf,SAAK,YAAY;AACjB,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,gBAAgB;AACd,SAAK,OAAO,QAAQ,CAAC,UAAU;AAE7B,UAAI,KAAK,gBAAgB,OAAQ,OAAM,UAAU,IAAI,MAAM;AAAA,IAC7D,CAAC;AAAA,EACH;AAAA,EAEA,mBAAmB;AACjB,SAAK,OAAO,QAAQ,CAAC,UAAU;AAE7B,UAAI,KAAK,gBAAgB,UAAW,OAAM,UAAU,IAAI,SAAS;AAAA,IACnE,CAAC;AAAA,EACH;AAAA,EAEA,oBAAoB;AAClB,UAAM,qBAAqB,KAAK;AAChC,UAAM,cAAc,KAAK,iBAAiB,WAAW;AAErD,QAAI,iBAAiB;AAErB,gBAAY,QAAQ,CAAC,QAAQ;AAC3B,wBAAkB,IAAI;AAAA,IACxB,CAAC;AAED,SAAK,WAAW,iBAAiB,uBAAuB,KAAK,cAAc,SAAS,KAAK,cAAc;AAAA,EACzG;AAAA,EAEA,eAAe;AACb,QAAI,KAAK,QAAQ,KAAK,QAAQ;AAC5B,YAAM,aAAa,KAAK,QAAQ,SAAS,OAAO,iBAAiB,KAAK,KAAK,EAAE,WAAW,QAAQ,MAAM,EAAE,GAAG,EAAE,IAAI;AACjH,YAAM,iBAAiB,KAAK,WAAW,aAAa;AACpD,YAAM,kBAAkB,KAAK,KAAK,KAAK,SAAO,IAAI,QAAQ;AAE1D,UAAI,iBAAiB;AACnB,aAAK,MAAM;AAAA,UACT,OAAO,GAAG,gBAAgB,WAAW;AAAA,UACrC,QAAQ,GAAG,gBAAgB,YAAY;AAAA,UACvC,WAAW,GAAG,gBAAgB,aAAa,cAAc;AAAA,UACzD,WAAW,GAAG,gBAAgB,SAAS;AAAA,QACzC;AAAA,MACF;AAEA,WAAK,kBAAkB;AAEvB,UAAI,KAAK,UAAU;AACjB,aAAK,aAAa,KAAK,UAAU,IAAI;AAAA,MACvC,OAAO;AACL,aAAK,aAAa,MAAM,KAAK,aAAa;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,aAAa,WAA0B,YAA2B;AAChE,QAAI,WAAW;AACb,YAAM,gBAAgB,KAAK,cAAc,WAAW,SAAS,IAAI;AACjE,UAAI,cAAe,MAAK,gBAAgB,cAAc,aAAa;AAAA,IACrE,OAAO;AACL,UAAI,eAAe,QAAQ,KAAK,OAAO,UAAU,EAAG,MAAK,gBAAgB,KAAK,OAAO,UAAU,EAAE,aAAa;AAAA,IAChH;AAAA,EACF;AAAA,EAEA,iBAAiB,OAAsB;AACrC,QAAI,KAAK,UAAU;AACjB,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,cAAI,KAAK,KAAK,CAAC,GAAG;AAChB,iBAAK,WAAW,KAAK,KAAK,CAAC,EAAE,aAAa,MAAM,KAAK;AAAA,UACvD;AACA;AAAA,QACF,KAAK;AACH,gBAAM,UAAU,KAAK,KAAK,KAAK,KAAK,SAAS,CAAC;AAC9C,cAAI,SAAS;AACX,iBAAK,WAAW,QAAQ,aAAa,MAAM,KAAK;AAAA,UAClD;AACA;AAAA,QACF,KAAK;AACH,gBAAM,kBAAkB,KAAK,cAAc,qBAAqB,GAAG;AACnE,gBAAM,WAAW,kBAAkB,gBAAgB,aAAa,MAAM,IAAI;AAE1E,cAAI,UAAU;AACZ,iBAAK,WAAW;AAAA,UAClB;AACA;AAAA,QACF,KAAK;AACH,gBAAM,sBAAsB,KAAK,cAAc,qBAAqB,GAAG;AACvE,gBAAM,eAAe,sBAAsB,oBAAoB,aAAa,MAAM,IAAI;AAEtF,cAAI,cAAc;AAChB,iBAAK,WAAW;AAAA,UAClB;AACA;AAAA,QACF;AAAS;AAAA,MACX;AAEA,YAAM,aAAa,KAAK,KAAK,KAAK,SAAO,IAAI,SAAS,KAAK,QAAQ;AACnE,UAAI,WAAY,YAAW,MAAM;AAAA,IACnC,OAAO;AACL,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,eAAK,gBAAgB;AACrB;AAAA,QACF,KAAK;AACH,eAAK,gBAAgB,KAAK,KAAK,SAAS;AACxC;AAAA,QACF,KAAK;AACH,cAAI,KAAK,gBAAgB,KAAK,KAAK,SAAS,GAAG;AAC7C,iBAAK,iBAAiB;AAAA,UACxB,OAAO;AACL,iBAAK,gBAAgB,KAAK,KAAK,SAAS;AAAA,UAC1C;AACA;AAAA,QACF,KAAK;AACH,cAAI,KAAK,gBAAgB,GAAG;AAC1B,iBAAK,gBAAgB;AAAA,UACvB,OAAO;AACL,iBAAK,iBAAiB;AAAA,UACxB;AACA;AAAA,QACF;AAAS;AAAA,MACX;AAEA,UAAI,KAAK,KAAK,KAAK,aAAa,GAAG;AACjC,aAAK,KAAK,KAAK,aAAa,GAAG,MAAM;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB,OAAmB;AAClC,SAAK,QAAQ,MAAM,QAAQ,CAAC,GAAG,WAAW;AAC1C,SAAK,QAAQ,MAAM,QAAQ,CAAC,GAAG,WAAW;AAAA,EAC5C;AAAA,EAEA,gBAAgB,OAAmB;AACjC,QAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAO;AAC9B;AAAA,IACF;AAEA,UAAM,MAAM,MAAM,QAAQ,CAAC,GAAG,WAAW;AACzC,UAAM,MAAM,MAAM,QAAQ,CAAC,GAAG,WAAW;AACzC,UAAM,QAAQ,KAAK,QAAQ;AAC3B,UAAM,QAAQ,KAAK,QAAQ;AAE3B,UAAM,cAAc,KAAK,cAAc,2BAA2B,GAAG;AACrE,UAAM,OAAO,cAAc,YAAY,aAAa,OAAO,IAAI;AAC/D,UAAM,kBAAkB,KAAK,cAAc,2BAA2B,GAAG;AACzE,UAAM,WAAW,kBAAkB,gBAAgB,aAAa,OAAO,IAAI;AAE3E,QAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG;AACrC,UAAI,QAAQ,GAAG;AACb,YAAI,KAAK,UAAU;AACjB,cAAI,KAAM,MAAK,WAAW;AAAA,QAC5B,OAAO;AACL,cAAI,KAAK,gBAAgB,KAAK,KAAK,OAAQ,MAAK,iBAAiB;AAAA,QACnE;AAAA,MACF,OAAO;AACL,YAAI,KAAK,UAAU;AACjB,cAAI,SAAU,MAAK,WAAW;AAAA,QAChC,OAAO;AACL,cAAI,KAAK,gBAAgB,EAAG,MAAK,iBAAiB;AAAA,QACpD;AAAA,MACF;AAEA,WAAK,UAAU;AACf,WAAK,YAAY;AAAA,IACnB;AAEA,SAAK,QAAQ;AACb,SAAK,QAAQ;AAAA,EACf;AACF;AAtjBqB,UACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,UAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GANnD,UAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,UAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAZjD,UAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAfR,UAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,UAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GArBR,UAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,aAAa,CAAC;AAAA,GAxB/C,UAyBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3BP,UA4BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,WAAW,CAAC;AAAA,GA9B/B,UA+BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjCvB,UAkCnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GApCtB,UAqCnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAvCtB,UAwCnB;AAGA;AAAA,EADC,MAAM;AAAA,GA1CY,UA2CnB;AAGA;AAAA,EADC,MAAM;AAAA,GA7CY,UA8CnB;AAGA;AAAA,EADC,MAAM;AAAA,GAhDY,UAiDnB;AAGA;AAAA,EADC,MAAM;AAAA,GAnDY,UAoDnB;AAGA;AAAA,EADC,MAAM;AAAA,GAtDY,UAuDnB;AAGA;AAAA,EADC,MAAM,SAAS;AAAA,GAzDG,UA0DnB;AA1DmB,YAArB;AAAA,EADC,cAAc,YAAY;AAAA,GACN;","names":["EnumPanelEffect","EnumTabsAlign"]}

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

@@ -1,4 +1,4 @@
 import 'lit-html';
 import 'lit';
 import '../../form-controller-3q581XcZ.js';
-export { f as default } from '../../constants-Dj9X-JwG.js';
+export { f as default } from '../../constants-BsAfWV-a.js';

package/dist/elements/textarea/index.js

@@ -68,14 +68,13 @@ var FormSubmitController = class {
         if (component.checkValidity) {
           component.checkValidity();
           if (!component.checkValidity()) {
-            component.status = "error";
+            console.log("invalid", component);
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
-                bubbles: true,
-                composed: true,
                 detail: {
-                  status: "error",
+                  appearance: "error" /* Error */,
                   validity: component.validity ? component.validity : {},
                   element: component
                 }
@@ -83,7 +82,7 @@ var FormSubmitController = class {
             );
           }
           if (component.checkLimitValidity && !component.checkLimitValidity()) {
-            component.status = "error";
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
@@ -133,7 +132,7 @@ var styles_css_default = css`:host {
   --kemet-textarea-padding: 1rem;
   --kemet-textarea-color: var(--kemet-color-font-base);
   --kemet-textarea-font-color: inherit;
-  --kemet-textarea-border: 1px solid;
+  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);
   --kemet-textarea-border-radius: 0;
 
   /* private */
@@ -201,7 +200,7 @@ textarea {
 
 
 :host([appearance=brand][filled]) {
-  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error][filled]) {
@@ -222,7 +221,7 @@ textarea {
 
 
 :host([appearance=brand]) {
-  --kemet-textarea-color: var(--kemet-color-brand-primary-base);
+  --kemet-textarea-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]) {
@@ -272,6 +271,14 @@ var HTMLKemetTextareaElement = class extends LitElement {
     });
     this.dom = "mounted";
   }
+  updated(changedProperties) {
+    if (changedProperties.has("appearance")) {
+      emitEvent(this, "kemet-textarea-appearance-change", {
+        appearance: this.appearance,
+        element: this
+      });
+    }
+  }
   render() {
     return html`
       <textarea
@@ -358,6 +365,7 @@ var HTMLKemetTextareaElement = class extends LitElement {
    */
   handleInput() {
     this.value = this.textarea.value;
+    this.appearance = "neutral" /* Neutral */;
     this.dispatchEvent(
       new CustomEvent("kemet-textarea-input", {
         bubbles: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/textarea/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/textarea/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport HTMLKemetFieldElement from '../field';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n * @ssrsafe yes\n *\n * @prop {string} slug\n * @prop {string}  name\n * @prop {string}  placeholder\n * @prop {number}  minlength\n * @prop {number}  maxlength\n * @prop {string}  inputmode\n * @prop {boolean}  disabled\n * @prop {boolean}  readonly\n * @prop {boolean}  required\n * @prop {string}  value\n * @prop {boolean}  invalid\n * @prop {EnumAppearances}  appearance\n * @prop {boolean}  validateOnBlur\n * @prop {EnumRoundedSizes}  rounded\n * @prop {boolean}  filled\n * @prop {number}  rows\n * @prop {boolean} autocorrect\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n * @fires kemet-textarea-focused - Fired when the textarea is focused or blurred\n * @detail {boolean} focused - Whether the textarea is focused\n *\n * @fires kemet-textarea-input - Fired when the textarea receives input\n * @detail {string} value - The value of the textarea\n *\n * @fires kemet-textarea-appearance-change - Fired when the textarea appearance changes\n * @detail {EnumAppearances} appearance - The appearance of the textarea\n *\n * @fires kemet-textarea-mounted - Fired when the textarea is mounted to the DOM\n * @detail {HTMLElement} element - The textarea element\n *\n */\n\n@customElement('kemet-textarea')\nexport default class HTMLKemetTextareaElement extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'textarea';\n\n  @property({ type: String })\n  name: string = 'textarea';\n\n  @property({ type: String })\n  placeholder?: string;\n\n  @property({ type: Number })\n  minlength?: number;\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  @property({ type: String })\n  inputmode?: string;\n\n  @property({ type: Boolean })\n  autofocus: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled?: boolean;\n\n  @property({ type: Boolean })\n  readonly?: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required?: boolean;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid?: boolean;\n\n  @property({ type: String, reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Number })\n  rows: number = 4;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur?: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled?: boolean;\n\n  @property({ reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: Boolean })\n  autocorrect: boolean = false;\n\n  @state()\n  form!: HTMLFormElement;\n\n  @state()\n  control!: HTMLKemetFieldElement;\n\n  @state()\n  textarea!: HTMLTextAreaElement;\n\n  @state()\n  hasFocus!: boolean;\n\n  @state()\n  validity!: ValidityState;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.form = this.closest('form') as HTMLFormElement;\n    this.control = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.textarea = this.shadowRoot?.querySelector('textarea') as HTMLTextAreaElement;\n\n    emitEvent(this, 'kemet-textarea-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      <textarea\n        part=\"textarea\"\n        id=${this.slug}\n        name=${this.name}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        placeholder=${ifDefined(this.placeholder)}\n        rows=${ifDefined(this.rows)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        autocorrect=${ifDefined(this.autocorrect)}\n        ?autofocus=${this.autofocus}\n        spellcheck=${ifDefined(this.spellcheck)}\n        inputmode=${ifDefined(this.inputmode)}\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      ></textarea>\n    `;\n  }\n\n  /**\n   * Handles when the textarea receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-textarea-focused', {\n        bubbles: true,\n        composed: true,\n        detail: { focused: true, element: this },\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-textarea-focused', {\n        bubbles: true,\n        composed: true,\n        detail: { focused: false, element: this },\n      }),\n    );\n\n    if (this.validateOnBlur && this.form) {\n      this.textarea.checkValidity();\n      this.validity = this.textarea.validity;\n    }\n  }\n\n  /**\n   * Handles when the textarea changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.textarea.value;\n\n    if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n      this.invalid = false;\n      this.validity = this.textarea.validity;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-textarea-appearance-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            appearance: EnumAppearances.Neutral,\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Handles when the textarea receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.textarea.value;\n\n    /**\n     * Fires when the input receives input\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-textarea-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value, element: this },\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.textarea.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.appearance = EnumAppearances.Error;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-textarea-appearance-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            appearance: EnumAppearances.Error,\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @private\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.control) {\n      const count = this.control.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.textarea.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    return this.textarea.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-textarea': HTMLKemetTextareaElement\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-textarea-padding: 1rem;\n  --kemet-textarea-color: var(--kemet-color-font-base);\n  --kemet-textarea-font-color: inherit;\n  --kemet-textarea-border: 1px solid;\n  --kemet-textarea-border-radius: 0;\n\n  /* private */\n  --_kemet-textarea-background-color: transparent;\n\n  position: relative;\n  display: block;\n}\n\ntextarea {\n  color: var(--kemet-textarea-font-color);\n  display: block;\n  width: 100%;\n  padding: var(--kemet-textarea-padding);\n  border: var(--kemet-textarea-border);\n  appearance: none;\n  box-sizing: border-box;\n  background: var(--_kemet-textarea-background-color);\n  border-radius: var(--kemet-textarea-border-radius);\n}\n\n:host([polarity=dark]) {\n  --kemet-textarea-color: var(--kemet-color-font-inverse-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([disabled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-disabled);\n  --kemet-textarea-color: var(--kemet-color-background-disabled);\n}\n\n:host([rounded]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);\n  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand]) {\n  --kemet-textarea-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-textarea-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-textarea-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-textarea-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-textarea-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-textarea-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ADTN,SAAS,iBAAiB;AAC1B,SAAS,YAAY;;;AEHd,IAAM,uBAAN,MAA2B;AAAA,EAUhC,YAAY,MAAW,UAKlB,CAAC,GAAG;AACP,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AAErC,SAAK,UAAU;AAAA,MACb,MAAM,CAAC,UAAe,MAAM,QAAQ,MAAM;AAAA,MAC1C,MAAM,CAAC,UAAe,MAAM;AAAA,MAC5B,OAAO,CAAC,UAAe,MAAM;AAAA,MAC7B,UAAU,CAAC,UAAe,MAAM;AAAA,MAChC,GAAG;AAAA,IACL;AAEA,SAAK,iBAAiB,KAAK,eAAe,KAAK,IAAI;AACnD,SAAK,mBAAmB,KAAK,iBAAiB,KAAK,IAAI;AAAA,EACzD;AAAA,EAEA,gBAAgB;AACd,SAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AAEvC,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,iBAAiB,YAAY,KAAK,cAAc;AAC1D,WAAK,KAAK,iBAAiB,UAAU,KAAK,gBAAgB;AAAA,IAC5D;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,oBAAoB,YAAY,KAAK,cAAc;AAC7D,WAAK,KAAK,oBAAoB,UAAU,KAAK,gBAAgB;AAC7D,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA,EAEA,eAAe,OAAsB;AACnC,UAAM,WAAW,KAAK,QAAQ,SAAS,KAAK,IAAI;AAChD,UAAM,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AACxC,UAAM,QAAQ,KAAK,QAAQ,MAAM,KAAK,IAAI;AAE1C,QAAI,CAAC,YAAY,OAAO,SAAS,YAAY,OAAO,UAAU,aAAa;AASzE,YAAM,UAAU,OAAO,MAAM,MAAM,SAAS,CAAC;AAAA,IAC/C;AAAA,EACF;AAAA,EAEA,iBAAiB,OAAoB;AACnC,UAAM,eAAe;AACrB,UAAM,yBAAyB;AAE/B,UAAM,WAAW,KAAK,QAAQ,SAAS,KAAK,IAAI;AAChD,SAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;AAEvC,QAAI,KAAK,QAAQ,CAAC,UAAU;AAC1B,YAAM,aAAa,KAAK,KAAK,iBAAiB,yEAAyE;AAEvH,iBAAW,QAAQ,CAAC,cAAmB;AACrC,YAAI,UAAU,eAAe;AAC3B,oBAAU,cAAc;AAExB,cAAI,CAAC,UAAU,cAAc,GAAG;AAC9B,sBAAU,SAAS;AACnB,sBAAU,UAAU;AAEpB,sBAAU;AAAA,cACR,IAAI,YAAY,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ;AAAA,kBACN,QAAQ;AAAA,kBACR,UAAU,UAAU,WAAW,UAAU,WAAW,CAAC;AAAA,kBACrD,SAAS;AAAA,gBACX;AAAA,cACF,CAAC;AAAA,YACH;AAAA,UACF;AAEA,cAAI,UAAU,sBAAsB,CAAC,UAAU,mBAAmB,GAAG;AACnE,sBAAU,SAAS;AACnB,sBAAU,UAAU;AAEpB,sBAAU;AAAA,cACR,IAAI,YAAY,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ;AAAA,kBACN,QAAQ;AAAA,kBACR,UAAU,EAAE,aAAa,KAAK;AAAA,kBAC9B,SAAS;AAAA,gBACX;AAAA,cACF,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,QAAI,KAAK,MAAM;AACb,aAAO,OAAO;AACd,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,QAAQ;AACrB,aAAO,MAAM,SAAS;AACtB,aAAO,MAAM,OAAO;AACpB,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,aAAa;AAC1B,WAAK,KAAK,OAAO,MAAM;AACvB,aAAO,MAAM;AACb,aAAO,OAAO;AAAA,IAChB;AAAA,EACF;AACF;;;ACtIO,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AJmEf,IAAqB,2BAArB,cAAsD,WAAW;AAAA,EAgF/D,cAAc;AACZ,UAAM;AA3ER,gBAAe;AAGf,gBAAe;AAef,qBAAqB;AAYrB,iBAAgB;AAShB,gBAAe;AAYf,uBAAuB;AAqBvB,eAAc;AAMZ,SAAK,uBAAuB,IAAI,qBAAqB,IAAI;AAAA,EAC3D;AAAA,EAEA,eAAe;AAEb,SAAK,OAAO,KAAK,QAAQ,MAAM;AAC/B,SAAK,UAAU,KAAK,QAAQ,aAAa;AACzC,SAAK,WAAW,KAAK,YAAY,cAAc,UAAU;AAEzD,cAAU,MAAM,0BAA0B;AAAA,MACxC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,aAGE,KAAK,IAAI;AAAA,eACP,KAAK,IAAI;AAAA,iBACP,KAAK,KAAK,KAAK,CAAC;AAAA,oBACb,KAAK,QAAQ;AAAA,oBACb,KAAK,QAAQ;AAAA,oBACb,KAAK,QAAQ;AAAA,sBACX,UAAU,KAAK,WAAW,CAAC;AAAA,eAClC,UAAU,KAAK,IAAI,CAAC;AAAA,oBACf,UAAU,KAAK,SAAS,CAAC;AAAA,oBACzB,UAAU,KAAK,SAAS,CAAC;AAAA,sBACvB,UAAU,KAAK,WAAW,CAAC;AAAA,qBAC5B,KAAK,SAAS;AAAA,qBACd,UAAU,KAAK,UAAU,CAAC;AAAA,oBAC3B,UAAU,KAAK,SAAS,CAAC;AAAA,kBAC3B,KAAK,YAAY;AAAA,iBAClB,KAAK,WAAW;AAAA,iBAChB,KAAK,WAAW;AAAA,gBACjB,KAAK,UAAU;AAAA,mBACZ,KAAK,aAAa;AAAA;AAAA;AAAA,EAGnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc;AACZ,SAAK,WAAW;AAKhB,SAAK;AAAA,MACH,IAAI,YAAY,0BAA0B;AAAA,QACxC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS,MAAM,SAAS,KAAK;AAAA,MACzC,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAa;AACX,SAAK,WAAW;AAKhB,SAAK;AAAA,MACH,IAAI,YAAY,0BAA0B;AAAA,QACxC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS,OAAO,SAAS,KAAK;AAAA,MAC1C,CAAC;AAAA,IACH;AAEA,QAAI,KAAK,kBAAkB,KAAK,MAAM;AACpC,WAAK,SAAS,cAAc;AAC5B,WAAK,WAAW,KAAK,SAAS;AAAA,IAChC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAe;AACb,SAAK,QAAQ,KAAK,SAAS;AAE3B,QAAI,KAAK,SAAS,cAAc,KAAK,KAAK,mBAAmB,GAAG;AAC9D,WAAK,UAAU;AACf,WAAK,WAAW,KAAK,SAAS;AAK9B,WAAK;AAAA,QACH,IAAI,YAAY,oCAAoC;AAAA,UAClD,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ;AAAA,YACN;AAAA,YACA,UAAU,KAAK,SAAS;AAAA,YACxB,SAAS;AAAA,UACX;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc;AACZ,SAAK,QAAQ,KAAK,SAAS;AAK3B,SAAK;AAAA,MACH,IAAI,YAAY,wBAAwB;AAAA,QACtC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,OAAO,SAAS,KAAK;AAAA,MAC7C,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB;AACd,SAAK,WAAW,KAAK,SAAS;AAE9B,QAAI,KAAK,gBAAgB;AACvB,WAAK,UAAU;AACf,WAAK;AAKL,WAAK;AAAA,QACH,IAAI,YAAY,oCAAoC;AAAA,UAClD,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ;AAAA,YACN;AAAA,YACA,UAAU,KAAK,SAAS;AAAA,YACxB,SAAS;AAAA,UACX;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,qBAA8B;AAC5B,QAAI,KAAK,SAAS;AAChB,YAAM,QAAQ,KAAK,QAAQ,cAAc,aAAa;AACtD,UAAI,OAAO;AACT,eAAO,KAAK,MAAM,SAAS,MAAM;AAAA,MACnC;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAyB;AACvB,WAAO,KAAK,SAAS,cAAc;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,QAAQ;AACN,WAAO,KAAK,SAAS,MAAM;AAAA,EAC7B;AACF;AAxRqB,yBAGZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GALP,yBAMnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GARP,yBASnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,yBAYnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,yBAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjBP,yBAkBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApBP,yBAqBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAvBR,yBAwBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1BvB,yBA2BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA7BR,yBA8BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhCvB,yBAiCnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnCP,yBAoCnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAtCvB,yBAuCnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAzCtB,yBA0CnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5CP,yBA6CnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB,CAAC;AAAA,GA/CvC,yBAgDnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlDvB,yBAmDnB;AAGA;AAAA,EADC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GArDR,yBAsDnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAxDR,yBAyDnB;AAGA;AAAA,EADC,MAAM;AAAA,GA3DY,yBA4DnB;AAGA;AAAA,EADC,MAAM;AAAA,GA9DY,yBA+DnB;AAGA;AAAA,EADC,MAAM;AAAA,GAjEY,yBAkEnB;AAGA;AAAA,EADC,MAAM;AAAA,GApEY,yBAqEnB;AAGA;AAAA,EADC,MAAM;AAAA,GAvEY,yBAwEnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1EtB,yBA2EnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA7EtB,yBA8EnB;AA9EmB,2BAArB;AAAA,EADC,cAAc,gBAAgB;AAAA,GACV;","names":[]}
+{"version":3,"sources":["../../../src/elements/textarea/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/textarea/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport HTMLKemetFieldElement from '../field';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n * @ssrsafe yes\n *\n * @prop {string} slug\n * @prop {string}  name\n * @prop {string}  placeholder\n * @prop {number}  minlength\n * @prop {number}  maxlength\n * @prop {string}  inputmode\n * @prop {boolean}  disabled\n * @prop {boolean}  readonly\n * @prop {boolean}  required\n * @prop {string}  value\n * @prop {boolean}  invalid\n * @prop {EnumAppearances}  appearance\n * @prop {boolean}  validateOnBlur\n * @prop {EnumRoundedSizes}  rounded\n * @prop {boolean}  filled\n * @prop {number}  rows\n * @prop {boolean} autocorrect\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n * @fires kemet-textarea-focused - Fired when the textarea is focused or blurred\n * @detail {boolean} focused - Whether the textarea is focused\n *\n * @fires kemet-textarea-input - Fired when the textarea receives input\n * @detail {string} value - The value of the textarea\n *\n * @fires kemet-textarea-appearance-change - Fired when the textarea appearance changes\n * @detail {EnumAppearances} appearance - The appearance of the textarea\n *\n * @fires kemet-textarea-mounted - Fired when the textarea is mounted to the DOM\n * @detail {HTMLElement} element - The textarea element\n *\n */\n\n@customElement('kemet-textarea')\nexport default class HTMLKemetTextareaElement extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'textarea';\n\n  @property({ type: String })\n  name: string = 'textarea';\n\n  @property({ type: String })\n  placeholder?: string;\n\n  @property({ type: Number })\n  minlength?: number;\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  @property({ type: String })\n  inputmode?: string;\n\n  @property({ type: Boolean })\n  autofocus: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled?: boolean;\n\n  @property({ type: Boolean })\n  readonly?: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required?: boolean;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid?: boolean;\n\n  @property({ type: String, reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Number })\n  rows: number = 4;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur?: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled?: boolean;\n\n  @property({ reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: Boolean })\n  autocorrect: boolean = false;\n\n  @state()\n  form!: HTMLFormElement;\n\n  @state()\n  control!: HTMLKemetFieldElement;\n\n  @state()\n  textarea!: HTMLTextAreaElement;\n\n  @state()\n  hasFocus!: boolean;\n\n  @state()\n  validity!: ValidityState;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.form = this.closest('form') as HTMLFormElement;\n    this.control = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.textarea = this.shadowRoot?.querySelector('textarea') as HTMLTextAreaElement;\n\n    emitEvent(this, 'kemet-textarea-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('appearance')) {\n      emitEvent(this, 'kemet-textarea-appearance-change', {\n        appearance: this.appearance,\n        element: this,\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <textarea\n        part=\"textarea\"\n        id=${this.slug}\n        name=${this.name}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        placeholder=${ifDefined(this.placeholder)}\n        rows=${ifDefined(this.rows)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        autocorrect=${ifDefined(this.autocorrect)}\n        ?autofocus=${this.autofocus}\n        spellcheck=${ifDefined(this.spellcheck)}\n        inputmode=${ifDefined(this.inputmode)}\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      ></textarea>\n    `;\n  }\n\n  /**\n   * Handles when the textarea receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-textarea-focused', {\n        bubbles: true,\n        composed: true,\n        detail: { focused: true, element: this },\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-textarea-focused', {\n        bubbles: true,\n        composed: true,\n        detail: { focused: false, element: this },\n      }),\n    );\n\n    if (this.validateOnBlur && this.form) {\n      this.textarea.checkValidity();\n      this.validity = this.textarea.validity;\n    }\n  }\n\n  /**\n   * Handles when the textarea changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.textarea.value;\n\n    if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n      this.invalid = false;\n      this.validity = this.textarea.validity;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-textarea-appearance-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            appearance: EnumAppearances.Neutral,\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Handles when the textarea receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.textarea.value;\n    this.appearance = EnumAppearances.Neutral;\n\n    /**\n     * Fires when the input receives input\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-textarea-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value, element: this },\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.textarea.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.appearance = EnumAppearances.Error;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-textarea-appearance-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            appearance: EnumAppearances.Error,\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @private\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.control) {\n      const count = this.control.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.textarea.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    return this.textarea.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-textarea': HTMLKemetTextareaElement\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { EnumAppearances } from \"./constants\";\n\nexport class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n\n\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            console.log('invalid', component);\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                detail: {\n                  appearance: EnumAppearances.Error,\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-textarea-padding: 1rem;\n  --kemet-textarea-color: var(--kemet-color-font-base);\n  --kemet-textarea-font-color: inherit;\n  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);\n  --kemet-textarea-border-radius: 0;\n\n  /* private */\n  --_kemet-textarea-background-color: transparent;\n\n  position: relative;\n  display: block;\n}\n\ntextarea {\n  color: var(--kemet-textarea-font-color);\n  display: block;\n  width: 100%;\n  padding: var(--kemet-textarea-padding);\n  border: var(--kemet-textarea-border);\n  appearance: none;\n  box-sizing: border-box;\n  background: var(--_kemet-textarea-background-color);\n  border-radius: var(--kemet-textarea-border-radius);\n}\n\n:host([polarity=dark]) {\n  --kemet-textarea-color: var(--kemet-color-font-inverse-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([disabled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-disabled);\n  --kemet-textarea-color: var(--kemet-color-background-disabled);\n}\n\n:host([rounded]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);\n  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand]) {\n  --kemet-textarea-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-textarea-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-textarea-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-textarea-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-textarea-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-textarea-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":"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","names":[]}

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

@@ -5,7 +5,7 @@ var styles_css_default = css`:host {
   --kemet-textarea-padding: 1rem;
   --kemet-textarea-color: var(--kemet-color-font-base);
   --kemet-textarea-font-color: inherit;
-  --kemet-textarea-border: 1px solid;
+  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);
   --kemet-textarea-border-radius: 0;
 
   /* private */
@@ -73,7 +73,7 @@ textarea {
 
 
 :host([appearance=brand][filled]) {
-  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error][filled]) {
@@ -94,7 +94,7 @@ textarea {
 
 
 :host([appearance=brand]) {
-  --kemet-textarea-color: var(--kemet-color-brand-primary-base);
+  --kemet-textarea-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/textarea/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-textarea-padding: 1rem;\n  --kemet-textarea-color: var(--kemet-color-font-base);\n  --kemet-textarea-font-color: inherit;\n  --kemet-textarea-border: 1px solid;\n  --kemet-textarea-border-radius: 0;\n\n  /* private */\n  --_kemet-textarea-background-color: transparent;\n\n  position: relative;\n  display: block;\n}\n\ntextarea {\n  color: var(--kemet-textarea-font-color);\n  display: block;\n  width: 100%;\n  padding: var(--kemet-textarea-padding);\n  border: var(--kemet-textarea-border);\n  appearance: none;\n  box-sizing: border-box;\n  background: var(--_kemet-textarea-background-color);\n  border-radius: var(--kemet-textarea-border-radius);\n}\n\n:host([polarity=dark]) {\n  --kemet-textarea-color: var(--kemet-color-font-inverse-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([disabled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-disabled);\n  --kemet-textarea-color: var(--kemet-color-background-disabled);\n}\n\n:host([rounded]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);\n  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand]) {\n  --kemet-textarea-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-textarea-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-textarea-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-textarea-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-textarea-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-textarea-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/textarea/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-textarea-padding: 1rem;\n  --kemet-textarea-color: var(--kemet-color-font-base);\n  --kemet-textarea-font-color: inherit;\n  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);\n  --kemet-textarea-border-radius: 0;\n\n  /* private */\n  --_kemet-textarea-background-color: transparent;\n\n  position: relative;\n  display: block;\n}\n\ntextarea {\n  color: var(--kemet-textarea-font-color);\n  display: block;\n  width: 100%;\n  padding: var(--kemet-textarea-padding);\n  border: var(--kemet-textarea-border);\n  appearance: none;\n  box-sizing: border-box;\n  background: var(--_kemet-textarea-background-color);\n  border-radius: var(--kemet-textarea-border-radius);\n}\n\n:host([polarity=dark]) {\n  --kemet-textarea-color: var(--kemet-color-font-inverse-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([disabled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-disabled);\n  --kemet-textarea-color: var(--kemet-color-background-disabled);\n}\n\n:host([rounded]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);\n  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand]) {\n  --kemet-textarea-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-textarea-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-textarea-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-textarea-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-textarea-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-textarea-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/timer/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/timer/styles.css.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n * @ssrsafe yes\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\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-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkC;;;ACAjD,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;;;AHGR,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,aAAU;AACV,EAAAA,aAAA,aAAU;AACV,EAAAA,aAAA,WAAQ;AACR,EAAAA,aAAA,UAAO;AAJG,SAAAA;AAAA,GAAA;AA+BZ,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,kBAAsB;AAGtB,kBAAiB;AASjB,eAAc;AAAA;AAAA,EAMd,eAAe;AACb,QAAI,KAAK,SAAS;AAChB,WAAK,UAAU;AAAA,IACjB,OAAO;AACL,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,cAAU,MAAM,qBAAqB,EAAE,SAAS,KAAK,CAAC;AACtD,cAAU,MAAM,yBAAyB,EAAE,SAAS,MAAM,UAAU,KAAK,iBAAiB,KAAK,MAAM,EAAE,CAAC;AAExG,cAAU,MAAM,uBAAuB;AAAA,MACrC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,QAAQ,WAAiC;AACvC,UAAM,2BAA2B,UAAU,IAAI,QAAQ,KAAK,UAAU,IAAI,QAAQ;AAClF,UAAM,oBAAoB,UAAU,IAAI,SAAS;AAEjD,QAAI,0BAA0B;AAC5B,oBAAc,KAAK,QAAQ;AAC3B,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,QAAI,mBAAmB;AACrB,oBAAc,KAAK,QAAQ;AAC3B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB,MAAsB;AACrC,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAW,eAAO,OAAO;AAAA,MAC9B,KAAK;AAAS,eAAO,OAAO,KAAK;AAAA,MACjC,KAAK;AAAQ,eAAO,OAAO,KAAK,KAAK;AAAA,MACrC;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,MAAM,UAAkB,GAAG;AACzB,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,OAAO,MAAM,UAAU;AAE7B,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,OAAO,KAAK,IAAI,KAAK,GAAI;AAEzD,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,wBAAwB,EAAE,SAAS,KAAK,CAAC;AACzD;AAAA,MACF;AAEA,gBAAU,MAAM,yBAAyB,EAAE,SAAS,MAAM,UAAU,YAAY,CAAC;AAAA,IACnF,GAAG,GAAI;AAAA,EACT;AAAA,EAEA,YAAY;AACV,UAAM,UAAU,IAAI,KAAK,KAAK,OAAO,EAAE,QAAQ;AAE/C,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,UAAU,KAAK,IAAI,KAAK,GAAI;AAE5D,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,wBAAwB,EAAE,SAAS,KAAK,CAAC;AACzD;AAAA,MACF;AAEA,gBAAU,MAAM,yBAAyB,EAAE,SAAS,MAAM,UAAU,YAAY,CAAC;AAAA,IACnF,GAAG,GAAI;AAAA,EACT;AACF;AAtGqB,WACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,WAgBnB;AAIA;AAAA,EADC,MAAM;AAAA,GAnBY,WAoBnB;AApBmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":["EnumFormats"]}
+{"version":3,"sources":["../../../src/elements/timer/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/timer/styles.css.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n * @ssrsafe yes\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\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-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n"],"mappings":"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","names":["EnumFormats"]}

package/dist/elements/timer-display/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/timer-display/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/timer/index.ts","../../../src/utilities/events.ts","../../../src/elements/timer/styles.css.ts","../../../src/elements/timer-display/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumFormats } from '../timer';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n * @ssrsafe yes\n *\n * @prop {EnumFormats} format - The format to display the remaining time in\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-timer-display-mounted - Fired when the timer display is mounted to the DOM\n * @detail {HTMLElement} element - The timer display element\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @state()\n  displayTime!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    this.getTime();\n\n    emitEvent(this, 'kemet-timer-display-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`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer')?.addEventListener('kemet-timer-increment', (event: Event) => {\n      const secondsLeft = (event as CustomEvent).detail.timeleft;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time: number) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\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 { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n * @ssrsafe yes\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\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-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-block;\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,QAAAA,OAAM,cAAAC,mBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,MAAM,kBAAkC;;;ACA1C,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;;;AFkCf,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,kBAAsB;AAGtB,kBAAiB;AASjB,eAAc;AAAA;AAAA,EAMd,eAAe;AACb,QAAI,KAAK,SAAS;AAChB,WAAK,UAAU;AAAA,IACjB,OAAO;AACL,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,cAAU,MAAM,qBAAqB,EAAE,SAAS,KAAK,CAAC;AACtD,cAAU,MAAM,yBAAyB,EAAE,SAAS,MAAM,UAAU,KAAK,iBAAiB,KAAK,MAAM,EAAE,CAAC;AAExG,cAAU,MAAM,uBAAuB;AAAA,MACrC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,QAAQ,WAAiC;AACvC,UAAM,2BAA2B,UAAU,IAAI,QAAQ,KAAK,UAAU,IAAI,QAAQ;AAClF,UAAM,oBAAoB,UAAU,IAAI,SAAS;AAEjD,QAAI,0BAA0B;AAC5B,oBAAc,KAAK,QAAQ;AAC3B,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,QAAI,mBAAmB;AACrB,oBAAc,KAAK,QAAQ;AAC3B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB,MAAsB;AACrC,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAW,eAAO,OAAO;AAAA,MAC9B,KAAK;AAAS,eAAO,OAAO,KAAK;AAAA,MACjC,KAAK;AAAQ,eAAO,OAAO,KAAK,KAAK;AAAA,MACrC;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,MAAM,UAAkB,GAAG;AACzB,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,OAAO,MAAM,UAAU;AAE7B,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,OAAO,KAAK,IAAI,KAAK,GAAI;AAEzD,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,wBAAwB,EAAE,SAAS,KAAK,CAAC;AACzD;AAAA,MACF;AAEA,gBAAU,MAAM,yBAAyB,EAAE,SAAS,MAAM,UAAU,YAAY,CAAC;AAAA,IACnF,GAAG,GAAI;AAAA,EACT;AAAA,EAEA,YAAY;AACV,UAAM,UAAU,IAAI,KAAK,KAAK,OAAO,EAAE,QAAQ;AAE/C,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,UAAU,KAAK,IAAI,KAAK,GAAI;AAE5D,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,wBAAwB,EAAE,SAAS,KAAK,CAAC;AACzD;AAAA,MACF;AAEA,gBAAU,MAAM,yBAAyB,EAAE,SAAS,MAAM,UAAU,YAAY,CAAC;AAAA,IACnF,GAAG,GAAI;AAAA,EACT;AACF;AAtGqB,WACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,WAgBnB;AAIA;AAAA,EADC,MAAM;AAAA,GAnBY,WAoBnB;AApBmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;;;AGpCrB,SAAS,OAAAC,YAAW;AAEpB,IAAOC,sBAAQD;AAAA;AAAA;AAAA;;;ALqBf,IAAqB,oBAArB,cAA+CE,YAAW;AAAA,EAA1D;AAAA;AAIE;AASA,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,SAAK,QAAQ;AAEb,cAAU,MAAM,+BAA+B;AAAA,MAC7C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAOC,QAAO,KAAK,WAAW;AAAA,EAChC;AAAA,EAEA,UAAU;AACR,SAAK,QAAQ,aAAa,GAAG,iBAAiB,yBAAyB,CAAC,UAAiB;AACvF,YAAM,cAAe,MAAsB,OAAO;AAClD,cAAQ,KAAK,QAAQ;AAAA,QACnB,KAAK;AACH,eAAK,eAAe,cAAc,KAAK,KAAK,IAAI,cAAc,EAAE,KAAK,cAAc,IAAI,SAAS;AAChG;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAO,cAAc,QAAS,OAAO,EAAE,EAAE,SAAS;AAC1E;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAO,cAAc,QAAS,IAAI,EAAE,SAAS;AACrE;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAM,cAAc,KAAK,EAAE,SAAS;AAC5D;AAAA,QACF;AACE,eAAK,eAAe,cAAc,KAAK,KAAK,IAAI,cAAc,EAAE,KAAK,cAAc,IAAI,SAAS;AAAA,MACpG;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,iBAAiB,MAAc;AAC7B,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAW,eAAO,OAAO;AAAA,MAC9B,KAAK;AAAS,eAAO,OAAO,KAAK;AAAA,MACjC,KAAK;AAAQ,eAAO,OAAO,KAAK,KAAK;AAAA,MACrC;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AACF;AA9DqB,kBACZ,SAAS,CAACC,mBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,kBAInB;AAGA;AAAA,EADC,MAAM;AAAA,GANY,kBAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,kBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,kBAanB;AAbmB,oBAArB;AAAA,EADC,cAAc,qBAAqB;AAAA,GACf;","names":["html","LitElement","css","styles_css_default","LitElement","html","styles_css_default"]}
+{"version":3,"sources":["../../../src/elements/timer-display/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/timer/index.ts","../../../src/utilities/events.ts","../../../src/elements/timer/styles.css.ts","../../../src/elements/timer-display/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumFormats } from '../timer';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n * @ssrsafe yes\n *\n * @prop {EnumFormats} format - The format to display the remaining time in\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-timer-display-mounted - Fired when the timer display is mounted to the DOM\n * @detail {HTMLElement} element - The timer display element\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @state()\n  displayTime!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    this.getTime();\n\n    emitEvent(this, 'kemet-timer-display-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`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer')?.addEventListener('kemet-timer-increment', (event: Event) => {\n      const secondsLeft = (event as CustomEvent).detail.timeleft;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time: number) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\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 { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n * @ssrsafe yes\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\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-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-block;\n}\n`;\n"],"mappings":"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","names":["html","LitElement","css","styles_css_default","LitElement","html","styles_css_default"]}

package/dist/elements/toggle/index.js

@@ -64,14 +64,13 @@ var FormSubmitController = class {
         if (component.checkValidity) {
           component.checkValidity();
           if (!component.checkValidity()) {
-            component.status = "error";
+            console.log("invalid", component);
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
-                bubbles: true,
-                composed: true,
                 detail: {
-                  status: "error",
+                  appearance: "error" /* Error */,
                   validity: component.validity ? component.validity : {},
                   element: component
                 }
@@ -79,7 +78,7 @@ var FormSubmitController = class {
             );
           }
           if (component.checkLimitValidity && !component.checkLimitValidity()) {
-            component.status = "error";
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {