kemet-ui 1.3.1 → 2.0.0

package/dist/components/kemet-accordion/kemet-accordion.js

@@ -1,139 +1,129 @@
-import { html, css, LitElement } from 'lit';
-
-export default class KemetAccordion extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { stylesBase } from './styles';
+/**
+ * @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
+ *
+ */
+let KemetAccordion = class KemetAccordion extends LitElement {
+    constructor() {
+        super();
+        this.togglePanels = false;
+        // bindings
+        this.addEventListener('kemet-accordion-panel-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) => {
+            panel.removeEventListener('keydown', this.onKeyDown);
+            panel.addEventListener('keydown', this.onKeyDown);
+        });
+    }
+    handlePanelOpened(event) {
+        if (this.togglePanels) {
+            this.panels.forEach((panel) => {
+                if (panel !== event.detail) {
+                    panel.opened = false;
+                }
+            });
         }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The index value for the most recently opened panel
-       */
-      currentPanel: {
-        type: Number,
-      },
-      /**
-       * Support for closing all inactive panels when one is opened
-       */
-      togglePanels: {
-        type: Boolean,
-        attribute: 'toggle-panels',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.togglePanels = false;
-    this.currentPanel = undefined;
-
-    // bindings
-    this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));
-  }
-
-  firstUpdated() {
-    this.onKeyDown = event => this.handleKeyDown(event);
-  }
-
-  render() {
-    return html`<slot @slotchange=${event => this.handleSlotChange(event)}></slot>`;
-  }
-
-  handleSlotChange() {
-    this.panels = this.querySelectorAll('kemet-accordion-panel');
-
-    this.panels.forEach((panel) => {
-      panel.removeEventListener('keydown', this.onKeyDown);
-      panel.addEventListener('keydown', this.onKeyDown);
-    });
-  }
-
-  handlePanelOpened(event) {
-    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) {
+        switch (event.key) {
+            case 'Enter':
+            case 'Space':
+                event.preventDefault();
+                event.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;
         }
-      });
     }
-  }
-
-  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;
+    expandAll() {
+        this.panels.forEach((panel) => {
+            panel.opened = true;
+        });
     }
-
-    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) {
-    switch (event.key) {
-      case 'Enter':
-      case 'Space':
-        event.preventDefault();
-        event.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;
+    collapseAll() {
+        this.panels.forEach((panel) => {
+            panel.opened = false;
+        });
     }
-  }
-
-  expandAll() {
-    this.panels.forEach((panel) => {
-      panel.opened = true;
-    });
-  }
-
-  collapseAll() {
-    this.panels.forEach((panel) => {
-      panel.opened = false;
-    });
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-accordion') || customElements.define('kemet-accordion', KemetAccordion);
+};
+KemetAccordion.styles = [stylesBase];
+__decorate([
+    property({ type: Number })
+], KemetAccordion.prototype, "currentPanel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'toggle-panels ' })
+], KemetAccordion.prototype, "togglePanels", void 0);
+__decorate([
+    state()
+], KemetAccordion.prototype, "panels", void 0);
+__decorate([
+    state()
+], KemetAccordion.prototype, "onKeyDown", void 0);
+__decorate([
+    state()
+], KemetAccordion.prototype, "currentPanelFocus", void 0);
+KemetAccordion = __decorate([
+    customElement('kemet-accordion')
+], KemetAccordion);
+export default KemetAccordion;
+//# sourceMappingURL=kemet-accordion.js.map

