xmlui 0.10.25 → 0.10.26

package/dist/scripts/package.json

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

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

@@ -217,3 +217,103 @@ fixtures_1.test.describe("Event Handling", () => {
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(testData);
     }));
 });
+// =============================================================================
+// Drawer HANDLING TESTS
+// =============================================================================
+fixtures_1.test.describe("Drawer Handling", () => {
+    (0, fixtures_1.test)("Drawer displayed if NavPanel has no 'when'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        // Set small viewport to trigger drawer mode
+        yield page.setViewportSize({ width: 400, height: 600 });
+        yield initTestBed(`
+      <App layout="condensed">
+        <AppHeader testId="appHeader"/>
+        <NavPanel>
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer displayed if NavPanel has when='true'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        // Set small viewport to trigger drawer mode
+        yield page.setViewportSize({ width: 400, height: 600 });
+        yield initTestBed(`
+      <App layout="condensed">
+        <AppHeader testId="appHeader"/>
+        <NavPanel when="true">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer displayed if NavPanel has when='{true}'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        // Set small viewport to trigger drawer mode
+        yield page.setViewportSize({ width: 400, height: 600 });
+        yield initTestBed(`
+      <App layout="condensed">
+        <AppHeader testId="appHeader"/>
+        <NavPanel when="{true}">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer not displayed if NavPanel has when='false'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        // Set small viewport to trigger drawer mode
+        yield page.setViewportSize({ width: 400, height: 600 });
+        yield initTestBed(`
+      <App layout="condensed">
+        <AppHeader testId="appHeader"/>
+        <NavPanel when="false">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer not displayed if NavPanel has when='{false}'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        // Set small viewport to trigger drawer mode
+        yield page.setViewportSize({ width: 400, height: 600 });
+        yield initTestBed(`
+      <App layout="condensed">
+        <AppHeader testId="appHeader"/>
+        <NavPanel when="{false}">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).not.toBeVisible();
+    }));
+});

package/dist/scripts/src/components/App/AppNative.js

@@ -34,6 +34,7 @@ const AppLayoutContext_1 = require("./AppLayoutContext");
 const SearchContext_1 = require("./SearchContext");
 const LinkInfoContext_1 = require("./LinkInfoContext");
 const constants_1 = require("../../components-core/constants");
+const extractParam_1 = require("../../components-core/utils/extractParam");
 exports.defaultProps = {
     scrollWholePage: true,
     noScrollbarGutters: false,
@@ -50,9 +51,19 @@ function App(_a) {
     const mounted = (0, react_1.useRef)(false);
     const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
     const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all – (–) and — (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
-    const { setLoggedInUser, mediaSize, forceRefreshAnchorScroll, appGlobals } = (0, AppContext_1.useAppContext)();
+    const appContext = (0, AppContext_1.useAppContext)();
+    const { setLoggedInUser, mediaSize, forceRefreshAnchorScroll, appGlobals } = appContext;
     const hasRegisteredHeader = header !== undefined;
-    const hasRegisteredNavPanel = navPanelDef !== undefined;
+    // --- Check if NavPanel's "when" condition allows it to be rendered
+    // --- This ensures the drawer and hamburger menu are hidden when NavPanel.when evaluates to false
+    const navPanelShouldRender = (0, react_1.useMemo)(() => {
+        if (!navPanelDef)
+            return false;
+        // Use shouldKeep to evaluate the NavPanel's when condition
+        // Pass empty state {} and appContext since we're evaluating at the App level
+        return (0, extractParam_1.shouldKeep)(navPanelDef.when, {}, appContext);
+    }, [navPanelDef, appContext]);
+    const hasRegisteredNavPanel = navPanelDef !== undefined && navPanelShouldRender;
     (0, react_1.useEffect)(() => {
         setLoggedInUser(loggedInUser);
     }, [loggedInUser, setLoggedInUser]);

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

@@ -34,11 +34,6 @@ exports.AppHeaderMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "boolean",
             defaultValue: AppHeaderNative_1.defaultProps.showLogo,
         },
-        showNavPanelIf: {
-            description: "Determines if the navigation panel should be displayed",
-            valueType: "boolean",
-            defaultValue: AppHeaderNative_1.defaultProps.showNavPanelIf,
-        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
     themeVarDescriptions: {
@@ -53,7 +48,7 @@ exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
     // --- Convert the plain (text) logo template into component definition
     const logoTemplate = node.props.logoTemplate || ((_a = node.slots) === null || _a === void 0 ? void 0 : _a.logoSlot);
     const titleTemplate = node.props.titleTemplate || ((_b = node.slots) === null || _b === void 0 ? void 0 : _b.titleSlot);
-    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo), showNavPanelIf: extractValue.asOptionalBoolean(node.props.showNavPanelIf, AppHeaderNative_1.defaultProps.showNavPanelIf), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
+    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
             type: "Stack",
             orientation: "horizontal",
         }), className: (0, classnames_1.default)(layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, className), renderChild: renderChild, children: renderChild(node.children, {

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -33,7 +33,6 @@ const hooks_1 = require("../../components-core/utils/hooks");
 const PART_HAMBURGER = "hamburger";
 exports.defaultProps = {
     showLogo: true,
-    showNavPanelIf: true,
 };
 function useLogoUrl() {
     const { logo, logoLight, logoDark } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
@@ -47,27 +46,27 @@ function useLogoUrl() {
     return toneLogoUrl || baseLogoUrl;
 }
 const AppHeader = (_a) => {
-    var { children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, showNavPanelIf = exports.defaultProps.showNavPanelIf, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot } = _a, rest = __rest(_a, ["children", "profileMenu", "style", "logoContent", "className", "canRestrictContentWidth", "navPanelVisible", "toggleDrawer", "showLogo", "showNavPanelIf", "hasRegisteredNavPanel", "title", "titleContent", "registerSubNavPanelSlot"]);
+    var { children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot } = _a, rest = __rest(_a, ["children", "profileMenu", "style", "logoContent", "className", "canRestrictContentWidth", "navPanelVisible", "toggleDrawer", "showLogo", "hasRegisteredNavPanel", "title", "titleContent", "registerSubNavPanelSlot"]);
     const { mediaSize } = (0, AppContext_1.useAppContext)();
     const logoUrl = useLogoUrl();
     const subNavPanelSlot = (0, react_1.useRef)(null);
-    const effectiveNavPanelVisible = navPanelVisible && showNavPanelIf;
+    const effectiveNavPanelVisible = navPanelVisible;
     const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, role: "banner", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
                 [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
-            }), children: [hasRegisteredNavPanel && showNavPanelIf && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_HAMBURGER, onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !effectiveNavPanelVisible) &&
+            }), children: [hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_HAMBURGER, onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !effectiveNavPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, className: AppHeader_module_scss_1.default.logoLink, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) })));
 };
 exports.AppHeader = AppHeader;
-function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, showNavPanelIf = exports.defaultProps.showNavPanelIf, renderChild, }) {
+function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, renderChild, }) {
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, registerSubNavPanelSlot, } = appLayoutContext || {};
     // console.log("APP LAYOUT CONTEXT", appLayoutContext);
     const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
     const canRestrictContentWidth = layout !== "vertical-full-header";
-    const effectiveNavPanelVisible = navPanelVisible && showNavPanelIf;
-    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: effectiveNavPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, showNavPanelIf: showNavPanelIf, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && effectiveNavPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
+    const effectiveNavPanelVisible = navPanelVisible;
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: effectiveNavPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && effectiveNavPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
 }

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

@@ -23,6 +23,37 @@ const HeadingNative_1 = require("./HeadingNative");
 const extractParam_1 = require("../../components-core/utils/extractParam");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Heading";
+/**
+ * Normalizes the level value to a valid HeadingLevel (h1-h6).
+ * Accepts: 1-6, "1"-"6", "h1"-"h6", "H1"-"H6"
+ * Returns "h1" for any invalid value.
+ */
+function normalizeHeadingLevel(value) {
+    if (value === null || value === undefined) {
+        return "h1";
+    }
+    // Handle numeric values (1-6)
+    if (typeof value === "number") {
+        if (value >= 1 && value <= 6) {
+            return `h${value}`;
+        }
+        return "h1";
+    }
+    // Handle string values
+    if (typeof value === "string") {
+        const trimmed = value.trim().toLowerCase();
+        // Handle "h1"-"h6" (case insensitive)
+        if (/^h[1-6]$/.test(trimmed)) {
+            return trimmed;
+        }
+        // Handle "1"-"6"
+        if (/^[1-6]$/.test(trimmed)) {
+            return `h${trimmed}`;
+        }
+    }
+    // Default fallback
+    return "h1";
+}
 const VALUE_DESC = (0, metadata_helpers_1.d)(`This property determines the text displayed in the heading. \`${COMP}\` also accepts nested ` +
     `text instead of specifying the \`value\`. If both \`value\` and a nested text are used, ` +
     `the \`value\` will be displayed.`);
@@ -68,8 +99,14 @@ exports.HeadingMd = (0, metadata_helpers_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         level: {
-            description: "This property sets the visual significance (level) of the heading.",
-            availableValues: ["h1", "h2", "h3", "h4", "h5", "h6"],
+            description: "This property sets the visual significance (level) of the heading. " +
+                "Accepts multiple formats: `h1`-`h6`, `H1`-`H6`, or `1`-`6`." +
+                "Invalid values default to `h1`.",
+            availableValues: [
+                "h1", "h2", "h3", "h4", "h5", "h6",
+                "H1", "H2", "H3", "H4", "H5", "H6",
+                "1", "2", "3", "4", "5", "6",
+            ],
             defaultValue: HeadingNative_1.defaultProps.level,
         },
         maxLines: MAX_LINES_DESC,
@@ -278,11 +315,14 @@ exports.H6Md = (0, metadata_helpers_1.createMetadata)({
     },
 });
 function renderHeading({ node, extractValue, className, level, renderChild, registerComponentApi, }) {
-    var _a, _b, _c;
-    const _d = node.props, { maxLines, preserveLinebreaks, ellipses, showAnchor } = _d, restProps = __rest(_d, ["maxLines", "preserveLinebreaks", "ellipses", "showAnchor"]);
+    var _a, _b;
+    const _c = node.props, { maxLines, preserveLinebreaks, ellipses, showAnchor } = _c, restProps = __rest(_c, ["maxLines", "preserveLinebreaks", "ellipses", "showAnchor"]);
     delete restProps.level; // Remove level from restProps as it is handled separately
     const showAnchorValue = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.showAnchor);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_b = extractValue.asOptionalString(level)) !== null && _b !== void 0 ? _b : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: showAnchorValue, className: className, omitFromToc: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.omitFromToc), registerComponentApi: registerComponentApi }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
+    // Extract and normalize the level value
+    const extractedLevel = extractValue(level);
+    const normalizedLevel = normalizeHeadingLevel(extractedLevel);
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: normalizedLevel, maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: showAnchorValue, className: className, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc), registerComponentApi: registerComponentApi }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
 }
 exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({

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

@@ -336,6 +336,88 @@ fixtures_1.test.describe("Basic Functionality", () => {
         const driver = yield createHeadingDriver();
         yield (0, fixtures_1.expect)(driver.component).toHaveText("Child content text");
     }));
+    fixtures_1.test.describe("level property accepts numeric values", () => {
+        [1, 2, 3, 4, 5, 6].forEach((level) => {
+            (0, fixtures_1.test)(`level="{${level}}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="{${level}}">Numeric Level ${level}</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(`h${level}`);
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Numeric Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property accepts string numeric values", () => {
+        ["1", "2", "3", "4", "5", "6"].forEach((level) => {
+            (0, fixtures_1.test)(`level="${level}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="${level}">String Level ${level}</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(`h${level}`);
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`String Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property accepts uppercase H format", () => {
+        ["H1", "H2", "H3", "H4", "H5", "H6"].forEach((level) => {
+            (0, fixtures_1.test)(`level="${level}" renders as ${level.toLowerCase()}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="${level}">Uppercase Level ${level}</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(level.toLowerCase());
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Uppercase Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property handles invalid values", () => {
+        [
+            { value: '"invalid"', label: "invalid string" },
+            { value: '"{0}"', label: "zero" },
+            { value: '"{7}"', label: "out of range number (7)" },
+            { value: '"{-1}"', label: "negative number" },
+            { value: '"{999}"', label: "large number" },
+            { value: '"h7"', label: "invalid h-format (h7)" },
+            { value: '"h0"', label: "invalid h-format (h0)" },
+            { value: '"7"', label: "out of range string (7)" },
+            { value: '"{null}"', label: "null" },
+            { value: '"{undefined}"', label: "undefined" },
+            { value: '"{{}}"', label: "empty object" },
+            { value: '"{[]}"', label: "empty array" },
+        ].forEach(({ value, label }) => {
+            (0, fixtures_1.test)(`level=${value} (${label}) defaults to h1`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level=${value}>Invalid Level Fallback</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
+                yield (0, fixtures_1.expect)(driver.component).toHaveText("Invalid Level Fallback");
+            }));
+        });
+    });
+    (0, fixtures_1.test)("level property with mixed case string formats", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        const testCases = [
+            { input: "H3", expected: "h3" },
+            { input: "h3", expected: "h3" },
+            { input: "h3", expected: "h3" },
+        ];
+        for (const { input, expected } of testCases) {
+            yield initTestBed(`<Heading level="${input}">Mixed Case ${input}</Heading>`);
+            const driver = yield createHeadingDriver();
+            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+            const tagName = yield driver.getComponentTagName();
+            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(expected);
+        }
+    }));
+    (0, fixtures_1.test)("level property handles whitespace in string values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<Heading level=" h2 ">Whitespace Level</Heading>`);
+        const driver = yield createHeadingDriver();
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
+    }));
 });
 // =============================================================================
 // ACCESSIBILITY TESTS (REQUIRED)

