kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-GD6K7M4N.mjs

@@ -0,0 +1,144 @@
+import {
+  stylesBase
+} from "./chunk-TFESUHTA.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/accordion.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetAccordion = class extends LitElement {
+  constructor() {
+    super();
+    this.currentPanel = 0;
+    this.togglePanels = false;
+    this.addEventListener("kemet-opened", this.handlePanelOpened.bind(this));
+  }
+  firstUpdated() {
+    this.onKeyDown = (event) => this.handleKeyDown(event);
+  }
+  render() {
+    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  }
+  handleSlotChange() {
+    this.panels = this.querySelectorAll("kemet-accordion-panel");
+    this.panels.forEach((panel, index) => {
+      panel.index = index;
+      panel.removeEventListener("keydown", this.onKeyDown);
+      panel.addEventListener("keydown", this.onKeyDown);
+    });
+  }
+  handlePanelOpened(event) {
+    this.panels?.forEach((panel) => {
+      if (panel === event.detail) {
+        this.currentPanel = panel.index;
+      }
+    });
+    if (this.togglePanels) {
+      this.panels?.forEach((panel) => {
+        if (panel !== event.detail) {
+          panel.opened = false;
+        }
+      });
+    }
+  }
+  navigatePanels(direction) {
+    switch (direction) {
+      case "home":
+        this.currentPanel = 0;
+        break;
+      case "end":
+        this.currentPanel = this.panels.length - 1;
+        break;
+      case "next":
+        this.currentPanel += 1;
+        break;
+      case "prev":
+        this.currentPanel -= 1;
+        break;
+      default:
+        this.currentPanelFocus = 0;
+        break;
+    }
+    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;
+    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;
+    this.panels[this.currentPanel].shadowRoot.querySelector("button").focus();
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    switch (event.key) {
+      case "Enter":
+      case "Space":
+        event.preventDefault();
+        target.click();
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        this.navigatePanels("prev");
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        this.navigatePanels("next");
+        break;
+      case "End":
+        event.preventDefault();
+        this.navigatePanels("end");
+        break;
+      case "Home":
+        event.preventDefault();
+        this.navigatePanels("home");
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * Expands all panels in the accordion
+   * @public
+   * @method expandAll
+   * @returns {void}
+   */
+  expandAll() {
+    this.panels.forEach((panel) => {
+      panel.opened = true;
+    });
+  }
+  /**
+   * Collapses all panels in the accordion
+   * @public
+   * @method collapseAll
+   * @returns {void}
+   */
+  collapseAll() {
+    this.panels.forEach((panel) => {
+      panel.opened = false;
+    });
+  }
+};
+KemetAccordion.styles = [stylesBase];
+__decorateClass([
+  property({ type: Number, attribute: "current-panel" })
+], KemetAccordion.prototype, "currentPanel", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "toggle-panels" })
+], KemetAccordion.prototype, "togglePanels", 2);
+__decorateClass([
+  state()
+], KemetAccordion.prototype, "panels", 2);
+__decorateClass([
+  state()
+], KemetAccordion.prototype, "onKeyDown", 2);
+__decorateClass([
+  state()
+], KemetAccordion.prototype, "currentPanelFocus", 2);
+KemetAccordion = __decorateClass([
+  customElement("kemet-accordion")
+], KemetAccordion);
+
+export {
+  KemetAccordion
+};
+//# sourceMappingURL=chunk-GD6K7M4N.mjs.map

