kemet-ui 3.1.0 → 4.0.1

package/dist/chunk-4PCL2QJV.mjs

@@ -0,0 +1,205 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/combo.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/styles/elements/combo.ts
+import { css } from "lit";
+var stylesBase = 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 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 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) => 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([
+  property({ type: String })
+], KemetCombo.prototype, "slug", 2);
+__decorateClass([
+  property({ type: Array })
+], KemetCombo.prototype, "options", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCombo.prototype, "show", 2);
+__decorateClass([
+  state()
+], KemetCombo.prototype, "filteredOptions", 2);
+__decorateClass([
+  state()
+], KemetCombo.prototype, "field", 2);
+__decorateClass([
+  state()
+], KemetCombo.prototype, "input", 2);
+KemetCombo = __decorateClass([
+  customElement("kemet-combo")
+], KemetCombo);
+
+export {
+  KemetCombo
+};
+//# sourceMappingURL=chunk-4PCL2QJV.mjs.map

package/dist/chunk-4PCL2QJV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/combo.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","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":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;;;ACD/C,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;;;ADuC1B,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAOE,mBAAoB,CAAC;AAAA;AAAA,EAcrB,eAAe;AAEb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,QAAQ,KAAK,MAAM,cAAc,gBAAgB;AAGtD,SAAK,OAAO,KAAK,MAAM,QAAQ;AAG/B,SAAK,MAAM,iBAAiB,eAAe,KAAK,YAAY,KAAK,IAAI,CAAC;AACtE,SAAK,MAAM,iBAAiB,eAAe,KAAK,YAAY,KAAK,IAAI,CAAC;AACtE,SAAK,MAAM,iBAAiB,WAAW,WAAS,KAAK,mBAAmB,KAAK,CAAC;AAAA,EAChF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,wBAIa,KAAK,IAAI;AAAA,yBACR,KAAK,IAAI;AAAA;AAAA,cAEpB,KAAK,IAAI;AAAA,sBACD,KAAK,OAAO,KAAK;AAAA;AAAA,8CAEO,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,YACnE,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA,EAI5B;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,OAAO;AACd,WAAK,kBAAkB,KAAK,QAAQ;AAAA,QAClC,YAAU,OAAO,YAAY,EAAE,QAAQ,KAAK,MAAM,OAAO,YAAY,CAAC,MAAM;AAAA,MAC9E;AAEA,UAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,aAAK,OAAO;AACZ,eAAO;AAAA,MACT;AAEA,aAAO,KAAK,gBAAgB;AAAA,QAC1B,CAAC,QAAQ,UAAU;AAAA,kBACT,KAAK,IAAI,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,qBAItB,CAAC,UAAyB,KAAK,gBAAgB,KAAK,CAAC;AAAA,uBACnD,CAAC,UAAyB,KAAK,oBAAoB,KAAK,CAAC;AAAA;AAAA,cAElE,MAAM;AAAA;AAAA,MAEd;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,OAAoB;AAC9B,SAAK,YAAY;AACjB,SAAK,OAAO,MAAM,OAAO,MAAM,SAAS;AAAA,EAC1C;AAAA,EAEA,cAAc;AACZ,SAAK,YAAY;AACjB,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,gBAAgB,OAAsB;AACpC,UAAM,SAAS,MAAM;AACrB,SAAK,MAAM,QAAQ,OAAO;AAC1B,SAAK,OAAO;AAEZ,cAAU,MAAM,mBAAmB;AAAA,MACjC,SAAS;AAAA,MACT,MAAM,OAAO;AAAA,MACb,IAAI,OAAO,aAAa,IAAI;AAAA,IAC9B,CAAC;AAAA,EACH;AAAA,EAEA,oBAAoB,OAAsB;AACxC,UAAM,eAAe;AACrB,UAAM,SAAS,MAAM;AAErB,QAAI,MAAM,SAAS,aAAa;AAC9B,YAAM,OAAO,OAAO;AAEpB,UAAI,MAAM;AACR,aAAK,MAAM;AAAA,MACb,OAAO;AACL,aAAK,WAAW,cAAc,IAAI,EAAE,MAAM;AAAA,MAC5C;AAAA,IACF;AAEA,QAAI,MAAM,SAAS,WAAW;AAC5B,YAAM,WAAW,OAAO;AACxB,YAAM,YAAY,KAAK,WAAW,cAAc,eAAe;AAE/D,UAAI,UAAU;AACZ,iBAAS,MAAM;AAAA,MACjB,OAAO;AACL,kBAAU,MAAM;AAAA,MAClB;AAAA,IACF;AAEA,QAAI,MAAM,SAAS,YAAY,MAAM,SAAS,OAAO;AACnD,WAAK,OAAO;AACZ,WAAK,MAAM,MAAM;AAAA,IACnB;AAEA,QAAI,MAAM,SAAS,WAAW,MAAM,SAAS,SAAS;AACpD,WAAK,gBAAgB,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EAEA,mBAAmB,OAAsB;AACvC,QAAI,MAAM,SAAS,aAAa;AAC9B,WAAK,WAAW,cAAc,IAAI,EAAE,MAAM;AAAA,IAC5C;AAEA,QAAI,MAAM,SAAS,UAAU;AAC3B,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AACF;AAnJqB,WACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GANN,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATvB,WAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,WAanB;AAGA;AAAA,EADC,MAAM;AAAA,GAfY,WAgBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAlBY,WAmBnB;AAnBmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}

