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

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

@@ -24,6 +24,8 @@ export default {
         pause_button_label: { control: 'text', description: 'Accessible name for the pause button' },
         play_button_label: { control: 'text', description: 'Accessible name for the play button' },
         slide_button_label: { control: 'text', description: 'Prefix for each dot’s accessible name' },
+        show_scroll_icon: { control: 'boolean', description: 'Show the decorative scroll icon after the slide controls' },
+        show_scroll_icon_mobile: { control: 'boolean', description: 'Also show the scroll icon at 992px and below' },
     },
     parameters: {
         docs: {
@@ -64,6 +66,8 @@ const Template = args => `
     pause_button_label="${args.pause_button_label}"
     play_button_label="${args.play_button_label}"
     slide_button_label="${args.slide_button_label}"
+    show_scroll_icon="${args.show_scroll_icon}"
+    show_scroll_icon_mobile="${args.show_scroll_icon_mobile}"
   >
     ${slide(IMG_1, 'Aerial view of Dubai at sunset', 'Digitalizing Life In Dubai', 'Pioneering and accelerating the pace of digital transformation in the city')}
     ${slide(IMG_2, 'Dubai skyline at dusk', 'Explore More', 'Find the services you need')}
@@ -78,6 +82,8 @@ const defaultArgs = {
     pause_button_label: 'Pause slideshow',
     play_button_label: 'Play slideshow',
     slide_button_label: 'Go to slide',
+    show_scroll_icon: true,
+    show_scroll_icon_mobile: false,
 };
 export const Default = Template.bind({});
 Default.args = Object.assign({}, defaultArgs);

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

@@ -160,6 +160,13 @@
   height: 25px;
   overflow: hidden;
 }
+
+.slider-nav .dda-mouse-scroll {
+  display: flex;
+  align-items: center;
+  margin-inline-start: 8px;
+}
+
 .slider-nav ul {
   display: flex;
   align-items: center;
@@ -208,6 +215,9 @@
   .slider-nav {
     bottom: 100px;
   }
+  .slider-nav .dda-mouse-scroll:not(.dda-mouse-scroll-mobile) {
+    display: none;
+  }
 }
 /* On taller small screens the quick-link cards sit on the banner (dda.css), so the controls sit
    16px above them. The two custom properties are the cards' gap above the bar and their height. */

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: 'b36592f3d8f701d0adf836057c3d3d2073ad64e6' }, h("div", { key: 'f5f37555cc31612fe697cfe4a26aacb273a76acb', class: inputClass }, this.label && h("label", { key: '54f1595fd236e6987e6b347dcecff8c95562e4e7', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: '36a393c6dba904336066803822a3efcf0e02ffae', "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: '9ddd9e935c97814b24d238f44f5d73fc232e5c5a', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '7c3f9642076e69314f2356fb9ad471f75b2b1f08', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        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))));
     }
     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: 'e0f1c7a305ff72f3eadf337585da8021e18e4571' }, h("a", { key: 'f2e280df14c0114c54d6e744651bcdfee022b66d',
+        return (h(Host, { key: '2e046f0acf81a0794343eeed591da1dc410222a7' }, h("a", { key: 'f0cc2585726e2a4e081dda080edde3894a9f6ab2',
             //   type={this.type}
-            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '190f9273d127bcf6a9b20882fda5a08d3c4c065b', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: 'ec486bf4bd3b3aee2edf30df7f0677f76f090792' }), this.end_icon && h("i", { key: '0f295c677268f3751175800553566d39a2bc5e59', 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: '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))));
     }
     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: 'f624d00bd4b5e0c29cdf713f837a83be852e8c30' }, h("div", { key: 'bdcbc45802ac76a5b59eecc57514ddfaa29235a7', class: containerClass }, this.label && h("label", { key: '02ef6553822c0a1b9fafc7ccff2038e200e00715', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'f0c13e421c9de5d60b815efc709f5021ee9b2509', class: "dda-input-field-group dda-number-field" }, h("input", { key: '09a73be6481a4285520150c3f4541a43bc2db872', 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: '26db621e11ca058e3758144a20508483dcf33394', class: "dda-input-dropdown-btn" }, h("button", { key: '9ec16119661ba40362ab85c65f2f108ea5dcafff', 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: '5ed1789d07a7e70bb8e903e2d9c4ee969ea19a75', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '1f212a2cc5a4d71e8d8c463fc10b1ea828b66630', 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: '038ad7c3098d0353d63a85e5fa224c084ec9989f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '743f363599d29ff486146638e406053197328204', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        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))));
     }
     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: '3b11664484e9c91e045896687bce2b2f645c7947' }, h("div", { key: 'e9a932aaa1c53285520a54d2a66d115a86479817', class: `dda-pagination-container` }, this.renderPagination())));
+        return (h(Host, { key: 'df2d0d06768da20cb3abb0321ab530e5843e1926' }, h("div", { key: 'c3eb73ffd96039d3a979fef9f7c750de725c3a9f', 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: '1971e802b7da8e880d20b7e8f11d0b31f1beefc3' }, h("div", { key: 'b7bfc5d49a4d3eb00ded844be34efccaf5864da7', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: 'f53f699392cf4f471f69277f29f6060ae794c826', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '7f805e90bccd3a560eb9a93b6c954a2f1b9b9d60', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'feb946112770887a9c249b87c47f62651613eb85', class: "dda-input-dropdown-btn" }, h("button", { key: 'e9800cd1a4ae37a887e499f29f34c7dad3afd6c3', 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: '94638c0703e46eb7c56557e2480bfa14ca0d1e26', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '2c7fe54aa11ecc2d3cfffc8960b21cf3b884aa4d', class: `material-icons`, "aria-hidden": "true" }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: 'ed81296b81e4fe2fb6def30f03b1ef47c542921d', 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: '33aacdf8a564316fe1eebc7b8f5897d051e95263', 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: '4022e0e244728725e57d7c8b3bc9f63dcc8f019d', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '93e0cce65d8fde351b2e031b3ad0be723a7804ec', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        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))));
     }
     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: '097789c9ac738134268e473677410f6966fb2a2e' }, h("div", { key: '7822aa7f33639e49e37248201458931b0418c6a3', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'a26c90a915992100c6c1b7763bf40fc86b7786fd', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '4c4945e57ffe790edc31d2787fd2ad89f9292cbb', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '978a8fcfd4101ebe52bf1d2fbc4d0276171bb751', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'ee75db5f57bb41d78cc3cd3e0eecc63520637bec', class: "dda-percentage-text" }, 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, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {

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

@@ -3028,23 +3028,43 @@ body {
     width: calc(100% - 32px);
 }
 
+/* The mega menu opens under its own link, like the 3.x dropdown (.dda-default-submenu), and is as
+   wide as its columns. When it does not fit there, dda-header sets --dda-mega-shift to flip it back
+   toward the start of the nav, or to clamp it inside the screen (alignMegaPanel). */
 .megamenu-content{
     display: none;
-    width: 100%;
-    padding: 0 15px;
-    position: fixed;
-    top: 150px;
-    left: 0;
+    width: max-content;
+    max-width: calc(100vw - 32px);
+    padding-top: 5px;
+    position: absolute;
+    top: 100%;
+    inset-inline-start: var(--dda-mega-shift, 0px);
+    z-index: 1;
 }
 .megamenu-item{
     min-height: 350px;
     background: var(--dda-surface-100);
     border-radius: 8px;
-    margin: 0 auto;
+    margin: 0;
     padding: 42px 15px;
     box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
     position: relative;
 }
+/* .megamenu-item also has .dda-container; the panel is not a page-wide container. Its height comes
+   from its links, and the end padding keeps the close button clear of the column titles. */
+.megamenu-content .megamenu-item.dda-container{
+    width: auto;
+    max-width: none;
+    min-height: 0;
+    padding-block: 32px 16px;
+    padding-inline-end: 64px;
+}
+/* Fixed-width columns: percentage columns (.dda-col-md-3) have no width to take in a max-content panel. */
+.megamenu-content .dda-row > [class*='dda-col-']{
+    flex: 0 0 300px;
+    width: 300px;
+    max-width: 300px;
+}
 .megamenu-item .mega-menu-title{
     height: 24px;
     font-size: var(--dda-fs-body-lg);
@@ -3203,6 +3223,11 @@ body {
 .dda-search input[type="text"]::placeholder{
     color: var(--dda-on-surface-0);
 }
+/* On the transparent header the typed text and the caret are white, like the placeholder. */
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"] {
+    color: var(--dda-neutral-100);
+    caret-color: var(--dda-neutral-100);
+}
 .transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-neutral-100);
 }

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: 'c324fbb5277d318a4f6550f18950ed02cbd0b781' }, h("div", { key: 'dd31d4f163976c7341aceeea2b6fa2a3b2f09ad4', class: radiobuttonClass }, h("input", { key: '920ff8e75067733041c6868bb90556a801a1040c', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '7fe73646f3a9f87aa17fba687dd90b06be9277fc', htmlFor: this.input_id }, h("span", { key: 'f8113a4da08152bd0a61ca72e20dfc520d4c561d', class: "radio-circle" }), h("p", { key: 'e08ad9c71518a60081c8ea1ab688e497cb6c7b1f' }, h("span", { key: 'e38e4b2fc129edf82b4a603acf753c9c3afbbb1b', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: '0c5f35d22f5db9af755f8056e0f14e6a0e694ceb', class: "radio-supporting" }, this.supporting))))));
+        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))))));
     }
     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: '1af601923e27b7c62ef97b8a5199f71003f46a46' }, h("div", { key: '69d46d14321399d2d5e39969a211953c6a87a9a1', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'fbfecb4cc371d29c862f9408f8af579f05149561', class: "dda-range-slider" }, h("div", { key: '7bc922c71312956eb782250e3e9425d0494996b4', class: "dda-range-slider-track", style: {
+        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: {
                 left: `${this.getPercentage(this.min_value)}%`,
                 right: `${100 - this.getPercentage(this.max_value)}%`,
-            } }, h("span", { key: 'ec67480ab23cca5d2e905ee6b04c7cea3c2fcb17', class: "min-label" }, this.min_value, "%"), h("span", { key: '77d4387ab709f62f4b97fc1d6c49f0821a10145e', class: "max-label" }, this.max_value, "%")), h("span", { key: '2c455e418dfc1d4716364424fad33565ae65a503' }, h("input", { key: 'c87f18613d6b4e92c100587a340e96a7ea66474e', 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: '1b59740d95af2396e7183d250edff76ab8641156' }, h("input", { key: 'c88c8f1358767b3a00b5144c4e689f6e553ebbd7', 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: '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}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,72 @@
+dda-scroll-icon {
+  display: inline-flex;
+}
+.dda-scroll-icon-scroll {
+  border-style: solid;
+  border-radius: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+.scroll-icon-size-sm {
+  width: 16.5px;
+  height: 24px;
+  border-width: 2px;
+}
+.scroll-icon-size-lg {
+  width: 40px;
+  height: 60px;
+  border-width: 4px;
+}
+.scroll-icon-color-white {
+  border-color: #ffffff;
+}
+.scroll-icon-color-black {
+  border-color: #000000;
+}
+.dda-scroll-icon-scroll-dot {
+  border-radius: 50%;
+}
+.scroll-icon-color-white .dda-scroll-icon-scroll-dot {
+  background: #ffffff;
+}
+.scroll-icon-color-black .dda-scroll-icon-scroll-dot {
+  background: #000000;
+}
+.scroll-icon-size-sm .dda-scroll-icon-scroll-dot {
+  width: 4.5px;
+  height: 4.5px;
+  transform: translateY(2px);
+}
+.scroll-icon-size-lg .dda-scroll-icon-scroll-dot {
+  width: 12px;
+  height: 12px;
+  transform: translateY(5px);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-icon-size-sm .dda-scroll-icon-scroll-dot {
+    animation: dda-scroll-icon-sm var(--animation-duration, 1.8s) infinite;
+  }
+  .scroll-icon-size-lg .dda-scroll-icon-scroll-dot {
+    animation: dda-scroll-icon-lg var(--animation-duration, 1.5s) infinite;
+  }
+}
+@keyframes dda-scroll-icon-sm {
+  0%,
+  100% {
+    transform: translateY(2px);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+}
+@keyframes dda-scroll-icon-lg {
+  0%,
+  100% {
+    transform: translateY(5px);
+  }
+  50% {
+    transform: translateY(24px);
+  }
+}

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

@@ -0,0 +1,120 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from "@stencil/core";
+// A decorative "scroll down" mouse icon. It carries no information, so it is hidden from
+// assistive technology, and its dot moves only when the user has not asked for reduced motion.
+export class DdaScrollIcon {
+    constructor() {
+        /** Size: `sm` (16.5 × 24px) or `lg` (40 × 60px). Default: `sm`. */
+        this.scroll_icon_size = 'sm';
+        /** Colour: `white` or `black`. Default: `white`. */
+        this.scroll_icon_color = 'white';
+        /** Extra CSS classes on the icon. */
+        this.custom_class = '';
+    }
+    render() {
+        const className = [
+            'dda-scroll-icon-scroll',
+            `scroll-icon-size-${this.scroll_icon_size || 'sm'}`,
+            `scroll-icon-color-${this.scroll_icon_color || 'white'}`,
+            this.custom_class,
+            this.component_mode,
+        ]
+            .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" }))));
+    }
+    static get is() { return "dda-scroll-icon"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dda-scroll-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dda-scroll-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "scroll_icon_size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'lg'",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size: `sm` (16.5 \u00D7 24px) or `lg` (40 \u00D7 60px). Default: `sm`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll_icon_size",
+                "defaultValue": "'sm'"
+            },
+            "scroll_icon_color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'white' | 'black'",
+                    "resolved": "\"black\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour: `white` or `black`. Default: `white`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll_icon_color",
+                "defaultValue": "'white'"
+            },
+            "custom_class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra CSS classes on the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom_class",
+                "defaultValue": "''"
+            },
+            "component_mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme override class, e.g. `light-mode`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component_mode"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,17 @@
+export default {
+    title: 'Components/Scroll Icon',
+    tags: ['autodocs'],
+    component: 'dda-scroll-icon',
+    argTypes: {
+        scroll_icon_size: { control: 'select', options: ['sm', 'lg'], description: 'Size of the icon' },
+        scroll_icon_color: { control: 'select', options: ['white', 'black'], description: 'Colour of the icon' },
+    },
+};
+const Template = args => `
+  <div style="padding: 24px; background: ${args.scroll_icon_color === 'white' ? '#1d211b' : '#ffffff'};">
+    <dda-scroll-icon scroll_icon_size="${args.scroll_icon_size}" scroll_icon_color="${args.scroll_icon_color}"></dda-scroll-icon>
+  </div>`;
+export const Default = Template.bind({});
+Default.args = { scroll_icon_size: 'sm', scroll_icon_color: 'white' };
+export const LargeBlack = Template.bind({});
+LargeBlack.args = { scroll_icon_size: 'lg', scroll_icon_color: 'black' };

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: 'a04933a4ee9971b6ec7c072f53a6f1b4f065f2fe' }, h("div", { key: '5fe0c2752a3264b9d5c746a6f896b5e035db8a11', 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: 'a9e72000f00dcaaaaf868294a056b8b27d677994', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '304af511df79764b150ab91f50cfb161d47e9400', class: "dda-search-area dda-search-action" }, h("i", { key: 'bc6f44b62a7689f5885c6b6a7ccabfb93674b892', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: '972a383d29613793a37dfaa8aa47b34901db90ab', 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: '398e33adf066c9b80f8500628677ef3bd360c380', class: "dda-search-btngroup" }, h("button", { key: 'f46d5b85fc84154af0c30dfadb8e963bf08f01ee', 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: '333cc8bc389f34bd707a89a077e04ba43806128e', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.show_button && (h("button", { key: '75e608f7b78350d120442fa35cf6fa17e041806c', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: '58be16a63bd590a3cced76e83b3656d465c5eb1f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '39f6f55a3cda6eba1e919744094670d10dff78b6', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        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))));
     }
     static get is() { return "dda-search-input"; }
     static get originalStyleUrls() {