xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/Accordion/Accordion.spec.js

@@ -0,0 +1,969 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+const CODE = `
+  <Accordion>
+    <AccordionItem>Hello</AccordionItem>
+  </Accordion>
+`;
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("clicking on header expands content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`<Accordion>
+      <AccordionItem header="header-here">Content</AccordionItem>
+    </Accordion>`);
+    const header = page.getByText("header-here");
+    const content = page.getByText("Content");
+    yield (0, fixtures_1.expect)(content).not.toBeVisible();
+    yield header.click();
+    yield (0, fixtures_1.expect)(content).toBeVisible();
+}));
+(0, fixtures_1.test)("component renders custom header with headerTemplate prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Accordion>
+      <AccordionItem>
+        <property name="headerTemplate">
+          <Text>Click me</Text>
+        </property>
+        Simple header content
+      </AccordionItem>
+    </Accordion>
+  `, {});
+    const content = page.getByText("Simple header content");
+    yield (0, fixtures_1.expect)(content).not.toBeVisible();
+    const templatedButton = page.getByText("Click me");
+    yield templatedButton.click();
+    yield (0, fixtures_1.expect)(content).toBeVisible();
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("AccordionItem has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`<Accordion>
+      <AccordionItem header="header-here">Content</AccordionItem>
+    </Accordion>`);
+    const header = page.getByRole("button");
+    yield (0, fixtures_1.expect)(header).toContainText("header-here");
+    yield (0, fixtures_1.expect)(header).toHaveAttribute("aria-expanded", "false");
+    yield header.click();
+    yield (0, fixtures_1.expect)(header).toHaveAttribute("aria-expanded", "true");
+}));
+(0, fixtures_1.test)("pressing enter on header expands content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`<Accordion>
+      <AccordionItem header="header-here">Content</AccordionItem>
+    </Accordion>`);
+    const header = page.getByRole("button");
+    const content = page.getByText("Content");
+    yield (0, fixtures_1.expect)(content).not.toBeVisible();
+    yield header.focus();
+    page.keyboard.press("Enter");
+    yield (0, fixtures_1.expect)(content).toBeVisible();
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("applies border to all sides with single theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies only left border with borderLeft theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderLeft-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies only right border with borderRight theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderRight-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies left and right borders with borderHorizontal theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontal-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes borderLeft over borderHorizontal when both set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontal-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderLeft-Accordion": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", "double");
+}));
+(0, fixtures_1.test)("prioritizes borderRight over borderHorizontal when both set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontal-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderRight-Accordion": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies only top border with borderTop theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    // TODO: Review this test, often results in flaky
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderTop-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies only bottom border with borderBottom theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderBottom-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies top and bottom borders with borderVertical theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes borderTop over borderVertical when both set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderTop-Accordion": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes borderBottom over borderVertical when both set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderBottom-Accordion": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies color to all borders with borderColor theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderColor-Accordion": EXPECTED_COLOR,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes borderColor over border's color value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderColor-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies horizontal border colors over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontalColor-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes left border color over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderLeftColor-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes right border color over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderRightColor-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies vertical border colors over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVerticalColor-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes top border color over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderTop-Accordion": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes bottom border color over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderBottom-Accordion": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies style to all borders with borderStyle theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderStyle-Accordion": EXPECTED_STYLE,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes borderStyle over border's style value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderStyle-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+}));
+(0, fixtures_1.test)("applies horizontal border styles over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontalStyle-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+}));
+(0, fixtures_1.test)("prioritizes left border style over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderLeftStyle-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+}));
+(0, fixtures_1.test)("prioritizes right border style over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderRightStyle-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies vertical border styles over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVerticalStyle-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes top border style over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderTopStyle-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes bottom border style over default border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderBottomStyle-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies width to all borders with borderWidth theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "8px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderWidth-Accordion": EXPECTED_WIDTH,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("prioritizes borderWidth over border's width value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderWidth-Accordion": UPDATED,
+            "border-Accordion": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("applies padding to all sides with padding theme var", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "padding-Accordion": EXPECTED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("applies padding to left and right with paddingHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "paddingHorizontal-Accordion": EXPECTED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("applies padding to left side with paddingLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "paddingLeft-Accordion": EXPECTED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("applies padding to right side with paddingRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "paddingRight-Accordion": EXPECTED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("applies padding to top and bottom with paddingVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "paddingVertical-Accordion": EXPECTED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("applies padding to top side with paddingTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "paddingTop-Accordion": EXPECTED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("applies padding to bottom side with paddingBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "paddingBottom-Accordion": EXPECTED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("prioritizes paddingHorizontal over default padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    const UPDATED = "48px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "padding-Accordion": EXPECTED,
+            "paddingHorizontal-Accordion": UPDATED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", UPDATED);
+}));
+(0, fixtures_1.test)("prioritizes paddingLeft over default padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    const UPDATED = "48px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "padding-Accordion": EXPECTED,
+            "paddingLeft-Accordion": UPDATED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", UPDATED);
+}));
+(0, fixtures_1.test)("prioritizes paddingRight over default padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    const UPDATED = "48px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "padding-Accordion": EXPECTED,
+            "paddingRight-Accordion": UPDATED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("prioritizes paddingVertical over default padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    const UPDATED = "48px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "padding-Accordion": EXPECTED,
+            "paddingVertical-Accordion": UPDATED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("prioritizes paddingTop over default padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    const UPDATED = "48px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "padding-Accordion": EXPECTED,
+            "paddingTop-Accordion": UPDATED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+}));
+(0, fixtures_1.test)("prioritizes paddingBottom over default padding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAccordionDriver, }) {
+    const EXPECTED = "100px";
+    const UPDATED = "48px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "padding-Accordion": EXPECTED,
+            "paddingBottom-Accordion": UPDATED,
+        },
+    });
+    const component = (yield createAccordionDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", EXPECTED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", EXPECTED);
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("expanded treats null as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    // Test with null expanded prop
+    yield initTestBed(`
+    <Accordion>
+      <AccordionItem expanded="{null}">Null Expanded</AccordionItem>
+    </Accordion>
+  `, {});
+    yield (0, fixtures_1.expect)(page.getByText("Null Expanded")).not.toBeVisible();
+}));