@dubai-design-system/components-js 5.3.2 → 5.3.4

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);

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);
 }
 

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

@@ -44,7 +44,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: 'cd618ae51b42c4b3537c9d79f9d0722c6fedcdf3' }, h("div", { key: '6c5ce0c1e8742ad322d845da606224b0caa9286c', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || ""), h("span", null, title)))))));
+        return (h(Host, { key: '30474ea86c4c1c8fff84f5c09606e1c8a5b88a84' }, h("div", { key: '47bee1548f4f93e7b09b7cb8f28e61d5ddf91f50', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || ""), h("span", null, title)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,14 @@ import { h, Host } from "@stencil/core";
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
 import { uniqueId } from "../../utils/unique-id";
+// English names of the rich editor's toolbar dropdowns; toolbar_labels overrides them.
+const DEFAULT_PICKER_LABELS = {
+    header: 'Heading',
+    color: 'Text colour',
+    background: 'Highlight colour',
+    font: 'Font',
+    align: 'Alignment',
+};
 export class DdaTextarea {
     constructor() {
         /** Value of the textarea. Updates as the user types; in rich text mode it holds the editor HTML. */
@@ -68,6 +76,27 @@ export class DdaTextarea {
             editorEl.removeAttribute('aria-invalid');
         }
     }
+    // Quill names its toolbar buttons but not its dropdowns ("pickers"): each picker's label is a
+    // <span role="button"> with no text, so screen readers announce an unnamed button (axe
+    // aria-command-name). Name each one from toolbar_labels, falling back to English.
+    labelToolbarPickers() {
+        let custom = {};
+        if (typeof this.toolbar_labels === 'string') {
+            try {
+                custom = JSON.parse(this.toolbar_labels);
+            }
+            catch (_a) {
+                custom = {};
+            }
+        }
+        else if (this.toolbar_labels) {
+            custom = this.toolbar_labels;
+        }
+        for (const picker of Object.keys(DEFAULT_PICKER_LABELS)) {
+            const label = this.el.querySelector(`.ql-toolbar .ql-picker.ql-${picker} .ql-picker-label`);
+            label === null || label === void 0 ? void 0 : label.setAttribute('aria-label', custom[picker] || DEFAULT_PICKER_LABELS[picker]);
+        }
+    }
     componentDidLoad() {
         if (this.enable_rich_editor) {
             // F-015: was `#editor` — the id is now the consumer-supplied
@@ -98,11 +127,13 @@ export class DdaTextarea {
                 this.characterCount = this.quill.getText().length - 1; // Update character count
             });
             this.syncRichEditorA11y();
+            this.labelToolbarPickers();
         }
     }
     componentDidUpdate() {
         if (this.enable_rich_editor) {
             this.syncRichEditorA11y();
+            this.labelToolbarPickers();
         }
     }
     handleInput(event) {
@@ -119,7 +150,7 @@ export class DdaTextarea {
             this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: '22ab5c9ede23feedead5b61e2ed4963c1851ecbc' }, h("div", { key: 'cef06c4a45c19a9ae0eefddd2609b9e9e9f1e48c', class: textareaClass }, this.label && h("label", { key: '76fb6bce4a0510aab2a79209f450d201a24ef9a6', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        return (h(Host, { key: '8f62ec35e00cc27385213d87a20ffb212c3d18a7' }, h("div", { key: '40b7431ed35401f0fd3eed435382c025b7315535', class: textareaClass }, this.label && h("label", { key: '8c24c541942306cca7ba1668ad916ce9d99f3b71', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
         // F-015: previously a bare `<div id="editor">` — the visible
         // label's `for` cannot target a non-labelable <div>, and even
         // aria-labelledby here would be wrong: Quill turns this
@@ -127,7 +158,7 @@ export class DdaTextarea {
         // as a child `.ql-editor`, which is what AT and Tab actually
         // land on. The ARIA lives on quill.root (.ql-editor), applied
         // imperatively in syncRichEditorA11y() after mount.
-        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: '382ba6b5dc9755bf262adb033a118c1be6941bd8', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '5d07ab9a7f7698528fc731778bc668c69fa0e5ec', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '33236593cdafdf4ed5694e272f5c4fcf85ca2f68', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '2845bd3bface431badd534f44f12faa748c1a718', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'cc1fabc27cd1bf0f87cfe6e3194c68a0d43ac7f7', id: this.errorId, class: "dda-error-message" }, h("span", { key: '731658aad2027ae1ae107ad58962acb6bbf40eb2', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '80c26defc477ed47439939cbb23875e0373c9598', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: 'e4f4ca076692226881b259322af66f87b18ccc38', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: 'b71d5885604e71af4188d097727c875d7a69ef47', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '497c95108fffd9e12adf08480e8877a9a3cf7ee9', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'caa536f2039c9c85b922d34a5a2f8ee48beeb9f8', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '9bb54ec991d1b38f712974f37741b032056a7a5e', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '24c199bd4481dc7f3061dd1d8f5c78c581be93dc', id: this.errorId, class: "dda-error-message" }, h("span", { key: 'bfa8ef3356a3407130cfb08499c2478b2a70572e', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '1fe75706036a93d63039822dbb8da1d1c659f379', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '52001e0f2bdd24ac1d61f14b17e6a174e01ace11', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {
@@ -314,6 +345,39 @@ export class DdaTextarea {
                 "reflect": false,
                 "attribute": "enable_rich_editor"
             },
+            "toolbar_labels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Partial<Record<RichEditorPicker, string>>",
+                    "resolved": "\"align\" | \"background\" | \"color\" | \"font\" | \"header\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "RichEditorPicker": {
+                            "location": "local",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-textarea/dda-textarea.tsx",
+                            "id": "src/components/dda-textarea/dda-textarea.tsx::RichEditorPicker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible names of the rich editor's toolbar dropdowns, as a JSON object or an object. Keys: `header`, `color`, `background`, `font`, `align`. A key that is not set keeps its English default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toolbar_labels"
+            },
             "max_characters": {
                 "type": "number",
                 "mutable": false,

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

@@ -11,7 +11,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '034a0d08e3c605fe38f0f0b3244e1d5cc7442472' }, h("label", { key: '93539da2d2ccfa1e51d0eebf4cc1b234e1e03606', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '21c0ca32b52ed5cb69da4339f1fce9c26dcaf1fa', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '8d2def2951a2566625276ba4d350d2407c19af77', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'e56ce02068c3e3c87f3b7452a81b741560297274' }, this.title_text && h("span", { key: 'faeea2f00ee0c50f0b96b5e24c09da088a98f183', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '7999b6126c0fefb6cb09ac67930e311dad18d2b2', class: "toggle-supporting" }, this.supporting))))));
+        return (h(Host, { key: 'eac9f5ced9ca4d38f3efc55cbcf11fbf878d367b' }, h("label", { key: 'e384f0ca71eec7527d9134ea64e2dec08a665d09', class: toggleClass, htmlFor: this.input_id }, h("input", { key: 'c1f6818b50b9fac0cff146fedbfa13e5a266d0a3', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '313f1f6b8ca14d0b9c7b96f41ea483a2505486d9', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: '463331817fa6376e309543dc94cf6e9a893a7076' }, this.title_text && h("span", { key: 'c2ba361c9e048d4283e9a59d9da510942c10a2af', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: 'a0b6512f2a6c1ace0aede3be49dff2579dd09482', class: "toggle-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class DdaTooltip {
         this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: 'e77ebb12700ccbbef52e2d2138e0950d65127778' }, h("div", { key: 'ea64d67136e615b33138a61f1f1a4ba804db5eea', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'c191a8ff9be73014c2da7b1a4fdbcce57e94ba4d' }), h("div", { key: 'c6733ebddb99c659db89027384a50ba9c7836341', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '47c45f8411f5803c4ba59d0b9b4ac5c830b403c7' }, this.title_text), h("p", { key: '4f08ecda01307162262d7c79aa26e795ff03251b' }, this.description)))));
+        return (h(Host, { key: 'f5622191d861ba0c36c89f17368fce0f570ef597' }, h("div", { key: '449e589306dc734ce2d381fc8e4cffaaba290330', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'd88db337e9f9a7bc321a33fc2a045a9b36f878e3' }), h("div", { key: '63c1bf1f0a515735fdfe546d8009f9c468ca7d95', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '4df5ed27d0aa958a1a8c4ae2d3921025329d1d3d' }, this.title_text), h("p", { key: '9f28802fff31d6ab171fb318117d438d8dd3be25' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-ui-card/dda-ui-card.js

@@ -28,7 +28,7 @@ export class DdaUiCard {
     }
     render() {
         const HeadingTag = this.headingTag;
-        return (h(Host, { key: 'd82fda87340a70612440a60808a854297d749883' }, h("div", { key: '8cb77a42b82ed7121af29a234e4c065a416887d5', class: 'dda-card' }, h("div", { key: 'e25298c9dbb2d9247bdc238f9c505180aae45b67', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '3d6d6e4b66a787270593fc53ecb9432ef87cd144' }, !!this.icon && (h("span", { key: '17d02a755a1a6345961ba4c922d2c5205ca79dcd', class: 'dda-card-icon' }, h("i", { key: 'a4eea58a0b1511548c2d60b12bc05068326ce339', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'fe5b33c447adb2a06c20495b576d185258a98bca', class: 'dda-card-icon' }, h("img", { key: '7db29168e53eebe578fb8241795a47862d732d13', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'c2c0a5bd81432dad7b5400c9011998f30823adbf', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '9620bfa353acba31cb43d4a818c11d17bb58ea6d', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'd81101699701091f7d952c6f38637a621fb27324', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: 'e7304fca873531077bb4cafda43e462b8d3403d4' }, h("i", { key: 'd13a118077f9a11b76ba06f5cb4f1ab20f9b5472', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '995bf90013e00498354bfb9a3bfd6950032dd924' })))));
+        return (h(Host, { key: 'adf18a25d016f46bc87b4a1e31241ca162b333e0' }, h("div", { key: '0737db71a77843ea82b477a2f53cf86edf49d8e9', class: 'dda-card' }, h("div", { key: '798f2db5233a36522d7f84d89119cad74d11a006', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '8c6793c79377b6e5eb0e0ab9bd18a2c1ca4f253a' }, !!this.icon && (h("span", { key: '4570999010919bbf9842e3cd6d3fc4f55dec8c82', class: 'dda-card-icon' }, h("i", { key: 'e80483b0a3da315a7535ab1bda1a2885681152b3', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'b4185ea5c24a6675dc9d0eeef4d179e99130528f', class: 'dda-card-icon' }, h("img", { key: '56306706dce39081bd2cb26bedd0f40b0af6f03c', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: '7c2a2790cd3115a1631a45c49abe98b5467c2e82', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'fd207fb19f40281ba00d9b0310ef8a744e9ad907', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'ec7277518f56c8bc596cc1786b6bc950f1454965', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '2191736e59506877a9a094eca2a8caa80056d9c4' }, h("i", { key: 'beb1f6805dc66f93a85c7e4f47eeab22c38bf6c5', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: 'bbaabacc33bc9bcacfbd20e54a38058339126169' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.js

@@ -69,7 +69,7 @@ export class DdaSegmentedTabs {
         this.segmentChange.emit(index);
     }
     render() {
-        return (h("div", { key: '4a72982d49270f6c04cee7fdeaafcba7cccc6d3c', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
+        return (h("div", { key: '182bb79c4e5cc855c33642c649185c2f7da80884', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
             const isSelected = index === this.active_index;
             const className = `dda-segmented-item${isSelected ? ' active' : ''}`;
             return item.startsWith('fo') ? (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', "aria-label": this.iconLabel(item, index), onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));

package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.js

@@ -20,7 +20,7 @@ export class DdaHorizontalStepper {
         }
     }
     render() {
-        return (h(Host, { key: '30afa97eccb87ee8595802f451f2ca2f0624da2a' }, h("div", { key: '70d6126c99005e54565473c574bde94545584b58', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
+        return (h(Host, { key: 'c1434fd26373f59e991e22d9e1287b2c797a76e7' }, h("div", { key: '8f7bbcc7faefee327222fb192ecf12bd2c99ad06', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
     }
     static get is() { return "dda-horizontal-stepper"; }
     static get originalStyleUrls() {