@dubai-design-system/components-js 5.3.5 → 5.3.7

package/dist/collection/components/dda-attach-file/dda-attach-file.js

@@ -81,7 +81,7 @@ export class DdaAttachFile {
             this.component_mode,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: '8ffe229f5582c8bb4f90d84742fa45711129b5d4' }, h("div", { key: '8d2332d57f541d183f87246e29dba8507411524b', class: inputClass }, this.label && h("label", { key: 'bb5e568d5fb07c3b52d9018d11befccf4d8df3ca', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '6566f1551c3efc66a5407ce4019cf0eee07c219f', class: "dda-input-field-group dda-attach-file" }, h("input", { key: '9bb14dda5ca8fa340266d3390a3cbf972cc37871', ref: (el) => (this.fileInput = el), id: id, name: this.input_name, "aria-label": this.aria_label || (this.label ? undefined : 'Choose file'), type: "file", onInput: (event) => { this.handleFileInput(event); }, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { type: "button", id: this.button_id, name: this.button_name, "aria-label": this.button_aria_label || `Remove ${this.file.name}`, class: "remove-file", onClick: () => this.removeFile() }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, "No File Selected"), h("label", { htmlFor: id, class: "dda-file-choose" }, "Choose File")))), this.helper_text && h("span", { key: 'ce554404c39fa4c8e4d5919a9e2c5a8527c8cade', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '28327b8193040e04b40fa62221282c641f91820b', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '8ffe229f5582c8bb4f90d84742fa45711129b5d4' }, h("div", { key: '8d2332d57f541d183f87246e29dba8507411524b', class: inputClass }, this.label && h("label", { key: 'bb5e568d5fb07c3b52d9018d11befccf4d8df3ca', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '6566f1551c3efc66a5407ce4019cf0eee07c219f', class: "dda-input-field-group dda-attach-file" }, h("input", { key: '9bb14dda5ca8fa340266d3390a3cbf972cc37871', ref: (el) => (this.fileInput = el), id: id, name: this.input_name, "aria-label": this.aria_label || (this.label ? undefined : 'Choose file'), type: "file", onInput: (event) => { this.handleFileInput(event); }, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { type: "button", id: this.button_id, name: this.button_name, "aria-label": this.button_aria_label || `Remove ${this.file.name}`, class: "remove-file", onClick: () => this.removeFile() }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" })))) : (h("div", { class: "dda-file-input" }, h("span", null, "No File Selected"), h("label", { htmlFor: id, class: "dda-file-choose" }, "Choose File")))), this.helper_text && h("span", { key: '0d5e37f6029044ac7552f2c73da1045b5beb086c', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'fbac4323946405e93a7561c04fedc742c79dee5a', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-attach-file"; }
     static get originalStyleUrls() {

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

@@ -43,10 +43,10 @@ export class DdaAvatar {
         const hasOptions = this.parsedOptions.length > 0;
         const avatarContent = [
             this.type === 'photo' && h("img", { key: '6e35e5412c61bf6938ef9de44eb08856c379e3b5', src: this.src, alt: "Avatar" }),
-            this.type === 'icon' && h("i", { key: '0467b99db6705fb50f060ca6e39e2e1630319696', class: `${this.icon} dda-smile`, "aria-hidden": "true" }, "sentiment_satisfied"),
-            this.type === 'text' && h("span", { key: '44645dfdc85f95fcf3ac89207523a05c77f7a2ee', class: 'avatar-main-text' }, this.text),
+            this.type === 'icon' && h("i", { key: 'c52ad2a65bab5a1452c56e01b6f26bae56a09dc9', class: `${this.icon} dda-smile`, "data-icon": "sentiment_satisfied", "aria-hidden": "true" }),
+            this.type === 'text' && h("span", { key: 'd87b3b4e792c44f6c99d7c5452a8cdfe46dcf639', class: 'avatar-main-text' }, this.text),
         ];
-        return (h("div", { key: '4911e74415d28f67620d4009f7b9bd24249025ea', class: {
+        return (h("div", { key: '176a9c9374bfcc4862f172dba1669293521acf7c', class: {
                 'dda-avatar': true,
                 [`avatar-type-${this.type}`]: true,
                 [`avatar-size-${this.size}`]: true,
@@ -55,7 +55,7 @@ export class DdaAvatar {
                 [`${this.custom_class}`]: true,
                 [`${this.component_mode}`]: true,
                 [`${this.button_name}`]: true,
-            } }, hasOptions ? (h("button", { type: "button", class: "avatar-trigger", onClick: () => this.toggleDropdown(), "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.aria_label || 'Avatar options' }, avatarContent)) : (h("div", { class: "avatar-trigger" }, avatarContent)), hasOptions && this.isOpen && (h("div", { key: 'cc6468efe93f041333be6cfe3f3e8ff7660ed470', class: "dda-input-dropdown-list" }, this.parsedOptions.map(option => (h("button", { id: this.button_id, name: this.button_name, "aria-label": this.aria_label, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option))))), this.design === 'status' && h("div", { key: 'a193a2ddc7407792b4af1d7f892ad48bdb0811c4', class: "status-circle" }), this.design === 'verified' && h("div", { key: '48e9c1b7957591d51072bedc88112398fd3d5d29', class: "verified-icon" }, h("span", { key: '91a0eba4a279f8db3c26ddec23d8aa1089c8a880', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "verified"), h("span", { key: 'df8ca7400bddd3876b4ff69c4b3637c848149208', class: "visually-hidden" }, this.verified_label)), this.design === 'notification' && h("div", { key: 'e7cbb0bc1068e9e6b21497e4b121faf99f651bba', class: "notification-circle" }, this.notification_number)));
+            } }, hasOptions ? (h("button", { type: "button", class: "avatar-trigger", onClick: () => this.toggleDropdown(), "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.aria_label || 'Avatar options' }, avatarContent)) : (h("div", { class: "avatar-trigger" }, avatarContent)), hasOptions && this.isOpen && (h("div", { key: '8c613c7e59ed7d809262821158a86ca37fd65876', class: "dda-input-dropdown-list" }, this.parsedOptions.map(option => (h("button", { id: this.button_id, name: this.button_name, "aria-label": this.aria_label, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option))))), this.design === 'status' && h("div", { key: '37cb829931eab4fb89bc78b78d69f875d2675bd5', class: "status-circle" }), this.design === 'verified' && h("div", { key: '527c5ef3fc660d422923a5634bf5889c2c3cddaa', class: "verified-icon" }, h("span", { key: '7864916ca3278a69391a35ec79eaf971fd5704ca', class: "material-icons  material-symbols-outlined", "data-icon": "verified", "aria-hidden": "true" }), h("span", { key: 'a2f47ab33411e86f5606e6c59c94e78a72e61cbd', class: "visually-hidden" }, this.verified_label)), this.design === 'notification' && h("div", { key: '4557564b9e972263396534e16b5eab5917ae9c88', class: "notification-circle" }, this.notification_number)));
     }
     static get is() { return "dda-avatar"; }
     static get originalStyleUrls() {

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

@@ -25,7 +25,7 @@ export class DdaBreadcrumb {
     }
     render() {
         const breadcrumbs = this.parseBreadcrumbs();
-        return (h(Host, { key: '87d47d41d1da4d9bac28cbea4136a2b22728b6ee' }, h("div", { key: '038c176e93c24c117fdc50e4245c503adbaf65dc', class: this.component_mode }, h("nav", { key: '36a47a1d0e908d5ce10757051f00a723e867cf92', "aria-label": "breadcrumb", class: `${this.custom_class}` }, h("ol", { key: 'c1ef97d3a64e0cf56f9ee1b2e9561c5d5d7cb300', class: "dda-breadcrumb" }, breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", { href: crumb.url }, this.design !== 'text' && h("i", { class: `material-icons`, "aria-hidden": "true" }, crumb.icon), this.design !== 'icon' && h("span", null, crumb.text), this.design === 'icon' && h("span", { class: "visually-hidden" }, crumb.text)), index < breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined`, "aria-hidden": "true" }, this.separator))))))))));
+        return (h(Host, { key: '87d47d41d1da4d9bac28cbea4136a2b22728b6ee' }, h("div", { key: '038c176e93c24c117fdc50e4245c503adbaf65dc', class: this.component_mode }, h("nav", { key: '36a47a1d0e908d5ce10757051f00a723e867cf92', "aria-label": "breadcrumb", class: `${this.custom_class}` }, h("ol", { key: 'c1ef97d3a64e0cf56f9ee1b2e9561c5d5d7cb300', class: "dda-breadcrumb" }, breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", { href: crumb.url }, this.design !== 'text' && h("i", { class: `material-icons`, "data-icon": crumb.icon, "aria-hidden": "true" }), this.design !== 'icon' && h("span", null, crumb.text), this.design === 'icon' && h("span", { class: "visually-hidden" }, crumb.text)), index < breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined`, "data-icon": this.separator, "aria-hidden": "true" }))))))))));
     }
     static get is() { return "dda-breadcrumb"; }
     static get originalStyleUrls() {

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

@@ -33,7 +33,7 @@ export class DdaButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'd54ed788105af16f01bbe10a4f02b2bae5517462' }, h("button", { key: '7165e0dd286803dda5720f0e3e6d2c9b1872b4e3', id: this.button_id, type: this.type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label, onClick: this.clickHandler, name: this.button_name }, this.start_icon && h("i", { key: '9bdce649b763dd67ae24f8ee64a9124454f37ba0', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: '1fb664410c867b185a2fe40c98da17d8050ba8df' }), this.end_icon && h("i", { key: '635c0d25b4ebe286f8a8e2efd83b6bd636b83b91', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.end_icon))));
+        return (h(Host, { key: 'd54ed788105af16f01bbe10a4f02b2bae5517462' }, h("button", { key: '7165e0dd286803dda5720f0e3e6d2c9b1872b4e3', id: this.button_id, type: this.type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label, onClick: this.clickHandler, name: this.button_name }, this.start_icon && h("i", { key: '50dfd62c234444af2907cc95f25b45245ea7ebef', class: "material-icons  material-symbols-outlined", "data-icon": this.start_icon, "aria-hidden": "true" }), h("slot", { key: '66feb8e92c5591f8f66d180c361e9f57139d07aa' }), this.end_icon && h("i", { key: 'cf5da540c6db86654ad9b01e5779f315d770aeaa', class: "material-icons  material-symbols-outlined", "data-icon": this.end_icon, "aria-hidden": "true" }))));
     }
     static get is() { return "dda-button"; }
     static get originalStyleUrls() {

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

@@ -13,7 +13,7 @@ export class DdaCheckbox {
             this.checkbox_status ? `dda-checkbox-${this.checkbox_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '9fbb77a179c46d7ab124106d6f30d1b04290924d' }, h("div", { key: 'dc632cf3b0617973951cf83edb78d3d1328a0768', class: checkboxClass }, h("input", { key: '4ad0d20783c3a117b79586e7adc03c9a745ffffc', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '8c169967a613f275aa21f483daf08f0629aab238', htmlFor: this.input_id }, h("i", { key: '1a6cffbbfc24a016b26a7e86ae1b6dc3a4cc82c3', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "check"), h("p", { key: '995780046114372185c5044f03437ef4c4a6118f' }, h("span", { key: '35e789e92ef48fa6b17d3e1c79fb1393559ada0b', class: "dda-checkbox-title" }, this.title_text), this.supporting && h("span", { key: '52b2e5272c70e7ec910e36c5970ccaaa348c19c7', class: "dda-checkbox-supporting" }, this.supporting))))));
+        return (h(Host, { key: '9fbb77a179c46d7ab124106d6f30d1b04290924d' }, h("div", { key: 'dc632cf3b0617973951cf83edb78d3d1328a0768', class: checkboxClass }, h("input", { key: '4ad0d20783c3a117b79586e7adc03c9a745ffffc', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '8c169967a613f275aa21f483daf08f0629aab238', htmlFor: this.input_id }, h("i", { key: 'a118084fcf43ee97778b41347583bc0fc59b8eed', class: "material-icons  material-symbols-outlined", "data-icon": "check", "aria-hidden": "true" }), h("p", { key: 'ef4985ffde56de2504e475083e2609a6a12737ae' }, h("span", { key: '7c04acf85f31d382e0a0ca1a5f7dfd2e53443950', class: "dda-checkbox-title" }, this.title_text), this.supporting && h("span", { key: '707996cf5d87a32071b01a476a0afdbd36fd7a1d', class: "dda-checkbox-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-checkbox"; }
     static get originalStyleUrls() {

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

@@ -11,7 +11,7 @@ export class DdaChip {
         this.close_button_label = 'Remove';
     }
     render() {
-        return (h(Host, { key: '29c381e02ff6202549e5c239be13e9559cc6cf9d' }, h("div", { key: '98eb0a6c044af6ca88be1ca0241a778edc173622', class: `dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}` }, this.icon ? h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.icon) : null, h("span", { key: '8bd4623e9fb9d099206cb845cd8ffd07ee1412f3' }, h("slot", { key: 'e36f863f13451298d93f562cf9ffaa368425c484' })), this.show_close_icon && (h("button", { key: 'd5a88351729973f1f86833589f3bb5c95b4b07cf', type: "button", class: "chip-close", onClick: this.clickHandler, "aria-label": this.close_button_label }, h("i", { key: '4aa3bdf1ed257fe2b3c45cdc7bf31ef78eb17ebd', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))));
+        return (h(Host, { key: '29c381e02ff6202549e5c239be13e9559cc6cf9d' }, h("div", { key: '98eb0a6c044af6ca88be1ca0241a778edc173622', class: `dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}` }, this.icon ? h("i", { class: "material-icons  material-symbols-outlined", "data-icon": this.icon, "aria-hidden": "true" }) : null, h("span", { key: '83356b6f99b92ec3a13bc52fab1339c9367c560d' }, h("slot", { key: '401d24eb61194390804a5f148e6e6763be5ccdf6' })), this.show_close_icon && (h("button", { key: '2c3672184655de0b6c53ebe6059f0823f5ec1dfa', type: "button", class: "chip-close", onClick: this.clickHandler, "aria-label": this.close_button_label }, h("i", { key: '81b784c757edec9f02f07928340c30cfa0fedd1f', class: "material-icons  material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" }))))));
     }
     static get is() { return "dda-chip"; }
     static get originalStyleUrls() {

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

@@ -12,7 +12,7 @@ export class DdaCreditCard {
             this.custom_class ? `${this.custom_class}` : "",
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'db633c55f53712716bc1de310b32c7a128ed18ac' }, h("div", { key: '17b110bb22bd58e8d360955e555d0e228c2e70ea', class: cardClass }, h("div", { key: '44b3f5724f76204bfec470ce19fe2d3ca72833fb', class: "dda-credit-card-header" }, h("div", { key: 'a4016ae6c6b40fcc287b68e7d8127491c7e14aa5', class: "card-balance-info" }, h("span", { key: '508dce8c6df113482d2b0875712076f6297c6012', class: "card-balance-label" }, "Current Balance"), h("span", { key: 'b26cab18ff3bfe6c13e3aaa5a917906869ce2374', class: "card-balance" }, this.balance)), h("i", { key: '2bf09c12b0c975611aec43c30398d487cfc947a6', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "wifi")), h("div", { key: 'c2fae25b50e636f811c1ada60fa93ca1d7c0bad5', class: "dda-credit-card-body" }, h("div", { key: '0f352da5f38887ba13946796e9f896fed3b59025', class: "card-userinfo" }, h("span", { key: '3115bd5f811a4cca472fff1d94300e02774c3a39', class: "dda-card-name" }, this.name), h("span", { key: '2f803ed4385cb95c96a81a73f1f00d7ec426b4af', class: "dda-card-number" }, "**** ", String((_a = this.card_number) !== null && _a !== void 0 ? _a : '').slice(-4))), h("div", { key: '5a7cd99774a6a6a30da08896d770269cf5f46f09' }, this.card_type && h("img", { key: '98b3a3d1b2b18f698dc08ce9ff875be9dba01df9', src: this.card_type, alt: "Card Type", class: "card-type-icon" }))))));
+        return (h(Host, { key: 'db633c55f53712716bc1de310b32c7a128ed18ac' }, h("div", { key: '17b110bb22bd58e8d360955e555d0e228c2e70ea', class: cardClass }, h("div", { key: '44b3f5724f76204bfec470ce19fe2d3ca72833fb', class: "dda-credit-card-header" }, h("div", { key: 'a4016ae6c6b40fcc287b68e7d8127491c7e14aa5', class: "card-balance-info" }, h("span", { key: '508dce8c6df113482d2b0875712076f6297c6012', class: "card-balance-label" }, "Current Balance"), h("span", { key: 'b26cab18ff3bfe6c13e3aaa5a917906869ce2374', class: "card-balance" }, this.balance)), h("i", { key: 'a34c39ad08dae5db0ffa5fa83c6ecdba93f1bdfe', class: "material-icons  material-symbols-outlined", "data-icon": "wifi", "aria-hidden": "true" })), h("div", { key: '1caa2ae652a14b05e5828cb1b3fd1d1e2b78b85b', class: "dda-credit-card-body" }, h("div", { key: '55cc44f1ce829323137502046532abe064a8b965', class: "card-userinfo" }, h("span", { key: '1ee27124010b192c9293a5acb426fee61397a94a', class: "dda-card-name" }, this.name), h("span", { key: '10ae6448934cc9a87fdf546d4f9638f7fcfdb2d6', class: "dda-card-number" }, "**** ", String((_a = this.card_number) !== null && _a !== void 0 ? _a : '').slice(-4))), h("div", { key: '16eb95f19d3f14351b6b0d6785cf725f3b66107d' }, this.card_type && h("img", { key: '2c47a85a00f4c76627454b50af7c8d3439b44f7f', src: this.card_type, alt: "Card Type", class: "card-type-icon" }))))));
     }
     static get is() { return "dda-credit-card"; }
     static get originalStyleUrls() {

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

@@ -60,7 +60,7 @@ export class DdaDropdown {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'bf03f2ba1112640fe78d06d03e47f272254c907c' }, h("div", { key: '93dcd182e8d9d21079de10032e3018c4b29d8e6d', class: containerClass }, this.label && h("label", { key: 'c87131044dd15e7f5e367c2d16fd432df48e2fb1', id: labelId, class: "dda-input-label" }, this.label), h("div", { key: '1d9760da3e682a2c6bd2ee0f03ff209ccf3bf013', class: `dda-dropdown-container ${this.type}` }, h("button", { key: 'f6c9b87a4c89788a61842c4f88c9497f74d46847', ref: el => (this.buttonEl = el), id: id, name: this.arrow_button_name, "aria-label": this.aria_label || (this.icon_mode && !this.label ? this.toggle_button_label : undefined), "aria-labelledby": this.label && !this.aria_label ? `${labelId} ${id}` : undefined, "aria-expanded": this.isopen ? 'true' : 'false', type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleDropdown() }, h("i", { key: '41eb6fb6fda3a43afec9e08dd2b214dfee9326b8', class: `three-dots material-icons`, "aria-hidden": "true" }, this.isopen ? 'more_vert' : 'more_vert'), !this.icon_mode && h("span", { key: '2d9479e2bfe0b3b26c9f682e93dc74dc752c1cbe', class: "dda-dropdown-text" }, h("span", { key: '12d38b4a9136193a6bfd22702a63f53148be488d' }, this.selected || 'Select an option'), " ", h("i", { key: '5f5519fdffa58c242da0fd57969b6d2a5a1ca7c2', class: `material-icons`, "aria-hidden": "true" }, this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'))), this.isopen && (h("div", { key: 'c30fef790cb1491862968ce37a32d40bb4b57da1', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", name: this.dropdown_button_name, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '915e4f6b3496723fe5cc31b094faee536266245b', class: "dda-helper-text" }, this.helper_text), this.error && h("span", { key: 'efee45d7279f30e33e1d2afcaacb6f41aaaf248b', class: "dda-error-message" }, this.error))));
+        return (h(Host, { key: 'bf03f2ba1112640fe78d06d03e47f272254c907c' }, h("div", { key: '93dcd182e8d9d21079de10032e3018c4b29d8e6d', class: containerClass }, this.label && h("label", { key: 'c87131044dd15e7f5e367c2d16fd432df48e2fb1', id: labelId, class: "dda-input-label" }, this.label), h("div", { key: '1d9760da3e682a2c6bd2ee0f03ff209ccf3bf013', class: `dda-dropdown-container ${this.type}` }, h("button", { key: 'f6c9b87a4c89788a61842c4f88c9497f74d46847', ref: el => (this.buttonEl = el), id: id, name: this.arrow_button_name, "aria-label": this.aria_label || (this.icon_mode && !this.label ? this.toggle_button_label : undefined), "aria-labelledby": this.label && !this.aria_label ? `${labelId} ${id}` : undefined, "aria-expanded": this.isopen ? 'true' : 'false', type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleDropdown() }, h("i", { key: '521475a0f8c32f975b3bc6a197955dd4a2782a82', class: `three-dots material-icons`, "data-icon": this.isopen ? 'more_vert' : 'more_vert', "aria-hidden": "true" }), !this.icon_mode && h("span", { key: '96b3bd75c60cd575ffdfedec9068b752aece196e', class: "dda-dropdown-text" }, h("span", { key: '62ec30fc986348c8e54c3f7434868a37e32a3774' }, this.selected || 'Select an option'), " ", h("i", { key: '4ba645b6b92cc8d09b48b4d996a7b4edecf06a37', class: `material-icons`, "data-icon": this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down', "aria-hidden": "true" }))), this.isopen && (h("div", { key: '3f6ee846b072111aa271769a03b2312f355a85b2', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", name: this.dropdown_button_name, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '3333fad96211ab29a2c8c55bcbd8881ed070ea45', class: "dda-helper-text" }, this.helper_text), this.error && h("span", { key: '2652849c70294f9071432084a81a09854122b07e', class: "dda-error-message" }, this.error))));
     }
     static get is() { return "dda-dropdown"; }
     static get originalStyleUrls() {

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

@@ -281,7 +281,7 @@ export class DdaHeader {
     renderSearchInput(id, ref) {
         return [
             h("label", { htmlFor: id, class: "visually-hidden" }, this.searchText || 'Search'),
-            h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"),
+            h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "search", "aria-hidden": "true" }),
             h("input", { name: this.search_input_name || 'q', type: "text", id: id, placeholder: this.text(this.search_input_placeholder, this.searchText || 'Search'), enterkeyhint: "search", autocomplete: "off", ref: ref }),
         ];
     }
@@ -327,7 +327,7 @@ export class DdaHeader {
             { value: 'large', label: 'A+', handler: this.lgTexthandler },
             { value: 'small', label: 'A-', handler: this.smTexthandler },
         ];
-        return (h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, contrastTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, contrastTitle), h("form", null, h("fieldset", { class: "dda-theme-list" }, contrastDescription && (h("legend", null, h("p", { class: "mb-3" }, contrastDescription))), options.map(option => option.label ? (h("dda-radiobutton", { title_text: option.label, checked: this.selected_contrast === option.value, size: "sm", variants: "normal", supporting: "", group_name: group, input_id: `${option.id}${suffix}`, custom_class: "", component_mode: "", onClick: option.handler })) : null)))), readSpeakerLink && (h("div", { class: "dda-col-md-4 dda-accessibility-item" }, screenReaderTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, screenReaderTitle), screenReaderDescription && h("p", { class: "mb-3" }, screenReaderDescription), h("div", { class: "rs_skip rsbtn rs_preserve", id: `readspeaker_button1${suffix}` }, h("a", { href: readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: variant === 'desktop' ? 'L' : undefined, "aria-label": this.text(this.screen_reader_link_label, 'Listen to this page using ReadSpeaker') }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, textSizeTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, textSizeTitle), textSizeDescription && h("p", { class: "mb-3" }, textSizeDescription), h("div", { class: "d-flex dda-gap-4 dda-text-size-buttons" }, sizes.map(size => (h("dda-button", { button_color: this.selected_text_size === size.value ? 'default-primary' : 'default-secondary', icon_button_shape: "circle", custom_class: "", size: "lg", onClick: size.handler }, size.label)))))));
+        return (h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, contrastTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, contrastTitle), h("form", null, h("fieldset", { class: "dda-theme-list" }, contrastDescription && (h("legend", null, h("p", { class: "mb-3" }, contrastDescription))), options.map(option => option.label ? (h("dda-radiobutton", { title_text: option.label, checked: this.selected_contrast === option.value, size: "sm", variants: "normal", supporting: "", group_name: group, input_id: `${option.id}${suffix}`, custom_class: "", component_mode: "", onClick: option.handler })) : null)))), readSpeakerLink && (h("div", { class: "dda-col-md-4 dda-accessibility-item" }, screenReaderTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, screenReaderTitle), screenReaderDescription && h("p", { class: "mb-3" }, screenReaderDescription), h("div", { class: "rs_skip rsbtn rs_preserve", id: `readspeaker_button1${suffix}` }, h("a", { href: readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: variant === 'desktop' ? 'L' : undefined, "aria-label": this.text(this.screen_reader_link_label, 'Listen to this page using ReadSpeaker') }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "volume_up", "aria-hidden": "true" }))))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, textSizeTitle && h("h2", { class: "dda-fs-body-lg dda-fw-700 mb-1" }, textSizeTitle), textSizeDescription && h("p", { class: "mb-3" }, textSizeDescription), h("div", { class: "d-flex dda-gap-4 dda-text-size-buttons" }, sizes.map(size => (h("dda-button", { button_color: this.selected_text_size === size.value ? 'default-primary' : 'default-secondary', icon_button_shape: "circle", custom_class: "", size: "lg", onClick: size.handler }, size.label)))))));
     }
     // A tooltip must have text, so an empty tooltip attribute falls back to the default.
     tooltip(value, fallback) {
@@ -347,7 +347,7 @@ export class DdaHeader {
         const id = this.accessibility_button_id ? (variant === 'desktop' ? this.accessibility_button_id : `${this.accessibility_button_id}-sidemenu`) : undefined;
         const iconClass = this.accessibility_button_icon_family || 'material-icons  material-symbols-outlined';
         const buttonClass = variant === 'desktop' ? 'tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn' : 'tool-btn accessibility-btn';
-        return (h("button", { id: id, name: variant === 'desktop' ? this.toggle_accessibility_button_name : this.accessibility_button_name, class: buttonClass, type: "button", "aria-expanded": this.usePredesignedAccessibilityMenu ? (this.isAccessibiltyOpen ? 'true' : 'false') : undefined, onClick: this.toggleAccessibilty }, h("i", { class: iconClass, "aria-hidden": "true" }, this.accessibility_button_icon_name || 'accessibility'), h("span", { class: "visually-hidden" }, this.text(this.accessibility_button_text, 'Accessibility'))));
+        return (h("button", { id: id, name: variant === 'desktop' ? this.toggle_accessibility_button_name : this.accessibility_button_name, class: buttonClass, type: "button", "aria-expanded": this.usePredesignedAccessibilityMenu ? (this.isAccessibiltyOpen ? 'true' : 'false') : undefined, onClick: this.toggleAccessibilty }, h("i", { class: iconClass, "data-icon": this.accessibility_button_icon_name || 'accessibility', "aria-hidden": "true" }), h("span", { class: "visually-hidden" }, this.text(this.accessibility_button_text, 'Accessibility'))));
     }
     renderDropdown(item, index) {
         const id = this.menuPanelId(index);
@@ -380,7 +380,7 @@ export class DdaHeader {
         return `${this.searchId}-submenu-${index}`;
     }
     renderMega(item, index) {
-        return (h("div", { id: this.menuPanelId(index), class: `megamenu-content ${this.activeMenuIndex === index ? 'showSubMenu' : ''}`, style: { display: this.activeMenuIndex === index ? 'block' : 'none' } }, h("div", { class: "megamenu-item dda-container" }, h("div", { class: "dda-row" }, item.columns.map((column, columnIndex) => (h("div", { class: "dda-col-md-3", key: columnIndex }, column.title && h("h3", { class: "mega-menu-title" }, column.title), h("ul", null, column.links.map((link, linkIndex) => (h("li", { key: linkIndex }, h("a", { class: "megamenu-link", href: link.href }, h("span", { class: "dda-btn btn-color-onsurface-secondary btn-size-sm icon-btn-default" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, link.icon)), h("span", { class: "text-wrap" }, h("span", { class: "title-text dda-fs-body-lg dda-fw-700" }, link.label), link.description && h("span", { class: "dda-fs-tagline-lg dda-fw-400" }, link.description))))))))))), h("button", { name: "close-mega-menu", class: "close-btn close_mega-menu", "aria-label": "Close Sidebar", onClick: () => (this.activeMenuIndex = null) }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close")))));
+        return (h("div", { id: this.menuPanelId(index), class: `megamenu-content ${this.activeMenuIndex === index ? 'showSubMenu' : ''}`, style: { display: this.activeMenuIndex === index ? 'block' : 'none' } }, h("div", { class: "megamenu-item dda-container" }, h("div", { class: "dda-row" }, item.columns.map((column, columnIndex) => (h("div", { class: "dda-col-md-3", key: columnIndex }, column.title && h("h3", { class: "mega-menu-title" }, column.title), h("ul", null, column.links.map((link, linkIndex) => (h("li", { key: linkIndex }, h("a", { class: "megamenu-link", href: link.href }, h("span", { class: "dda-btn btn-color-onsurface-secondary btn-size-sm icon-btn-default" }, h("i", { class: "material-icons material-symbols-outlined", "data-icon": link.icon, "aria-hidden": "true" })), h("span", { class: "text-wrap" }, h("span", { class: "title-text dda-fs-body-lg dda-fw-700" }, link.label), link.description && h("span", { class: "dda-fs-tagline-lg dda-fw-400" }, link.description))))))))))), h("button", { name: "close-mega-menu", class: "close-btn close_mega-menu", "aria-label": "Close Sidebar", onClick: () => (this.activeMenuIndex = null) }, h("i", { class: "material-icons material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" })))));
     }
     render() {
         const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
@@ -388,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: '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) => {
+        return (h("header", { key: 'deabd1899726be63cdbab4a3f5f3ebe8f434733d', class: "dda-header" }, h("div", { key: '8bb231b293acfeada8731d6e1b15e6635a4eb9f9', class: "dda-head-logo" }, this.firstLogoSrc && (h("a", { key: '6b37e44832f3042f52354362bb58b0c1b78b013c', href: this.firstLogoHref, class: "govt-logo" }, h("img", { key: '9f6aa270e3cb98af891e6321cb42af1a0cd64139', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }), h("img", { key: 'f74ecebeed4613af4e230052dff85a736c52cdb3', class: "logo-white", src: this.firstLogoWhiteSrc || this.firstLogoSrc, alt: this.firstLogoAlt }))), this.secondLogoSrc && (h("a", { key: '4f30c048e77d7c9705e1036d30fef56dbc0093fe', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '2701cebc3a7492afe999e1ef75b9158cdaba6e06', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '2c03c14b79ce0664ea31da2f8d360fe1ff10a3a2', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt })))), h("div", { key: 'a699b0a548d94e3579557a50c7b84a3effa1bb22', class: "dda-menu-container" }, h("div", { key: 'ecd05b79e69e0879657cf25cfc358e17c693dd1e', class: "dda-main-navigation" }, h("div", { key: '98c159741b5c9306531163955c7347ce290f5082', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '3fd007f9122413a22b7e6df8e0a279c8cdac5ab2', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: 'd9baa7f0cf99e6ee1decbcb63c0431e0a6dcc251', title_text: this.tooltip(this.menu_button_label, 'Menu'), position: "top", class: "d-block" }, h("button", { key: 'd298a6a3f09d3b3a01e61539cddb6c0f79b9cca7', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '8fecb523c63a077fee30115d039a39318736558e', class: "hamburger-line" }), h("span", { key: 'a5091aa8601d353b11f09bfc2334dec496487650', class: "hamburger-menu-text" }, this.menu_button_label)))), h("div", { key: '6b09381b7502df582679e2ed083cae2127408e9e', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '1c9e91619eed62edd19c9016494c7383cb925365', class: "dda-sidemenu-content" }, this.text(this.sideMainMenuTitle, 'Quick Links') && h("p", { key: 'ab4878e64868b0280a6b04fe276bd05b960f6a95', class: "dda-side-nav-title" }, this.text(this.sideMainMenuTitle, 'Quick Links')), h("ul", { key: '04e55270ddc339e82a12f8bd4cfc95b2339280ec', 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) {
@@ -397,13 +397,13 @@ export class DdaHeader {
                     }
                 } }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
         })), !this.hideOtherMenu && otherMenuItems.length > 0 && [
-            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) => {
+            this.sideOtherMenuTitle && h("p", { key: '884a62cbe5877477db0fadfb4c3cb68d2b8f73b4', class: "dda-side-nav-title" }, this.sideOtherMenuTitle),
+            h("ul", { key: '3cbbef9f5e93e047133c91decf3a15a556f712c4', 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: 'ce2fc2d47256e2892b0237d1bf766a2f84db1476', class: "dda-sidemenu-bottom" }, h("div", { key: '95615b88257e3f908f656aa2e40af00d7df6bf9a', class: "dda-sidemenu-gov-logo" }, this.firstLogoSrc && (h("a", { key: '17074817b923cd3b501052558ba39e0e00cb1b6d', href: this.firstLogoHref, class: "govt-logo mb-2" }, h("img", { key: '34bd6446107bf0f39995e1e06a561c2289a0c2a1', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt })))), h("div", { key: '6c0d05e8cbe098f5e0b3d80ca435adcad48eff95', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'b14a6444926c8aa883110f5cdc6ac45027e0aca4' }, h("li", { key: '413eb7bf0e8cb85ef209da916564ad27242e07f4' }, this.renderAccessibilityButton('mobile')), this.languageLabel && (h("li", { key: '80ee163996108f0ef2c2e4f1ef591b0d1bf8ddf9' }, h("button", { key: 'd0e0836af7de557d80a60c4b2139bdcffbb5f338', 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: '7cae29029eb5557eb83ee7f72ea8156993b9a798' }, h("dda-link-button", { key: '963ee8cd2632dc4c87c598717479668b3f62d61a', 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: 'e69eebb31ab86f6435fb06fbdd229ebb0e5efc8e', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: 'e22f223418c4fa289fab6107a0d9867c3e40332e', class: "material-icons  material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" })), this.usePredesignedAccessibilityMenu && (h("div", { key: '1d8abdea8babf2da4429cf0fcef0298359cdbb0f', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, this.renderAccessibilityColumns('mobile'), h("button", { key: 'fb35894602825d20da2b5a10f28be4c202ee7c11', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: 'e8c651f5bee10b1efd1a7e3e98f5b61910b9cf25', class: "material-icons  material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" }))))), h("div", { key: '9f57fb611621e8351ccb4176b44ad7997bec7fec' }, h("ul", { key: '779bf3f8acd915103e69fe60e4c2566bb795ef19', 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: '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)))))))));
+        })))), h("div", { key: '7935e4f05fe7eafeea836f79d2a95d26cf522c3d', class: "dda-mobile-entt-logo" }, this.secondLogoSrc && (h("a", { key: '1650e44875e454929ba4d8277e1e31a8763337fb', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '99e7641592b5094778de25be8dd7a135cdc5dfe4', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '4b40a8c923f3760007a4402bba218d9107bdd482', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt })))), h("div", { key: '09470e618e42b46a2e8771a99179909f9d137037', 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", "data-icon": "search", "aria-hidden": "true" }))) : (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", "data-icon": "search", "aria-hidden": "true" })))), !this.mobileMenuSearchUrl && (h("div", { key: '0c5956c618d4e6aae5afc328f79f2bdcbd4c79cd', id: `${this.searchId}-mobile-panel`, class: "dda-mobile-search-panel", hidden: !this.isSearchOpen }, h("form", { key: '52e68ace5fc74162d311e01e61451440c6acad42', 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: '72d4b8e2f1efd7e6f662f6606f364021dc591674', type: "button", class: "dda-mobile-search-close", "aria-label": "Close search", onClick: this.closeMobileSearch }, h("i", { key: 'b34adaef70dad659de564b3f9beb94d632527c49', class: "material-icons  material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" }))))), h("div", { key: '511f6fc86dbd3d9ba39ba6ff98429bd928a9dccc', class: "dda-toolbar-menu" }, h("ul", { key: '68918e8d8089a9431c341fa70c937e70c7b1ff04' }, h("li", { key: 'fd197a481f4630c27be4e520274279621b993457' }, h("dda-tooltip", { key: '6eed055850a5f30ab3a75e819b59b325b7f82ec3', title_text: this.tooltip(this.search_tooltip, 'Search'), description: "", position: "top" }, h("form", { key: 'c7242bd4764057428c04666eed0d487d5706dac9', 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: 'dfc62417e9ddfac19b01d047a655c41e30db010f' }, h("dda-tooltip", { key: '5137c9a541e25b60e9f2a7536025450251913c89', title_text: this.tooltip(this.accessibility_tooltip, 'Accessibility'), position: "top" }, this.renderAccessibilityButton('desktop')), this.usePredesignedAccessibilityMenu && (h("div", { key: '867ebd02e73e0c64563c313d20140bf09c3f16de', class: "dda-accessibility-wrap" }, h("div", { key: '4baa0dff159b0978438d8afbbbf66791a35c5328', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, this.renderAccessibilityColumns('desktop'), h("button", { key: 'ba02a14893f475b37615e1baf5b92646dbc9988c', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: 'de12fd37575d9baf54b75640854dbb0529ad2ccc', class: "material-icons  material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" })))))), this.languageLabel && (h("li", { key: '710ae536b51aff5213b1e5dbf3dfa3ba8c7bbea8' }, h("dda-tooltip", { key: 'a253cf17100b056627433dac53b791c90547ee58', title_text: this.tooltip(this.language_tooltip, 'Language'), position: "top" }, h("dda-button", { key: '91df1dbc9a21d6573fb90fb304057c000985867b', 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: '56302f6c1ebb43cdf2ba9a082f47bd3c2bc4a44f' }, h("dda-tooltip", { key: '14b7a7aaad32c6f9fca8726febc714b2e4895d3f', title_text: this.tooltip(this.login_tooltip, this.loginLabel), position: "top" }, h("dda-link-button", { key: 'c191705bf303c8005bac685d0dadfe9772f91160', 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() {

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

@@ -78,7 +78,7 @@ export class DdaHomeBanner {
         this.el.addEventListener('focusin', this.onFocusIn);
         this.el.addEventListener('focusout', this.onFocusOut);
         // Focusing an offscreen slide makes the browser scroll the overflow:hidden
-        // host; that scrollLeft would stack with the `left` offset and skew the track.
+        // host; that scrollLeft would stack with the track's offset and skew it.
         this.el.addEventListener('scroll', this.resetScroll);
         if (typeof window !== 'undefined' && window.matchMedia) {
             this.motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -187,10 +187,10 @@ export class DdaHomeBanner {
     render() {
         const total = this.slides.length;
         const showAutoplayToggle = this.autoplay && !this.reducedMotion;
-        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) => {
+        return (h(Host, { key: 'b44f97d40de4ca00fd453ecdbc1dc5e63eb9861b', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: 'b1df501d522547316e89b66de705b5377e671ea0', class: "dda-slider-container" }, h("div", { key: '9d1b62a36c363f03f97fa27175f730dcb117e932', class: "dda-slides", style: { width: total * 100 + 'vw', 'inset-inline-start': this.currentSlide * -100 + '%' } }, h("slot", { key: 'a2f04944405c0dccf27a6481a916aa0831bff554' })), h("div", { key: 'c2216fbdf8a5c770d30d0ce1e7a582f1769bff8d', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: 'cfea91bf7fc4765038588a52fc489b691fcacddc', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: '1be8e89321e4e5e836f912e22910d7cb6d008d60', class: "material-icons", "data-icon": this.isPaused ? 'play_arrow' : 'pause', "aria-hidden": "true" }))), h("button", { key: 'fdd4e4854bea3c74cd1a8d60626408142279b0f2', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: 'ce10999eda624b545c58aa77acf8d2287d8bf9d7', class: "material-icons", "data-icon": "chevron_left", "aria-hidden": "true" })), h("ul", { key: '6a5278a2ba1c520948c76d0cef5d1f90aab4714f' }, 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: '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) : ''))));
+        })), h("button", { key: 'a40f72d1120393c8fa09acc0b6e471736c7ac7a9', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: '5b8145de20889c93a951670ee457fee4ea2a953c', class: "material-icons", "data-icon": "chevron_right", "aria-hidden": "true" })), this.show_scroll_icon && (h("div", { key: '5cf3bb77d93f601dd92b33051ccdac4466dff15b', class: { 'dda-mouse-scroll': true, 'dda-mouse-scroll-mobile': this.show_scroll_icon_mobile }, "aria-hidden": "true" }, h("dda-scroll-icon", { key: 'fad1b364e835631fff3587c7ff4401499ac25676', scroll_icon_size: "sm", scroll_icon_color: "white" })))), h("div", { key: 'e65513556b5eda84fe01c36fc3682a8bfde6e97c', 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/home-banner.css

@@ -79,7 +79,7 @@
 
 .home-slider .dda-slides {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   height: 100vh;
   display: flex;
@@ -265,4 +265,39 @@
   .home-slider[dir='rtl'] .slide-wrap {
     background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
   }
-}
+}
+/* Short screens: a laptop zoomed past about 115% (WCAG 1.4.10 asks for 400%, which turns a
+   1280x800 window into 320x200 CSS pixels), or a phone on its side. A full-height banner with the
+   controls and the quick-link cards at fixed offsets from its bottom cannot fit the slide text, so
+   the controls covered it. Here the banner grows with its text, at least the screen's height, and
+   the controls sit in the space kept for them under the text. The cards follow the banner, below
+   it (dda.css). */
+@media screen and (max-height: 700px) {
+  .home-slider .dda-slider-container,
+  .home-slider .dda-slides,
+  .home-slider slide,
+  .home-slider .dda-slide,
+  .home-slider .slide-wrap {
+    height: auto;
+  }
+  /* In flow, so the banner is as tall as its tallest slide. inset-inline-start still moves it. */
+  .home-slider .dda-slides {
+    position: relative;
+  }
+  .home-slider .slide-wrap {
+    box-sizing: border-box;
+    min-height: 100vh;
+    /* Clear of the fixed header (see scroll-padding-top in dda-header.css), and room below the
+       text for the controls: their 30px height and 16px either side, above the sticky footer bar. */
+    padding-top: 170px;
+    padding-bottom: calc(30px + 32px + var(--dda-sticky-footer-height, 0px));
+  }
+  .slider-nav {
+    bottom: calc(16px + var(--dda-sticky-footer-height, 0px));
+  }
+}
+@media screen and (max-height: 700px) and (max-width: 767px) {
+  .home-slider .slide-wrap {
+    padding-top: 100px;
+  }
+}

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

@@ -35,7 +35,7 @@ export class DdaLinkButton {
         ].filter(Boolean).join(' ');
         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: '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))));
+            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '971fb9efa4fa3e52172ae5d4bbb13cc83626a977', class: "material-icons  material-symbols-outlined", "data-icon": this.start_icon, "aria-hidden": "true" }), h("slot", { key: '7ac1833f22c55069157faf64cc1b1cc71a826639' }), this.end_icon && h("i", { key: '05b68025aa09ffe0d0764f61f0564eda2b034a26', class: "material-icons  material-symbols-outlined", "data-icon": this.end_icon, "aria-hidden": "true" }))));
     }
     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: '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))));
+        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: '7aa1c78e6e2952602e6369cd228b67bebd2ddabe', class: `material-icons`, "data-icon": this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down', "aria-hidden": "true" })), this.isCurrencyDropdownOpen && (h("div", { key: 'efe7db1c427786b9a4369eee9bf3731e1bafdee1', 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: '2e237ae42824530bc0a56fe92fa9bd4a36a2f6f9', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '4cd769405fb606adc60d4f05e59dfee2af26f8d9', 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

@@ -34,17 +34,17 @@ export class DdaPagination {
     renderPagination() {
         switch (this.type) {
             case 'simple-slider':
-                return (h("div", { class: `dda-pagination dda-pagination-simple-slider ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.simple_slider_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back"), " Prev"), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.simple_slider_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-simple-slider ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.simple_slider_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_back", "aria-hidden": "true" }), " Prev"), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.simple_slider_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_forward", "aria-hidden": "true" }))));
             case 'buttons':
-                return (h("div", { class: `dda-pagination dda-pagination-buttons ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back"), " Prev"), this.renderPageButtons(), h("button", { name: this.buttons_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-buttons ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_back", "aria-hidden": "true" }), " Prev"), this.renderPageButtons(), h("button", { name: this.buttons_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_forward", "aria-hidden": "true" }))));
             case 'text':
-                return (h("div", { class: `dda-pagination dda-pagination-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.text_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_back", "aria-hidden": "true" })), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.text_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_forward", "aria-hidden": "true" }))));
             case 'text-pages':
-                return (h("div", { class: `dda-pagination dda-pagination-text-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_pages_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), this.renderPageButtons(), h("button", { name: this.text_pages_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-text-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_pages_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_back", "aria-hidden": "true" })), this.renderPageButtons(), h("button", { name: this.text_pages_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_forward", "aria-hidden": "true" }))));
             case 'button-text':
-                return (h("div", { class: `dda-pagination dda-pagination-button-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.button_text_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), this.renderPageButtons(), h("button", { name: this.button_text_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-button-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.button_text_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_back", "aria-hidden": "true" })), this.renderPageButtons(), h("button", { name: this.button_text_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_forward", "aria-hidden": "true" }))));
             case 'buttons-pages':
-                return (h("div", { class: `dda-pagination dda-pagination-buttons-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_pages_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), h("button", { name: this.buttons_pages_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-buttons-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_pages_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_back", "aria-hidden": "true" })), h("button", { name: this.buttons_pages_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "data-icon": "arrow_forward", "aria-hidden": "true" }))));
             case 'full':
                 return (h("div", { class: `dda-pagination dda-pagination-full ${this.custom_class} ${this.component_mode}` }, this.renderPageButtons()));
         }
@@ -63,7 +63,7 @@ export class DdaPagination {
         }
     }
     render() {
-        return (h(Host, { key: '0f40ad0977ba2b432dc8c35710fdbb837baab840' }, h("div", { key: 'b0547a0b3a83292ff9714650b21acebc7051e9fa', class: `dda-pagination-container` }, this.renderPagination())));
+        return (h(Host, { key: '1325f6a54e8c21bfb36f2838a564bbfccfc191b8' }, h("div", { key: '020a1c7d15f52464aa59ea51e9fcbe366dcabcb0', 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: '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))));
+        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: '2ffcea5d93625825ad3ec0c8459f4620d61fd925', class: `material-icons`, "data-icon": this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down', "aria-hidden": "true" })), this.dropdown_open && (h("div", { key: 'cdcca2354cc3df6aa2ef475f172d8363405cd7d6', 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: '76dacc527fab6113d6ca0c6529c9d206b9abe798', 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: 'cdc09ebc4a61be4c0843e1add80080ed58f45f52', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'b52a70d85efca4ad9fa0399b2bd1113c38f386ef', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-phonefield"; }
     static get originalStyleUrls() {