kemet-ui 4.0.0 → 4.0.2

package/dist/elements/accordion-panel.js

@@ -0,0 +1,188 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __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/accordion-panel.ts
+var accordion_panel_exports = {};
+__export(accordion_panel_exports, {
+  default: () => KemetAccordionPanel
+});
+module.exports = __toCommonJS(accordion_panel_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/styles/elements/accordion.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    display: block;
+  }
+`;
+var stylesPanel = import_lit.css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    padding: 1.5rem 1rem;
+    border-bottom: 1px solid rgb(var(--kemet-color-foreground));
+  }
+
+  .trigger {
+    color: inherit;
+    cursor: pointer;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr auto;
+    width: 100%;
+    text-align: left;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  .body {
+    overflow: hidden;
+    transition: all 300ms ease;
+  }
+
+  ::slotted([slot='body']) {
+    padding: 1rem 0;
+  }
+`;
+
+// src/elements/accordion-panel.ts
+var KemetAccordionPanel = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.opened = void 0;
+    this.maxHeight = "0px";
+    this.slug = "panel";
+  }
+  firstUpdated() {
+    this.focusableSelector = "body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
+    this.bodyElement = this.querySelector('[slot="body"]');
+    this.bodyElementFirst = this.bodyElement?.querySelector(":first-child");
+    this.bodyElementLast = this.bodyElement?.querySelector(":last-child");
+    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = "0";
+    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = "0";
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;
+      emitEvent(this, "kemet-opened", this);
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      this.maxHeight = "0px";
+      emitEvent(this, "kemet-closed", this);
+    }
+    this.a11y();
+    this.focusableBodyElements();
+  }
+  render() {
+    return import_lit2.html`
+      <button
+        class="trigger"
+        part="trigger"
+        @click=${() => this.toggle()}
+        @keydown=${(event) => this.handleKeyDown(event)}
+      >
+        <slot name="trigger"></slot>
+        <slot name="icon"></slot>
+      </button>
+      <section class="body" part="body" style="max-height:${this.maxHeight};">
+        <slot name="body"></slot>
+      </section>
+    `;
+  }
+  toggle() {
+    this.opened = !this.opened;
+  }
+  focusableBodyElements() {
+    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);
+    if (this.opened) {
+      focusableElements?.forEach((element) => {
+        element.removeAttribute("tabindex");
+      });
+    } else {
+      focusableElements?.forEach((element) => {
+        element.setAttribute("tabindex", "-1");
+      });
+    }
+  }
+  a11y() {
+    const trigger = this.shadowRoot?.querySelector(".trigger");
+    const body = this.shadowRoot?.querySelector(".body");
+    trigger?.setAttribute("id", `${this.slug}-button`);
+    trigger?.setAttribute("aria-controls", `${this.slug}-content`);
+    body?.setAttribute("id", `${this.slug}-content`);
+    body?.setAttribute("aria-labelledby", `${this.slug}-button`);
+    body?.setAttribute("aria-hidden", `${!this.opened}`);
+  }
+  handleKeyDown(event) {
+    if (event.key === "Space" || event.key === "Enter") {
+      this.toggle();
+    }
+  }
+};
+KemetAccordionPanel.styles = [stylesPanel];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetAccordionPanel.prototype, "opened", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, attribute: "max-height" })
+], KemetAccordionPanel.prototype, "maxHeight", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetAccordionPanel.prototype, "slug", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetAccordionPanel.prototype, "index", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetAccordionPanel.prototype, "focusableSelector", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetAccordionPanel.prototype, "bodyElement", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetAccordionPanel.prototype, "bodyElementFirst", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetAccordionPanel.prototype, "bodyElementLast", 2);
+KemetAccordionPanel = __decorateClass([
+  (0, import_decorators.customElement)("kemet-accordion-panel")
+], KemetAccordionPanel);
+//# sourceMappingURL=accordion-panel.js.map

