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

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: '98e82e7acac0d1fdced65fe2546e5d257490b188', 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: 'd258148342884ac034881435c6e2420710efd564', class: "footer-content" }, h("div", { key: '1e9e6fff6e2be9cdcf92e725381d8fc76076fa41', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '103330ac1c291614ce79d08ca262a93c4d350ea8' }, this.happinessIconSrc && (h("li", { key: '4056ba1c34d26f7f842b0fa3e6b23eafd692c172', class: "foot-icon-btn" }, h("dda-tooltip", { key: '2762fb68895c5c0c2b4a0495d62975a58c79ca27', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'cf40c7afe41bbb92ef1936126ffaf109a56e9ae9', href: this.happinessIconHref, id: this.happinessIconId }, h("img", { key: 'be106d991da1cf8ba76e1c9ad1576abe1db96fe9', src: this.img(this.happinessIconSrc, this.happinessIconSrcDark), alt: this.happinessIconAlt }))))), this.accessibilityIconSrc && (h("li", { key: '922ce8e7ac1d4c9336b939efbf112df4b70981a4', class: "foot-icon-btn" }, h("dda-tooltip", { key: '9c87d829d4df22939ad22c392ee3b67dcfaa12b6', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '0d79bf57f3c4388cb6b3edfd2f7d79609b76144d', href: this.accessibilityIconHref, id: this.accessibilityIconId }, h("img", { key: 'd1adceed79be93894994134052268e96589ffcd8', src: this.img(this.accessibilityIconSrc, this.accessibilityIconSrcDark), alt: this.accessibilityIconAlt }))))), (this.servicesIconSrc || this.servicesIconText) && (h("li", { key: '33f5966ee771f4f47f8c10213b8daa84b5e01230', class: "foot-icon-btn" }, h("dda-tooltip", { key: '4d5c0b2729afd7c9a9109102f0a5751928559817', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '1eb5db319083a743976ecace4367ae8d231a1047', href: this.servicesIconHref, id: this.servicesIconId }, h("img", { key: '7b3008bc381efe03480b8ed9689608c16e9ca823', src: this.img(this.servicesIconSrc, this.servicesIconSrcDark), alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: '61949470a1b493459e90196e0cc5c6f4d063bb50' }, this.servicesIconText))))))), !this.hideMiddleSection && middleLogos.length > 0 && (h("div", { key: 'ea2a35e9a890b6d909fcdad4a034d54b4c7f9e80', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '8400eef134e06fbf999b4bd31a1c22700ca49f4f', 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: '54d67beb3ff5041e0a855e526ebc05d987fd395f', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '1904a8afd5c0cb12c5f308d0c2b03618b01dff37', 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: '46e2339738039f1c72bf33774cdcbc691da90cf0', class: "foot-icon-btn" }, h("dda-tooltip", { key: '8cff02f4d003888c9f216aa80602ee107a0e7c5f', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: 'a0327d42a75196f4ad37b7a49d713e9eb08bffdf', href: this.dubaiaeIconHref, id: this.dubaiaeIconId }, h("img", { key: '831261649bdfd70e15718c45dcc85432fe069582', class: "dubaiae-text-icon", src: this.img(this.dubaiaeIconSrc, this.dubaiaeIconSrcDark), alt: this.dubaiaeIconAlt }), h("img", { key: 'ef212c8912b467bfdde01a090e82f355fd39e5dd', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: this.dubaiaeIconAlt }))))), this.aiIconSrc && (h("li", { key: 'fdc1ba032f6e0fcdb44f9cd71763797f86cc3b98', class: "foot-icon-btn" }, h("dda-tooltip", { key: '1f16f4968cae849c7ebce8199b8f29b613d67d55', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '331c9e786c7f01cbb0f2ab5730c3f6fccd4dac16', href: this.aiIconHref, id: this.aiIconId }, h("img", { key: 'e15e6a11f0d07eb5c3e03e633f1f70bdecacf7c8', src: this.img(this.aiIconSrc, this.aiIconSrcDark), alt: this.aiIconAlt }))))), this.chatIconSrc && (h("li", { key: 'baa12806b144c59248bebc1fd97345f85fd04924', class: "foot-icon-btn" }, h("dda-tooltip", { key: '277dba6416abc5dfbd4bbf610c95c4d6cc730722', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '04867496deec0f284cf8cc583af32f19c6ba2a47', href: this.chatIconHref, id: this.chatIconId }, h("img", { key: '1dc1dad2f2323441660636bc3294a720bd0fb273', src: this.img(this.chatIconSrc, this.chatIconSrcDark), alt: this.chatIconAlt })))))), this.moreIcon && (h("button", { key: 'bfcd9e5aa6ce3a33632df965668954741471e25e', 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: '6138d7b0a8f1923f603439fa2225e0c3f19a7566', 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: '5e604aeca69071b4163a54f8f5a6f3a49c36112b' }, h("div", { key: '9b08673fc84df116c5b5c055e4ce1ff47127b978', 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() {