kemet-ui 4.0.2 → 4.1.0

package/dist/elements/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/otp-input.ts","../../src/styles/elements/otp-input.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n customElement, property, queryAll, state\n} from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/otp-input';\nimport { EnumKeyCodes } from '../utilities/constants';\nimport { emitEvent } from '../utilities/events';\n\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-otp-input\n * @summary An input element that accepts multiple items from a combo.\n *\n * @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n *\n * @csspart input - The input elements.\n *\n * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n *\n * @event kemet-completed - Fires when otp is filled out completely\n *\n */\n\n@customElement('kemet-otp-input')\nexport default class KemetOtpInput extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Number })\n  digits: number = 6;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property()\n  pattern: string;\n\n  @state()\n  autoFocus: boolean = true;\n\n  @state()\n  values: string[] = [];\n\n  @state()\n  lastInput: string;\n\n  @state()\n  completed: boolean = false;\n\n  @queryAll('input')\n  inputElements: NodeListOf<HTMLInputElement>;\n\n  updated() {\n    this.determineCompleted();\n  }\n\n  render() {\n    return this.makeInputs();\n  }\n\n  determineCompleted() {\n    const hasBlankValues = this.values.includes('');\n    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n      emitEvent(this, 'kemet-completed', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      });\n      this.completed = true;\n    }\n  }\n\n  makeInputs() {\n    return Array.from(\n      { length: this.digits },\n      (_, index) => html`\n        <label>\n          <span>Enter digit ${index + 1}</span>\n          <input\n            part=\"input\"\n            id=\"${index}\"\n            maxlength=\"1\"\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @paste=${this.handlePaste}\n          />\n        </label>\n      `\n    );\n  }\n\n  eatCharacters(inputValue: string) {\n    const regex = new RegExp(this.pattern);\n    return inputValue.replace(regex, '');\n  }\n\n  handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const currentIndex = parseInt(input.getAttribute('id'));\n    const nextInput = this.inputElements[currentIndex + 1];\n\n    if (this.pattern) {\n      input.value = this.eatCharacters(input.value);\n    }\n\n    this.values[currentIndex] = input.value;\n    this.value = this.values.join('');\n    this.lastInput = input.value;\n\n    const fullDigits = this.values.length === this.digits && !!input.value;\n\n    if (!fullDigits) {\n      this.completed = false;\n    }\n\n    if (nextInput && this.autoFocus && !!input.value) {\n      nextInput.focus();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n    const pasteData = event.clipboardData?.getData('text') ?? '';\n\n    // Trim and limit to number of digits\n    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n    const charactersArray = charactersString.split('');\n\n    // Fill the inputs and values array one by one\n    charactersArray.forEach((character, index) => {\n      const input = this.inputElements[index];\n      if (input && !!character) {\n        input.value = character;\n        this.values[index] = character;\n      }\n    });\n\n    const lastFilled = this.inputElements[charactersArray.length - 1];\n    lastFilled?.focus();\n    this.value = this.values.join('');\n    this.determineCompleted();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-otp-input': KemetOtpInput\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-otp-input-color: rgb(var(--kemet-color-gray-600));\n    --kemet-otp-input-min-width: 3rem;\n    --kemet-otp-input-font-size: 2rem;\n    --kemet-otp-input-border: 1px solid rgb(var(--kemet-color-gray-300));\n    --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n    display: grid;\n    gap: var(--kemet-spacer-md);\n    grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n  }\n\n  label {\n    display: flex;\n    aspect-ratio: 4/3;\n  }\n\n  span {\n    position: absolute;\n    margin: -1px;\n    width: 1px;\n    height: 1px;\n    display: block;\n    overflow: hidden;\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n  }\n\n  [part=\"input\"] {\n    color: var(--kemet-otp-input-color);\n    text-align: center;\n    width: 100%;\n    height: 100%;\n    font-size: var(--kemet-otp-input-font-size);\n    border: var(--kemet-otp-input-border);\n    border-radius: var(--kemet-otp-input-border-radius);\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":"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","names":["import_lit"]}

