xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/FormItem/ItemWithLabel.js

@@ -27,7 +27,7 @@ exports.defaultProps = {
 };
 const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref) {
-    var { id, labelPosition = "top", style = {}, className, label, labelBreak = exports.defaultProps.labelBreak, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false, onLabelClick } = _a, rest = __rest(_a, ["id", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed", "onLabelClick"]);
+    var { id, testId, labelPosition = "top", style = {}, className, label, labelBreak = exports.defaultProps.labelBreak, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false, onLabelClick } = _a, rest = __rest(_a, ["id", "testId", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed", "onLabelClick"]);
     // --- HACK: the "rest" may contain a "layoutContext" property that React doesn't recognize
     // --- as a valid DOM attribute, which would issue a warning in React.
     if (rest.layoutContext !== undefined) {
@@ -47,7 +47,7 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref)
         //   }),
         // });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: ref, style: style, className: (0, classnames_1.default)(className, FormItem_module_scss_1.default.itemWithLabel), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { "data-testid": testId, ref: ref, style: style, className: (0, classnames_1.default)(className, FormItem_module_scss_1.default.itemWithLabel), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
                     [FormItem_module_scss_1.default.top]: labelPosition === "top",
                     [FormItem_module_scss_1.default.bottom]: labelPosition === "bottom",
                     [FormItem_module_scss_1.default.start]: labelPosition === "start",
@@ -57,5 +57,5 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref)
                             [FormItem_module_scss_1.default.required]: required,
                             [FormItem_module_scss_1.default.disabled]: !enabled,
                             [FormItem_module_scss_1.default.labelBreak]: labelBreak,
-                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), (0, jsx_runtime_1.jsx)(react_slot_1.Slot, { "data-part-id": parts_1.PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : undefined, children: children })] }), validationResult] })));
+                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), (0, jsx_runtime_1.jsx)(react_slot_1.Slot, { "data-part-id": parts_1.PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : undefined, "data-testid": undefined, children: children })] }), validationResult] })));
 });

package/dist/scripts/src/components/FormSection/FormSection.js

@@ -1,10 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formSectionRenderer = exports.FormSectionMd = void 0;
-const compound_utils_1 = require("../../components-core/utils/compound-utils");
+const renderers_1 = require("../../components-core/renderers");
 const metadata_helpers_1 = require("../metadata-helpers");
-// --- We cannot use this with nextra
-// import componentSource from "./FormSection.xmlui?raw";
+const FormSection_xmlui_1 = __importDefault(require("./FormSection.xmlui"));
 const COMP = "FormSection";
 exports.FormSectionMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
@@ -51,31 +53,4 @@ exports.FormSectionMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-const componentSource = `
-<Component name="FormSection">
-  <VStack paddingBottom="{$props.paddingBottom ?? '1rem'}" gap="0" width="100%">
-    <Heading
-      when="{!!$props.heading}"
-      marginBottom="$space-tight"
-      level="{$props.headingLevel ?? 'h3'}"
-      fontWeight="{$props.headingWeight ?? 'bold'}"
-      value="{$props.heading}" />
-    <Text
-      when="{!!$props.info}"
-      fontSize="{$props.infoFontSize ?? '0.8rem'}"
-      paddingBottom="$space-normal"
-      value="{$props.info}" />
-    <FlowLayout
-      width="100%"
-      paddingTop="{$props.paddingTop ?? '$space-normal'}"
-      columnGap="{$props.columnGap ?? '3rem'}"
-      rowGap="{$props.rowGap ?? '$space-normal'}" >
-      <Slot />
-    </FlowLayout>
-  </VStack>
-</Component>
-`;
-exports.formSectionRenderer = {
-    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
-    metadata: exports.FormSectionMd,
-};
+exports.formSectionRenderer = (0, renderers_1.createUserDefinedComponentRenderer)(exports.FormSectionMd, FormSection_xmlui_1.default);

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

@@ -0,0 +1,50 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("parent has items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedChildCount = 3;
+        const expectedChildrenDisplay = ["Item #1", "Item #2", "Item #3"];
+        yield initTestBed(`
+    <Stack testId="container">
+      <Fragment>
+        <Text value='Item #1' />
+        <Text value='Item #2' />
+        <Text value='Item #3' />
+      </Fragment>
+    </Stack>`);
+        const children = page.locator(`[data-testid="container"] > *`);
+        yield (0, fixtures_1.expect)(children).toHaveCount(expectedChildCount);
+        yield (0, fixtures_1.expect)(children).toHaveText(expectedChildrenDisplay);
+    }));
+    (0, fixtures_1.test)("parent style affects children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedFontSize = "14px";
+        yield initTestBed(`
+      <Stack testId="container" fontSize="${expectedFontSize}">
+        <Fragment>
+          <Text value='Item #1' />
+          <Text value='Item #2' />
+          <Text value='Item #3' />
+        </Fragment>
+      </Stack>`, {
+            testThemeVars: {
+                "font-size": "16px",
+            },
+        });
+        for (const child of yield page.locator(`[data-testid="container"] > *`).all()) {
+            yield (0, fixtures_1.expect)(child).toHaveCSS("font-size", expectedFontSize);
+        }
+    }));
+});

