kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-VHOXQRZV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel.ts","../src/styles/elements/carousel.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesCarousel } from '../styles/elements/carousel';\n\nimport type KemetCarouselCurrent from './carousel-current';\nimport type KemetCarouselLink from './carousel-link';\nimport type KemetCarouselSlide from './carousel-slide';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel\n * @summary The Carousel allows you to click or swipe through content.\n *\n * @prop {number} index - The current slide index.\n * @prop {number} total - The total amount of slides.\n * @prop {string} sliderWidth - The width of the slider.\n * @prop {string} sliderTranslateX - The X position of the slider.\n * @prop {boolean} inner - Displays the toolbar inside the carousel container.\n * @prop {boolean} arrows - Determines whether to display arrows.\n * @prop {object} options - Default options for the carousel.\n * @prop {object} breakpoints - Options at different breakpoints for the carousel. Is mobile first.\n *\n * @event kemet-change-start - Fires when the slide has begun to change.\n * @event kemet-change-finished - Fires when a slide has changed and finished animating\n *\n * @slot slides - Place the slide elements here.\n * @slot toolbar - Allows you to construct a toolbar within the carousel. Place things like pagination here.\n * @slot prev - A slot for the previous arrow.\n * @slot next - A slot for the next arrow.\n * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.\n *\n * @cssproperty --kemet-carousel-width - The width of the carousel.\n * @cssproperty --kemet-carousel-height - The height of the carousel.\n * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar.\n * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar.\n * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar.\n * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width.\n * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar.\n * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar.\n * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color.\n * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color.\n * @cssproperty --kemet-carousel-slides-border - The border around the slides.\n * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides.\n * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity.\n * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity.\n * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed.\n *\n * @csspart container - Contains the slides and toolbar.\n * @csspart slides - Wrapper for the slider.\n * @csspart slider - Contains the slides.\n * @csspart toolbar - Contains the toolbar.\n *\n */\n\n@customElement('kemet-carousel')\nexport default class KemetCarousel extends LitElement {\n  static styles = [stylesCarousel];\n\n  @property({ type: Number, reflect: true })\n  index: number = 0;\n\n  @property({ type: Number })\n  total: number = 0;\n\n  @property({ type: String })\n  sliderWidth: string = 'auto';\n\n  @property({ type: String })\n  sliderTranslateX: string = '0';\n\n  @property({ type: Boolean, reflect: true })\n  inner: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  arrows: boolean = false;\n\n  @property({ type: Object })\n  options: object = {\n    perView: 1,\n    perMove: 1,\n    gap: 12,\n    slideshow: 0,\n    rewind: true,\n    center: false,\n  };\n\n  @property({ type: Object })\n  breakpoints: object = {\n    768: {\n      perView: 2,\n      gap: 24,\n      rewind: false,\n    },\n    1280: {\n      perView: 2.5,\n      center: true,\n    },\n  };\n\n  /** @internal */\n  @state()\n  slides: KemetCarouselSlide[] = [];\n\n  /** @internal */\n  @state()\n  links: KemetCarouselLink[] = [];\n\n  /** @internal */\n  @state()\n  toolbarSlotElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  informationElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  swipeMove: (event: TouchEvent | MouseEvent) => void;\n\n  /** @internal */\n  @state()\n  handleSlideShow: () => void;\n\n  /** @internal */\n  @state()\n  slideShowID: number;\n\n  /** @internal */\n  @state()\n  startX: number;\n\n  /** @internal */\n  @state()\n  slideWidth: number;\n\n  /** @internal */\n  @state()\n  informationSlot: HTMLElement;\n\n  /** @internal */\n  @query('#container')\n  containerElement: HTMLElement;\n\n  /** @internal */\n  @query('#slides')\n  slidesElement: HTMLElement;\n\n  /** @internal */\n  @query('#slider')\n  sliderElement: HTMLElement;\n\n  /** @internal */\n  @query('#toolbar')\n  toolbarElement: HTMLElement;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-first-activated', this.handleFirst.bind(this));\n    this.addEventListener('kemet-last-activated', this.handleLast.bind(this));\n    this.addEventListener('kemet-next-activated', this.handleNext.bind(this));\n    this.addEventListener('kemet-prev-activated', this.handlePrev.bind(this));\n    this.addEventListener('kemet-link-activated', this.handleLink.bind(this));\n  }\n\n  firstUpdated() {\n    // elements\n    this.toolbarSlotElement = this.querySelector('[slot=\"toolbar\"]');\n    this.informationElement = this.querySelector('kemet-carousel-information');\n\n    // events\n    window.addEventListener('resize', () => {\n      this.setSlideSize();\n      this.setToolbarSize();\n      this.updateIndex(this.index);\n    });\n\n    this.sliderElement?.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n\n    // methods\n    this.swipeMove = (event) => {\n      event.preventDefault();\n      let pageX: number;\n\n      if ('touches' in event) {\n        pageX = event.touches[0].pageX;\n      } else {\n        pageX = event.pageX;\n      }\n      const currentSlide = this.slides[this.index];\n\n      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;\n    };\n\n    // setup\n    this.setSlideSize();\n    this.goToSlide(this.index);\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.setSlideSize();\n    this.setToolbarSize();\n\n    if (prevProps.has('index')) {\n      this.updateIndex(this.index);\n      this.slideShowID = window.setTimeout(() => {\n          if (this.getOption('slideshow') > 0) {\n            this.updateIndex(this.index + 1);\n            clearTimeout(this.slideShowID);\n          }\n      }, this.getOption('slideshow') * 1000);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"prev\" @slotchange=${this.handleArrows}></slot>\n      <div id=\"container\" class=\"container\" part=\"container\">\n        <section\n          id=\"slides\"\n          class=\"slides\"\n          part=\"slides\"\n          @mousedown=${this.swipeStart}\n          @mouseup=${this.swipeEnd}\n          @touchstart=${this.swipeStart}\n          @touchend=${this.swipeEnd}\n          @mouseleave=${this.swipeLeave}\n        >\n          <div id=\"slider\" class=\"slider\" part=\"slider\" style=\"width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});\">\n            <slot name=\"slides\" @slotchange=\"${this.handleSlotChange}\"></slot>\n          </div>\n        </section>\n        ${this.makeToolbar()}\n      </div>\n      <slot name=\"next\" @slotchange=${this.handleArrows}></slot>\n    `;\n  }\n\n  swipeStart(event: TouchEvent | MouseEvent) {\n    if ('touches' in event) {\n      this.startX = event.touches[0].pageX;\n    } else {\n      this.startX = event.pageX;\n    }\n\n    this.addEventListener('mousemove', this.swipeMove);\n    this.addEventListener('touchmove', this.swipeMove);\n  }\n\n  swipeEnd(event: TouchEvent | MouseEvent) {\n    this.updateIndex(this.swipeUpdate(event));\n    this.removeEventListener('mousemove', this.swipeMove, false);\n    this.removeEventListener('touchmove', this.swipeMove, false);\n  }\n\n  swipeUpdate(event: TouchEvent | MouseEvent) {\n    let pageX: number;\n\n    if ('changedTouches' in event) {\n      pageX = event.changedTouches[0].pageX;\n    } else {\n      pageX = event.pageX;\n    }\n\n    const direction = this.startX > pageX ? 'right' : 'left';\n    const threshold = this.slidesElement.offsetWidth / 3;\n    const diff = this.startX - pageX;\n    const shouldUpdate = Math.abs(diff) > threshold;\n\n    let { index } = this;\n\n    if (shouldUpdate && direction === 'right') {\n      index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;\n    }\n\n    if (shouldUpdate && direction === 'left') {\n      index = this.index < 1 ? 0 : this.index - 1;\n    }\n\n    return index;\n  }\n\n  swipeLeave() {\n    this.updateIndex(this.index);\n    this.removeEventListener('mousemove', this.swipeMove, false);\n    this.removeEventListener('touchmove', this.swipeMove, false);\n  }\n\n  setSlideSize() {\n    this.slideWidth = this.containerElement?.offsetWidth as number / this.getOption('perView');\n\n    this.slides.forEach((slide) => {\n      slide.style.marginLeft = `${this.getOption('gap') / 2}px`;\n      slide.style.marginRight = `${this.getOption('gap') / 2}px`;\n      slide.style.width = `${this.slideWidth - this.getOption('gap')}px`;\n    });\n\n    this.sliderWidth = `${this.slideWidth * this.slides.length}px`;\n  }\n\n  setToolbarSize() {\n    if (this.inner && this.toolbarElement) {\n      const width = this.slidesElement.offsetWidth;\n      this.toolbarElement.style.width = `${width}px`;\n    }\n  }\n\n  makeToolbar() {\n    if (this.toolbarSlotElement) {\n      return html`\n        <section id=\"toolbar\" class=\"toolbar\" part=\"toolbar\">\n          <slot name=\"toolbar\"></slot>\n        </section>\n      `;\n    }\n\n    return null;\n  }\n\n  handleSlotChange() {\n    const slides = this.querySelectorAll('kemet-carousel-slide') as NodeListOf<KemetCarouselSlide>;\n    const links = this.querySelectorAll('kemet-carousel-link') as NodeListOf<KemetCarouselLink>;\n\n    // handle slides\n    slides.forEach((slide) => {\n      this.slides.push(slide);\n    });\n\n    this.updateInformation();\n    this.total = slides.length;\n    slides[this.index].selected = true;\n\n    // handle links\n    links.forEach((link) => {\n      this.links.push(link);\n    });\n  }\n\n  handleArrows() {\n    this.arrows = true;\n  }\n\n  handleFirst() {\n    this.updateIndex(0);\n  }\n\n  handleLast() {\n    this.updateIndex(this.slides.length - 1);\n  }\n\n  handleNext() {\n    let newIndex = this.index + this.getOption('perMove');\n\n    if (newIndex >= this.slides.length) {\n      if (this.getOption('rewind')) {\n        newIndex = 0;\n      } else {\n        newIndex = this.index;\n      }\n    }\n\n    this.updateIndex(newIndex);\n  }\n\n  handlePrev() {\n    let newIndex = this.index - this.getOption('perMove');\n\n    // send them to the last slide\n    if (newIndex < 0) {\n      if (this.getOption('rewind')) {\n        newIndex = this.slides.length - 1;\n      } else {\n        newIndex = this.index;\n      }\n    }\n\n    this.updateIndex(newIndex);\n  }\n\n  updateIndex(newIndex: number) {\n    let currentSlide = this.slides[this.index];\n    let currentLink = this.links[newIndex];\n\n    // remove selected from all links\n    this.links.forEach((link) => {\n      link.selected = false;\n    });\n\n    // if current link is invalid assume it's the first link\n    if (!currentLink) {\n      [currentLink] = this.links;\n    }\n\n    // add selected to current link\n    if (currentLink) {\n      currentLink.selected = true;\n    }\n\n    if (currentSlide) {\n      currentSlide.setAttribute('aria-hidden', 'true');\n\n      // correct for invalid indexes\n      if (newIndex > -1 && newIndex < this.slides.length) {\n        this.index = newIndex;\n      } else {\n        console.warn('An invalid index number was entered. The kemet-carousel has been reset to the first slide.');\n        this.index = 0;\n      }\n\n      // move\n      this.goToSlide(this.index);\n\n      // update new slide\n      currentSlide = this.slides[this.index];\n      currentSlide.setAttribute('aria-hidden', 'false');\n\n      this.slides.forEach((slide) => {\n        slide.selected = false;\n      });\n\n      currentSlide.selected = true;\n\n      // notify consumers of slide change\n      emitEvent(this, 'kemet-change-start', this);\n\n      // update information element\n      this.updateInformation();\n    }\n  }\n\n  updateInformation() {\n    this.informationSlot = this.slides[this.index].querySelector('[slot=\"information\"]');\n\n    if (this.informationElement) {\n      if (this.informationSlot) {\n        this.informationElement.innerHTML = this.informationSlot.outerHTML;\n      } else {\n        this.informationElement.innerHTML = '';\n      }\n    }\n  }\n\n  goToSlide(index: number) {\n    if (this.getOption('center') === true) {\n      const slidesCenter = this.slidesElement.offsetWidth / 2;\n      const slideX = this.slideWidth * index;\n      this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;\n    } else {\n      this.sliderTranslateX = `${(this.slideWidth * index) * -1}px`;\n    }\n  }\n\n  handleTransitionEnd() {\n    const currentElement = this.querySelector('kemet-carousel-current') as KemetCarouselCurrent;\n\n    if (currentElement) {\n      currentElement.current = this.index + 1;\n    }\n\n    emitEvent(this, 'kemet-change-finished', this);\n  }\n\n  handleLink(event: CustomEvent) {\n    this.updateIndex(event.detail.slide);\n  }\n\n  getOption(option: string) {\n    const breakpoints = Object.keys(this.breakpoints);\n    let value = this.options[option];\n\n    breakpoints.forEach((breakpoint) => {\n      if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== undefined) {\n        value = this.breakpoints[breakpoint][option];\n      }\n\n      return value;\n    });\n\n    return value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel': KemetCarousel\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesCarousel = css`\n  :host,\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-carousel-width: 100%;\n    --kemet-carousel-height: auto;\n    --kemet-carousel-toolbar-gap: 1rem;\n    --kemet-carousel-toolbar-justify-content: center;\n    --kemet-carousel-toolbar-padding: 1rem;\n    --kemet-carousel-toolbar-inner-width: 100%;\n    --kemet-carousel-toolbar-inner-bottom: 0;\n    --kemet-carousel-toolbar-inner-top: auto;\n    --kemet-carousel-toolbar-inner-color: rgb(var(--kemet-color-white));\n    --kemet-carousel-toolbar-inner-background-color: rgb(var(--kemet-color-black) / 40%);\n    --kemet-carousel-slides-border: 1px solid rgb(var(--kemet-color-gray-50));\n    --kemet-carousel-transition-speed: 300ms;\n    --kemet-carousel-arrows-opacity: 0.25;\n    --kemet-carousel-arrows-transition-speed: 300ms;\n    --kemet-carousel-arrows-opacity-hover: 1;\n\n    position: relative;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-items: center;\n    width: var(--kemet-carousel-width);\n    height: var(--kemet-carousel-height);\n    overflow: visible;\n  }\n\n  :host([arrows]) {\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: var(--kemet-carousel-toolbar-gap);\n    align-items: center;\n    justify-content: var(--kemet-carousel-toolbar-justify-content);\n    line-height: 1;\n    padding: var(--kemet-carousel-toolbar-padding);\n  }\n\n  :host([inner]) .toolbar {\n    width: var(--kemet-carousel-toolbar-inner-width);\n    position: absolute;\n    bottom: var(--kemet-carousel-toolbar-inner-bottom);\n    top: var(--kemet-carousel-toolbar-inner-top);\n    color: var(--kemet-carousel-toolbar-inner-color);\n    background-color: var(--kemet-carousel-toolbar-inner-background-color);\n  }\n\n  .slides {\n    overflow: hidden;\n    position: relative;\n    padding: 1rem 0;\n    border: var(--kemet-carousel-slides-border);\n  }\n\n  .slider {\n    display: flex;\n    flex-wrap: nowrap;\n    transition: transform var(--kemet-carousel-transition-speed) ease;\n  }\n\n  ::slotted([slot='next']),\n  ::slotted([slot='prev']) {\n    opacity: var(--kemet-carousel-arrows-opacity);\n    transition: opacity var(--kemet-carousel-arrows-transition-speed) ease-in-out;\n  }\n\n  :host(:hover) ::slotted([slot='next']),\n  :host(:hover) ::slotted([slot='prev']) {\n    opacity: var(--kemet-carousel-arrows-opacity-hover);\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/chunk-WS2CRWKG.mjs

@@ -0,0 +1,158 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/field.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/styles/elements/field.ts
+import { css } from "lit";
+var stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  label {
+    position: relative;
+    display: block;
+  }
+
+  label span {
+    color: inherit;
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-bottom: 0.8rem;
+  }
+
+  .message {
+    font-size: 0.9rem;
+    line-height: 1;
+    display: block;
+    margin-top: 0.8rem;
+  }
+
+  :host([status='error']) .message {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  :host([status='success']) .message {
+    color: rgb(var(--kemet-color-success));
+  }
+
+  :host([status='warning']) .message {
+    color: rgb(var(--kemet-color-warning));
+  }
+`;
+
+// src/elements/field.ts
+var KemetField = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.status = "standard" /* Standard */;
+    this.errorIcon = "exclamation-triangle-fill";
+    this.successIcon = "check-lg";
+  }
+  firstUpdated() {
+    this.slotInput = this.querySelector('[slot="input"]');
+    this.slotCombo = this.querySelector('[slot="combo"]');
+    this.slotInput.addEventListener("kemet-focus", (event) => this.handleFocused(event));
+    this.slotInput.addEventListener("kemet-status-change", (event) => this.handleStatus(event));
+    this.slotInput.addEventListener("kemet-input", (event) => this.handleInput(event));
+    this.slotCombo?.addEventListener("kemet-selection", (event) => this.handleSelection(event));
+    if (this.slotInput.value) {
+      this.length = this.slotInput.value.length;
+    } else {
+      this.length = 0;
+    }
+  }
+  render() {
+    return html`
+      <label for="${this.slug}" id="${this.slug}-label" part="label">
+        <span part="text">${this.label}</span>
+        <slot name="input"></slot>
+      </label>
+      ${this.makeStatusMessage()}
+      <slot name="component"></slot>
+    `;
+  }
+  makeStatusMessage() {
+    if (this.status !== "standard") {
+      return html`<span class="message" part="message">${this.message}</span>`;
+    }
+    return null;
+  }
+  handleFocused(event) {
+    this.focused = event.detail;
+    if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {
+      this.slotCombo.show = false;
+    }
+  }
+  handleStatus(event) {
+    this.status = event.detail.status;
+  }
+  handleInput(event) {
+    this.length = event.detail.value.length ?? 0;
+    this.filled = event.detail.value !== "";
+  }
+  handleSelection(event) {
+    console.log(event.detail);
+    this.slotInput.setAttribute("aria-activedescendant", event.detail);
+  }
+};
+KemetField.styles = [stylesBase];
+__decorateClass([
+  property({ type: String })
+], KemetField.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], KemetField.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], KemetField.prototype, "message", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetField.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetField.prototype, "status", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetField.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetField.prototype, "length", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetField.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, attribute: "error-icon" })
+], KemetField.prototype, "errorIcon", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-icon" })
+], KemetField.prototype, "successIcon", 2);
+__decorateClass([
+  state()
+], KemetField.prototype, "slotInput", 2);
+__decorateClass([
+  state()
+], KemetField.prototype, "slotCombo", 2);
+KemetField = __decorateClass([
+  customElement("kemet-field")
+], KemetField);
+
+export {
+  KemetField
+};
+//# sourceMappingURL=chunk-WS2CRWKG.mjs.map

package/dist/chunk-WS2CRWKG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/field.ts","../src/styles/elements/field.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/field';\n\nimport KemetCombo from './combo';\nimport KemetInput from './input';\nimport KemetTextarea from './textarea';\nimport { EnumStatuses, TypeStatus } from '../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-field\n * @summary Used in combination with Input, Select, and Textarea, to make a Field.\n *\n * @prop {string} slug - Uniquely identifies the control. Use the same slug for slotted subcomponents.\n * @prop {string} label - The label text\n * @prop {string} message - The validation message for error or success\n * @prop {boolean} focused - Determines if the containing input is focused\n * @prop {TypeStatus} status - The validation status of standard, error, or success\n * @prop {boolean} filled - Is true when the containing input has a value\n * @prop {number} length - The length of the containing input\n * @prop {boolean} disabled - Determines the disabled state of the control\n * @prop {string} errorIcon - The icon while in an error or warning state\n * @prop {string} successIcon - The icon while in a success state\n *\n * @slot component - Allows subcomponents of the field to display.\n *\n * @csspart label - The label of the field.\n * @csspart message - The validation message of the field.\n * @csspart text - The text in the label.\n *\n * @event kemet-input - Fires when input fires on the input slot\n *\n */\n\n@customElement('kemet-field')\nexport default class KemetField extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: Number })\n  length: number;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: String, attribute: 'error-icon' })\n  errorIcon: string = 'exclamation-triangle-fill';\n\n  @property({ type: String, attribute: 'success-icon' })\n  successIcon: string = 'check-lg';\n\n  @state()\n  slotInput: KemetInput | KemetTextarea;\n\n  @state()\n  slotCombo: KemetCombo;\n\n  firstUpdated() {\n    this.slotInput = this.querySelector('[slot=\"input\"]');\n    this.slotCombo = this.querySelector('[slot=\"combo\"]');\n\n    this.slotInput.addEventListener('kemet-focus', (event: CustomEvent) => this.handleFocused(event));\n    this.slotInput.addEventListener('kemet-status-change', (event: CustomEvent) => this.handleStatus(event));\n    this.slotInput.addEventListener('kemet-input', (event: CustomEvent) => this.handleInput(event));\n    this.slotCombo?.addEventListener('kemet-selection', (event: CustomEvent) => this.handleSelection(event));\n\n    if (this.slotInput.value) {\n      this.length = this.slotInput.value.length;\n    } else {\n      this.length = 0;\n    }\n  }\n\n  render() {\n    return html`\n      <label for=\"${this.slug}\" id=\"${this.slug}-label\" part=\"label\">\n        <span part=\"text\">${this.label}</span>\n        <slot name=\"input\"></slot>\n      </label>\n      ${this.makeStatusMessage()}\n      <slot name=\"component\"></slot>\n    `;\n  }\n\n  makeStatusMessage() {\n    if (this.status !== 'standard') {\n      return html`<span class=\"message\" part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  handleFocused(event: CustomEvent) {\n    this.focused = event.detail;\n\n    if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {\n      this.slotCombo.show = false;\n    }\n  }\n\n  handleStatus(event: CustomEvent) {\n    this.status = event.detail.status;\n  }\n\n  handleInput(event: CustomEvent) {\n    this.length = event.detail.value.length ?? 0;\n    this.filled = event.detail.value !== '';\n  }\n\n  handleSelection(event: CustomEvent) {\n    console.log(event.detail);\n    this.slotInput.setAttribute('aria-activedescendant', event.detail);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-field': KemetField\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    position: relative;\n    display: block;\n  }\n\n  label span {\n    color: inherit;\n    display: inline-flex;\n    gap: 0.5rem;\n    align-items: center;\n    margin-bottom: 0.8rem;\n  }\n\n  .message {\n    font-size: 0.9rem;\n    line-height: 1;\n    display: block;\n    margin-top: 0.8rem;\n  }\n\n  :host([status='error']) .message {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='success']) .message {\n    color: rgb(var(--kemet-color-success));\n  }\n\n  :host([status='warning']) .message {\n    color: rgb(var(--kemet-color-warning));\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/chunk-YDPU6LZP.mjs

@@ -0,0 +1,47 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/popper-close.ts
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+var KemetPopperClose = class extends LitElement {
+  render() {
+    return html`
+      <button @click=${() => this.close()} @keyup=${(event) => this.handleKeyboard(event)}>
+        <slot></slot>
+      </button>
+    `;
+  }
+  close() {
+    emitEvent(this, "kemet-closed-pressed", this);
+  }
+  handleKeyboard(event) {
+    event.preventDefault();
+    if (event.code === "Space" || event.key === "Enter") {
+      this.close();
+    }
+  }
+};
+KemetPopperClose.styles = [
+  css`
+      button {
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
+        border: 0;
+        background: transparent;
+      }
+    `
+];
+KemetPopperClose = __decorateClass([
+  customElement("kemet-popper-close")
+], KemetPopperClose);
+
+export {
+  KemetPopperClose
+};
+//# sourceMappingURL=chunk-YDPU6LZP.mjs.map

package/dist/chunk-YDPU6LZP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/popper-close.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper-close\n * @summary A close button for the popper\n *\n * @event kemet-closed-pressed\n *\n */\n\n@customElement('kemet-popper-close')\nexport default class KemetPopperClose extends LitElement {\n  static styles = [\n    css`\n      button {\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <button @click=${() => this.close()} @keyup=${(event: KeyboardEvent) => this.handleKeyboard(event)}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-closed-pressed', this);\n  }\n\n  handleKeyboard(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.code === 'Space' || event.key === 'Enter') {\n      this.close();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper-close': KemetPopperClose\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,qBAAqB;AAe9B,IAAqB,mBAArB,cAA8C,WAAW;AAAA,EAavD,SAAS;AACP,WAAO;AAAA,uBACY,MAAM,KAAK,MAAM,CAAC,WAAW,CAAC,UAAyB,KAAK,eAAe,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,EAItG;AAAA,EAEA,QAAQ;AACN,cAAU,MAAM,wBAAwB,IAAI;AAAA,EAC9C;AAAA,EAEA,eAAe,OAAsB;AACnC,UAAM,eAAe;AAErB,QAAI,MAAM,SAAS,WAAW,MAAM,QAAQ,SAAS;AACnD,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AACF;AAhCqB,iBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASF;AAXmB,mBAArB;AAAA,EADC,cAAc,oBAAoB;AAAA,GACd;","names":[]}

package/dist/chunk-YP7UN6IN.mjs

@@ -0,0 +1,119 @@
+import {
+  stylesPanel
+} from "./chunk-TFESUHTA.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/accordion-panel.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetAccordionPanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.opened = void 0;
+    this.maxHeight = "0px";
+    this.slug = "panel";
+  }
+  firstUpdated() {
+    this.focusableSelector = "body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
+    this.bodyElement = this.querySelector('[slot="body"]');
+    this.bodyElementFirst = this.bodyElement?.querySelector(":first-child");
+    this.bodyElementLast = this.bodyElement?.querySelector(":last-child");
+    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = "0";
+    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = "0";
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;
+      emitEvent(this, "kemet-opened", this);
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      this.maxHeight = "0px";
+      emitEvent(this, "kemet-closed", this);
+    }
+    this.a11y();
+    this.focusableBodyElements();
+  }
+  render() {
+    return html`
+      <button
+        class="trigger"
+        part="trigger"
+        @click=${() => this.toggle()}
+        @keydown=${(event) => this.handleKeyDown(event)}
+      >
+        <slot name="trigger"></slot>
+        <slot name="icon"></slot>
+      </button>
+      <section class="body" part="body" style="max-height:${this.maxHeight};">
+        <slot name="body"></slot>
+      </section>
+    `;
+  }
+  toggle() {
+    this.opened = !this.opened;
+  }
+  focusableBodyElements() {
+    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);
+    if (this.opened) {
+      focusableElements?.forEach((element) => {
+        element.removeAttribute("tabindex");
+      });
+    } else {
+      focusableElements?.forEach((element) => {
+        element.setAttribute("tabindex", "-1");
+      });
+    }
+  }
+  a11y() {
+    const trigger = this.shadowRoot?.querySelector(".trigger");
+    const body = this.shadowRoot?.querySelector(".body");
+    trigger?.setAttribute("id", `${this.slug}-button`);
+    trigger?.setAttribute("aria-controls", `${this.slug}-content`);
+    body?.setAttribute("id", `${this.slug}-content`);
+    body?.setAttribute("aria-labelledby", `${this.slug}-button`);
+    body?.setAttribute("aria-hidden", `${!this.opened}`);
+  }
+  handleKeyDown(event) {
+    if (event.key === "Space" || event.key === "Enter") {
+      this.toggle();
+    }
+  }
+};
+KemetAccordionPanel.styles = [stylesPanel];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAccordionPanel.prototype, "opened", 2);
+__decorateClass([
+  property({ type: String, attribute: "max-height" })
+], KemetAccordionPanel.prototype, "maxHeight", 2);
+__decorateClass([
+  property({ type: String })
+], KemetAccordionPanel.prototype, "slug", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetAccordionPanel.prototype, "index", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "focusableSelector", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "bodyElement", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "bodyElementFirst", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "bodyElementLast", 2);
+KemetAccordionPanel = __decorateClass([
+  customElement("kemet-accordion-panel")
+], KemetAccordionPanel);
+
+export {
+  KemetAccordionPanel
+};
+//# sourceMappingURL=chunk-YP7UN6IN.mjs.map

package/dist/chunk-YP7UN6IN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/accordion-panel.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesPanel } from '../styles/elements/accordion';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @event kemet-opened - Fires when a panel is opened\n * @event kemet-closed - Fires when a panel is closed\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [stylesPanel];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height' })\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  @property({ type: Number })\n  index: number;\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  bodyElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-closed', this);\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-YVOM5EV3.mjs

@@ -0,0 +1,49 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-slide.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetCarouselSlide = class extends LitElement {
+  constructor() {
+    super();
+    this.selected = false;
+    this["aria-hidden"] = "true";
+  }
+  static get properties() {
+    return {
+      "aria-hidden": { type: String, reflect: true }
+    };
+  }
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+};
+KemetCarouselSlide.styles = [
+  css`
+      :host,
+      :host *,
+      :host *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      :host {
+        flex: 0 0 auto;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarouselSlide.prototype, "selected", 2);
+KemetCarouselSlide = __decorateClass([
+  customElement("kemet-carousel-slide")
+], KemetCarouselSlide);
+
+export {
+  KemetCarouselSlide
+};
+//# sourceMappingURL=chunk-YVOM5EV3.mjs.map

package/dist/chunk-YVOM5EV3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-slide.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-slide\n * @summary A container for a slide in the carousel.\n *\n * @prop {boolean} selected - Determines if the slide is selected.\n *\n */\n\n@customElement('kemet-carousel-slide')\nexport default class KemetCarouselSlide extends LitElement {\n  static styles = [\n    css`\n      :host,\n      :host *,\n      :host *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      :host {\n        flex: 0 0 auto;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  static get properties() {\n    return {\n      'aria-hidden': { type: String, reflect: true },\n    };\n  }\n\n  constructor() {\n    super();\n    this['aria-hidden'] = 'true';\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-slide': KemetCarouselSlide\n  }\n}\n"],"mappings":";;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAexC,IAAqB,qBAArB,cAAgD,WAAW;AAAA,EAyBzD,cAAc;AACZ,UAAM;AATR,oBAAoB;AAUlB,SAAK,aAAa,IAAI;AAAA,EACxB;AAAA,EATA,WAAW,aAAa;AACtB,WAAO;AAAA,MACL,eAAe,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IAC/C;AAAA,EACF;AAAA,EAOA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AACF;AAnCqB,mBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhBvB,mBAiBnB;AAjBmB,qBAArB;AAAA,EADC,cAAc,sBAAsB;AAAA,GAChB;","names":[]}

package/dist/chunk-ZBQXY2YN.mjs

@@ -0,0 +1,88 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/count.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetCount = class extends LitElement {
+  firstUpdated() {
+    this.field = this.closest("kemet-field");
+    this.inputSlot = this.field.querySelector('[slot="input"]');
+    this.remaining = this.limit - this.field.length;
+    this.field.addEventListener("kemet-input", (event) => {
+      this.remaining = this.limit - event.detail.value.length;
+      const nativeElement = this.input || this.textarea;
+      if (nativeElement) {
+        if (this.remaining < 0) {
+          if (this.validateImmediately) {
+            this.inputSlot.status = "error" /* Error */;
+            this.inputSlot.invalid = true;
+            emitEvent(this, "kemet-status-change", {
+              status: "error" /* Error */,
+              validity: nativeElement.validity,
+              element: this.inputSlot
+            });
+          }
+        } else {
+          this.inputSlot.status = "standard" /* Standard */;
+          nativeElement.checkValidity();
+          emitEvent(this, "kemet-status-change", {
+            status: "standard" /* Standard */,
+            validity: nativeElement.validity,
+            element: this.inputSlot
+          });
+        }
+      }
+    });
+    this.input = this.inputSlot.shadowRoot.querySelector("input");
+    this.textarea = this.inputSlot.shadowRoot.querySelector("textarea");
+  }
+  render() {
+    return html`${this.remaining} ${this.message}`;
+  }
+};
+KemetCount.styles = [
+  css`
+      :host {
+        display: block;
+        font-size: var(--kemet-count-font-size, 90%);
+        margin-top: 0.8rem;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], KemetCount.prototype, "message", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetCount.prototype, "limit", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "validate-immediately" })
+], KemetCount.prototype, "validateImmediately", 2);
+__decorateClass([
+  state()
+], KemetCount.prototype, "remaining", 2);
+__decorateClass([
+  state()
+], KemetCount.prototype, "field", 2);
+__decorateClass([
+  state()
+], KemetCount.prototype, "inputSlot", 2);
+__decorateClass([
+  state()
+], KemetCount.prototype, "input", 2);
+__decorateClass([
+  state()
+], KemetCount.prototype, "textarea", 2);
+KemetCount = __decorateClass([
+  customElement("kemet-count")
+], KemetCount);
+
+export {
+  KemetCount
+};
+//# sourceMappingURL=chunk-ZBQXY2YN.mjs.map

package/dist/chunk-ZBQXY2YN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/count.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport KemetField from '../elements/field';\nimport KemetInput from '../elements/input';\nimport KemetTextarea from '../elements/textarea';\nimport { EnumStatuses, TypeStatus } from '../utilities/constants';\n\nexport interface InterfaceKemetStatusChangeEvent {\n  status: TypeStatus;\n  validity: ValidityState;\n  element: KemetField;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-count\n * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.\n *\n * @prop {string} message - The text label shown to users\n * @prop {number} remaining - The number of characters remaining\n * @prop {number} limit - The maximum number of characters allowed\n * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached\n *\n * @cssproperty --kemet-count-font-size - The font size. Default: 90%.\n *\n * @event kemet-status-change - Fires when there's a change in status.\n *\n */\n\n@customElement('kemet-count')\nexport default class KemetCount extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        font-size: var(--kemet-count-font-size, 90%);\n        margin-top: 0.8rem;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Number })\n  limit: number;\n\n  @property({ type: Boolean, attribute: 'validate-immediately' })\n  validateImmediately: boolean;\n\n  @state()\n  remaining: number;\n\n  @state()\n  field: KemetField;\n\n  @state()\n  inputSlot: KemetInput | KemetTextarea;\n\n  @state()\n  input: HTMLInputElement;\n\n  @state()\n  textarea: HTMLTextAreaElement;\n\n  firstUpdated() {\n    this.field = this.closest('kemet-field');\n    this.inputSlot = this.field.querySelector('[slot=\"input\"]');\n    this.remaining = this.limit - this.field.length;\n\n    this.field.addEventListener('kemet-input', (event: CustomEvent) => {\n      this.remaining = this.limit - event.detail.value.length;\n\n      const nativeElement = this.input || this.textarea;\n\n      if (nativeElement) {\n        if (this.remaining < 0) {\n          if (this.validateImmediately) {\n            this.inputSlot.status = EnumStatuses.Error;\n            this.inputSlot.invalid = true;\n\n            emitEvent(this, 'kemet-status-change', {\n              status: EnumStatuses.Error,\n              validity: nativeElement.validity,\n              element: this.inputSlot,\n            });\n          }\n        } else {\n          this.inputSlot.status = EnumStatuses.Standard;\n          nativeElement.checkValidity();\n\n          emitEvent(this, 'kemet-status-change', {\n            status: EnumStatuses.Standard,\n            validity: nativeElement.validity,\n            element: this.inputSlot,\n          });\n        }\n      }\n    });\n\n    this.input = this.inputSlot.shadowRoot.querySelector('input');\n    this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');\n  }\n\n  render() {\n    return html`${this.remaining} ${this.message}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-count': KemetCount\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,UAAU,aAAa;AAgC/C,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAmCjD,eAAe;AACb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,YAAY,KAAK,MAAM,cAAc,gBAAgB;AAC1D,SAAK,YAAY,KAAK,QAAQ,KAAK,MAAM;AAEzC,SAAK,MAAM,iBAAiB,eAAe,CAAC,UAAuB;AACjE,WAAK,YAAY,KAAK,QAAQ,MAAM,OAAO,MAAM;AAEjD,YAAM,gBAAgB,KAAK,SAAS,KAAK;AAEzC,UAAI,eAAe;AACjB,YAAI,KAAK,YAAY,GAAG;AACtB,cAAI,KAAK,qBAAqB;AAC5B,iBAAK,UAAU;AACf,iBAAK,UAAU,UAAU;AAEzB,sBAAU,MAAM,uBAAuB;AAAA,cACrC;AAAA,cACA,UAAU,cAAc;AAAA,cACxB,SAAS,KAAK;AAAA,YAChB,CAAC;AAAA,UACH;AAAA,QACF,OAAO;AACL,eAAK,UAAU;AACf,wBAAc,cAAc;AAE5B,oBAAU,MAAM,uBAAuB;AAAA,YACrC;AAAA,YACA,UAAU,cAAc;AAAA,YACxB,SAAS,KAAK;AAAA,UAChB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,QAAQ,KAAK,UAAU,WAAW,cAAc,OAAO;AAC5D,SAAK,WAAW,KAAK,UAAU,WAAW,cAAc,UAAU;AAAA,EACpE;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,SAAS,IAAI,KAAK,OAAO;AAAA,EAC9C;AACF;AA7EqB,WACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,WAYnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,WAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,uBAAuB,CAAC;AAAA,GAjB3C,WAkBnB;AAGA;AAAA,EADC,MAAM;AAAA,GApBY,WAqBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAvBY,WAwBnB;AAGA;AAAA,EADC,MAAM;AAAA,GA1BY,WA2BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA7BY,WA8BnB;AAGA;AAAA,EADC,MAAM;AAAA,GAhCY,WAiCnB;AAjCmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}