package/dist/elements/otp-input.mjs

@@ -0,0 +1,180 @@
+import {
+  emitEvent
+} from "../chunk-LHEY3UOF.mjs";
+import "../chunk-42U43NKG.mjs";
+import {
+  __decorateClass
+} from "../chunk-SAWN7RJP.mjs";
+
+// src/elements/otp-input.ts
+import { html, LitElement } from "lit";
+import {
+  customElement,
+  property,
+  queryAll,
+  state
+} from "lit/decorators.js";
+
+// src/styles/elements/otp-input.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    --kemet-otp-input-color: rgb(var(--kemet-color-gray-600));
+    --kemet-otp-input-min-width: 3rem;
+    --kemet-otp-input-font-size: 2rem;
+    --kemet-otp-input-border: 1px solid rgb(var(--kemet-color-gray-300));
+    --kemet-otp-input-border-radius: var(--kemet-border-radius-md);
+
+    display: grid;
+    gap: var(--kemet-spacer-md);
+    grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));
+  }
+
+  label {
+    display: flex;
+    aspect-ratio: 4/3;
+  }
+
+  span {
+    position: absolute;
+    margin: -1px;
+    width: 1px;
+    height: 1px;
+    display: block;
+    overflow: hidden;
+    border-width: 0;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  [part="input"] {
+    color: var(--kemet-otp-input-color);
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--kemet-otp-input-font-size);
+    border: var(--kemet-otp-input-border);
+    border-radius: var(--kemet-otp-input-border-radius);
+  }
+`;
+
+// src/elements/otp-input.ts
+var KemetOtpInput = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.digits = 6;
+    this.value = "";
+    this.autoFocus = true;
+    this.values = [];
+    this.completed = false;
+  }
+  updated() {
+    this.determineCompleted();
+  }
+  render() {
+    return this.makeInputs();
+  }
+  determineCompleted() {
+    const hasBlankValues = this.values.includes("");
+    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {
+      emitEvent(this, "kemet-completed", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      });
+      this.completed = true;
+    }
+  }
+  makeInputs() {
+    return Array.from(
+      { length: this.digits },
+      (_, index) => html`
+        <label>
+          <span>Enter digit ${index + 1}</span>
+          <input
+            part="input"
+            id="${index}"
+            maxlength="1"
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+            @paste=${this.handlePaste}
+          />
+        </label>
+      `
+    );
+  }
+  eatCharacters(inputValue) {
+    const regex = new RegExp(this.pattern);
+    return inputValue.replace(regex, "");
+  }
+  handleInput(event) {
+    const input = event.target;
+    const currentIndex = parseInt(input.getAttribute("id"));
+    const nextInput = this.inputElements[currentIndex + 1];
+    if (this.pattern) {
+      input.value = this.eatCharacters(input.value);
+    }
+    this.values[currentIndex] = input.value;
+    this.value = this.values.join("");
+    this.lastInput = input.value;
+    const fullDigits = this.values.length === this.digits && !!input.value;
+    if (!fullDigits) {
+      this.completed = false;
+    }
+    if (nextInput && this.autoFocus && !!input.value) {
+      nextInput.focus();
+    }
+  }
+  handleKeyDown(event) {
+    this.autoFocus = event.key !== "Backspace" /* BACKSPACE */;
+  }
+  handlePaste(event) {
+    event.preventDefault();
+    const pasteData = event.clipboardData?.getData("text") ?? "";
+    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split("").join(""));
+    const charactersArray = charactersString.split("");
+    charactersArray.forEach((character, index) => {
+      const input = this.inputElements[index];
+      if (input && !!character) {
+        input.value = character;
+        this.values[index] = character;
+      }
+    });
+    const lastFilled = this.inputElements[charactersArray.length - 1];
+    lastFilled?.focus();
+    this.value = this.values.join("");
+    this.determineCompleted();
+  }
+};
+KemetOtpInput.styles = [stylesBase];
+__decorateClass([
+  property({ type: Number })
+], KemetOtpInput.prototype, "digits", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetOtpInput.prototype, "value", 2);
+__decorateClass([
+  property()
+], KemetOtpInput.prototype, "pattern", 2);
+__decorateClass([
+  state()
+], KemetOtpInput.prototype, "autoFocus", 2);
+__decorateClass([
+  state()
+], KemetOtpInput.prototype, "values", 2);
+__decorateClass([
+  state()
+], KemetOtpInput.prototype, "lastInput", 2);
+__decorateClass([
+  state()
+], KemetOtpInput.prototype, "completed", 2);
+__decorateClass([
+  queryAll("input")
+], KemetOtpInput.prototype, "inputElements", 2);
+KemetOtpInput = __decorateClass([
+  customElement("kemet-otp-input")
+], KemetOtpInput);
+export {
+  KemetOtpInput as default
+};
+//# sourceMappingURL=otp-input.mjs.map

package/dist/elements/otp-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/otp-input.ts","../../src/styles/elements/otp-input.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n customElement, property, queryAll, state\n} from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/otp-input';\nimport { EnumKeyCodes } from '../utilities/constants';\nimport { emitEvent } from '../utilities/events';\n\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-otp-input\n * @summary An input element that accepts multiple items from a combo.\n *\n * @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n *\n * @csspart input - The input elements.\n *\n * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n *\n * @event kemet-completed - Fires when otp is filled out completely\n *\n */\n\n@customElement('kemet-otp-input')\nexport default class KemetOtpInput extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Number })\n  digits: number = 6;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property()\n  pattern: string;\n\n  @state()\n  autoFocus: boolean = true;\n\n  @state()\n  values: string[] = [];\n\n  @state()\n  lastInput: string;\n\n  @state()\n  completed: boolean = false;\n\n  @queryAll('input')\n  inputElements: NodeListOf<HTMLInputElement>;\n\n  updated() {\n    this.determineCompleted();\n  }\n\n  render() {\n    return this.makeInputs();\n  }\n\n  determineCompleted() {\n    const hasBlankValues = this.values.includes('');\n    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n      emitEvent(this, 'kemet-completed', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      });\n      this.completed = true;\n    }\n  }\n\n  makeInputs() {\n    return Array.from(\n      { length: this.digits },\n      (_, index) => html`\n        <label>\n          <span>Enter digit ${index + 1}</span>\n          <input\n            part=\"input\"\n            id=\"${index}\"\n            maxlength=\"1\"\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @paste=${this.handlePaste}\n          />\n        </label>\n      `\n    );\n  }\n\n  eatCharacters(inputValue: string) {\n    const regex = new RegExp(this.pattern);\n    return inputValue.replace(regex, '');\n  }\n\n  handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const currentIndex = parseInt(input.getAttribute('id'));\n    const nextInput = this.inputElements[currentIndex + 1];\n\n    if (this.pattern) {\n      input.value = this.eatCharacters(input.value);\n    }\n\n    this.values[currentIndex] = input.value;\n    this.value = this.values.join('');\n    this.lastInput = input.value;\n\n    const fullDigits = this.values.length === this.digits && !!input.value;\n\n    if (!fullDigits) {\n      this.completed = false;\n    }\n\n    if (nextInput && this.autoFocus && !!input.value) {\n      nextInput.focus();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n    const pasteData = event.clipboardData?.getData('text') ?? '';\n\n    // Trim and limit to number of digits\n    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n    const charactersArray = charactersString.split('');\n\n    // Fill the inputs and values array one by one\n    charactersArray.forEach((character, index) => {\n      const input = this.inputElements[index];\n      if (input && !!character) {\n        input.value = character;\n        this.values[index] = character;\n      }\n    });\n\n    const lastFilled = this.inputElements[charactersArray.length - 1];\n    lastFilled?.focus();\n    this.value = this.values.join('');\n    this.determineCompleted();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-otp-input': KemetOtpInput\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-otp-input-color: rgb(var(--kemet-color-gray-600));\n    --kemet-otp-input-min-width: 3rem;\n    --kemet-otp-input-font-size: 2rem;\n    --kemet-otp-input-border: 1px solid rgb(var(--kemet-color-gray-300));\n    --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n    display: grid;\n    gap: var(--kemet-spacer-md);\n    grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n  }\n\n  label {\n    display: flex;\n    aspect-ratio: 4/3;\n  }\n\n  span {\n    position: absolute;\n    margin: -1px;\n    width: 1px;\n    height: 1px;\n    display: block;\n    overflow: hidden;\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n  }\n\n  [part=\"input\"] {\n    color: var(--kemet-otp-input-color);\n    text-align: center;\n    width: 100%;\n    height: 100%;\n    font-size: var(--kemet-otp-input-font-size);\n    border: var(--kemet-otp-input-border);\n    border-radius: var(--kemet-otp-input-border-radius);\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/typewriter.d.mts

@@ -0,0 +1,41 @@
+import * as lit_html from 'lit-html';
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * @since 4.1.0
+ * @status stable
+ *
+ * @tagname kemet-typewriter
+ * @summary An element that types out content.
+ *
+ * @prop {string} content - The content to be typed.
+ * @prop {number} delay - The delay between each character.
+ * @prop {string} cursor - The cursor to be displayed.
+ * @prop {boolean} loop - Whether to loop the content.
+ * @prop {number} restartDelay - The delay before restarting the typewriter.
+ *
+ * @event kemet-completed - Fires when typewriter is completed
+ *
+ */
+declare class KemetTypewriter extends LitElement {
+    content: string;
+    delay: number;
+    cursor: string;
+    loop: boolean;
+    restartDelay: number;
+    private typewriter;
+    private timeoutId;
+    createRenderRoot(): this;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    render(): lit_html.TemplateResult<1>;
+    restartTypewriter(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-typewriter': KemetTypewriter;
+    }
+}
+
+export { KemetTypewriter as default };

package/dist/elements/typewriter.d.ts

@@ -0,0 +1,41 @@
+import * as lit_html from 'lit-html';
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * @since 4.1.0
+ * @status stable
+ *
+ * @tagname kemet-typewriter
+ * @summary An element that types out content.
+ *
+ * @prop {string} content - The content to be typed.
+ * @prop {number} delay - The delay between each character.
+ * @prop {string} cursor - The cursor to be displayed.
+ * @prop {boolean} loop - Whether to loop the content.
+ * @prop {number} restartDelay - The delay before restarting the typewriter.
+ *
+ * @event kemet-completed - Fires when typewriter is completed
+ *
+ */
+declare class KemetTypewriter extends LitElement {
+    content: string;
+    delay: number;
+    cursor: string;
+    loop: boolean;
+    restartDelay: number;
+    private typewriter;
+    private timeoutId;
+    createRenderRoot(): this;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    render(): lit_html.TemplateResult<1>;
+    restartTypewriter(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-typewriter': KemetTypewriter;
+    }
+}
+
+export { KemetTypewriter as default };