package/dist/components/kemet-accordion/kemet-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-accordion.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/kemet-accordion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;GAUG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAqBpD;QACE,KAAK,EAAE,CAAC;QAfV,iBAAY,GAAY,KAAK,CAAC;QAiB5B,WAAW;QACX,IAAI,CAAC,gBAAgB,CAAC,8BAA8B,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3F,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAE7D,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5B,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACrD,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB,CAAC,KAAK;QACrB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;gBACjC,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,EAAE;oBAC1B,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;iBACtB;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,cAAc,CAAC,SAAS;QACtB,QAAQ,SAAS,EAAE;YACjB,KAAK,MAAM;gBACT,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;gBACtB,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC3C,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;gBACvB,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;gBACvB,MAAM;YACR;gBACE,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;gBAC3B,MAAM;SACT;QAED,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACtE,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC;YAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAEtE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;IAC5E,CAAC;IAED,aAAa,CAAC,KAAK;QACjB,QAAQ,KAAK,CAAC,GAAG,EAAE;YACjB,KAAK,OAAO,CAAC;YACb,KAAK,OAAO;gBACV,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;gBACrB,MAAM;YACR,KAAK,WAAW,CAAC;YACjB,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;gBAC5B,MAAM;YACR,KAAK,YAAY,CAAC;YAClB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;gBAC5B,MAAM;YACR,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBAC3B,MAAM;YACR,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;gBAC5B,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC;IAED,SAAS;QACP,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5B,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,WAAW;QACT,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5B,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAxHQ,qBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAC,CAAC;oDAC1B;AAI9B;IADC,KAAK,EAAE;8CACI;AAIZ;IADC,KAAK,EAAE;iDACuB;AAI/B;IADC,KAAK,EAAE;yDACkB;AAnBP,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAyHlC;eAzHoB,cAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\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@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Number })\n  currentPanel: number;\n\n  @property({ type: Boolean, attribute: 'toggle-panels '})\n  togglePanels: boolean = false;\n\n  /** @internal */\n  @state()\n  panels: any;\n\n  /** @internal */\n  @state()\n  onKeyDown: (event: any) => any;\n\n  /** @internal */\n  @state()\n  currentPanelFocus: number;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-accordion-panel-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) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event) {\n    if (this.togglePanels) {\n      this.panels.forEach((panel: any) => {\n        if (panel !== event.detail) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction) {\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) {\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        event.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  expandAll() {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  collapseAll() {\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"]}

package/dist/components/kemet-accordion/stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './kemet-accordion';
+import './kemet-accordion-panel';
+import '../kemet-tabs/kemet-tabs';
+import '../kemet-tabs/kemet-tab';
+import '../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

package/dist/components/kemet-accordion/stories.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import './kemet-accordion';
+import './kemet-accordion-panel';
+import '../kemet-tabs/kemet-tabs';
+import '../kemet-tabs/kemet-tab';
+import '../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Accordion',
+    component: 'kemet-accordion',
+};
+export default meta;
+const Template = ({ togglePanels = false, }) => html `
+  <kemet-accordion ?toggle-panels=${togglePanels} kemet-elevation="layer4">
+    <kemet-accordion-panel>
+      <h3 slot="trigger">Trigger 1</h3>
+      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
+      <div slot="body">
+        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
+      </div>
+    </kemet-accordion-panel>
+    <kemet-accordion-panel>
+      <h3 slot="trigger">Trigger 2</h3>
+      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
+      <div slot="body">
+        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
+      </div>
+    </kemet-accordion-panel>
+    <kemet-accordion-panel>
+      <h3 slot="trigger">Trigger 3</h3>
+      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
+      <div slot="body">
+        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
+      </div>
+    </kemet-accordion-panel>
+  </kemet-accordion>
+`;
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        currentPanel: 0,
+        togglePanels: true,
+    },
+};
+//# sourceMappingURL=stories.js.map

package/dist/components/kemet-accordion/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,yBAAyB,CAAC;AAEjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AAEvC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,YAAY,GAAG,KAAK,GACrB,EAAE,EAAE,CAAC,IAAI,CAAA;oCAC0B,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuB/C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,IAAI;KACnB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport './kemet-accordion';\nimport './kemet-accordion-panel';\n\nimport '../kemet-tabs/kemet-tabs';\nimport '../kemet-tabs/kemet-tab';\nimport '../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Accordion',\n  component: 'kemet-accordion',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  togglePanels = false,\n}) => html`\n  <kemet-accordion ?toggle-panels=${togglePanels} kemet-elevation=\"layer4\">\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 1</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 2</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 3</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n  </kemet-accordion>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    currentPanel: 0,\n    togglePanels: true,\n  },\n};\n"]}

package/dist/components/kemet-accordion/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const stylesBase: import("lit").CSSResult;
+export declare const stylesPanel: import("lit").CSSResult;

package/dist/components/kemet-accordion/styles.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+export const stylesBase = css `
+:host {
+  display: block;
+}
+`;
+export const stylesPanel = css `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    padding: 1.5rem 1rem;
+    border-bottom: 1px solid var(--kemet-color-background);
+  }
+
+  .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 var(--kemet-accordion-panel-transition-speed, 300ms) ease;
+  }
+
+  ::slotted([slot='body']) {
+    padding: 1rem 0;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/kemet-accordion/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAI,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7B,CAAC","sourcesContent":["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 var(--kemet-color-background);\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 var(--kemet-accordion-panel-transition-speed, 300ms) ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"]}

package/dist/components/kemet-accordion/types.d.ts

@@ -0,0 +1,9 @@
+export interface KemetAccordionInterface {
+    currentPanel: number;
+    togglePanels: boolean;
+}
+export interface KemetAccordionPanelInterface {
+    opened: boolean;
+    maxHeight: string;
+    slug: string;
+}

package/dist/components/kemet-accordion/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/kemet-accordion/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetAccordionInterface {\n  currentPanel: number,\n  togglePanels: boolean,\n}\n\nexport interface KemetAccordionPanelInterface {\n  opened: boolean,\n  maxHeight: string,\n  slug: string,\n}\n"]}

package/dist/components/kemet-alert/docs/stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-alert';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

package/dist/components/kemet-alert/docs/stories.js

@@ -0,0 +1,77 @@
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../kemet-alert';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Alert',
+    component: 'kemet-alert',
+};
+export default meta;
+const Template = ({ heading, text, icon, status, closable, border, opened, overlay, }) => {
+    const makeIcon = () => {
+        if (icon !== 'none') {
+            return html `<kemet-icon slot="icon" icon=${icon} size="24" ></kemet-icon>`;
+        }
+        return null;
+    };
+    return html `
+    <kemet-alert
+      status=${status}
+      ?closable=${closable}
+      ?opened=${opened}
+      border-status=${border}
+      overlay=${ifDefined(overlay !== 'none' ? overlay : null)}
+      kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>
+      ${makeIcon()}
+      <strong>${heading}</strong>
+      <br />
+      ${text}
+    </kemet-alert>
+  `;
+};
+export const Standard = {
+    render: (args) => Template(args),
+    args: {
+        heading: 'This is a heading.',
+        text: 'The brown fox jumped over the lazy dog.',
+        icon: 'gear',
+        status: 'standard',
+        closable: false,
+        border: 'left',
+        opened: true,
+        overlay: 'none',
+    },
+    argTypes: {
+        heading: {
+            control: { type: 'text' },
+        },
+        text: {
+            control: { type: 'text' },
+        },
+        icon: {
+            control: { type: 'select' },
+            options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],
+        },
+        status: {
+            control: { type: 'select' },
+            options: ['standard', 'primary', 'success', 'warning', 'error'],
+        },
+        closable: {
+            control: { type: 'boolean' },
+        },
+        border: {
+            control: { type: 'select' },
+            options: ['none', 'top', 'right', 'bottom', 'left'],
+        },
+        opened: {
+            control: { type: 'boolean' },
+        },
+        overlay: {
+            control: { type: 'select' },
+            options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

package/dist/components/kemet-alert/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAG1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO,IAAI,CAAA,gCAAgC,IAAI,2BAA2B,CAAC;SAC5E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;eAEE,MAAM;kBACH,QAAQ;gBACV,MAAM;sBACA,MAAM;gBACZ,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;qBACzC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7E,QAAQ,EAAE;gBACF,OAAO;;QAEf,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,oBAAoB;QAC7B,IAAI,EAAE,yCAAyC;QAC/C,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,EAAE,oBAAoB,CAAC;SAC/E;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAChE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SACpD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;SACrG;KACF;CACF,CAAC","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-alert';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\n\nconst meta: Meta = {\n  title: 'Components / Alert',\n  component: 'kemet-alert',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  heading,\n  text,\n  icon,\n  status,\n  closable,\n  border,\n  opened,\n  overlay,\n}) => {\n  const makeIcon = () => {\n    if (icon !== 'none') {\n      return html`<kemet-icon slot=\"icon\" icon=${icon} size=\"24\" ></kemet-icon>`;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-alert\n      status=${status}\n      ?closable=${closable}\n      ?opened=${opened}\n      border-status=${border}\n      overlay=${ifDefined(overlay !== 'none' ? overlay : null)}\n      kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>\n      ${makeIcon()}\n      <strong>${heading}</strong>\n      <br />\n      ${text}\n    </kemet-alert>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'gear',\n    status: 'standard',\n    closable: false,\n    border: 'left',\n    opened: true,\n    overlay: 'none',\n  },\n  argTypes: {\n    heading: {\n      control: { type: 'text' },\n    },\n    text: {\n      control: { type: 'text' },\n    },\n    icon: {\n      control: { type: 'select' },\n      options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['standard', 'primary', 'success', 'warning', 'error'],\n    },\n    closable: {\n      control: { type: 'boolean' },\n    },\n    border: {\n      control: { type: 'select' },\n      options: ['none', 'top', 'right', 'bottom', 'left'],\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    overlay: {\n      control: { type: 'select' },\n      options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],\n    },\n  }\n};\n"]}

package/dist/components/kemet-alert/kemet-alert.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+import { TypeStatus } from './types';
+/**
+ * @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 {string} borderStatus - Adds a border that indicates the status.
+ * @prop {boolean} hidden - Hides the element from document flow.
+ * @prop {string} overlay - Fixes the alert over content in specified position.
+ *
+ * @slot default - The contents of the alert.
+ *
+ * @event kemet-alert-opened - Fires when alert is opened.
+ * @event kemet-alert-closed - Fires when alert is closed.
+ *
+ * @csspart close - Container for the close button.
+ *
+ * @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.
+ * @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.
+ * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
+ * @cssproperty --kemet-alert-gap - The alert's gap. Default: var(--kemet-alert-padding).
+ * @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.
+ * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
+ *
+ */
+export default class KemetAlert extends LitElement {
+    static styles: import("lit").CSSResult[];
+    opened: boolean;
+    reveal: boolean;
+    closable: boolean;
+    status: TypeStatus;
+    borderStatus: string;
+    hidden: boolean;
+    overlay: string;
+    shouldUpdate(prevProps: any): boolean;
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    makeCloseBtn(): import("lit-html").TemplateResult<1>;
+    handleMotion(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-alert': KemetAlert;
+    }
+}