kemet-ui 4.0.2 → 5.0.0

package/dist/elements/accordion/index.js

@@ -0,0 +1,191 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/elements/accordion/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: block;
+}
+`;
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/accordion/index.ts
+var KemetAccordion = class extends LitElement {
+  constructor() {
+    super();
+    this.currentPanel = 0;
+    this.togglePanels = false;
+    this.dom = "initializing";
+    this.handlePanelOpenedBound = this.handlePanelOpened.bind(this);
+    this.addEventListener("kemet-opened", this.handlePanelOpenedBound);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("kemet-opened", this.handlePanelOpenedBound);
+    this.panels?.forEach((panel) => {
+      panel.removeEventListener("keydown", this.onKeyDown);
+    });
+  }
+  firstUpdated() {
+    this.onKeyDown = (event) => this.handleKeyDown(event);
+    emitEvent(this, "kemet-accordion-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  }
+  handleSlotChange() {
+    const newPanels = this.querySelectorAll("kemet-accordion-panel");
+    if (this.panels) {
+      this.panels.forEach((oldPanel) => {
+        if (!Array.from(newPanels).includes(oldPanel)) {
+          oldPanel.removeEventListener("keydown", this.onKeyDown);
+        }
+      });
+    }
+    this.panels = newPanels;
+    this.panels.forEach((panel, index) => {
+      panel.index = index;
+      panel.addEventListener("keydown", this.onKeyDown);
+    });
+  }
+  handlePanelOpened(event) {
+    const customEvent = event;
+    this.panels?.forEach((panel) => {
+      if (panel === customEvent.detail) {
+        this.currentPanel = panel.index;
+      }
+    });
+    if (this.togglePanels) {
+      this.panels?.forEach((panel) => {
+        if (panel !== customEvent.detail.element) {
+          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 = [styles_css_default];
+__decorateClass([
+  property({ type: Number, attribute: "current-panel" })
+], KemetAccordion.prototype, "currentPanel", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "toggle-panels" })
+], KemetAccordion.prototype, "togglePanels", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAccordion.prototype, "dom", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAccordion.prototype, "polarity", 2);
+__decorateClass([
+  state()
+], KemetAccordion.prototype, "onKeyDown", 2);
+__decorateClass([
+  state()
+], KemetAccordion.prototype, "currentPanelFocus", 2);
+KemetAccordion = __decorateClass([
+  customElement("kemet-accordion")
+], KemetAccordion);
+export {
+  KemetAccordion as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/accordion/index.ts","../../../src/elements/accordion/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport HTMLKemetAccordionPanelElement from '../accordion-panel';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\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 * @fires kemet-accordion-mounted - Fired when the accordion is mounted to the DOM\n * @detail {HTMLElement} element - The accordion element\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [styles];\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  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  panels!: NodeListOf<HTMLKemetAccordionPanelElement>;\n\n  @state()\n  onKeyDown!: (event: KeyboardEvent) => void;\n\n  @state()\n  currentPanelFocus!: number;\n\n  handlePanelOpenedBound!: (event: Event) => void;\n\n  constructor() {\n    super();\n    this.handlePanelOpenedBound = this.handlePanelOpened.bind(this);\n    this.addEventListener('kemet-opened', this.handlePanelOpenedBound);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('kemet-opened', this.handlePanelOpenedBound);\n    this.panels?.forEach((panel) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n    emitEvent(this, 'kemet-accordion-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    const newPanels = this.querySelectorAll('kemet-accordion-panel');\n\n    // Remove listeners from panels that are no longer in the DOM\n    if (this.panels) {\n      this.panels.forEach((oldPanel) => {\n        if (!Array.from(newPanels).includes(oldPanel)) {\n          oldPanel.removeEventListener('keydown', this.onKeyDown);\n        }\n      });\n    }\n\n    this.panels = newPanels;\n\n    this.panels.forEach((panel: HTMLKemetAccordionPanelElement, index) => {\n      panel.index = index;\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: Event) {\n    const customEvent = event as CustomEvent;\n    this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n      if (panel === customEvent.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n        if (panel !== customEvent.detail.element) {\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 default css`:host {\n  display: block;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/elements/accordion/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/accordion/styles.css.js

@@ -0,0 +1,10 @@
+// src/elements/accordion/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: block;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/accordion/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/accordion/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/accordion-panel/index.d.ts

@@ -0,0 +1,69 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion-panel
+ * @summary A blade for an accordion.
+ *
+ * @prop {boolean} opened - Determines the opened state of the panel
+ * @prop {string} maxHeight - Sets the max height of the panel's body
+ * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
+ *
+ * @slot trigger - The trigger button that opens and closes the panel.
+ * @slot body - The body content of the panel.
+ * @slot icon - The icon for the panel.
+ *
+ * @csspart trigger - Contains the trigger for the panel.
+ * @csspart body - Contains the body for the panel.
+ *
+ * @fires kemet-opened - Fires when a panel is opened
+ * @detail {HTMLElement} element - The accordion panel element
+ *
+ * @fires kemet-closed - Fires when a panel is closed
+ * @detail {HTMLElement} element - The accordion panel element
+ *
+ * @fires kemet-accordion-panel-mounted - Fired when the accordion panel is mounted to the DOM
+ * @detail {HTMLElement} element - The accordion panel element
+ *
+ */
+declare class KemetAccordionPanel extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean | undefined;
+    maxHeight: string;
+    slug: string;
+    index: number;
+    dom: string;
+    polarity?: 'light' | 'dark';
+    /** @internal */
+    focusableSelector: string;
+    /** @internal */
+    bodyElement: HTMLElement | null;
+    /** @internal */
+    bodyElementFirst: HTMLElement | null | undefined;
+    /** @internal */
+    bodyElementLast: HTMLElement | null | undefined;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+    /**
+     * Toggles the opened state of the panel.
+     * @method toggle
+     * @public
+     * @returns {void}
+     */
+    toggle(): void;
+    focusableBodyElements(): void;
+    a11y(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion-panel': KemetAccordionPanel;
+    }
+}
+
+export { KemetAccordionPanel as default };

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

