@momentum-ui/web-components 2.16.5 → 2.16.8

package/src/assets/images/wxm.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6545 22.8872C19.6725 22.9045 19.6934 22.9272 19.7155 22.952C19.6831 22.9179 19.658 22.8905 19.6545 22.8872ZM4.28412 22.9523C4.30646 22.9272 4.3273 22.9045 4.34537 22.8872C4.34186 22.8905 4.31675 22.9179 4.28412 22.9523ZM22.6339 19.3749C22.716 19.4503 22.7981 19.5262 22.8804 19.6047C22.7772 19.5034 22.6718 19.4047 22.5666 19.3086C20.6057 17.5167 18.271 16.2816 15.7432 15.6767H15.7404C14.5228 15.373 13.2676 15.211 12 15.211C10.732 15.211 9.47677 15.373 8.2592 15.6767H8.25694C3.58043 16.7956 0.898748 19.8542 0.561341 20.1804C0.240001 20.5636 0 21.0189 0 21.6719C0 22.6954 0.778497 23.9993 2.28227 23.9993C3.4175 23.9993 3.97106 23.3122 4.24621 22.9951C6.32864 20.9303 9.06506 19.797 12 19.797C14.9348 19.797 17.6712 20.9303 19.7534 22.9951C20.0285 23.3122 20.5823 23.9993 21.7178 23.9993C23.2213 23.9993 23.9996 22.6954 23.9996 21.6719C23.9996 20.5221 23.256 19.9848 22.6339 19.3749Z" fill="#8A5592"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25694 8.3226C7.59668 5.63479 6.27366 3.12161 4.34537 1.11208C4.1134 0.890876 3.57466 0 2.28227 0C0.778497 0 0 1.30392 0 2.32741C0 3.14489 0.376319 3.65284 0.817158 4.09752C0.854313 4.13473 1.79473 5.04155 1.11942 4.39465C1.2226 4.49589 1.32779 4.59459 1.43323 4.69077C3.18328 6.72055 4.137 9.27928 4.137 12C4.137 14.7207 3.18328 17.2795 1.43323 19.3092C1.32779 19.4054 1.2226 19.5041 1.11942 19.6053C1.20176 19.5269 1.28385 19.451 1.36595 19.3755C0.744103 19.9855 0 20.5228 0 21.6726C0 22.6961 0.778497 24 2.28227 24C3.57466 24 4.1134 23.1091 4.34537 22.8879C6.27366 20.8784 7.59668 18.3652 8.25694 15.6774C8.53811 14.4879 8.68597 13.2553 8.68597 12C8.68597 10.7447 8.53811 9.51213 8.25694 8.3226Z" fill="#35BCE1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7155 1.04728C19.6934 1.07209 19.6725 1.09461 19.6545 1.11208C19.658 1.10853 19.6831 1.08145 19.7155 1.04728ZM4.28412 1.04728C4.31675 1.08145 4.34186 1.10853 4.34537 1.11208C4.3273 1.09461 4.30646 1.07209 4.28412 1.04728ZM23.9996 2.32741C23.9996 1.30392 23.2213 0 21.7178 0C20.5823 0 20.0285 0.687391 19.7534 1.00426C17.6712 3.06871 14.9348 4.2023 12 4.2023C9.06506 4.2023 6.32864 3.06871 4.24621 1.00426C3.97106 0.687391 3.4175 0 2.28227 0C0.778497 0 0 1.30392 0 2.32741C0 3.07706 0.241005 3.55971 1.36595 4.62445C3.16671 6.32851 6.31383 7.85767 8.25694 8.3226H8.2592C9.47677 8.62631 10.732 8.78829 12 8.78829C13.2676 8.78829 14.5228 8.62631 15.7404 8.3226H15.7432C18.5223 7.65773 21.0473 6.22246 22.5666 4.69076C23.3584 3.89252 23.9996 3.38153 23.9996 2.32741Z" fill="#E7AA4B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5679 19.3092C20.8181 17.2795 19.8639 14.7207 19.8639 12C19.8639 6.88936 23.1225 4.15928 23.184 4.09752C23.6248 3.65284 24.0009 3.14489 24.0009 2.32741C24.0009 1.30392 23.2227 0 21.7191 0C20.4265 0 19.8878 0.890876 19.6558 1.11208C17.7275 3.12161 16.4047 5.63479 15.7445 8.3226C15.4633 9.51213 15.3152 10.7447 15.3152 12C15.3152 13.2553 15.4633 14.4879 15.7445 15.6774C16.4047 18.3652 17.7275 20.8784 19.6558 22.8879C19.8878 23.1091 20.4265 24 21.7191 24C23.2227 24 24.0009 22.6961 24.0009 21.6726C24.0009 20.7364 23.3537 20.0634 22.5679 19.3092Z" fill="#DE4A67"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25694 8.3226C5.72889 7.71772 3.39391 6.48264 1.43323 4.69076C0.799334 4.05222 0 3.51871 0 2.32741C0 1.30392 0.778497 0 2.28227 0C3.57466 0 4.11341 0.890876 4.34537 1.11208C6.27367 3.12161 7.59669 5.63479 8.25694 8.3226Z" fill="#51B15D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.743 15.676C18.2264 16.2702 20.5463 17.4726 22.4854 19.2139C22.5685 19.2886 23.0889 19.8071 23.1833 19.9023C23.6236 20.3467 23.9994 20.8542 23.9994 21.6712C23.9994 22.6946 23.2212 23.9986 21.7177 23.9986C20.425 23.9986 19.8838 23.1077 19.6516 22.8865C17.7235 20.877 16.4033 18.3638 15.743 15.676Z" fill="#073E54"/>
+</svg>