package/dist/elements/accordion-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/accordion-panel.ts","../../src/utilities/events.ts","../../src/styles/elements/accordion.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesPanel } from '../styles/elements/accordion';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @event kemet-opened - Fires when a panel is opened\n * @event kemet-closed - Fires when a panel is closed\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [stylesPanel];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height' })\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  @property({ type: Number })\n  index: number;\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  bodyElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-closed', this);\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\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","import { css } from 'lit';\n\nexport const stylesBase =  css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesPanel = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n    padding: 1.5rem 1rem;\n    border-bottom: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  .trigger {\n    color: inherit;\n    cursor: pointer;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n    width: 100%;\n    text-align: left;\n    padding: 0;\n    border: none;\n    background: none;\n  }\n\n  .body {\n    overflow: hidden;\n    transition: all 300ms ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"],"mappings":"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","names":["import_lit"]}

package/dist/elements/accordion-panel.mjs

@@ -0,0 +1,10 @@
+import {
+  KemetAccordionPanel
+} from "../chunk-YP7UN6IN.mjs";
+import "../chunk-TFESUHTA.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetAccordionPanel as default
+};
+//# sourceMappingURL=accordion-panel.mjs.map

package/dist/elements/accordion-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/accordion.d.mts

@@ -0,0 +1,53 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetAccordionPanel from './accordion-panel.mjs';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion
+ * @summary A component that acts like a standard accordion.
+ *
+ * @prop {number} currentPanel - The index value for the most recently opened panel
+ * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
+ *
+ *
+ */
+declare class KemetAccordion extends LitElement {
+    static styles: lit.CSSResult[];
+    currentPanel: number;
+    togglePanels: boolean;
+    panels: NodeListOf<KemetAccordionPanel>;
+    onKeyDown: (event: KeyboardEvent) => void;
+    currentPanelFocus: number;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleSlotChange(): void;
+    handlePanelOpened(event: CustomEvent): void;
+    navigatePanels(direction: string): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Expands all panels in the accordion
+     * @public
+     * @method expandAll
+     * @returns {void}
+     */
+    expandAll(): void;
+    /**
+     * Collapses all panels in the accordion
+     * @public
+     * @method collapseAll
+     * @returns {void}
+     */
+    collapseAll(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion': KemetAccordion;
+    }
+}
+
+export { KemetAccordion as default };

package/dist/elements/accordion.d.ts

@@ -0,0 +1,53 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetAccordionPanel from './accordion-panel.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion
+ * @summary A component that acts like a standard accordion.
+ *
+ * @prop {number} currentPanel - The index value for the most recently opened panel
+ * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
+ *
+ *
+ */
+declare class KemetAccordion extends LitElement {
+    static styles: lit.CSSResult[];
+    currentPanel: number;
+    togglePanels: boolean;
+    panels: NodeListOf<KemetAccordionPanel>;
+    onKeyDown: (event: KeyboardEvent) => void;
+    currentPanelFocus: number;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleSlotChange(): void;
+    handlePanelOpened(event: CustomEvent): void;
+    navigatePanels(direction: string): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Expands all panels in the accordion
+     * @public
+     * @method expandAll
+     * @returns {void}
+     */
+    expandAll(): void;
+    /**
+     * Collapses all panels in the accordion
+     * @public
+     * @method collapseAll
+     * @returns {void}
+     */
+    collapseAll(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion': KemetAccordion;
+    }
+}
+
+export { KemetAccordion as default };

package/dist/elements/accordion.js

@@ -0,0 +1,209 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __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/accordion.ts
+var accordion_exports = {};
+__export(accordion_exports, {
+  default: () => KemetAccordion
+});
+module.exports = __toCommonJS(accordion_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/accordion.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    display: block;
+  }
+`;
+var stylesPanel = import_lit.css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    padding: 1.5rem 1rem;
+    border-bottom: 1px solid rgb(var(--kemet-color-foreground));
+  }
+
+  .trigger {
+    color: inherit;
+    cursor: pointer;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr auto;
+    width: 100%;
+    text-align: left;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  .body {
+    overflow: hidden;
+    transition: all 300ms ease;
+  }
+
+  ::slotted([slot='body']) {
+    padding: 1rem 0;
+  }
+`;
+
+// src/elements/accordion.ts
+var KemetAccordion = class extends import_lit2.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 import_lit2.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([
+  (0, import_decorators.property)({ type: Number, attribute: "current-panel" })
+], KemetAccordion.prototype, "currentPanel", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "toggle-panels" })
+], KemetAccordion.prototype, "togglePanels", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetAccordion.prototype, "panels", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetAccordion.prototype, "onKeyDown", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetAccordion.prototype, "currentPanelFocus", 2);
+KemetAccordion = __decorateClass([
+  (0, import_decorators.customElement)("kemet-accordion")
+], KemetAccordion);
+//# sourceMappingURL=accordion.js.map