@@ -0,0 +1,186 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "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/elements/accordion-panel/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  padding: 1.5rem 1rem;
+  border-bottom: 1px solid;
+}
+
+.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/index.ts
+var KemetAccordionPanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.opened = void 0;
+    this.maxHeight = "0px";
+    this.slug = "panel";
+    this.dom = "initializing";
+  }
+  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";
+    emitEvent(this, "kemet-accordion-panel-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;
+      emitEvent(this, "kemet-opened", { element: this });
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      this.maxHeight = "0px";
+      emitEvent(this, "kemet-closed", { element: this });
+    }
+    this.a11y();
+    this.focusableBodyElements();
+  }
+  render() {
+    return 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>
+    `;
+  }
+  /**
+   * Toggles the opened state of the panel.
+   * @method toggle
+   * @public
+   * @returns {void}
+   */
+  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 = [styles_css_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAccordionPanel.prototype, "opened", 2);
+__decorateClass([
+  property({ type: String, attribute: "max-height" })
+], KemetAccordionPanel.prototype, "maxHeight", 2);
+__decorateClass([
+  property({ type: String })
+], KemetAccordionPanel.prototype, "slug", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetAccordionPanel.prototype, "index", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAccordionPanel.prototype, "dom", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAccordionPanel.prototype, "polarity", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "focusableSelector", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "bodyElement", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "bodyElementFirst", 2);
+__decorateClass([
+  state()
+], KemetAccordionPanel.prototype, "bodyElementLast", 2);
+KemetAccordionPanel = __decorateClass([
+  customElement("kemet-accordion-panel")
+], KemetAccordionPanel);
+export {
+  KemetAccordionPanel as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/accordion-panel/index.ts","../../../src/utilities/events.ts","../../../src/elements/accordion-panel/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\n\nimport styles from './styles.css.ts';\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 * @fires kemet-opened - Fires when a panel is opened\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-closed - Fires when a panel is closed\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-accordion-panel-mounted - Fired when the accordion panel is mounted to the DOM\n * @detail {HTMLElement} element - The accordion panel element\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [styles];\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  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\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    emitEvent(this, 'kemet-accordion-panel-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\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', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-closed', { element: 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  /**\n   * Toggles the opened state of the panel.\n   * @method toggle\n   * @public\n   * @returns {void}\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 default css`*,\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;\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":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;AAC5C,SAAS,eAAe,UAAU,aAAa;;;ACDxC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AFkCf,IAAqB,sBAArB,cAAiD,WAAW;AAAA,EAA5D;AAAA;AAIE,kBAA8B;AAG9B,qBAAoB;AAGpB,gBAAe;AAMf,eAAc;AAAA;AAAA,EAqBd,eAAe;AACb,SAAK,oBAAoB;AACzB,SAAK,cAAc,KAAK,cAAc,eAAe;AACrD,SAAK,mBAAmB,KAAK,aAAa,cAAc,cAAc;AACtE,SAAK,kBAAkB,KAAK,aAAa,cAAc,aAAa;AAEpE,QAAI,KAAK,iBAAkB,MAAK,iBAAiB,MAAM,YAAY;AACnE,QAAI,KAAK,gBAAiB,MAAK,gBAAgB,MAAM,eAAe;AAEpE,cAAU,MAAM,iCAAiC;AAAA,MAC/C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,QAAQ,WAA+B;AACrC,QAAI,CAAC,UAAU,IAAI,QAAQ,KAAK,KAAK,WAAW,MAAM;AACpD,WAAK,YAAY,GAAG,KAAK,aAAa,YAAY;AAClD,gBAAU,MAAM,gBAAgB,EAAE,SAAS,KAAK,CAAC;AAAA,IACnD;AAEA,QAAI,UAAU,IAAI,QAAQ,KAAK,KAAK,WAAW,OAAO;AACpD,WAAK,YAAY;AACjB,gBAAU,MAAM,gBAAgB,EAAE,SAAS,KAAK,CAAC;AAAA,IACnD;AAEA,SAAK,KAAK;AACV,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,iBAIM,MAAM,KAAK,OAAO,CAAC;AAAA,mBACjB,CAAC,UAAyB,KAAK,cAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4DAKV,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,EAIxE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS;AACP,SAAK,SAAS,CAAC,KAAK;AAAA,EACtB;AAAA,EAEA,wBAAwB;AACtB,UAAM,oBAAoB,KAAK,aAAa,iBAAiB,KAAK,iBAAiB;AAEnF,QAAI,KAAK,QAAQ;AACf,yBAAmB,QAAQ,CAAC,YAAY;AACtC,gBAAQ,gBAAgB,UAAU;AAAA,MACpC,CAAC;AAAA,IACH,OAAO;AACL,yBAAmB,QAAQ,CAAC,YAAY;AACtC,gBAAQ,aAAa,YAAY,IAAI;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,OAAO;AACL,UAAM,UAAU,KAAK,YAAY,cAAc,UAAU;AACzD,UAAM,OAAO,KAAK,YAAY,cAAc,OAAO;AAEnD,aAAS,aAAa,MAAM,GAAG,KAAK,IAAI,SAAS;AACjD,aAAS,aAAa,iBAAiB,GAAG,KAAK,IAAI,UAAU;AAE7D,UAAM,aAAa,MAAM,GAAG,KAAK,IAAI,UAAU;AAC/C,UAAM,aAAa,mBAAmB,GAAG,KAAK,IAAI,SAAS;AAC3D,UAAM,aAAa,eAAe,GAAG,CAAC,KAAK,MAAM,EAAE;AAAA,EACrD;AAAA,EAEA,cAAc,OAAsB;AAClC,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,SAAS;AAClD,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AACF;AAjIqB,oBACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,oBAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GANhC,oBAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,oBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,oBAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,oBAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,oBAmBnB;AAIA;AAAA,EADC,MAAM;AAAA,GAtBY,oBAuBnB;AAIA;AAAA,EADC,MAAM;AAAA,GA1BY,oBA2BnB;AAIA;AAAA,EADC,MAAM;AAAA,GA9BY,oBA+BnB;AAIA;AAAA,EADC,MAAM;AAAA,GAlCY,oBAmCnB;AAnCmB,sBAArB;AAAA,EADC,cAAc,uBAAuB;AAAA,GACjB;","names":[]}