package/dist/chunk-5CL7F5XK.mjs

@@ -0,0 +1,68 @@
+import {
+  stylesDisplay
+} from "./chunk-CK7STPSD.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/timer-display.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetTimerDisplay = class extends LitElement {
+  constructor() {
+    super();
+    this.format = "seconds";
+    this.getTime();
+  }
+  render() {
+    return html`${this.displayTime}`;
+  }
+  getTime() {
+    this.closest("kemet-timer").addEventListener("kemet-increment", (event) => {
+      const secondsLeft = event.detail;
+      switch (this.format) {
+        case "seconds":
+          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+          break;
+        case "minutes":
+          this.displayTime = Math.floor(secondsLeft % 86400 % 3600 / 60).toString();
+          break;
+        case "hours":
+          this.displayTime = Math.floor(secondsLeft % 86400 / 3600).toString();
+          break;
+        case "days":
+          this.displayTime = Math.floor(secondsLeft / 86400).toString();
+          break;
+        default:
+          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+      }
+    });
+  }
+  getTimeInSeconds(time) {
+    switch (this.format) {
+      case "minutes":
+        return time * 60;
+      case "hours":
+        return time * 60 * 60;
+      case "days":
+        return time * 60 * 60 * 24;
+      default:
+        return time;
+    }
+  }
+};
+KemetTimerDisplay.styles = [stylesDisplay];
+__decorateClass([
+  property({ type: String })
+], KemetTimerDisplay.prototype, "format", 2);
+__decorateClass([
+  state()
+], KemetTimerDisplay.prototype, "displayTime", 2);
+KemetTimerDisplay = __decorateClass([
+  customElement("kemet-timer-display")
+], KemetTimerDisplay);
+
+export {
+  KemetTimerDisplay
+};
+//# sourceMappingURL=chunk-5CL7F5XK.mjs.map

