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

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

@@ -89,6 +89,7 @@ export class DdaHeader {
             }
         };
         this.handleScroll = () => {
+            this.updateScrolled();
             const scrollTop = window.scrollY;
             const menuContainer = document.querySelector('.dda-menu-container');
             const logoContainer = document.querySelector('.dda-header');
@@ -185,6 +186,7 @@ export class DdaHeader {
         this.openMenus = newOpenMenus;
     }
     componentDidLoad() {
+        this.updateScrolled();
         window.addEventListener('scroll', this.handleScroll);
         document.addEventListener('click', this.handleOutsideClick);
         document.addEventListener('keydown', this.toggleEscapeKey);
@@ -221,6 +223,11 @@ export class DdaHeader {
             h("input", { name: this.search_input_name || 'q', type: "text", id: id, placeholder: this.searchText || 'Search', enterkeyhint: "search", autocomplete: "off", ref: ref }),
         ];
     }
+    // The transparent style (<body class="transparent">) shows only at the top of the page.
+    // Below the top, `dda-scrolled` turns it off in CSS and the header uses the standard style.
+    updateScrolled() {
+        this.el.classList.toggle('dda-scrolled', window.scrollY > 0);
+    }
     parseJsonArray(jsonString) {
         try {
             return JSON.parse(jsonString);
@@ -238,7 +245,7 @@ export class DdaHeader {
         };
         // 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: '5617e75cb1b7a6916489add8d13013e7a78d8003', class: "dda-header" }, h("div", { key: '6c754408f196dff3bf03ad29f73df82720a34f6b', class: "dda-head-logo" }, h("a", { key: '1ede6b0599b4e18480db07cb2bd177444a1c5eae', href: this.firstLogoHref, class: "govt-logo" }, h("img", { key: 'c3c9886bedb03b07d01af67dde4a38d9e854c633', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }), h("img", { key: 'e4782885df69730b6417bdf2314c88961267aea6', class: "logo-white", src: this.firstLogoWhiteSrc || this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: 'b5d4b7f9aaa29c967ca155b1e2ea627ade4abe6e', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: 'e872873935c144d7f015231c7edf13d4067c72b5', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '92bf0d43b46ca6a982870cd68e22f81b49a73f38', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: '2cb68cecee71b84aacdbe9d67551b6f1b68890e6', class: "dda-menu-container" }, h("div", { key: 'b242deccd799326ebce68a1f6e542ac52c0fe4b1', class: "dda-main-navigation" }, h("div", { key: 'decd94df7f45dea67ddf405f181610d1d2e5d6db', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '8943c8638809b290e899f2249bdda554ccda5155', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '883aedd8114871b1edd63db702553a79d57c5b1f', title_text: "Menu", position: "top", class: "d-block" }, h("button", { key: 'd3af0e0157f5438cd16a4f1b0408c7dacdb3e249', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '7c498376a214b30c49248e3f773aa1b1099b5e10', class: "hamburger-line" }), h("span", { key: '61e67708e555988524be0d53d9c3b0332a13d22f', class: "hamburger-menu-text" }, this.menu_button_label)))), h("div", { key: '79f69bcacfd69b1eba9398a7872b0220054484bc', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '2a2805146eab6d4cf7d7b1daa3ca419a90b74c45', class: "dda-sidemenu-content" }, h("p", { key: '9d7c6613497a7fd8d1ba5d0a3bf29353e95555d6', class: "dda-side-nav-title" }, "Quick Links"), h("ul", { key: 'bb7cf7d44fa6e394fc3dcdc4102aa9dd7f57afed', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
+        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) => {
             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) {
@@ -246,7 +253,7 @@ export class DdaHeader {
                         this.toggleSidebarSubMenu(currentIndex);
                     }
                 } }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        }))), h("div", { key: '8918ba48501fea98f9f5e23af9f713fc18f5b2fa', class: "dda-sidemenu-bottom" }, h("div", { key: 'bf7c8da56914f16adaecfae48a917024262210fc', class: "dda-sidemenu-gov-logo" }, h("a", { key: '05e08f19dbf828be8d5fdaf729b84d8589acd6db', href: this.firstLogoHref, class: "govt-logo mb-2" }, h("img", { key: '1591daf173408ad72f6a507979c193aaaaad21fc', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'a0bb20f356d5decd533dd9f3b0706c51c241538d', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'e6d2fb2115a0e8963916b099d60c06926cf26ad5' }, h("li", { key: 'f7fe790e3220687654de22cc711fb240f87017e8' }, h("button", { key: 'b52e9db9bd0b34801a3717076c8d7ef177b33986', name: this.accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: '897d71b977998376caf248f87f4dc249703aff91', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: 'd309456157ac6c8d87e860a653ddfac117ee4516', class: "visually-hidden" }, "Accessibility"))), h("li", { key: '9c7ef14184ae74fa09b0a693f90dd6705ebb8732' }, h("button", { key: '84a78e8b4c0be986dd354c38e02e32a120011806', name: this.language_button_name, class: "tool-btn", type: "button", lang: this.language_lang, onClick: this.languagehandler }, this.language_text || 'العربية')), h("li", { key: 'fa0ac482c0b7e3edd7f30241b3648a4f98847a3d' }, h("dda-link-button", { key: '1d88d266fd04291570e9a0994aabb8773fce08a1', 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: 'd3f3f54406605a0679d08402349aae5e5404ea92', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '451bb4d3ea3ff94789a5674e3d9e28d74c504f28', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), h("div", { key: 'ba9e85dcff48925774524946cbae874ebf5737c5', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '9e0cd822507f0ac783fb7e20e56659aadfb26c52', class: "dda-row" }, h("div", { key: '89090d09f1a6d453a020e87953e5e4fcdc1ea79d', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'f9aab7d329ee8fbc0fb6b0b16e7a739a18d65626', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '909a9703e875474a9329fa6dae67130db37bf4df' }, h("fieldset", { key: '4bf7fbd0a6426f6a87398041f82905d98072ab58', class: "dda-theme-list" }, h("legend", { key: '38070112c6469825d8cf3b10c4775a0b93f217ee' }, h("p", { key: 'd6a7a89edd69a544a26e2d50e651e6b219230d50', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: 'b19ac1061d3391ea8939211dfdc5cf50936ddd12', 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: '3179c8a860a5f7fee67a914c2f84195346ce504e', 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: '64042da98d51444cee218759d888711bca7baa3c', 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: 'c61599e3ece634ec5e7c68b231ed81b70cfbc6de', 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: 'cd24593029e6e55698cad2fe02912d067cf24221', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '04355bd5ee7ffa5fbb0e9c135f192c402158d579', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '70637dd80d0c35edde54a21127ccd90d6c807b79', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: 'b54c48192cfb5d8a5a5f727c0df34f3901f2c1b6', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '476e196b15f445aa9d4880776a7f9e21c11fdba1', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: 'd07a9c81088aeaabd72cc39ae7745e60e1649331', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: 'e6de843ff3b400036388213b217d5e0feb9e5cdb', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '5bd754cc6513104ba219c5f6d49afa112a8339c4', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '16d78ac06802779a4f94389b63fbc2d785f163b4', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: 'bf9eb9e678400e18a4a8af011ca49fe004bf5d57', class: "d-flex dda-gap-4" }, h("dda-button", { key: '170670dff71878e0415a87bb10d30feca0882320', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '491359c422a1f35860aa852d6b2184eb44ce325e', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: 'c26cd22de75e41fd77eb256d3819c2c712524333', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '815ffae8bef58e2070da4a2904676382ce73bd94', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: '5999be01eadcd79247ed45659863b90d016b0d91', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: 'e0f34268e188c541e3b787640fa48b52b97522f5' }, h("ul", { key: '72ee4d360600d817ceb45f4440c2f52f15e73ba3', 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: '35e72dd6dc7bbd27571565d7fbef85f03c8ff78c', class: "dda-mobile-entt-logo" }, h("a", { key: '7e4b9b3f9111d21c158b1a3bbe0b05f0f0f6fd70', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '1e5d1d48cd749d447d190d7faff5d6eea3848530', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'ae611112d7530157542b8b61f75735963bc915cf', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: 'd0094b35cbe783e3fb25c193416fbf1ab93d8556', class: "dda-mobile-search" }, h("button", { key: '870ffde548bc9e25fbbe49a38555f37537a7a9e0', 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: '60e517bc5a3fc426481849e016c30ee8c2ac3557', class: "visually-hidden" }, "Search"), h("i", { key: 'b7ecd241524fa2accb5a6237fd5d9d7077251794', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"))), h("div", { key: '902c3ea25f85ba68256b74d7056bad3ba4cc0387', id: `${this.searchId}-mobile-panel`, class: "dda-mobile-search-panel", hidden: !this.isSearchOpen }, h("form", { key: '148f3c496aded74efa2e64a4d54eddcd14760bf3', 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: '751a5b0c40ee046038926b194749556a769c7a36', type: "button", class: "dda-mobile-search-close", "aria-label": "Close search", onClick: this.closeMobileSearch }, h("i", { key: '0037d13333ea93db8b3be2d3a4d296129e84c39f', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: '70850e651e4de663dfa28e3b5938ff1051407219', class: "dda-toolbar-menu" }, h("ul", { key: 'b5668caf22cb9f01ac050df816c43603c30a544c' }, h("li", { key: 'f0210f077b513a749e87053138ecc63a35e87399' }, h("dda-tooltip", { key: 'b3b772f6e089c28ab37f31d85daacd06c26e92e0', title_text: "Search", description: "", position: "top" }, h("form", { key: '4c3ff26b350bbe4f0e91d6699c8417c6f21f9b2a', 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: 'f7a33d69d11ba0ba1fe8dd958e7981ec59bb7470' }, h("dda-tooltip", { key: 'bb3e72c4603885e1d870ed429c1d93d636f0aef9', title_text: "Accessibility", position: "top" }, h("button", { key: '8caf228694a60516971d87d77a483994100110ca', 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: 'bc60fb676a6d22f3be5ab28935a0c06fb408a379', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: '34589aa010f144b9da00368693777cc6fdabd2a9', class: "visually-hidden" }, "Accessibility"))), h("div", { key: '78f53b78fde1d12c59b9ba0d3357fcc03fb928a6', class: "dda-accessibility-wrap" }, h("div", { key: '588b4667aa0f6bbec2e3f3b5234313f4fe650deb', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '7a9ac838daab93bdd46019fdc0f9af53dbc37b5a', class: "dda-row" }, h("div", { key: 'e7631c2ec8d84fef789e1534e46122654bba0ff1', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '17241511306c659d5f02220f7a4851dc1d07de39', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: 'bf235a989d6d2fb4ad6e3cd53696aae01fe7160d' }, h("fieldset", { key: '87d0b964ab7362848b3d88a4c22fa98e51ba7f22', class: "dda-theme-list" }, h("legend", { key: '829f6447739ff0141e7f27e1b31ab3ba95d05d1d' }, h("p", { key: '0656f06018cd9647cd7412f97e9b7455540746da', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: 'fa7c4e55de7e627de03a040133af2a66b9016f23', 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: '1d64b10b2510379c4d3c3b592eb9941fab857a6f', 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: 'bbb494fa57baadbcba5e2e54cc5f39828960383b', 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: '508e8a52a44b4c35ba4bd14a7e5ba5db039c082a', 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: 'dca16a90b508423c45583a796d9cdb9b66a23e99', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '57fc7d68dac68f8526792b1bab4ba85f914c95aa', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '7c74e9c2ea106f0df88cd2a7a1f0ba8a1064a896', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '68dba92e3b0a42b1eaf4b2cb1e2ebea3c911840f', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '838e196441241bda861519b11a4667c8572fe7ac', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '5fb81726c2db586b924c01f7ae81b7c6448ba4b8', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: '66b59708e2560b0d9d3ba396eae9c3e723031fee', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '34d37007a38a8370435afc88775a7b12850d5721', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '53f129ab0195fa104583252b2d8cf9eb91780915', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: 'f40d4b1c573384afe021859bb5bfb63a2e2a5303', class: "d-flex dda-gap-4" }, h("dda-button", { key: '1ab2cecc2e94a665cc1941360f9482beebf811e9', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '9b7029f2c49c381d2fc3620f064076c9bd608fd2', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '5a8a41bd805857f41eed3ded0afcb99806f9c762', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '47520c3b263c79bfec9d67c11aad5e3e4e8fa065', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: '636a4616485c0d9edce9695253675546420986e9', class: "materinal-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("li", { key: '2d4754cef9515792efc86758bd8a9b9483ffefe8' }, h("dda-tooltip", { key: '5cfd884e2e77576e589864a69ae338d49b40b6cc', title_text: "Language", position: "top" }, h("dda-button", { key: 'b19beaea25bd008192fed7ded713709f9100f347', 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: '4b5f8597a4bc3e0994da33bd126db45d8017f440' }, h("dda-tooltip", { key: '22f6b1d7d3197367eb2f5c7395999438977abcba', title_text: "Login", position: "top" }, h("dda-link-button", { key: 'ff0683afe8e9999cbdf086a7464d1271a99e5ad0', button_color: "onsurface-secondary", start_icon: "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, "Login"))))))));
+        }))), 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"))))))));
     }
     static get is() { return "dda-header"; }
     static get originalStyleUrls() {
@@ -948,6 +955,7 @@ export class DdaHeader {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "isMenuOpen",

package/dist/collection/components/dda-home-banner/home-banner.css

@@ -16,7 +16,8 @@
   z-index: 1;
 }
 
-.home-slider img {
+.home-slider img,
+.home-slider video {
   width: 100%;
   height: 100%;
   object-fit: cover;

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

@@ -42,7 +42,7 @@ export class DdaInput {
             this.input_name,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: 'fb19ff41ee2bb68694a569d5f9176e91976ff1bd' }, h("div", { key: 'a0e88b035e84a2bb843c16c133b1c42d9920cbb9', class: inputClass }, this.label && h("label", { key: '13b74df04c3afefc4467e8661a7b39531405283c', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: 'e9b9b54145cd7ae6e0784f2fa314fcd214c5e5d4', "aria-label": this.aria_label, id: id, name: this.input_name, type: this.type, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.helper_text && h("span", { key: '2c3f4562423f05642eefd37e333720f15aa920e5', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'cc986bf0d4c49550937ff23d82ec8f4548d890a7', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '98dd445b764af2df20af7e95dbc49ef74013e312' }, h("div", { key: '7a83ce0abcd733095f27d5c3275d31548acff4ae', class: inputClass }, this.label && h("label", { key: 'ddea5a3451bf37ce1c753d4bddb32cef4a2baa2e', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: 'b8c1062b1609e72c4b87f43c4ead4b63ce35262a', "aria-label": this.aria_label, id: id, name: this.input_name, type: this.type, autocomplete: this.autocomplete, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.helper_text && h("span", { key: 'af728d433f267c7e8c81e8b5894df4a17154faa7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '94ad0af0de6d1d02860e6432684b79ca137b61ad', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-input"; }
     static get originalStyleUrls() {
@@ -323,6 +323,25 @@ export class DdaInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "input_name"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`autocomplete` token of the inner `<input>`, e.g. `name`, `email` or `tel`. Set it on fields that ask about the user (WCAG 1.3.5)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
             }
         };
     }

package/dist/collection/components/dda-radiobutton/dda-radiobutton.css

@@ -851,7 +851,7 @@
   .dda-head-logo .govt-logo img {
     height: 39px;
   }
-  .transparent .dda-header::before {
+  .transparent dda-header:not(.dda-scrolled) .dda-header::before {
     height: 100%;
   }
 }
@@ -2074,6 +2074,20 @@
     transition: transform 300ms ease-in-out;
 }
 
+/* WCAG 2.4.11: the fixed bar covers the bottom of the viewport. dda-sticky-footer publishes
+   its height as --dda-sticky-footer-height (and removes it when it is removed), so:
+   - scroll-padding-bottom keeps focused and scrolled-to elements above the bar, the same way
+     scroll-padding-top in dda-header.css keeps them below the fixed header;
+   - body padding-bottom lets the end of the page scroll clear of the bar.
+   Without the component the variable is not set and both are 0. */
+:root {
+    scroll-padding-bottom: var(--dda-sticky-footer-height, 0px);
+}
+
+body {
+    padding-bottom: var(--dda-sticky-footer-height, 0px);
+}
+
 /* dda-sticky-footer toggles this class off its own scroll-direction state
    (see dda-sticky-footer.tsx handleScroll) to hide the bar while scrolling
    down and bring it back while scrolling up. Same transition idiom as
@@ -2511,12 +2525,12 @@
     position: relative;
 }
 
-.transparent .dda-header {
+.transparent dda-header:not(.dda-scrolled) .dda-header {
     background: transparent;
     box-shadow: none;
 }
 
-.transparent .dda-header::before {
+.transparent dda-header:not(.dda-scrolled) .dda-header::before {
     content: "";
     width: 100%;
     height: 250px;
@@ -2547,13 +2561,13 @@
 .entt-logo img {
     height: 44px;
 }
-.transparent .logo-colored{
+.transparent dda-header:not(.dda-scrolled) .logo-colored{
     display: none;
 }
 .logo-white{
     display: none;
 }
-.transparent .logo-white{
+.transparent dda-header:not(.dda-scrolled) .logo-white{
     display: block;
 }
 .dda-header.white .dda-head-logo .logo-white,
@@ -2673,9 +2687,9 @@
     background-color: var(--dda-color-primary-40);
 }
 
-.transparent .hamburger-menu-btn::before,
-.transparent .hamburger-menu-btn::after,
-.transparent .hamburger-line {
+.transparent dda-header:not(.dda-scrolled) .hamburger-menu-btn::before,
+.transparent dda-header:not(.dda-scrolled) .hamburger-menu-btn::after,
+.transparent dda-header:not(.dda-scrolled) .hamburger-line {
     background-color: var(--dda-neutral-100) !important;
 }
 
@@ -2739,7 +2753,7 @@
     color: var(--dda-color-primary-40);
 }
 
-.transparent .dda-mega-menu>li>a {
+.transparent dda-header:not(.dda-scrolled) .dda-mega-menu>li>a {
     color: var(--dda-neutral-100);
 }
 
@@ -2756,7 +2770,7 @@
     transition: all 0.25s ease-in-out;
 }
 
-.transparent .dda-mega-menu>li>a::after {
+.transparent dda-header:not(.dda-scrolled) .dda-mega-menu>li>a::after {
     background-color: var(--dda-neutral-100);
 }
 
@@ -2870,8 +2884,8 @@
     gap: 10px;
 }
 
-.transparent .dda-toolbar-menu ul li .tool-btn,
-.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn {
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu ul li .tool-btn,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu-sidemenu ul li .tool-btn {
     background-color: var(--dda-neutral-17);
     color: var(--dda-neutral-100);
 }
@@ -2892,10 +2906,10 @@
     color: var(--dda-on-surface-variant-30);
 }
 
-.transparent .dda-toolbar-menu ul li .tool-btn i,
-.transparent .dda-toolbar-menu ul li .tool-btn svg,
-.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn i,
-.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn svg {
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu ul li .tool-btn i,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu ul li .tool-btn svg,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu-sidemenu ul li .tool-btn i,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu-sidemenu ul li .tool-btn svg {
     color: var(--dda-neutral-100);
 }
 .dda-search{
@@ -2941,10 +2955,10 @@
 .dda-search input[type="text"]::placeholder{
     color: var(--dda-on-surface-0);
 }
-.transparent .dda-search input[type="text"]::-ms-input-placeholder {
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-neutral-100);
 }
-.transparent .dda-search input[type="text"]::placeholder{
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::placeholder{
     color: var(--dda-neutral-100);
 }
 
@@ -3238,8 +3252,8 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
     fill: var(--dda-on-surface-variant-30);
 }
 
-.transparent .dda-mobile-search button i,
-.transparent .dda-mobile-search button svg {
+.transparent dda-header:not(.dda-scrolled) .dda-mobile-search button i,
+.transparent dda-header:not(.dda-scrolled) .dda-mobile-search button svg {
     color: var(--dda-neutral-100);
 }
 
@@ -3250,7 +3264,7 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
 
 
 @media screen and (max-width: 767px) {
-    .transparent .dda-header::before {
+    .transparent dda-header:not(.dda-scrolled) .dda-header::before {
         height: 130px;
     }
     .dda-header{

package/dist/collection/global/global.css

@@ -851,7 +851,7 @@
   .dda-head-logo .govt-logo img {
     height: 39px;
   }
-  .transparent .dda-header::before {
+  .transparent dda-header:not(.dda-scrolled) .dda-header::before {
     height: 100%;
   }
 }
@@ -2074,6 +2074,20 @@
     transition: transform 300ms ease-in-out;
 }
 
+/* WCAG 2.4.11: the fixed bar covers the bottom of the viewport. dda-sticky-footer publishes
+   its height as --dda-sticky-footer-height (and removes it when it is removed), so:
+   - scroll-padding-bottom keeps focused and scrolled-to elements above the bar, the same way
+     scroll-padding-top in dda-header.css keeps them below the fixed header;
+   - body padding-bottom lets the end of the page scroll clear of the bar.
+   Without the component the variable is not set and both are 0. */
+:root {
+    scroll-padding-bottom: var(--dda-sticky-footer-height, 0px);
+}
+
+body {
+    padding-bottom: var(--dda-sticky-footer-height, 0px);
+}
+
 /* dda-sticky-footer toggles this class off its own scroll-direction state
    (see dda-sticky-footer.tsx handleScroll) to hide the bar while scrolling
    down and bring it back while scrolling up. Same transition idiom as
@@ -2511,12 +2525,12 @@
     position: relative;
 }
 
-.transparent .dda-header {
+.transparent dda-header:not(.dda-scrolled) .dda-header {
     background: transparent;
     box-shadow: none;
 }
 
-.transparent .dda-header::before {
+.transparent dda-header:not(.dda-scrolled) .dda-header::before {
     content: "";
     width: 100%;
     height: 250px;
@@ -2547,13 +2561,13 @@
 .entt-logo img {
     height: 44px;
 }
-.transparent .logo-colored{
+.transparent dda-header:not(.dda-scrolled) .logo-colored{
     display: none;
 }
 .logo-white{
     display: none;
 }
-.transparent .logo-white{
+.transparent dda-header:not(.dda-scrolled) .logo-white{
     display: block;
 }
 .dda-header.white .dda-head-logo .logo-white,
@@ -2673,9 +2687,9 @@
     background-color: var(--dda-color-primary-40);
 }
 
-.transparent .hamburger-menu-btn::before,
-.transparent .hamburger-menu-btn::after,
-.transparent .hamburger-line {
+.transparent dda-header:not(.dda-scrolled) .hamburger-menu-btn::before,
+.transparent dda-header:not(.dda-scrolled) .hamburger-menu-btn::after,
+.transparent dda-header:not(.dda-scrolled) .hamburger-line {
     background-color: var(--dda-neutral-100) !important;
 }
 
@@ -2739,7 +2753,7 @@
     color: var(--dda-color-primary-40);
 }
 
-.transparent .dda-mega-menu>li>a {
+.transparent dda-header:not(.dda-scrolled) .dda-mega-menu>li>a {
     color: var(--dda-neutral-100);
 }
 
@@ -2756,7 +2770,7 @@
     transition: all 0.25s ease-in-out;
 }
 
-.transparent .dda-mega-menu>li>a::after {
+.transparent dda-header:not(.dda-scrolled) .dda-mega-menu>li>a::after {
     background-color: var(--dda-neutral-100);
 }
 
@@ -2870,8 +2884,8 @@
     gap: 10px;
 }
 
-.transparent .dda-toolbar-menu ul li .tool-btn,
-.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn {
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu ul li .tool-btn,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu-sidemenu ul li .tool-btn {
     background-color: var(--dda-neutral-17);
     color: var(--dda-neutral-100);
 }
@@ -2892,10 +2906,10 @@
     color: var(--dda-on-surface-variant-30);
 }
 
-.transparent .dda-toolbar-menu ul li .tool-btn i,
-.transparent .dda-toolbar-menu ul li .tool-btn svg,
-.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn i,
-.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn svg {
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu ul li .tool-btn i,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu ul li .tool-btn svg,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu-sidemenu ul li .tool-btn i,
+.transparent dda-header:not(.dda-scrolled) .dda-toolbar-menu-sidemenu ul li .tool-btn svg {
     color: var(--dda-neutral-100);
 }
 .dda-search{
@@ -2941,10 +2955,10 @@
 .dda-search input[type="text"]::placeholder{
     color: var(--dda-on-surface-0);
 }
-.transparent .dda-search input[type="text"]::-ms-input-placeholder {
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-neutral-100);
 }
-.transparent .dda-search input[type="text"]::placeholder{
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::placeholder{
     color: var(--dda-neutral-100);
 }
 
@@ -3238,8 +3252,8 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
     fill: var(--dda-on-surface-variant-30);
 }
 
-.transparent .dda-mobile-search button i,
-.transparent .dda-mobile-search button svg {
+.transparent dda-header:not(.dda-scrolled) .dda-mobile-search button i,
+.transparent dda-header:not(.dda-scrolled) .dda-mobile-search button svg {
     color: var(--dda-neutral-100);
 }
 
@@ -3250,7 +3264,7 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
 
 
 @media screen and (max-width: 767px) {
-    .transparent .dda-header::before {
+    .transparent dda-header:not(.dda-scrolled) .dda-header::before {
         height: 130px;
     }
     .dda-header{