package/dist/elements/typewriter.js

@@ -0,0 +1,136 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+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/typewriter.ts
+var typewriter_exports = {};
+__export(typewriter_exports, {
+  default: () => KemetTypewriter
+});
+module.exports = __toCommonJS(typewriter_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+var import_core = __toESM(require("typewriter-effect/dist/core"));
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/typewriter.ts
+var KemetTypewriter = class extends import_lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.content = "";
+    this.delay = 10;
+    this.cursor = "";
+    this.loop = false;
+    this.restartDelay = 1e3;
+    this.timeoutId = null;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  firstUpdated() {
+    const target = this.querySelector("kemet-typewriter-target");
+    this.typewriter = new import_core.default(target, {
+      cursor: this.cursor,
+      loop: this.loop,
+      delay: this.delay
+    });
+    this.restartTypewriter();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("content") || changedProperties.has("delay") || changedProperties.has("cursor") || changedProperties.has("loop")) {
+      const target = this.querySelector("kemet-typewriter-target");
+      if (this.typewriter) {
+        this.typewriter.stop();
+      }
+      this.typewriter = new import_core.default(target, {
+        cursor: this.cursor,
+        loop: this.loop,
+        delay: this.delay
+      });
+      this.restartTypewriter();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    if (this.typewriter) {
+      this.typewriter.stop();
+    }
+  }
+  render() {
+    return import_lit.html`
+      <kemet-typewriter-target></kemet-typewriter-target>
+    `;
+  }
+  restartTypewriter() {
+    if (!this.typewriter) return;
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+    this.timeoutId = setTimeout(() => {
+      this.typewriter.deleteAll(1).typeString(this.content).callFunction(() => {
+        emitEvent(this, "kemet-completed", { element: this });
+      }).start();
+    }, this.restartDelay);
+  }
+};
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTypewriter.prototype, "content", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetTypewriter.prototype, "delay", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTypewriter.prototype, "cursor", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetTypewriter.prototype, "loop", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number, attribute: "restart-delay" })
+], KemetTypewriter.prototype, "restartDelay", 2);
+KemetTypewriter = __decorateClass([
+  (0, import_decorators.customElement)("kemet-typewriter")
+], KemetTypewriter);
+//# sourceMappingURL=typewriter.js.map

