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

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

@@ -1,10 +1,22 @@
 import { h } from "@stencil/core";
+import { parseJsonProp } from "../../utils/parse-json-prop";
+let stickyFooterCount = 0;
 export class DdaStickyFooter {
     constructor() {
+        /** Accessible name of the "more" button. Default, and fallback for an empty value: `More`. */
+        this.more_button_label = 'More';
+        /** `dark` uses the `*-src-dark` images; an image without a dark version keeps its light image. Default: `light`. */
+        this.colorTheme = 'light';
         /** Accessible name of the bar's `<aside>` landmark. Default: `Quick actions`. */
         this.aria_label = 'Quick actions';
         this.isHidden = false;
         this.lastScrollY = 0;
+        this.rightOpen = false;
+        this.rightListId = `dda-sticky-footer-right-${++stickyFooterCount}`;
+        this.isMobile = false;
+        this.onMobileChange = (event) => (this.isMobile = event.matches);
+        /** Hides the middle logo section. Default: `false` (the logos show when at least one is set). */
+        this.hideMiddleSection = false;
     }
     componentWillLoad() {
         this.handleScroll = this.handleScroll.bind(this);
@@ -19,13 +31,19 @@ export class DdaStickyFooter {
             });
             this.resizeObserver.observe(bar);
         }
+        if (typeof window.matchMedia === 'function') {
+            this.mobileQuery = window.matchMedia('(max-width: 992px)');
+            this.isMobile = this.mobileQuery.matches;
+            this.mobileQuery.addEventListener('change', this.onMobileChange);
+        }
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         window.removeEventListener('scroll', this.handleScroll);
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
         document.documentElement.style.removeProperty('--dda-sticky-footer-height');
+        (_b = this.mobileQuery) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this.onMobileChange);
     }
     // 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.
