kemet-ui 3.1.0 → 4.0.1

package/dist/chunk-BEBUXXOW.mjs

@@ -0,0 +1,241 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/password.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/styles/elements/password.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    color: inherit;
+    display: none;
+  }
+
+  :host([show]) {
+    display: block;
+  }
+
+  p {
+    margin: 1.6rem 0;
+  }
+
+  .status {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr auto;
+    line-height: 1;
+    margin-top: 0.8rem;
+  }
+
+  .status > span {
+    text-transform: capitalize;
+  }
+
+  .status--weak,
+  .status--better {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  .status--strong {
+    color: rgb(var(--kemet-color-success));
+  }
+
+  .indicator {
+    display: flex;
+    gap: 0.4rem;
+    margin: 0;
+    list-style: none;
+  }
+
+  .indicator li {
+    width: 1.6rem;
+    height: 0.2rem;
+  }
+
+  .status--weak .indicator li:nth-child(1) {
+    background-color: rgb(var(--kemet-color-error));
+  }
+
+  .status--better .indicator li:nth-child(1),
+  .status--better .indicator li:nth-child(2) {
+    background-color: rgb(var(--kemet-color-error));
+  }
+
+  .status--strong .indicator li {
+    background-color: rgb(var(--kemet-color-success));
+  }
+
+  .rules {
+    color: rgb(var(--kemet-color-foreground));
+    line-height: 1.5;
+    list-style: none;
+    font-size: 90%;
+    padding-left: 2rem;
+  }
+
+  .rules li {
+    position: relative;
+  }
+
+  .rules kemet-icon-bootstrap {
+    color: rgb(var(--kemet-color-success));
+    position: absolute;
+    left: -2rem;
+  }
+`;
+
+// src/elements/password.ts
+var KemetPassword = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.rules = [
+      { pattern: "(?=.{8,}$)", message: "At least 8 characters long" },
+      { pattern: "(?=.*[a-z])(?=.*[A-Z])", message: "Uppercase and lowercase" },
+      { pattern: "(?=.*[0-9])", message: "At least one number (0-9)" }
+    ];
+    this.message = "Please make sure you meet all the requirements.";
+    this.icon = "check2";
+    this.iconSize = 18;
+  }
+  firstUpdated() {
+    this.field = this.closest("kemet-field");
+    this.input = this.field.querySelector('[slot="input"]');
+    this.input.addEventListener("kemet-input", this.handleInput.bind(this));
+  }
+  render() {
+    return html`
+      <div role="alert" aria-live="assertive">
+        <div class="status status--${this.strength}" part="status">
+          <span>${this.strength}</span>
+          <ul class="indicator" part="indicator">
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </div>
+        <p class="message" part="message">${this.message}</p>
+        <ul class="rules" part="rules">
+          ${this.makeRules()}
+        </ul>
+      </div>
+    `;
+  }
+  /**
+   * Makes the list of rules
+   * @private
+   * @returns {TemplateResult<1>[]} the criteria rules
+   */
+  makeRules() {
+    if (this.input) {
+      return this.rules.map((rule, index) => {
+        const regExp = new RegExp(rule.pattern);
+        const meetsCriteria = regExp.test(this.input.value);
+        this.rules[index].meetsCriteria = meetsCriteria;
+        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;
+      });
+    }
+    return null;
+  }
+  /**
+   * Makes the check icon if the criteria has been met
+   * @param {boolean} meetsCriteria
+   * @private
+   * @returns {TemplateResult} an icon component
+   */
+  makeCheckIcon(meetsCriteria) {
+    if (meetsCriteria) {
+      return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.iconSize}></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  /**
+   * Handles the kemet-input-input event
+   * @param {*} event
+   * @private
+   */
+  handleInput(event) {
+    this.value = event.detail.value;
+    this.setStrength();
+    this.visibility();
+  }
+  /**
+   * Determines the strength of the password
+   * @private
+   */
+  setStrength() {
+    setTimeout(() => {
+      const totalRules = this.rules.length;
+      const metRules = this.rules.filter((rule) => rule.meetsCriteria).length;
+      const metRulesPercentage = Math.round(metRules / totalRules * 100) / 100;
+      if (metRulesPercentage <= 0.33) {
+        this.strength = "weak";
+        this.status = "error" /* Error */;
+      }
+      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {
+        this.strength = "better";
+        this.status = "error" /* Error */;
+      }
+      if (metRulesPercentage > 0.67) {
+        this.strength = "strong";
+        this.status = "success" /* Success */;
+      }
+      emitEvent(this, "kemet-status-change", {
+        status: this.status,
+        meetsPasswordCriteria: this.status === "success" /* Success */,
+        element: this
+      });
+    }, 1);
+  }
+  /**
+   * Determines whether to show or hide the component
+   * @private
+   */
+  visibility() {
+    this.show = this.value.length > 0;
+  }
+};
+KemetPassword.styles = [stylesBase];
+__decorateClass([
+  property({ type: Array })
+], KemetPassword.prototype, "rules", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetPassword.prototype, "show", 2);
+__decorateClass([
+  property({ type: String })
+], KemetPassword.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], KemetPassword.prototype, "message", 2);
+__decorateClass([
+  property({ type: String })
+], KemetPassword.prototype, "strength", 2);
+__decorateClass([
+  property({ type: String })
+], KemetPassword.prototype, "icon", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetPassword.prototype, "iconSize", 2);
+__decorateClass([
+  state()
+], KemetPassword.prototype, "status", 2);
+__decorateClass([
+  state()
+], KemetPassword.prototype, "field", 2);
+__decorateClass([
+  state()
+], KemetPassword.prototype, "input", 2);
+KemetPassword = __decorateClass([
+  customElement("kemet-password")
+], KemetPassword);
+
+export {
+  KemetPassword
+};
+//# sourceMappingURL=chunk-BEBUXXOW.mjs.map

package/dist/chunk-BEBUXXOW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/password.ts","../src/styles/elements/password.ts"],"sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport KemetField from './field';\nimport KemetInput from './input';\nimport { EnumStatuses, TypeStatus } from '../utilities/constants';\nimport KemetTextarea from './textarea';\nimport { stylesBase } from '../styles/elements/password';\nimport './icon-bootstrap';\n\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-status-change - Fires when there's a change in status.\n *\n * @csspart status - The status message.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\ninterface InterfaceOptions {\n  pattern: string;\n  message: string;\n  meetsCriteria?: boolean;\n}\n\nexport interface InterfacePasswordStatusChangeDetails {\n  status: TypeStatus;\n  meetsPasswordCriteria: boolean;\n  element: KemetPassword;\n}\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Array })\n  rules: InterfaceOptions[] = [\n    { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n    { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n    { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  show: boolean;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  message: string = 'Please make sure you meet all the requirements.';\n\n  @property({ type: String })\n  strength: string;\n\n  @property({ type: String })\n  icon: string = 'check2';\n\n  @property({ type: Number })\n  iconSize: number = 18;\n\n  @state()\n  status: TypeStatus;\n\n  @state()\n  field: KemetField;\n\n  @state()\n  input: KemetInput | KemetTextarea;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.input = this.field.querySelector('[slot=\"input\"]');\n\n    // events listeners\n    this.input.addEventListener('kemet-input', this.handleInput.bind(this));\n  }\n\n  render() {\n    return html`\n      <div role=\"alert\" aria-live=\"assertive\">\n        <div class=\"status status--${this.strength}\" part=\"status\">\n          <span>${this.strength}</span>\n          <ul class=\"indicator\" part=\"indicator\">\n            <li></li>\n            <li></li>\n            <li></li>\n          </ul>\n        </div>\n        <p class=\"message\" part=\"message\">${this.message}</p>\n        <ul class=\"rules\" part=\"rules\">\n          ${this.makeRules()}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the list of rules\n   * @private\n   * @returns {TemplateResult<1>[]} the criteria rules\n   */\n  makeRules(): TemplateResult<1>[] {\n    if (this.input) {\n      return this.rules.map((rule, index) => {\n        const regExp = new RegExp(rule.pattern);\n        const meetsCriteria = regExp.test(this.input.value);\n        this.rules[index].meetsCriteria = meetsCriteria;\n        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n      });\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes the check icon if the criteria has been met\n   * @param {boolean} meetsCriteria\n   * @private\n   * @returns {TemplateResult} an icon component\n   */\n  makeCheckIcon(meetsCriteria: boolean): TemplateResult {\n    if (meetsCriteria) {\n      return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.iconSize}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles the kemet-input-input event\n   * @param {*} event\n   * @private\n   */\n  handleInput(event: CustomEvent) {\n    this.value = event.detail.value;\n    this.setStrength();\n    this.visibility();\n  }\n\n  /**\n   * Determines the strength of the password\n   * @private\n   */\n  setStrength() {\n    // We use a setTimeout here because makeRules adds the meetsCriteria\n    // property to the rules. We need that to be set by render() before\n    // setting the Strength because the percentage calc is based on it\n    setTimeout(() => {\n      const totalRules = this.rules.length;\n      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;\n\n      if (metRulesPercentage <= 0.33) {\n        this.strength = 'weak';\n        this.status = EnumStatuses.Error;\n      }\n\n      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n        this.strength = 'better';\n        this.status = EnumStatuses.Error;\n      }\n\n      if (metRulesPercentage > 0.67) {\n        this.strength = 'strong';\n        this.status = EnumStatuses.Success;\n      }\n\n      emitEvent(this, 'kemet-status-change', {\n        status: this.status,\n        meetsPasswordCriteria: this.status === EnumStatuses.Success,\n        element: this,\n      });\n    }, 1);\n  }\n\n  /**\n   * Determines whether to show or hide the component\n   * @private\n   */\n  visibility() {\n    this.show = this.value.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-password': KemetPassword\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    color: inherit;\n    display: none;\n  }\n\n  :host([show]) {\n    display: block;\n  }\n\n  p {\n    margin: 1.6rem 0;\n  }\n\n  .status {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n    line-height: 1;\n    margin-top: 0.8rem;\n  }\n\n  .status > span {\n    text-transform: capitalize;\n  }\n\n  .status--weak,\n  .status--better {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  .status--strong {\n    color: rgb(var(--kemet-color-success));\n  }\n\n  .indicator {\n    display: flex;\n    gap: 0.4rem;\n    margin: 0;\n    list-style: none;\n  }\n\n  .indicator li {\n    width: 1.6rem;\n    height: 0.2rem;\n  }\n\n  .status--weak .indicator li:nth-child(1) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  .status--better .indicator li:nth-child(1),\n  .status--better .indicator li:nth-child(2) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  .status--strong .indicator li {\n    background-color: rgb(var(--kemet-color-success));\n  }\n\n  .rules {\n    color: rgb(var(--kemet-color-foreground));\n    line-height: 1.5;\n    list-style: none;\n    font-size: 90%;\n    padding-left: 2rem;\n  }\n\n  .rules li {\n    position: relative;\n  }\n\n  .rules kemet-icon-bootstrap {\n    color: rgb(var(--kemet-color-success));\n    position: absolute;\n    left: -2rem;\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/chunk-BJ5CZRKZ.mjs

@@ -0,0 +1,90 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/icon-lucide.ts
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { query } from "lit/decorators/query.js";
+import { repeat } from "lit/directives/repeat.js";
+
+// src/styles/elements/icon-lucide.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    display: inline-flex;
+  }
+`;
+
+// src/elements/icon-lucide.ts
+var KemetIconLucide = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "code";
+    this.version = "latest";
+    this.size = 24;
+  }
+  render() {
+    return repeat([this.icon], (i) => i, (i) => html`<i data-lucide=${i}></i>`);
+  }
+  async firstUpdated() {
+    await this._initLucide();
+    window.lucide?.createIcons({ root: this.renderRoot });
+  }
+  willUpdate(changed) {
+    if (changed.has("icon") && this.svg) {
+      this.svg.remove();
+    }
+  }
+  updated(changed) {
+    if (changed.has("icon")) {
+      window.lucide?.createIcons({ root: this.renderRoot });
+    }
+    setTimeout(() => {
+      const svg = this.shadowRoot.querySelector("svg");
+      if (svg) {
+        svg.style.width = `${this.size.toString()}px`;
+        svg.style.height = `${this.size.toString()}px`;
+      }
+    }, 500);
+  }
+  _initLucide() {
+    if (window.lucide) return Promise.resolve();
+    const existing = Array.from(document.scripts).find((s) => s.src.includes("unpkg.com/lucide@"));
+    if (existing) {
+      return new Promise((resolve) => {
+        if (window.lucide) return resolve();
+        existing.addEventListener("load", () => resolve(), { once: true });
+      });
+    }
+    return new Promise((resolve, reject) => {
+      const s = document.createElement("script");
+      s.src = `https://unpkg.com/lucide@${this.version}`;
+      s.async = true;
+      s.onload = () => resolve();
+      s.onerror = () => reject(new Error("Failed to load Lucide"));
+      document.head.appendChild(s);
+    });
+  }
+};
+KemetIconLucide.styles = [stylesBase];
+__decorateClass([
+  property()
+], KemetIconLucide.prototype, "icon", 2);
+__decorateClass([
+  property()
+], KemetIconLucide.prototype, "version", 2);
+__decorateClass([
+  property()
+], KemetIconLucide.prototype, "size", 2);
+__decorateClass([
+  query("svg[data-lucide]")
+], KemetIconLucide.prototype, "svg", 2);
+KemetIconLucide = __decorateClass([
+  customElement("kemet-icon-lucide")
+], KemetIconLucide);
+
+export {
+  KemetIconLucide
+};
+//# sourceMappingURL=chunk-BJ5CZRKZ.mjs.map

package/dist/chunk-BJ5CZRKZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/icon-lucide.ts","../src/styles/elements/icon-lucide.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { query } from 'lit/decorators/query.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { stylesBase } from '../styles/elements/icon-lucide';\n\n/**\n * @since 4.0.0\n * @status stable\n *\n * @tagname kemet-icon-lucide\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n *\n * @prop {string} icon - The name of the icon to display\n * @prop {string} version - The version of Lucide to use\n * @prop {number} size - The size of the icon\n *\n */\n\n@customElement('kemet-icon-lucide')\nexport default class KemetIconLucide extends LitElement {\n  static styles = [stylesBase];\n\n  @property() icon: string = 'code';\n  @property() version: string = 'latest';\n  @property() size: number = 24;\n  @query('svg[data-lucide]') svg!: SVGElement | null;\n\n  render() {\n    // Use repeat() with icon as the key to force node replacement when it changes.\n    return repeat([this.icon], i => i, i => html`<i data-lucide=${i}></i>`);\n  }\n\n  async firstUpdated() {\n    await this._initLucide();\n    window.lucide?.createIcons({ root: this.renderRoot });\n  }\n\n  willUpdate(changed: Map<string, unknown>) {\n    // Runs BEFORE render. Remove any prior Lucide SVG so Lit won’t try to diff into it.\n    if (changed.has('icon') && this.svg) {\n      this.svg.remove();\n    }\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('icon')) {\n      window.lucide?.createIcons({ root: this.renderRoot })\n    }\n\n    // setTimeout is the only way to get the svg after lucide has created it\n    setTimeout(() => {\n      const svg = this.shadowRoot.querySelector('svg');\n      if (svg) {\n        svg.style.width = `${this.size.toString()}px`;\n        svg.style.height = `${this.size.toString()}px`;\n      }\n    }, 500);\n  }\n\n  private _initLucide(): Promise<void> {\n    if (window.lucide) return Promise.resolve();\n    const existing = Array.from(document.scripts).find(s => s.src.includes('unpkg.com/lucide@')) as HTMLScriptElement | undefined;\n    if (existing) {\n      return new Promise<void>(resolve => {\n        if (window.lucide) return resolve();\n        existing.addEventListener('load', () => resolve(), { once: true });\n      });\n    }\n    return new Promise<void>((resolve, reject) => {\n      const s = document.createElement('script');\n      s.src = `https://unpkg.com/lucide@${this.version}`;\n      s.async = true;\n      s.onload = () => resolve();\n      s.onerror = () => reject(new Error('Failed to load Lucide'));\n      document.head.appendChild(s);\n    });\n  }\n}\n","import { css } from \"lit\";\n\nexport const stylesBase = css`\n  :host {\n    display: inline-flex;\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,YAAY,YAAY;AACjC,SAAS,eAAe,gBAAgB;AACxC,SAAS,aAAa;AACtB,SAAS,cAAc;;;ACHvB,SAAS,WAAW;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;;;ADkB1B,IAAqB,kBAArB,cAA6C,WAAW;AAAA,EAAxD;AAAA;AAGc,gBAAe;AACf,mBAAkB;AAClB,gBAAe;AAAA;AAAA,EAG3B,SAAS;AAEP,WAAO,OAAO,CAAC,KAAK,IAAI,GAAG,OAAK,GAAG,OAAK,sBAAsB,CAAC,OAAO;AAAA,EACxE;AAAA,EAEA,MAAM,eAAe;AACnB,UAAM,KAAK,YAAY;AACvB,WAAO,QAAQ,YAAY,EAAE,MAAM,KAAK,WAAW,CAAC;AAAA,EACtD;AAAA,EAEA,WAAW,SAA+B;AAExC,QAAI,QAAQ,IAAI,MAAM,KAAK,KAAK,KAAK;AACnC,WAAK,IAAI,OAAO;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,QAAQ,SAA+B;AACrC,QAAI,QAAQ,IAAI,MAAM,GAAG;AACvB,aAAO,QAAQ,YAAY,EAAE,MAAM,KAAK,WAAW,CAAC;AAAA,IACtD;AAGA,eAAW,MAAM;AACf,YAAM,MAAM,KAAK,WAAW,cAAc,KAAK;AAC/C,UAAI,KAAK;AACP,YAAI,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC;AACzC,YAAI,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;AAAA,MAC5C;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAAA,EAEQ,cAA6B;AACnC,QAAI,OAAO,OAAQ,QAAO,QAAQ,QAAQ;AAC1C,UAAM,WAAW,MAAM,KAAK,SAAS,OAAO,EAAE,KAAK,OAAK,EAAE,IAAI,SAAS,mBAAmB,CAAC;AAC3F,QAAI,UAAU;AACZ,aAAO,IAAI,QAAc,aAAW;AAClC,YAAI,OAAO,OAAQ,QAAO,QAAQ;AAClC,iBAAS,iBAAiB,QAAQ,MAAM,QAAQ,GAAG,EAAE,MAAM,KAAK,CAAC;AAAA,MACnE,CAAC;AAAA,IACH;AACA,WAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AAC5C,YAAM,IAAI,SAAS,cAAc,QAAQ;AACzC,QAAE,MAAM,4BAA4B,KAAK,OAAO;AAChD,QAAE,QAAQ;AACV,QAAE,SAAS,MAAM,QAAQ;AACzB,QAAE,UAAU,MAAM,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAC3D,eAAS,KAAK,YAAY,CAAC;AAAA,IAC7B,CAAC;AAAA,EACH;AACF;AA1DqB,gBACZ,SAAS,CAAC,UAAU;AAEf;AAAA,EAAX,SAAS;AAAA,GAHS,gBAGP;AACA;AAAA,EAAX,SAAS;AAAA,GAJS,gBAIP;AACA;AAAA,EAAX,SAAS;AAAA,GALS,gBAKP;AACe;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GANN,gBAMQ;AANR,kBAArB;AAAA,EADC,cAAc,mBAAmB;AAAA,GACb;","names":[]}

