kemet-ui 1.4.0 → 2.0.1

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":";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,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,IAAqB,mBAAmB,GAAxC,MAAqB,mBAAoB,SAAQ,UAAU;IAA3D;;QAIE,WAAM,GAAwB,SAAS,CAAC;QAGxC,cAAS,GAAW,KAAK,CAAC;QAG1B,SAAI,GAAW,OAAO,CAAC;IA+FzB,CAAC;IA7EC,YAAY;;QACV,IAAI,CAAC,iBAAiB,GAAG,oLAAoL,CAAC;QAC9M,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QACxE,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAEtE,IAAI,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;QACvE,IAAI,IAAI,CAAC,eAAe;YAAE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC;IAC1E,CAAC;IAED,OAAO,CAAC,SAAS;;QACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YACpD,IAAI,CAAC,SAAS,GAAG,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,YAAY,IAAI,CAAC;YACvD,SAAS,CAAC,IAAI,EAAE,8BAA8B,EAAE,IAAI,CAAC,CAAC;SACvD;QAED,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACpD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,SAAS,CAAC,IAAI,EAAE,8BAA8B,EAAE,IAAI,CAAC,CAAC;SACvD;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;mBACjB,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;;;;4DAKO,IAAI,CAAC,SAAS;;;KAGrE,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,qBAAqB;;QACnB,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAErF,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBACrC,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBACrC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,IAAI;;QACF,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAC3D,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAErD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC;QACnD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,IAAI,UAAU,CAAC,CAAC;QAE/D,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,UAAU,CAAC,CAAC;QACjD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC;QAC7D,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,aAAa,CAAC,KAAK;QACjB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YAClD,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;IACH,CAAC;CACF,CAAA;AAxGQ,0BAAM,GAAG,CAAC,WAAW,CAAC,CAAC;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACH;AAGxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;sDACzB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACJ;AAIvB;IADC,KAAK,EAAE;8DACkB;AAI1B;IADC,KAAK,EAAE;wDACwB;AAIhC;IADC,KAAK,EAAE;6DACyC;AAIjD;IADC,KAAK,EAAE;4DACwC;AA1B7B,mBAAmB;IADvC,aAAa,CAAC,uBAAuB,CAAC;GAClB,mBAAmB,CAyGvC;eAzGoB,mBAAmB","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

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":"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","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;