@@ -38,15 +56,34 @@ export class DdaStickyFooter {
             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.
+    img(light, dark) {
+        return this.colorTheme !== 'light' && dark ? dark : light;
+    }
     handleScroll() {
         const currentScrollY = window.scrollY;
         this.isHidden = currentScrollY > this.lastScrollY;
         this.lastScrollY = currentScrollY;
     }
     render() {
+        const middleItems = parseJsonProp(this.middleLink, 'middle-link');
+        const middleLogos = (middleItems.length > 0
+            ? middleItems.map(item => ({ href: item.href, src: this.img(item.src, item.srcDark), alt: item.alt, tooltip: item.LogoTooltip }))
+            : [
+                { href: this.firstLogoHref, src: this.firstLogoSrc, alt: this.firstLogoAlt, tooltip: this.firstLogoTooltip },
+                { href: this.secondLogoHref, src: this.secondLogoSrc, alt: this.secondLogoAlt, tooltip: this.secondLogoTooltip },
+                { href: this.thirdLogoHref, src: this.thirdLogoSrc, alt: this.thirdLogoAlt, tooltip: this.thirdLogoTooltip },
+            ]).filter(logo => logo.src);
+        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: '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 })))))))));
+        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))))))
+            : [
+                (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)))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {
@@ -137,6 +174,44 @@ export class DdaStickyFooter {
                 "reflect": false,
                 "attribute": "happiness-icon-tooltip"
             },
+            "happinessIconId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the happiness link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "happiness-icon-id"
+            },
+            "happinessIconSrcDark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Happiness image for `color-theme=\"dark\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "happiness-icon-src-dark"
+            },
             "accessibilityIconHref": {
                 "type": "string",
                 "mutable": false,
@@ -213,6 +288,44 @@ export class DdaStickyFooter {
                 "reflect": false,
                 "attribute": "accessibility-icon-tooltip"
             },
+            "accessibilityIconId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the accessibility (04) link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility-icon-id"
+            },
+            "accessibilityIconSrcDark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessibility (04) image for `color-theme=\"dark\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessibility-icon-src-dark"
+            },
             "servicesIconHref": {
                 "type": "string",
                 "mutable": false,
@@ -308,6 +421,44 @@ export class DdaStickyFooter {
                 "reflect": false,
                 "attribute": "services-icon-text"
             },
+            "servicesIconId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the services link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "services-icon-id"
+            },
+            "servicesIconSrcDark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Services image for `color-theme=\"dark\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "services-icon-src-dark"
+            },
             "firstLogoHref": {
                 "type": "string",
                 "mutable": false,
@@ -536,6 +687,31 @@ export class DdaStickyFooter {
                 "reflect": false,
                 "attribute": "third-logo-tooltip"
             },
+            "middleLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | MiddleLinkItem[]",
+                    "resolved": "MiddleLinkItem[] | string",
+                    "references": {
+                        "MiddleLinkItem": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-sticky-footer/dda-sticky-footer.tsx",
+                            "id": "src/components/dda-sticky-footer/dda-sticky-footer.tsx::MiddleLinkItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Middle logos as a list (3.x). JSON array, or array property, of `{ LogoTooltip, href, src, srcDark, alt }`. When set, it replaces the first, second and third logo props."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "middle-link"
+            },
             "locationButtonHref": {
                 "type": "string",
                 "mutable": false,
@@ -764,6 +940,44 @@ export class DdaStickyFooter {
                 "reflect": false,
                 "attribute": "ai-icon-tooltip"
             },
+            "aiIconId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the AI assistant link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ai-icon-id"
+            },
+            "aiIconSrcDark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "AI assistant image for `color-theme=\"dark\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ai-icon-src-dark"
+            },
             "chatIconHref": {
                 "type": "string",
                 "mutable": false,
@@ -840,6 +1054,280 @@ export class DdaStickyFooter {
                 "reflect": false,
                 "attribute": "chat-icon-tooltip"
             },
+            "chatIconId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the chat link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chat-icon-id"
+            },
+            "chatIconSrcDark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chat image for `color-theme=\"dark\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chat-icon-src-dark"
+            },
+            "rightLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | RightLinkItem[]",
+                    "resolved": "RightLinkItem[] | string",
+                    "references": {
+                        "RightLinkItem": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-sticky-footer/dda-sticky-footer.tsx",
+                            "id": "src/components/dda-sticky-footer/dda-sticky-footer.tsx::RightLinkItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Right-side text links as a list (3.x). JSON array, or array property, of `{ RightLinkTooltip, href, title, itemId, IconFamily, IconName, LinkText }`. When set, it replaces the location and news links."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-link"
+            },
+            "dubaiaeIconHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link URL of the dubai.ae link (right section)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dubaiae-icon-href"
+            },
+            "dubaiaeIconId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the dubai.ae link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dubaiae-icon-id"
+            },
+            "dubaiaeIconSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "dubai.ae wordmark image, shown on desktop. The link shows only when this and `dubaiaeIconSmallSrc` are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dubaiae-icon-src"
+            },
+            "dubaiaeIconSrcDark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "dubai.ae wordmark for `color-theme=\"dark\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dubaiae-icon-src-dark"
+            },
+            "dubaiaeIconSmallSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "dubai.ae small icon, shown at 992px and below."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dubaiae-icon-small-src"
+            },
+            "dubaiaeIconAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text of both dubai.ae images."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dubaiae-icon-alt"
+            },
+            "dubaiaeIconTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text of the dubai.ae link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dubaiae-icon-tooltip"
+            },
+            "moreIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Material icon name of the \"more\" button. When set, the right links collapse behind this button at 992px and below."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "more-icon"
+            },
+            "moreIconFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`class` of the \"more\" button icon. Default: `material-icons`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "more-icon-family"
+            },
+            "more_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the \"more\" button. Default, and fallback for an empty value: `More`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "more_button_label",
+                "defaultValue": "'More'"
+            },
+            "colorTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`dark` uses the `*-src-dark` images; an image without a dark version keeps its light image. Default: `light`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-theme",
+                "defaultValue": "'light'"
+            },
             "aria_label": {
                 "type": "string",
                 "mutable": false,
@@ -872,18 +1360,21 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Hides the middle logo section. The section shows only when this is explicitly `false`."
+                    "text": "Hides the middle logo section. Default: `false` (the logos show when at least one is set)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hide-middle-section"
+                "attribute": "hide-middle-section",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isHidden": {}
+            "isHidden": {},
+            "rightOpen": {},
+            "isMobile": {}
         };
     }
     static get elementRef() { return "el"; }

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

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

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

@@ -44,7 +44,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: '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)))))));
+        return (h(Host, { key: 'cd618ae51b42c4b3537c9d79f9d0722c6fedcdf3' }, h("div", { key: '6c5ce0c1e8742ad322d845da606224b0caa9286c', 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() {