package/dist/elements/accordion-panel/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/accordion-panel/styles.css.js

@@ -0,0 +1,40 @@
+// src/elements/accordion-panel/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  padding: 1.5rem 1rem;
+  border-bottom: 1px solid;
+}
+
+.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;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/accordion-panel/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`*,\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;\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":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/elements/alert/index.d.ts

@@ -0,0 +1,90 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { T as TypeAppearance, d as TypeRoundedSizes } from '../../constants-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.js';
+
+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"
+}
+declare enum EnumBorderAppearances {
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom",
+    Left = "left"
+}
+/**
+ * @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 {EnumBorderAppearances} 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.
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @slot icon - The icon of the alert.
+ * @slot default - The contents of the alert.
+ *
+ * @fires kemet-opened - Fires when alert is opened.
+ * @detail {HTMLElement} element - The alert element
+ *
+ * @fires kemet-closed - Fires when alert is closed.
+ * @detail {HTMLElement} element - The alert element
+ *
+ * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM
+ * @detail {HTMLElement} element - The alert element
+ *
+ * @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-align-items - The alert's alignment.
+ *
+ */
+declare class KemetAlert extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean;
+    reveal: boolean;
+    closable: boolean;
+    appearance: TypeAppearance;
+    borderAppearance: string;
+    hidden: boolean;
+    overlay: string;
+    rounded: TypeRoundedSizes;
+    filled: boolean;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    private handleTransitionEnd;
+    private handleAnimationEnd;
+    shouldUpdate(prevProps: Map<string, never>): boolean;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+    private makeCloseBtn;
+    private handleMotion;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-alert': KemetAlert;
+    }
+}
+
+export { EnumBorderAppearances, EnumOverlayPositions, KemetAlert as default };