@dubai-design-system/components-js 5.3.6 → 5.3.7

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

@@ -747,9 +747,9 @@
    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;
+  /* Room inside the row for the hover and focus lift (12px above, and the focus ring 4px more)
+     and the pointer (9px below); a scrolling box clips anything outside it. */
+  --dda-quick-links-pad-top: 16px;
   --dda-quick-links-pad-bottom: 12px;
   --dda-quick-links-fade: 32px;
 }
@@ -878,7 +878,8 @@
   :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);
+    /* Read by the row's padding, so dda-home-carousel's <ul> gets it too (see ul.quick-links). */
+    --dda-quick-links-pad-top: 20px;
     scrollbar-color: var(--dda-on-surface-variant-40) transparent;
   }
   .quick-links .link-item {
@@ -966,7 +967,7 @@
     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);
+    --dda-quick-links-pad-top: 16px;
     scrollbar-color: rgba(255, 255, 255, 0.7) transparent;
   }
   .quick-links .link-item {
@@ -994,8 +995,13 @@
 }
 
 /* dda-home-carousel: its list is a .quick-links row; each <li> holds one dda-banner-card. */
+/* global.css resets every <ul> to margin: 0 and padding: 0 with !important. On this row that removed
+   the top padding the hover lift rises into, so a raised card was cut off, and the auto margins
+   that centre it, so the row ran 90vw from the container's start edge and out of the container. */
 ul.quick-links {
-  margin-block: 0;
+  width: min(90vw, 100%);
+  margin: 0 auto !important;
+  padding: var(--dda-quick-links-pad-top) 20px var(--dda-quick-links-pad-bottom) !important;
   list-style: none;
 }
 .quick-links > .dda-home-carousel-item {
@@ -1046,6 +1052,38 @@ button.link-item {
   }
 }
 
+/* Short screens (a laptop zoomed past about 115%, or a phone on its side): dda-home-banner grows
+   with its text (home-banner.css), so the cards follow it in normal flow instead of sitting on it.
+   They wrap instead of scrolling sideways, each at least 220px wide or the row's width, so at 400%
+   zoom every card is in view at a readable size, one under another. */
+@media screen and (max-height: 700px) {
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) {
+    position: relative;
+    bottom: auto;
+  }
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) .quick-links,
+  .quick-links {
+    flex-wrap: wrap;
+    overflow: visible;
+    scroll-snap-type: none;
+    -webkit-mask-image: none;
+    mask-image: none;
+    animation: none;
+  }
+  .quick-links .link-item,
+  .quick-links > .dda-home-carousel-item {
+    flex: 1 1 min(220px, 100%);
+    height: auto;
+    margin-top: 0;
+    border: solid 1px #ddd;
+  }
+  /* The hover and focus lift would push a card into the row above it. */
+  .quick-links .link-item:hover,
+  .quick-links .link-item:focus-visible {
+    margin-top: 0;
+  }
+}
+
 .dda-card {
   position: relative;
   display: -ms-flexbox;
@@ -2473,6 +2511,90 @@ body {
     }
 }
 
