@dubai-design-system/components-js 5.2.0 → 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,10 +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;
@@ -23,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) {
@@ -33,6 +44,7 @@ export class DdaHeader {
                 this.isSubMenuOpen = false;
                 this.isSideSubMenuOpen = false;
                 this.activeMenuIndex = null;
+                this.activeSubIndex = null;
             }
         };
         this.handleSearchSubmit = (event) => {
@@ -43,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) {
@@ -82,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;
                 }
             }
         };
@@ -116,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) => {
@@ -222,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.
@@ -239,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: '43166a6b01154f028167b441653d529995f70ddf', class: "dda-header" }, h("div", { key: 'a297117e6057f9629884c39db1c3babdeabf542d', class: "dda-head-logo" }, h("a", { key: '0214471f1b3afbf9ddac97790d36e224430d9f29', href: this.firstLogoHref, class: "govt-logo" }, h("img", { key: '14fc6908a033e635f12f678b0cf3f0eb57656da2', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }), h("img", { key: 'f44df6db1a4c24ade54f38bda4e693007ba32643', class: "logo-white", src: this.firstLogoWhiteSrc || this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: '875d0b2b37fd65c239e8727b95b8e430d578146c', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '65e49ed851a16be54d97827f7086f04939508b68', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '2fdd1ec129ab3d3c2647ae009f3573140bf5b642', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: 'b8b18a8497c6942697876b7ca0d6d00de58bc9c5', class: "dda-menu-container" }, h("div", { key: 'b43c4406281640978e3396c91cd6de75122eeb5a', class: "dda-main-navigation" }, h("div", { key: 'b1209cd2a8d120e996d69069985ba30c800c2097', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '175e76801f7075751034c57b686957f830920858', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '789d7b7454d9efc21daf581c4c925dc5c4cf5d56', title_text: "Menu", position: "top", class: "d-block" }, h("button", { key: '0fadce5552c1b6887485f79141579f03addbeeff', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: 'da32b9b73992ddf8b628ff5a59c0983ea232e168', class: "hamburger-line" }), h("span", { key: 'dd5183d61830656cfbb62d153601c9f1b9ce3e27', class: "hamburger-menu-text" }, this.menu_button_label)))), h("div", { key: '35bb4d17184d78cc82f10575c405671d2399c083', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '8b872eedae11463b79109b86aaebe79049417a0a', class: "dda-sidemenu-content" }, h("p", { key: 'b60ca2503ec258a0a2c929e58a2b60ad6a66be28', class: "dda-side-nav-title" }, "Quick Links"), h("ul", { key: '97a5b237524a897a1dd27cc35dc82f2978b7f88c', 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) {
@@ -255,7 +363,14 @@ export class DdaHeader {
                         this.toggleSidebarSubMenu(currentIndex);
                     }
                 } }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        }))), h("div", { key: '2068b95884e81e7d45fa6d172bceaf8e9fcf3a5f', class: "dda-sidemenu-bottom" }, h("div", { key: 'f8fad40c7a6bcd89445caff8312b1d75446a2c39', class: "dda-sidemenu-gov-logo" }, h("a", { key: 'fd3cf7324d60503323536756c46a3e2269dd76be', href: this.firstLogoHref, class: "govt-logo mb-2" }, h("img", { key: '0c072aea99471241c4beed44aa45a783487109d1', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'd5229b78918d3f5141bdd6508bc9290dd82cff2e', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'c3a5fea233575cc41086f006d83c121637249ffa' }, h("li", { key: '05b8380b1bc2904dde6325c75e505c791d80d3b9' }, h("button", { key: '77bf98403406f1805e7c124868697ce93fa909c1', name: this.accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: 'ba8ac2e906459c4f1146b8914fee17bd1e61bd31', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: '40fdbbf2e61ab20d38b7393367b0307dbc79f653', class: "visually-hidden" }, "Accessibility"))), h("li", { key: 'e0967bfcee2d3cfced038afcd8d71f9b68b1c6c2' }, h("button", { key: '15b7f3fd0f8a88bf1e5b55c9193af6ce2f562766', name: this.language_button_name, class: "tool-btn", type: "button", lang: this.language_lang, onClick: this.languagehandler }, this.language_text || 'العربية')), !this.hide_login && (h("li", { key: '344c7ea8f9f39fc6b9186fae9f9d0e2a29812bd0' }, h("dda-link-button", { key: 'ddd23793936494095f92199ca8aa3b6542e057ee', 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: 'c98eded45379cc3a5329754dbc20ee60b6b25613', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '4e9757b2a1de7194d952caffefdf312a05b71f32', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), h("div", { key: 'b0469e9a46224bfcd216cff235fead2897f50d2b', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '93defee85dde89cfa6e67e6b3ca370353c5e6222', class: "dda-row" }, h("div", { key: 'c481f64ad8865cfca1f5b0bc0354172aeedaabcd', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '73937142ec896b3f45dad228c2877835162b79ac', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '16ff3eb668308d3de610b7d31fe09703f80fdf92' }, h("fieldset", { key: 'e60d6ee03d81c4227083d0af770a169612f287d3', class: "dda-theme-list" }, h("legend", { key: '5e3bc4f036fd51720049c5f0443ae63717b6f8dc' }, h("p", { key: '374381cf5812b6f71abba5ff320b061b80a3f62d', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: 'f51398e186eec4a8e432d54fa04b56768614889e', 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: '0903e68c4d56436e1375d11eace6012b0abdc056', 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: '654338fbc2ea136382ba8317a25860e1c6ef035c', 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: '7fcb7c39b886f225ded3dfb785ef64a8a96cd3cd', 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: '670590bb033f934dd1c2a0ff2389852bdf6f6361', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'bae3c03019f94931a0b2916e2b0a27c4451fd73c', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '5b76889779669cabb33daee5dc521365c69ad96f', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '47c3a9f7d45b9a126906eb096eac60bede592c4a', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: 'b2ebbc608601aa1fe5820b3fe87f9666ff0fb93d', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: 'c3b834ef498cde814d013761d3a37aecb5b4098b', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: 'f24c9312dddde483e7ca60ed25c9627b179e6982', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '22f54cd6e591377091ec8af31428ae53a5e0d4c8', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: 'ae950393bfe69fdbff4b858cf293e1add02e5e66', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '09bf848262d342e678c6801eec642260226b60ad', class: "d-flex dda-gap-4" }, h("dda-button", { key: 'd5c3e531d557d74bb976b8fa35a1b228798b9b6f', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '7ed5564d6d99ace659b878510b412e0028a21b97', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: 'fbcd2b704dbddbd85c022210cd85824b67fe1bc1', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '0354ef95cce6976ea90307fa3e23a959b91136bf', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: 'f4f26c5ff5dafb974c1f0325ae04f235f9eb9bc2', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: '3555e5a4a533f570fc36408d45bba80c23645886' }, h("ul", { key: 'ebadb135c7a33a8969fce9c1459f0ae7d9014f43', 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: '854e24db6dbec2bac0853d6071d46b7e5c221b35', class: "dda-mobile-entt-logo" }, h("a", { key: 'cd70858d48dc1d480e50bfa33b5f306cbdad6f4c', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: 'f43c2a7dbf7b67ba9b498eeece2ebe9467883fb6', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '0e89c9bec4ff2f1d9ef2d1eda15ebe3b7c676446', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: 'a5474b5c7addd4133551987abe5df14306e343c2', class: "dda-mobile-search" }, h("button", { key: 'a36f8468c93b5c8510311683bf7215c7d9bebb23', 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: '402360581f2bae5f39d1ae869692933e702ffd3a', class: "visually-hidden" }, "Search"), h("i", { key: '7c14bb124fed07e91007fe3e6d4218490cc650e4', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"))), h("div", { key: 'b7ed041b502925f0637e1e0ed541c0b730430a22', id: `${this.searchId}-mobile-panel`, class: "dda-mobile-search-panel", hidden: !this.isSearchOpen }, h("form", { key: '62d1886a6b174d0d20a2d4e49242cff4e3b858e2', 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: '70ccebc977fbeba61428f2c5198f113bc2957df5', type: "button", class: "dda-mobile-search-close", "aria-label": "Close search", onClick: this.closeMobileSearch }, h("i", { key: '057723af96658930cc885323288117d8c0c54fe2', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: '2ab48d0aac2875a2ed5930a10fdd79ec0943b216', class: "dda-toolbar-menu" }, h("ul", { key: 'c3d6e3416dde1ea5a6cf62d01de97b7c0323c957' }, h("li", { key: 'efdcdf6436d2a6646f3eeaacd34f1078196b10a1' }, h("dda-tooltip", { key: '8ccd71882a96427444ed789ad9eca0e489b99892', title_text: "Search", description: "", position: "top" }, h("form", { key: '25dbdf52a3cbfad3fca2f81c07f6ba02042bd4e4', 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: '1a5b626026b141cd806fdfa8d88c16f6d08491b0' }, h("dda-tooltip", { key: '614f5af0b5193f9b170530249328b5414a4e25bb', title_text: "Accessibility", position: "top" }, h("button", { key: '73c599b295f27b8171f5b7765dd60b321e874d1c', 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: 'a0d66112601707ac140afe1ac81f985b78c76365', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: 'f25a594c8ee3f0e292aa2647a892b2f5f6b87af7', class: "visually-hidden" }, "Accessibility"))), h("div", { key: '5750bf8f5a0a14bad32bb2bf1da8f0b89a97d333', class: "dda-accessibility-wrap" }, h("div", { key: '737965b7dd14b33a84c1c8dd0fd2cad3a7141b2b', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '1aaffffa4c83f9ee065bc8398c0aeba88afb76af', class: "dda-row" }, h("div", { key: 'e8337c48645661d2d381b367a8a4fe3c9564dad6', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '0a0ef35d619401eb9e7a9094dbd6481066862bcd', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '693850d5a96f978d7ae350c2fa7c71d1b23fe114' }, h("fieldset", { key: '15ec283264f3505b50251a148f256810f398f3ff', class: "dda-theme-list" }, h("legend", { key: '3b35f9bef60a82c89b75df5c0f02828671625d34' }, h("p", { key: '75898cdac310529ad1e3c838995385c53b7d62ab', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '2d720c4f9c5bd3e4c784040eb35bd5ce54a08d1c', 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: '1ba2595eacc84a62581722388a2995acd69181b5', 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: '529da9f6cea575e7d7f2aaee681b025de4216200', 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: 'a7893807dbea15a170bdc28be26f279ffa9b0735', 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: '771a1c410dd2d23369dd9288d92cdca8fe668d7d', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'eb442afea6c3c89a0889199ed2456610a4317be6', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: 'b44535f044e585f9fc866a0f9bfb8ff18891ad25', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '597d520cb2cae3c04579cbc5c3dd4c64bde439d0', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: 'a477ebdd7ea39a8375797aaedb8fa3fbb63b5bb2', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '6e0a70c58ab21cfe2e51dd5cde2b3d1e0d5567fe', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: '569ee1ca086374701b87b831a282237aaee89696', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '8011557e79f3b2a2cc9ae9204558d4f342857b72', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '412bc7065a2d767b05e045fc008fbbb7c2415193', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '863736e26da3cfd0250953f3477d9dcc630bba09', class: "d-flex dda-gap-4" }, h("dda-button", { key: '3bed6701006f848c1a398cfebc09887b5708b9b9', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '6b0c58960dfc0ef027cde9f23aa2e4604e5ae82b', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '36859719ec855a9c820ee785f835babe53d66a13', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '5eeb28eeff4092f5276c7ad5799b97016921298d', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: 'f304a9d206b14774ed885524ad870e410cd838a9', class: "materinal-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("li", { key: '4afaf5c712bf481eb733c43cedaefc85ae3d5868' }, h("dda-tooltip", { key: '09c796a5ca271097549e63c124ebaa3a3c0a65f6', title_text: "Language", position: "top" }, h("dda-button", { key: '36a733b9fce2fe1e9690bcb46280c29aba29030b', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", lang: this.language_lang, onClick: this.languagehandler }, this.language_text || 'العربية'))), !this.hide_login && (h("li", { key: 'ea2b5b451cc255cfe85b594f689d7fdd858c04c4' }, h("dda-tooltip", { key: '7ec58a5f79d2c7001b05aa682c63256eb4e7686f', title_text: this.loginText || "Login", position: "top" }, h("dda-link-button", { key: 'eac673f812227a6878fd1efba63ec1cd4adfacd5', 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")))))))));
+        })), !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() {
@@ -462,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": {
@@ -474,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,
@@ -500,7 +741,7 @@ export class DdaHeader {
                 "reflect": false,
                 "attribute": "read-speaker-link"
             },
-            "searchText": {
+            "read_speaker_link": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -512,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": {
@@ -531,14 +772,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Material Symbols icon name of the Login link in the desktop toolbar and 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": {
@@ -550,34 +791,33 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label of the Login link in the desktop toolbar and 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"
             },
-            "hide_login": {
-                "type": "boolean",
+            "contrast_normal_text": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Hides the Login link in the desktop toolbar and the side menu."
+                    "text": "Label of the normal contrast option. Default: `Normal`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hide_login",
-                "defaultValue": "false"
+                "attribute": "contrast_normal_text"
             },
-            "language_text": {
+            "contrast_noraml_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -589,14 +829,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": "3.x spelling of `contrast_normal_text`. `contrast_normal_text` wins when both are set."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language_text"
+                "attribute": "contrast_noraml_text"
             },
-            "language_lang": {
+            "contrast_color_blind_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -608,15 +848,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`lang` attribute of the language buttons, the language of `language_text`. Default: `ar`."
+                    "text": "Label of the colour-blind contrast option. Default: `Colours Blind`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language_lang",
-                "defaultValue": "'ar'"
+                "attribute": "contrast_color_blind_text"
             },
-            "hamburger_menu_button_name": {
+            "contrast_red_weakness_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -628,14 +867,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the hamburger menu button."
+                    "text": "Label of the red-weakness contrast option. Default: `Red Weakness`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hamburger_menu_button_name"
+                "attribute": "contrast_red_weakness_text"
             },
-            "menu_button_label": {
+            "contrast_green_weakness_text": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -647,15 +886,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 green-weakness contrast option. Default: `Green Weakness`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "menu_button_label",
-                "defaultValue": "'Menu'"
+                "attribute": "contrast_green_weakness_text"
             },
-            "accessibility_button_name": {
+            "screen_reader_title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -667,14 +905,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the accessibility button in the side menu."
+                    "text": "Heading of the screen reader column. Default: `Screen Reader`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "accessibility_button_name"
+                "attribute": "screen_reader_title"
             },
-            "search_button_name": {
+            "screen_reader_description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -686,14 +924,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the mobile search button."
+                    "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_button_name"
+                "attribute": "screen_reader_description"
             },
-            "search_input_name": {
+            "screen_reader_link_label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -705,14 +943,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": "Accessible name of the ReadSpeaker play link. Default: `Listen to this page using ReadSpeaker`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "search_input_name"
+                "attribute": "screen_reader_link_label"
             },
-            "search_action": {
+            "text_size_title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -724,14 +962,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": "Heading of the text size column. Default: `Text Size`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "search_action"
+                "attribute": "text_size_title"
             },
-            "language_button_name": {
+            "text_size_description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -743,14 +981,53 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the language button in 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": "language_button_name"
+                "attribute": "text_size_description"
             },
-            "close_menu_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": {
@@ -762,14 +1039,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the button that closes the side menu."
+                    "text": "Placeholder and accessible label of the search input. Default: `Search`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close_menu_button_name"
+                "attribute": "search-text"
             },
-            "close_accessibility_button_name": {
+            "loginIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -781,14 +1058,14 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the buttons that close the accessibility panel."
+                    "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_accessibility_button_name"
+                "attribute": "login-icon"
             },
-            "close_sidebar_button_name": {
+            "loginText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -800,14 +1077,34 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Not used: the current markup does not render an element with this name."
+                    "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": "close_sidebar_button_name"
+                "attribute": "login-text"
             },
-            "toggle_accessibility_button_name": {
+            "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": {
@@ -819,28 +1116,481 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`name` attribute of the accessibility button in the desktop toolbar."
+                    "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": "toggle_accessibility_button_name"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isMenuOpen": {},
-            "isSubMenuOpen": {},
-            "isSideSubMenuOpen": {},
-            "isAccessibiltyOpen": {},
-            "isSearchOpen": {},
-            "openMenus": {},
-            "activeMenuIndex": {}
-        };
-    }
-    static get events() {
-        return [{
+                "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,