package/dist/chunk-GD6K7M4N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/accordion.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/accordion';\nimport KemetAccordionPanel from './accordion-panel';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n *\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Number, attribute: 'current-panel' })\n  currentPanel: number = 0;\n\n  @property({ type: Boolean, attribute: 'toggle-panels' })\n  togglePanels: boolean = false;\n\n  @state()\n  panels: NodeListOf<KemetAccordionPanel>;\n\n  @state()\n  onKeyDown: (event: KeyboardEvent) => void;\n\n  @state()\n  currentPanelFocus: number;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-opened', this.handlePanelOpened.bind(this));\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    this.panels = this.querySelectorAll('kemet-accordion-panel');\n\n    this.panels.forEach((panel: KemetAccordionPanel, index) => {\n      panel.index = index;\n      panel.removeEventListener('keydown', this.onKeyDown);\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: CustomEvent) {\n    this.panels?.forEach((panel: KemetAccordionPanel) => {\n      if (panel === event.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: KemetAccordionPanel) => {\n        if (panel !== event.detail) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction: string) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Expands all panels in the accordion\n   * @public\n   * @method expandAll\n   * @returns {void}\n   */\n  expandAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  /**\n   * Collapses all panels in the accordion\n   * @public\n   * @method collapseAll\n   * @returns {void}\n   */\n  collapseAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAkB/C,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAkBrD,cAAc;AACZ,UAAM;AAfR,wBAAuB;AAGvB,wBAAwB;AAetB,SAAK,iBAAiB,gBAAgB,KAAK,kBAAkB,KAAK,IAAI,CAAC;AAAA,EACzE;AAAA,EAEA,eAAe;AACb,SAAK,YAAY,WAAS,KAAK,cAAc,KAAK;AAAA,EACpD;AAAA,EAEA,SAAS;AACP,WAAO,yBAAyB,MAAM,KAAK,iBAAiB,CAAC;AAAA,EAC/D;AAAA,EAEA,mBAAmB;AACjB,SAAK,SAAS,KAAK,iBAAiB,uBAAuB;AAE3D,SAAK,OAAO,QAAQ,CAAC,OAA4B,UAAU;AACzD,YAAM,QAAQ;AACd,YAAM,oBAAoB,WAAW,KAAK,SAAS;AACnD,YAAM,iBAAiB,WAAW,KAAK,SAAS;AAAA,IAClD,CAAC;AAAA,EACH;AAAA,EAEA,kBAAkB,OAAoB;AACpC,SAAK,QAAQ,QAAQ,CAAC,UAA+B;AACnD,UAAI,UAAU,MAAM,QAAQ;AAC1B,aAAK,eAAe,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,QAAI,KAAK,cAAc;AACrB,WAAK,QAAQ,QAAQ,CAAC,UAA+B;AACnD,YAAI,UAAU,MAAM,QAAQ;AAC1B,gBAAM,SAAS;AAAA,QACjB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,eAAe,WAAmB;AAChC,YAAQ,WAAW;AAAA,MACjB,KAAK;AACH,aAAK,eAAe;AACpB;AAAA,MACF,KAAK;AACH,aAAK,eAAe,KAAK,OAAO,SAAS;AACzC;AAAA,MACF,KAAK;AACH,aAAK,gBAAgB;AACrB;AAAA,MACF,KAAK;AACH,aAAK,gBAAgB;AACrB;AAAA,MACF;AACE,aAAK,oBAAoB;AACzB;AAAA,IACJ;AAEA,QAAI,KAAK,eAAe,KAAK,OAAO,SAAS,EAAG,MAAK,eAAe;AACpE,QAAI,KAAK,eAAe,EAAG,MAAK,eAAe,KAAK,OAAO,SAAS;AAEpE,SAAK,OAAO,KAAK,YAAY,EAAE,WAAW,cAAc,QAAQ,EAAE,MAAM;AAAA,EAC1E;AAAA,EAEA,cAAc,OAAsB;AAClC,UAAM,SAAS,MAAM;AACrB,YAAQ,MAAM,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK;AACH,cAAM,eAAe;AACrB,eAAO,MAAM;AACb;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,MAAM;AAC1B;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,MAAM;AAC1B;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,KAAK;AACzB;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,aAAK,eAAe,MAAM;AAC1B;AAAA,MACF;AACE;AAAA,IACJ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAkB;AAChB,SAAK,OAAO,QAAQ,CAAC,UAAU;AAC7B,YAAM,SAAS;AAAA,IACjB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,cAAoB;AAClB,SAAK,OAAO,QAAQ,CAAC,UAAU;AAC7B,YAAM,SAAS;AAAA,IACjB,CAAC;AAAA,EACH;AACF;AA1IqB,eACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAHnC,eAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB,CAAC;AAAA,GANpC,eAOnB;AAGA;AAAA,EADC,MAAM;AAAA,GATY,eAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,eAanB;AAGA;AAAA,EADC,MAAM;AAAA,GAfY,eAgBnB;AAhBmB,iBAArB;AAAA,EADC,cAAc,iBAAiB;AAAA,GACX;","names":[]}

package/dist/chunk-GPBOM3MJ.mjs

@@ -0,0 +1,118 @@
+// src/styles/elements/radio.ts
+import { css } from "lit";
+var stylesRadio = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-radio-size: 18px;
+    --kemet-radio-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-radio-dot-color: rgb(var(--kemet-color-primary));
+    --kemet-radio-dot-border: 1px solid rgb(var(--kemet-color-primary));
+    --kemet-radio-dot-border-width: 3px;
+    --kemet-radio-dot-ring-color: rgb(var(--kemet-color-white));
+    --kemet-radio-dot-color-filled: rgb(var(--kemet-color-white));
+    --kemet-radio-dot-border-width: 4px;
+    --kemet-radio-dot-border-color: rgb(var(--kemet-color-primary));
+
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  label {
+    cursor: pointer;
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-right: 0.5rem;
+  }
+
+  input {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    width: var(--kemet-radio-size);
+    height: var(--kemet-radio-size);
+    position: absolute;
+    opacity: 0;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kemet-radio-size);
+    height: var(--kemet-radio-size);
+    padding: 0;
+    border-radius: var(--kemet-border-radius-circle);
+    background: none;
+    border: var(--kemet-radio-border);
+  }
+
+  [part='dot'] {
+    display: inline-flex;
+    border-radius: var(--kemet-border-radius-circle);
+    width: var(--kemet-radio-size);
+    height: var(--kemet-radio-size);
+    background: var(--kemet-radio-dot-color);
+    border: var(--kemet-radio-dot-border);
+    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);
+  }
+
+  :host([filled]) [part='dot'] {
+    background: var(--kemet-radio-dot-color-filled);
+    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);
+  }
+`;
+var stylesRadios = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+  }
+
+  fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  legend {
+    margin-bottom: 1rem;
+  }
+
+  :host([axis='vertical']) fieldset {
+    flex-direction: column;
+  }
+
+  [part='message'] {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
+  :host([status='error']) [part='message'] {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  :host([status='warning']) [part='message'] {
+    color: rgb(var(--kemet-color-error));
+  }
+`;
+
+export {
+  stylesRadio,
+  stylesRadios
+};
+//# sourceMappingURL=chunk-GPBOM3MJ.mjs.map

package/dist/chunk-GPBOM3MJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/elements/radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesRadio = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-radio-size: 18px;\n    --kemet-radio-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-radio-dot-color: rgb(var(--kemet-color-primary));\n    --kemet-radio-dot-border: 1px solid rgb(var(--kemet-color-primary));\n    --kemet-radio-dot-border-width: 3px;\n    --kemet-radio-dot-ring-color: rgb(var(--kemet-color-white));\n    --kemet-radio-dot-color-filled: rgb(var(--kemet-color-white));\n    --kemet-radio-dot-border-width: 4px;\n    --kemet-radio-dot-border-color: rgb(var(--kemet-color-primary));\n\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: inline-flex;\n    gap: 0.5rem;\n    align-items: center;\n    margin-right: 0.5rem;\n  }\n\n  input {\n    cursor: pointer;\n    margin: 0;\n    padding: 0;\n    width: var(--kemet-radio-size);\n    height: var(--kemet-radio-size);\n    position: absolute;\n    opacity: 0;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--kemet-radio-size);\n    height: var(--kemet-radio-size);\n    padding: 0;\n    border-radius: var(--kemet-border-radius-circle);\n    background: none;\n    border: var(--kemet-radio-border);\n  }\n\n  [part='dot'] {\n    display: inline-flex;\n    border-radius: var(--kemet-border-radius-circle);\n    width: var(--kemet-radio-size);\n    height: var(--kemet-radio-size);\n    background: var(--kemet-radio-dot-color);\n    border: var(--kemet-radio-dot-border);\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n  }\n\n  :host([filled]) [part='dot'] {\n    background: var(--kemet-radio-dot-color-filled);\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n  }\n`;\n\nexport const stylesRadios = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  legend {\n    margin-bottom: 1rem;\n  }\n\n  :host([axis='vertical']) fieldset {\n    flex-direction: column;\n  }\n\n  [part='message'] {\n    display: block;\n    margin-top: 0.5rem;\n  }\n\n  :host([status='error']) [part='message'] {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='warning']) [part='message'] {\n    color: rgb(var(--kemet-color-error));\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEpB,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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-H4D2CASA.mjs

@@ -0,0 +1,48 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/svgs.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetSVGs = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.set = "svgs";
+  }
+  firstUpdated() {
+    this.slotElement = this.shadowRoot.querySelector("slot");
+    document.kemetSVGs = document.kemetSVGs || {};
+    this.populateIcons();
+    this.slotElement.addEventListener("slotchange", () => this.populateIcons());
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  populateIcons() {
+    const svg = this.slotElement.assignedElements()[0];
+    const svgContents = svg ? svg.querySelectorAll("defs > g") : null;
+    if (svgContents) {
+      document.kemetSVGs[this.set] = svgContents;
+    }
+  }
+};
+KemetSVGs.styles = [css`
+    :host {
+      display: none;
+    }
+  `];
+__decorateClass([
+  property({ type: String })
+], KemetSVGs.prototype, "set", 2);
+__decorateClass([
+  state()
+], KemetSVGs.prototype, "slotElement", 2);
+KemetSVGs = __decorateClass([
+  customElement("kemet-svgs")
+], KemetSVGs);
+
+export {
+  KemetSVGs
+};
+//# sourceMappingURL=chunk-H4D2CASA.mjs.map

package/dist/chunk-H4D2CASA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/svgs.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svgs\n * @summary A set of SVG graphics that can be referenced anywhere in a page or app.\n *\n * @prop {string} set - Defines the name for the set of svgs.\n *\n */\n\n@customElement('kemet-svgs')\nexport default class KemetSVGs extends LitElement {\n  static styles = [css`\n    :host {\n      display: none;\n    }\n  `];\n\n  @property({ type: String })\n  set: string = 'svgs';\n\n  @state()\n  slotElement: HTMLSlotElement;\n\n  firstUpdated() {\n    this.slotElement = this.shadowRoot.querySelector('slot');\n    document.kemetSVGs = document.kemetSVGs || {};\n\n    this.populateIcons();\n    this.slotElement.addEventListener('slotchange', () => this.populateIcons());\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  populateIcons() {\n    const svg = this.slotElement.assignedElements()[0];\n    const svgContents = svg ? svg.querySelectorAll('defs > g') : null;\n\n    if (svgContents) {\n      document.kemetSVGs[this.set] = svgContents;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svgs': KemetSVGs\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"],"mappings":";;;;;AAAA,SAAS,YAAY,MAAM,WAAW;AACtC,SAAS,eAAe,UAAU,aAAa;AAc/C,IAAqB,YAArB,cAAuC,WAAW;AAAA,EAAlD;AAAA;AAQE,eAAc;AAAA;AAAA,EAKd,eAAe;AACb,SAAK,cAAc,KAAK,WAAW,cAAc,MAAM;AACvD,aAAS,YAAY,SAAS,aAAa,CAAC;AAE5C,SAAK,cAAc;AACnB,SAAK,YAAY,iBAAiB,cAAc,MAAM,KAAK,cAAc,CAAC;AAAA,EAC5E;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB;AACd,UAAM,MAAM,KAAK,YAAY,iBAAiB,EAAE,CAAC;AACjD,UAAM,cAAc,MAAM,IAAI,iBAAiB,UAAU,IAAI;AAE7D,QAAI,aAAa;AACf,eAAS,UAAU,KAAK,GAAG,IAAI;AAAA,IACjC;AAAA,EACF;AACF;AAjCqB,UACZ,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,GAIhB;AAGD;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPP,UAQnB;AAGA;AAAA,EADC,MAAM;AAAA,GAVY,UAWnB;AAXmB,YAArB;AAAA,EADC,cAAc,YAAY;AAAA,GACN;","names":[]}

package/dist/chunk-HEJAQQFO.mjs

@@ -0,0 +1,140 @@
+import {
+  KemetPopper,
+  stylesPopper,
+  stylesPopperFade,
+  stylesPopperFall,
+  stylesPopperFlipHorizontal,
+  stylesPopperFlipVertical,
+  stylesPopperScale,
+  stylesPopperSign,
+  stylesPopperSlide,
+  stylesPopperSuperScaled
+} from "./chunk-LKIDBCVS.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/tooltip.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+// src/styles/elements/tooltip.ts
+import { css } from "lit";
+var stylesTooltip = css`
+  :host {
+    --kemet-tooltip-deg: -45deg;
+    --kemet-tooltip-size: 22px;
+    --kemet-tooltip-border-size: 1px;
+    --kemet-tooltip-rounded-tip: 4px;
+    --kemet-tooltip-background-color: rgb(var(--kemet-color-background));
+    --kemet-tooltip-border-color: rgb(var(--kemet-color-foreground));
+    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);
+  }
+
+  #arrow {
+    content: '';
+    width: var(--kemet-tooltip-size);
+    height: var(--kemet-tooltip-size);
+    position: relative;
+    display: inline-block;
+    background: linear-gradient(
+        var(--kemet-tooltip-deg),
+        transparent calc(var(--kemet-tooltip-size) / 1.5),
+        var(--kemet-tooltip-background-color) 0
+      )
+      no-repeat;
+    background-repeat: no-repeat;
+    transform-origin: center center;
+    border-top-left-radius: var(--kemet-tooltip-rounded-tip);
+    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
+    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
+  }
+
+  [data-popper-placement^="top"] #arrow {
+    top: var(--kemet-tooltip-placement-offset);
+    transform: rotate(225deg);
+
+  }
+
+  [data-popper-placement^="bottom"] #arrow-container {
+    top: 0px;
+  }
+
+  [data-popper-placement^="bottom"] #arrow {
+    top: var(--kemet-tooltip-placement-offset);
+    transform: rotate(45deg);
+  }
+
+  [data-popper-placement^="right"] #arrow {
+    left: var(--kemet-tooltip-placement-offset);
+    transform: rotate(-45deg);
+  }
+
+  [data-popper-placement^="left"] #arrow-container {
+    right: 0;
+  }
+
+  [data-popper-placement^="left"] #arrow {
+    right: var(--kemet-tooltip-placement-offset);
+    transform: rotate(135deg);
+  }
+`;
+
+// src/elements/tooltip.ts
+var KemetTooltip = class extends KemetPopper {
+  render() {
+    return html`
+      <div
+        id="trigger"
+        part="trigger"
+        tabIndex="0"
+        @click=${this.fireOn === "click" ? (event) => this.toggle(event) : null}
+        @keyup=${this.fireOn === "click" ? (event) => this.handleKeyUp(event) : null}
+        @mouseover=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @focus=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @mouseout=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+        @blur=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        id="content"
+        @mouseover=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @mouseout=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+      >
+        <slot name="content" @slotchange=${() => {
+      this.makePopper();
+      this.measureContent();
+    }}></slot>
+        <div id="arrow-container" part="arrow-container" data-popper-arrow>
+          <div id="arrow" part="arrow"></div>
+        </div>
+      </div>
+    `;
+  }
+  measureContent() {
+    const height = this.contentElement.offsetHeight;
+    this.contentElement.style.setProperty("--kemet-tooltip-content-height", `${height}px`);
+  }
+};
+KemetTooltip.styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
+KemetTooltip = __decorateClass([
+  customElement("kemet-tooltip")
+], KemetTooltip);
+
+export {
+  KemetTooltip
+};
+//# sourceMappingURL=chunk-HEJAQQFO.mjs.map

package/dist/chunk-HEJAQQFO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/tooltip.ts","../src/styles/elements/tooltip.ts"],"sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesTooltip } from '../styles/elements/tooltip';\nimport { stylesPopper } from '../styles/elements/popper';\nimport {\n  stylesPopperFade,\n  stylesPopperScale,\n  stylesPopperSlide,\n  stylesPopperFall,\n  stylesPopperFlipHorizontal,\n  stylesPopperFlipVertical,\n  stylesPopperSign,\n  stylesPopperSuperScaled,\n} from '../styles/elements/popper';\nimport KemetPopper from '../elements/popper';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-tooltip\n * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.\n *\n * @slot trigger - Controls opening and closing the tooltip.\n * @slot content - The contents of the tooltip.\n *\n * @csspart trigger - Contains the trigger for the tooltip.\n * @csspart content - Contains the content for the tooltip.\n *\n * @cssproperty --kemet-tooltip-content-height - The height of the content.\n * @cssproperty --kemet-tooltip-size - The width and height of arrow's container\n * @cssproperty --kemet-tooltip-border-size - The border size of the arrow\n * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy\n * @cssproperty --kemet-tooltip-background-color - The background color of the arrow\n * @cssproperty --kemet-tooltip-border-color - The border color of the arrow\n * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger\n *\n */\n\n@customElement('kemet-tooltip')\nexport default class KemetTooltip extends KemetPopper {\n  static styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];\n\n  render() {\n    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? (event: MouseEvent) => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? (event: KeyboardEvent) => this.handleKeyUp(event) : null}\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @focus=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n        @blur=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        id=\"content\"\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"content\" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>\n        <div id=\"arrow-container\" part=\"arrow-container\" data-popper-arrow>\n          <div id=\"arrow\" part=\"arrow\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  measureContent() {\n    const height = this.contentElement.offsetHeight;\n    this.contentElement.style.setProperty('--kemet-tooltip-content-height', `${height}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tooltip': KemetTooltip\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesTooltip = css`\n  :host {\n    --kemet-tooltip-deg: -45deg;\n    --kemet-tooltip-size: 22px;\n    --kemet-tooltip-border-size: 1px;\n    --kemet-tooltip-rounded-tip: 4px;\n    --kemet-tooltip-background-color: rgb(var(--kemet-color-background));\n    --kemet-tooltip-border-color: rgb(var(--kemet-color-foreground));\n    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);\n  }\n\n  #arrow {\n    content: '';\n    width: var(--kemet-tooltip-size);\n    height: var(--kemet-tooltip-size);\n    position: relative;\n    display: inline-block;\n    background: linear-gradient(\n        var(--kemet-tooltip-deg),\n        transparent calc(var(--kemet-tooltip-size) / 1.5),\n        var(--kemet-tooltip-background-color) 0\n      )\n      no-repeat;\n    background-repeat: no-repeat;\n    transform-origin: center center;\n    border-top-left-radius: var(--kemet-tooltip-rounded-tip);\n    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n  }\n\n  [data-popper-placement^=\"top\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(225deg);\n\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow-container {\n    top: 0px;\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(45deg);\n  }\n\n  [data-popper-placement^=\"right\"] #arrow {\n    left: var(--kemet-tooltip-placement-offset);\n    transform: rotate(-45deg);\n  }\n\n  [data-popper-placement^=\"left\"] #arrow-container {\n    right: 0;\n  }\n\n  [data-popper-placement^=\"left\"] #arrow {\n    right: var(--kemet-tooltip-placement-offset);\n    transform: rotate(135deg);\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B,SAAS,WAAW;AAEb,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADsC7B,IAAqB,eAArB,cAA0C,YAAY;AAAA,EAGpD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKM,KAAK,WAAW,UAAU,CAAC,UAAsB,KAAK,OAAO,KAAK,IAAI,IAAI;AAAA,iBAC1E,KAAK,WAAW,UAAU,CAAC,UAAyB,KAAK,YAAY,KAAK,IAAI,IAAI;AAAA,qBAC9E,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAM,IAAI,IAAI;AAAA,iBAClE,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAM,IAAI,IAAI;AAAA,oBAC3D,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAO,IAAI,IAAI;AAAA,gBACnE,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAO,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAM1D,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAM,IAAI,IAAI;AAAA,oBAC/D,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAO,IAAI,IAAI;AAAA;AAAA,2CAExC,MAAM;AAAE,WAAK,WAAW;AAAG,WAAK,eAAe;AAAA,IAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM5F;AAAA,EAEA,iBAAiB;AACf,UAAM,SAAS,KAAK,eAAe;AACnC,SAAK,eAAe,MAAM,YAAY,kCAAkC,GAAG,MAAM,IAAI;AAAA,EACvF;AACF;AAnCqB,aACZ,SAAS,CAAC,eAAe,cAAc,kBAAkB,mBAAmB,mBAAmB,kBAAkB,4BAA4B,0BAA0B,kBAAkB,uBAAuB;AADpM,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/chunk-IVO3EKSY.mjs