package/dist/chunk-CIZYNSL7.mjs

@@ -0,0 +1,39 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/modal-close.ts
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+var KemetModalClose = class extends LitElement {
+  render() {
+    return html`
+      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>
+    `;
+  }
+  close() {
+    emitEvent(this, "kemet-closed-pressed", this);
+  }
+};
+KemetModalClose.styles = [
+  css`
+      :host {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        border-radius: var(--kemet-border-radius-circle);
+        cursor: pointer;
+      }
+    `
+];
+KemetModalClose = __decorateClass([
+  customElement("kemet-modal-close")
+], KemetModalClose);
+
+export {
+  KemetModalClose
+};
+//# sourceMappingURL=chunk-CIZYNSL7.mjs.map

package/dist/chunk-CIZYNSL7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/modal-close.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-closed-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-closed-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,KAAK,MAAM,kBAAkB;AACtC,SAAS,qBAAqB;AAe9B,IAAqB,kBAArB,cAA6C,WAAW;AAAA,EAatD,SAAS;AACP,WAAO;AAAA,qBACU,MAAM,KAAK,MAAM,CAAC,WAAW,MAAM,KAAK,MAAM,CAAC;AAAA;AAAA,EAElE;AAAA,EAEA,QAAQ;AACN,cAAU,MAAM,wBAAwB,IAAI;AAAA,EAC9C;AACF;AAtBqB,gBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASF;AAXmB,kBAArB;AAAA,EADC,cAAc,mBAAmB;AAAA,GACb;","names":[]}

package/dist/chunk-CK7STPSD.mjs

@@ -0,0 +1,18 @@
+// src/styles/elements/timer.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    display: block;
+  }
+`;
+var stylesDisplay = css`
+  :host {
+    display: inline-block;
+  }
+`;
+
+export {
+  stylesBase,
+  stylesDisplay
+};
+//# sourceMappingURL=chunk-CK7STPSD.mjs.map

package/dist/chunk-CK7STPSD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/elements/timer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesDisplay = css`\n  :host {\n    display: inline-block;\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAMnB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;","names":[]}