package/src/components/accordion/Accordion.mdx

@@ -0,0 +1,74 @@
+import { Meta, Story, Props } from "@storybook/addon-docs";
+import { Accordion } from "./Accordion.ts";
+
+# Accordion
+
+The `<md-accordion/>` component
+
+### Attributes
+
+- `multiple` : boolean - if true, one can view multiple expanded accordions at once, else, one expanded accordion at a time.
+
+### A simple usage of default accordion 
+
+Renders an accordion, one accordion can be expanded at one time.
+
+```html
+ <md-accordion class="part-demo">
+    <md-accordion-item slot="accordion-item" label="Header №1" expanded class="part-demo">
+      <div slot="header-content" class="test-class">
+        <h4>Slotted Header Content</h4>
+        <p>lorem ipsum ploppum bootum flossy noop</p>
+      </div>
+      <div>Panel №1</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №2">
+      <div>Panel №2</div>
+      <md-input type="text"></md-input>
+      <md-input type="text" disabled></md-input>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №3" expanded>
+      <div>Panel №3</div>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №4" disabled>
+      <div>Panel №4</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №5">
+      <div>Panel №5</div>
+    </md-accordion-item>
+  </md-accordion>
+```
+
+### A simple usage of multiline accordion 
+
+Renders an accordion, one can view multiple expanded accordions at a time.
+
+```html
+<md-accordion multiple>
+    <md-accordion-item slot="accordion-item" label="Header №1" expanded>
+      <div>Panel №1</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №2" expanded>
+      <div>Panel №2</div>
+      <md-input type="text"></md-input>
+      <md-input type="text" disabled></md-input>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №3">
+      <div>Panel №3</div>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №4" disabled expanded>
+      <div>Panel №4</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №5">
+      <div>Panel №5</div>
+    </md-accordion-item>
+</md-accordion>
+```
+
+
+
+<Props of={"md-accordion"} />

package/src/components/accordion/Accordion.stories.ts

@@ -0,0 +1,40 @@
+import type { Args, Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit-html";
+import "./Accordion";
+import mdx from "./Accordion.mdx";
+import "./AccordionItem";
+
+const render = (args: Args) => html`
+  <md-accordion ?multiple=${args.multiple}>
+    <md-accordion-item slot="accordion-item" label="Header №1" ?expanded=${args.expanded}>
+      <div>Panel №1</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №2" ?disabled=${args.disabled}>
+      <div>Panel №2</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №3">
+      <div>Panel №3</div>
+    </md-accordion-item>
+  </md-accordion>
+`;
+
+export const Accordion: StoryObj = {
+  args: {},
+  render: render
+};
+
+const meta: Meta = {
+  title: "Components/Accordion",
+  component: "md-accordion",
+  argTypes: {},
+  parameters: {
+    a11y: {
+      element: "md-accordion"
+    },
+    docs: {
+      page: mdx
+    }
+  }
+};
+
+export default meta;

package/src/components/accordion/Accordion.test.ts

@@ -0,0 +1,151 @@
+import { elementUpdated, fixture, fixtureCleanup, html, nextFrame } from "@open-wc/testing-helpers";
+import { Accordion } from "./Accordion";
+import "./Accordion";
+import "./AccordionItem";
+import { AccordionItem } from "./AccordionItem";
+import "@/components/input/Input";
+
+describe("Accordion", () => {
+  let accordion: Accordion.ELEMENT;
+  let accordionItems: AccordionItem.ELEMENT[];
+
+  beforeEach(async () => {
+    accordion = await fixture(html`
+      <md-accordion>
+        <md-accordion-item slot="accordion-item" label="Header №1" expanded>
+          <div>Panel №1</div>
+          <md-input type="text"></md-input>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №2" disabled>
+          <div>Panel №2</div>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №3">
+          <div>Panel №3</div>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №4" expanded>
+          <div>Panel №4</div>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №5">
+          <div>Panel №5</div>
+        </md-accordion-item>
+      </md-accordion>
+    `);
+    accordionItems = accordion.slotted as AccordionItem.ELEMENT[];
+  });
+  afterEach(fixtureCleanup);
+
+  test("slotted item", async () => {
+    expect(accordion.slotItem.name).toBe("accordion-item");
+  });
+
+  test("should correct navigate between items using keyboard", async () => {
+    const createEvent = (code: string) =>
+      new KeyboardEvent("keydown", {
+        code
+      });
+
+    const arrowDown = createEvent("ArrowDown");
+    const arrowUp = createEvent("ArrowUp");
+    const home = createEvent("Home");
+    const end = createEvent("End");
+    const enter = createEvent("Enter");
+    const space = createEvent("Space");
+    const keyA = createEvent("KeyA");
+
+    await elementUpdated(accordionItems[0]);
+
+    accordionItems[0].header.dispatchEvent(arrowDown);
+    await nextFrame();
+
+    expect(document.activeElement).toEqual(accordionItems[0]);
+
+    accordionItems[0].header.dispatchEvent(arrowDown);
+    await nextFrame();
+
+    expect(document.activeElement).toEqual(accordionItems[2]);
+
+    accordionItems[0].header.dispatchEvent(arrowDown);
+    await nextFrame();
+
+    accordionItems[0].header.dispatchEvent(arrowDown);
+    await nextFrame();
+
+    accordionItems[0].header.dispatchEvent(arrowDown);
+    await nextFrame();
+
+    expect(document.activeElement).toEqual(accordionItems[0]);
+
+    accordionItems[0].header.dispatchEvent(arrowUp);
+    await nextFrame();
+
+    accordionItems[0].header.dispatchEvent(arrowUp);
+    await nextFrame();
+
+    accordionItems[0].header.dispatchEvent(arrowUp);
+    await nextFrame();
+
+    expect(document.activeElement).toEqual(accordionItems[2]);
+
+    accordionItems[4].header.dispatchEvent(home);
+    await nextFrame();
+
+    expect(document.activeElement).toEqual(accordionItems[0]);
+
+    accordionItems[0].header.dispatchEvent(end);
+    await nextFrame();
+
+    expect(document.activeElement).toEqual(accordionItems[4]);
+
+    accordionItems[4].header.dispatchEvent(enter);
+    await nextFrame();
+
+    expect(accordionItems[4].expanded).toBeTruthy();
+    expect(document.activeElement).toEqual(accordionItems[4]);
+
+    accordionItems[4].header.dispatchEvent(arrowUp);
+    await nextFrame();
+
+    accordionItems[3].header.dispatchEvent(space);
+    await nextFrame();
+
+    expect(accordionItems[4].expanded).toBeFalsy();
+    expect(accordionItems[3].expanded).toBeTruthy();
+    expect(document.activeElement).toEqual(accordionItems[3]);
+
+    accordionItems[3].header.dispatchEvent(keyA);
+    expect(document.activeElement).toEqual(accordionItems[3]);
+  });
+
+  test("should correct select accordion item by click", async () => {
+    const mouseDown = new MouseEvent("mousedown");
+    accordionItems[1].header.dispatchEvent(mouseDown);
+    await nextFrame();
+
+    expect(accordionItems[1].expanded).toBeFalsy();
+
+    accordionItems[3].header.dispatchEvent(mouseDown);
+    await nextFrame();
+
+    expect(accordionItems[3].expanded).toBeTruthy();
+
+    accordionItems[4].header.dispatchEvent(mouseDown);
+    await nextFrame();
+
+    expect(accordionItems[3].expanded).toBeFalsy();
+    expect(accordionItems[4].expanded).toBeTruthy();
+
+    accordion.multiple = true;
+    await elementUpdated(accordion);
+
+    accordionItems[0].header.dispatchEvent(mouseDown);
+    await nextFrame();
+
+    expect(accordionItems[0].expanded).toBeTruthy();
+    expect(accordionItems[4].expanded).toBeTruthy();
+
+    accordionItems[0].header.dispatchEvent(mouseDown);
+    await nextFrame();
+
+    expect(accordionItems[0].expanded).toBeFalsy();
+  });
+});

package/src/components/accordion/Accordion.ts

@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Key } from "@/constants";
+import { SlottedMixin } from "@/mixins";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property, PropertyValues, query } from "lit-element";
+import { AccordionItem } from "./AccordionItem";
+import styles from "./scss/module.scss";
+
+export namespace Accordion {
+  @customElementWithCheck("md-accordion")
+  export class ELEMENT extends SlottedMixin(LitElement) {
+    @property({ type: Boolean, reflect: true }) multiple = false;
+
+    @query('slot[name="accordion-item"]') accordionItemSlotElement!: HTMLSlotElement;
+
+    get slotItem() {
+      return this.accordionItemSlotElement;
+    }
+
+    filterSlotted() {
+      return this.accordionItemSlotElement.assignedElements() as HTMLElement[];
+    }
+
+    private switchFocusedAccordionItem(direction: number) {
+      const focusedAccordionItemIndex = this.slotted.findIndex((accordionItem) =>
+        (accordionItem as AccordionItem.ELEMENT).hasAttribute("focus-visible")
+      );
+
+      const accordionItemsCount = this.slotted.length;
+      let nextFocusedAccordionItemIndex = focusedAccordionItemIndex;
+
+      nextFocusedAccordionItemIndex =
+        (accordionItemsCount + nextFocusedAccordionItemIndex + direction) % accordionItemsCount;
+      while ((this.slotted[nextFocusedAccordionItemIndex] as AccordionItem.ELEMENT).disabled) {
+        nextFocusedAccordionItemIndex =
+          (accordionItemsCount + nextFocusedAccordionItemIndex + direction) % accordionItemsCount;
+      }
+      this.focusAccordionItem(this.slotted[nextFocusedAccordionItemIndex] as AccordionItem.ELEMENT);
+    }
+
+    private focusAccordionItem(accordionItem: AccordionItem.ELEMENT) {
+      if (!accordionItem.hasAttribute("focus-visible")) {
+        requestAnimationFrame(() => accordionItem.header.focus());
+      }
+    }
+
+    private setActiveAccordionItem(accordionItem: AccordionItem.ELEMENT) {
+      if (!this.multiple) {
+        this.slotted.forEach((item) => {
+          const anotherAccordionItem = item as AccordionItem.ELEMENT;
+          if (anotherAccordionItem.expanded && !item.isEqualNode(accordionItem)) {
+            anotherAccordionItem.expanded = false;
+          }
+        });
+        accordionItem.expanded = true;
+      } else {
+        accordionItem.expanded = !accordionItem.expanded;
+      }
+    }
+
+    private setupExpandedAccordionItems() {
+      if (!this.multiple) {
+        this.slotted
+          .filter((accordionItem) => (accordionItem as AccordionItem.ELEMENT).expanded)
+          .forEach((accordionItem, index) => {
+            const item = accordionItem as AccordionItem.ELEMENT;
+            if (item.expanded && index > 0) {
+              item.expanded = false;
+            }
+          });
+      }
+    }
+
+    private handleAccordionItemFocus = () => {
+      this.toggleAttribute("focusable", true);
+    };
+
+    private handleAccordionItemBlur = () => {
+      this.toggleAttribute("focusable", false);
+    };
+
+    private setupFocusAccordionItems() {
+      this.slotted.forEach((header) => {
+        header.addEventListener("focus", this.handleAccordionItemFocus);
+        header.addEventListener("blur", this.handleAccordionItemBlur);
+      });
+    }
+
+    private removeFocusAccordionItems() {
+      this.slotted.forEach((header) => {
+        header.removeEventListener("focus", this.handleAccordionItemFocus);
+        header.removeEventListener("blur", this.handleAccordionItemBlur);
+      });
+    }
+
+    handleKeyDown(event: CustomEvent<AccordionItem.AccordionEvent>) {
+      const { srcEvent } = event.detail;
+      const { code } = srcEvent as KeyboardEvent;
+
+      switch (code) {
+        case Key.Space:
+        case Key.Enter: {
+          const { target } = event;
+          if (target) {
+            this.setActiveAccordionItem(target as AccordionItem.ELEMENT);
+          }
+          break;
+        }
+        case Key.ArrowDown: {
+          this.switchFocusedAccordionItem(1);
+          break;
+        }
+        case Key.ArrowUp: {
+          this.switchFocusedAccordionItem(-1);
+          break;
+        }
+        case Key.Home: {
+          const firstAccordionItem = this.slotted[0] as AccordionItem.ELEMENT;
+          this.focusAccordionItem(firstAccordionItem);
+          break;
+        }
+        case Key.End: {
+          const lastAccordionItem = this.slotted[this.slotted.length - 1] as AccordionItem.ELEMENT;
+          this.focusAccordionItem(lastAccordionItem);
+          break;
+        }
+        default:
+          break;
+      }
+    }
+
+    handleClick(event: CustomEvent<AccordionItem.AccordionEvent>) {
+      const { target } = event;
+      const accordionItem = this.slotted.find((item) =>
+        (item as AccordionItem.ELEMENT).isSameNode(target as HTMLElement)
+      );
+      if (accordionItem) {
+        this.setActiveAccordionItem(accordionItem as AccordionItem.ELEMENT);
+      }
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("slotted")) {
+        this.setupExpandedAccordionItems();
+        this.setupFocusAccordionItems();
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("accordion-item-keydown", this.handleKeyDown as EventListener);
+      this.addEventListener("accordion-item-click", this.handleClick as EventListener);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("accordion-item-keydown", this.handleKeyDown as EventListener);
+      this.removeEventListener("accordion-item-click", this.handleClick as EventListener);
+      this.removeFocusAccordionItems();
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      return html`
+        <div class="md-accordion" part="accordion">
+          <slot name="accordion-item"></slot>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-accordion": Accordion.ELEMENT;
+  }
+}

package/src/components/accordion/AccordionItem.test.ts

@@ -0,0 +1,124 @@
+import { elementUpdated, fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
+import "./Accordion";
+import { Accordion } from "./Accordion";
+import "./AccordionItem";
+import { AccordionItem } from "./AccordionItem";
+
+describe("AccordionItem", () => {
+  let accordion: Accordion.ELEMENT;
+  let accordionItems: AccordionItem.ELEMENT[];
+
+  beforeEach(async () => {
+    accordion = await fixture(html`
+      <md-accordion>
+        <md-accordion-item slot="accordion-item" label="Header №1">
+          <div>Panel №1</div>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №2">
+          <div>Panel №2</div>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №3">
+          <div>Panel №3</div>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №4">
+          <div>Panel №4</div>
+        </md-accordion-item>
+        <md-accordion-item slot="accordion-item" label="Header №5">
+          <div>Panel №5</div>
+        </md-accordion-item>
+      </md-accordion>
+    `);
+    accordionItems = accordion.slotted as AccordionItem.ELEMENT[];
+  });
+  afterEach(fixtureCleanup);
+
+  test("should correct render label", async () => {
+    expect(accordionItems[0].label).toEqual("Header №1");
+    expect(accordionItems[0].header.getAttribute("aria-label")).toEqual("Header №1");
+    expect(accordionItems[4].label).toEqual("Header №5");
+    expect(accordionItems[4].header.getAttribute("aria-label")).toEqual("Header №5");
+
+    accordionItems[0].label = "";
+    await elementUpdated(accordionItems[0]);
+    expect(accordionItems[0].header.hasAttribute("aria-label")).toBeFalsy();
+  });
+
+  test("should correct set expanded", async () => {
+    accordionItems[2].expanded = true;
+    await elementUpdated(accordionItems[2]);
+    expect(accordionItems[2].expanded).toBeTruthy();
+    expect(accordionItems[2].header.getAttribute("aria-expanded")).toEqual("true");
+  });
+
+  test("should correct set disabled", async () => {
+    expect(accordionItems[2].header.hasAttribute("tabindex")).toBeFalsy();
+    accordionItems[2].disabled = true;
+    await elementUpdated(accordionItems[2]);
+    expect(accordionItems[2].disabled).toBeTruthy();
+    expect(accordionItems[2].header.getAttribute("aria-disabled")).toEqual("true");
+    expect(accordionItems[2].header.disabled).toEqual(true);
+    expect(accordionItems[2].header.getAttribute("tabindex")).toEqual("-1");
+  });
+
+  test("should dispatch events when item become expanded", async () => {
+    accordionItems[2].expanded = true;
+    setTimeout(() => accordionItems[2]["notifyExpandedHeader"]());
+    const { detail } = await oneEvent(accordionItems[2], "accordion-item-expanded");
+    expect(detail).toBeDefined();
+    expect(detail.id).toEqual(accordionItems[2]["uniqueId"]);
+
+    setTimeout(() => accordionItems[2]["notifyAccordionFocus"]());
+    const event = await oneEvent(accordionItems[2], "focus-visible");
+    expect(event).toBeDefined();
+  });
+
+  test("should correct set level", async () => {
+    const warnSpy = jest.spyOn(console, "warn");
+    const warnMessage = "Please set appropriate section heading level";
+
+    accordionItems[0].level = 0;
+    await elementUpdated(accordionItems[0]);
+
+    expect(warnSpy).toHaveBeenCalledWith(warnMessage);
+    expect(accordionItems[0].level).toEqual(3);
+    expect(accordionItems[0].shadowRoot!.querySelector("div[role='heading']")!.getAttribute("aria-level")).toEqual("3");
+
+    accordionItems[0].level = 7;
+    await elementUpdated(accordionItems[0]);
+
+    expect(warnSpy).toHaveBeenCalledWith(warnMessage);
+    expect(accordionItems[0].level).toEqual(3);
+    expect(accordionItems[0].shadowRoot!.querySelector("div[role='heading']")!.getAttribute("aria-level")).toEqual("3");
+
+    accordionItems[0].level = 4;
+    await elementUpdated(accordionItems[0]);
+
+    expect(warnSpy).toHaveBeenCalledTimes(2);
+    expect(accordionItems[0].level).toEqual(4);
+    expect(accordionItems[0].shadowRoot!.querySelector("div[role='heading']")!.getAttribute("aria-level")).toEqual("4");
+
+    warnSpy.mockRestore();
+  });
+
+  test("should handle click event", async () => {
+    const mouseDown = new MouseEvent("mousedown");
+    setTimeout(() => accordionItems[1].handleMouseDown(mouseDown));
+
+    const { detail } = await oneEvent(accordionItems[1], "accordion-item-click");
+
+    expect(detail).toBeDefined();
+    expect(detail.srcEvent).toEqual(mouseDown);
+  });
+
+  test("should handle keydown event", async () => {
+    const keydownEvent = new KeyboardEvent("keydown", {
+      code: "Enter"
+    });
+    setTimeout(() => accordionItems[1].handleKeyDown(keydownEvent));
+
+    const { detail } = await oneEvent(accordionItems[1], "accordion-item-keydown");
+
+    expect(detail).toBeDefined();
+    expect(detail.srcEvent).toEqual(keydownEvent);
+  });
+});