@@ -0,0 +1,126 @@
+import {
+  stylesRadio
+} from "./chunk-GPBOM3MJ.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/radio.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+var KemetRadio = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.disabled = false;
+  }
+  firstUpdated() {
+    const radiosElement = this.closest("kemet-radios");
+    this.name = radiosElement.name || "radio-button";
+    this.input = this.shadowRoot.querySelector("input");
+    this.setAttribute("role", "radio");
+    if (this.checked) {
+      this.setAttribute("aria-checked", "true");
+    } else {
+      this.setAttribute("aria-checked", "false");
+    }
+  }
+  render() {
+    return html`
+      <label part="label">
+        <input
+          type="radio"
+          name=${ifDefined(this.name)}
+          .value=${this.value}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          @blur=${() => this.handleBlur()}
+          @focus=${() => this.handleFocus()}
+        />
+        <button part="button" aria-label=${this.label}>${this.makeDot()}</button>
+        <span part="text">${this.label}</span>
+      </label>
+    `;
+  }
+  /**
+    * Simulates a click on the input element.
+    * @public
+    * @method click
+    * @returns {void}
+    */
+  click() {
+    this.input.click();
+  }
+  /**
+   * Calls blur on the input element.
+   * @public
+   * @method blur
+   * @returns {void}
+   */
+  blur() {
+    this.input.blur();
+  }
+  /**
+   * Calls focus on the input element.
+   * @public
+   * @method focus
+   * @returns {void}
+   */
+  focus() {
+    this.input.focus();
+  }
+  handleBlur() {
+    this.focused = false;
+    emitEvent(this, "kemet-blur", this);
+  }
+  handleFocus() {
+    this.focused = true;
+    emitEvent(this, "kemet-focus", this);
+  }
+  makeDot() {
+    if (this.checked) {
+      return html`
+        <span part="dot"></span>
+      `;
+    }
+    return null;
+  }
+};
+KemetRadio.styles = [stylesRadio];
+__decorateClass([
+  property({ type: String })
+], KemetRadio.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetRadio.prototype, "checked", 2);
+__decorateClass([
+  property({ type: String })
+], KemetRadio.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], KemetRadio.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetRadio.prototype, "focused", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetRadio.prototype, "filled", 2);
+__decorateClass([
+  state()
+], KemetRadio.prototype, "input", 2);
+KemetRadio = __decorateClass([
+  customElement("kemet-radio")
+], KemetRadio);
+
+export {
+  KemetRadio
+};
+//# sourceMappingURL=chunk-IVO3EKSY.mjs.map

