kemet-ui 1.4.0 → 2.0.0

package/dist/.storybook/decorators.d.ts

@@ -0,0 +1,2 @@
+export declare const marginSpacing: (StoryFn: any, context: any) => import("lit-html").TemplateResult<1>;
+export declare const handleThemeSwitching: (StoryFn: any, context: any) => any;

package/dist/.storybook/decorators.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import { useEffect, useGlobals } from '@storybook/addons';
+export const marginSpacing = (StoryFn, context) => {
+    const blackListComponents = ['kemet-alert'];
+    // console.log(context);
+    if (blackListComponents.indexOf(context.component) === -1) {
+        return html `<div kemet-margin="tiny:normal">${StoryFn()}</div>`;
+    }
+};
+export const handleThemeSwitching = (StoryFn, context) => {
+    const [{ theme }, updateGlobals] = useGlobals();
+    useEffect(() => {
+        if (context.viewMode === 'story') {
+            if (theme === 'light') {
+                updateGlobals({ backgrounds: { name: 'Gray 1', value: '#eff2f1' } });
+            }
+            if (theme === 'dark') {
+                updateGlobals({ backgrounds: { name: 'Gray 9', value: '#262626' } });
+            }
+            document.documentElement.setAttribute('theme', theme);
+        }
+        else {
+            document.documentElement.setAttribute('theme', 'light');
+        }
+    }, [theme]);
+    return StoryFn();
+};
+//# sourceMappingURL=decorators.js.map

package/dist/.storybook/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../.storybook/decorators.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;IAChD,MAAM,mBAAmB,GAAG,CAAC,aAAa,CAAC,CAAC;IAE5C,wBAAwB;IAExB,IAAI,mBAAmB,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE;QACzD,OAAO,IAAI,CAAA,mCAAmC,OAAO,EAAE,QAAQ,CAAC;KACjE;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAY,EAAE,OAAO,EAAE,EAAE;IAC5D,MAAM,CAAC,EAAC,KAAK,EAAC,EAAE,aAAa,CAAC,GAAG,UAAU,EAAE,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,QAAQ,KAAK,OAAO,EAAE;YAChC,IAAI,KAAK,KAAK,OAAO,EAAE;gBACrB,aAAa,CAAC,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;aACtE;YAED,IAAI,KAAK,KAAK,MAAM,EAAE;gBACpB,aAAa,CAAC,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;aACtE;YAED,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACvD;aAAM;YACL,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;SACzD;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,EAAE,CAAC;AACnB,CAAC,CAAA","sourcesContent":["import { html } from 'lit';\nimport { useEffect, useGlobals } from '@storybook/addons';\n\nexport const marginSpacing = (StoryFn, context) => {\n  const blackListComponents = ['kemet-alert'];\n\n  // console.log(context);\n\n  if (blackListComponents.indexOf(context.component) === -1) {\n    return html`<div kemet-margin=\"tiny:normal\">${StoryFn()}</div>`;\n  }\n};\n\nexport const handleThemeSwitching = (StoryFn: any, context) => {\n  const [{theme}, updateGlobals] = useGlobals();\n\n  useEffect(() => {\n    if (context.viewMode === 'story') {\n      if (theme === 'light') {\n        updateGlobals({ backgrounds: { name: 'Gray 1', value: '#eff2f1' } });\n      }\n\n      if (theme === 'dark') {\n        updateGlobals({ backgrounds: { name: 'Gray 9', value: '#262626' } });\n      }\n\n      document.documentElement.setAttribute('theme', theme);\n    } else {\n      document.documentElement.setAttribute('theme', 'light');\n    }\n  }, [theme]);\n\n  return StoryFn();\n}\n"]}

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

@@ -0,0 +1,51 @@
+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.
+ *
+ * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.
+ *
+ * @csspart trigger - Contains the trigger for the panel.
+ * @csspart body - Contains the body for the panel.
+ *
+ * @event kemet-accordion-panel-opened - Fires when a panel is opened
+ * @event kemet-accordion-panel-closed - Fires when a panel is closed
+ *
+ */
+export default class KemetAccordionPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    opened: boolean | undefined;
+    maxHeight: string;
+    slug: string;
+    /** @internal */
+    focusableSelector: string;
+    /** @internal */
+    bodyElement: HTMLElement | null;
+    /** @internal */
+    bodyElementFirst: HTMLElement | null | undefined;
+    /** @internal */
+    bodyElementLast: HTMLElement | null | undefined;
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    toggle(): void;
+    focusableBodyElements(): void;
+    a11y(): void;
+    handleKeyDown(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion-panel': KemetAccordionPanel;
+    }
+}

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

@@ -1,7 +1,8 @@
-import { html, css, LitElement } from 'lit';
-import { emitEvent } from '../../utilities/misc/events.js';
-import '../kemet-icon/kemet-icon.js';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesPanel } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -26,100 +27,39 @@ import '../kemet-icon/kemet-icon.js';
  * @event kemet-accordion-panel-closed - Fires when a panel is closed
  *
  */