package/dist/elements/typewriter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/typewriter.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport Typewriter from 'typewriter-effect/dist/core';\nimport { emitEvent } from '../utilities/events';\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-typewriter\n * @summary An element that types out content.\n *\n * @prop {string} content - The content to be typed.\n * @prop {number} delay - The delay between each character.\n * @prop {string} cursor - The cursor to be displayed.\n * @prop {boolean} loop - Whether to loop the content.\n * @prop {number} restartDelay - The delay before restarting the typewriter.\n *\n * @event kemet-completed - Fires when typewriter is completed\n *\n */\n\n@customElement('kemet-typewriter')\nexport default class KemetTypewriter extends LitElement {\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Number })\n  delay: number = 10;\n\n  @property({ type: String })\n  cursor: string = '';\n\n  @property({ type: Boolean })\n  loop: boolean = false;\n\n  @property({ type: Number, attribute: 'restart-delay' })\n  restartDelay: number = 1000;\n\n  private typewriter!: Typewriter;\n  private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  firstUpdated() {\n    const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n    this.typewriter = new Typewriter(target, {\n      cursor: this.cursor,\n      loop: this.loop,\n      delay: this.delay,\n    });\n\n    this.restartTypewriter();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('content') ||\n      changedProperties.has('delay') ||\n      changedProperties.has('cursor') ||\n      changedProperties.has('loop')\n    ) {\n      const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n      if (this.typewriter) {\n        this.typewriter.stop();\n      }\n\n      this.typewriter = new Typewriter(target, {\n        cursor: this.cursor,\n        loop: this.loop,\n        delay: this.delay,\n      });\n\n      this.restartTypewriter();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n      this.timeoutId = null;\n    }\n\n    if (this.typewriter) {\n      this.typewriter.stop();\n    }\n  }\n\n  render() {\n    return html`\n      <kemet-typewriter-target></kemet-typewriter-target>\n    `;\n  }\n\n  restartTypewriter() {\n    if (!this.typewriter) return;\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n    }\n\n    this.timeoutId = setTimeout(() => {\n      this.typewriter\n        .deleteAll(1)\n        .typeString(this.content)\n        .callFunction(() => {\n          emitEvent(this, 'kemet-completed', { element: this });\n        })\n        .start();\n    }, this.restartDelay);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-typewriter': KemetTypewriter;\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,iBAAiD;AACjD,wBAAwC;AACxC,kBAAuB;;;ACFhB,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;;;ADmBA,IAAqB,kBAArB,cAA6C,sBAAW;AAAA,EAAxD;AAAA;AAEE,mBAAkB;AAGlB,iBAAgB;AAGhB,kBAAiB;AAGjB,gBAAgB;AAGhB,wBAAuB;AAGvB,SAAQ,YAAkD;AAAA;AAAA,EAE1D,mBAAmB;AACjB,WAAO;AAAA,EACT;AAAA,EAEA,eAAe;AACb,UAAM,SAAS,KAAK,cAAc,yBAAyB;AAE3D,SAAK,aAAa,IAAI,YAAAA,QAAW,QAAQ;AAAA,MACvC,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,IACd,CAAC;AAED,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,QAAQ,mBAAyC;AAC/C,QACE,kBAAkB,IAAI,SAAS,KAC/B,kBAAkB,IAAI,OAAO,KAC7B,kBAAkB,IAAI,QAAQ,KAC9B,kBAAkB,IAAI,MAAM,GAC5B;AACA,YAAM,SAAS,KAAK,cAAc,yBAAyB;AAE3D,UAAI,KAAK,YAAY;AACnB,aAAK,WAAW,KAAK;AAAA,MACvB;AAEA,WAAK,aAAa,IAAI,YAAAA,QAAW,QAAQ;AAAA,QACvC,QAAQ,KAAK;AAAA,QACb,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,MACd,CAAC;AAED,WAAK,kBAAkB;AAAA,IACzB;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAE3B,QAAI,KAAK,WAAW;AAClB,mBAAa,KAAK,SAAS;AAC3B,WAAK,YAAY;AAAA,IACnB;AAEA,QAAI,KAAK,YAAY;AACnB,WAAK,WAAW,KAAK;AAAA,IACvB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,oBAAoB;AAClB,QAAI,CAAC,KAAK,WAAY;AAEtB,QAAI,KAAK,WAAW;AAClB,mBAAa,KAAK,SAAS;AAAA,IAC7B;AAEA,SAAK,YAAY,WAAW,MAAM;AAChC,WAAK,WACF,UAAU,CAAC,EACX,WAAW,KAAK,OAAO,EACvB,aAAa,MAAM;AAClB,kBAAU,MAAM,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAAA,MACtD,CAAC,EACA,MAAM;AAAA,IACX,GAAG,KAAK,YAAY;AAAA,EACtB;AACF;AA5FE;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADP,gBAEnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJP,gBAKnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPP,gBAQnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,gBAWnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAbnC,gBAcnB;AAdmB,kBAArB;AAAA,MADC,iCAAc,kBAAkB;AAAA,GACZ;","names":["Typewriter"]}