+/* 992px and below the links are 48px round buttons in one row. Six of them with their spacing
+   took about 424px, so on a 320-375px phone, or a laptop zoomed to 400% (WCAG 1.4.10), the last
+   buttons ran off the screen. Here the spacing narrows with the screen and each button shrinks
+   from 48px when the row does not fit, to no less than 32px, so up to eight fit at 320px. The
+   right-hand links in the "more" menu keep their size. */
+@media (max-width: 992px) {
+    .dda-footer {
+        padding: 0 clamp(8px, 4vw, 20px);
+    }
+    .dda-footer-item,
+    .dda-footer-item ul {
+        min-width: 0;
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn {
+        --dda-foot-btn-pad: clamp(2px, 1vw, 8px);
+        flex: 0 1 calc(48px + 2 * var(--dda-foot-btn-pad));
+        min-width: calc(32px + 2 * var(--dda-foot-btn-pad));
+        padding: 0 var(--dda-foot-btn-pad);
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn :is(dda-tooltip, .dda-tooltip-container) {
+        display: flex;
+        width: 100%;
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn a {
+        width: 48px;
+        max-width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn a img {
+        max-width: 70%;
+        object-fit: contain;
+    }
+}
+/* The short landscape bar above makes the buttons 35px. */
+@media only screen and (orientation: landscape) and (max-width: 768px) {
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn {
+        flex-basis: calc(35px + 2 * var(--dda-foot-btn-pad));
+    }
+}
+
+/* A tooltip is centred over its button and wider than it, so over the first and last buttons it
+   ran past the screen edge (3-7px on desktop, about 20px on a phone). Those two line up with the
+   button's outer edge instead, and their arrow moves near the button's centre: 16px in on desktop,
+   24px on the round buttons. In the "more" menu every link sits at the end edge. */
+.dda-footer .footer-content > .dda-footer-item:first-child li.foot-icon-btn:first-child .dda-tooltip-box.top {
+    left: auto;
+    inset-inline-start: 0;
+    transform: none;
+}
+.dda-footer .dda-footer-right li.foot-icon-btn:last-child .dda-tooltip-box.top {
+    left: auto;
+    inset-inline-end: 0;
+    transform: none;
+}
+.dda-footer .footer-content > .dda-footer-item:first-child li.foot-icon-btn:first-child .dda-tooltip-box.top::before,
+.dda-footer .footer-content > .dda-footer-item:first-child li.foot-icon-btn:first-child .dda-tooltip-box.top::after {
+    left: auto;
+    margin-inline-start: 0;
+    inset-inline-start: var(--dda-foot-tip-arrow, 6px);
+}
+.dda-footer .dda-footer-right li.foot-icon-btn:last-child .dda-tooltip-box.top::before,
+.dda-footer .dda-footer-right li.foot-icon-btn:last-child .dda-tooltip-box.top::after {
+    left: auto;
+    margin-inline-start: 0;
+    inset-inline-end: var(--dda-foot-tip-arrow, 6px);
+}
+@media (max-width: 992px) {
+    .dda-footer {
+        --dda-foot-tip-arrow: 14px;
+    }
+    .dda-footer.has-more-button .dda-footer-right li.foot-icon-btn .dda-tooltip-box.top {
+        left: auto;
+        inset-inline-end: 0;
+        transform: none;
+    }
+    .dda-footer.has-more-button .dda-footer-right li.foot-icon-btn .dda-tooltip-box.top::before,
+    .dda-footer.has-more-button .dda-footer-right li.foot-icon-btn .dda-tooltip-box.top::after {
+        left: auto;
+        margin-inline-start: 0;
+        inset-inline-end: var(--dda-foot-tip-arrow);
+    }
+}
+
 .dda-dashboard-sidebar {
   position: fixed;
   top: 0;
@@ -4009,6 +4131,15 @@ button {
   cursor: pointer;
 }
 
+/* Icon-font ligatures draw from data-icon, not from text in the element: the icon name is then
+   not text in the page, so an accessibility checker does not read "chevron_right" as a visible
+   label that the button's accessible name must contain (WCAG 2.5.3). The icons are aria-hidden;
+   the button's aria-label or text names it. Material classes only, so another icon font's own
+   ::before glyph is untouched. */
+:is(.material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp, .material-icons-two-tone, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp)[data-icon]::before {
+  content: attr(data-icon);
+}
+
 ul {
   margin: 0 !important;
   padding: 0 !important;

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

@@ -46,7 +46,7 @@ export class DdaSearchInput {
     }
     render() {
         const id = this.inputId;
-        return (h(Host, { key: '1f3191966d43f2b236fd11459101c769a0927436' }, h("div", { key: '7dd31c429d569ebfff446d78b7c88787bb89108d', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: 'c0b9f0a432de51598797da4734c9147decaf9ba1', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'ec94b09e36f446cf5d08cd1406374e3a71330f45', class: "dda-search-area dda-search-action" }, h("i", { key: '6a5c297727c0783f204346a09eb479320c98a287', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: '581437d9d6cda370e2bcafd5f1704cc0fec6ed08', name: this.search_input_name, "aria-label": this.aria_label, id: id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'a8b99cc30487d302ac2c40717ed1d15ca9b862c9', class: "dda-search-btngroup" }, h("button", { key: 'ebdc39f8411eb8fb54feed4c22543d0076708cc6', name: this.close_button_name, "aria-label": this.button_aria_label || this.clear_button_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '991884ec48eb496ec35d95368d8763bcf7fb4f07', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.show_button && (h("button", { key: '9a825cfb95a6fbfc82d34d5014d44cab59193f06', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: '656c31b9a6a2d9a61d26277821e1fdd47cabc01a', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'c796e3b1dc99f60c34009c8bfb4598683d0d0e09', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '1f3191966d43f2b236fd11459101c769a0927436' }, h("div", { key: '7dd31c429d569ebfff446d78b7c88787bb89108d', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: 'c0b9f0a432de51598797da4734c9147decaf9ba1', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'ec94b09e36f446cf5d08cd1406374e3a71330f45', class: "dda-search-area dda-search-action" }, h("i", { key: 'ee331ce3af2eb7ce0492119813a6a7e968beff85', class: "material-icons icon-left", "data-icon": "search", "aria-hidden": "true" }), h("input", { key: '709364d5c744547be825cc1e5f82cf06075f9a66', name: this.search_input_name, "aria-label": this.aria_label, id: id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'acf0c3b562ba549cdb6211407de559c8c3b6f6ad', class: "dda-search-btngroup" }, h("button", { key: '8cdc767b648b7a3cd7d145e643db036b75191863', name: this.close_button_name, "aria-label": this.button_aria_label || this.clear_button_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '87abd33df3cd3b134f1a0bc7452e82cf5fabeddb', class: "material-icons  material-symbols-outlined", "data-icon": "close", "aria-hidden": "true" })), this.show_button && (h("button", { key: '182844cec77fe7c071d779ac117f4a0ffa252622', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: '08ab7162a99c3ec35c16d807813083ac68215f39', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '3ab1583781f571ea9f2d1da2c671bbdc3bf70959', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-search-input"; }
     static get originalStyleUrls() {

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

@@ -241,10 +241,10 @@ export class Ddaselect {
                 'dda-select-open': this.is_open,
                 [`dda-input-size-${this.size}`]: !!this.size,
                 [`dda-validation-${validation}`]: !!validation,
-            } }, this.label && h("label", { key: '87491d828a562c97475241da38308faa32e35fb0', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: '385d35415beb1104eea5329427c6db616954c0da', class: "dda-dropdown-container" }, h("button", { key: 'd86507f9a4ebc1a7cc66e94d2126d3bd80030b19', name: this.toggle_button_name, "aria-label": this.triggerLabel, "aria-labelledby": this.label && !this.triggerLabel ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown, onBlur: this.onTriggerBlur }, current ? current.text : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select an option'), h("i", { key: '672144adba927f8c64a18d01569021f5184dd85b', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'ee31ed5dc81d441998320aff4c700328dd74cb18', id: this.listboxId, role: "listbox", "aria-label": this.triggerLabel || this.label, class: "dda-input-dropdown-list dda-select-list" }, options.length > 0 ? (options.map((option, index) => {
+            } }, this.label && h("label", { key: '87491d828a562c97475241da38308faa32e35fb0', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: '385d35415beb1104eea5329427c6db616954c0da', class: "dda-dropdown-container" }, h("button", { key: 'd86507f9a4ebc1a7cc66e94d2126d3bd80030b19', name: this.toggle_button_name, "aria-label": this.triggerLabel, "aria-labelledby": this.label && !this.triggerLabel ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown, onBlur: this.onTriggerBlur }, current ? current.text : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select an option'), h("i", { key: 'e01493f9eefb060b52d3b6ec97ed33ad8995edbd', class: `material-icons`, "data-icon": this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down', "aria-hidden": "true" })), this.is_open && (h("div", { key: 'bbe506c30d244f64fba15f0e73f17aa063221153', id: this.listboxId, role: "listbox", "aria-label": this.triggerLabel || this.label, class: "dda-input-dropdown-list dda-select-list" }, options.length > 0 ? (options.map((option, index) => {
             const isCurrent = current !== undefined && String(current.id) === String(option.id);
             return (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": isCurrent ? 'true' : 'false', tabIndex: index === activeIndex ? 0 : -1, class: `dda-input-dropdown-item ${isCurrent ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option), key: `${index}-${option.id}` }, option.text));
-        })) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '96cafd84643b25aaf08b0d6984f8690688f0093d', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '0d4c0493b85c32972a7852d9008a1c8cebf81660', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        })) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: 'fdd2cb570b02c071653525fd5205cee0b8d22ff2', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '25684c92c9182e8d5a61df9dc711ccc27870d665', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {

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

@@ -51,10 +51,7 @@ export class DdaStickyFooter {
         if (src || !icon) {
             return h("img", { src: src, alt: text });
         }
-        return [
-            h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, icon),
-            h("span", { class: "visually-hidden" }, text),
-        ];
+        return [h("i", { class: "material-icons material-symbols-outlined", "data-icon": icon, "aria-hidden": "true" }), h("span", { class: "visually-hidden" }, text)];
     }
     // 3.x: any colorTheme other than "light" is dark. 3.x gave an empty image when the dark one
     // was missing; this falls back to the light image instead.
@@ -78,12 +75,12 @@ export class DdaStickyFooter {
         const rightItems = parseJsonProp(this.rightLink, 'right-link');
         return (
         // An <aside>, not a <footer>: the page footer (dda-footer) is the only contentinfo landmark.
-        h("aside", { key: '3646462dd78e1e15798cbde5a74d75191cdd1086', class: { 'dda-footer': true, hidden: this.isHidden, 'has-more-button': !!this.moreIcon }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: 'cef204100853f69250b15c7e71ef2d6b97df7fce', class: "footer-content" }, h("div", { key: '0bc5c97a4406ff13f240becca20212f78d2e96fc', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '70d02e19f02c4dd54cf533351dd70e28f9b9d00f' }, this.happinessIconSrc && (h("li", { key: 'e0202043b9b94772dec0ecce445ab1fff71545a2', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0d3fb7aa55adca64a1b2cd5adb7c6d323ab358fd', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'b6617f12a5834e8c2edd86addc03416f19ea7af3', href: this.happinessIconHref, id: this.happinessIconId }, h("img", { key: '1689a7b0fa925862d7083870c1d90b6e2dbbc4ba', src: this.img(this.happinessIconSrc, this.happinessIconSrcDark), alt: this.happinessIconAlt }))))), this.accessibilityIconSrc && (h("li", { key: 'b2abd53e38316dffba4081fbdc2f32e2733e0f65', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'd59ddfeac093c7e213e5847a645a98cae907efbc', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '81fcac6b35eed1caf49017d18aa0960871ada04c', href: this.accessibilityIconHref, id: this.accessibilityIconId }, h("img", { key: '1fbec3dc783c99e16a66aec2edf6e09bf68e64aa', src: this.img(this.accessibilityIconSrc, this.accessibilityIconSrcDark), alt: this.accessibilityIconAlt }))))), (this.servicesIconSrc || this.servicesIconText) && (h("li", { key: '4a8bfc4edf865cab5d0dfd271d537a2bd889a170', class: "foot-icon-btn" }, h("dda-tooltip", { key: '48bccd2fc8736481a8446c9db30a014ac63d6ad8', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '15c07ad10e9b29434ed40e1a0db429bb90e9531d', href: this.servicesIconHref, id: this.servicesIconId }, h("img", { key: '3ec96b68cd44f4468e219e46764a84d967ed3989', src: this.img(this.servicesIconSrc, this.servicesIconSrcDark), alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: 'c8ebfa04088a46d883e920900ecb8f6880042be4' }, this.servicesIconText))))))), !this.hideMiddleSection && middleLogos.length > 0 && (h("div", { key: 'ffbce0f6070b63588bdf52b5660bdafd02937dc4', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '7b1ffaa87a43a549d5ff7c09acc7eedda8289776', class: "foot-logo" }, middleLogos.map(logo => (h("li", null, h("dda-tooltip", { title_text: logo.tooltip, description: "", position: "top" }, h("a", { href: logo.href }, h("img", { src: logo.src, alt: logo.alt }))))))))), h("div", { key: '1177349fa3617cc0a60cc36569e2005bd8d161b4', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '28cf955988ea1a1b4897015dbeddbcd19913c523', id: this.rightListId, class: { 'foot-right_links': true, 'show-dda-icon': this.rightOpen }, inert: !!this.moreIcon && !this.rightOpen && this.isMobile }, rightItems.length > 0
-            ? rightItems.map(item => (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: item.RightLinkTooltip || item.LinkText, description: "", position: "top" }, h("a", { href: item.href, id: item.itemId, title: item.title }, item.IconName && (h("i", { class: item.IconFamily || 'material-icons', "aria-hidden": "true" }, item.IconName)), h("span", null, item.LinkText))))))
+        h("aside", { key: 'a38f218cd703fcf5b9f74bcbfa81c763f7d16379', class: { 'dda-footer': true, hidden: this.isHidden, 'has-more-button': !!this.moreIcon }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: 'd9e143bb37fd32126f13bb004fb86cff0d0a6514', class: "footer-content" }, h("div", { key: 'f56809d10ff2940727d224bd84548662749dfc0d', class: "dda-footer-item dda-footer-left" }, h("ul", { key: 'b99abca57926edc6ec2d0d2db6a3135951ff0c55' }, this.happinessIconSrc && (h("li", { key: '7417aab3909435bc3b1f2f861d6fb34ccb4b3b74', class: "foot-icon-btn" }, h("dda-tooltip", { key: '146b35fcd36fea616cf4ff653ade32ef29dd36cf', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: '88eebafd1a89ccb3dffe91d9068c9415b19f8969', href: this.happinessIconHref, id: this.happinessIconId }, h("img", { key: 'db58007f1771a78354f96d8243a5dc6de96c3384', src: this.img(this.happinessIconSrc, this.happinessIconSrcDark), alt: this.happinessIconAlt }))))), this.accessibilityIconSrc && (h("li", { key: 'bde1f8193cebe693d583e01a081fdbd3da2024ad', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'c99da2c8e3c174e433248b051c1bebb63bcd4e20', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '34b24d2b28e62a5c4b834520c505a1071f7cee80', href: this.accessibilityIconHref, id: this.accessibilityIconId }, h("img", { key: '9a546f8251b4729cdba9805e8b41f677fe2357da', src: this.img(this.accessibilityIconSrc, this.accessibilityIconSrcDark), alt: this.accessibilityIconAlt }))))), (this.servicesIconSrc || this.servicesIconText) && (h("li", { key: '1bdc059f82428775dbdc40ab47fa2f6fc64c20f5', class: "foot-icon-btn" }, h("dda-tooltip", { key: '225f8f8c74cd21671524f4edc61d11eec7758b7f', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: 'b40a4dfb6c0605f039dda72076f43b9b37f3f1be', href: this.servicesIconHref, id: this.servicesIconId }, h("img", { key: '06be32622870aa8df2ccd0d85283a750ab6c624d', src: this.img(this.servicesIconSrc, this.servicesIconSrcDark), alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: '482793fc7a6be5076860e49803d885bffecbe982' }, this.servicesIconText))))))), !this.hideMiddleSection && middleLogos.length > 0 && (h("div", { key: '4feb7a9bb1fd122fe2ad92de5429773f1f120b7b', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '8095a68de6df90d0d29fc87254ff2195c89257d9', class: "foot-logo" }, middleLogos.map(logo => (h("li", null, h("dda-tooltip", { title_text: logo.tooltip, description: "", position: "top" }, h("a", { href: logo.href }, h("img", { src: logo.src, alt: logo.alt }))))))))), h("div", { key: '8497bea7fa4865ca106925eac31ce9dcb84c2c43', class: "dda-footer-item dda-footer-right" }, h("ul", { key: 'b8782cb62e2d3bfd17bde3ecd0aa347f175b4357', id: this.rightListId, class: { 'foot-right_links': true, 'show-dda-icon': this.rightOpen }, inert: !!this.moreIcon && !this.rightOpen && this.isMobile }, rightItems.length > 0
+            ? rightItems.map(item => (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: item.RightLinkTooltip || item.LinkText, description: "", position: "top" }, h("a", { href: item.href, id: item.itemId, title: item.title }, item.IconName && h("i", { class: item.IconFamily || 'material-icons', "data-icon": item.IconName, "aria-hidden": "true" }), h("span", null, item.LinkText))))))
             : [
                 (this.locationLogoSrc || this.locationButtonIcon) && (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: this.locationButtonText, description: "", position: "top" }, h("a", { href: this.locationButtonHref }, this.renderLinkGraphic(this.locationLogoSrc, this.locationButtonIcon, this.locationButtonText))))),
                 (this.newsButtonSrc || this.newsButtonIcon) && (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: this.newsButtonText, description: "", position: "top" }, h("a", { href: this.newsButtonHref }, this.renderLinkGraphic(this.newsButtonSrc, this.newsButtonIcon, this.newsButtonText))))),
-            ], this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: 'edc740c6c800ef96bc14f5543923f82a041d446c', class: "foot-icon-btn" }, h("dda-tooltip", { key: '827b9a1300bde258043c55733fd3547a9390abda', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: '5d8e8ed55f43e3615722365b9d26ec8f6e1c4b2f', href: this.dubaiaeIconHref, id: this.dubaiaeIconId }, h("img", { key: '4a1f27125a148e86f50f53afa1b930e0de090dd9', class: "dubaiae-text-icon", src: this.img(this.dubaiaeIconSrc, this.dubaiaeIconSrcDark), alt: this.dubaiaeIconAlt }), h("img", { key: '665af1359538e8355621f813a138f0eb9d7bd84b', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: this.dubaiaeIconAlt }))))), this.aiIconSrc && (h("li", { key: '01fee43f185be8bf1294aecbe52b055398b7b543', class: "foot-icon-btn" }, h("dda-tooltip", { key: '820c78282e14472ca990b12041db4ec4e642083e', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '54eb1224021a028677e9b8d23006fbd9beb11fbf', href: this.aiIconHref, id: this.aiIconId }, h("img", { key: '6d1feb742d0ca78e690351535bbd9cbeebe0d5f5', src: this.img(this.aiIconSrc, this.aiIconSrcDark), alt: this.aiIconAlt }))))), this.chatIconSrc && (h("li", { key: 'af4d7ad217827506e99407da3a8101f32d7bde78', class: "foot-icon-btn" }, h("dda-tooltip", { key: '7478d66901785ce407d0a51ab8e80fa538f67768', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '4c8b819b05e00738e6b6a2a2c5361ba3480ec956', href: this.chatIconHref, id: this.chatIconId }, h("img", { key: '316c1e6691521684e21ca55ee6199a959f20528a', src: this.img(this.chatIconSrc, this.chatIconSrcDark), alt: this.chatIconAlt })))))), this.moreIcon && (h("button", { key: '2fc1d6684a5c59a364edf3cd3e7a7c1c03e097a9', type: "button", class: "show-right-icon", "aria-label": this.more_button_label || 'More', "aria-expanded": this.rightOpen ? 'true' : 'false', "aria-controls": this.rightListId, onClick: () => (this.rightOpen = !this.rightOpen) }, h("i", { key: 'e7b3e9c6ba9dec1af710039255832e5a2242b8bd', class: this.moreIconFamily || 'material-icons', "aria-hidden": "true" }, this.moreIcon)))))));
+            ], this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: '8683037a1c3c5b02d2961bac4c3a92d8a44b6731', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0c311281571ecd6cbc482a7f8624a3c6052c03f7', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: 'f8161e6c9f7ed1ff29b99ee93ce6a2353a52ddf9', href: this.dubaiaeIconHref, id: this.dubaiaeIconId }, h("img", { key: 'eef6cff15c7309b1f1aa23b390a916893ec5ed31', class: "dubaiae-text-icon", src: this.img(this.dubaiaeIconSrc, this.dubaiaeIconSrcDark), alt: this.dubaiaeIconAlt }), h("img", { key: '0b9e70320b28dce78b79e6fc0a6a627d34b66948', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: this.dubaiaeIconAlt }))))), this.aiIconSrc && (h("li", { key: '2b6c9cb34fc48df8f1ed39320bd03f08ac82f3f8', class: "foot-icon-btn" }, h("dda-tooltip", { key: '08d05108d4234ab4c3c184eaaf3552ea7a2a733b', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: 'e1258a67593fca3e63296b75f0695c15ea8ef10a', href: this.aiIconHref, id: this.aiIconId }, h("img", { key: '5b94918922d592a684535b0fedd3749d73e57c14', src: this.img(this.aiIconSrc, this.aiIconSrcDark), alt: this.aiIconAlt }))))), this.chatIconSrc && (h("li", { key: '9d7763c1f7520c60b2efbd5eaaf50676e7ac4eb6', class: "foot-icon-btn" }, h("dda-tooltip", { key: '2eec4cf4801bef0e213f8c7076424adcde7d5605', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: 'd4b770c426e7c61cc29dda658f51ea84e64d54cf', href: this.chatIconHref, id: this.chatIconId }, h("img", { key: 'acb033966851117af485fab4fd9fb44fb6960c7d', src: this.img(this.chatIconSrc, this.chatIconSrcDark), alt: this.chatIconAlt })))))), this.moreIcon && (h("button", { key: '0096cb0859920d2db92a934d6a95e117923ee6e2', type: "button", class: "show-right-icon", "aria-label": this.more_button_label || 'More', "aria-expanded": this.rightOpen ? 'true' : 'false', "aria-controls": this.rightListId, onClick: () => (this.rightOpen = !this.rightOpen) }, h("i", { key: '6fb19f4799d2998d12668a940b6e52a2622d631a', class: this.moreIconFamily || 'material-icons', "data-icon": this.moreIcon, "aria-hidden": "true" })))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {

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

