xmlui 0.10.21 → 0.10.22

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.21",
+    "version": "0.10.22",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

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

@@ -74,6 +74,7 @@ const FileDownloadAction_1 = require("../components-core/action/FileDownloadActi
 const FileUploadAction_1 = require("../components-core/action/FileUploadAction");
 const NavigateAction_1 = require("../components-core/action/NavigateAction");
 const TimedAction_1 = require("../components-core/action/TimedAction");
+const CoreBehaviors_1 = require("../components-core/behaviors/CoreBehaviors");
 const ApiLoader_1 = require("../components-core/loader/ApiLoader");
 const ExternalDataLoader_1 = require("../components-core/loader/ExternalDataLoader");
 const MockLoaderRenderer_1 = require("../components-core/loader/MockLoaderRenderer");
@@ -149,7 +150,7 @@ class ComponentRegistry {
      * about component registrations
      */
     constructor(contributes = {}, extensionManager) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.extensionManager = extensionManager;
         // --- The pool of available components
         this.pool = new Map(); // namespace -> name -> ComponentRegistryEntry;
@@ -162,6 +163,8 @@ class ComponentRegistry {
         this.actionFns = new Map();
         // --- The pool of available loader renderers
         this.loaders = new Map();
+        // --- The pool of available behaviors
+        this.behaviors = [];
         this.extensionRegistered = (extension) => {
             var _a;
             (_a = extension.components) === null || _a === void 0 ? void 0 : _a.forEach((c) => {
@@ -656,7 +659,14 @@ class ComponentRegistry {
         this.registerLoaderRenderer(ExternalDataLoader_1.externalDataLoaderRenderer);
         this.registerLoaderRenderer(MockLoaderRenderer_1.mockLoaderRenderer);
         this.registerLoaderRenderer(DataLoader_1.dataLoaderRenderer);
-        (_c = this.extensionManager) === null || _c === void 0 ? void 0 : _c.subscribeToRegistrations(this.extensionRegistered);
+        this.registerBehavior(CoreBehaviors_1.tooltipBehavior);
+        this.registerBehavior(CoreBehaviors_1.animationBehavior);
+        this.registerBehavior(CoreBehaviors_1.labelBehavior);
+        // Register external behaviors from contributes
+        (_c = contributes.behaviors) === null || _c === void 0 ? void 0 : _c.forEach((behavior) => {
+            this.registerBehavior(behavior);
+        });
+        (_d = this.extensionManager) === null || _d === void 0 ? void 0 : _d.subscribeToRegistrations(this.extensionRegistered);
     }
     /**
      * All theme variables used by the registered components.
@@ -761,6 +771,24 @@ class ComponentRegistry {
     registerActionFn({ actionName: functionName, actionFn }) {
         this.actionFns.set(functionName, actionFn);
     }
+    // --- Registers a behavior
+    registerBehavior(behavior, location = "after", position) {
+        // If position is specified, insert relative to that behavior
+        if (position) {
+            const targetIndex = this.behaviors.findIndex(b => b.name === position);
+            if (targetIndex !== -1) {
+                const insertIndex = location === "before" ? targetIndex : targetIndex + 1;
+                this.behaviors.splice(insertIndex, 0, behavior);
+                return;
+            }
+        }
+        // Default: append to the end
+        this.behaviors.push(behavior);
+    }
+    // --- Returns all registered behaviors
+    getBehaviors() {
+        return this.behaviors;
+    }
 }
 exports.ComponentRegistry = ComponentRegistry;
 /**

package/dist/scripts/src/components/Tabs/TabContext.js

@@ -13,32 +13,41 @@ exports.TabContext = (0, react_1.createContext)({
     register: (tabItem) => { },
     unRegister: (innerId) => { },
     activeTabId: "",
+    getTabItems: () => [],
 });
 function useTabContextValue() {
     const [tabItems, setTabItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    const tabItemsRef = (0, react_1.useRef)(constants_1.EMPTY_ARRAY);
+    tabItemsRef.current = tabItems;
     const [activeTabId, setActiveTabId] = (0, react_1.useState)("");
+    const register = (0, react_1.useCallback)((tabItem) => {
+        setTabItems((0, immer_1.default)((draft) => {
+            const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
+            if (existing < 0) {
+                draft.push(tabItem);
+            }
+            else {
+                draft[existing] = tabItem;
+            }
+        }));
+    }, []);
+    const unRegister = (0, react_1.useCallback)((innerId) => {
+        setTabItems((0, immer_1.default)((draft) => {
+            return draft.filter((col) => col.innerId !== innerId);
+        }));
+    }, []);
+    const getTabItems = (0, react_1.useCallback)(() => {
+        return tabItemsRef.current;
+    }, []);
     const tabContextValue = (0, react_1.useMemo)(() => {
         return {
-            register: (tabItem) => {
-                setTabItems((0, immer_1.default)((draft) => {
-                    const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
-                    if (existing < 0) {
-                        draft.push(tabItem);
-                    }
-                    else {
-                        draft[existing] = tabItem;
-                    }
-                }));
-            },
-            unRegister: (innerId) => {
-                setTabItems((0, immer_1.default)((draft) => {
-                    return draft.filter((col) => col.innerId !== innerId);
-                }));
-            },
+            register,
+            unRegister,
             activeTabId,
             setActiveTabId,
+            getTabItems,
         };
-    }, [activeTabId]);
+    }, [register, unRegister, activeTabId, getTabItems]);
     return {
         tabItems,
         tabContextValue,

package/dist/scripts/src/components/Tabs/TabItemNative.js

@@ -21,9 +21,10 @@ const react_tabs_1 = require("@radix-ui/react-tabs");
 const Tabs_module_scss_1 = __importDefault(require("../Tabs/Tabs.module.scss"));
 const TabContext_1 = require("./TabContext");
 exports.TabItemComponent = (0, react_2.forwardRef)(function TabItemComponent(_a, forwardedRef) {
+    var _b;
     var { children, label, headerRenderer, style, id, activated } = _a, rest = __rest(_a, ["children", "label", "headerRenderer", "style", "id", "activated"]);
     const innerId = (0, react_2.useId)();
-    const { register, unRegister, activeTabId } = (0, TabContext_1.useTabContext)();
+    const { register, unRegister, activeTabId, getTabItems } = (0, TabContext_1.useTabContext)();
     (0, react_2.useEffect)(() => {
         register({
             label,
@@ -44,5 +45,9 @@ exports.TabItemComponent = (0, react_2.forwardRef)(function TabItemComponent(_a,
     }, [activeTabId, innerId, activated]);
     if (activeTabId !== innerId)
         return null;
-    return ((0, react_1.createElement)(react_tabs_1.Content, Object.assign({}, rest, { key: innerId, value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: style }), children));
+    // Find the index of this tab for ordering
+    const tabItems = getTabItems();
+    const tabIndex = (_b = tabItems === null || tabItems === void 0 ? void 0 : tabItems.findIndex(item => item.innerId === innerId)) !== null && _b !== void 0 ? _b : 0;
+    const contentOrder = tabIndex * 2 + 1;
+    return ((0, react_1.createElement)(react_tabs_1.Content, Object.assign({}, rest, { key: innerId, value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: Object.assign(Object.assign({}, style), { order: contentOrder }) }), children));
 });

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

@@ -24,11 +24,30 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
         orientation: {
             description: `This property indicates the orientation of the component. In horizontal orientation, ` +
                 `the tab sections are laid out on the left side of the content panel, while in vertical ` +
-                `orientation, the buttons are at the top.`,
+                `orientation, the buttons are at the top. Note: This property is ignored when ` +
+                `accordionView is set to true.`,
             availableValues: ["horizontal", "vertical"],
             defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
+        tabAlignment: {
+            description: `This property controls how tabs are aligned within the tab header container in ` +
+                `horizontal orientation. Use 'start' to align tabs to the left, 'end' to align to the ` +
+                `right, 'center' to center the tabs, and 'stretch' to make tabs fill the full width ` +
+                `of the header. Note: This property is ignored when orientation is set to 'vertical' ` +
+                `or when accordionView is enabled.`,
+            availableValues: ["start", "end", "center", "stretch"],
+            defaultValue: TabsNative_1.defaultProps.tabAlignment,
+            valueType: "string",
+        },
+        accordionView: {
+            description: `When enabled, displays tabs in an accordion-like view where tab headers are stacked ` +
+                `vertically and only the active tab's content is visible. Each tab header remains visible ` +
+                `and clicking a header opens its content while closing others. When enabled, the ` +
+                `orientation property is ignored.`,
+            defaultValue: TabsNative_1.defaultProps.accordionView,
+            valueType: "boolean",
+        },
         headerTemplate: Object.assign({}, (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`)),
     },
     events: {
@@ -67,10 +86,10 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, className, registerComponentApi, lookupEventHandler }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     return ((0, jsx_runtime_1.jsx)(TabsNative_1.Tabs, { id: node === null || node === void 0 ? void 0 : node.uid, className: className, headerRenderer: ((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.headerTemplate)
             ? (item) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.headerTemplate, itemKey: "$header", contextVars: {
                     $header: item,
                 }, renderChild: renderChild }))
-            : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), onDidChange: lookupEventHandler("didChange"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
+            : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), tabAlignment: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.tabAlignment), accordionView: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.accordionView), onDidChange: lookupEventHandler("didChange"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
 });

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

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 // =============================================================================
 // SMOKE TESTS
@@ -105,6 +106,367 @@ fixtures_1.test.describe("basic functionality", () => {
         const tabsRoot = page.getByTestId("vertical-tabs");
         yield (0, fixtures_1.expect)(tabsRoot).toHaveAttribute("data-orientation", "vertical");
     }));
+    fixtures_1.test.describe("tabAlignment property", () => {
+        (0, fixtures_1.test)("tabAlignment='start' positions tabs at the start of container (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="start" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tabsContainer = page.getByTestId("tabs");
+            const tab1 = page.getByRole("tab", { name: "Tab 1" });
+            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
+            // Tab should be near the start of the container (within a small margin for padding)
+            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
+        }));
+        (0, fixtures_1.test)("tabAlignment='end' positions tabs at the end of container (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="end" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tabsContainer = page.getByTestId("tabs");
+            const tab3 = page.getByRole("tab", { name: "Tab 3" });
+            const { right: containerRight } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
+            // Last tab should be near the end of the container (within a small margin for padding)
+            (0, fixtures_1.expect)(containerRight - tab3Right).toBeLessThan(50);
+        }));
+        (0, fixtures_1.test)("tabAlignment='center' positions tabs in center of container (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="center" testId="tabs" style="width: 800px">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tabsContainer = page.getByTestId("tabs");
+            const tab1 = page.getByRole("tab", { name: "Tab 1" });
+            const tab3 = page.getByRole("tab", { name: "Tab 3" });
+            const { left: containerLeft, right: containerRight, width: containerWidth } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
+            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
+            const containerCenter = containerLeft + containerWidth / 2;
+            const tabsCenter = tab1Left + (tab3Right - tab1Left) / 2;
+            // Tabs should be centered (within a reasonable margin)
+            (0, fixtures_1.expect)(Math.abs(tabsCenter - containerCenter)).toBeLessThan(50);
+        }));
+        (0, fixtures_1.test)("tabAlignment='stretch' makes tabs fill container width (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="stretch" testId="tabs" style="width: 600px">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tabsContainer = page.getByTestId("tabs");
+            const tab1 = page.getByRole("tab", { name: "Tab 1" });
+            const tab3 = page.getByRole("tab", { name: "Tab 3" });
+            const { left: containerLeft, right: containerRight } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
+            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
+            // First tab should start near container start
+            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
+            // Last tab should end near container end
+            (0, fixtures_1.expect)(containerRight - tab3Right).toBeLessThan(50);
+        }));
+        (0, fixtures_1.test)("tabAlignment can be dynamically changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <Tabs tabAlignment="{testState ?? 'start'}" testId="tabs" style="width: 700px">
+            <TabItem label="Tab 1">Content 1</TabItem>
+            <TabItem label="Tab 2">Content 2</TabItem>
+            <TabItem label="Tab 3">Content 3</TabItem>
+          </Tabs>
+          <Button testId="changeBtn" onClick="testState = 'end'" />
+        </Fragment>
+      `);
+            const tabsContainer = page.getByTestId("tabs");
+            const tab1 = page.getByRole("tab", { name: "Tab 1" });
+            // Initially with 'start' alignment
+            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { left: initialTab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
+            (0, fixtures_1.expect)(initialTab1Left - containerLeft).toBeLessThan(50);
+            // Change to 'end' alignment
+            yield page.getByTestId("changeBtn").click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("end");
+            // After changing to 'end', the last tab should be near the end
+            const tab3 = page.getByRole("tab", { name: "Tab 3" });
+            const { right: containerRight } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
+            (0, fixtures_1.expect)(containerRight - tab3Right).toBeLessThan(50);
+        }));
+        (0, fixtures_1.test)("tabAlignment works with single tab", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="center" testId="tabs" style="width: 600px">
+          <TabItem label="Only Tab">Only Content</TabItem>
+        </Tabs>
+      `);
+            const tab = page.getByRole("tab", { name: "Only Tab" });
+            yield (0, fixtures_1.expect)(tab).toBeVisible();
+            // Verify the tab renders and is functional
+            yield (0, fixtures_1.expect)(page.getByText("Only Content")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("tabAlignment='stretch' distributes multiple tabs evenly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="stretch" testId="tabs" style="width: 600px">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tab1 = page.getByRole("tab", { name: "Tab 1" });
+            const tab2 = page.getByRole("tab", { name: "Tab 2" });
+            const tab3 = page.getByRole("tab", { name: "Tab 3" });
+            const { width: tab1Width } = yield (0, component_test_helpers_1.getBounds)(tab1);
+            const { width: tab2Width } = yield (0, component_test_helpers_1.getBounds)(tab2);
+            const { width: tab3Width } = yield (0, component_test_helpers_1.getBounds)(tab3);
+            // All tabs should have similar widths when stretched (within 20px tolerance for text differences)
+            (0, fixtures_1.expect)(Math.abs(tab1Width - tab2Width)).toBeLessThan(20);
+            (0, fixtures_1.expect)(Math.abs(tab2Width - tab3Width)).toBeLessThan(20);
+        }));
+        (0, fixtures_1.test)("tabAlignment handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="{null}" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+        </Tabs>
+      `);
+            // Should fall back to default 'start' alignment
+            const tabsContainer = page.getByTestId("tabs");
+            const tab1 = page.getByRole("tab", { name: "Tab 1" });
+            yield (0, fixtures_1.expect)(tab1).toBeVisible();
+            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
+            // Should behave like 'start' alignment
+            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
+        }));
+        (0, fixtures_1.test)("tabAlignment handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="{undefined}" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+        </Tabs>
+      `);
+            // Should fall back to default 'start' alignment
+            const tabsContainer = page.getByTestId("tabs");
+            const tab1 = page.getByRole("tab", { name: "Tab 1" });
+            yield (0, fixtures_1.expect)(tab1).toBeVisible();
+            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
+            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
+            // Should behave like 'start' alignment
+            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
+        }));
+        (0, fixtures_1.test)("tabAlignment maintains functionality when tabs are clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs tabAlignment="center" testId="tabs" style="width: 700px">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            // Verify all tabs are visible
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeVisible();
+            // Click different tabs and verify content changes
+            yield page.getByRole("tab", { name: "Tab 2" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield page.getByRole("tab", { name: "Tab 3" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield page.getByRole("tab", { name: "Tab 1" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+        }));
+    });
+    fixtures_1.test.describe("accordionView property", () => {
+        (0, fixtures_1.test)("accordionView renders all tab headers when true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="true" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            // All tab headers should be visible
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("accordionView shows only active tab content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="true" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            // Only first tab content should be visible (default active)
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("accordionView positions active tab header above its content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="true" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
+            const tab1Content = page.getByText("Content 1");
+            const { bottom: headerBottom } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
+            const { top: contentTop } = yield (0, component_test_helpers_1.getBounds)(tab1Content);
+            // Header should be above content (header bottom should be less than or near content top)
+            (0, fixtures_1.expect)(headerBottom).toBeLessThanOrEqual(contentTop + 5);
+        }));
+        (0, fixtures_1.test)("accordionView positions active tab content above next tab header", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="true" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tab1Content = page.getByText("Content 1");
+            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
+            const { bottom: contentBottom } = yield (0, component_test_helpers_1.getBounds)(tab1Content);
+            const { top: nextHeaderTop } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
+            // Content should be above next header (content bottom should be less than or near next header top)
+            (0, fixtures_1.expect)(contentBottom).toBeLessThanOrEqual(nextHeaderTop + 5);
+        }));
+        (0, fixtures_1.test)("accordionView maintains order: header1 -> content1 -> header2 -> content2 (when tab2 active)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="true" activeTab="1" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
+            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
+            const tab2Content = page.getByText("Content 2");
+            const tab3Header = page.getByRole("tab", { name: "Tab 3" });
+            const { top: tab1Top } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
+            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
+            const { top: content2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Content);
+            const { top: tab3Top } = yield (0, component_test_helpers_1.getBounds)(tab3Header);
+            // Verify vertical ordering
+            (0, fixtures_1.expect)(tab1Top).toBeLessThan(tab2Top);
+            (0, fixtures_1.expect)(tab2Top).toBeLessThan(content2Top);
+            (0, fixtures_1.expect)(content2Top).toBeLessThan(tab3Top);
+        }));
+        (0, fixtures_1.test)("accordionView switches content when different tab is clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="true" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            // Initially Tab 1 is active
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            // Click Tab 2
+            yield page.getByRole("tab", { name: "Tab 2" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            // Verify Tab 2 content is below Tab 2 header
+            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
+            const tab2Content = page.getByText("Content 2");
+            const { bottom: headerBottom } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
+            const { top: contentTop } = yield (0, component_test_helpers_1.getBounds)(tab2Content);
+            (0, fixtures_1.expect)(headerBottom).toBeLessThanOrEqual(contentTop + 5);
+        }));
+        (0, fixtures_1.test)("accordionView works with dynamic activeTab changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <Tabs accordionView="true" activeTab="{testState ?? 0}" testId="tabs">
+            <TabItem label="Tab 1">Content 1</TabItem>
+            <TabItem label="Tab 2">Content 2</TabItem>
+            <TabItem label="Tab 3">Content 3</TabItem>
+          </Tabs>
+          <Button testId="tab2Btn" onClick="testState = 1" />
+          <Button testId="tab3Btn" onClick="testState = 2" />
+        </Fragment>
+      `);
+            // Initially Content 1 is visible
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+            // Switch to Tab 2
+            yield page.getByTestId("tab2Btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+            // Verify ordering for Tab 2
+            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
+            const tab2Content = page.getByText("Content 2");
+            const tab3Header = page.getByRole("tab", { name: "Tab 3" });
+            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
+            const { top: content2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Content);
+            const { top: tab3Top } = yield (0, component_test_helpers_1.getBounds)(tab3Header);
+            (0, fixtures_1.expect)(tab2Top).toBeLessThan(content2Top);
+            (0, fixtures_1.expect)(content2Top).toBeLessThan(tab3Top);
+            // Switch to Tab 3
+            yield page.getByTestId("tab3Btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("accordionView=false renders standard tabs (non-accordion)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="false" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+      `);
+            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
+            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
+            const tab1Content = page.getByText("Content 1");
+            // In standard mode (non-accordion), all headers should be visible
+            yield (0, fixtures_1.expect)(tab1Header).toBeVisible();
+            yield (0, fixtures_1.expect)(tab2Header).toBeVisible();
+            // Only active tab content should be visible
+            yield (0, fixtures_1.expect)(tab1Content).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            // Tab content should NOT be interleaved between headers
+            // (unlike accordion view where content appears between headers)
+            const { bottom: tab1Bottom } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
+            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
+            const { top: contentTop } = yield (0, component_test_helpers_1.getBounds)(tab1Content);
+            // Content should NOT be between the two headers
+            // Either tab2 is next to tab1 (horizontal) or below tab1 but before content (vertical)
+            const isContentBetweenHeaders = contentTop > tab1Bottom && contentTop < tab2Top;
+            (0, fixtures_1.expect)(isContentBetweenHeaders).toBe(false);
+        }));
+        (0, fixtures_1.test)("accordionView handles null value gracefully (defaults to false)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs accordionView="{null}" testId="tabs">
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+        </Tabs>
+      `);
+            // Should render as standard horizontal tabs
+            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
+            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
+            yield (0, fixtures_1.expect)(tab1Header).toBeVisible();
+            yield (0, fixtures_1.expect)(tab2Header).toBeVisible();
+            // Headers should be horizontally aligned
+            const { top: tab1Top } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
+            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
+            (0, fixtures_1.expect)(Math.abs(tab1Top - tab2Top)).toBeLessThan(10);
+        }));
+    });
 });
 // =============================================================================
 // HEADER TEMPLATE TESTS