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

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: 'fbd0f779e531d6274898e847e23c888869d374b4' }, h("div", { key: '98e2a14d0d1bbbfd5e548513e57bfd629e9aba6d', class: textareaClass }, this.label && h("label", { key: '9036385745c7aac2d306ddbbabc347846d9fed0a', 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: '9eff76cb597be11db41f24acec2ba795bbaba07b', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '968496c3e66d1587cd2893ea63b64dccf21731fc', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '6736864e6729e787f8de71fe12fec6a1a0bcb416', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '44abdcccf9cd7bef214584a46476994d67a5dbe1', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '76fa5f80421859c4539869c507d6af32a2466e23', id: this.errorId, class: "dda-error-message" }, h("span", { key: '89294947ebb7e2b06e9488a7b86f3fa86baac809', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '09a8960b8b08e84222ab35e79e45b4db662201d4', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '7e08b00e8620f1892c1c5481f8c9e50a9f342e5d', 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: 'e25bac987e66556b003d3b670af9b576d3731c65' }, h("label", { key: '2262c2a410e4758bb34eb2666e416e8286302769', class: toggleClass, htmlFor: this.input_id }, h("input", { key: 'ca009a89a6405dcd9f30dac79791c9a124ef8c69', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '1401b3e6730beff1ac6fbe4e3854755b21abdc5d', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: '88a13db082dc429d130f732f7ebe3ecc867f2686' }, this.title_text && h("span", { key: 'ec018b2656d9e2ff697a0d6e88b7901940830216', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '64372b8ae3369b1d844d7681bcefbad9a876f069', 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: '1a5eab371fff341d3398db57a3c5a283ad0edf50' }, h("div", { key: '0c72ac7e72eda7bc713b1e7b4ab58d93fef09b80', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: '91aa439ca4f29eb57af61620b1b99008d8799bea' }), h("div", { key: '7c2c180466082d69591138adbd6f80ef015f1265', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '784c70b9847e921e5b4f3f3533478966e5e33cd9' }, this.title_text), h("p", { key: '3932ff682897bade6d9298c4f0d7547e65f6408a' }, 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: '4657e8ea3f7a5782eff6d4d004afc15030a9d89d' }, h("div", { key: '929b59ee6a676e9ee95441907bea8d98a7f62bcb', class: 'dda-card' }, h("div", { key: 'c7a7a115aef102e726f3232bcc7c75cfac9b676c', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '50e93eb07a7bf279af39d8af5536292b41fef9f8' }, !!this.icon && (h("span", { key: 'f449d9a299d8cb5a534277babe0e413c43b091af', class: 'dda-card-icon' }, h("i", { key: '5d51449ce164db38f3d6540e9fae2dbade609b10', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '55d39ea5df2decaf84062e4149a8a690c34801f4', class: 'dda-card-icon' }, h("img", { key: '9cf6e418dbfd5a69f3b745abf57cd9e5ad3fcd54', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'ba558f13bba45d63e1940fdf5bc3e8501ee3d2f0', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'a03f8484f9de87dd5de5df7d86ef16348f35544e', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'f64d0dc6f8940ef81a789a056fdb280bedf2b95e', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '743465002d7738b4d8aa0145689c14e814f99ffe' }, h("i", { key: '6812c7e5e69512ea16a2a6a61f47990c4f80900c', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '684fe104483ca674eb0ce801a484ca7307a39f48' })))));
+        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: '40c6831dac81e967a3c5d03294811bbc7a320a8a', 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: '75261062c08c270dba9d852edb661a10ff4bb487' }, h("div", { key: 'f7eb40831a7b276848a4ef7bcaddafe05404aca8', 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: '65de2bf7a859c1deb216c9042031cde73378e622' }, h("div", { key: '38cd1783a7f3b5ba036aebace4fd3ce86b34a978', 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

@@ -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;
@@ -3686,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/utils/parse-json-prop.js

@@ -0,0 +1,34 @@
+// Reads a prop that takes a list: a JSON string from an HTML attribute, or an array that a
+// framework wrapper sets as a property. A bad value must never stop the component rendering,
+// so it gives an empty list and one warning that names the attribute. Entries that are not plain
+// objects (null, a number, a string, an array) are dropped, also with one warning, so that the
+// component never reads a field of a non-object.
+export function parseJsonProp(value, propName) {
+    if (value === undefined || value === null || value === '')
+        return [];
+    if (Array.isArray(value))
+        return objectsOnly(value, propName);
+    if (typeof value === 'string') {
+        try {
+            const parsed = JSON.parse(value);
+            if (Array.isArray(parsed))
+                return objectsOnly(parsed, propName);
+            console.warn(`${propName}: expected a JSON array; the value is ignored.`);
+            return [];
+        }
+        catch (_a) {
+            console.warn(`${propName}: the value is not valid JSON; it is ignored.`);
+            return [];
+        }
+    }
+    console.warn(`${propName}: expected a JSON array; the value is ignored.`);
+    return [];
+}
+const isPlainObject = (entry) => entry !== null && typeof entry === 'object' && !Array.isArray(entry);
+// Returns the same array when every entry is an object, so an array property stays unchanged.
+function objectsOnly(list, propName) {
+    if (list.every(isPlainObject))
+        return list;
+    console.warn(`${propName}: an item is not an object; it is ignored.`);
+    return list.filter(isPlainObject);
+}