package/dist/elements/typewriter.mjs

@@ -0,0 +1,96 @@
+import {
+  emitEvent
+} from "../chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "../chunk-SAWN7RJP.mjs";
+
+// src/elements/typewriter.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Typewriter from "typewriter-effect/dist/core";
+var KemetTypewriter = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.content = "";
+    this.delay = 10;
+    this.cursor = "";
+    this.loop = false;
+    this.restartDelay = 1e3;
+    this.timeoutId = null;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  firstUpdated() {
+    const target = this.querySelector("kemet-typewriter-target");
+    this.typewriter = new Typewriter(target, {
+      cursor: this.cursor,
+      loop: this.loop,
+      delay: this.delay
+    });
+    this.restartTypewriter();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("content") || changedProperties.has("delay") || changedProperties.has("cursor") || changedProperties.has("loop")) {
+      const target = this.querySelector("kemet-typewriter-target");
+      if (this.typewriter) {
+        this.typewriter.stop();
+      }
+      this.typewriter = new Typewriter(target, {
+        cursor: this.cursor,
+        loop: this.loop,
+        delay: this.delay
+      });
+      this.restartTypewriter();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    if (this.typewriter) {
+      this.typewriter.stop();
+    }
+  }
+  render() {
+    return html`
+      <kemet-typewriter-target></kemet-typewriter-target>
+    `;
+  }
+  restartTypewriter() {
+    if (!this.typewriter) return;
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+    this.timeoutId = setTimeout(() => {
+      this.typewriter.deleteAll(1).typeString(this.content).callFunction(() => {
+        emitEvent(this, "kemet-completed", { element: this });
+      }).start();
+    }, this.restartDelay);
+  }
+};
+__decorateClass([
+  property({ type: String })
+], KemetTypewriter.prototype, "content", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTypewriter.prototype, "delay", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTypewriter.prototype, "cursor", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetTypewriter.prototype, "loop", 2);
+__decorateClass([
+  property({ type: Number, attribute: "restart-delay" })
+], KemetTypewriter.prototype, "restartDelay", 2);
+KemetTypewriter = __decorateClass([
+  customElement("kemet-typewriter")
+], KemetTypewriter);
+export {
+  KemetTypewriter as default
+};
+//# sourceMappingURL=typewriter.mjs.map

