@dubai-design-system/components-js 5.1.1 → 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,35 @@ 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.
+    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),
+        ];
+    }
+    // 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;
@@ -33,9 +67,23 @@ export class DdaStickyFooter {
         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: '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: '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() {
@@ -126,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,
@@ -202,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,
@@ -297,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,
@@ -525,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,
@@ -556,7 +743,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 +781,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 +819,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 +857,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,
@@ -753,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,
@@ -829,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,
@@ -861,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"; }