package/dist/scripts/src/components/Heading/H1.spec.js

@@ -0,0 +1,66 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders as h1 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H1 testId="h1">Test Heading</H1>`);
+        const driver = yield createHeadingDriver("h1");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h1 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
+    }));
+    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H1 testId="h1" value="Value Property Text" />`);
+        const driver = yield createHeadingDriver("h1");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h1 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
+    }));
+    (0, fixtures_1.test)("is equivalent to Heading with level='h1'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Heading testId="heading" level="h1">Heading Content</Heading>
+        <H1 testId="h1">H1 Content</H1>
+      </Fragment>
+    `);
+        const headingDriver = yield createHeadingDriver("heading");
+        const h1Driver = yield createHeadingDriver("h1");
+        // Both should render as h1 elements
+        const headingTagName = yield headingDriver.getComponentTagName();
+        const h1TagName = yield h1Driver.getComponentTagName();
+        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h1");
+        (0, fixtures_1.expect)(h1TagName.toLowerCase()).toBe("h1");
+        (0, fixtures_1.expect)(headingTagName).toEqual(h1TagName);
+        // Both should have heading role
+        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
+        yield (0, fixtures_1.expect)(h1Driver.component).toHaveRole("heading");
+    }));
+    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H1 testId="h1" level="h3">Should be H1</H1>`);
+        const driver = yield createHeadingDriver("h1");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H1");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Should always be h1 despite level="h3" prop (this is the expected behavior)
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
+    }));
+});

package/dist/scripts/src/components/Heading/H2.spec.js

@@ -0,0 +1,66 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders as h2 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H2 testId="h2">Test Heading</H2>`);
+        const driver = yield createHeadingDriver("h2");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h2 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
+    }));
+    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H2 testId="h2" value="Value Property Text" />`);
+        const driver = yield createHeadingDriver("h2");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h2 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
+    }));
+    (0, fixtures_1.test)("is equivalent to Heading with level='h2'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Heading testId="heading" level="h2">Heading Content</Heading>
+        <H2 testId="h2">H2 Content</H2>
+      </Fragment>
+    `);
+        const headingDriver = yield createHeadingDriver("heading");
+        const h2Driver = yield createHeadingDriver("h2");
+        // Both should render as h2 elements
+        const headingTagName = yield headingDriver.getComponentTagName();
+        const h2TagName = yield h2Driver.getComponentTagName();
+        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h2");
+        (0, fixtures_1.expect)(h2TagName.toLowerCase()).toBe("h2");
+        (0, fixtures_1.expect)(headingTagName).toEqual(h2TagName);
+        // Both should have heading role
+        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
+        yield (0, fixtures_1.expect)(h2Driver.component).toHaveRole("heading");
+    }));
+    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H2 testId="h2" level="h4">Should be H2</H2>`);
+        const driver = yield createHeadingDriver("h2");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H2");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Should always be h2 despite level="h4" prop (this is the expected behavior)
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
+    }));
+});

package/dist/scripts/src/components/Heading/H3.spec.js

@@ -0,0 +1,66 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders as h3 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H3 testId="h3">Test Heading</H3>`);
+        const driver = yield createHeadingDriver("h3");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h3 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h3");
+    }));
+    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H3 testId="h3" value="Value Property Text" />`);
+        const driver = yield createHeadingDriver("h3");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h3 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h3");
+    }));
+    (0, fixtures_1.test)("is equivalent to Heading with level='h3'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Heading testId="heading" level="h3">Heading Content</Heading>
+        <H3 testId="h3">H3 Content</H3>
+      </Fragment>
+    `);
+        const headingDriver = yield createHeadingDriver("heading");
+        const h3Driver = yield createHeadingDriver("h3");
+        // Both should render as h3 elements
+        const headingTagName = yield headingDriver.getComponentTagName();
+        const h3TagName = yield h3Driver.getComponentTagName();
+        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h3");
+        (0, fixtures_1.expect)(h3TagName.toLowerCase()).toBe("h3");
+        (0, fixtures_1.expect)(headingTagName).toEqual(h3TagName);
+        // Both should have heading role
+        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
+        yield (0, fixtures_1.expect)(h3Driver.component).toHaveRole("heading");
+    }));
+    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H3 testId="h3" level="h1">Should be H3</H3>`);
+        const driver = yield createHeadingDriver("h3");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H3");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Should always be h3 despite level="h1" prop (this is the expected behavior)
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h3");
+    }));
+});