@@ -44,7 +44,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: '30474ea86c4c1c8fff84f5c09606e1c8a5b88a84' }, h("div", { key: '47bee1548f4f93e7b09b7cb8f28e61d5ddf91f50', 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: '30474ea86c4c1c8fff84f5c09606e1c8a5b88a84' }, h("div", { key: '47bee1548f4f93e7b09b7cb8f28e61d5ddf91f50', 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`, "data-icon": this.parsedIcons[index] || "", "aria-hidden": "true" }), h("span", null, title)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {

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

@@ -158,7 +158,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: 'b71d5885604e71af4188d097727c875d7a69ef47', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '497c95108fffd9e12adf08480e8877a9a3cf7ee9', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'caa536f2039c9c85b922d34a5a2f8ee48beeb9f8', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '9bb54ec991d1b38f712974f37741b032056a7a5e', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '24c199bd4481dc7f3061dd1d8f5c78c581be93dc', id: this.errorId, class: "dda-error-message" }, h("span", { key: 'bfa8ef3356a3407130cfb08499c2478b2a70572e', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '1fe75706036a93d63039822dbb8da1d1c659f379', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '52001e0f2bdd24ac1d61f14b17e6a174e01ace11', 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: 'b71d5885604e71af4188d097727c875d7a69ef47', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '497c95108fffd9e12adf08480e8877a9a3cf7ee9', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '5a5256b6f1c969af78303f0da1992094905bb004', class: "material-icons  material-symbols-outlined", "data-icon": "info", "aria-hidden": "true" }), " ", this.helper_text), h("span", { key: 'a7835936670a117faf14a25406bf9db731ff7bac', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'e4367908c85d640d5fd53cde3f679fdcd76310b4', id: this.errorId, class: "dda-error-message" }, h("span", { key: '99b1bdab7ebeb1b901d7f0e9dc15bdc78fff6b08', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '96b4248c674a9458d2730d6c6a58d5bd856af74b', class: "material-icons  material-symbols-outlined", "data-icon": "info", "aria-hidden": "true" }), " ", this.error_message), h("span", { key: '004f5506c5990946017b7b218223dead257c2fc9', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     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: 'adf18a25d016f46bc87b4a1e31241ca162b333e0' }, h("div", { key: '0737db71a77843ea82b477a2f53cf86edf49d8e9', class: 'dda-card' }, h("div", { key: '798f2db5233a36522d7f84d89119cad74d11a006', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '8c6793c79377b6e5eb0e0ab9bd18a2c1ca4f253a' }, !!this.icon && (h("span", { key: '4570999010919bbf9842e3cd6d3fc4f55dec8c82', class: 'dda-card-icon' }, h("i", { key: 'e80483b0a3da315a7535ab1bda1a2885681152b3', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'b4185ea5c24a6675dc9d0eeef4d179e99130528f', class: 'dda-card-icon' }, h("img", { key: '56306706dce39081bd2cb26bedd0f40b0af6f03c', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: '7c2a2790cd3115a1631a45c49abe98b5467c2e82', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'fd207fb19f40281ba00d9b0310ef8a744e9ad907', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'ec7277518f56c8bc596cc1786b6bc950f1454965', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '2191736e59506877a9a094eca2a8caa80056d9c4' }, h("i", { key: 'beb1f6805dc66f93a85c7e4f47eeab22c38bf6c5', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: 'bbaabacc33bc9bcacfbd20e54a38058339126169' })))));
+        return (h(Host, { key: 'adf18a25d016f46bc87b4a1e31241ca162b333e0' }, h("div", { key: '0737db71a77843ea82b477a2f53cf86edf49d8e9', class: 'dda-card' }, h("div", { key: '798f2db5233a36522d7f84d89119cad74d11a006', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '8c6793c79377b6e5eb0e0ab9bd18a2c1ca4f253a' }, !!this.icon && (h("span", { key: '4570999010919bbf9842e3cd6d3fc4f55dec8c82', class: 'dda-card-icon' }, h("i", { key: 'ade4f5236d49e7293640459ddf44451932a330cc', class: 'material-icons', "data-icon": this.icon, "aria-hidden": "true" }))), !!this.image && (h("span", { key: 'c80b5cb48244a963083ab0af3898683c0c4d6594', class: 'dda-card-icon' }, h("img", { key: '7769562f143f9218715f257ba8acf7e3ffe7a800', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'a2f859019243156a1333e0aab1501d4e84ebe74a', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'ac2955d7afae34c97aceee9d32bd47719a98e8e6', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '04cdc437a125da70b36fa73caba5795031d3c458', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '3a82a167f74e8c90daa3b698b800862886c8270e' }, h("i", { key: '5ebd1cbab2569ebe714e5909cd327d11d718ac28', class: 'material-icons', "data-icon": this.linkicon, "aria-hidden": "true" }))))))), h("slot", { key: 'f84ddf9b4c8cdb65d7b2b61d8c6742846252f39d' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {

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

@@ -72,7 +72,7 @@ export class DdaSegmentedTabs {
         return (h("div", { key: '182bb79c4e5cc855c33642c649185c2f7da80884', 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));
+            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", "data-icon": item, "aria-hidden": "true" }))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));
         })));
     }
     static get is() { return "dda-segmented-tabs"; }

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: '1d0b6cbc4fb3f11bc24adce00250b43a6a42374e' }, h("div", { key: '8fa15dad62552c04527e97e7b98e1450c61cf9e9', 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`, "aria-hidden": "true" }, 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", "aria-hidden": "true" }, "chevron_right"))))))));
+        return (h(Host, { key: '1d0b6cbc4fb3f11bc24adce00250b43a6a42374e' }, h("div", { key: '8fa15dad62552c04527e97e7b98e1450c61cf9e9', 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`, "data-icon": step.icon, "aria-hidden": "true" }))), 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", "data-icon": "chevron_right", "aria-hidden": "true" }))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/global/global.css

@@ -747,9 +747,9 @@
    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;
+  /* Room inside the row for the hover and focus lift (12px above, and the focus ring 4px more)
+     and the pointer (9px below); a scrolling box clips anything outside it. */
+  --dda-quick-links-pad-top: 16px;
   --dda-quick-links-pad-bottom: 12px;
   --dda-quick-links-fade: 32px;
 }
@@ -878,7 +878,8 @@
   :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);
+    /* Read by the row's padding, so dda-home-carousel's <ul> gets it too (see ul.quick-links). */
+    --dda-quick-links-pad-top: 20px;
     scrollbar-color: var(--dda-on-surface-variant-40) transparent;
   }
   .quick-links .link-item {
@@ -966,7 +967,7 @@
     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);
+    --dda-quick-links-pad-top: 16px;
     scrollbar-color: rgba(255, 255, 255, 0.7) transparent;
   }
   .quick-links .link-item {
@@ -994,8 +995,13 @@
 }
 
 /* dda-home-carousel: its list is a .quick-links row; each <li> holds one dda-banner-card. */
+/* global.css resets every <ul> to margin: 0 and padding: 0 with !important. On this row that removed
+   the top padding the hover lift rises into, so a raised card was cut off, and the auto margins
+   that centre it, so the row ran 90vw from the container's start edge and out of the container. */
 ul.quick-links {
-  margin-block: 0;
+  width: min(90vw, 100%);
+  margin: 0 auto !important;
+  padding: var(--dda-quick-links-pad-top) 20px var(--dda-quick-links-pad-bottom) !important;
   list-style: none;
 }
 .quick-links > .dda-home-carousel-item {
@@ -1046,6 +1052,38 @@ button.link-item {
   }
 }
 
+/* Short screens (a laptop zoomed past about 115%, or a phone on its side): dda-home-banner grows
+   with its text (home-banner.css), so the cards follow it in normal flow instead of sitting on it.
+   They wrap instead of scrolling sideways, each at least 220px wide or the row's width, so at 400%
+   zoom every card is in view at a readable size, one under another. */
+@media screen and (max-height: 700px) {
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) {
+    position: relative;
+    bottom: auto;
+  }
+  :is(.quick-links-wrap, .dda-home-quick-links-wrap) .quick-links,
+  .quick-links {
+    flex-wrap: wrap;
+    overflow: visible;
+    scroll-snap-type: none;
+    -webkit-mask-image: none;
+    mask-image: none;
+    animation: none;
+  }
+  .quick-links .link-item,
+  .quick-links > .dda-home-carousel-item {
+    flex: 1 1 min(220px, 100%);
+    height: auto;
+    margin-top: 0;
+    border: solid 1px #ddd;
+  }
+  /* The hover and focus lift would push a card into the row above it. */
+  .quick-links .link-item:hover,
+  .quick-links .link-item:focus-visible {
+    margin-top: 0;
+  }
+}
+
 .dda-card {
   position: relative;
   display: -ms-flexbox;
@@ -2473,6 +2511,90 @@ body {
     }
 }
 
+/* 992px and below the links are 48px round buttons in one row. Six of them with their spacing
+   took about 424px, so on a 320-375px phone, or a laptop zoomed to 400% (WCAG 1.4.10), the last
+   buttons ran off the screen. Here the spacing narrows with the screen and each button shrinks
+   from 48px when the row does not fit, to no less than 32px, so up to eight fit at 320px. The
+   right-hand links in the "more" menu keep their size. */
+@media (max-width: 992px) {
+    .dda-footer {
+        padding: 0 clamp(8px, 4vw, 20px);
+    }
+    .dda-footer-item,
+    .dda-footer-item ul {
+        min-width: 0;
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn {
+        --dda-foot-btn-pad: clamp(2px, 1vw, 8px);
+        flex: 0 1 calc(48px + 2 * var(--dda-foot-btn-pad));
+        min-width: calc(32px + 2 * var(--dda-foot-btn-pad));
+        padding: 0 var(--dda-foot-btn-pad);
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn :is(dda-tooltip, .dda-tooltip-container) {
+        display: flex;
+        width: 100%;
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn a {
+        width: 48px;
+        max-width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+    }
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn a img {
+        max-width: 70%;
+        object-fit: contain;
+    }
+}
+/* The short landscape bar above makes the buttons 35px. */
+@media only screen and (orientation: landscape) and (max-width: 768px) {
+    :is(.dda-footer-item:not(.dda-footer-right), .dda-footer:not(.has-more-button) .dda-footer-right) li.foot-icon-btn {
+        flex-basis: calc(35px + 2 * var(--dda-foot-btn-pad));
+    }
+}
+
+/* A tooltip is centred over its button and wider than it, so over the first and last buttons it
+   ran past the screen edge (3-7px on desktop, about 20px on a phone). Those two line up with the
+   button's outer edge instead, and their arrow moves near the button's centre: 16px in on desktop,
+   24px on the round buttons. In the "more" menu every link sits at the end edge. */
+.dda-footer .footer-content > .dda-footer-item:first-child li.foot-icon-btn:first-child .dda-tooltip-box.top {
+    left: auto;
+    inset-inline-start: 0;
+    transform: none;
+}
+.dda-footer .dda-footer-right li.foot-icon-btn:last-child .dda-tooltip-box.top {
+    left: auto;
+    inset-inline-end: 0;
+    transform: none;
+}
+.dda-footer .footer-content > .dda-footer-item:first-child li.foot-icon-btn:first-child .dda-tooltip-box.top::before,
+.dda-footer .footer-content > .dda-footer-item:first-child li.foot-icon-btn:first-child .dda-tooltip-box.top::after {
+    left: auto;
+    margin-inline-start: 0;
+    inset-inline-start: var(--dda-foot-tip-arrow, 6px);
+}
+.dda-footer .dda-footer-right li.foot-icon-btn:last-child .dda-tooltip-box.top::before,
+.dda-footer .dda-footer-right li.foot-icon-btn:last-child .dda-tooltip-box.top::after {
+    left: auto;
+    margin-inline-start: 0;
+    inset-inline-end: var(--dda-foot-tip-arrow, 6px);
+}
+@media (max-width: 992px) {
+    .dda-footer {
+        --dda-foot-tip-arrow: 14px;
+    }
+    .dda-footer.has-more-button .dda-footer-right li.foot-icon-btn .dda-tooltip-box.top {
+        left: auto;
+        inset-inline-end: 0;
+        transform: none;
+    }
+    .dda-footer.has-more-button .dda-footer-right li.foot-icon-btn .dda-tooltip-box.top::before,
+    .dda-footer.has-more-button .dda-footer-right li.foot-icon-btn .dda-tooltip-box.top::after {
+        left: auto;
+        margin-inline-start: 0;
+        inset-inline-end: var(--dda-foot-tip-arrow);
+    }
+}
+
 .dda-dashboard-sidebar {
   position: fixed;
   top: 0;
@@ -4009,6 +4131,15 @@ button {
   cursor: pointer;
 }
 
+/* Icon-font ligatures draw from data-icon, not from text in the element: the icon name is then
+   not text in the page, so an accessibility checker does not read "chevron_right" as a visible
+   label that the button's accessible name must contain (WCAG 2.5.3). The icons are aria-hidden;
+   the button's aria-label or text names it. Material classes only, so another icon font's own
+   ::before glyph is untouched. */
+:is(.material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp, .material-icons-two-tone, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp)[data-icon]::before {
+  content: attr(data-icon);
+}
+
 ul {
   margin: 0 !important;
   padding: 0 !important;