kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-JXKIXKVM.mjs

@@ -0,0 +1,116 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/card.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/styles/elements/card.ts
+import { css } from "lit";
+var stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-card-padding: 1rem;
+    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));
+    --kemet-card-color: rgb(var(--kemet-color-text));
+    --kemet-card-max-width: 600px;
+    --kemet-card-border: 1px solid var(--kemet-card-border-color);
+    --kemet-card-border-radius: 0;
+    --kemet-card-background-color: rgb(var(--kemet-color-background));
+    --kemet-card-body-padding: var(--kemet-card-padding);
+    --kemet-card-header-padding: var(--kemet-card-padding);
+    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);
+    --kemet-card-caption-color: rgb(var(--kemet-color-white));
+    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);
+    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);
+    --kemet-card-footer-padding: var(--kemet-card-padding);
+    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);
+
+    color: var(--kemet-card-color);
+    display: inline-flex;
+    flex-direction: column;
+    max-width: var(--kemet-card-max-width);
+    border: var(--kemet-card-border);
+    border-radius: var(--kemet-card-border-radius);
+    background-color: var(--kemet-card-background-color);
+  }
+
+  :host([center]) {
+    align-items: center;
+    text-align: center;
+  }
+
+  .body {
+    padding: var(--kemet-card-body-padding);
+  }
+
+  .media {
+    position: relative;
+  }
+
+  ::slotted(*) {
+    max-width: 100%;
+  }
+
+  ::slotted(img) {
+    display: flex;
+    max-width: 100%;
+  }
+
+  ::slotted([slot="header"]) {
+    width: 100%;
+    padding: var(--kemet-card-header-padding);
+    border-bottom: var(--kemet-card-header-border-bottom);
+  }
+
+  ::slotted([slot="caption"]) {
+    color: var(--kemet-card-caption-color);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: var(--kemet-card-caption-padding);
+    background-color: var(--kemet-card-caption-background-color);
+  }
+
+  ::slotted([slot="footer"]) {
+    width: 100%;
+    padding: var(--kemet-card-footer-padding);
+    border-top: var(--kemet-card-footer-border-top);
+  }
+`;
+
+// src/elements/card.ts
+var KemetCard = class extends LitElement {
+  render() {
+    return html`
+      <slot name="header"></slot>
+      <div class="media" part="media">
+        <slot name="media"></slot>
+        <slot name="caption"></slot>
+      </div>
+      <div class="body" part="body">
+        <slot></slot>
+      </div>
+      </div>
+      <slot name="footer"></slot>
+    `;
+  }
+};
+KemetCard.styles = [stylesBase];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCard.prototype, "center", 2);
+KemetCard = __decorateClass([
+  customElement("kemet-card")
+], KemetCard);
+
+export {
+  KemetCard
+};
+//# sourceMappingURL=chunk-JXKIXKVM.mjs.map

package/dist/chunk-JXKIXKVM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/card.ts","../src/styles/elements/card.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/card';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n *\n * @prop {boolean} center - Centers the elements in the card.\n *\n * @slot default - The contents of the alert.\n * @slot header - The card's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements.\n * @cssproperty --kemet-card-border-color - The color of the borders.\n * @cssproperty --kemet-card-color - The color of the text. Default:\n * @cssproperty --kemet-card-max-width - The max width of the card.\n * @cssproperty --kemet-card-border - The border around the card.\n * @cssproperty --kemet-card-border-radius - The border radius of the card.\n * @cssproperty --kemet-card-background-color - The background color.\n * @cssproperty --kemet-card-body-padding - The body spacing.\n * @cssproperty --kemet-card-header-padding - The header spacing.\n * @cssproperty --kemet-card-header-border-bottom - The header border.\n * @cssproperty --kemet-card-caption-color - The caption text color.\n * @cssproperty --kemet-card-caption-padding - The caption spacing.\n * @cssproperty --kemet-card-caption-background-color - The caption background color.\n * @cssproperty --kemet-card-footer-padding - The footer spacing.\n * @cssproperty --kemet-card-footer-border-top - The footer border.\n *\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\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    --kemet-card-padding: 1rem;\n    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));\n    --kemet-card-color: rgb(var(--kemet-color-text));\n    --kemet-card-max-width: 600px;\n    --kemet-card-border: 1px solid var(--kemet-card-border-color);\n    --kemet-card-border-radius: 0;\n    --kemet-card-background-color: rgb(var(--kemet-color-background));\n    --kemet-card-body-padding: var(--kemet-card-padding);\n    --kemet-card-header-padding: var(--kemet-card-padding);\n    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);\n    --kemet-card-caption-color: rgb(var(--kemet-color-white));\n    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);\n    --kemet-card-footer-padding: var(--kemet-card-padding);\n    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);\n\n    color: var(--kemet-card-color);\n    display: inline-flex;\n    flex-direction: column;\n    max-width: var(--kemet-card-max-width);\n    border: var(--kemet-card-border);\n    border-radius: var(--kemet-card-border-radius);\n    background-color: var(--kemet-card-background-color);\n  }\n\n  :host([center]) {\n    align-items: center;\n    text-align: center;\n  }\n\n  .body {\n    padding: var(--kemet-card-body-padding);\n  }\n\n  .media {\n    position: relative;\n  }\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n\n  ::slotted(img) {\n    display: flex;\n    max-width: 100%;\n  }\n\n  ::slotted([slot=\"header\"]) {\n    width: 100%;\n    padding: var(--kemet-card-header-padding);\n    border-bottom: var(--kemet-card-header-border-bottom);\n  }\n\n  ::slotted([slot=\"caption\"]) {\n    color: var(--kemet-card-caption-color);\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    padding: var(--kemet-card-caption-padding);\n    background-color: var(--kemet-card-caption-background-color);\n  }\n\n  ::slotted([slot=\"footer\"]) {\n    width: 100%;\n    padding: var(--kemet-card-footer-padding);\n    border-top: var(--kemet-card-footer-border-top);\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADwC1B,IAAqB,YAArB,cAAuC,WAAW;AAAA,EAMhD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYT;AACF;AApBqB,UACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,UAInB;AAJmB,YAArB;AAAA,EADC,cAAc,YAAY;AAAA,GACN;","names":[]}

package/dist/chunk-L5NNYTOF.mjs

@@ -0,0 +1,183 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/fab.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/styles/elements/fab.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    --kemet-fab-size: 50px;
+    --kemet-fab-color: rgb(var(--kemet-color-white));
+    --kemet-fab-background-color: rgb(var(--kemet-color-primary));
+    --kemet-fab-outlined-color: rgb(var(--kemet-color-foreground));
+    --kemet-fab-outlined-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-fab-pill-radius: 10rem;
+    --kemet-fab-background-color: rgb(var(--kemet-color-primary));
+    --kemet-fab-outline-border: 1px solid rgb(var(--kemet-color-primary));
+    --kemet-fab-color: rgb(var(--kemet-color-white));
+    --kemet-fab-outlined-color: rgb(var(--kemet-color-foreground));
+
+    display: inline-block;
+    position: relative;
+  }
+
+  button {
+    color: var(--kemet-fab-color);
+    font-size: inherit;
+    display: inline-flex;
+    padding: 0;
+    position: relative;
+    min-height: var(--kemet-fab-size);
+    min-width: var(--kemet-fab-size);
+    max-width: var(--kemet-fab-size);
+    align-items: center;
+    justify-content: flex-start;
+    transition: all 0.4s ease;
+    border: none;
+    background-color: var(--kemet-fab-background-color);
+  }
+
+  :host([outlined]) button {
+    color: var(--kemet-fab-outlined-color);
+    border: var(--kemet-fab-outlined-border);
+    background-color: transparent;
+  }
+
+  :host([pill]) button {
+    border-radius: var(--kemet-fab-pill-radius);
+  }
+
+  button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    transition: background-color 0.3s ease-in-out;
+    background-color: var(--kemet-fab-background-color);
+  }
+
+  :host([pill]) button::before {
+    border-radius: var(--kemet-fab-pill-radius);
+  }
+
+  :host([outlined]) button::before {
+    border: var(--kemet-fab-outline-border);
+    background-color: transparent;
+  }
+
+  :host([expanded]) button {
+    max-width: 99rem;
+    padding: 0 1.35rem 0 0.25rem;
+  }
+
+  :host([disabled]) button {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon {
+    width: var(--kemet-fab-size);
+    height: var(--kemet-fab-size);
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .text {
+    color: var(--kemet-fab-color);
+    z-index: 1;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  :host([outlined]) .text {
+    color: var(--kemet-fab-outlined-color);
+  }
+
+  :host([expanded]) .text {
+    opacity: 1;
+  }
+`;
+
+// src/elements/fab.ts
+var KemetFAB = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.expanded = false;
+    this.outlined = false;
+    this.disabled = false;
+  }
+  firstUpdated() {
+    window.addEventListener("scroll", this.handleScroll.bind(this));
+    this.addEventListener("mouseover", this.handleMouseOver.bind(this));
+    this.addEventListener("mouseout", this.handleMouseOut.bind(this));
+  }
+  render() {
+    return html`
+      <button class="button" part="button" ?disabled=${this.disabled}>
+        <span class="icon" part="icon">
+          <slot name="icon"></slot>
+        </span>
+        <span class="text" part="text">
+          <slot></slot>
+        </span>
+      </button>
+    `;
+  }
+  handleMouseOver() {
+    if (!this.disabled) {
+      this.expanded = true;
+    }
+  }
+  handleMouseOut() {
+    if (!this.disabled) {
+      this.expanded = false;
+    }
+  }
+  handleScroll() {
+    if (window.scrollY > this.expandPoint && window.scrollY < this.collapsePoint) {
+      this.expanded = true;
+    } else {
+      this.expanded = false;
+    }
+  }
+};
+KemetFAB.styles = [stylesBase];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFAB.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFAB.prototype, "outlined", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFAB.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFAB.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Number, attribute: "expand-point" })
+], KemetFAB.prototype, "expandPoint", 2);
+__decorateClass([
+  property({ type: Number, attribute: "collapse-point" })
+], KemetFAB.prototype, "collapsePoint", 2);
+KemetFAB = __decorateClass([
+  customElement("kemet-fab")
+], KemetFAB);
+
+export {
+  KemetFAB
+};
+//# sourceMappingURL=chunk-L5NNYTOF.mjs.map

