@dubai-design-system/components-js 5.1.1 → 5.3.0

package/dist/collection/components/dda-header/dda-header.js

@@ -1,4 +1,6 @@
 import { h } from "@stencil/core";
+import { parseJsonProp } from "../../utils/parse-json-prop";
+import { normalizeQuickLinks } from "./nav-model";
 // Gives each header its own search input ids, so several headers on a page do not clash.
 let headerInstanceCount = 0;
 export class DdaHeader {
@@ -7,8 +9,16 @@ export class DdaHeader {
         this.firstLogoHref = '/';
         /** Link URL of the second logo on desktop and mobile. Default: `/`. */
         this.secondLogoHref = '/';
+        /** Hides the "other" side-menu links and their title. Default: `false`. */
+        this.hideOtherMenu = false;
+        /** The contrast option shown as selected. The header updates it when the user picks an option. Default: `normal`. */
+        this.selected_contrast = 'normal';
+        /** Hides the Login link in the desktop toolbar and the side menu. */
+        this.hide_login = false;
         /** `lang` attribute of the language buttons, the language of `language_text`. Default: `ar`. */
         this.language_lang = 'ar';
+        /** When `false`, the header renders no accessibility panel; the buttons only emit `accessibilitymenufunctionality`, so the page can open its own panel. Default: `true`. */
+        this.usePredesignedAccessibilityMenu = true;
         this.isMenuOpen = false;
         this.isSubMenuOpen = false;
         this.isSideSubMenuOpen = false;
@@ -21,6 +31,9 @@ export class DdaHeader {
         this.menu_button_label = 'Menu';
         this.openMenus = {};
         this.activeMenuIndex = null;
+        this.activeSubIndex = null;
+        /** Offset (px) from the top of the open dropdown to the opener of its third-level panel. */
+        this.activeSubTop = 0;
         this.toggleEscapeKey = (event) => {
             if (event.key === 'Escape') {
                 if (this.isSearchOpen) {
@@ -31,6 +44,7 @@ export class DdaHeader {
                 this.isSubMenuOpen = false;
                 this.isSideSubMenuOpen = false;
                 this.activeMenuIndex = null;
+                this.activeSubIndex = null;
             }
         };
         this.handleSearchSubmit = (event) => {
@@ -41,6 +55,7 @@ export class DdaHeader {
                 input.focus();
                 return;
             }
+            this.searchInput.emit(query);
             const searchEvent = this.searchSubmit.emit({ query });
             // Without a results URL there is nowhere to go; a cancelled event means the app routes itself.
             if (searchEvent.defaultPrevented || !this.search_action) {
@@ -80,11 +95,15 @@ export class DdaHeader {
         };
         this.handleOutsideMegaMenuClick = (event) => {
             if (this.activeMenuIndex !== null) {
-                const megaMenu = document.querySelector('.megamenu-content');
-                const isClickInsideMegaMenu = megaMenu && megaMenu.contains(event.target);
-                const isClickOnToggleLink = event.target.closest('.showSub');
-                if (!isClickInsideMegaMenu && !isClickOnToggleLink) {
+                // A click anywhere inside the top-level menu is not an "outside" click: the mega-menu
+                // content and the 3.x dropdown's second/third levels both render inside their <li>, which
+                // is inside .dda-mega-menu, so this covers every open level without naming a specific one
+                // (naming ".megamenu-content" alone, for example, always matches when any mega item exists,
+                // open or not, and would never let the 3.x dropdown branch be reached).
+                const isClickInsideMenu = event.target.closest('.dda-mega-menu');
+                if (!isClickInsideMenu) {
                     this.activeMenuIndex = null;
+                    this.activeSubIndex = null;
                 }
             }
         };
@@ -114,36 +133,46 @@ export class DdaHeader {
             this.isMenuOpen = !this.isMenuOpen;
         };
         this.toggleSubMenu = (index, event) => {
-            // this.isSubMenuOpen = !this.isSubMenuOpen;
             if (event)
                 event.preventDefault();
             this.activeMenuIndex = this.activeMenuIndex === index ? null : index;
+            this.activeSubIndex = null;
         };
         this.toggleAccessibilty = () => {
-            this.isAccessibiltyOpen = !this.isAccessibiltyOpen;
+            if (this.usePredesignedAccessibilityMenu) {
+                this.isAccessibiltyOpen = !this.isAccessibiltyOpen;
+            }
+            this.accessibilityMenuToggle.emit();
         };
         this.languagehandler = () => {
             this.languageSwitch.emit();
         };
         this.smTexthandler = () => {
+            this.selected_text_size = 'small';
             this.smTextSize.emit();
         };
         this.baseTexthandler = () => {
+            this.selected_text_size = 'normal';
             this.baseTextSize.emit();
         };
         this.lgTexthandler = () => {
+            this.selected_text_size = 'large';
             this.lgTextSize.emit();
         };
         this.normalContrasthandler = () => {
+            this.selected_contrast = 'normal';
             this.normalContrast.emit();
         };
         this.blindContrasthandler = () => {
+            this.selected_contrast = 'colorblind';
             this.blindContrast.emit();
         };
         this.redContrasthandler = () => {
+            this.selected_contrast = 'redweakness';
             this.redContrast.emit();
         };
         this.greenContrasthandler = () => {
+            this.selected_contrast = 'greenweakness';
             this.greenContrast.emit();
         };
         this.renderSubMenu = (subMenu, parentLi) => {
@@ -220,7 +249,7 @@ export class DdaHeader {
         return [
             h("label", { htmlFor: id, class: "visually-hidden" }, this.searchText || 'Search'),
             h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"),
-            h("input", { name: this.search_input_name || 'q', type: "text", id: id, placeholder: this.searchText || 'Search', enterkeyhint: "search", autocomplete: "off", ref: ref }),
+            h("input", { name: this.search_input_name || 'q', type: "text", id: id, placeholder: this.text(this.search_input_placeholder, this.searchText || 'Search'), enterkeyhint: "search", autocomplete: "off", ref: ref }),
         ];
     }
     // The transparent style (<body class="transparent">) shows only at the top of the page.
@@ -237,15 +266,96 @@ export class DdaHeader {
             return [];
         }
     }
+    // Text-prop rule: an absent attribute uses the English default; an empty one means "show nothing".
+    text(value, fallback) {
+        return value === undefined || value === null ? fallback : value;
+    }
+    // The three columns of the accessibility panel. The desktop panel and the side-menu panel show
+    // the same content; only the radio group and ids differ, so both panels stay independent forms.
+    renderAccessibilityColumns(variant) {
+        var _a;
+        const suffix = variant === 'mobile' ? 'Mobile' : '';
+        const group = variant === 'mobile' ? 'themeselectionmobile' : 'themeselection';
+        const contrastTitle = this.text(this.contrast_title, 'Contrast');
+        const contrastDescription = this.text(this.contrast_description, 'Select your preferred contrast setting');
+        const readSpeakerLink = this.readSpeakerLink || this.read_speaker_link;
+        const screenReaderTitle = this.text(this.screen_reader_title, 'Screen Reader');
+        const screenReaderDescription = this.text(this.screen_reader_description, 'Listen to the content of the page by clicking play or listen');
+        const textSizeTitle = this.text(this.text_size_title, 'Text Size');
+        const textSizeDescription = this.text(this.text_size_description, 'Use the buttons below to increase or decrease the text size');
+        const options = [
+            { value: 'normal', label: this.text((_a = this.contrast_normal_text) !== null && _a !== void 0 ? _a : this.contrast_noraml_text, 'Normal'), id: 'Normal', handler: this.normalContrasthandler },
+            { value: 'colorblind', label: this.text(this.contrast_color_blind_text, 'Colours Blind'), id: 'ColoursBlind', handler: this.blindContrasthandler },
+            { value: 'redweakness', label: this.text(this.contrast_red_weakness_text, 'Red Weakness'), id: 'RedWeakness', handler: this.redContrasthandler },
+            { value: 'greenweakness', label: this.text(this.contrast_green_weakness_text, 'Green Weakness'), id: 'GreenWeakness', handler: this.greenContrasthandler },
+        ];
+        const sizes = [
+            { value: 'normal', label: 'A', handler: this.baseTexthandler },
+            { value: 'large', label: 'A+', handler: this.lgTexthandler },
+            { value: 'small', label: 'A-', handler: this.smTexthandler },
+        ];
+        return (h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, contrastTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, contrastTitle), h("form", null, h("fieldset", { class: "dda-theme-list" }, contrastDescription && (h("legend", null, h("p", { class: "mb-3" }, contrastDescription))), options.map(option => option.label ? (h("dda-radiobutton", { title_text: option.label, checked: this.selected_contrast === option.value, size: "sm", variants: "normal", supporting: "", group_name: group, input_id: `${option.id}${suffix}`, custom_class: "", component_mode: "", onClick: option.handler })) : null)))), readSpeakerLink && (h("div", { class: "dda-col-md-4 dda-accessibility-item" }, screenReaderTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, screenReaderTitle), screenReaderDescription && h("p", { class: "mb-3" }, screenReaderDescription), h("div", { class: "rs_skip rsbtn rs_preserve", id: `readspeaker_button1${suffix}` }, h("a", { href: readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: variant === 'desktop' ? 'L' : undefined, "aria-label": this.text(this.screen_reader_link_label, 'Listen to this page using ReadSpeaker') }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, textSizeTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, textSizeTitle), textSizeDescription && h("p", { class: "mb-3" }, textSizeDescription), h("div", { class: "d-flex dda-gap-4 dda-text-size-buttons" }, sizes.map(size => (h("dda-button", { button_color: this.selected_text_size === size.value ? 'default-primary' : 'default-secondary', icon_button_shape: "circle", custom_class: "", size: "lg", onClick: size.handler }, size.label)))))));
+    }
+    // A tooltip must have text, so an empty tooltip attribute falls back to the default.
+    tooltip(value, fallback) {
+        return value ? value : fallback;
+    }
+    get loginLabel() {
+        return this.text(this.loginText, 'Login');
+    }
+    // 3.x hid Login when login-text was empty; hide_login is the 5.x switch.
+    get showLogin() {
+        return !this.hide_login && this.loginLabel !== '';
+    }
+    get languageLabel() {
+        return this.text(this.language_text, 'العربية');
+    }
+    renderAccessibilityButton(variant) {
+        const id = this.accessibility_button_id ? (variant === 'desktop' ? this.accessibility_button_id : `${this.accessibility_button_id}-sidemenu`) : undefined;
+        const iconClass = this.accessibility_button_icon_family || 'material-icons  material-symbols-outlined';
+        const buttonClass = variant === 'desktop' ? 'tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn' : 'tool-btn accessibility-btn';
+        return (h("button", { id: id, name: variant === 'desktop' ? this.toggle_accessibility_button_name : this.accessibility_button_name, class: buttonClass, type: "button", "aria-expanded": this.usePredesignedAccessibilityMenu ? (this.isAccessibiltyOpen ? 'true' : 'false') : undefined, onClick: this.toggleAccessibilty }, h("i", { class: iconClass, "aria-hidden": "true" }, this.accessibility_button_icon_name || 'accessibility'), h("span", { class: "visually-hidden" }, this.text(this.accessibility_button_text, 'Accessibility'))));
+    }
+    renderDropdown(item, index) {
+        const id = this.menuPanelId(index);
+        // The third-level panels are siblings of the <ul>, not children of its <li> items. The <ul>
+        // scrolls (max-height), and a scroll container clips an absolutely positioned child on both
+        // axes, so a fly-out inside it cannot show. The open panel is aligned with its opener.
+        return (h("div", { id: id, class: { 'dda-default-submenu': true, 'is-visible': this.activeMenuIndex === index } }, h("ul", null, item.children.map((child, subIndex) => {
+            const hasSub = child.kind === 'dropdown';
+            const subId = `${id}-${subIndex}`;
+            const isOpen = this.activeSubIndex === subIndex;
+            return (h("li", { key: subIndex }, h("a", { id: child.id, href: hasSub ? '#' : child.href, class: { 'has-submenu': hasSub, active: isOpen || child.active }, "aria-expanded": hasSub ? String(isOpen) : undefined, "aria-controls": hasSub ? subId : undefined, "aria-current": child.active && !hasSub ? 'page' : undefined, onClick: (event) => {
+                    if (!hasSub)
+                        return;
+                    event.preventDefault();
+                    const opener = event.currentTarget;
+                    const panel = opener.closest('.dda-default-submenu');
+                    if (panel)
+                        this.activeSubTop = opener.getBoundingClientRect().top - panel.getBoundingClientRect().top;
+                    this.activeSubIndex = isOpen ? null : subIndex;
+                } }, child.label)));
+        })), item.children.map((child, subIndex) => {
+            if (child.kind !== 'dropdown')
+                return null;
+            const isOpen = this.activeSubIndex === subIndex;
+            return (h("div", { key: `sub-${subIndex}`, id: `${id}-${subIndex}`, class: { 'dda-default-subsubmenu': true, 'is-visible': isOpen }, style: isOpen ? { top: `${this.activeSubTop}px` } : undefined }, h("div", { class: "dda-default-subsubmenu-content" }, h("span", { class: "dda-submenu-title" }, child.submenuTitle || child.label), h("ul", null, child.children.map((leaf, leafIndex) => (h("li", { key: leafIndex }, h("a", { id: leaf.id, href: leaf.href, "aria-current": leaf.active ? 'page' : undefined }, leaf.label))))))));
+        })));
+    }
+    /** The id of the dropdown or mega panel that top-level item `index` opens. */
+    menuPanelId(index) {
+        return `${this.searchId}-submenu-${index}`;
+    }
+    renderMega(item, index) {
+        return (h("div", { id: this.menuPanelId(index), class: `megamenu-content ${this.activeMenuIndex === index ? 'showSubMenu' : ''}`, style: { display: this.activeMenuIndex === index ? 'block' : 'none' } }, h("div", { class: "megamenu-item dda-container" }, h("div", { class: "dda-row" }, item.columns.map((column, columnIndex) => (h("div", { class: "dda-col-md-3", key: columnIndex }, column.title && h("h3", { class: "mega-menu-title" }, column.title), h("ul", null, column.links.map((link, linkIndex) => (h("li", { key: linkIndex }, h("a", { class: "megamenu-link", href: link.href }, h("span", { class: "dda-btn btn-color-onsurface-secondary btn-size-sm icon-btn-default" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, link.icon)), h("span", { class: "text-wrap" }, h("span", { class: "title-text dda-fs-body-lg dda-fw-700" }, link.label), link.description && h("span", { class: "dda-fs-tagline-lg dda-fw-400" }, link.description))))))))))), h("button", { name: "close-mega-menu", class: "close-btn close_mega-menu", "aria-label": "Close Sidebar", onClick: () => (this.activeMenuIndex = null) }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close")))));
+    }
     render() {
         const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
-        const quickLinks = this.parseJsonArray(this.quickLinks);
-        const setActiveMenuIndex = (index) => {
-            this.activeMenuIndex = index;
-        };
+        const quickLinks = normalizeQuickLinks(this.quickLinks);
+        const otherMenuItems = parseJsonProp(this.otherMenuItems, 'other-menu-items');
         // The transparent style is opt-in at page level (<body class="transparent">);
         // CSS shows the white or colored logo to match.
-        return (h("header", { key: '59dd1315a658cac296fcf0b20d4bc7a218830efa', class: "dda-header" }, h("div", { key: '371a2169e8523c2929819802834a3b81027b2c1c', class: "dda-head-logo" }, h("a", { key: 'ddb83469513f05f58f55e55d55b1ead2e0410aee', href: this.firstLogoHref, class: "govt-logo" }, h("img", { key: 'fb68cbe224b76c34a75f41df1ba5444219d79fcd', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }), h("img", { key: '9ba056231acfc221053e446547e87d6df5682f75', class: "logo-white", src: this.firstLogoWhiteSrc || this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: 'f69244d54b2493c5b2d9edafdd091e1ce3461726', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '4b10f167c2b46db1709a8392aba31a5cd927f23d', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'f219bb5766f7aa634a8ffcbbbb70930ffaf9a6ef', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: 'bf11dd171cc21e22ff6ac555b071eecf21f4b6f9', class: "dda-menu-container" }, h("div", { key: 'ce4af3626562ee8d52bc65f5407b635c1fa8a2e4', class: "dda-main-navigation" }, h("div", { key: 'e102c3415dea6eb0c080faab1ccab6992000579a', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '3662a9e76afd20212f1a5aed95d8c28add730166', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '7235cd99a0aa41a1bf7c65bd57107bbe5bcefbcf', title_text: "Menu", position: "top", class: "d-block" }, h("button", { key: 'd320d2ac96e2ba0423a67a6a11982ba4c3db0274', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '6b0b0370d75c3e27a4c015d4e2b58fe4ec369e82', class: "hamburger-line" }), h("span", { key: '98feb32b6306000cb5d3aabaffc1326b1073a0af', class: "hamburger-menu-text" }, this.menu_button_label)))), h("div", { key: 'ce8cfb9de3da448449aa0147ba4daec255b551f5', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '9b99da2e547a1cca25139daeb75481a9cf3707df', class: "dda-sidemenu-content" }, h("p", { key: '0c0997ab12ea8efb4641b7c92191f1eea4b78f9d', class: "dda-side-nav-title" }, "Quick Links"), h("ul", { key: 'b27239f08af63fa46a4f630a2aceefa7bc137521', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
+        return (h("header", { key: '32433ee95f1ae35e0f74ccb5d6b096f589695e98', class: "dda-header" }, h("div", { key: '9ad5e7bae10b14edb5e4b425a398f5558d5f9235', class: "dda-head-logo" }, h("a", { key: 'eb6b3a1a8a251b36403032991208c6851fe13c8f', href: this.firstLogoHref, class: "govt-logo" }, h("img", { key: 'ad7ac43b73cf44d723741de98868bad4dd851671', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }), h("img", { key: '18ea73459cb1872774664b5f462d5ef62aa6797e', class: "logo-white", src: this.firstLogoWhiteSrc || this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: '0eefe4a0f33ffdf3985afae932e66913fd13a8f3', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: 'df4932bc5a0f04aeedbc96042eaa45bb8618f6be', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'ba7c80b44d063cae03ba9383791e6fd3130847e7', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: 'f65d90eb129e728b5e2765dc56edb7f810cdfd35', class: "dda-menu-container" }, h("div", { key: '0350e48d6b954849223565e1bf7f12ae7412186d', class: "dda-main-navigation" }, h("div", { key: '94b7d46db89ebfdaf56e0e42b7e1f169ee5c0ace', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: 'f9f95ecec3c42ebcf2b19f648aa58e66992d7639', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: 'c54f460c9594e0d6419d6be238cef43cf36131d0', title_text: this.tooltip(this.menu_button_label, 'Menu'), position: "top", class: "d-block" }, h("button", { key: '5eed1a83dddc0611d452e5b592ce0a94aa4c41e0', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: 'aed42c584a5bbcc1a06e932d613137d3aea6ba34', class: "hamburger-line" }), h("span", { key: 'a77cbf53977e5c6347a3847f2199487870a9dc9e', class: "hamburger-menu-text" }, this.menu_button_label)))), h("div", { key: '8da7f3edac3d3ad3cc73e29b6aa794c18b2d4199', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '444bd4291f474d6f50d47e1aab4a4a275d0a5028', class: "dda-sidemenu-content" }, this.text(this.sideMainMenuTitle, 'Quick Links') && h("p", { key: '0794f5ea9a0ea1750b5fb7d3f84002368d498177', class: "dda-side-nav-title" }, this.text(this.sideMainMenuTitle, 'Quick Links')), h("ul", { key: 'bc0f6a674f6a9aa5ce1678a5942147e615393ee9', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
             const currentIndex = `menu-${index}`;
             return (h("li", { key: currentIndex }, h("a", { href: menu.href, class: menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : '', onClick: (e) => {
                     if (menu.subMenu && menu.subMenu.length > 0) {
@@ -253,7 +363,14 @@ export class DdaHeader {
                         this.toggleSidebarSubMenu(currentIndex);
                     }
                 } }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        }))), h("div", { key: '78c00fb0f772f8ef14f3143005c0c01c43614327', class: "dda-sidemenu-bottom" }, h("div", { key: 'd8ec6ff9cd24976246b52f44a21860c44d6fe30e', class: "dda-sidemenu-gov-logo" }, h("a", { key: 'afd4079340a3a11ff388776795d8e314027f069e', href: this.firstLogoHref, class: "govt-logo mb-2" }, h("img", { key: 'f6a416cb3c51610973098c7141984d77c27c63a8', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: '8183fe7af2ea534ae6a45fb3b6d6a73aa42a2a44', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '6dc9b6919682fa07445fc2d4a04b3f00e54a6f13' }, h("li", { key: '218db01f3bc3fec795c9f4df86d07a218fd5705c' }, h("button", { key: 'd561db307ed92a7c0f5580116ecf1b4c711e92ba', name: this.accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: '05b9b362a8b2f952c7422406a2e2998615afbde8', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: '20c9a8c6397d48999f8295b355c1a76f2a713aea', class: "visually-hidden" }, "Accessibility"))), h("li", { key: '219bcada14c3ea43b954972c0ad4d84417e92edb' }, h("button", { key: 'e92e67881b846d01eddc32ce40d727c514cf6425', name: this.language_button_name, class: "tool-btn", type: "button", lang: this.language_lang, onClick: this.languagehandler }, this.language_text || 'العربية')), h("li", { key: '83ee1defd4c1fbd3b2398ac5a020fa5a5c9760e8' }, h("dda-link-button", { key: 'c54639af89c90453d5239e41cdd21d9ac983f52c', button_color: "onsurface-secondary", start_icon: this.loginIcon || "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, this.loginText || "Login"))))), h("button", { key: 'fa0ff380e6640b14e8a68bfd9074fb12521734a3', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '47bef965ed275a4dd13c640686200d301401888a', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), h("div", { key: 'e9db953553b8d9ddd6936265a79f332f5cff4a79', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '81369335fb6617ec6475256d4c1f159a0e27d2c4', class: "dda-row" }, h("div", { key: 'a3263b292a3be96c226fd39e2a5c3c9789450434', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '4b25cb205d07d0492a4563cee530bce61d7e703a', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '520a5e581bb4d1897967f5a4f62f763d3b7a900c' }, h("fieldset", { key: 'd7da70d546e29966c46b46acc4fc8b9da88bd935', class: "dda-theme-list" }, h("legend", { key: '4d5aac066576da67514911218e77c6832d27315b' }, h("p", { key: '388d12fda2cafcd65e63797a95006eed854864c4', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '1ce8acc8b8563785d2aa4784e23073a857831ddd', title_text: "Normal", checked: true, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "NormalMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.normalContrasthandler }), h("dda-radiobutton", { key: '6d5d24597fef7ed4c44af9b1cb78a81a62106e68', title_text: "Colours Blind", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.blindContrasthandler }), h("dda-radiobutton", { key: '09b76a180088333990666d9192bfd48f1e3ab106', title_text: "Red Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.redContrasthandler }), h("dda-radiobutton", { key: 'fc04f59e26db42c003bc9e747ef45cdb37f939f4', title_text: "Green Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.greenContrasthandler })))), this.readSpeakerLink && (h("div", { key: '2b81244b885a559f63052b0c410712e3413bba07', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '08b480bbcadf295b5e9cddfc8922f501c7257275', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '3367d78424ae9347cca07f396bdbcc9c2d2ae3cc', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: 'dcfdfabc03228a8047098b4be1e22233a80d13cf', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '9b62bd9de4ae598d8d985fb333890558ebf703e3', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '5790bc76d11a0802a6fa0ff2352180293bbb87b5', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: '0696385c365f09386911b99e52296861c9a25cc6', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '5ebb37d526d9df77911abfed12bd7526d935fa51', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '4c51f6441ab4695554a7d6c9173b9be51094bda6', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: 'fe783a08a7247425af5ef5c45e16f77a1e0dab05', class: "d-flex dda-gap-4" }, h("dda-button", { key: '0c25a459f06411d169c2e00b4a7639bf452d7d31', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '6462ea39225b2920f75f1e2d2530a0188b17b269', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '1e919f8fabcf632b14c6cbb591cc83ad41289bd0', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: 'a3d48453b5a782c79946077128d32247b4a4cbcd', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: '9c60683163918bbe155bece05845fd03ce78b424', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: '2d2382de432be40014ff5c85316219e2e7fc8093' }, h("ul", { key: '02ae9037c7d1df9304274d8aa89909e19107f6ca', class: "dda-mega-menu" }, quickLinks.map((link, index) => (h("li", { key: index }, h("a", { href: link.subMenu && link.subMenu.length > 0 ? '#' : link.href, onClick: link.subMenu && link.subMenu.length > 0 ? (e) => this.toggleSubMenu(index, e) : undefined, class: link.subMenu && link.subMenu.length > 0 ? `showSub ${this.activeMenuIndex === index ? 'icon_arrow' : ''}` : '' }, link.label), link.subMenu && link.subMenu.length > 0 && (h("div", { class: `megamenu-content ${this.activeMenuIndex === index ? 'showSubMenu' : ''}`, style: { display: this.activeMenuIndex === index ? 'block' : 'none' } }, h("div", { class: "megamenu-item dda-container" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-3" }, h("h3", { class: "mega-menu-title" }, link.menuLabel), h("ul", null, link.subMenu.map((subItem, subIndex) => (h("li", { key: subIndex }, h("a", { class: "megamenu-link", href: subItem.href }, h("span", { class: "dda-btn btn-color-onsurface-secondary btn-size-sm icon-btn-default" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, subItem.icon)), h("span", { class: "text-wrap" }, h("span", { class: "title-text dda-fs-body-lg dda-fw-700" }, subItem.title), h("span", { class: "dda-fs-tagline-lg dda-fw-400" }, subItem.description))))))))), h("button", { name: "close-mega-menu", class: "close-btn close_mega-menu", "aria-label": "Close Sidebar", onClick: () => setActiveMenuIndex(null) }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))))))))))), h("div", { key: 'ef459368f5e5fb8cccb7f58f2f8c438244484f9e', class: "dda-mobile-entt-logo" }, h("a", { key: '30ef36afb8b646906cbeaf6b00c2e7e15fc4201a', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '65ff555fb1a8ec62592d3cd1da762406b724aab6', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '45f1bd4d88fef0022720bfaf9bfdcdd0d816da76', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '83c7b5e5608b40e6ff0826e0cdf0987760ec1850', class: "dda-mobile-search" }, h("button", { key: '7fb8234ee06ed486bb214f5ca8c4aa1864ea39a9', name: this.search_button_name, class: "tool-btn", type: "button", "aria-expanded": this.isSearchOpen ? 'true' : 'false', "aria-controls": `${this.searchId}-mobile-panel`, onClick: this.isSearchOpen ? this.closeMobileSearch : this.openMobileSearch, ref: el => (this.mobileSearchButton = el) }, h("span", { key: 'cddcc6cbe685ccb1303adf24b8ec6330cfaeb220', class: "visually-hidden" }, "Search"), h("i", { key: 'f4eccf210454c85bf799d7de4da22c9a0567070b', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"))), h("div", { key: 'e3ac3313bc39a2cc4c3a2ec31fdf26c3bc954887', id: `${this.searchId}-mobile-panel`, class: "dda-mobile-search-panel", hidden: !this.isSearchOpen }, h("form", { key: '0c23afb9213d0f152f503f4249e2e25e7ddc6d71', class: "dda-mobile-search-form", role: "search", method: "get", action: this.search_action, onSubmit: this.handleSearchSubmit }, this.renderSearchInput(`${this.searchId}-mobile`, el => (this.mobileSearchInput = el)), h("button", { key: 'eee2d74848571266c1fcc4c43e96cf16fc269cbc', type: "button", class: "dda-mobile-search-close", "aria-label": "Close search", onClick: this.closeMobileSearch }, h("i", { key: '8c731144346ca6823d46fda0055e9b59b8acb5ea', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: '0cb03232c422487307c89d3478bb950ebd376496', class: "dda-toolbar-menu" }, h("ul", { key: '745548b4dd5232851df4deb31966e2dc4c10e9c0' }, h("li", { key: 'c7af1a3b3e163ef9715dfafb4f19589c65b5f229' }, h("dda-tooltip", { key: '27215775afa33720398f44fa3ff8b62933b33d2d', title_text: "Search", description: "", position: "top" }, h("form", { key: 'cff735205d4eaeadc1cb3164bd693462c67fc5c2', class: "dda-search dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle tool-btn", role: "search", method: "get", action: this.search_action, onSubmit: this.handleSearchSubmit }, this.renderSearchInput(this.searchId)))), h("li", { key: 'baa189f8aa60b856189033213783dea5005e0b05' }, h("dda-tooltip", { key: 'b80f89423b1994fc6051d0deabef1a54b3a95f07', title_text: "Accessibility", position: "top" }, h("button", { key: '9487c51c19b5652f36cd0ac61b10c35caf703aac', name: this.toggle_accessibility_button_name, class: "tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn", type: "button", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: 'cc26a3a646b4fe2957496347884f997a2d85ad9e', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: '2a39cff99e5b565f8ed6b4144a9114dae197318f', class: "visually-hidden" }, "Accessibility"))), h("div", { key: '8c44662a244298438715f0ec3aefaf08aecdbba1', class: "dda-accessibility-wrap" }, h("div", { key: 'c249aea4288ff53610b8d724ca9cd11829eaab8e', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '1cc9cdc5d432463ef8b5be0de1b50dfa5437de47', class: "dda-row" }, h("div", { key: 'd6e5722cfe7e80d368fce9492f6158a1428e8156', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '503e6e630db2084b42e8e86a9982e7052cfec46c', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '3c4f8861e83f89a17594a3ebe645cd8d6e7d6b8d' }, h("fieldset", { key: '132f829683b59536b030f8b56f64202817415314', class: "dda-theme-list" }, h("legend", { key: 'af8091c21864dc01db098cdc08783a3d94882d48' }, h("p", { key: '310afc13ed6f28624e9f08217dd7e95ac985cea8', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '86edfef83708d41703cf80ed43004fbad68a7c8e', title_text: "Normal", checked: true, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "Normal", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.normalContrasthandler }), h("dda-radiobutton", { key: '82782391a43cac382e5b02b569fe73af2aab5d49', title_text: "Colours Blind", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.blindContrasthandler }), h("dda-radiobutton", { key: '440cdf1a898753e6f3fae2e7f1774d5d9edb30bf', title_text: "Red Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.redContrasthandler }), h("dda-radiobutton", { key: '80902bb590f67aac585efd773428738e6fce71c1', title_text: "Green Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.greenContrasthandler })))), this.readSpeakerLink && (h("div", { key: '855a0e77f04385eea69ed9fab54909da634b43a7', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '8574c03680b6e976e8d9b6b3a1b14ae2223ca5d1', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: 'db6f47a1743f9619676f3b27d7bb07003a626165', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '12ae575eb54578f2c3008c4815435ba739e27330', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '8362fc23c0725b831f99604d88e0e86903403471', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '96a4125c6297dca5eb23f87f359a14fa43d031d6', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: 'ef5b98303627c4b9b856a933d4f5d29938ad60e6', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '9cf8bd9e22720d6f158f813b1481869c4289f07f', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '3dd60acafd17b9d0b5d5c1ae239c25a168446388', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '8117db13ecfab2669f5e65ab99ec2ee7070b04aa', class: "d-flex dda-gap-4" }, h("dda-button", { key: '59b41851a6e24b51addb22310cc26103857a95ec', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '947e4e3e63e64b572f83a12ddc9074fd48f7e7a2', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '28ddf63dd783693650f9e22939560f3e2fe2bb1c', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: 'e645b6fe78752460c88b86652fc4c21a11cd4b10', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: '80177be8e24b3c64ba78def6c664a0b9e2b40315', class: "materinal-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("li", { key: '7bed27d22542bd692a91831f49369c7c80b2c6c7' }, h("dda-tooltip", { key: 'bd28a2a61744e41f4d229d2005a7133fb055d2c8', title_text: "Language", position: "top" }, h("dda-button", { key: 'ba55905380aa73451aea04825cffec1b7b44a9d3', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", lang: this.language_lang, onClick: this.languagehandler }, this.language_text || 'العربية'))), h("li", { key: '8d1b8f661abfe0a6b81c65111b5e60c35247b51b' }, h("dda-tooltip", { key: 'f4d82247b40136224a38493789ad33a1cde786ef', title_text: "Login", position: "top" }, h("dda-link-button", { key: 'cadea908a166989edd355e22060e31fb02b9528d', button_color: "onsurface-secondary", start_icon: "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, "Login"))))))));
+        })), !this.hideOtherMenu && otherMenuItems.length > 0 && [
+            this.sideOtherMenuTitle && h("p", { key: '9c7b8d1dd2d206f984951cef4dad79551c026dcc', class: "dda-side-nav-title" }, this.sideOtherMenuTitle),
+            h("ul", { key: '42001d954d19a80a7ad6328aeb13bc8f5adfba8d', class: "main_side_menu" }, otherMenuItems.map((item, index) => (h("li", { key: `other-${index}` }, h("a", { href: item.href, class: item.active === 'true' ? 'active' : '', "aria-current": item.active === 'true' ? 'page' : undefined }, item.label))))),
+        ]), h("div", { key: '06f5f6931ad39ec607aa10d97c14dd12ab0d4e01', class: "dda-sidemenu-bottom" }, h("div", { key: '108a9c80301683c910cc80e81c2b533b76d821a9', class: "dda-sidemenu-gov-logo" }, h("a", { key: '4be0fdf0cd40f5e8cff36bbad4acf63d97935bd8', href: this.firstLogoHref, class: "govt-logo mb-2" }, h("img", { key: 'b8b00bf0d624299da3ff2f2b824b951620c40be9', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'b0719b41aad4f75366d54e25a967bc8d67952918', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '52ee920078fbb73ce827fc65e372d2899568a943' }, h("li", { key: '768b6f0f85f1304136dd23d0a3d5a9c213600810' }, this.renderAccessibilityButton('mobile')), this.languageLabel && (h("li", { key: 'ae2ee87232999ae08a38378c475c38f742b5bf0c' }, h("button", { key: '7c08d026b461becf44c5222a040c2544bb8c6b7c', name: this.language_button_name, class: "tool-btn", type: "button", lang: this.language_lang, onClick: this.languagehandler }, this.languageLabel))), this.showLogin && (h("li", { key: '5f4f33fca15860af56e9d9d45149f1c391cd31df' }, h("dda-link-button", { key: '4af11a09e4d414677b65707f228d3a8bdf85bc04', button_color: "onsurface-secondary", start_icon: this.loginIcon || 'sentiment_satisfied', custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, this.loginLabel)))))), h("button", { key: 'a2ff2fbce6f369d570ad25efebf6f8f0de85cc04', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '0334c91beef504626934e695b555d67a9bedbdf6', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.usePredesignedAccessibilityMenu && (h("div", { key: '6668fd9fa40b85d119100f59bf5055ae7767db23', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, this.renderAccessibilityColumns('mobile'), h("button", { key: 'bdba830a83267399804cf30efb4b454b6dd0bbe0', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: '0b9a6819c1bff1b52662386aca02110c6ab8c131', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("div", { key: 'bd9ec32ec674f8738a78ff8f53108fdf682a20e0' }, h("ul", { key: '38ba8c0d6525077ebfe88c69b1ecfd0fb43e2608', class: "dda-mega-menu" }, quickLinks.map((link, index) => {
+            const hasSub = link.kind !== 'link';
+            const isOpen = this.activeMenuIndex === index;
+            return (h("li", { key: index }, h("a", { href: hasSub ? '#' : link.href, onClick: hasSub ? (e) => this.toggleSubMenu(index, e) : undefined, class: { showSub: hasSub, icon_arrow: hasSub && isOpen, active: link.active }, "aria-expanded": hasSub ? String(isOpen) : undefined, "aria-controls": hasSub ? this.menuPanelId(index) : undefined, "aria-current": link.active && !hasSub ? 'page' : undefined }, link.label), link.kind === 'dropdown' && this.renderDropdown(link, index), link.kind === 'mega' && this.renderMega(link, index)));
+        })))), h("div", { key: '005102cc2dffc29276815160605772370a3bc0cc', class: "dda-mobile-entt-logo" }, h("a", { key: 'df6a1b8c76455d114c08500ae6502be62f06858c', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '9a04ddd255475900f45086120543260bfee0de29', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'f7b56f89406f1df4d1d64a5bb5b9d7b188b7d423', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: 'e8b285e912a1cb2acc55c11615f07ce6d7e6d337', class: "dda-mobile-search" }, this.mobileMenuSearchUrl ? (h("a", { id: this.mobileMenuSearchId, href: this.mobileMenuSearchUrl, class: "tool-btn" }, h("span", { class: "visually-hidden" }, this.searchText || 'Search'), h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"))) : (h("button", { id: this.mobileMenuSearchId, name: this.search_button_name, class: "tool-btn", type: "button", "aria-expanded": this.isSearchOpen ? 'true' : 'false', "aria-controls": `${this.searchId}-mobile-panel`, onClick: this.isSearchOpen ? this.closeMobileSearch : this.openMobileSearch, ref: el => (this.mobileSearchButton = el) }, h("span", { class: "visually-hidden" }, this.searchText || 'Search'), h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), !this.mobileMenuSearchUrl && (h("div", { key: 'edc649b51bdce87a49162dd8e2d29fa1e5525d50', id: `${this.searchId}-mobile-panel`, class: "dda-mobile-search-panel", hidden: !this.isSearchOpen }, h("form", { key: 'e6185f22e6d16c3ecdf3837917f6f5ac12483fa4', class: "dda-mobile-search-form", role: "search", method: "get", action: this.search_action, onSubmit: this.handleSearchSubmit }, this.renderSearchInput(`${this.searchId}-mobile`, el => (this.mobileSearchInput = el)), h("button", { key: '82ea4559f09115e8790b654d7c270734a436b0be', type: "button", class: "dda-mobile-search-close", "aria-label": "Close search", onClick: this.closeMobileSearch }, h("i", { key: 'fc2e02ff9a6d86f99ae0734d5dc77d9d3988af05', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("div", { key: 'caba18a60ff73e65bc70ff1ff082c47782e96ecb', class: "dda-toolbar-menu" }, h("ul", { key: 'c976f0088fdf1d9b50da2966aa45d8e66aff7e99' }, h("li", { key: '4ffb8b7e65c3516dc2619ed90387708701d65a61' }, h("dda-tooltip", { key: 'fee68662ada0b681d894fa47f4377a23a63c02d2', title_text: this.tooltip(this.search_tooltip, 'Search'), description: "", position: "top" }, h("form", { key: '981fff0a7cbab22cf454855d46d9fe254488607c', class: "dda-search dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle tool-btn", role: "search", method: "get", action: this.search_action, onSubmit: this.handleSearchSubmit }, this.renderSearchInput(this.searchId)))), h("li", { key: 'fa034c28c12012c9e080ffa02ba744c1359e3b71' }, h("dda-tooltip", { key: '39f7eeaae844e1aaad97894d3ac01dfe68ae5a6d', title_text: this.tooltip(this.accessibility_tooltip, 'Accessibility'), position: "top" }, this.renderAccessibilityButton('desktop')), this.usePredesignedAccessibilityMenu && (h("div", { key: '9bd00b640ddb4dd44497d1d665dfcfdc1bd8befc', class: "dda-accessibility-wrap" }, h("div", { key: '9743bd582c5705e1ce9602484f24c7fdd1718ac2', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, this.renderAccessibilityColumns('desktop'), h("button", { key: '7b2913e38ed3a3c59023de78254ab8de62abc661', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: 'b3aa1577875a36b310c9c52ee909c98940e8a81b', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))))), this.languageLabel && (h("li", { key: '4d500ce6dfa7253a7ec7d8365f7944b0b09d793b' }, h("dda-tooltip", { key: 'd3308456b90d849acfef563a5fde1673606d50ca', title_text: this.tooltip(this.language_tooltip, 'Language'), position: "top" }, h("dda-button", { key: '40075897d322fd313a5871ec1b91f6efbac1d14b', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", lang: this.language_lang, onClick: this.languagehandler }, this.languageLabel)))), this.showLogin && (h("li", { key: 'ceecde91b63d8bca127ac06e98bcef1abaeb2fc6' }, h("dda-tooltip", { key: '0e0af0d68680dbd27af3d7a9fee22f05487729d1', title_text: this.tooltip(this.login_tooltip, this.loginLabel), position: "top" }, h("dda-link-button", { key: '4acf05721471dd3434c0875986639f2d673fdf98', button_color: "onsurface-secondary", start_icon: this.loginIcon || 'sentiment_satisfied', custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, this.loginLabel)))))))));
     }
     static get is() { return "dda-header"; }
     static get originalStyleUrls() {
@@ -460,7 +577,108 @@ export class DdaHeader {
                 "reflect": false,
                 "attribute": "side-menu-items"
             },
-            "quickLinks": {
+            "sideMainMenuTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title above the side-menu links. Default: `Quick Links`. An empty value removes it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side-main-menu-title"
+            },
+            "sideOtherMenuTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title above the \"other\" side-menu links. It shows only when there are other links."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side-other-menu-title"
+            },
+            "otherMenuItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Array<{ label: string; href: string; active?: string }>",
+                    "resolved": "string | { label: string; href: string; active?: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Second list in the side menu. JSON array (or array property) of `{ label, href, active }`; `active: \"true\"` marks the current page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "other-menu-items"
+            },
+            "hideOtherMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the \"other\" side-menu links and their title. Default: `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-other-menu",
+                "defaultValue": "false"
+            },
+            "mobileMenuSearchId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the mobile search control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-menu-search-id"
+            },
+            "mobileMenuSearchUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -472,7 +690,32 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Main navigation links. JSON array of `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu."
+                    "text": "3.x mobile search: when set, the mobile search is a plain link to this URL (with `mobileMenuSearchId` as its id) and the header's own search panel is not rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-menu-search-url"
+            },
+            "quickLinks": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | QuickLinkItem[]",
+                    "resolved": "QuickLinkItem[] | string",
+                    "references": {
+                        "QuickLinkItem": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-header/dda-header.tsx",
+                            "id": "src/components/dda-header/dda-header.tsx::QuickLinkItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main navigation links: a JSON array (HTML attribute) or an array (JavaScript property). 5.x items are `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu. 3.x items (`{ type, headerMenuLabel, url, children, ... }`) also work."
                 },
                 "getter": false,
                 "setter": false,
@@ -498,7 +741,7 @@ export class DdaHeader {
                 "reflect": false,
                 "attribute": "read-speaker-link"
             },
-            "searchText": {
+            "read_speaker_link": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -510,14 +753,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Placeholder and accessible label of the search input. Default: `Search`."
+                    "text": "3.x name of `readSpeakerLink`, as an attribute: `read_speaker_link`. `readSpeakerLink` wins when both are set."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "search-text"
+                "attribute": "read_speaker_link"
             },
-            "loginIcon": {
+            "contrast_title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -529,14 +772,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Material Symbols icon name of the Login link in the side menu. Default: `sentiment_satisfied`."
+                    "text": "Heading of the contrast column in the accessibility panel. Default: `Contrast`. An empty value removes the heading."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "login-icon"
+                "attribute": "contrast_title"
             },
-            "loginText": {
+            "contrast_description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -548,14 +791,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label of the Login link in the side menu. Default: `Login`."
+                    "text": "Text above the contrast options. Default: `Select your preferred contrast setting`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "login-text"
+                "attribute": "contrast_description"
             },
-            "language_text": {
+            "contrast_normal_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -567,14 +810,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label of the language buttons in the desktop toolbar and the side menu. Default: `\u0627\u0644\u0639\u0631\u0628\u064A\u0629`."
+                    "text": "Label of the normal contrast option. Default: `Normal`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language_text"
+                "attribute": "contrast_normal_text"
             },
-            "language_lang": {
+            "contrast_noraml_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -586,15 +829,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`lang` attribute of the language buttons, the language of `language_text`. Default: `ar`."
+                    "text": "3.x spelling of `contrast_normal_text`. `contrast_normal_text` wins when both are set."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language_lang",
-                "defaultValue": "'ar'"
+                "attribute": "contrast_noraml_text"
             },
-            "hamburger_menu_button_name": {
+            "contrast_color_blind_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -606,14 +848,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the hamburger menu button."
+                    "text": "Label of the colour-blind contrast option. Default: `Colours Blind`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hamburger_menu_button_name"
+                "attribute": "contrast_color_blind_text"
             },
-            "menu_button_label": {
+            "contrast_red_weakness_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -625,15 +867,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible name of the hamburger menu button (visually hidden text). Default: `Menu`."
+                    "text": "Label of the red-weakness contrast option. Default: `Red Weakness`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "menu_button_label",
-                "defaultValue": "'Menu'"
+                "attribute": "contrast_red_weakness_text"
             },
-            "accessibility_button_name": {
+            "contrast_green_weakness_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -645,14 +886,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the accessibility button in the side menu."
+                    "text": "Label of the green-weakness contrast option. Default: `Green Weakness`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "accessibility_button_name"
+                "attribute": "contrast_green_weakness_text"
             },
-            "search_button_name": {
+            "screen_reader_title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -664,14 +905,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the mobile search button."
+                    "text": "Heading of the screen reader column. Default: `Screen Reader`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "search_button_name"
+                "attribute": "screen_reader_title"
             },
-            "search_input_name": {
+            "screen_reader_description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -683,14 +924,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` of the search input, which is the query parameter sent to `search_action`. Default: `q`."
+                    "text": "Text in the screen reader column. Default: `Listen to the content of the page by clicking play or listen`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "search_input_name"
+                "attribute": "screen_reader_description"
             },
-            "search_action": {
+            "screen_reader_link_label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -702,14 +943,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Results page URL. When set, a search does a GET to this URL with the query in `search_input_name` (default `q`)."
+                    "text": "Accessible name of the ReadSpeaker play link. Default: `Listen to this page using ReadSpeaker`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "search_action"
+                "attribute": "screen_reader_link_label"
             },
-            "language_button_name": {
+            "text_size_title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -721,14 +962,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the language button in the side menu."
+                    "text": "Heading of the text size column. Default: `Text Size`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language_button_name"
+                "attribute": "text_size_title"
             },
-            "close_menu_button_name": {
+            "text_size_description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -740,14 +981,53 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the button that closes the side menu."
+                    "text": "Text in the text size column. Default: `Use the buttons below to increase or decrease the text size`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close_menu_button_name"
+                "attribute": "text_size_description"
             },
-            "close_accessibility_button_name": {
+            "selected_contrast": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'normal' | 'colorblind' | 'redweakness' | 'greenweakness'",
+                    "resolved": "\"colorblind\" | \"greenweakness\" | \"normal\" | \"redweakness\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The contrast option shown as selected. The header updates it when the user picks an option. Default: `normal`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected_contrast",
+                "defaultValue": "'normal'"
+            },
+            "selected_text_size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'small' | 'normal' | 'large'",
+                    "resolved": "\"large\" | \"normal\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text size button shown as selected (`default-primary`). The header updates it on each click. Default: none."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected_text_size"
+            },
+            "searchText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -759,14 +1039,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the buttons that close the accessibility panel."
+                    "text": "Placeholder and accessible label of the search input. Default: `Search`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close_accessibility_button_name"
+                "attribute": "search-text"
             },
-            "close_sidebar_button_name": {
+            "loginIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -778,14 +1058,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Not used: the current markup does not render an element with this name."
+                    "text": "Material Symbols icon name of the Login link in the desktop toolbar and the side menu. Default: `sentiment_satisfied`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close_sidebar_button_name"
+                "attribute": "login-icon"
             },
-            "toggle_accessibility_button_name": {
+            "loginText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -797,28 +1077,520 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the accessibility button in the desktop toolbar."
+                    "text": "Label of the Login link in the desktop toolbar and the side menu. Default: `Login`. An empty value removes the Login link."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "toggle_accessibility_button_name"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isMenuOpen": {},
-            "isSubMenuOpen": {},
-            "isSideSubMenuOpen": {},
-            "isAccessibiltyOpen": {},
-            "isSearchOpen": {},
-            "openMenus": {},
-            "activeMenuIndex": {}
-        };
-    }
-    static get events() {
-        return [{
+                "attribute": "login-text"
+            },
+            "hide_login": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the Login link in the desktop toolbar and the side menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide_login",
+                "defaultValue": "false"
+            },
+            "language_text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the language buttons in the desktop toolbar and the side menu. Default: `\u0627\u0644\u0639\u0631\u0628\u064A\u0629`. An empty value removes the language buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language_text"
+            },
+            "language_lang": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`lang` attribute of the language buttons, the language of `language_text`. Default: `ar`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language_lang",
+                "defaultValue": "'ar'"
+            },
+            "accessibility_tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip of the desktop accessibility button. Default: `Accessibility`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility_tooltip"
+            },
+            "accessibility_button_text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name (visually hidden text) of both accessibility buttons. Default: `Accessibility`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility_button_text"
+            },
+            "accessibility_button_id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the desktop accessibility button. The side-menu button gets this id plus `-sidemenu`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility_button_id"
+            },
+            "accessibility_button_icon_family": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`class` of the accessibility button icon. Default: `material-icons  material-symbols-outlined`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility_button_icon_family"
+            },
+            "accessibility_button_icon_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Material icon name of the accessibility buttons. Default: `accessibility`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility_button_icon_name"
+            },
+            "search_tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip of the desktop search. Default: `Search`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_tooltip"
+            },
+            "search_input_placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder of the search inputs. Default: the `searchText` value, else `Search`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_input_placeholder"
+            },
+            "language_tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip of the desktop language button. Default: `Language`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language_tooltip"
+            },
+            "login_tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip of the desktop Login link. Default: the Login label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "login_tooltip"
+            },
+            "usePredesignedAccessibilityMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `false`, the header renders no accessibility panel; the buttons only emit `accessibilitymenufunctionality`, so the page can open its own panel. Default: `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-predesigned-accessibility-menu",
+                "defaultValue": "true"
+            },
+            "hamburger_menu_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` attribute of the hamburger menu button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hamburger_menu_button_name"
+            },
+            "menu_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the hamburger menu button (visually hidden text). Default: `Menu`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu_button_label",
+                "defaultValue": "'Menu'"
+            },
+            "accessibility_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` attribute of the accessibility button in the side menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility_button_name"
+            },
+            "search_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` attribute of the mobile search button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_button_name"
+            },
+            "search_input_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` of the search input, which is the query parameter sent to `search_action`. Default: `q`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_input_name"
+            },
+            "search_action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Results page URL. When set, a search does a GET to this URL with the query in `search_input_name` (default `q`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_action"
+            },
+            "language_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` attribute of the language button in the side menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language_button_name"
+            },
+            "close_menu_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` attribute of the button that closes the side menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close_menu_button_name"
+            },
+            "close_accessibility_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` attribute of the buttons that close the accessibility panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close_accessibility_button_name"
+            },
+            "close_sidebar_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Not used: the current markup does not render an element with this name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close_sidebar_button_name"
+            },
+            "toggle_accessibility_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` attribute of the accessibility button in the desktop toolbar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle_accessibility_button_name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMenuOpen": {},
+            "isSubMenuOpen": {},
+            "isSideSubMenuOpen": {},
+            "isAccessibiltyOpen": {},
+            "isSearchOpen": {},
+            "openMenus": {},
+            "activeMenuIndex": {},
+            "activeSubIndex": {},
+            "activeSubTop": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "accessibilityMenuToggle",
+                "name": "accessibilitymenufunctionality",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every click of an accessibility button (3.x name)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "searchInput",
+                "name": "searchfunctionality",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the query when a non-empty search is submitted (3.x name). Pages that open a results page from this event keep working. `searchSubmit` is the 5.x event, and it can cancel the navigation."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
                 "method": "languageSwitch",
                 "name": "languageSwitch",
                 "bubbles": true,