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

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

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

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

@@ -27,6 +27,17 @@ export class DdaStickyFooter {
         this.resizeObserver = null;
         document.documentElement.style.removeProperty('--dda-sticky-footer-height');
     }
+    // An image wins when both are set, so pages that set both keep their current look.
+    // A Material icon is decorative; the visually hidden text names the link.
+    renderLinkGraphic(src, icon, text) {
+        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),
+        ];
+    }
     handleScroll() {
         const currentScrollY = window.scrollY;
         this.isHidden = currentScrollY > this.lastScrollY;
@@ -35,7 +46,7 @@ export class DdaStickyFooter {
     render() {
         return (
         // An <aside>, not a <footer>: the page footer (dda-footer) is the only contentinfo landmark.
-        h("aside", { key: '8b7555a98880560dfd74702064d3b6f51e5fda62', class: { 'dda-footer': true, 'hidden': this.isHidden }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: 'f095ce4be877b0eb1b3c80036751914170810d59', class: "footer-content" }, h("div", { key: 'a88f1a42de024b505e2de483009c3a181467a4a5', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '7628fe339c13cc43b072e91bb9645efb218687c5' }, h("li", { key: '47e95fdff5f9a0a4fc37b50450086669627fd838', class: "foot-icon-btn" }, h("dda-tooltip", { key: '32060fc43b2d7523ed1adc523b2bc068ae12be54', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'fcd864c4fcb58dd5f3cf3ca93130bb2efdac6467', href: this.happinessIconHref }, h("img", { key: 'e291e4e8240b6d9c7714d0ddcd843f605ee2c38f', src: this.happinessIconSrc, alt: this.happinessIconAlt })))), h("li", { key: 'f95c812837027095cbde1d1abfdfe8ea12aa17cb', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0f3fbc004c2eb30764b35525fa4ca3796590c27b', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '5d1f11e1023b843ead46ccd5c0ce2d906a26bdc7', href: this.accessibilityIconHref }, h("img", { key: 'c17880d53cf0da80b2f88f3a40656e368931aa2f', src: this.accessibilityIconSrc, alt: this.accessibilityIconAlt })))), h("li", { key: '67b5d0f991e370a9027d653b5dcf2848419b4411', class: "foot-icon-btn" }, h("dda-tooltip", { key: '1e446a1ca6b52620a2a88b3ab3c4255652ac7ea4', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '273197b8cdc6b67c589c3ca99881f314e9c7b160', href: this.servicesIconHref }, h("img", { key: '084e3447170d9f8d68f29d15483c744453e99f17', src: this.servicesIconSrc, alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: 'c59c80ada5e3782c3a69d4a9dfe0ce80edfeebec' }, this.servicesIconText)))))), this.hideMiddleSection == false && (h("div", { key: 'e78274d2cbe470419fe0492652a5c99251cd3d35', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: 'ec7f028fb6b68bf88946947ae0e80662ad4ec747', class: "foot-logo" }, h("li", { key: 'bc5dfda4aed09e2a24803a7ef7d68970b7aba4ea' }, h("dda-tooltip", { key: '8d0a3eaa935b67be17d30a0580c104493f635d96', title_text: this.firstLogoTooltip, description: "", position: "top" }, h("a", { key: 'a7ab2f09ccc3a7d4bb7b9fb9c417b046434fce45', href: this.firstLogoHref }, h("img", { key: '44de6f24ff6af36cfbc669c40bb5d14c22af41c9', src: this.firstLogoSrc, alt: this.firstLogoAlt })))), h("li", { key: '6b74fa28466a3177b67aa526c51e278ab10697b3' }, h("dda-tooltip", { key: 'b98f3a21a83e2b2ca6dd7f9924c5f64d1720b835', title_text: this.secondLogoTooltip, description: "", position: "top" }, h("a", { key: 'd5e01a799a20b66928ef2e523fff5ee39b61010c', href: this.secondLogoHref }, h("img", { key: 'abcfb1d9b8938365b162a48397854ffffb93b89c', src: this.secondLogoSrc, alt: this.secondLogoAlt })))), h("li", { key: '71ba867ee5095e2fb5cdae4bfafa2d19d33c0ece' }, h("dda-tooltip", { key: '9a83c73b7052de260214bf0fe21bb9f95725abe7', title_text: this.thirdLogoTooltip, description: "", position: "top" }, h("a", { key: '585dd0222686a53b5e393ac1f1c6d5c5818dc01c', href: this.thirdLogoHref }, h("img", { key: 'fb59f4b9ee8eb253f320a0b97f09716efaa346d8', src: this.thirdLogoSrc, alt: this.thirdLogoAlt }))))))), h("div", { key: '1eeaa381345f99ae4d2f9a76f9bd84e111d52ce0', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '36446af149436ca1267f23c5f2ed6f22bf3c5e8b' }, h("li", { key: 'aa6e06a5a19663667ab9feb634c0ad548475e8e8', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'f4d38372cf67c8ccd2d4353df0c19bcc8d9e823b', title_text: this.locationButtonText, description: "", position: "top" }, h("a", { key: '135a5585f0070950489d7ae8d70059f6ba622f07', href: this.locationButtonHref }, h("img", { key: '1b8d779b04d8ee01b52106422d1b41c25439ce50', src: this.locationLogoSrc, alt: this.locationButtonText })))), h("li", { key: '88b6ee69c27d6bea4be5fb6de76c4256959f596a', class: "foot-icon-btn" }, h("dda-tooltip", { key: '65625b7817b9ca848c18245c8c048906a1b6f001', title_text: this.newsButtonText, description: "", position: "top" }, h("a", { key: '6495efa83387315879c0c01976fde5945500b646', href: this.newsButtonHref }, h("img", { key: '4e6a3479521faf650564e34cf8ead331804c1cc1', src: this.newsButtonSrc, alt: this.newsButtonText })))), h("li", { key: '6cf00a0f8652ed203dd3bd8cbd9e11def0c6da19', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'c003416a3509d4aefb9ff556794c99a47b7a3129', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: 'cf708091045b7b0c3d219809476b8f733e79f3c3', href: this.aiIconHref }, h("img", { key: 'bdbec68b408cd6231020ff55690046e76d608e6e', src: this.aiIconSrc, alt: this.aiIconAlt })))), h("li", { key: '20faca8ed93e48c131d71cae5d5cf0a4c5e4d6ad', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'f9bcbb3b6fdec9feaa18843c9ed447d11ac3ceaa', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '16449ed75e0d423c1f7cb00b727bef1664a0af03', href: this.chatIconHref }, h("img", { key: 'f90cab5d2d3f4f716565588a5423ffbdb9528330', src: this.chatIconSrc, alt: this.chatIconAlt })))))))));
+        h("aside", { key: '00ce26f6e8b730f0e420aab0a2a1720fcd94b733', class: { 'dda-footer': true, 'hidden': this.isHidden }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: '07119c454ae696291d76afa97b4b59f2df423a01', class: "footer-content" }, h("div", { key: '35924650b1eb37ac3c47118f316be49e9429da73', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '6b3fd478402ff939eac034bfe8c2f0acc3a8be5b' }, h("li", { key: '4e7729bb6458b31af7af0eb2552964dba639091b', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'cf4829d16ea19b13b6d658ef257f0fb525d8db30', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: '1fe23758b0c494d38667c716d13cd4e445705e65', href: this.happinessIconHref }, h("img", { key: '0cee47565071942c2a522c49e315c63f9019091a', src: this.happinessIconSrc, alt: this.happinessIconAlt })))), h("li", { key: '473cd525bb10eb696790b1f1da97910c0f238b52', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'e4af8610afa278390f1b353c53a11d76f8960cd2', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: 'df65a784e936c03a3d7a97e0a1f42d7c702bf8c4', href: this.accessibilityIconHref }, h("img", { key: '2420fef29b01607c95337ba17fbc571f32380dc3', src: this.accessibilityIconSrc, alt: this.accessibilityIconAlt })))), h("li", { key: '875bf4dcc2fa35a4c43274e585368516a1f0c419', class: "foot-icon-btn" }, h("dda-tooltip", { key: '960e9e83b45ec1ca97ed5e3cf2bf0e4c64404f6c', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '8989d62bdeb6ad5275ac8b83eb8d3365c49c7c8d', href: this.servicesIconHref }, h("img", { key: '64f1bfddc75b364889fcccfaa920f6554de854ac', src: this.servicesIconSrc, alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: 'fcbb3557e2611a607ecc9d689a7185826e8a1536' }, this.servicesIconText)))))), this.hideMiddleSection == false && (h("div", { key: 'e2943640b40aba3efa7994da339c001c208e255e', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: 'df1cf3eeb987812cf6256db4d43b7a4806aa743d', class: "foot-logo" }, h("li", { key: 'fa5a60952a04194b6097d0d65b6528360497ebe0' }, h("dda-tooltip", { key: '2e2c3565b9cd52682d5e93d8f50eba6fed02206b', title_text: this.firstLogoTooltip, description: "", position: "top" }, h("a", { key: 'e8bbd7842372bf1d9ea2c3a226e7097ad0e3afe7', href: this.firstLogoHref }, h("img", { key: 'c80985d96e2cb296b7a1c3a8eb72da5d5aaaeb16', src: this.firstLogoSrc, alt: this.firstLogoAlt })))), h("li", { key: 'f7042bd13a2da6f3a2f7725adebd3a8dfc7cb02c' }, h("dda-tooltip", { key: '7f500304b12bff7ad406eeb55181d902ef778e04', title_text: this.secondLogoTooltip, description: "", position: "top" }, h("a", { key: '7c4139a8a3cef3a8992d774103ed6d9843227a04', href: this.secondLogoHref }, h("img", { key: 'fed6b5271a0361d09389b7eea46aaa282a92bd6d', src: this.secondLogoSrc, alt: this.secondLogoAlt })))), h("li", { key: 'd94e97c4317e8720f36bea823388182f2abf8e79' }, h("dda-tooltip", { key: '37772845af7fb85d10f4b973fb89d4bc9a310d55', title_text: this.thirdLogoTooltip, description: "", position: "top" }, h("a", { key: 'd49a6c608cd0280909824142bf4f3c65ca53888a', href: this.thirdLogoHref }, h("img", { key: '334a184a61e0962bdfdc2ebbcb0955a50fcf496f', src: this.thirdLogoSrc, alt: this.thirdLogoAlt }))))))), h("div", { key: 'cf17c11f5b494003dddffc9b4d7a6ba13c1757c6', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '96a7fdcab29367a7b26fa03bbac36b03c61d168f' }, h("li", { key: 'e3167fa25515c3127710b621053b31d12cd76359', class: "foot-icon-btn" }, h("dda-tooltip", { key: '87c90369dbc48510aaaedb8486dd445876f1e093', title_text: this.locationButtonText, description: "", position: "top" }, h("a", { key: '0252c18219bd05b4c892277a71cd00db23b84a31', href: this.locationButtonHref }, this.renderLinkGraphic(this.locationLogoSrc, this.locationButtonIcon, this.locationButtonText)))), h("li", { key: 'bff9d7b611382015d640fdd1e04a3a7e81111c3a', class: "foot-icon-btn" }, h("dda-tooltip", { key: '5643009f571ff58459fb29745531f0dc3c6a58fb', title_text: this.newsButtonText, description: "", position: "top" }, h("a", { key: '17c34d76970d9ac60c0072f37afbcad0bf72c875', href: this.newsButtonHref }, this.renderLinkGraphic(this.newsButtonSrc, this.newsButtonIcon, this.newsButtonText)))), h("li", { key: '861299a89994f344afa277f6b0857ab37ae2b187', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0432ac8517824db42254f3620f9b1f6a602b8d12', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: 'ccb2edccc8070848fb0fe6609f21c2e2a10dbaba', href: this.aiIconHref }, h("img", { key: '76cb10b57d1a7fe9874c48ed2a3ba70694b548f1', src: this.aiIconSrc, alt: this.aiIconAlt })))), h("li", { key: '44095b5fc6402f101b2b89e4737d0c0ff96da9c3', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'd6e55bc78f2bcdb364e854c15c8e019190fa1da1', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '4e683ae48ffa83c4232a48bb08ee99948e606303', href: this.chatIconHref }, h("img", { key: '4d3b25afbdd7ff43ba5b17d3a6624552294986db', src: this.chatIconSrc, alt: this.chatIconAlt })))))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {
@@ -556,7 +567,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Image URL of the location icon."
+                    "text": "Image URL of the location icon. Takes precedence over `locationButtonIcon`."
                 },
                 "getter": false,
                 "setter": false,
@@ -594,7 +605,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Not used: the current markup does not render it."
+                    "text": "Material Symbols icon name of the location link, shown when `locationLogoSrc` is not set."
                 },
                 "getter": false,
                 "setter": false,
@@ -632,7 +643,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Image URL of the news icon."
+                    "text": "Image URL of the news icon. Takes precedence over `newsButtonIcon`."
                 },
                 "getter": false,
                 "setter": false,
@@ -670,7 +681,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Not used: the current markup does not render it."
+                    "text": "Material Symbols icon name of the news link, shown when `newsButtonSrc` is not set."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -13,6 +13,14 @@ export default {
         hideMiddleSection: {
             control: { type: 'boolean' },
             description: 'Hides the middle section of the footer',
+        },
+        locationButtonIcon: {
+            control: { type: 'text' },
+            description: 'Material Symbols icon of the location link, shown when the location image is empty',
+        },
+        newsButtonIcon: {
+            control: { type: 'text' },
+            description: 'Material Symbols icon of the news link, shown when the news image is empty',
         }
     },
     component: 'dda-sticky-footer',
@@ -114,7 +122,7 @@ Default.args = {
     newsButtonHref: '#',
     newsButtonText: 'News',
     newsButtonSrc: news_pin,
-    newsButtonIcon: 'news_on',
+    newsButtonIcon: 'newspaper',
     aiIconHref: '#',
     aiIconSrc: digital_ai,
     aiIconAlt: 'Digital AI',
@@ -125,3 +133,6 @@ Default.args = {
     chatIconTooltip: 'Online Chat',
     hideMiddleSection: false,
 };
+// The location and news links show a Material Symbols icon when their image is not set.
+export const MaterialIcons = Template.bind({});
+MaterialIcons.args = Object.assign(Object.assign({}, Default.args), { locationButtonSrc: '', locationButtonIcon: 'location_on', newsButtonSrc: '', newsButtonIcon: 'newspaper' });

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

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

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

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

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

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

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

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

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

@@ -28,7 +28,7 @@ export class DdaUiCard {
     }
     render() {
         const HeadingTag = this.headingTag;
-        return (h(Host, { key: 'f2a0d78609b1432f94a712b2d69690ed10c422b3' }, h("div", { key: 'bc36fddf6be566d97d23530740e5de9f32bb192e', class: 'dda-card' }, h("div", { key: '55b2f3a35669305d0dcf5c3fe9bdd3dd70a444a1', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: 'e6298ad703d39c3ed69ab64070db7d2580529d33' }, !!this.icon && (h("span", { key: '2f1b9f7570d5ab46f857cebb594a1d71cf83a341', class: 'dda-card-icon' }, h("i", { key: 'efda1c1873e48cae86bbd9feb5a90c7529f3db49', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '802a4ca867e351b24af54b4da78ec12c2d18b890', class: 'dda-card-icon' }, h("img", { key: 'ff6975cf36520a9c3ddbecc16252bcc0769a1597', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'd769a32b303d689217aa77973804347fb3488b02', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '0bdaa58c5ea5db75c20c7b0031dad48ce7d1ed96', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '87d11b05cef8ab0b01de355d22b1ef9297a80302', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '8cb9e3c6e51769fca7fa47d22d61a98164209002' }, h("i", { key: 'ba556e79ad6176ee2b79097a78ad826d9c02ecee', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '11921fac820a992ed35e0dab39bcd36a39b2244f' })))));
+        return (h(Host, { key: '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' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {

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

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

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

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

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

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

package/dist/collection/global/global.css

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