package/dist/chunk-L5NNYTOF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/fab.ts","../src/styles/elements/fab.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/fab';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-fab\n * @summary The FAB, or Floating Action Button, performs a primary action on a page.\n *\n * @prop {boolean} expanded - The expanded state of the button.\n * @prop {boolean} outlined - Outline style for a button.\n * @prop {boolean} disabled - Determines whether not a button is disabled.\n * @prop {boolean} pill - Displays the fab with rounded corners.\n * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.\n * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.\n *\n * @slot Icon - A slot for an icon to display.\n * @slot default - The text for the FAB.\n *\n * @cssproperty --kemet-fab-size - The width and height of the fab.\n * @cssproperty --kemet-fab-color - The text color of the fab.\n * @cssproperty --kemet-fab-background-color - The bg color of the tab.\n * @cssproperty --kemet-fab-outlined-color - The text color of an outlined fab.\n * @cssproperty --kemet-fab-outlined-border - The border of an outlined fab.\n * @cssproperty --kemet-fab-pill-radius - The border radius of a pill fab.\n *\n * @csspart button - The button's container.\n * @csspart icon -  The FAB icon.\n * @csspart text - The text in the FAB.\n *\n */\n\n@customElement('kemet-fab')\nexport default class KemetFAB extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  expanded: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  pill: boolean;\n\n  @property({ type: Number, attribute: 'expand-point' })\n  expandPoint: number;\n\n  @property({ type: Number, attribute: 'collapse-point' })\n  collapsePoint: number;\n\n  firstUpdated() {\n    // events\n    window.addEventListener('scroll', this.handleScroll.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n  }\n\n  render() {\n    return html`\n      <button class=\"button\" part=\"button\" ?disabled=${this.disabled}>\n        <span class=\"icon\" part=\"icon\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span class=\"text\" part=\"text\">\n          <slot></slot>\n        </span>\n      </button>\n    `;\n  }\n\n  handleMouseOver() {\n    if (!this.disabled) {\n      this.expanded = true;\n    }\n  }\n\n  handleMouseOut() {\n    if (!this.disabled) {\n      this.expanded = false;\n    }\n  }\n\n  handleScroll() {\n    if (window.scrollY > this.expandPoint && window.scrollY < this.collapsePoint) {\n      this.expanded = true;\n    } else {\n      this.expanded = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-fab': KemetFAB\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-fab-size: 50px;\n    --kemet-fab-color: rgb(var(--kemet-color-white));\n    --kemet-fab-background-color: rgb(var(--kemet-color-primary));\n    --kemet-fab-outlined-color: rgb(var(--kemet-color-foreground));\n    --kemet-fab-outlined-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-fab-pill-radius: 10rem;\n    --kemet-fab-background-color: rgb(var(--kemet-color-primary));\n    --kemet-fab-outline-border: 1px solid rgb(var(--kemet-color-primary));\n    --kemet-fab-color: rgb(var(--kemet-color-white));\n    --kemet-fab-outlined-color: rgb(var(--kemet-color-foreground));\n\n    display: inline-block;\n    position: relative;\n  }\n\n  button {\n    color: var(--kemet-fab-color);\n    font-size: inherit;\n    display: inline-flex;\n    padding: 0;\n    position: relative;\n    min-height: var(--kemet-fab-size);\n    min-width: var(--kemet-fab-size);\n    max-width: var(--kemet-fab-size);\n    align-items: center;\n    justify-content: flex-start;\n    transition: all 0.4s ease;\n    border: none;\n    background-color: var(--kemet-fab-background-color);\n  }\n\n  :host([outlined]) button {\n    color: var(--kemet-fab-outlined-color);\n    border: var(--kemet-fab-outlined-border);\n    background-color: transparent;\n  }\n\n  :host([pill]) button {\n    border-radius: var(--kemet-fab-pill-radius);\n  }\n\n  button::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: -1;\n    width: 100%;\n    height: 100%;\n    transition: background-color 0.3s ease-in-out;\n    background-color: var(--kemet-fab-background-color);\n  }\n\n  :host([pill]) button::before {\n    border-radius: var(--kemet-fab-pill-radius);\n  }\n\n  :host([outlined]) button::before {\n    border: var(--kemet-fab-outline-border);\n    background-color: transparent;\n  }\n\n  :host([expanded]) button {\n    max-width: 99rem;\n    padding: 0 1.35rem 0 0.25rem;\n  }\n\n  :host([disabled]) button {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .icon {\n    width: var(--kemet-fab-size);\n    height: var(--kemet-fab-size);\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .text {\n    color: var(--kemet-fab-color);\n    z-index: 1;\n    white-space: nowrap;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  :host([outlined]) .text {\n    color: var(--kemet-fab-outlined-color);\n  }\n\n  :host([expanded]) .text {\n    opacity: 1;\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADiC1B,IAAqB,WAArB,cAAsC,WAAW;AAAA,EAAjD;AAAA;AAIE,oBAAoB;AAGpB,oBAAoB;AAGpB,oBAAoB;AAAA;AAAA,EAWpB,eAAe;AAEb,WAAO,iBAAiB,UAAU,KAAK,aAAa,KAAK,IAAI,CAAC;AAC9D,SAAK,iBAAiB,aAAa,KAAK,gBAAgB,KAAK,IAAI,CAAC;AAClE,SAAK,iBAAiB,YAAY,KAAK,eAAe,KAAK,IAAI,CAAC;AAAA,EAClE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,uDAC4C,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlE;AAAA,EAEA,kBAAkB;AAChB,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,iBAAiB;AACf,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,eAAe;AACb,QAAI,OAAO,UAAU,KAAK,eAAe,OAAO,UAAU,KAAK,eAAe;AAC5E,WAAK,WAAW;AAAA,IAClB,OAAO;AACL,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;AA5DqB,SACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,SAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,SAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATvB,SAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,SAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAflC,SAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB,CAAC;AAAA,GAlBpC,SAmBnB;AAnBmB,WAArB;AAAA,EADC,cAAc,WAAW;AAAA,GACL;","names":[]}

package/dist/chunk-LHEY3UOF.mjs

@@ -0,0 +1,11 @@
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+export {
+  emitEvent
+};
+//# sourceMappingURL=chunk-LHEY3UOF.mjs.map

package/dist/chunk-LHEY3UOF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utilities/events.ts"],"sourcesContent":["export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";AAAO,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;","names":[]}