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

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: '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))));
     }
     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: '3b11664484e9c91e045896687bce2b2f645c7947' }, h("div", { key: 'e9a932aaa1c53285520a54d2a66d115a86479817', 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: '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))));
     }
     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: '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, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {

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

@@ -711,24 +711,97 @@
   padding: 50px 20px 70px 20px;
 }
 
-.quick-links-wrap {
+/* Small screens: the cards sit on the banner this far above the sticky footer bar, at this height.
+   dda-home-banner's .slider-nav reads the same two values to stay 16px above the cards. */
+:root {
+  --dda-quick-links-gap-sm: 12px;
+  --dda-quick-links-card-height-sm: 112px;
+}
+
+: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. */
-  bottom: calc(45px + var(--dda-sticky-footer-height, 0px));
+  /* dda-sticky-footer sets --dda-sticky-footer-height; the cards sit above the fixed bar.
+     The row's bottom padding (below) is part of the 69px. The banner's .slider-nav sits 205px
+     above this offset (274px in home-banner.css); change both together. */
+  bottom: calc(69px - var(--dda-quick-links-pad-bottom) + var(--dda-sticky-footer-height, 0px));
   z-index: 1;
 }
 
+/* The width of the fade on each edge that has more cards to scroll to. */
+@property --dda-quick-links-fade-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --dda-quick-links-fade-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+/* 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. */
+: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. */
+  --dda-quick-links-pad-top: 12px;
+  --dda-quick-links-pad-bottom: 12px;
+  --dda-quick-links-fade: 32px;
+}
 .quick-links {
   width: 90vw;
   margin: 0 auto;
   display: flex;
   gap: 8px;
-  padding: 0 20px;
+  padding: var(--dda-quick-links-pad-top) 20px var(--dda-quick-links-pad-bottom);
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  /* A card that snaps or takes focus stops clear of the fade. */
+  scroll-padding-inline: calc(var(--dda-quick-links-fade) + 4px);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.7) transparent;
+}
+
+/* Fades show only where the row can scroll, and follow the scroll position. Browsers without
+   scroll-driven animations show no fade; the cut card and the scrollbar still show. */
+@supports (animation-timeline: scroll()) {
+  .quick-links {
+    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--dda-quick-links-fade-start), #000 calc(100% - var(--dda-quick-links-fade-end)), transparent);
+    mask-image: linear-gradient(to right, transparent, #000 var(--dda-quick-links-fade-start), #000 calc(100% - var(--dda-quick-links-fade-end)), transparent);
+    animation: dda-quick-links-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+  /* In RTL the row starts on the right. */
+  [dir='rtl'] .quick-links {
+    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--dda-quick-links-fade-start), #000 calc(100% - var(--dda-quick-links-fade-end)), transparent);
+    mask-image: linear-gradient(to left, transparent, #000 var(--dda-quick-links-fade-start), #000 calc(100% - var(--dda-quick-links-fade-end)), transparent);
+  }
+}
+@keyframes dda-quick-links-fade {
+  0% {
+    --dda-quick-links-fade-start: 0px;
+    --dda-quick-links-fade-end: var(--dda-quick-links-fade);
+  }
+  10%,
+  90% {
+    --dda-quick-links-fade-start: var(--dda-quick-links-fade);
+    --dda-quick-links-fade-end: var(--dda-quick-links-fade);
+  }
+  100% {
+    --dda-quick-links-fade-start: var(--dda-quick-links-fade);
+    --dda-quick-links-fade-end: 0px;
+  }
 }
 
 .quick-links .link-item {
-  width: 100%;
+  /* Cards share the row when they fit and are never narrower than 220px. */
+  flex: 1 0 220px;
+  min-width: 0;
+  scroll-snap-align: start;
   height: 170px;
   display: block;
   background: var(--dda-surface-100);
@@ -792,16 +865,21 @@
   .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;
   }
-  .quick-links-wrap .quick-links {
-    display: grid;
-    padding: 20px 20px;
+  /* 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. */
+  :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);
+    scrollbar-color: var(--dda-on-surface-variant-40) transparent;
   }
   .quick-links .link-item {
+    flex: 0 0 min(75%, 300px);
     height: auto;
     margin: 0px;
     border: solid 1px #ddd;
@@ -874,6 +952,97 @@
   max-width: 90vw !important;
 }
 
+/* 992px and below, on screens taller than 600px: the cards sit on the banner, above the sticky
+   footer bar, as on desktop. They are compact so they cover less of the slide, and the slide
+   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) {
+  :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));
+  }
+  :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;
+  }
+  .quick-links .link-item {
+    height: var(--dda-quick-links-card-height-sm);
+    padding: 16px;
+    border: 0;
+  }
+  .quick-links .link-item i {
+    font-size: 24px;
+    margin-bottom: 8px;
+  }
+  .quick-links .link-item svg {
+    height: 24px;
+    margin-bottom: 8px;
+  }
+  .quick-links .link-item .title {
+    font-size: var(--dda-fs-body-lg);
+  }
+  .quick-links .link-item .subtitle {
+    font-size: var(--dda-fs-body-sm);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* 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;
@@ -2136,6 +2305,10 @@ body {
 .foot-icon-btn a img {
     height: 32px;
 }
+
+.foot-icon-btn a i {
+    font-size: 32px;
+}
 .dda-footer-item ul li.foot-menu{
     padding: 0 5px;
 }
@@ -2212,6 +2385,10 @@ body {
     .foot-icon-btn a img {
         height: 24px;
     }
+
+    .foot-icon-btn a i {
+        font-size: 24px;
+    }
 }
 
 @media (max-width: 1200px) {}
@@ -2222,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;
@@ -3562,6 +3810,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: '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))))));
     }
     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: '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: {
                 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: '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}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {

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

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

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

@@ -167,7 +167,7 @@ export class Ddaselect {
     }
     render() {
         const id = this.triggerId;
-        return (h(Host, { key: '35fead649fe2206feb1749d1accbdddb2691d09d' }, h("div", { key: 'd41d81d1944c32c379f9289efd276bccf5f25a1a', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '8bd67c36aab4be42289b73f0f95466c0cc3da1f3', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: 'a99b28ef07e8fa4577e12e964eaa4a55c73ced8b', class: "dda-dropdown-container" }, h("button", { key: 'a03cc3709395e13290d78fcbc497d56953fa16ae', name: this.toggle_button_name, "aria-label": this.aria_label, "aria-labelledby": this.label && !this.aria_label ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '6764cc54e1b60305b9a0f3bf528ec6d74dd8433d', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '418cae53a5351d92e5b55186d58b97bd62dc8bcb', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '064eb06fc8dea8656c753aa4372be0a797241a22', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'fbe4f80920eac2f18c99177f2425b443f497e569', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '1c91c9a3fe3d57849fbf1f2e54494412fbe39e15' }, h("div", { key: '87f88aa9629cfd9ee7cbe2b6b12ff21f1ad463b8', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '31d3c458112c6a44f7e9d5c488e6c6959521faa9', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: 'cdf70b1a3ebfef09df49f3b399d2cdc960ea9fd3', class: "dda-dropdown-container" }, h("button", { key: '3223419582be3819dff4b0613999eb37a9e10cb9', name: this.toggle_button_name, "aria-label": this.aria_label, "aria-labelledby": this.label && !this.aria_label ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '9a14de25046bf78a44b5afa3575ace2b0031f8c6', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '48b9417d23766f0c8654df0f8653c7c28f6f5464', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '391eefc548be3ee063cea84368917191a61b70f2', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'b9e5a701944138256c439a99375b3739a12a8b7d', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {