kemet-ui 4.0.2 → 5.0.0

package/dist/elements/combo.js

@@ -1,232 +0,0 @@
-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/combo.ts
-var combo_exports = {};
-__export(combo_exports, {
-  default: () => KemetCombo
-});
-module.exports = __toCommonJS(combo_exports);
-var import_lit2 = require("lit");
-var import_decorators = require("lit/decorators.js");
-
-// src/utilities/events.ts
-var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
-  element.dispatchEvent(
-    new CustomEvent(name, { bubbles, composed, detail })
-  );
-};
-
-// src/styles/elements/combo.ts
-var import_lit = require("lit");
-var stylesBase = import_lit.css`
-  :host {
-    --kemet-combo-width: calc(100% - 2px);
-    --kemet-combo-margin: 1rem auto;
-    --kemet-combo-max-height: calc(5 * 3rem);
-    --kemet-combo-border: 1px solid rgb(var(--kemet-color-foreground));
-    --kemet-combo-border-radius: var(--kemet-border-radius-md);
-    --kemet-combo-background-color: rgb(var(--kemet-color-white-to-black));
-    --kemet-combo-shadow: var(--kemet-elevation-layer-5);
-    --kemet-combo-hover-color: rgb(var(--kemet-color-white));
-    --kemet-combo-hover-background-color: rgb(var(--kemet-color-primary));
-
-    opacity: 0;
-    width: var(--kemet-combo-width);
-    margin: var(--kemet-combo-margin);
-    pointer-events: none;
-    display: block;
-    position: relative;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  :host([show]) {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  ul {
-    width: 100%;
-    max-height: var(--kemet-combo-max-height);
-    position: absolute;
-    z-index: 1;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    overflow-y: scroll;
-    border: var(--kemet-combo-border);
-    border-radius: var(--kemet-combo-border-radius);
-    background-color: var(--kemet-combo-background-color);
-    box-shadow: var(--kemet-combo-shadow);
-  }
-
-  li {
-    line-height: 3rem;
-    padding: 0 1.5rem;
-    cursor: pointer;
-  }
-
-  li:hover,
-  li:focus {
-    color: var(--kemet-combo-hover-color);
-    outline: none;
-    background-color: var(--kemet-combo-hover-background-color);
-  }
-`;
-
-// src/elements/combo.ts
-var KemetCombo = class extends import_lit2.LitElement {
-  constructor() {
-    super(...arguments);
-    this.options = [];
-  }
-  firstUpdated() {
-    this.field = this.closest("kemet-field");
-    this.input = this.field.querySelector('[slot="input"]');
-    this.slug = this.field.slug || "slug";
-    this.input.addEventListener("kemet-input", this.handleInput.bind(this));
-    this.input.addEventListener("kemet-focus", this.handleFocus.bind(this));
-    this.input.addEventListener("keydown", (event) => this.handleInputKeyDown(event));
-  }
-  render() {
-    return import_lit2.html`
-      <div
-        role="combobox"
-        part="combobox"
-        aria-expanded=${this.show}
-        aria-controls="${this.slug}-listbox"
-        aria-haspopup="listbox"
-        id="${this.slug}-combobox"
-        aria-label="${this.field?.label}"
-      >
-        <ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox" part="listbox">
-          ${this.makeOptions()}
-        </ul>
-      </div>
-    `;
-  }
-  makeOptions() {
-    if (this.input) {
-      this.filteredOptions = this.options.filter(
-        (option) => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1
-      );
-      if (this.filteredOptions.length < 1) {
-        this.show = false;
-        return null;
-      }
-      return this.filteredOptions.map(
-        (option, index) => import_lit2.html`<li
-            id="${this.slug}-option-${index}"
-            role="option"
-            tabindex="0"
-            aria-selected="false"
-            @click=${(event) => this.handleSelection(event)}
-            @keydown=${(event) => this.handleOptionKeyDown(event)}
-          >
-            ${option}
-          </li>`
-      );
-    }
-    return null;
-  }
-  handleInput(event) {
-    this.makeOptions();
-    this.show = event.detail.value.length > 0;
-  }
-  handleFocus() {
-    this.makeOptions();
-    this.show = true;
-  }
-  handleSelection(event) {
-    const target = event.target;
-    this.input.value = target.innerText;
-    this.show = false;
-    emitEvent(this, "kemet-selection", {
-      element: target,
-      text: target.innerText,
-      id: target.getAttribute("id")
-    });
-  }
-  handleOptionKeyDown(event) {
-    event.preventDefault();
-    const target = event.target;
-    if (event.code === "ArrowDown") {
-      const next = target.nextElementSibling;
-      if (next) {
-        next.focus();
-      } else {
-        this.shadowRoot.querySelector("li").focus();
-      }
-    }
-    if (event.code === "ArrowUp") {
-      const previous = target.previousElementSibling;
-      const lastChild = this.shadowRoot.querySelector("li:last-child");
-      if (previous) {
-        previous.focus();
-      } else {
-        lastChild.focus();
-      }
-    }
-    if (event.code === "Escape" || event.code === "Tab") {
-      this.show = false;
-      this.input.focus();
-    }
-    if (event.code === "Enter" || event.code === "Space") {
-      this.handleSelection(event);
-    }
-  }
-  handleInputKeyDown(event) {
-    if (event.code === "ArrowDown") {
-      this.shadowRoot.querySelector("li").focus();
-    }
-    if (event.code === "Escape") {
-      this.show = false;
-    }
-  }
-};
-KemetCombo.styles = [stylesBase];
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetCombo.prototype, "slug", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Array })
-], KemetCombo.prototype, "options", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean, reflect: true })
-], KemetCombo.prototype, "show", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCombo.prototype, "filteredOptions", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCombo.prototype, "field", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCombo.prototype, "input", 2);
-KemetCombo = __decorateClass([
-  (0, import_decorators.customElement)("kemet-combo")
-], KemetCombo);
-//# sourceMappingURL=combo.js.map