-
-export default class KemetAccordionPanel extends LitElement {
-  static get styles() {
-    return [
-      css`
-        *,
-        *::before,
-        *::after {
-          box-sizing: border-box;
-        }
-
-        :host {
-          display: block;
-          padding: 1.5rem 1rem;
-          border-bottom: 1px solid var(--kemet-color-primary);
-        }
-
-        .trigger {
-          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;
+let KemetAccordionPanel = class KemetAccordionPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = undefined;
+        this.maxHeight = '0px';
+        this.slug = 'panel';
+    }
+    firstUpdated() {
+        var _a, _b;
+        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 = (_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.querySelector(':first-child');
+        this.bodyElementLast = (_b = this.bodyElement) === null || _b === void 0 ? void 0 : _b.querySelector(':last-child');
+        if (this.bodyElementFirst)
+            this.bodyElementFirst.style.marginTop = '0';
+        if (this.bodyElementLast)
+            this.bodyElementLast.style.marginBottom = '0';
+    }
+    updated(prevProps) {
+        var _a;
+        if (!prevProps.get('opened') && this.opened === true) {
+            this.maxHeight = `${(_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.offsetHeight}px`;
+            emitEvent(this, 'kemet-accordion-panel-opened', this);
         }
-
-        ::slotted([slot='body']) {
-          padding: 1rem 0;
+        if (prevProps.get('opened') && this.opened === false) {
+            this.maxHeight = '0px';
+            emitEvent(this, 'kemet-accordion-panel-closed', this);
         }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      opened: {
-        type: Boolean,
-        reflect: true,
-      },
-      maxHeight: {
-        type: String,
-        attribute: 'max-height',
-      },
-      slug: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.opened = undefined;
-    this.maxHeight = '0px';
-    this.slug = 'panel';
-  }
-
-  firstUpdated() {
-    /** @internal */
-    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-accordion-panel-opened', this);
-    }
-
-    if (prevProps.get('opened') && this.opened === false) {
-      this.maxHeight = '0px';
-      emitEvent(this, 'kemet-accordion-panel-closed', this);
+        this.a11y();
+        this.focusableBodyElements();
     }
-
-    this.a11y();
-    this.focusableBodyElements();
-  }
-
-  render() {
-    return html`
+    render() {
+        return html `
       <button
         class="trigger"
         part="trigger"
@@ -133,44 +73,64 @@ export default class KemetAccordionPanel extends LitElement {
         <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();
+    toggle() {
+        this.opened = !this.opened;
+    }
+    focusableBodyElements() {
+        var _a;
+        const focusableElements = (_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.focusableSelector);
+        if (this.opened) {
+            focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.forEach((element) => {
+                element.removeAttribute('tabindex');
+            });
+        }
+        else {
+            focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.forEach((element) => {
+                element.setAttribute('tabindex', '-1');
+            });
+        }
+    }
+    a11y() {
+        var _a, _b;
+        const trigger = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.trigger');
+        const body = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.body');
+        trigger === null || trigger === void 0 ? void 0 : trigger.setAttribute('id', `${this.slug}-button`);
+        trigger === null || trigger === void 0 ? void 0 : trigger.setAttribute('aria-controls', `${this.slug}-content`);
+        body === null || body === void 0 ? void 0 : body.setAttribute('id', `${this.slug}-content`);
+        body === null || body === void 0 ? void 0 : body.setAttribute('aria-labelledby', `${this.slug}-button`);
+        body === null || body === void 0 ? void 0 : body.setAttribute('aria-hidden', `${!this.opened}`);
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Space' || event.key === 'Enter') {
+            this.toggle();
+        }
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-accordion-panel') || customElements.define('kemet-accordion-panel', KemetAccordionPanel);
+};
+KemetAccordionPanel.styles = [stylesPanel];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetAccordionPanel.prototype, "opened", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-height' })
+], KemetAccordionPanel.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: String })
+], KemetAccordionPanel.prototype, "slug", void 0);
+__decorate([
+    state()
+], KemetAccordionPanel.prototype, "focusableSelector", void 0);
+__decorate([
+    state()
+], KemetAccordionPanel.prototype, "bodyElement", void 0);
+__decorate([
+    state()
+], KemetAccordionPanel.prototype, "bodyElementFirst", void 0);
+__decorate([
+    state()
+], KemetAccordionPanel.prototype, "bodyElementLast", void 0);
+KemetAccordionPanel = __decorate([
+    customElement('kemet-accordion-panel')
+], KemetAccordionPanel);
+export default KemetAccordionPanel;
+//# sourceMappingURL=kemet-accordion-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-accordion-panel.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/kemet-accordion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesPanel } from './styles';\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 * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @event kemet-accordion-panel-opened - Fires when a panel is opened\n * @event kemet-accordion-panel-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  /** @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) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-accordion-panel-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-accordion-panel-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 => 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) {\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"]}

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/**
+ * @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
+ *
+ */
+export default class KemetAccordion extends LitElement {
+    static styles: import("lit").CSSResult[];
+    currentPanel: number;
+    togglePanels: boolean;
+    /** @internal */
+    panels: any;
+    /** @internal */
+    onKeyDown: (event: any) => any;
+    /** @internal */
+    currentPanelFocus: number;
+    constructor();
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    handleSlotChange(): void;
+    handlePanelOpened(event: any): void;
+    navigatePanels(direction: any): void;
+    handleKeyDown(event: any): void;
+    expandAll(): void;
+    collapseAll(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion': KemetAccordion;
+    }
+}

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

@@ -1,5 +1,7 @@
-import { html, css, LitElement } from 'lit';
-
+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
@@ -11,135 +13,117 @@ import { html, css, LitElement } from 'lit';
  * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
  *
  */
-
-export default class KemetAccordion extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
+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 {
-      currentPanel: {
-        type: Number,
-      },
-      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