package/dist/elements/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/accordion.ts","../../src/styles/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","import { css } from 'lit';\n\nexport const stylesBase =  css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesPanel = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n    padding: 1.5rem 1rem;\n    border-bottom: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  .trigger {\n    color: inherit;\n    cursor: pointer;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n    width: 100%;\n    text-align: left;\n    padding: 0;\n    border: none;\n    background: none;\n  }\n\n  .body {\n    overflow: hidden;\n    transition: all 300ms ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"],"mappings":"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","names":["import_lit"]}

package/dist/elements/accordion.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetAccordion
+} from "../chunk-GD6K7M4N.mjs";
+import "../chunk-TFESUHTA.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetAccordion as default
+};
+//# sourceMappingURL=accordion.mjs.map

package/dist/elements/accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/alert.d.mts

@@ -0,0 +1,75 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { T as TypeStatus, a as TypeRoundedSizes } from '../constants-BEtO8uLN.mjs';
+import '../form-controller-BR0gZhrG.mjs';
+
+declare const overlayPositions: readonly ["fixed", "top-full", "bottom-full", "top-right", "top-left", "bottom-right", "bottom-left"];
+declare enum EnumOverlayPositions {
+    FIXED = "fixed",
+    TOP_FULL = "top-full",
+    BOTTOM_FULL = "bottom-full",
+    TOP_RIGHT = "top-right",
+    TOP_LEFT = "top-left",
+    BOTTOM_RIGHT = "bottom-right",
+    BOTTOM_LEFT = "bottom-left"
+}
+type TypeOverlayPositions = typeof overlayPositions[number];
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-alert
+ * @summary Calls out important messages and notifications.
+ *
+ * @prop {boolean} opened - Determines if the alert is opened or not.
+ * @prop {boolean} reveal - Fades in the alert when opened.
+ * @prop {boolean} closable - Adds a close button to the alert.
+ * @prop {TypeDirection} borderStatus - Adds a border that indicates the status.
+ * @prop {boolean} hidden - Hides the element from document flow.
+ * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.
+ * @prop {TypeVariants} variant - The style of the alert.
+ * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.
+ * @prop {boolean} filled - Determines if the alert uses the filled style.
+ *
+ * @slot icon - The icon of the alert.
+ * @slot default - The contents of the alert.
+ *
+ * @event kemet-opened - Fires when alert is opened.
+ * @event kemet-closed - Fires when alert is closed.
+ *
+ * @csspart close - Container for the close button.
+ * @csspart message - Container for the alert message.
+ *
+ * @cssproperty --kemet-alert-padding - The padding on the alert.
+ * @cssproperty --kemet-alert-border-thickness - The thickness of the border.
+ * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
+ * @cssproperty --kemet-alert-align-items - The alert's alignment.
+ * @cssproperty --kemet-alert-border - The border around the alert.
+ *
+ */
+declare class KemetAlert extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean;
+    reveal: boolean;
+    closable: boolean;
+    status: TypeStatus;
+    borderStatus: string;
+    hidden: boolean;
+    overlay: string;
+    rounded: TypeRoundedSizes;
+    filled: boolean;
+    shouldUpdate(prevProps: Map<string, never>): boolean;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+    makeCloseBtn(): lit_html.TemplateResult<1>;
+    handleMotion(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-alert': KemetAlert;
+    }
+}
+
+export { EnumOverlayPositions, type TypeOverlayPositions, KemetAlert as default, overlayPositions };