package/dist/chunk-5CL7F5XK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/timer-display.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesDisplay } from '../styles/elements/timer';\nimport { TypeFormats } from './timer';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n *\n * @prop {TypeFormats} format - The format to display the remaining time in\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [stylesDisplay];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @state()\n  displayTime: string;\n\n  constructor() {\n    super();\n    this.getTime();\n  }\n\n  render() {\n    return html`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer').addEventListener('kemet-increment', (event: CustomEvent) => {\n      const secondsLeft = event.detail;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAe/C,IAAqB,oBAArB,cAA+C,WAAW;AAAA,EASxD,cAAc;AACZ,UAAM;AANR,kBAAsB;AAOpB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,WAAW;AAAA,EAChC;AAAA,EAEA,UAAU;AACR,SAAK,QAAQ,aAAa,EAAE,iBAAiB,mBAAmB,CAAC,UAAuB;AACtF,YAAM,cAAc,MAAM;AAC1B,cAAQ,KAAK,QAAQ;AAAA,QACnB,KAAK;AACH,eAAK,eAAe,cAAc,KAAK,KAAK,IAAI,cAAc,EAAE,KAAK,cAAc,IAAI,SAAS;AAChG;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAO,cAAc,QAAS,OAAO,EAAE,EAAE,SAAS;AAC1E;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAO,cAAc,QAAS,IAAI,EAAE,SAAS;AACrE;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAM,cAAc,KAAK,EAAE,SAAS;AAC5D;AAAA,QACF;AACE,eAAK,eAAe,cAAc,KAAK,KAAK,IAAI,cAAc,EAAE,KAAK,cAAc,IAAI,SAAS;AAAA,MACpG;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,iBAAiB,MAAM;AACrB,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAW,eAAO,OAAO;AAAA,MAC9B,KAAK;AAAS,eAAO,OAAO,KAAK;AAAA,MACjC,KAAK;AAAQ,eAAO,OAAO,KAAK,KAAK;AAAA,MACrC;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AACF;AAhDqB,kBACZ,SAAS,CAAC,aAAa;AAG9B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,kBAInB;AAGA;AAAA,EADC,MAAM;AAAA,GANY,kBAOnB;AAPmB,oBAArB;AAAA,EADC,cAAc,qBAAqB;AAAA,GACf;","names":[]}

package/dist/chunk-5LCSEF3N.mjs

@@ -0,0 +1,282 @@
+// src/styles/elements/tabs.ts
+import { css } from "lit";
+var stylesKemetTabs = css`
+  :host {
+    --kemet-tabs-ink-size: 6px;
+    --kemet-tabs-ink-radius: 6px;
+    --kemet-tabs-divider-size: 1px;
+    --kemet-tabs-spacer: 1rem;
+    --kemet-tabs-transition-speed: 0.5s;
+    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));
+    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  :host([placement='bottom']) {
+    flex-direction: column-reverse;
+  }
+
+  :host([placement='left']) {
+    flex-direction: row;
+  }
+
+  :host([placement='right']) {
+    flex-direction: row-reverse;
+  }
+
+  :host([placement='left']),
+  :host([placement='right']) {
+    overflow: unset;
+  }
+
+  /* panels */
+
+  [part='panels'] > div {
+    display: flex;
+  }
+
+  :host([panel-effect='slide']) [part='panels'] {
+    transition: transform var(--kemet-tabs-transition-speed) linear;
+  }
+
+  :host([panel-effect='fade']) [part='panels'] {
+    transform: none !important;
+  }
+
+  :host([panel-effect='fade']) [part='panels'] > div {
+    flex-flow: row nowrap;
+  }
+
+  :host([placement='left']) [part='panels'],
+  :host([placement='right']) [part='panels'] {
+    transform: none !important;
+    position: relative;
+    width: 100%;
+  }
+
+  :host([placement='top']) [part='panels'] > div {
+    margin-top: var(--kemet-tabs-spacer);
+  }
+
+  :host([placement='right']) [part='panels'] > div {
+    margin-right: var(--kemet-tabs-spacer);
+  }
+
+  :host([placement='bottom']) [part='panels'] > div {
+    margin-bottom: var(--kemet-tabs-spacer);
+  }
+
+  :host([placement='left']) [part='panels'] > div {
+    margin-left: var(--kemet-tabs-spacer);
+  }
+
+  /* tablist */
+
+  [part='tablist'] {
+    display: flex;
+  }
+
+  :host([placement='left']) [part='tablist'],
+  :host([placement='right']) [part='tablist'] {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+  }
+
+  :host([tabs-align='center']) [part='tablist'] {
+    justify-content: center;
+  }
+
+  :host([tabs-align='between']) [part='tablist'] {
+    justify-content: space-between;
+  }
+
+  :host([tabs-align='evenly']) [part='tablist'] {
+    justify-content: space-evenly;
+  }
+
+  :host([tabs-align='around']) [part='tablist'] {
+    justify-content: space-around
+  }
+
+  :host([tabs-align='start']) [part='tablist'] {
+    justify-content: flex-start;
+  }
+
+  :host([tabs-align='end']) [part='tablist'] {
+    justify-content: flex-end;
+  }
+
+  :host([overflow]) [part='tablist'] {
+    justify-content: start;
+  }
+
+  /* divider */
+
+  [part='divider'] {
+    height: var(--kemet-tabs-divider-size);
+    background-color: var(--kemet-tabs-divider-color);
+  }
+
+  :host([placement='left']) [part='divider'],
+  :host([placement='right']) [part='divider'] {
+    width: var(--kemet-tabs-divider-size);
+    height: auto;
+  }
+
+  /* ink */
+
+  [part='ink'] {
+    height: var(--kemet-tabs-ink-size);
+    border-top-left-radius: var(--kemet-tabs-ink-radius);
+    border-top-right-radius: var(--kemet-tabs-ink-radius);
+    transition: all 300ms ease;
+    background-color: var(--kemet-tabs-ink-color);
+  }
+
+  :host([placement='right']) [part='ink'] {
+    width: var(--kemet-tabs-ink-size);
+    border-top-right-radius: var(--kemet-tabs-ink-radius);
+    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  :host([placement='left']) [part='ink'] {
+    width: var(--kemet-tabs-ink-size);
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: var(--kemet-tabs-ink-radius);
+    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
+  }
+
+  :host([placement='bottom']) [part='ink'] {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
+  }
+
+  /* links */
+
+  :host([overflow]) [part='links'] {
+    overflow-x: auto;
+    margin: 0 2rem;
+    scroll-behavior: smooth;
+  }
+
+  :host([overflow]) [part='links']::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    background: transparent;
+  }
+
+  :host([placement='bottom']) [part='links'] {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  /* icon */
+
+  [icon*='chevron'] {
+    cursor: pointer;
+    position: absolute;
+    top: 1rem;
+  }
+
+  [icon='chevron-left'] {
+    left: 0;
+  }
+
+  [icon='chevron-right'] {
+    right: 0;
+  }
+
+  :host([placement='bottom']) [icon*='chevron'] {
+    top: auto;
+    bottom: 1rem;
+  }
+`;
+var stylesKemetTab = css`
+  :host {
+    --kemet-tab-color: rgb(var(--kemet-color-foreground));
+
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    padding: var(--kemet-tab-padding, 1rem);
+  }
+
+  :host([selected]) {
+    cursor: auto;
+    color: var(--kemet-tab-color);
+  }
+
+  kemet-icon-bootstrap {
+    cursor: pointer;
+    margin-left: 0.5rem;
+  }
+`;
+var stylesKemetTabPanel = css`
+  :host {
+    --kemet-tab-panel-fade-speed: 0.5s;
+
+    width: 100%;
+    flex: 0 0 auto;
+  }
+
+  ::slotted(img) {
+    max-width: 100%;
+  }
+
+  :host(.fade) {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--kemet-tab-panel-fade-speed) ease;
+  }
+
+  :host(.fade[selected]) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  :host(.fade.push) {
+    margin-left: -100%;
+  }
+
+  :host(.vertical) {
+    display: none;
+  }
+
+  :host(.vertical[selected]) {
+    display: block;
+  }
+
+  :host(.stacked) {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  :host(.stacked[selected]) {
+    position: relative;
+    z-index: 1;
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+
+export {
+  stylesKemetTabs,
+  stylesKemetTab,
+  stylesKemetTabPanel
+};
+//# sourceMappingURL=chunk-5LCSEF3N.mjs.map

package/dist/chunk-5LCSEF3N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/elements/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesKemetTabs = css`\n  :host {\n    --kemet-tabs-ink-size: 6px;\n    --kemet-tabs-ink-radius: 6px;\n    --kemet-tabs-divider-size: 1px;\n    --kemet-tabs-spacer: 1rem;\n    --kemet-tabs-transition-speed: 0.5s;\n    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));\n    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));\n\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    position: relative;\n  }\n\n  :host([placement='bottom']) {\n    flex-direction: column-reverse;\n  }\n\n  :host([placement='left']) {\n    flex-direction: row;\n  }\n\n  :host([placement='right']) {\n    flex-direction: row-reverse;\n  }\n\n  :host([placement='left']),\n  :host([placement='right']) {\n    overflow: unset;\n  }\n\n  /* panels */\n\n  [part='panels'] > div {\n    display: flex;\n  }\n\n  :host([panel-effect='slide']) [part='panels'] {\n    transition: transform var(--kemet-tabs-transition-speed) linear;\n  }\n\n  :host([panel-effect='fade']) [part='panels'] {\n    transform: none !important;\n  }\n\n  :host([panel-effect='fade']) [part='panels'] > div {\n    flex-flow: row nowrap;\n  }\n\n  :host([placement='left']) [part='panels'],\n  :host([placement='right']) [part='panels'] {\n    transform: none !important;\n    position: relative;\n    width: 100%;\n  }\n\n  :host([placement='top']) [part='panels'] > div {\n    margin-top: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='right']) [part='panels'] > div {\n    margin-right: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='bottom']) [part='panels'] > div {\n    margin-bottom: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='left']) [part='panels'] > div {\n    margin-left: var(--kemet-tabs-spacer);\n  }\n\n  /* tablist */\n\n  [part='tablist'] {\n    display: flex;\n  }\n\n  :host([placement='left']) [part='tablist'],\n  :host([placement='right']) [part='tablist'] {\n    display: flex;\n    flex-direction: column;\n    align-items: start;\n  }\n\n  :host([tabs-align='center']) [part='tablist'] {\n    justify-content: center;\n  }\n\n  :host([tabs-align='between']) [part='tablist'] {\n    justify-content: space-between;\n  }\n\n  :host([tabs-align='evenly']) [part='tablist'] {\n    justify-content: space-evenly;\n  }\n\n  :host([tabs-align='around']) [part='tablist'] {\n    justify-content: space-around\n  }\n\n  :host([tabs-align='start']) [part='tablist'] {\n    justify-content: flex-start;\n  }\n\n  :host([tabs-align='end']) [part='tablist'] {\n    justify-content: flex-end;\n  }\n\n  :host([overflow]) [part='tablist'] {\n    justify-content: start;\n  }\n\n  /* divider */\n\n  [part='divider'] {\n    height: var(--kemet-tabs-divider-size);\n    background-color: var(--kemet-tabs-divider-color);\n  }\n\n  :host([placement='left']) [part='divider'],\n  :host([placement='right']) [part='divider'] {\n    width: var(--kemet-tabs-divider-size);\n    height: auto;\n  }\n\n  /* ink */\n\n  [part='ink'] {\n    height: var(--kemet-tabs-ink-size);\n    border-top-left-radius: var(--kemet-tabs-ink-radius);\n    border-top-right-radius: var(--kemet-tabs-ink-radius);\n    transition: all 300ms ease;\n    background-color: var(--kemet-tabs-ink-color);\n  }\n\n  :host([placement='right']) [part='ink'] {\n    width: var(--kemet-tabs-ink-size);\n    border-top-right-radius: var(--kemet-tabs-ink-radius);\n    border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n  }\n\n  :host([placement='left']) [part='ink'] {\n    width: var(--kemet-tabs-ink-size);\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: 0px;\n    border-top-left-radius: var(--kemet-tabs-ink-radius);\n    border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n  }\n\n  :host([placement='bottom']) [part='ink'] {\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n  }\n\n  /* links */\n\n  :host([overflow]) [part='links'] {\n    overflow-x: auto;\n    margin: 0 2rem;\n    scroll-behavior: smooth;\n  }\n\n  :host([overflow]) [part='links']::-webkit-scrollbar {\n    display: none;\n    width: 0;\n    background: transparent;\n  }\n\n  :host([placement='bottom']) [part='links'] {\n    display: flex;\n    flex-direction: column-reverse;\n  }\n\n  /* icon */\n\n  [icon*='chevron'] {\n    cursor: pointer;\n    position: absolute;\n    top: 1rem;\n  }\n\n  [icon='chevron-left'] {\n    left: 0;\n  }\n\n  [icon='chevron-right'] {\n    right: 0;\n  }\n\n  :host([placement='bottom']) [icon*='chevron'] {\n    top: auto;\n    bottom: 1rem;\n  }\n`;\n\nexport const stylesKemetTab = css`\n  :host {\n    --kemet-tab-color: rgb(var(--kemet-color-foreground));\n\n    cursor: pointer;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    padding: var(--kemet-tab-padding, 1rem);\n  }\n\n  :host([selected]) {\n    cursor: auto;\n    color: var(--kemet-tab-color);\n  }\n\n  kemet-icon-bootstrap {\n    cursor: pointer;\n    margin-left: 0.5rem;\n  }\n`;\n\nexport const stylesKemetTabPanel = css`\n  :host {\n    --kemet-tab-panel-fade-speed: 0.5s;\n\n    width: 100%;\n    flex: 0 0 auto;\n  }\n\n  ::slotted(img) {\n    max-width: 100%;\n  }\n\n  :host(.fade) {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--kemet-tab-panel-fade-speed) ease;\n  }\n\n  :host(.fade[selected]) {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.fade.push) {\n    margin-left: -100%;\n  }\n\n  :host(.vertical) {\n    display: none;\n  }\n\n  :host(.vertical[selected]) {\n    display: block;\n  }\n\n  :host(.stacked) {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  :host(.stacked[selected]) {\n    position: relative;\n    z-index: 1;\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,kBAAkB;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;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;AA0MxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBvB,IAAM,sBAAsB;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;","names":[]}

package/dist/chunk-5WUBMMWS.mjs

@@ -0,0 +1,28 @@
+// src/styles/elements/sortable.ts
+import { css } from "lit";
+var stylesSortable = css`
+  :host {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+  }
+`;
+var stylesSortableItem = css`
+  :host {
+    cursor: grab;
+    display: block;
+    padding: 1rem;
+    border: 1px solid rgb(var(--kemet-color-foreground));
+  }
+
+  :host([ghost]) {
+    opacity: 0.5;
+    border-style: dashed;
+  }
+`;
+
+export {
+  stylesSortable,
+  stylesSortableItem
+};
+//# sourceMappingURL=chunk-5WUBMMWS.mjs.map

package/dist/chunk-5WUBMMWS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/elements/sortable.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}