package/dist/scripts/src/components-core/rendering/valueExtractor.js

@@ -43,6 +43,14 @@ function collectParams(expression) {
 function asOptionalBoolean(value, defValue) {
     if (value === undefined || value === null)
         return defValue;
+    // Empty array returns false
+    if (Array.isArray(value) && value.length === 0) {
+        return false;
+    }
+    // Empty object returns false
+    if (typeof value === "object" && value !== null && !Array.isArray(value) && Object.keys(value).length === 0) {
+        return false;
+    }
     if (typeof value === "number") {
         return value !== 0;
     }
@@ -64,7 +72,7 @@ function asOptionalBoolean(value, defValue) {
     if (typeof value === "boolean") {
         return value;
     }
-    throw new Error(`A boolean value expected but ${typeof value} received.`);
+    return true;
 }
 // This function represents the extractor function we pass to extractValue
 function createValueExtractor(state, appContext, referenceTrackedApi, memoedVarsRef) {

package/dist/scripts/src/components-core/utils/extractParam.js

@@ -15,6 +15,7 @@ const ParameterParser_1 = require("../script-runner/ParameterParser");
 const eval_tree_sync_1 = require("../script-runner/eval-tree-sync");
 const LruCache_1 = require("../utils/LruCache");
 const descriptorHelper_1 = require("../descriptorHelper");
+const valueExtractor_1 = require("../rendering/valueExtractor");
 /**
  * Extract the value of the specified parameter from the given view container state
  * @param state The state of the view container
@@ -159,7 +160,7 @@ function shouldKeep(when, componentState, appContext) {
     if (when === undefined) {
         return true;
     }
-    return extractParam(componentState, when, appContext, true);
+    return (0, valueExtractor_1.asOptionalBoolean)(extractParam(componentState, when, appContext, true));
 }
 /**
  * Resolves props that can either be regular properties or URL resources.