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

package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.stories.js

@@ -13,7 +13,15 @@ export default {
         hideMiddleSection: {
             control: { type: 'boolean' },
             description: 'Hides the middle section of the footer',
-        }
+        },
+        locationButtonIcon: {
+            control: { type: 'text' },
+            description: 'Material Symbols icon of the location link, shown when the location image is empty',
+        },
+        newsButtonIcon: {
+            control: { type: 'text' },
+            description: 'Material Symbols icon of the news link, shown when the news image is empty',
+        },
     },
     component: 'dda-sticky-footer',
     parameters: {
@@ -114,7 +122,7 @@ Default.args = {
     newsButtonHref: '#',
     newsButtonText: 'News',
     newsButtonSrc: news_pin,
-    newsButtonIcon: 'news_on',
+    newsButtonIcon: 'newspaper',
     aiIconHref: '#',
     aiIconSrc: digital_ai,
     aiIconAlt: 'Digital AI',
@@ -125,3 +133,17 @@ Default.args = {
     chatIconTooltip: 'Online Chat',
     hideMiddleSection: false,
 };
+// The location and news links show a Material Symbols icon when their image is not set.
+export const MaterialIcons = Template.bind({});
+MaterialIcons.args = Object.assign(Object.assign({}, Default.args), { locationButtonSrc: '', locationButtonIcon: 'location_on', newsButtonSrc: '', newsButtonIcon: 'newspaper' });
+// 3.x lists: any number of middle logos, right links with icons and text, and the "more" button
+// that collects the right links on phones. `Template` returns a string, so the extra attributes
+// are added to that string.
+const listAttributes = `more-icon="more_horiz" more-icon-family="material-icons"
+  middle-link='${JSON.stringify([1, 2, 3, 4].map(n => ({ LogoTooltip: `Logo ${n}`, href: '#', src: digital_logo, alt: `Logo ${n}` })))}'
+  right-link='${JSON.stringify([
+    { RightLinkTooltip: 'Newsroom', href: '#', LinkText: 'Newsroom', IconFamily: 'material-icons', IconName: 'feed' },
+    { RightLinkTooltip: 'Contact us', href: '#', LinkText: 'Contact us', IconFamily: 'material-icons', IconName: 'call' },
+])}'`;
+export const Lists3x = args => Template(args).replace('<dda-sticky-footer', `<dda-sticky-footer ${listAttributes}`);
+Lists3x.args = Object.assign(Object.assign({}, Default.args), { locationButtonSrc: '', newsButtonSrc: '' });

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

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

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

@@ -119,7 +119,7 @@ export class DdaTextarea {
             this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: '36d3524d56afd5ec4839df413c7c4a9f73c02349' }, h("div", { key: 'b549320f31064d89f9c3cb93100e00209ffec631', class: textareaClass }, this.label && h("label", { key: '507594fc98f36d10d2b0cc7e728d2789d19acffd', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        return (h(Host, { key: 'c5edab142a6817b728721f1a12e6582050d29410' }, h("div", { key: '67bf7f7bbef0f412b85f5040cce9c5cafcb8c890', class: textareaClass }, this.label && h("label", { key: 'e41f2bb1556278cd8bc733418eea6031ca66cc3d', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
         // F-015: previously a bare `<div id="editor">` — the visible
         // label's `for` cannot target a non-labelable <div>, and even
         // aria-labelledby here would be wrong: Quill turns this
@@ -127,7 +127,7 @@ export class DdaTextarea {
         // as a child `.ql-editor`, which is what AT and Tab actually
         // land on. The ARIA lives on quill.root (.ql-editor), applied
         // imperatively in syncRichEditorA11y() after mount.
-        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: '4931a7959dcc63311c7bf39d9f48345705153b2b', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '0611a1223915e8c25963ea0d2084b8d12ea4e505', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'c52d7a98fa16609999310aa9603185ea4249d642', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: 'c68c8d582a5d2a8f365fb31c3dd63f92280624ea', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '2a1476454a2b11836afbdcd46d78b49a0704f701', id: this.errorId, class: "dda-error-message" }, h("span", { key: '0009df8437058f165415719e25705b23b90f2610', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '283e095c1acbc957dbdc8ed3ed28cd717b05616d', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '2fc7cfb38f4ed9d3676acfa6c5f48fc772aff8cd', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: 'f31f3c2467bcf9b65296f5c0117ebc5d27c4fdab', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '6e419e51c55c6427a7f9ae33d93b7b7a1639ea54', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'c9804b5734d99b02abf438119aa668b8facf8110', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: 'da29cc16cd25173e1834b61c5bfc1d11e878fa1d', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'a9e908888326a4bf968798fdc58df5706732ef12', id: this.errorId, class: "dda-error-message" }, h("span", { key: 'a03685c802486a01e2797740e459b636365778f8', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '845e5de4faceee90c1ce7f828eb298344f152418', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '044631e0c851953de8334d51087d5c7cb430a1e3', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {

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

@@ -11,7 +11,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'dea39431c86169e24d54733a62c769eeaa2b689a' }, h("label", { key: '3cacd3f24b5f943148c08d49507367f447360130', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '05ddb8d7855baa638d27a2e75e958b0925cb6133', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '94a53389d2bc3e2a0865f4eabe144957088f3c9e', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'f2c763dfde5598c8c38aa6ded502246915d6697c' }, this.title_text && h("span", { key: '1226a811dccc581837743c79b698ee553eb561b8', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '53b895d6524528f56a1b8c0e85fcd1292a2295a4', class: "toggle-supporting" }, this.supporting))))));
+        return (h(Host, { key: '594a044248a1ea4f445ed239d97c56a1976e167a' }, h("label", { key: '2d20d01b337379355004d902b60d9b499f9055fc', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '081734cff68c6228fc7daa23ce821e7ac5bc817f', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '7c41a8ece7705f6fb3bb779dcdca7e09ca7df610', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'cdf4855501fa3d62d2371179fdb7a28070b1f0ce' }, this.title_text && h("span", { key: '019febd23f5964bd936d3edca64e7d2010a7dfab', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: 'a5bdee7e1ccc27ab2279e5ae9e5cab37aa32f709', class: "toggle-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class DdaTooltip {
         this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: '2ed16ceb8feae5e30c32f8f6233b4af58bcaf7a9' }, h("div", { key: '5dae51f2ac993d030be0c2287552f6979eb14ca5', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: '18c1f46d365c677fe0ca88bf4582e7899b08df0d' }), h("div", { key: 'df7107e2d43c930942faea1c5e574cbe6fea9608', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: 'abf766e5920575854a064b25b4f63536c9fd6cdf' }, this.title_text), h("p", { key: '7fb2ba0d0f7ce6ceff058b5c56df509acab10e24' }, this.description)))));
+        return (h(Host, { key: '6f9ecc5f00431d9bcd4d94ac3ec2636901540a6c' }, h("div", { key: 'cd08883c43bf2b03965b0d3c96a13e78aa690f02', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: '21ee3779a3bdef7ac2f53089e2e43b57634a60e0' }), h("div", { key: 'cda784b2367e27f3b6856ec67ad2a68058a7aed2', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: 'c8dc3672a03fc16589aadc1da1757bbb72f699c5' }, this.title_text), h("p", { key: 'a5082ddd48a0e60d07007bad1909ec7605d6ef95' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {

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

@@ -28,7 +28,7 @@ export class DdaUiCard {
     }
     render() {
         const HeadingTag = this.headingTag;
-        return (h(Host, { key: 'f2a0d78609b1432f94a712b2d69690ed10c422b3' }, h("div", { key: 'bc36fddf6be566d97d23530740e5de9f32bb192e', class: 'dda-card' }, h("div", { key: '55b2f3a35669305d0dcf5c3fe9bdd3dd70a444a1', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: 'e6298ad703d39c3ed69ab64070db7d2580529d33' }, !!this.icon && (h("span", { key: '2f1b9f7570d5ab46f857cebb594a1d71cf83a341', class: 'dda-card-icon' }, h("i", { key: 'efda1c1873e48cae86bbd9feb5a90c7529f3db49', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '802a4ca867e351b24af54b4da78ec12c2d18b890', class: 'dda-card-icon' }, h("img", { key: 'ff6975cf36520a9c3ddbecc16252bcc0769a1597', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'd769a32b303d689217aa77973804347fb3488b02', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '0bdaa58c5ea5db75c20c7b0031dad48ce7d1ed96', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '87d11b05cef8ab0b01de355d22b1ef9297a80302', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '8cb9e3c6e51769fca7fa47d22d61a98164209002' }, h("i", { key: 'ba556e79ad6176ee2b79097a78ad826d9c02ecee', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '11921fac820a992ed35e0dab39bcd36a39b2244f' })))));
+        return (h(Host, { key: '1bbdb967a31df80eb8d5bc04764a1caf1fa198b3' }, h("div", { key: 'daf4a4e9096e7a2bbd17b90e890cd12b034fb0fa', class: 'dda-card' }, h("div", { key: '36a0c9f0f2744a761d951e245741fe427a17d0c1', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '9062bafbd3168c130be10eb44d8154a8f66c68e8' }, !!this.icon && (h("span", { key: '2c0b9b94601f3a53dd9fe0480b8dbd95d427afea', class: 'dda-card-icon' }, h("i", { key: 'd1f692ab879ca203c0361ca96f1e92694417bf8d', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '63b3fd072c5417695eba7b883be27b1f1d848841', class: 'dda-card-icon' }, h("img", { key: '7860e1a3df40a4fa4d35b06c1fb58f66f554563c', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: '0202e3ef4cc6dbed859f11c63d76c9df5a2c2340', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'd376be8224e3f0c48bf56d0e067e3e875352df98', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '47be07e6756f019a12385aab8ee5063848fc2f56', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '5ee32e96529e3d5badad707cb9c1293b113e3370' }, h("i", { key: 'd1eb863f78293d3af3ed4b1df56c18126538c4b0', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: 'd0c885254ad24cbfda489377950ae178bf0cb134' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {

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

@@ -1,42 +1,51 @@
 .dda-segmented-group {
   display: inline-flex;
+  /* A group wider than its container scrolls inside itself, not the page. The scroll box
+     also clips the segments to the rounded corners. */
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: thin;
   border: solid 1px var(--dda-surface-90);
   border-radius: 8px;
-  overflow: hidden;
 }
-.light-mode.dda-segmented-group{
+.light-mode.dda-segmented-group {
   border: solid 1px var(--dda-neutral-90);
 }
 .dda-segmented-item {
   display: flex;
-  height: 40px;
+  /* Labels stay on one line; the group scrolls instead of the segments shrinking. */
+  flex: none;
+  white-space: nowrap;
+  min-height: 40px;
   padding: 5px 16px;
   border: transparent;
   border-inline-start: solid 1px var(--dda-surface-90);
   background-color: var(--dda-surface-100);
+  /* Browsers give a button the system font; take the page font (Dubai) instead. */
+  font-family: inherit;
   font-size: 16px;
   color: var(--dda-on-surface-variant-30);
   cursor: pointer;
   align-items: center;
 }
-.light-mode .dda-segmented-item{
+.light-mode .dda-segmented-item {
   background-color: var(--dda-neutral-100);
   color: var(--dda-neutral-variant-30);
   border-inline-start: solid 1px var(--dda-neutral-90);
 }
-.dda-segmented-group .dda-segmented-item:first-child{
+.dda-segmented-group .dda-segmented-item:first-child {
   border: transparent;
 }
-.dda-segmented-group.square{
+.dda-segmented-group.square {
   border-radius: 8px;
 }
-.dda-segmented-group.rounded{
+.dda-segmented-group.rounded {
   border-radius: 40px;
 }
 .dda-segmented-item:hover {
   color: var(--dda-color-primary-40);
 }
-.light-mode .dda-segmented-item:hover{
+.light-mode .dda-segmented-item:hover {
   color: var(--dda-primary-40);
 }
 .dda-segmented-item.active {
@@ -49,4 +58,15 @@
 }
 .dda-segmented-item i {
   font-size: 18px;
-}
+}
+/* The ring is drawn inside the segment, because the group's scroll box clips anything
+   outside it. The inner light band keeps the ring visible on the selected (filled) segment. */
+.dda-segmented-item:focus-visible {
+  outline: 3px solid var(--dda-on-surface-0);
+  outline-offset: -3px;
+  box-shadow: inset 0 0 0 5px var(--dda-surface-100);
+}
+.light-mode .dda-segmented-item:focus-visible {
+  outline-color: var(--dda-neutral-0);
+  box-shadow: inset 0 0 0 5px var(--dda-neutral-100);
+}

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

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

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

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

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

@@ -24,7 +24,7 @@ export class DdaVerticalStepper {
     render() {
         var _a;
         const current = (_a = this.current_step) !== null && _a !== void 0 ? _a : this.current_Step;
-        return (h(Host, { key: '35d930b7e0eef90b1f0c6e8dce9fa49065b4fb6e' }, h("div", { key: '690ea598a073d296066e661d31a769802a5bcbdf', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
+        return (h(Host, { key: '8d8d30895491f4053370c1fa392f81a8c8df91ac' }, h("div", { key: '558f122ea5c72cadb35efc70d31cd18ec1271ca1', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/global/global.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;