kemet-ui 4.0.0 → 4.0.2

package/dist/elements/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/tabs.ts","../../src/utilities/events.ts","../../src/styles/elements/tabs.ts","../../src/elements/icon-bootstrap.ts"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport { LitElement, html } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesKemetTabs } from '../styles/elements/tabs';\nimport { TypeDirection, EnumDirections } from '../utilities/constants';\nimport type KemetTab from './tab';\nimport type KemetTabPanel from './tab-panel';\nimport './icon-bootstrap';\n\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 const panelEffect = ['none', 'slide', 'fade', 'stacked'] as const;\nexport enum EnumPanelEffect {\n  None = 'none',\n  Slide = 'slide',\n  Fade = 'fade',\n  Stacked = 'stacked'\n}\nexport type TypePanelEffect = typeof panelEffect[number];\n\n\nexport const tabsAlign = ['center', 'between', 'around', 'evenly', 'start', 'end'] as const;\nexport enum EnumTabsAlign {\n  Center = 'center',\n  Between = 'between',\n  Around = 'around',\n  Evenly = 'evenly',\n  Start = 'start',\n  End = 'end'\n}\nexport type TypeTabsAlign = typeof tabsAlign[number];\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tabs\n * @summary A group of tabs and panels.\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 *\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-change - Fires when a tab is changed\n *\n */\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n  static styles = [stylesKemetTabs];\n\n  @property({ type: String, reflect: true })\n  selected: string;\n\n  @property({ type: Number })\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: TypePanelEffect = EnumPanelEffect.None;\n\n  @property({ type: Boolean })\n  swipe: boolean;\n\n  @property({ type: String, reflect: true })\n  placement: TypeDirection = EnumDirections.Top;\n\n  @property({ type: Boolean })\n  divider: boolean;\n\n  @property({ type: String, reflect: true, attribute: 'tabs-align' })\n  tabsAlign: TypeTabsAlign = EnumTabsAlign.Center;\n\n  @property({ type: Object })\n  ink: InterfaceLink;\n\n  @property({ type: Boolean, attribute: 'hide-ink' })\n  hideInk: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  overflow: boolean;\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  constructor() {\n    super();\n\n    this.addEventListener('kemet-selected', this.tabSelectedChange.bind(this));\n    this.addEventListener('kemet-closed', this.handleTabClose.bind(this));\n    window.addEventListener('resize', this.handleResize.bind(this));\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');\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    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', event => this.handleTabKeydown(event));\n    });\n\n    // default to the first tab/panel selected\n    if (this.tabs.length > 0) this.tabs[0].selected = true;\n\n    setTimeout(() => {\n      this.selectTab();\n    }, 1);\n    this.determineOverflow();\n  }\n\n  handlePanelsSlotChange() {\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) this.panels[0].selected = true;\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    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    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: CustomEvent) {\n    const tab = event.detail;\n    const panel = this.panels[tab.index];\n\n    this.selected = this.tabs[0].link;\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-bootstrap icon='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  makeRightArrow() {\n    if (this.overflow) {\n      return html`<kemet-icon-bootstrap icon='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon-bootstrap>`;\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-change', {\n      element: this,\n      selectedName: this.selected,\n      selectedIndex: this.selectedIndex\n    });\n  }\n\n  tabSelectedChange(event: CustomEvent) {\n    if (this.selected) {\n      // if selected has been set, use the string attribute\n      this.selected = event.detail.getAttribute('link');\n    } else {\n      // otherwise use the generated index\n      this.selectedIndex = event.detail.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, panelIndex: number) {\n    if (panelName) {\n      const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanel;\n      if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n    } else {\n      if (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          this.selected = this.tabs[0].getAttribute('link');\n          break;\n        case 'End':\n          this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');\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      this.tabs.find(tab => tab.link === this.selected).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      this.tabs[this.selectedIndex].focus();\n    }\n  }\n\n  handleTouchStart(event: TouchEvent) {\n    this.xDown = event.touches[0].clientX;\n    this.yDown = event.touches[0].clientY;\n  }\n\n  handleTouchMove(event: TouchEvent) {\n    if (!this.xDown || !this.yDown) {\n      return;\n    }\n\n    const xUp = event.touches[0].clientX;\n    const yUp = event.touches[0].clientY;\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 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 const stylesKemetTabs = css`\n  :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: rgb(var(--kemet-color-gray-300));\n    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));\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\nexport const stylesKemetTab = css`\n  :host {\n    --kemet-tab-color: rgb(var(--kemet-color-foreground));\n\n    cursor: pointer;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    padding: var(--kemet-tab-padding, 1rem);\n  }\n\n  :host([selected]) {\n    cursor: auto;\n    color: var(--kemet-tab-color);\n  }\n\n  kemet-icon-bootstrap {\n    cursor: pointer;\n    margin-left: 0.5rem;\n  }\n`;\n\nexport const stylesKemetTabPanel = css`\n  :host {\n    --kemet-tab-panel-fade-speed: 0.5s;\n\n    width: 100%;\n    flex: 0 0 auto;\n  }\n\n  ::slotted(img) {\n    max-width: 100%;\n  }\n\n  :host(.fade) {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--kemet-tab-panel-fade-speed) ease;\n  }\n\n  :host(.fade[selected]) {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.fade.push) {\n    margin-left: -100%;\n  }\n\n  :host(.vertical) {\n    display: none;\n  }\n\n  :host(.vertical[selected]) {\n    display: block;\n  }\n\n  :host(.stacked) {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  :host(.stacked[selected]) {\n    position: relative;\n    z-index: 1;\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n","import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('kemet-icon-bootstrap')\nexport default class KemetIconBootstrap extends LitElement {\n  @property() icon: string = 'code';\n  @property() version: string = '1.11.3'; // Default to stable version\n  @property() size: number = 24;\n\n  private static fontFaceLoaded = new Map<string, boolean>();\n  private static iconStylesCache = new Map<string, CSSStyleSheet>();\n  private static resolvedVersions = new Map<string, string>();\n  private stylesLoaded = false;\n\n  async connectedCallback() {\n    super.connectedCallback();\n    await this._loadBootstrapStyles();\n  }\n\n  private async _resolveVersion(version: string): Promise<string> {\n    // If it's already a specific version, return it\n    if (version !== 'latest' && /^\\d+\\.\\d+\\.\\d+/.test(version)) {\n      return version;\n    }\n\n    // Check cache\n    if (KemetIconBootstrap.resolvedVersions.has(version)) {\n      return KemetIconBootstrap.resolvedVersions.get(version)!;\n    }\n\n    try {\n      // Fetch without version to get redirected to latest\n      const response = await fetch('https://unpkg.com/bootstrap-icons/package.json');\n      if (!response.ok) throw new Error('Failed to resolve version');\n\n      const pkg = await response.json();\n      const resolvedVersion = pkg.version;\n\n      KemetIconBootstrap.resolvedVersions.set(version, resolvedVersion);\n      return resolvedVersion;\n    } catch (error) {\n      console.warn('Failed to resolve Bootstrap Icons version, using 1.11.3:', error);\n      return '1.11.3'; // Fallback to known stable version\n    }\n  }\n\n  private async _loadBootstrapStyles() {\n    if (this.stylesLoaded) return;\n\n    try {\n      // Resolve version if needed\n      const resolvedVersion = await this._resolveVersion(this.version);\n      const cacheKey = resolvedVersion;\n\n      // Load font-face in light DOM (only once per version)\n      if (!KemetIconBootstrap.fontFaceLoaded.get(cacheKey)) {\n        await this._loadFontFaceInDocument(resolvedVersion);\n        KemetIconBootstrap.fontFaceLoaded.set(cacheKey, true);\n      }\n\n      // Load icon classes in shadow DOM\n      let iconSheet = KemetIconBootstrap.iconStylesCache.get(cacheKey);\n\n      if (!iconSheet) {\n        const response = await fetch(\n          `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n        );\n\n        if (!response.ok) {\n          throw new Error(`HTTP error! status: ${response.status}`);\n        }\n\n        let cssText = await response.text();\n\n        // Remove @font-face rules (already in light DOM)\n        cssText = cssText.replace(/@font-face\\s*{[^}]*}/g, '');\n\n        iconSheet = new CSSStyleSheet();\n        await iconSheet.replace(cssText);\n        KemetIconBootstrap.iconStylesCache.set(cacheKey, iconSheet);\n      }\n\n      this.shadowRoot!.adoptedStyleSheets = [\n        ...this.shadowRoot!.adoptedStyleSheets,\n        iconSheet\n      ];\n\n      this.stylesLoaded = true;\n      this.requestUpdate();\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons:', error);\n      this.requestUpdate();\n    }\n  }\n\n  private async _loadFontFaceInDocument(resolvedVersion: string) {\n    try {\n      const response = await fetch(\n        `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error! status: ${response.status}`);\n      }\n\n      const cssText = await response.text();\n\n      // Extract ONLY @font-face rules\n      const fontFaceMatches = cssText.match(/@font-face\\s*{[^}]*}/g);\n      if (!fontFaceMatches) return;\n\n      // Fix relative URLs to absolute\n      const baseUrl = `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/`;\n      let fontFaceCss = fontFaceMatches.join('\\n');\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?\\.\\/fonts\\//g, `url(\"${baseUrl}fonts/`);\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?fonts\\//g, `url(\"${baseUrl}fonts/`);\n\n      // Add to document head\n      const styleId = `bootstrap-icons-fonts-${resolvedVersion}`;\n      if (!document.getElementById(styleId)) {\n        const style = document.createElement('style');\n        style.id = styleId;\n        style.textContent = fontFaceCss;\n        document.head.appendChild(style);\n      }\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons fonts:', error);\n      throw error;\n    }\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n  `;\n\n  render() {\n    return html`\n      <i class=\"bi bi-${this.icon}\" style=\"font-size: ${this.size}px;\"></i>\n    `;\n  }\n}\n"],"mappings":"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","names":["import_lit","import_decorators","import_lit","EnumPanelEffect","EnumTabsAlign"]}

package/dist/elements/tabs.mjs

@@ -0,0 +1,20 @@
+import {
+  EnumPanelEffect,
+  EnumTabsAlign,
+  KemetTabs,
+  panelEffect,
+  tabsAlign
+} from "../chunk-JI5MHBCW.mjs";
+import "../chunk-5LCSEF3N.mjs";
+import "../chunk-7DJKARFX.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-42U43NKG.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  EnumPanelEffect,
+  EnumTabsAlign,
+  KemetTabs as default,
+  panelEffect,
+  tabsAlign
+};
+//# sourceMappingURL=tabs.mjs.map

package/dist/elements/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/textarea.d.mts

@@ -0,0 +1,4 @@
+import 'lit-html';
+import 'lit';
+import '../form-controller-BR0gZhrG.mjs';
+export { e as default } from '../constants-BEtO8uLN.mjs';

package/dist/elements/textarea.d.ts

@@ -0,0 +1,4 @@
+import 'lit-html';
+import 'lit';
+import '../form-controller-BR0gZhrG.js';
+export { e as default } from '../constants-CcB9aXsT.js';

package/dist/elements/textarea.js

@@ -0,0 +1,482 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/textarea.ts
+var textarea_exports = {};
+__export(textarea_exports, {
+  default: () => KemetTextarea
+});
+module.exports = __toCommonJS(textarea_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+var import_if_defined = require("lit/directives/if-defined.js");
+var import_live = require("lit/directives/live.js");
+
+// src/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = void 0) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+// src/styles/elements/textarea.ts
+var import_lit = require("lit");
+var stylesTextarea = import_lit.css`
+  :host {
+    --kemet-textarea-padding: 1rem;
+    --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-textarea-icon-left-padding: 3rem;
+    --kemet-textarea-icon-right-padding: 3rem;
+    --kemet-textarea-border-filled: none;
+    --kemet-textarea-color-filled: rgb(var(--kemet-color-white));
+    --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));
+    --kemet-textarea-border-radius-rounded: 0;
+
+    position: relative;
+    display: block;
+  }
+
+  textarea {
+    color: rgb(var(--kemet-color-text));
+    display: block;
+    width: 100%;
+    padding: var(--kemet-textarea-padding);
+    border: var(--kemet-textarea-border);
+    appearance: none;
+    box-sizing: border-box;
+    background: transparent;
+    border-radius: var(--kemet-textarea-border-radius-rounded);
+  }
+
+  :host([status='error']) textarea {
+    border: var(--kemet-textarea-border-color-error);
+  }
+
+  :host([status='success']) textarea {
+    border: var(--kemet-textarea-border-color-success);
+  }
+
+  :host([status='warning']) textarea {
+    border: var(--kemet-textarea-border-color-warning);
+  }
+
+  :host([disabled]) textarea {
+    opacity: 0.5;
+  }
+
+  :host([icon-left]) textarea {
+    padding-left: var(--kemet-textarea-icon-left-padding);
+  }
+
+  :host([icon-right]) textarea {
+    padding-right: var(--kemet-textarea-icon-right-padding);
+  }
+
+  :host([rounded]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=md]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=lg]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-pill);
+  }
+
+  :host([filled]) textarea {
+    border: var(--kemet-textarea-border-filled);
+    color: var(--kemet-textarea-color-filled);
+    background-color: var(--kemet-textarea-background-color-filled);
+  }
+
+  :host([filled]) textarea::placeholder {
+    color: var(--kemet-textarea-color-filled);
+  }
+
+  :host([status='error'][filled]) textarea {
+    background-color: var(--kemet-textarea-background-color-error);
+  }
+
+  :host([status='success'][filled]) textarea {
+    background-color: var(--kemet-textarea-background-color-success);
+  }
+
+  :host([status='warning'][filled]) textarea {
+    background-color: var(--kemet-textarea-background-color-warning);
+  }
+`;
+
+// src/elements/textarea.ts
+var KemetTextarea = class extends import_lit2.LitElement {
+  constructor() {
+    super();
+    this.slug = "textarea";
+    this.name = "textarea";
+    this.value = "";
+    this.status = "standard" /* Standard */;
+    this.rows = 4;
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  firstUpdated() {
+    this.form = this.closest("form");
+    this.control = this.closest("kemet-field");
+    this.textarea = this.shadowRoot.querySelector("textarea");
+  }
+  render() {
+    return import_lit2.html`
+      <textarea
+        part="textarea"
+        id=${this.slug}
+        name=${this.name}
+        .value=${(0, import_live.live)(this.value)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        placeholder=${(0, import_if_defined.ifDefined)(this.placeholder)}
+        rows=${(0, import_if_defined.ifDefined)(this.rows)}
+        minlength=${(0, import_if_defined.ifDefined)(this.minlength)}
+        maxlength=${(0, import_if_defined.ifDefined)(this.maxlength)}
+        autocorrect=${(0, import_if_defined.ifDefined)(this.autocorrect)}
+        ?autofocus=${this.autofocus}
+        spellcheck=${(0, import_if_defined.ifDefined)(this.spellcheck)}
+        inputmode=${(0, import_if_defined.ifDefined)(this.inputmode)}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @invalid=${this.handleInvalid}
+      ></textarea>
+    `;
+  }
+  /**
+   * Handles when the textarea receives focus
+   * @private
+   */
+  handleFocus() {
+    this.hasFocus = true;
+    this.dispatchEvent(
+      new CustomEvent("kemet-input-focused", {
+        bubbles: true,
+        composed: true,
+        detail: true
+      })
+    );
+  }
+  /**
+   * Handles when the textarea loses focus
+   * @private
+   */
+  handleBlur() {
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new CustomEvent("kemet-input-focused", {
+        bubbles: true,
+        composed: true,
+        detail: false
+      })
+    );
+    if (this.validateOnBlur && this.form) {
+      this.textarea.checkValidity();
+      this.validity = this.textarea.validity;
+    }
+  }
+  /**
+   * Handles when the textarea changes value
+   * @private
+   */
+  handleChange() {
+    this.value = this.textarea.value;
+    if (this.textarea.checkValidity() && this.checkLimitValidity()) {
+      this.invalid = false;
+      this.status = "standard" /* Standard */;
+      this.validity = this.textarea.validity;
+      this.dispatchEvent(
+        new CustomEvent("kemet-input-status", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            status: "standard",
+            validity: this.textarea.validity,
+            element: this
+          }
+        })
+      );
+    }
+  }
+  /**
+   * Handles when the textarea receives input
+   * @private
+   */
+  handleInput() {
+    this.value = this.textarea.value;
+    this.dispatchEvent(
+      new CustomEvent("kemet-input-input", {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    );
+  }
+  /**
+   * Handles when the textarea has an error
+   * @private
+   */
+  handleInvalid() {
+    this.validity = this.textarea.validity;
+    if (this.validateOnBlur) {
+      this.invalid = true;
+      this.status = "error" /* Error */;
+      this.dispatchEvent(
+        new CustomEvent("kemet-input-status", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            status: "error",
+            validity: this.textarea.validity,
+            element: this
+          }
+        })
+      );
+    }
+  }
+  /**
+   * Checks the validity of the character limit for the count component
+   * @private
+   * @returns {boolean}
+   */
+  checkLimitValidity() {
+    if (this.control) {
+      const count = this.control.querySelector("kemet-count");
+      if (count) {
+        return this.value.length < count.limit;
+      }
+    }
+    return true;
+  }
+  /**
+   * Checks the validity of the standard input
+   * @public
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.textarea.checkValidity();
+  }
+  /**
+   * Focuses the standard input
+   * @public
+   */
+  focus() {
+    return this.textarea.focus();
+  }
+};
+KemetTextarea.styles = [stylesTextarea];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTextarea.prototype, "slug", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTextarea.prototype, "name", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetTextarea.prototype, "minlength", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTextarea.prototype, "inputmode", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetTextarea.prototype, "autofocus", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetTextarea.prototype, "readonly", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "required", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTextarea.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "invalid", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetTextarea.prototype, "status", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetTextarea.prototype, "rows", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "validate-on-blur" })
+], KemetTextarea.prototype, "validateOnBlur", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "filled", 2);
+__decorateClass([
+  (0, import_decorators.property)({ reflect: true })
+], KemetTextarea.prototype, "rounded", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetTextarea.prototype, "autocorrect", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTextarea.prototype, "form", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTextarea.prototype, "control", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTextarea.prototype, "textarea", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTextarea.prototype, "hasFocus", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTextarea.prototype, "validity", 2);
+KemetTextarea = __decorateClass([
+  (0, import_decorators.customElement)("kemet-textarea")
+], KemetTextarea);
+//# sourceMappingURL=textarea.js.map