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

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

@@ -0,0 +1,24 @@
+const cards = [
+    { banner_card_href: '#', image_src: '', banner_card_title: 'About us', banner_card_description: 'Who we are and what we do' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Open data', banner_card_description: 'Download public data sets' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Partnerships', banner_card_description: 'Public and private projects' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Maliyoun', banner_card_description: 'Finance careers programme' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Services', banner_card_description: 'All services in one place' },
+];
+export default {
+    title: 'Components/Home Carousel',
+    tags: ['autodocs'],
+    component: 'dda-home-carousel',
+    argTypes: {
+        items_in_view: { control: { type: 'number', min: 1 }, description: 'Cards shown at once on wide screens' },
+        aria_label: { control: 'text', description: 'Accessible name of the card list' },
+    },
+};
+const Template = args => `
+  <div class="home-intros" style="position: relative; height: 480px; background: #1d211b;">
+    <div class="dda-home-quick-links-wrap"><div class="dda-home-quick-links">
+      <dda-home-carousel items_in_view="${args.items_in_view}" aria_label="${args.aria_label}" bannercardlist='${JSON.stringify(cards)}'></dda-home-carousel>
+    </div></div>
+  </div>`;
+export const Default = Template.bind({});
+Default.args = { items_in_view: 4, aria_label: 'Quick links' };

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: '98dd445b764af2df20af7e95dbc49ef74013e312' }, h("div", { key: '7a83ce0abcd733095f27d5c3275d31548acff4ae', class: inputClass }, this.label && h("label", { key: 'ddea5a3451bf37ce1c753d4bddb32cef4a2baa2e', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: 'b8c1062b1609e72c4b87f43c4ead4b63ce35262a', "aria-label": this.aria_label, id: id, name: this.input_name, type: this.type, autocomplete: this.autocomplete, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.helper_text && h("span", { key: 'af728d433f267c7e8c81e8b5894df4a17154faa7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '94ad0af0de6d1d02860e6432684b79ca137b61ad', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        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: '8dc6bd810c9049ea16753e583f3b2459d7be8dce' }, h("a", { key: '8f33348f1cb96c947671cd0041cdfae96f75ce8d',
+        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: '2f2a09f7aff30f48cc0e0bebbac6fb8747fec785', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: '7c8c764e2df42a872f8bd5123a8882f6ab30309c' }), this.end_icon && h("i", { key: 'e4892d4cd4b763d4ab306bd60f24b2f25a43ec59', 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: 'e8e821361d846cd52c01047c1f0648e719e96249' }, h("div", { key: '4141b53316b4dbcd60faa46cf2d2b1c374cef309', class: containerClass }, this.label && h("label", { key: '20593074d31733885d83733dc63cd41376d572dc', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '443763cfb3a895c30815e339cd81d5e9b6de2c3e', class: "dda-input-field-group dda-number-field" }, h("input", { key: '57ed90d585e5a2d4e0c9f39bb1fdb6356d7b50f7', 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: 'cd3c78d23ba19978c5b296731192f454db3e5906', class: "dda-input-dropdown-btn" }, h("button", { key: '74d7d3720fcb37122d60ce71155e234393824a26', 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: 'd2310ea5de9922de9dfab5bac39210921b1be971', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '77491f92b3c065987958c8a0aadead2c941b86be', 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: 'a3e3d37303fac4919afce9a7c6a892de4e8d2771', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'da1de1672834e28084e47eb3ae02b6d774b150de', 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: '4de1572ef7acf0cd89b620183a723f8f9598fdf9' }, h("div", { key: '1aad2deab4985aaa29e0cf31790a0e7f3587c0d5', 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: 'ed4636c58fceb5ee94ab0e643bef7c0d80a29e24' }, h("div", { key: '2fac5e6cf7529e1892453eaf0eae6eb49765802d', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: '3d5a0b67761684d04ac28984337598cc69239a89', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'c7934f67a0b4210164e9ba2b01f1f4b7f0456a0c', class: `dda-input-field-group dda-phone-field` }, h("div", { key: '57f327b669bd80efe824934f5580df54f6939381', class: "dda-input-dropdown-btn" }, h("button", { key: '645477fa36b62fb9b0495d58074b98db2d62beb4', 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: 'a7e82fcf47ae104a3c39aa97cc9c64cea1588070', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: 'b8e9482e942a69b252071d9286c9fa30ead4f2f9', class: `material-icons`, "aria-hidden": "true" }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: 'a71f7b95b1eb9682826645655191c27ec41740d7', 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: 'd8d4ad4c885b26f38ece5fe3ec91bc583d03af58', 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: 'facc14856c52b22330242c5f3a9ab17293232900', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '6b2d21965e9797235d757e1183799bcfa24b0461', 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: '9aba64a14f203bb1c33e1e062c5d4e7e7184c629' }, h("div", { key: '24696a000c26d6b8247b45503187440fa53a6c63', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'f04d35bf3f048585df20c365c716307e683bb77f', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '9bc2a539196b12d7579aa01f09a9d11f52bc91fd', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: 'd7267cd54ed3b09ab19dcbb8837e9620a1411e84', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'c0cd34956a817d6daa3fe526d961897194452cbe', 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

@@ -718,7 +718,7 @@
   --dda-quick-links-card-height-sm: 112px;
 }
 
-.quick-links-wrap {
+:is(.quick-links-wrap, .dda-home-quick-links-wrap) {
   width: 100%;
   position: absolute;
   /* dda-sticky-footer sets --dda-sticky-footer-height; the cards sit above the fixed bar.
@@ -742,7 +742,7 @@
 
 /* One row of cards. When the cards do not fit, the row scrolls sideways. A card cut at the edge,
    a fade on each edge with more cards, and a thin scrollbar show that the row scrolls. */
-.quick-links-wrap,
+:is(.quick-links-wrap, .dda-home-quick-links-wrap),
 .quick-links {
   /* Room inside the row for the hover lift (12px above) and the pointer (9px below);
      a scrolling box clips anything outside it. */
@@ -865,14 +865,14 @@
   .slide-content p {
     width: 100%;
   }
-  .quick-links-wrap {
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) {
     position: relative;
     /* In normal flow the cards do not sit over the fixed bar, so keep the original offset. */
     bottom: 45px;
   }
   /* Below the banner, on the page background: the row spans the screen, and each card is
      narrower than the row so the next card shows at the edge. */
-  .quick-links-wrap .quick-links {
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) .quick-links {
     width: 100%;
     box-sizing: border-box;
     padding: 20px 20px var(--dda-quick-links-pad-bottom);
@@ -957,12 +957,12 @@
    controls move above them (home-banner.css). On short landscape screens the banner cannot hold
    the text, the controls and the cards, so the cards stay under it (the rules above). */
 @media screen and (max-width: 992px) and (min-height: 601px) {
-  .quick-links-wrap {
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) {
     position: absolute;
     /* The row's bottom padding is part of the gap above the bar. */
     bottom: calc(var(--dda-quick-links-gap-sm) - var(--dda-quick-links-pad-bottom) + var(--dda-sticky-footer-height, 0px));
   }
-  .quick-links-wrap .quick-links {
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) .quick-links {
     padding-top: var(--dda-quick-links-pad-top);
     scrollbar-color: rgba(255, 255, 255, 0.7) transparent;
   }
@@ -990,6 +990,59 @@
   }
 }
 
+/* dda-home-carousel: its list is a .quick-links row; each <li> holds one dda-banner-card. */
+ul.quick-links {
+  margin-block: 0;
+  list-style: none;
+}
+.quick-links > .dda-home-carousel-item {
+  flex: 0 0 max(220px, calc((100% - (var(--dda-home-carousel-per-view, 5) - 1) * 8px) / var(--dda-home-carousel-per-view, 5)));
+  display: flex;
+  scroll-snap-align: start;
+  list-style: none;
+}
+.dda-home-carousel-item dda-banner-card {
+  display: flex;
+  width: 100%;
+}
+.dda-home-carousel-item .link-item {
+  width: 100%;
+  flex: 1 1 auto;
+}
+/* A card without a URL is a <button>: remove the browser button look. */
+button.link-item {
+  border: 0;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.quick-links .link-item img {
+  display: block;
+  height: 35px;
+  width: auto;
+  margin-bottom: 15px;
+}
+.quick-links .link-item:focus-visible {
+  outline: 2px solid var(--dda-color-primary-40);
+  outline-offset: 2px;
+  margin-top: -12px;
+}
+@media screen and (max-width: 992px) and (min-height: 601px) {
+  .quick-links > .dda-home-carousel-item {
+    flex: 0 0 min(75%, 300px);
+  }
+  .quick-links .link-item img {
+    height: 24px;
+    margin-bottom: 8px;
+  }
+}
+@media only screen and (orientation: landscape) and (max-width: 1600px) {
+  .quick-links .link-item img {
+    height: 20px;
+    margin-bottom: 5px;
+  }
+}
+
 .dda-card {
   position: relative;
   display: -ms-flexbox;
@@ -2346,6 +2399,77 @@ body {
     }
 }
 
+/* dubai.ae: a wordmark on desktop, a small icon at 992px and below. */
+.dda-footer .dubaiae-text-icon {
+    height: 18px;
+}
+.dda-footer .dubaiae-small-icon {
+    height: 24px;
+    display: none;
+}
+/* The "more" button exists only with more-icon; it is shown at 992px and below. */
+.dda-footer-right {
+    position: relative;
+}
+.dda-footer-right button.show-right-icon {
+    display: none;
+}
+@media (max-width: 992px) {
+    .dda-footer .dubaiae-text-icon {
+        display: none;
+    }
+    .dda-footer .dubaiae-small-icon {
+        display: block;
+    }
+    .dda-footer-right button.show-right-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        background: #ffffff;
+        border: 0;
+        border-radius: 50px;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+        color: var(--dda-on-surface-variant-30);
+        cursor: pointer;
+    }
+    .dda-footer-right button.show-right-icon i {
+        font-size: 34px;
+    }
+    .dda-footer-right button.show-right-icon:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+    }
+    .dda-footer.has-more-button .dda-footer-right .foot-right_links {
+        position: absolute;
+        bottom: 59px;
+        inset-inline-end: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        height: 0;
+        overflow: hidden;
+    }
+    .dda-footer.has-more-button .dda-footer-right .foot-right_links.show-dda-icon {
+        height: auto;
+        overflow: visible;
+    }
+    .dda-footer.has-more-button .foot-right_links li {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    .dda-footer.has-more-button .foot-right_links.show-dda-icon li {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@media (max-width: 992px) and (prefers-reduced-motion: no-preference) {
+    .dda-footer.has-more-button .foot-right_links li {
+        transition: opacity 0.4s ease, transform 0.4s ease;
+    }
+}
+
 .dda-dashboard-sidebar {
   position: fixed;
   top: 0;
@@ -3079,6 +3203,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);
 }
@@ -3686,6 +3815,104 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
     }
 }
 
+/* 3.x dropdown submenus (quick-links items with "type": "dda_default_submenu"). */
+.dda-mega-menu > li {
+  position: relative;
+}
+/* The <ul> scrolls; the third-level panel is its sibling, so the scroll does not clip it.
+   The fixed width puts the panel (inset-inline-start: 100%) against the edge of the <ul>. */
+.dda-default-submenu {
+  display: none;
+  width: 350px;
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  padding-top: 5px;
+  z-index: 5;
+}
+.dda-default-submenu.is-visible {
+  display: block;
+}
+.dda-default-submenu > ul {
+  width: 100%;
+  max-width: 350px;
+  max-height: 325px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 10px;
+  list-style: none;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.13);
+}
+.dda-default-submenu li {
+  list-style: none;
+  position: relative;
+  margin-bottom: 1px;
+}
+.dda-default-submenu a {
+  position: relative;
+  display: block;
+  padding: 10px 7px;
+  padding-inline-end: 24px;
+  border-radius: 8px;
+  font-size: var(--dda-fs-body-lg);
+  font-weight: var(--dda-fw-400);
+  color: var(--dda-on-surface-0);
+}
+.dda-default-submenu li:hover > a,
+.dda-default-submenu a.active {
+  background-color: var(--dda-on-primary-98);
+  color: var(--dda-on-primary-variant-40);
+}
+.dda-default-submenu a:focus-visible {
+  outline: 2px solid var(--dda-color-primary-40);
+  outline-offset: 0;
+}
+.dda-default-submenu a.has-submenu::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-right: solid 1px var(--dda-color-primary-40);
+  border-bottom: solid 1px var(--dda-color-primary-40);
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 9px;
+  margin-top: -4.5px;
+  transform: rotate(-45deg);
+}
+[dir='rtl'] .dda-default-submenu a.has-submenu::after {
+  transform: rotate(135deg);
+}
+.dda-default-subsubmenu {
+  display: none;
+  width: 300px;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 100%;
+  padding-inline-start: 15px;
+}
+.dda-default-subsubmenu.is-visible {
+  display: block;
+}
+.dda-default-subsubmenu-content {
+  padding: 10px;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.13);
+}
+.dda-default-subsubmenu-content ul {
+  margin: 0;
+  padding: 0;
+}
+.dda-submenu-title {
+  display: block;
+  padding: 5px 8px 10px;
+  margin-bottom: 5px;
+  border-bottom: solid 1px var(--dda-surface-variant-80);
+  font-weight: var(--dda-fw-700);
+}
+
 
 :root{
   --font-family-main: 'Dubai', sans-serif;

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: '3ded227310410ca3089d2fb5e7bbf703c7265a77' }, h("div", { key: 'e3811560e5a82a24cba3b238c787350887a36236', class: radiobuttonClass }, h("input", { key: 'a36c5facb630f742dd56d71837995a17629731b7', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '60c40663b7259d7582043639a3b9a25b484898a1', htmlFor: this.input_id }, h("span", { key: '652a643169f96d317df1901cff19368466f8ad43', class: "radio-circle" }), h("p", { key: 'e6bdad31f55802fc2da9b78c603063382a18826c' }, h("span", { key: '0cca8461aa8c5a00dbde62fd42b1fc17715798d5', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: '56bc7d2c636a1a106bed8120238138963933f6a0', 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: '3a72a25212a511d65f982a0606cd8cd0e6cd1d66' }, h("div", { key: '8eb7a5199e81bc5bf437d5dfe61e4eec7b732753', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '6b303ab598aff66a693b645d350fea4eaa470bac', class: "dda-range-slider" }, h("div", { key: '3904d63ade7e2251d9ea424c015bf4aab74eae77', 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: '0d1038171b37eebb70862e3dec81773a069f8d39', class: "min-label" }, this.min_value, "%"), h("span", { key: 'ee925f1eb9de817c30fb1b24669e05088d2735c8', class: "max-label" }, this.max_value, "%")), h("span", { key: '29d65987c630c9d67453ad3f3566a3ecdf55357b' }, h("input", { key: '4a6db59b2ef1ca6cfde2acc1ab52046afb2d786f', 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: '02fb3162cb1566304e1d25794d61bd760b02bd3c' }, h("input", { key: '46022edc3c2b069ba5f240ea0e7945326cf7459c', 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"
+            }
+        };
+    }
+}