package/dist/chunk-IVO3EKSY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/radio.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesRadio } from '../styles/elements/radio';\nimport KemetRadios from './radios';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-focus -  Fires when the checkbox receives focus\n * @event kemet-blur - Fires when the checkbox loses focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [stylesRadio];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @state()\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as KemetRadios;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot.querySelector('input');\n    this.setAttribute('role', 'radio');\n\n    if (this.checked) {\n      this.setAttribute('aria-checked', 'true');\n    } else {\n      this.setAttribute('aria-checked', 'false');\n    }\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  /**\n    * Simulates a click on the input element.\n    * @public\n    * @method click\n    * @returns {void}\n    */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Calls blur on the input element.\n   * @public\n   * @method blur\n   * @returns {void}\n   */\n  blur(): void {\n    this.input.blur();\n  }\n\n  /**\n   * Calls focus on the input element.\n   * @public\n   * @method focus\n   * @returns {void}\n   */\n  focus(): void {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-blur', this);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-focus', this);\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAC/C,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAuCrB,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,iBAAgB;AAYhB,oBAAoB;AAAA;AAAA,EAWpB,eAAe;AACb,UAAM,gBAAgB,KAAK,QAAQ,cAAc;AAEjD,SAAK,OAAO,cAAc,QAAQ;AAClC,SAAK,QAAQ,KAAK,WAAW,cAAc,OAAO;AAClD,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,KAAK,SAAS;AAChB,WAAK,aAAa,gBAAgB,MAAM;AAAA,IAC1C,OAAO;AACL,WAAK,aAAa,gBAAgB,OAAO;AAAA,IAC3C;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,iBAIM,UAAU,KAAK,IAAI,CAAC;AAAA,mBAClB,KAAK,KAAK;AAAA,qBACR,KAAK,KAAK,OAAO,CAAC;AAAA,sBACjB,KAAK,QAAQ;AAAA,kBACjB,MAAM,KAAK,WAAW,CAAC;AAAA,mBACtB,MAAM,KAAK,YAAY,CAAC;AAAA;AAAA,2CAEA,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC;AAAA,4BAC3C,KAAK,KAAK;AAAA;AAAA;AAAA,EAGpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAQ;AACN,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAa;AACX,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAc;AACZ,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EAEA,aAAa;AACX,SAAK,UAAU;AACf,cAAU,MAAM,cAAc,IAAI;AAAA,EACpC;AAAA,EAEA,cAAc;AACZ,SAAK,UAAU;AACf,cAAU,MAAM,eAAe,IAAI;AAAA,EACrC;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,SAAS;AAChB,aAAO;AAAA;AAAA;AAAA,IAGT;AAEA,WAAO;AAAA,EACT;AACF;AA5GqB,WACZ,SAAS,CAAC,WAAW;AAG5B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,WAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,WAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBvB,WAsBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAxBY,WAyBnB;AAzBmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}

package/dist/chunk-JA5Z4MY5.mjs

@@ -0,0 +1,39 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-current.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetCarouselCurrent = class extends LitElement {
+  firstUpdated() {
+    this.carousel = this.closest("kemet-carousel");
+  }
+  updated() {
+    this.current = this.carousel?.index + 1;
+  }
+  render() {
+    return html`${this.current}`;
+  }
+};
+KemetCarouselCurrent.styles = [
+  css`
+      :host {
+        display: inline-block;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], KemetCarouselCurrent.prototype, "current", 2);
+__decorateClass([
+  state()
+], KemetCarouselCurrent.prototype, "carousel", 2);
+KemetCarouselCurrent = __decorateClass([
+  customElement("kemet-carousel-current")
+], KemetCarouselCurrent);
+
+export {
+  KemetCarouselCurrent
+};
+//# sourceMappingURL=chunk-JA5Z4MY5.mjs.map