package/dist/elements/combo.js.map

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

package/dist/elements/combo.mjs

@@ -1,9 +0,0 @@
-import {
-  KemetCombo
-} from "../chunk-4PCL2QJV.mjs";
-import "../chunk-LHEY3UOF.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetCombo as default
-};
-//# sourceMappingURL=combo.mjs.map

package/dist/elements/combo.mjs.map

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

package/dist/elements/count.d.mts

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

package/dist/elements/count.d.ts

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

package/dist/elements/count.js

@@ -1,117 +0,0 @@
-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/count.ts
-var count_exports = {};
-__export(count_exports, {
-  default: () => KemetCount
-});
-module.exports = __toCommonJS(count_exports);
-var import_lit = require("lit");
-var import_decorators = require("lit/decorators.js");
-
-// src/utilities/events.ts
-var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
-  element.dispatchEvent(
-    new CustomEvent(name, { bubbles, composed, detail })
-  );
-};
-
-// src/elements/count.ts
-var KemetCount = class extends import_lit.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 import_lit.html`${this.remaining} ${this.message}`;
-  }
-};
-KemetCount.styles = [
-  import_lit.css`
-      :host {
-        display: block;
-        font-size: var(--kemet-count-font-size, 90%);
-        margin-top: 0.8rem;
-      }
-    `
-];
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetCount.prototype, "message", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Number })
-], KemetCount.prototype, "limit", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean, attribute: "validate-immediately" })
-], KemetCount.prototype, "validateImmediately", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCount.prototype, "remaining", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCount.prototype, "field", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCount.prototype, "inputSlot", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCount.prototype, "input", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetCount.prototype, "textarea", 2);
-KemetCount = __decorateClass([
-  (0, import_decorators.customElement)("kemet-count")
-], KemetCount);
-//# sourceMappingURL=count.js.map

package/dist/elements/count.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/count.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport 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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAsC;AACtC,wBAA+C;;;ACDxC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AD6BA,IAAqB,aAArB,cAAwC,sBAAW;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,kBAAO,KAAK,SAAS,IAAI,KAAK,OAAO;AAAA,EAC9C;AACF;AA7EqB,WACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,WAYnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,WAenB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,SAAS,WAAW,uBAAuB,CAAC;AAAA,GAjB3C,WAkBnB;AAGA;AAAA,MADC,yBAAM;AAAA,GApBY,WAqBnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAvBY,WAwBnB;AAGA;AAAA,MADC,yBAAM;AAAA,GA1BY,WA2BnB;AAGA;AAAA,MADC,yBAAM;AAAA,GA7BY,WA8BnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAhCY,WAiCnB;AAjCmB,aAArB;AAAA,MADC,iCAAc,aAAa;AAAA,GACP;","names":[]}

package/dist/elements/count.mjs

@@ -1,10 +0,0 @@
-import {
-  KemetCount
-} from "../chunk-ZBQXY2YN.mjs";
-import "../chunk-LHEY3UOF.mjs";
-import "../chunk-42U43NKG.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetCount as default
-};
-//# sourceMappingURL=count.mjs.map

package/dist/elements/count.mjs.map

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

package/dist/elements/draggable.d.mts

@@ -1,54 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-draggable
- * @summary A draggable element with the ability to remember its position.
- *
- * @prop {string} memory - A unique identifier used to store the element's position in local storage.
- * @prop {string} top - The elements top position in pixels.
- * @prop {string} left - The element's left position in pixels.
- * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.
- *
- * @event kemet-start
- * @event kemet-stop
- *
- */
-declare class KemetDraggable extends LitElement {
-    static styles: lit.CSSResult[];
-    memory: string;
-    top: string;
-    left: string;
-    measure: boolean;
-    /** @internal */
-    position1: number;
-    /** @internal */
-    position2: number;
-    /** @internal */
-    position3: number;
-    /** @internal */
-    position4: number;
-    /** @internal */
-    mouseMove: (event: MouseEvent) => void;
-    /** @internal */
-    mouseUp: () => void;
-    /** @internal */
-    draggableElement: HTMLElement;
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    startDrag(event: MouseEvent): void;
-    drag(event: MouseEvent): void;
-    stopDrag(): void;
-    measureContent(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-draggable': KemetDraggable;
-    }
-}
-
-export { KemetDraggable as default };

package/dist/elements/draggable.d.ts

@@ -1,54 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-draggable
- * @summary A draggable element with the ability to remember its position.
- *
- * @prop {string} memory - A unique identifier used to store the element's position in local storage.
- * @prop {string} top - The elements top position in pixels.
- * @prop {string} left - The element's left position in pixels.
- * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.
- *
- * @event kemet-start
- * @event kemet-stop
- *
- */
-declare class KemetDraggable extends LitElement {
-    static styles: lit.CSSResult[];
-    memory: string;
-    top: string;
-    left: string;
-    measure: boolean;
-    /** @internal */
-    position1: number;
-    /** @internal */
-    position2: number;
-    /** @internal */
-    position3: number;
-    /** @internal */
-    position4: number;
-    /** @internal */
-    mouseMove: (event: MouseEvent) => void;
-    /** @internal */
-    mouseUp: () => void;
-    /** @internal */
-    draggableElement: HTMLElement;
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    startDrag(event: MouseEvent): void;
-    drag(event: MouseEvent): void;
-    stopDrag(): void;
-    measureContent(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-draggable': KemetDraggable;
-    }
-}
-
-export { KemetDraggable as default };