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

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: '22ab5c9ede23feedead5b61e2ed4963c1851ecbc' }, h("div", { key: 'cef06c4a45c19a9ae0eefddd2609b9e9e9f1e48c', class: textareaClass }, this.label && h("label", { key: '76fb6bce4a0510aab2a79209f450d201a24ef9a6', 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: '382ba6b5dc9755bf262adb033a118c1be6941bd8', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '5d07ab9a7f7698528fc731778bc668c69fa0e5ec', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '33236593cdafdf4ed5694e272f5c4fcf85ca2f68', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '2845bd3bface431badd534f44f12faa748c1a718', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'cc1fabc27cd1bf0f87cfe6e3194c68a0d43ac7f7', id: this.errorId, class: "dda-error-message" }, h("span", { key: '731658aad2027ae1ae107ad58962acb6bbf40eb2', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '80c26defc477ed47439939cbb23875e0373c9598', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: 'e4f4ca076692226881b259322af66f87b18ccc38', 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: '034a0d08e3c605fe38f0f0b3244e1d5cc7442472' }, h("label", { key: '93539da2d2ccfa1e51d0eebf4cc1b234e1e03606', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '21c0ca32b52ed5cb69da4339f1fce9c26dcaf1fa', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '8d2def2951a2566625276ba4d350d2407c19af77', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'e56ce02068c3e3c87f3b7452a81b741560297274' }, this.title_text && h("span", { key: 'faeea2f00ee0c50f0b96b5e24c09da088a98f183', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '7999b6126c0fefb6cb09ac67930e311dad18d2b2', 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: 'e77ebb12700ccbbef52e2d2138e0950d65127778' }, h("div", { key: 'ea64d67136e615b33138a61f1f1a4ba804db5eea', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'c191a8ff9be73014c2da7b1a4fdbcce57e94ba4d' }), h("div", { key: 'c6733ebddb99c659db89027384a50ba9c7836341', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '47c45f8411f5803c4ba59d0b9b4ac5c830b403c7' }, this.title_text), h("p", { key: '4f08ecda01307162262d7c79aa26e795ff03251b' }, 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: 'd82fda87340a70612440a60808a854297d749883' }, h("div", { key: '8cb77a42b82ed7121af29a234e4c065a416887d5', class: 'dda-card' }, h("div", { key: 'e25298c9dbb2d9247bdc238f9c505180aae45b67', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '3d6d6e4b66a787270593fc53ecb9432ef87cd144' }, !!this.icon && (h("span", { key: '17d02a755a1a6345961ba4c922d2c5205ca79dcd', class: 'dda-card-icon' }, h("i", { key: 'a4eea58a0b1511548c2d60b12bc05068326ce339', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'fe5b33c447adb2a06c20495b576d185258a98bca', class: 'dda-card-icon' }, h("img", { key: '7db29168e53eebe578fb8241795a47862d732d13', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'c2c0a5bd81432dad7b5400c9011998f30823adbf', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '9620bfa353acba31cb43d4a818c11d17bb58ea6d', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'd81101699701091f7d952c6f38637a621fb27324', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: 'e7304fca873531077bb4cafda43e462b8d3403d4' }, h("i", { key: 'd13a118077f9a11b76ba06f5cb4f1ab20f9b5472', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '995bf90013e00498354bfb9a3bfd6950032dd924' })))));
     }
     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: '4a72982d49270f6c04cee7fdeaafcba7cccc6d3c', 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: '30afa97eccb87ee8595802f451f2ca2f0624da2a' }, h("div", { key: '70d6126c99005e54565473c574bde94545584b58', 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: '9aefae11819e6581b65a39af851806fb2c4cfd75' }, h("div", { key: 'b9f812a1626f99993e07a3cf07c0a0a15ed42f11', 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;
@@ -3079,6 +3203,11 @@ body {
 .dda-search input[type="text"]::placeholder{
     color: var(--dda-on-surface-0);
 }
+/* On the transparent header the typed text and the caret are white, like the placeholder. */
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"] {
+    color: var(--dda-neutral-100);
+    caret-color: var(--dda-neutral-100);
+}
 .transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-neutral-100);
 }
@@ -3686,6 +3815,104 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
     }
 }
 
+/* 3.x dropdown submenus (quick-links items with "type": "dda_default_submenu"). */
+.dda-mega-menu > li {
+  position: relative;
+}
+/* The <ul> scrolls; the third-level panel is its sibling, so the scroll does not clip it.
+   The fixed width puts the panel (inset-inline-start: 100%) against the edge of the <ul>. */
+.dda-default-submenu {
+  display: none;
+  width: 350px;
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  padding-top: 5px;
+  z-index: 5;
+}
+.dda-default-submenu.is-visible {
+  display: block;
+}
+.dda-default-submenu > ul {
+  width: 100%;
+  max-width: 350px;
+  max-height: 325px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 10px;
+  list-style: none;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.13);
+}
+.dda-default-submenu li {
+  list-style: none;
+  position: relative;
+  margin-bottom: 1px;
+}
+.dda-default-submenu a {
+  position: relative;
+  display: block;
+  padding: 10px 7px;
+  padding-inline-end: 24px;
+  border-radius: 8px;
+  font-size: var(--dda-fs-body-lg);
+  font-weight: var(--dda-fw-400);
+  color: var(--dda-on-surface-0);
+}
+.dda-default-submenu li:hover > a,
+.dda-default-submenu a.active {
+  background-color: var(--dda-on-primary-98);
+  color: var(--dda-on-primary-variant-40);
+}
+.dda-default-submenu a:focus-visible {
+  outline: 2px solid var(--dda-color-primary-40);
+  outline-offset: 0;
+}
+.dda-default-submenu a.has-submenu::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-right: solid 1px var(--dda-color-primary-40);
+  border-bottom: solid 1px var(--dda-color-primary-40);
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 9px;
+  margin-top: -4.5px;
+  transform: rotate(-45deg);
+}
+[dir='rtl'] .dda-default-submenu a.has-submenu::after {
+  transform: rotate(135deg);
+}
+.dda-default-subsubmenu {
+  display: none;
+  width: 300px;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 100%;
+  padding-inline-start: 15px;
+}
+.dda-default-subsubmenu.is-visible {
+  display: block;
+}
+.dda-default-subsubmenu-content {
+  padding: 10px;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.13);
+}
+.dda-default-subsubmenu-content ul {
+  margin: 0;
+  padding: 0;
+}
+.dda-submenu-title {
+  display: block;
+  padding: 5px 8px 10px;
+  margin-bottom: 5px;
+  border-bottom: solid 1px var(--dda-surface-variant-80);
+  font-weight: var(--dda-fw-700);
+}
+
 
 :root{
   --font-family-main: 'Dubai', sans-serif;

package/dist/collection/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);
+}