package/dist/scripts/src/components/Heading/H4.spec.js

@@ -0,0 +1,66 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders as h4 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H4 testId="h4">Test Heading</H4>`);
+        const driver = yield createHeadingDriver("h4");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h4 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h4");
+    }));
+    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H4 testId="h4" value="Value Property Text" />`);
+        const driver = yield createHeadingDriver("h4");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h4 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h4");
+    }));
+    (0, fixtures_1.test)("is equivalent to Heading with level='h4'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Heading testId="heading" level="h4">Heading Content</Heading>
+        <H4 testId="h4">H4 Content</H4>
+      </Fragment>
+    `);
+        const headingDriver = yield createHeadingDriver("heading");
+        const h4Driver = yield createHeadingDriver("h4");
+        // Both should render as h4 elements
+        const headingTagName = yield headingDriver.getComponentTagName();
+        const h4TagName = yield h4Driver.getComponentTagName();
+        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h4");
+        (0, fixtures_1.expect)(h4TagName.toLowerCase()).toBe("h4");
+        (0, fixtures_1.expect)(headingTagName).toEqual(h4TagName);
+        // Both should have heading role
+        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
+        yield (0, fixtures_1.expect)(h4Driver.component).toHaveRole("heading");
+    }));
+    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H4 testId="h4" level="h1">Should be H4</H4>`);
+        const driver = yield createHeadingDriver("h4");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H4");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Should always be h4 despite level="h1" prop (this is the expected behavior)
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h4");
+    }));
+});

package/dist/scripts/src/components/Heading/H5.spec.js

@@ -0,0 +1,66 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders as h5 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H5 testId="h5">Test Heading</H5>`);
+        const driver = yield createHeadingDriver("h5");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h5 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h5");
+    }));
+    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H5 testId="h5" value="Value Property Text" />`);
+        const driver = yield createHeadingDriver("h5");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h5 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h5");
+    }));
+    (0, fixtures_1.test)("is equivalent to Heading with level='h5'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Heading testId="heading" level="h5">Heading Content</Heading>
+        <H5 testId="h5">H5 Content</H5>
+      </Fragment>
+    `);
+        const headingDriver = yield createHeadingDriver("heading");
+        const h5Driver = yield createHeadingDriver("h5");
+        // Both should render as h5 elements
+        const headingTagName = yield headingDriver.getComponentTagName();
+        const h5TagName = yield h5Driver.getComponentTagName();
+        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h5");
+        (0, fixtures_1.expect)(h5TagName.toLowerCase()).toBe("h5");
+        (0, fixtures_1.expect)(headingTagName).toEqual(h5TagName);
+        // Both should have heading role
+        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
+        yield (0, fixtures_1.expect)(h5Driver.component).toHaveRole("heading");
+    }));
+    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H5 testId="h5" level="h1">Should be H5</H5>`);
+        const driver = yield createHeadingDriver("h5");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H5");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Should always be h5 despite level="h1" prop (this is the expected behavior)
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h5");
+    }));
+});

package/dist/scripts/src/components/Heading/H6.spec.js

@@ -0,0 +1,66 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders as h6 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H6 testId="h6">Test Heading</H6>`);
+        const driver = yield createHeadingDriver("h6");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h6 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h6");
+    }));
+    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H6 testId="h6" value="Value Property Text" />`);
+        const driver = yield createHeadingDriver("h6");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Verify it renders as h6 HTML element
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h6");
+    }));
+    (0, fixtures_1.test)("is equivalent to Heading with level='h6'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Heading testId="heading" level="h6">Heading Content</Heading>
+        <H6 testId="h6">H6 Content</H6>
+      </Fragment>
+    `);
+        const headingDriver = yield createHeadingDriver("heading");
+        const h6Driver = yield createHeadingDriver("h6");
+        // Both should render as h6 elements
+        const headingTagName = yield headingDriver.getComponentTagName();
+        const h6TagName = yield h6Driver.getComponentTagName();
+        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h6");
+        (0, fixtures_1.expect)(h6TagName.toLowerCase()).toBe("h6");
+        (0, fixtures_1.expect)(headingTagName).toEqual(h6TagName);
+        // Both should have heading role
+        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
+        yield (0, fixtures_1.expect)(h6Driver.component).toHaveRole("heading");
+    }));
+    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<H6 testId="h6" level="h1">Should be H6</H6>`);
+        const driver = yield createHeadingDriver("h6");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H6");
+        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
+        // Should always be h6 despite level="h1" prop (this is the expected behavior)
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h6");
+    }));
+});