package/dist/elements/typewriter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/typewriter.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport Typewriter from 'typewriter-effect/dist/core';\nimport { emitEvent } from '../utilities/events';\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-typewriter\n * @summary An element that types out content.\n *\n * @prop {string} content - The content to be typed.\n * @prop {number} delay - The delay between each character.\n * @prop {string} cursor - The cursor to be displayed.\n * @prop {boolean} loop - Whether to loop the content.\n * @prop {number} restartDelay - The delay before restarting the typewriter.\n *\n * @event kemet-completed - Fires when typewriter is completed\n *\n */\n\n@customElement('kemet-typewriter')\nexport default class KemetTypewriter extends LitElement {\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Number })\n  delay: number = 10;\n\n  @property({ type: String })\n  cursor: string = '';\n\n  @property({ type: Boolean })\n  loop: boolean = false;\n\n  @property({ type: Number, attribute: 'restart-delay' })\n  restartDelay: number = 1000;\n\n  private typewriter!: Typewriter;\n  private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  firstUpdated() {\n    const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n    this.typewriter = new Typewriter(target, {\n      cursor: this.cursor,\n      loop: this.loop,\n      delay: this.delay,\n    });\n\n    this.restartTypewriter();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('content') ||\n      changedProperties.has('delay') ||\n      changedProperties.has('cursor') ||\n      changedProperties.has('loop')\n    ) {\n      const target = this.querySelector('kemet-typewriter-target') as HTMLElement;\n\n      if (this.typewriter) {\n        this.typewriter.stop();\n      }\n\n      this.typewriter = new Typewriter(target, {\n        cursor: this.cursor,\n        loop: this.loop,\n        delay: this.delay,\n      });\n\n      this.restartTypewriter();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n      this.timeoutId = null;\n    }\n\n    if (this.typewriter) {\n      this.typewriter.stop();\n    }\n  }\n\n  render() {\n    return html`\n      <kemet-typewriter-target></kemet-typewriter-target>\n    `;\n  }\n\n  restartTypewriter() {\n    if (!this.typewriter) return;\n\n    if (this.timeoutId) {\n      clearTimeout(this.timeoutId);\n    }\n\n    this.timeoutId = setTimeout(() => {\n      this.typewriter\n        .deleteAll(1)\n        .typeString(this.content)\n        .callFunction(() => {\n          emitEvent(this, 'kemet-completed', { element: this });\n        })\n        .start();\n    }, this.restartDelay);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-typewriter': KemetTypewriter;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkC;AACjD,SAAS,eAAe,gBAAgB;AACxC,OAAO,gBAAgB;AAqBvB,IAAqB,kBAArB,cAA6C,WAAW;AAAA,EAAxD;AAAA;AAEE,mBAAkB;AAGlB,iBAAgB;AAGhB,kBAAiB;AAGjB,gBAAgB;AAGhB,wBAAuB;AAGvB,SAAQ,YAAkD;AAAA;AAAA,EAE1D,mBAAmB;AACjB,WAAO;AAAA,EACT;AAAA,EAEA,eAAe;AACb,UAAM,SAAS,KAAK,cAAc,yBAAyB;AAE3D,SAAK,aAAa,IAAI,WAAW,QAAQ;AAAA,MACvC,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,IACd,CAAC;AAED,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,QAAQ,mBAAyC;AAC/C,QACE,kBAAkB,IAAI,SAAS,KAC/B,kBAAkB,IAAI,OAAO,KAC7B,kBAAkB,IAAI,QAAQ,KAC9B,kBAAkB,IAAI,MAAM,GAC5B;AACA,YAAM,SAAS,KAAK,cAAc,yBAAyB;AAE3D,UAAI,KAAK,YAAY;AACnB,aAAK,WAAW,KAAK;AAAA,MACvB;AAEA,WAAK,aAAa,IAAI,WAAW,QAAQ;AAAA,QACvC,QAAQ,KAAK;AAAA,QACb,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,MACd,CAAC;AAED,WAAK,kBAAkB;AAAA,IACzB;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAE3B,QAAI,KAAK,WAAW;AAClB,mBAAa,KAAK,SAAS;AAC3B,WAAK,YAAY;AAAA,IACnB;AAEA,QAAI,KAAK,YAAY;AACnB,WAAK,WAAW,KAAK;AAAA,IACvB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,oBAAoB;AAClB,QAAI,CAAC,KAAK,WAAY;AAEtB,QAAI,KAAK,WAAW;AAClB,mBAAa,KAAK,SAAS;AAAA,IAC7B;AAEA,SAAK,YAAY,WAAW,MAAM;AAChC,WAAK,WACF,UAAU,CAAC,EACX,WAAW,KAAK,OAAO,EACvB,aAAa,MAAM;AAClB,kBAAU,MAAM,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAAA,MACtD,CAAC,EACA,MAAM;AAAA,IACX,GAAG,KAAK,YAAY;AAAA,EACtB;AACF;AA5FE;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADP,gBAEnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJP,gBAKnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPP,gBAQnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,gBAWnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAbnC,gBAcnB;AAdmB,kBAArB;AAAA,EADC,cAAc,kBAAkB;AAAA,GACZ;","names":[]}

package/dist/styles/elements/otp-input.ts

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+
+export const stylesBase = css`
+  :host {
+    --kemet-otp-input-color: rgb(var(--kemet-color-gray-600));
+    --kemet-otp-input-min-width: 3rem;
+    --kemet-otp-input-font-size: 2rem;
+    --kemet-otp-input-border: 1px solid rgb(var(--kemet-color-gray-300));
+    --kemet-otp-input-border-radius: var(--kemet-border-radius-md);
+
+    display: grid;
+    gap: var(--kemet-spacer-md);
+    grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));
+  }
+
+  label {
+    display: flex;
+    aspect-ratio: 4/3;
+  }
+
+  span {
+    position: absolute;
+    margin: -1px;
+    width: 1px;
+    height: 1px;
+    display: block;
+    overflow: hidden;
+    border-width: 0;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  [part="input"] {
+    color: var(--kemet-otp-input-color);
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--kemet-otp-input-font-size);
+    border: var(--kemet-otp-input-border);
+    border-radius: var(--kemet-otp-input-border-radius);
+  }
+`;