@dubai-design-system/components-js 5.3.1 → 5.3.3

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

@@ -47,6 +47,28 @@ export class DdaHeader {
                 this.activeSubIndex = null;
             }
         };
+        // Places an open mega menu panel. It starts under its link (CSS). When it does not fit there, it
+        // flips so that its far edge meets the far edge of the link, and it opens back toward the start of
+        // the nav. Only when it still does not fit is it clamped, 16px inside the screen. All positions are
+        // measured from the inline start, so the same code works in RTL.
+        this.alignMegaPanel = () => {
+            const panel = this.el.querySelector('.megamenu-content.showSubMenu');
+            const link = panel === null || panel === void 0 ? void 0 : panel.parentElement;
+            if (!panel || !link)
+                return;
+            panel.style.removeProperty('--dda-mega-shift');
+            const gutter = 16;
+            const viewport = document.documentElement.clientWidth;
+            const rtl = getComputedStyle(panel).direction === 'rtl';
+            const fromStart = (rect) => (rtl ? { start: viewport - rect.right, end: viewport - rect.left } : { start: rect.left, end: rect.right });
+            const linkEdges = fromStart(link.getBoundingClientRect());
+            const width = panel.getBoundingClientRect().width;
+            const lastStart = viewport - gutter - width;
+            if (linkEdges.start <= lastStart)
+                return;
+            const start = Math.max(gutter, linkEdges.end - width);
+            panel.style.setProperty('--dda-mega-shift', `${start - linkEdges.start}px`);
+        };
         this.handleSearchSubmit = (event) => {
             const input = event.currentTarget.querySelector('input');
             const query = input.value.trim();
@@ -221,6 +243,10 @@ export class DdaHeader {
         document.addEventListener('keydown', this.toggleEscapeKey);
         document.addEventListener('click', this.handleOutsideAccessibilityClick);
         document.addEventListener('click', this.handleOutsideMegaMenuClick);
+        window.addEventListener('resize', this.alignMegaPanel);
+    }
+    componentDidRender() {
+        this.alignMegaPanel();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
@@ -228,8 +254,15 @@ export class DdaHeader {
         document.removeEventListener('keydown', this.toggleEscapeKey);
         document.removeEventListener('click', this.handleOutsideAccessibilityClick);
         document.removeEventListener('click', this.handleOutsideMegaMenuClick);
+        window.removeEventListener('resize', this.alignMegaPanel);
         this.lockPageScroll(false);
     }
+    // The language buttons carry lang={language_lang}; their writing direction must match it, or HTML
+    // checkers flag lang="ar" inside an LTR page. Right-to-left: Arabic, Hebrew, Persian, Urdu.
+    get languageDir() {
+        const primary = (this.language_lang || '').toLowerCase().split('-')[0];
+        return ['ar', 'he', 'fa', 'ur'].includes(primary) ? 'rtl' : 'ltr';
+    }
     // While the side menu is open, the page underneath must not scroll; the menu itself still does.
     onMenuOpenChange(isOpen) {
         this.lockPageScroll(isOpen);
@@ -355,7 +388,7 @@ export class DdaHeader {
         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: '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) => {
+        return (h("header", { key: '455fd1eb161dfaebc37ff61dcbde16f0ddbfecce', class: "dda-header" }, h("div", { key: '8046abf9b4f8169add202e4969caa0cedaa8a955', class: "dda-head-logo" }, this.firstLogoSrc && (h("a", { key: 'd4582fff9001ed0f9383cf4df0d9b03f60d27ac4', href: this.firstLogoHref, class: "govt-logo" }, h("img", { key: 'c39d2e0cfdb0ad914bf86920c87ad376c21d44ef', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }), h("img", { key: '542301869402f7a1ef4087f3c401684229f71d68', class: "logo-white", src: this.firstLogoWhiteSrc || this.firstLogoSrc, alt: this.firstLogoAlt }))), this.secondLogoSrc && (h("a", { key: '7d3ac8a9c35cb8feae0d993604ecf5b24140cb76', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '9188ba86a36d16eab6e0a9d3e83f47f02e17b98a', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '8492e554fd73b3c0d8be57b2d7f239b632f77ed7', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt })))), h("div", { key: '1bab21ba0c909b1165b45122854c9002a5f45a41', class: "dda-menu-container" }, h("div", { key: '596643d56048319c6b380a2a450addd2067e0812', class: "dda-main-navigation" }, h("div", { key: '1d9836ab230253272f8bce6d71207d0f033a56d6', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '3ce4463c9d157337f997afdca7746a3ac06a2bcd', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '910bec5d0b05f2b2a77dc75f0b329f7c14f9fe90', title_text: this.tooltip(this.menu_button_label, 'Menu'), position: "top", class: "d-block" }, h("button", { key: 'e69a9bdcd616344b00fcc1d98c22a24d3b892ef7', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '1a59c8a97c405ed03476b09b108441966fb1037b', class: "hamburger-line" }), h("span", { key: '7afda43cb69d94184aadc1018ca2bdf1a199b25d', class: "hamburger-menu-text" }, this.menu_button_label)))), h("div", { key: '6a4030d10694385be6a6ed7d27cfdfa2196e85c6', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '00a5547f22c2edc860969d93df850f860b5f6dc2', class: "dda-sidemenu-content" }, this.text(this.sideMainMenuTitle, 'Quick Links') && h("p", { key: 'fa231b992f86a47059e4f47ee16f2f960c9c5dbf', class: "dda-side-nav-title" }, this.text(this.sideMainMenuTitle, 'Quick Links')), h("ul", { key: 'de65a424b209046279da9de2b0b22fbd8f7e6a11', 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) {
@@ -364,13 +397,13 @@ export class DdaHeader {
                     }
                 } }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
         })), !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) => {
+            this.sideOtherMenuTitle && h("p", { key: 'c0158d54c0c91d07c10805abd2642b05544dc41b', class: "dda-side-nav-title" }, this.sideOtherMenuTitle),
+            h("ul", { key: 'a31e87d2f1c0bef6ec099ac5e8deba3c18215b65', 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: '451423e7cf019b068d8b6b6fb2377abb3b39af62', class: "dda-sidemenu-bottom" }, h("div", { key: '76aedbeadee676441cdfa8b19d4bbf449a20652e', class: "dda-sidemenu-gov-logo" }, this.firstLogoSrc && (h("a", { key: '1e4bb747481c5700972a56b0a8bd684c41641fbc', href: this.firstLogoHref, class: "govt-logo mb-2" }, h("img", { key: '21b1d0158afcf76f774dad2c182ebf62f6642d6b', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt })))), h("div", { key: 'e9680109848629266078a0f829ad70c8b529b97c', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '3553b65d4981ef2bed67a7dad70909055fda9c81' }, h("li", { key: '71a726181e6914dd7a00e3c128653e1f82adeee8' }, this.renderAccessibilityButton('mobile')), this.languageLabel && (h("li", { key: '06f03f22203c8d86fc3a1a77f39cc508b38a2e28' }, h("button", { key: 'b1d3f76ac25f963b263109eadbd825119091db60', name: this.language_button_name, class: "tool-btn", type: "button", lang: this.language_lang, dir: this.languageDir, onClick: this.languagehandler }, this.languageLabel))), this.showLogin && (h("li", { key: '31734474010185e2baef74157a18b21a5a2c0120' }, h("dda-link-button", { key: '8e2065aaeb9317f7ec674c8938096443e0ec995d', 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: '665671ddb87d77a5a4e5db34569cbe27d7e403c8', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '95737fcf899b1d398f629831c0a81ce27dc974f3', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.usePredesignedAccessibilityMenu && (h("div", { key: '859a3364a1654cfce89b7b7cad4c64a4c0ebd9b8', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, this.renderAccessibilityColumns('mobile'), h("button", { key: '84ff5a8868be7c9fd5318d41180045a292380ceb', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: '0a8c474bf4a757577fb9f94f60cd4131fcd68be4', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("div", { key: 'a7f3899adc12155fc64387702c957f41f84faa52' }, h("ul", { key: '7c81ea090d8aaf8eea841b4ff765e17c8bef7dc9', 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)))))))));
+        })))), h("div", { key: '9817dd76c9b01aacdbafae3d7810cad8758c22dd', class: "dda-mobile-entt-logo" }, this.secondLogoSrc && (h("a", { key: 'bcd6d11231fbc2ee8ff798c07c2b1246d20aab5d', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: 'be1a0b4d80898bb1f5362b14bcb52f457b031a88', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '4f14b9d5c16f06db9f8bad32cef160dc51a328aa', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt })))), h("div", { key: 'bd69cae846dc4b9acb422aa8ac6c01908906f60e', 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: 'b0f310b0ceb74283eb06f12fc362c4f615e2bacf', id: `${this.searchId}-mobile-panel`, class: "dda-mobile-search-panel", hidden: !this.isSearchOpen }, h("form", { key: '79dcb2842a2c72b73d7d8e8096149359a98339b6', 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: 'da6a807064cb1c20335bfef472b929836067fc23', type: "button", class: "dda-mobile-search-close", "aria-label": "Close search", onClick: this.closeMobileSearch }, h("i", { key: 'be173a2d8395d8ebac933cb2032494118afd023a', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("div", { key: 'ffa5a27292d7f3037a14ddb874c7cba8fd54e6db', class: "dda-toolbar-menu" }, h("ul", { key: '262b9292f62ef240d2db1ead02e41d9942bc97b3' }, h("li", { key: '57a70ccdfb0b472206b9587b982a63fa26f13d58' }, h("dda-tooltip", { key: 'c992d238995a385584b06425a495e11ac84c35c9', title_text: this.tooltip(this.search_tooltip, 'Search'), description: "", position: "top" }, h("form", { key: 'ec6ad8a0220da4a551a8f6a849cbff31d65b5f31', 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: 'bd64b500353b399d47467a70ac3a45fb1efa979e' }, h("dda-tooltip", { key: 'd5a5da99a032b064038f71acd78d2a9230980e3e', title_text: this.tooltip(this.accessibility_tooltip, 'Accessibility'), position: "top" }, this.renderAccessibilityButton('desktop')), this.usePredesignedAccessibilityMenu && (h("div", { key: 'efc21cd4d2e6ba157d94865fd17a19f3baff5392', class: "dda-accessibility-wrap" }, h("div", { key: '4e2887c081af46a1983d4e05b2f9d0c1e7a51e83', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, this.renderAccessibilityColumns('desktop'), h("button", { key: 'b24ad2e30dbb395945f68899ad3847549a3c661e', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: '90e671ba67beaac967b5c24526e668b70dd92f07', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))))), this.languageLabel && (h("li", { key: 'feacbfd7e1168da7051148369c6b130d7f5616c5' }, h("dda-tooltip", { key: 'f016c7f2a2e6ec9e9d0527af6f0e6aaae89cb9d8', title_text: this.tooltip(this.language_tooltip, 'Language'), position: "top" }, h("dda-button", { key: '8912a25ae1248af302ee0df99b603b66d24cbc49', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", lang: this.language_lang, dir: this.languageDir, onClick: this.languagehandler }, this.languageLabel)))), this.showLogin && (h("li", { key: 'e6b2a2a956b21017d61ce5332da6fb3ad5b0fe79' }, h("dda-tooltip", { key: '7784b7fc7421e3938d6e7398b73784ef98817430', title_text: this.tooltip(this.login_tooltip, this.loginLabel), position: "top" }, h("dda-link-button", { key: 'cf0a83e005d202d12302b09d76de099d7f104f95', 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() {
@@ -706,7 +739,7 @@ export class DdaHeader {
                     "references": {
                         "QuickLinkItem": {
                             "location": "local",
-                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-header/dda-header.tsx",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-header/dda-header.tsx",
                             "id": "src/components/dda-header/dda-header.tsx::QuickLinkItem"
                         }
                     }

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

@@ -356,6 +356,11 @@ WithoutLogin.args = Object.assign(Object.assign({}, Default.args), { hide_login:
 export const Arabic3x = () => `
   <div dir="rtl" lang="ar">
     <dda-header
+      first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
+      first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
+      first-logo-alt="حكومة دبي"
+      second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
+      second-logo-alt="دبي الرقمية"
       contrast_title="تباين الألوان" contrast_description="حدد إعداد تباين الألوان المفضل لديك"
       contrast_noraml_text="الألوان العادية" contrast_color_blind_text="عمى الألوان"
       contrast_red_weakness_text="ضعف أحمر" contrast_green_weakness_text="الضعف الأخضر"

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

@@ -93,9 +93,9 @@ export class DdaHomeBanner {
         this.startAutoplay();
     }
     componentDidLoad() {
-        // Non-<slide> children are ignored, which otherwise looks like a blank banner.
+        // Other children are ignored, which otherwise looks like a blank banner.
         if (!this.slides.length) {
-            console.warn('dda-home-banner: no <slide> children found. Each slide must be a <slide> element; other children are not shown.');
+            console.warn('dda-home-banner: no slides found. Each slide must be a <div class="dda-slide"> (or a <slide>) element; other children are not shown.');
         }
     }
     disconnectedCallback() {
@@ -157,7 +157,8 @@ export class DdaHomeBanner {
         return this.slide_status_label.replace('{current}', String(current)).replace('{total}', String(total));
     }
     updateSlides() {
-        const slides = Array.from(this.el.querySelectorAll('slide'));
+        // <div class="dda-slide"> is the valid-HTML form; <slide> still works for existing pages.
+        const slides = Array.from(this.el.querySelectorAll('slide, .dda-slide'));
         // The observer watches this.el, which also contains the nav this component renders,
         // so every re-render re-triggers it. Bail unless the slide list actually changed,
         // otherwise assigning to @State here would loop forever.
@@ -186,10 +187,10 @@ export class DdaHomeBanner {
     render() {
         const total = this.slides.length;
         const showAutoplayToggle = this.autoplay && !this.reducedMotion;
-        return (h(Host, { key: '44c4c55938a8ba6d6974780e92cfdc02479afb8a', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: '18314d56093e75acab6394769984de61cc133e4c', class: "dda-slider-container" }, h("div", { key: '6dca34903300349e02527a809be5cae94878831d', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: 'a9df2fcbbcdaba8f79f29fa8ff3cbcd163eaa9d4' })), h("div", { key: '37a9054da4e5dcad38d83a8decd80635ef26cdf2', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '94718488655c71f3a38baabadb3bfe945cf1e7ca', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: 'ff629d0378a36110f00bb8f17f358a37dd3cd7d0', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: '76227e52e94f08a416b56680f61ac5a76c6ef1ba', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: '19f8f4da320613319482f4da4e4367a0ff1ea887', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: '32ae627535ab523d85ad33d658523095f9ff9e45' }, this.slides.map((_, index) => {
+        return (h(Host, { key: '815169560a0c33d7f7cfc541aac3374d0446b5ba', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: '207061e0670505a6124ea5db823929dcfe123ce3', class: "dda-slider-container" }, h("div", { key: '4493a1548bdf83287fee4e863b196c6cca8a0a25', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: 'ad2e1eb748d294fb6df20bcac8f2f69f7f0a3c0e' })), h("div", { key: '46f8c37a3b8811573f79ebdefb3959243284c01e', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: 'f5402a5a33e511d3cd517422aac473fb46c6b89e', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: '4ead6617484bc37d5faf327f286e31b6f4f8a6cf', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: '969aa18028bc698d9896288f08b3533fb97125ce', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: '6d1440e810b10a3a6b4666415e71bb7bbc443a0a', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: '07c487998d6c1034451213adedddc4e5d35b1df0' }, this.slides.map((_, index) => {
             const isCurrent = this.currentSlide === index;
             return (h("li", null, h("button", { type: "button", class: isCurrent ? 'dots active' : 'dots', "aria-label": `${this.slide_button_label} ${index + 1}`, "aria-current": isCurrent ? 'true' : null, onClick: () => this.setSlide(index) })));
-        })), h("button", { key: '60ce3c8766da6e41c43fed8b2896289592b2b21f', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: 'ce7a17d796ae162e53b3ed26aea0b48a3be907f1', class: "material-icons", "aria-hidden": "true" }, "chevron_right")), this.show_scroll_icon && (h("div", { key: '2280a7a5818da850449da17792d5d6d9fd5740fe', class: { 'dda-mouse-scroll': true, 'dda-mouse-scroll-mobile': this.show_scroll_icon_mobile }, "aria-hidden": "true" }, h("dda-scroll-icon", { key: 'd0f4be0b232c881c71c2c3469c47c019de021acf', scroll_icon_size: "sm", scroll_icon_color: "white" })))), h("div", { key: '1438d05ca350cd7a98c343bd6dd3b549fbfa75f3', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
+        })), h("button", { key: '8e8a335ea31cdd3a624d50282a9ed949a01ed237', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: '46f171571dc118cf94251c6c20a343801b2501e1', class: "material-icons", "aria-hidden": "true" }, "chevron_right")), this.show_scroll_icon && (h("div", { key: '518d015c6244698ee64e2bb93f57ded68e733cd8', class: { 'dda-mouse-scroll': true, 'dda-mouse-scroll-mobile': this.show_scroll_icon_mobile }, "aria-hidden": "true" }, h("dda-scroll-icon", { key: '837c41cd84c3198cdcc2d9ced1cb7e542ad0b258', scroll_icon_size: "sm", scroll_icon_color: "white" })))), h("div", { key: 'b5ada2285c3b0fba897e372bd477604645039b38', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
     }
     static get is() { return "dda-home-banner"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-home-banner/dda-home-banner.stories.js

@@ -2,7 +2,7 @@ const IMG_1 = 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpe
 const IMG_2 = 'https://images.pexels.com/photos/1470405/pexels-photo-1470405.jpeg';
 const IMG_3 = 'https://images.pexels.com/photos/162031/dubai-tower-arab-emirates-162031.jpeg';
 const slide = (src, alt, title, subtitle) => `
-  <slide>
+  <div class="dda-slide">
     <img src="${src}" alt="${alt}" />
     <div class="slide-wrap">
       <div class="slide-content">
@@ -11,7 +11,7 @@ const slide = (src, alt, title, subtitle) => `
         <dda-button button_color="default-primary" size="lg">Call to action</dda-button>
       </div>
     </div>
-  </slide>`;
+  </div>`;
 export default {
     title: 'Components/Home Banner',
     component: 'dda-home-banner',
@@ -31,12 +31,12 @@ export default {
         docs: {
             description: {
                 component: `
-The banner is **slotted** — each slide must be a \`<slide>\` element. The component
-collects slides with \`querySelectorAll('slide')\`, so \`<div>\` children are ignored.
+The banner is **slotted** — each slide must be a \`<div class="dda-slide">\`. Other children
+are ignored. The older \`<slide>\` element still works, but HTML checkers reject it.
 
 \`\`\`html
 <dda-home-banner autoplay="true" interval="5000">
-  <slide>
+  <div class="dda-slide">
     <img src="assets/img/home-banner.jpg" alt="Aerial view of Dubai at sunset" />
     <div class="slide-wrap">
       <div class="slide-content">
@@ -44,7 +44,7 @@ collects slides with \`querySelectorAll('slide')\`, so \`<div>\` children are ig
         <p>Pioneering and accelerating the pace of digital transformation in the city</p>
       </div>
     </div>
-  </slide>
+  </div>
 </dda-home-banner>
 \`\`\`
 

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

@@ -42,7 +42,8 @@
   border-radius: 8px;
 }
 
-.home-slider slide {
+.home-slider slide,
+.home-slider .dda-slide {
   position: relative;
   width: 100vw;
   height: 100vh;

package/dist/collection/components/dda-home-carousel/dda-home-carousel.js

@@ -40,7 +40,7 @@ export class DdaHomeCarousel {
                     "references": {
                         "BannerCardItem": {
                             "location": "local",
-                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-home-carousel/dda-home-carousel.tsx",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-home-carousel/dda-home-carousel.tsx",
                             "id": "src/components/dda-home-carousel/dda-home-carousel.tsx::BannerCardItem"
                         }
                     }
@@ -154,7 +154,7 @@ export class DdaHomeCarousel {
                     "references": {
                         "BannerCardItem": {
                             "location": "local",
-                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-home-carousel/dda-home-carousel.tsx",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-home-carousel/dda-home-carousel.tsx",
                             "id": "src/components/dda-home-carousel/dda-home-carousel.tsx::BannerCardItem"
                         }
                     }

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: '456013b1bf9ca36cec1e860eeed4d26cf6b212db' }, h("div", { key: '91cee372c7df53d78228f0cc4203c63b62d87baa', class: inputClass }, this.label && h("label", { key: 'ca0ebefb538fdf75ea2320d9b72e6b37eefceb90', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: '2d192f9e330e69343af07dd9dc5ccf3114081a65', "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: '36471770750b966057d05c2d094649160718337f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'f9f9f7232f29114a03bec71f5e815e7b99b5facb', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '2460c075d792faea6cb855ee9d28185a33b250b7' }, h("div", { key: '221bdd52cc2e6c74539e649b3dba7e8925c41917', class: inputClass }, this.label && h("label", { key: '6872e3b69b05329e53b8eb1df062a3de7c3f9831', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: 'e65c8fbb0110a6e00c339f7275ecf29b2caa0f79', "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: '51e9cc7b8419a8f8a19f7cd57eb4e26134a279fe', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '93494c9c3ae51d135e1c3d1ce7c7902a132a7905', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-link-button/dda-link-button.js

@@ -33,9 +33,9 @@ export class DdaLinkButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '2e046f0acf81a0794343eeed591da1dc410222a7' }, h("a", { key: 'f0cc2585726e2a4e081dda080edde3894a9f6ab2',
+        return (h(Host, { key: '856cc218a6b0ce2579f832c9f62e30c0c200c153' }, h("a", { key: '26490371647ede0bfef4d926aba6e492882ff1f4',
             //   type={this.type}
-            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '21aa636558ccc01a45ec274470d1a0e76557ab30', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: 'f150c5b2d5dcf495c3c1bd345996516a759087d3' }), this.end_icon && h("i", { key: '6534ba8e68d01beebaa69b65271edc772600ce77', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.end_icon))));
+            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '9140bea1916d0d152ffe1e04e7d64a10da061981', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: '7791fcea22490f0d7fd4cfe50cfe79773696a3d0' }), this.end_icon && h("i", { key: 'a19d4636251e1227bb17724f805b28b8e427dcfa', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.end_icon))));
     }
     static get is() { return "dda-link-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-number-field/dda-number-field.js

@@ -72,7 +72,7 @@ export class DdaNumberField {
             this.component_mode,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: 'dc33118445c063d8a31299d0e75864f7c2af28b6' }, h("div", { key: '8722c72807a6e63b15ca5332cbdc96e969aba269', class: containerClass }, this.label && h("label", { key: '9dd6dca85d42b69ffa360e71c917fdfc623f6c88', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '4194f6757d7374277e1d83b5e68aed484cddfde3', class: "dda-input-field-group dda-number-field" }, h("input", { key: '23e0faff7ff131e7dc4f510aab976fda2da35cb3', id: id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '794dd0cbfd19a7c5248577cd84246e15724f5bbc', class: "dda-input-dropdown-btn" }, h("button", { key: '58342bb737767eec02ab21e85ee54950e47a9c81', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.selected_currency}` : undefined, "aria-expanded": this.isCurrencyDropdownOpen ? 'true' : 'false', onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: 'c6b45acd08c9c8091c0c350ce589af6a8de55bb3', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: 'e9d3355a8cc996668af6bd1d54b2cd63c960ce22', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: '31e43fb31d6f5256fa1be9ad07ad6b8ed39a10d6', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '7a5ba18f96a66cb35fa217379014d0b5d15da9ce', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: 'fd3a5c8ce325ddd251bdefd1d2043564a81d9cd4' }, h("div", { key: '0935badd7ce102a681a83b374dc4af9a118302d9', class: containerClass }, this.label && h("label", { key: 'c5d45dd841313617c7d1576de6f8777e31847b39', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'a8f571d9fdaa4eb4d965f256c80bb53dfadbf75d', class: "dda-input-field-group dda-number-field" }, h("input", { key: '0f63cf601b4c004bd738e10d283f3be0b927d83b', id: id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'ee20f566f935ec284ff537063b2845cc98787a3a', class: "dda-input-dropdown-btn" }, h("button", { key: '812343d65233cbacb844041557b2cdb96815dc19', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.selected_currency}` : undefined, "aria-expanded": this.isCurrencyDropdownOpen ? 'true' : 'false', onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: '24cfa3737af0b61c085eef16c08f7abdefa96fd4', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '62a81017715790ba221f89d859c8d401dba8af62', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: '866410624fe6593f1d8bd26d83697c9651172854', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '97a63ee6e714d3c68bef679f1cddf9db2719b4a0', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-number-field"; }
     static get originalStyleUrls() {

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

@@ -63,7 +63,7 @@ export class DdaPagination {
         }
     }
     render() {
-        return (h(Host, { key: 'df2d0d06768da20cb3abb0321ab530e5843e1926' }, h("div", { key: 'c3eb73ffd96039d3a979fef9f7c750de725c3a9f', class: `dda-pagination-container` }, this.renderPagination())));
+        return (h(Host, { key: '0f40ad0977ba2b432dc8c35710fdbb837baab840' }, h("div", { key: 'b0547a0b3a83292ff9714650b21acebc7051e9fa', class: `dda-pagination-container` }, this.renderPagination())));
     }
     static get is() { return "dda-pagination"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class DdaPhoneField {
     render() {
         const inputClass = `${this.component_mode} ${this.size ? `dda-input-size-${this.size}` : ''} ${this.error_message ? `dda-error-message` : ''}  ${this.validation_type ? `dda-validation-${this.validation_type}` : ''}  ${this.is_focused ? 'dda-input-focus' : ''} ${this.phone_number ? 'dda-input-focus-filled' : ''}`;
         const id = this.inputId;
-        return (h(Host, { key: 'c8913d6b359cfe46a5706f42acbb11764bbd63d5' }, h("div", { key: '90871fbde7ba810963796ec709106b0463ef2b97', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: '031fe1b88ca5dce28bf0d05f065e29b713e6b0e0', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'cffc978d774e2e70825cd6b0ea43d91f5b04ff6b', class: `dda-input-field-group dda-phone-field` }, h("div", { key: '5598c70cd89160303d7d3b13a7cefcaa5244d957', class: "dda-input-dropdown-btn" }, h("button", { key: 'bdadca750c04d90a310f0e2a323602b7ae493882', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.country_code}` : undefined, "aria-expanded": this.dropdown_open ? 'true' : 'false', onClick: () => this.toggleDropdown() }, h("img", { key: '8074516551e14d63f9db1d964aba1f4d8a2071f8', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '4b02530bc19f68d6caeeda5ebcf26fa497db7805', class: `material-icons`, "aria-hidden": "true" }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: '4b1b3b5d846d2a1520019e99c25d2bdaea404c9f', class: "dda-input-dropdown-list" }, this.countries.map((country, index) => (h("button", { id: `${this.button_id || `${id}-country`}-${index}`, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: '679214a85f3ede2dbf92bf47978638f2409da898', id: id, name: this.phone_input_name, "aria-label": this.aria_label, type: "tel", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'tel', pattern: "[0-9]*", autocomplete: this.autocomplete, value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && !this.validation_type && h("span", { key: '9af9eb28aa2843e44dfbde3fc9fe7f7bd39f1d27', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '5b1f290bba8fc9896a2de543611fa44da2579fab', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '5043945b23408f4e1effb64806f975c783dadd20' }, h("div", { key: '7093a63abae8052aa1b6a4f948b0c5a5c35b1822', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: '185bb40c54056b1961de3bb77d9d6539c531afe0', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '8e77837e576191326b80b35e38265baa852f245e', class: `dda-input-field-group dda-phone-field` }, h("div", { key: '7e0baea30d88cee6b0f7a5b6981d75dbf170a2c9', class: "dda-input-dropdown-btn" }, h("button", { key: 'ecd5d9e4b44ce197ecf9cf7d7a1f7ac34dca8593', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.country_code}` : undefined, "aria-expanded": this.dropdown_open ? 'true' : 'false', onClick: () => this.toggleDropdown() }, h("img", { key: 'a743d23d0bf63f69ddfe5bb78b4dcd4c103a6125', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '7f6c2eee4498e22f4d7df127234c7180777c944e', class: `material-icons`, "aria-hidden": "true" }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: 'df0117881992e8a9d0bd4064ec39ecc0fe0b2f50', class: "dda-input-dropdown-list" }, this.countries.map((country, index) => (h("button", { id: `${this.button_id || `${id}-country`}-${index}`, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: '5c8e93e6ae085972291be6456408b572b667e0dc', id: id, name: this.phone_input_name, "aria-label": this.aria_label, type: "tel", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'tel', pattern: "[0-9]*", autocomplete: this.autocomplete, value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && !this.validation_type && h("span", { key: 'b21621486003f85d17f2b52e1f8d89e6eab9c18b', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'ac02fc5bc3a77aafba1adc8e0f55dd1590333fd6', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-phonefield"; }
     static get originalStyleUrls() {

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

@@ -16,7 +16,7 @@ export class DdaProgressBar {
         const progressStyle = {
             width: `${this.progress}%`,
         };
-        return (h(Host, { key: '04313ddfb70c55db686fea642590ba75ab52d00f' }, h("div", { key: '9daec3039295c313c661f990a5e95a583508a744', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: '784a889d7db67402936a560997cbd12d59c886df', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '5429f351051181423e18a271269babd479f15e9a', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '2178aa8908e5fce94a72c1a2b8dada282addc9fe', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: '323b032598d4bbe965dd8e56874835d3573b6adb', class: "dda-percentage-text" }, this.progress, "%")))));
+        return (h(Host, { key: '51da2ad9e461a0d6b3590e7ff38eba3afefe66da' }, h("div", { key: '47a1f39a072aa07df8642c7d253c1d8bc65e3df4', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: '6fc4007b05d3a7574324babd728e2a8651fefb1e', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '1a41f45ad4227f542abc05038af334a0f20715ed', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '3c340125c472bd9db640d48c00bbc99ae360cefe', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'f8be04a27d969dffd59cf9bad3bd9bbc9ddeb1d3', class: "dda-percentage-text" }, this.progress, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {

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

@@ -560,6 +560,7 @@
   --dda-neutral-variant-99: #F4FEFD;
   --dda-neutral-variant-100: #FFFFFF;
 
+  --dda-surface-variant-94: var(--dda-neutral-variant-94);
   --dda-surface-variant-90: var(--dda-neutral-variant-90);
   --dda-surface-variant-87: var(--dda-neutral-variant-87);
   --dda-surface-variant-80: var(--dda-neutral-variant-80);
@@ -574,6 +575,8 @@
 
 :root[data-theme='dark'] {
 
+  /* Behind --dda-color-primary-40 text (the active tab): #21BEBA on #293232 is 5.72:1. */
+  --dda-surface-variant-94: var(--dda-neutral-variant-20);
   --dda-surface-variant-90: var(--dda-neutral-variant-30);
   --dda-surface-variant-87: var(--dda-neutral-variant-25);
   --dda-surface-variant-80: var(--dda-neutral-variant-22);
@@ -3028,23 +3031,43 @@ body {
     width: calc(100% - 32px);
 }
 
+/* The mega menu opens under its own link, like the 3.x dropdown (.dda-default-submenu), and is as
+   wide as its columns. When it does not fit there, dda-header sets --dda-mega-shift to flip it back
+   toward the start of the nav, or to clamp it inside the screen (alignMegaPanel). */
 .megamenu-content{
     display: none;
-    width: 100%;
-    padding: 0 15px;
-    position: fixed;
-    top: 150px;
-    left: 0;
+    width: max-content;
+    max-width: calc(100vw - 32px);
+    padding-top: 5px;
+    position: absolute;
+    top: 100%;
+    inset-inline-start: var(--dda-mega-shift, 0px);
+    z-index: 1;
 }
 .megamenu-item{
     min-height: 350px;
     background: var(--dda-surface-100);
     border-radius: 8px;
-    margin: 0 auto;
+    margin: 0;
     padding: 42px 15px;
     box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
     position: relative;
 }
+/* .megamenu-item also has .dda-container; the panel is not a page-wide container. Its height comes
+   from its links, and the end padding keeps the close button clear of the column titles. */
+.megamenu-content .megamenu-item.dda-container{
+    width: auto;
+    max-width: none;
+    min-height: 0;
+    padding-block: 32px 16px;
+    padding-inline-end: 64px;
+}
+/* Fixed-width columns: percentage columns (.dda-col-md-3) have no width to take in a max-content panel. */
+.megamenu-content .dda-row > [class*='dda-col-']{
+    flex: 0 0 300px;
+    width: 300px;
+    max-width: 300px;
+}
 .megamenu-item .mega-menu-title{
     height: 24px;
     font-size: var(--dda-fs-body-lg);

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

@@ -13,7 +13,7 @@ export class DdaRadiobutton {
             this.radio_status ? `dda-radio-${this.radio_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'dd57237727d215708e18097d29e1543b27f155fd' }, h("div", { key: 'c9997615a28ba5e6b39dd5192bce8be6bafa3294', class: radiobuttonClass }, h("input", { key: '06e80cd7290b4582174d1d5ac66016091c9be88b', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '1d337acbc432e898381079385de5a44ea7e84d7c', htmlFor: this.input_id }, h("span", { key: 'b3864f116634c2c3d4dca437df9f7e06c9897844', class: "radio-circle" }), h("p", { key: '19241cca6592bc73e695ef7801a6faf18e1a566f' }, h("span", { key: 'a082d64589f2452401380039adfe65d34747c679', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: 'd98a860bbe61b9e09c06f164108c5d49612c9a3a', class: "radio-supporting" }, this.supporting))))));
+        return (h(Host, { key: 'e2b714010721763412b10b5c942d90a02900f483' }, h("div", { key: '45e011c3a6658be0d1b5f857625f6a1a14e824b7', class: radiobuttonClass }, h("input", { key: '7ec2a40ac7a39a7711e53cba5719d697d2cd832b', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '67c873f4c22db01922aadde0ccc52ad32395ec4b', htmlFor: this.input_id }, h("span", { key: 'adc29f2a518e645159d887613897b2a7e1cf7032', class: "radio-circle" }), h("p", { key: '25383395e12add6f5c045e47574a89f9b0b475bc' }, h("span", { key: '39b49370a6f7170339f0d85944d72928e75c9ca6', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: '37558c3fce9ce30ddbebff307f6dac78cada545b', class: "radio-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-radiobutton"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-range-slider/dda-range-slider.js

@@ -40,10 +40,10 @@ export class DdaRangeSlider {
     render() {
         const leftId = this.left_input_id || `${this.fallbackId}-min`;
         const rightId = this.right_input_id || `${this.fallbackId}-max`;
-        return (h(Host, { key: '183b4a9a57ed9c7c64158595d6d8ecc7985784a4' }, h("div", { key: '741df5d78729be31eb32701d3aa13b7fc6190682', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '13d362fc01c2189edfce78dcc01ae6ae7a397c49', class: "dda-range-slider" }, h("div", { key: '1f5cc6b659e517107a035f15e79245eec9dbd09d', class: "dda-range-slider-track", style: {
+        return (h(Host, { key: 'dbbcf690cb26511ffecd349d7c11127c8e5a28eb' }, h("div", { key: '33c73dc0c1b1a23f47e760f5f2cba5b1b34b9233', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'ae070c0cab2b805dda2444aa3d60034021f12b11', class: "dda-range-slider" }, h("div", { key: '33a2c9bfd7754596cc55241f41806c1c889e8612', class: "dda-range-slider-track", style: {
                 left: `${this.getPercentage(this.min_value)}%`,
                 right: `${100 - this.getPercentage(this.max_value)}%`,
-            } }, h("span", { key: '79773cfafea77732a556d70819ea4ac8875c19fd', class: "min-label" }, this.min_value, "%"), h("span", { key: 'e5663666fce21bd4a2a59b811cd740577b890c35', class: "max-label" }, this.max_value, "%")), h("span", { key: 'b4ab6d47bb1e26e0ed4ba430eab6218f5168cefa' }, h("input", { key: '3eb384952b21acf20fefb49e8cc2fd2565c4fb9d', id: leftId, name: this.left_input_name, "aria-label": this.left_aria_label || 'Minimum', type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("span", { key: '8bfe1915e08e6ce035f74cf781ac9543736bd7e2' }, h("input", { key: '3abcde5b1d268d0d56f687caadfcf16340ae6c4f', id: rightId, name: this.right_input_name, "aria-label": this.right_aria_label || 'Maximum', type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
+            } }, h("span", { key: '0f5646d1f4c1c687fa2c03f3987f05ab835cd2d2', class: "min-label" }, this.min_value, "%"), h("span", { key: '780d90954b54b13315bfb980c1d4354809fbcb7a', class: "max-label" }, this.max_value, "%")), h("span", { key: '7f35dd25e57bf986e6387e30ed6b7a64e3beaf71' }, h("input", { key: 'acd00fa0cebef44206275daac58aefd1ff750fd9', id: leftId, name: this.left_input_name, "aria-label": this.left_aria_label || 'Minimum', type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("span", { key: '361ab7ee406082480999de056ecb26351f0240cc' }, h("input", { key: 'b6fb092f55dcd7df96d5e8c86a9ea63d55da802d', id: rightId, name: this.right_input_name, "aria-label": this.right_aria_label || 'Maximum', type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-scroll-icon/dda-scroll-icon.js

@@ -21,7 +21,7 @@ export class DdaScrollIcon {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '7aa27a84683b21941cc9f843579736d85a5f3717', "aria-hidden": "true" }, h("div", { key: '59a540879bb9786d8088ca64ea0e0ca3ee8b82c2', class: className }, h("div", { key: 'f44dc05a49f86b9af2460de11381516fbe86127b', class: "dda-scroll-icon-scroll-dot" }))));
+        return (h(Host, { key: '4502467781b3847811fb612eb57f6d49a40182e5', "aria-hidden": "true" }, h("div", { key: '09e4decec6065cf0e5167b064951a60a7a5739c6', class: className }, h("div", { key: '18d6edd0c698dfc23239e445b3ec468e0e66624e', class: "dda-scroll-icon-scroll-dot" }))));
     }
     static get is() { return "dda-scroll-icon"; }
     static get originalStyleUrls() {

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

@@ -46,7 +46,7 @@ export class DdaSearchInput {
     }
     render() {
         const id = this.inputId;
-        return (h(Host, { key: '63dd0ce5b1ba526bc4f2b79cd4646f433bf7f5b1' }, h("div", { key: '4b19e3abcdd6e920b8146484f1e859c449eb6f56', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '54f45f95ae269e974064a01d9453934ef25f1f82', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '51b6460a3a04c80947ce2a9f68cbd472d2dac945', class: "dda-search-area dda-search-action" }, h("i", { key: '2d19436afd728672b1dee78a5888a66a9418e929', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: 'a28e11d99e628aeb122c857bad226bea62881a1f', name: this.search_input_name, "aria-label": this.aria_label, id: id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'd0064ab0d27ad86ef26d048a604de6d93f290c60', class: "dda-search-btngroup" }, h("button", { key: 'a6e9f7288c8ff9123553e80f74e36467bc6f5b43', name: this.close_button_name, "aria-label": this.button_aria_label || this.clear_button_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '2676bd651dd8fffd3f6ebf76dc812bfb0272e003', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.show_button && (h("button", { key: '455e7da64da6df0b345ad44559a8a403b44d07f8', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'fe5fbeb25377cf89d4d1fa3520d4c11fd44eb55c', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '8538814d841caf3e75b0f4edb33c5d53d442b792', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '1f3191966d43f2b236fd11459101c769a0927436' }, h("div", { key: '7dd31c429d569ebfff446d78b7c88787bb89108d', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: 'c0b9f0a432de51598797da4734c9147decaf9ba1', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'ec94b09e36f446cf5d08cd1406374e3a71330f45', class: "dda-search-area dda-search-action" }, h("i", { key: '6a5c297727c0783f204346a09eb479320c98a287', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: '581437d9d6cda370e2bcafd5f1704cc0fec6ed08', name: this.search_input_name, "aria-label": this.aria_label, id: id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'a8b99cc30487d302ac2c40717ed1d15ca9b862c9', class: "dda-search-btngroup" }, h("button", { key: 'ebdc39f8411eb8fb54feed4c22543d0076708cc6', name: this.close_button_name, "aria-label": this.button_aria_label || this.clear_button_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '991884ec48eb496ec35d95368d8763bcf7fb4f07', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.show_button && (h("button", { key: '9a825cfb95a6fbfc82d34d5014d44cab59193f06', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: '656c31b9a6a2d9a61d26277821e1fdd47cabc01a', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'c796e3b1dc99f60c34009c8bfb4598683d0d0e09', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-search-input"; }
     static get originalStyleUrls() {

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

@@ -233,10 +233,18 @@ export class Ddaselect {
         // Computed once here (not per option below) to keep the list render O(n) instead of O(n^2).
         const activeIndex = current ? options.indexOf(current) : 0;
         const validation = this.error || this.validation_type;
-        return (h(Host, { key: '79b4f368bdab0911dde6303d33ab79c8ea093399' }, h("div", { key: '8f9d7984043832d14d72ed6770b5ea384b3e4015', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${validation} ` }, this.label && h("label", { key: 'c3e73bc801980fe409dde6078b5763edbc249292', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: '2572ef664b2aafcefd62c7361337d2aa9a649438', class: "dda-dropdown-container" }, h("button", { key: 'cda07037871e133d06a54c4da37abee49db11f59', name: this.toggle_button_name, "aria-label": this.triggerLabel, "aria-labelledby": this.label && !this.triggerLabel ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown, onBlur: this.onTriggerBlur }, current ? current.text : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select an option'), h("i", { key: '3d8f579d35ad0516e78530b548d61858d0721831', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '66eb4b2edd1f716a95be787e4cfd9185936bc62f', id: this.listboxId, role: "listbox", "aria-label": this.triggerLabel || this.label, class: "dda-input-dropdown-list dda-select-list" }, options.length > 0 ? (options.map((option, index) => {
+        return (h(Host, { key: '79b4f368bdab0911dde6303d33ab79c8ea093399' }, h("div", { key: 'b0aebe236abfcbd53ede46e0c684fa7353962fe8', class: {
+                'dda-input-container': true,
+                [this.custom_class]: !!this.custom_class,
+                [this.component_mode]: !!this.component_mode,
+                'dda-input-disabled': this.disabled,
+                'dda-select-open': this.is_open,
+                [`dda-input-size-${this.size}`]: !!this.size,
+                [`dda-validation-${validation}`]: !!validation,
+            } }, this.label && h("label", { key: '87491d828a562c97475241da38308faa32e35fb0', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: '385d35415beb1104eea5329427c6db616954c0da', class: "dda-dropdown-container" }, h("button", { key: 'd86507f9a4ebc1a7cc66e94d2126d3bd80030b19', name: this.toggle_button_name, "aria-label": this.triggerLabel, "aria-labelledby": this.label && !this.triggerLabel ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown, onBlur: this.onTriggerBlur }, current ? current.text : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select an option'), h("i", { key: '672144adba927f8c64a18d01569021f5184dd85b', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'ee31ed5dc81d441998320aff4c700328dd74cb18', id: this.listboxId, role: "listbox", "aria-label": this.triggerLabel || this.label, class: "dda-input-dropdown-list dda-select-list" }, options.length > 0 ? (options.map((option, index) => {
             const isCurrent = current !== undefined && String(current.id) === String(option.id);
             return (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": isCurrent ? 'true' : 'false', tabIndex: index === activeIndex ? 0 : -1, class: `dda-input-dropdown-item ${isCurrent ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option), key: `${index}-${option.id}` }, option.text));
-        })) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '31d9c4afb879454e109e7d6fb406b5467ef5c495', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '2b6ab09e5477120046fbacf530c514c8421a4aaa', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        })) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '96cafd84643b25aaf08b0d6984f8690688f0093d', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '0d4c0493b85c32972a7852d9008a1c8cebf81660', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {
@@ -283,7 +291,7 @@ export class Ddaselect {
                         },
                         "SelectOption": {
                             "location": "local",
-                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
                             "id": "src/components/dda-select/dda-select.tsx::SelectOption"
                         }
                     }
@@ -644,7 +652,7 @@ export class Ddaselect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
                             "id": "src/components/dda-select/dda-select.tsx::SelectOption"
                         }
                     }

package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.js

@@ -696,7 +696,7 @@ export class DdaStickyFooter {
                     "references": {
                         "MiddleLinkItem": {
                             "location": "local",
-                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-sticky-footer/dda-sticky-footer.tsx",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-sticky-footer/dda-sticky-footer.tsx",
                             "id": "src/components/dda-sticky-footer/dda-sticky-footer.tsx::MiddleLinkItem"
                         }
                     }
@@ -1101,7 +1101,7 @@ export class DdaStickyFooter {
                     "references": {
                         "RightLinkItem": {
                             "location": "local",
-                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-sticky-footer/dda-sticky-footer.tsx",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-sticky-footer/dda-sticky-footer.tsx",
                             "id": "src/components/dda-sticky-footer/dda-sticky-footer.tsx::RightLinkItem"
                         }
                     }

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

@@ -33,12 +33,13 @@
 
 .dda-tab-default .dda-tab-item.active,
 .dda-tab-default .dda-tab-item:hover {
-  background: var(--dda-neutral-variant-94);
+  background: var(--dda-surface-variant-94);
   color: var(--dda-color-primary-40);
 }
 
 .light-mode.dda-tab-default .dda-tab-item.active,
 .light-mode.dda-tab-default .dda-tab-item:hover {
+  background: var(--dda-neutral-variant-94);
   color: var(--dda-primary-40);
 }