@dubai-design-system/components-js 5.0.3 → 5.1.0

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

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 export class DdaStickyFooter {
     constructor() {
+        /** Accessible name of the bar's `<aside>` landmark. Default: `Quick actions`. */
+        this.aria_label = 'Quick actions';
         this.isHidden = false;
         this.lastScrollY = 0;
     }
@@ -9,9 +11,21 @@ export class DdaStickyFooter {
     }
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll);
+        // Publish the bar's height so page layouts fixed above it (.quick-links-wrap) can clear it.
+        const bar = this.el.querySelector('.dda-footer');
+        if (bar && typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                document.documentElement.style.setProperty('--dda-sticky-footer-height', `${bar.offsetHeight}px`);
+            });
+            this.resizeObserver.observe(bar);
+        }
     }
     disconnectedCallback() {
+        var _a;
         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');
     }
     handleScroll() {
         const currentScrollY = window.scrollY;
@@ -19,7 +33,9 @@ export class DdaStickyFooter {
         this.lastScrollY = currentScrollY;
     }
     render() {
-        return (h("footer", { key: 'fd7226001887d4d3858578373ccd508fdd49930f', class: { 'dda-footer': true, 'hidden': this.isHidden }, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: '89cc0c1083f9c62fcf26dda4f875651453ad2475', class: "footer-content" }, h("div", { key: '9abfbaa61512a0aae8e657ef1d28fc39f8d426ab', class: "dda-footer-item dda-footer-left" }, h("ul", { key: 'eea21ceadfd9da17be4de929641c7ec504a6cc77' }, h("li", { key: '24067be504158bdc00e53c94138ccb5a9bc35208', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'f3e7346694c4cb6cc45f2a5f1805f4d802bf4055', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'd80000d0a8a1868f5828fd3fb50cc25c25fd06b3', href: this.happinessIconHref }, h("img", { key: 'a9362b7f44359616b26a02b95595ef6a179aa5d6', src: this.happinessIconSrc, alt: this.happinessIconAlt })))), h("li", { key: '930abc7f878cbf3221a54d049c3e26fd739b0926', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'fe0dc3bf8d9a4df08117be508eef931b349fbfff', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '821b9804f0245bdca422e7c64dd2f10cdd4538db', href: this.accessibilityIconHref }, h("img", { key: '30bc68689a41034be5ec513019352704b5623a6b', src: this.accessibilityIconSrc, alt: this.accessibilityIconAlt })))), h("li", { key: '35dd18e0015ddd6f5e0cdbca4464847404ddcbf2', class: "foot-icon-btn" }, h("dda-tooltip", { key: '1ea7a03b9fdbf4f286960dd6a0b187dd5b6e6f82', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '0f7927bab9ed88a1f82df40f4306be1b66857933', href: this.servicesIconHref }, h("img", { key: 'b63f633473c90d2a9ec99a7e72afc097fd0af3ce', src: this.servicesIconSrc, alt: this.servicesIconAlt }), this.servicesIconText && h("span", { key: 'a5199ba77182215cc04b860843180e9dc3abe8a6' }, this.servicesIconText)))))), this.hideMiddleSection == false && (h("div", { key: 'a5af22f17c41b5905186202feb12ecbe3a26b9e5', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '62b94e14be370d1f05d086e83ffda17c87296d23', class: "foot-logo" }, h("li", { key: '096a17c1eb4f2f3e868a1f3611b6b14f1fa44ac7' }, h("dda-tooltip", { key: 'ba61d166efc5408584a55b4a58afd01c1490a828', title_text: this.firstLogoTooltip, description: "", position: "top" }, h("a", { key: '592a84b05afb1d5160bcd551aaa05dccd960278b', href: this.firstLogoHref }, h("img", { key: 'cab3be3fbcc0fd9d32ff30fae7957dc240cc0bfa', src: this.firstLogoSrc, alt: this.firstLogoAlt })))), h("li", { key: '79057d3e29622036a9b71caa2e7da13b41b19731' }, h("dda-tooltip", { key: 'c83b49320aa022f3ebad082e8d18a62a963a1711', title_text: this.secondLogoTooltip, description: "", position: "top" }, h("a", { key: '1a89079bcbe11ad4e8fcdd39f1b704d1ae1e7b25', href: this.secondLogoHref }, h("img", { key: '77ebaa747753185fcb689fcaed0d3e0e13ba91d1', src: this.secondLogoSrc, alt: this.secondLogoAlt })))), h("li", { key: 'a1a50feedc0cdcd8dd9af3b89558cc4a2a1d722a' }, h("dda-tooltip", { key: '11f99b9db6e15decb70799eaa9f017a6ac9bbf31', title_text: this.thirdLogoTooltip, description: "", position: "top" }, h("a", { key: '417d6a7503c6ce246a0a840a81f9e75cf5977684', href: this.thirdLogoHref }, h("img", { key: 'f9d5076d234fc8e8ff0a14f9cb7bc69e032b89d8', src: this.thirdLogoSrc, alt: this.thirdLogoAlt }))))))), h("div", { key: '313d93488da41b604dded66f761fc8f19e20d020', class: "dda-footer-item dda-footer-right" }, h("ul", { key: 'bbdd2b067021f53a8f1dd80e2272590ea30852fe' }, h("li", { key: 'b752348eb94eae0eef4cd3246fb7c3b83d1ffcd0', class: "foot-icon-btn" }, h("dda-tooltip", { key: '9c1ab1b4bfd5a9f89666dac8432fe56fac30f631', title_text: this.locationButtonText, description: "", position: "top" }, h("a", { key: 'b2da2f550cfadf18bd41a2e56e68dd104546223a', href: this.locationButtonHref }, h("img", { key: '8733dddcb3d7235942a1379cac0cf24684e4ce04', src: this.locationLogoSrc, alt: this.locationButtonText })))), h("li", { key: '16ceed63fd9b5ece0bbccaf7f911aedc1bffd5dc', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'a803f2f70393a77e80b0d3ec60e9f595ed8be389', title_text: this.newsButtonText, description: "", position: "top" }, h("a", { key: '86fccef86c2f25d2defa9fb67ab4b7f05bc8f2e2', href: this.newsButtonHref }, h("img", { key: '603f9c78d0912af532e048a12914e3bac595c7a2', src: this.newsButtonSrc, alt: this.newsButtonText })))), h("li", { key: '271d85b2626ac375d53f1efc633c8995c7068577', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0890b47eb92c645a0e3f912b15d38884a19ae1c1', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: 'b05716e05e64eddc8ce6f32f5f9515b6f2232c78', href: this.aiIconHref }, h("img", { key: '0a7ba43622ff187a27181e42a28b787271247360', src: this.aiIconSrc, alt: this.aiIconAlt })))), h("li", { key: 'cff6b72ac2a026639ec9a04379fb4b25519cd406', class: "foot-icon-btn" }, h("dda-tooltip", { key: '892c1bffee0b2d5bab42ace9de77dc5fbb344e74', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: 'bcb66f25dc2cf79215e4b7819a860ef42ac9aa22', href: this.chatIconHref }, h("img", { key: '9bb6f5d176df4558c80b8e5d8a264de1e16b0eae', src: this.chatIconSrc, alt: this.chatIconAlt })))))))));
+        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 })))))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {
@@ -46,7 +62,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Left Section Props"
+                    "text": "Link URL of the happiness icon (left section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -65,7 +81,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the happiness icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -84,7 +100,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the happiness icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -103,7 +119,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the happiness icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -122,7 +138,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link URL of the accessibility icon, the second icon in the left section."
                 },
                 "getter": false,
                 "setter": false,
@@ -141,7 +157,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the accessibility icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -160,7 +176,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the accessibility icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -179,7 +195,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the accessibility icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -198,7 +214,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link URL of the services icon (left section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -217,7 +233,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the services icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -236,7 +252,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the services icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -255,7 +271,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the services icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -274,7 +290,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text shown next to the services icon. Nothing is shown when it is not set."
                 },
                 "getter": false,
                 "setter": false,
@@ -293,7 +309,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Middle Section Props"
+                    "text": "Link URL of the first logo (middle section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -312,7 +328,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the first logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -331,7 +347,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the first logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -350,7 +366,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the first logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -369,7 +385,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link URL of the second logo (middle section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -388,7 +404,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the second logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -407,7 +423,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the second logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -426,7 +442,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the second logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -445,7 +461,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link URL of the third logo (middle section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -464,7 +480,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the third logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -483,7 +499,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the third logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -502,7 +518,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the third logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -521,7 +537,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Right Section Props"
+                    "text": "Link URL of the location icon (right section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -540,7 +556,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the location icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -559,7 +575,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text and alternative text of the location icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -578,7 +594,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Not used: the current markup does not render it."
                 },
                 "getter": false,
                 "setter": false,
@@ -597,7 +613,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link URL of the news icon (right section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -616,7 +632,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the news icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -635,7 +651,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text and alternative text of the news icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -654,7 +670,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Not used: the current markup does not render it."
                 },
                 "getter": false,
                 "setter": false,
@@ -673,7 +689,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link URL of the AI assistant icon (right section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -692,7 +708,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the AI assistant icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -711,7 +727,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the AI assistant icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -730,7 +746,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the AI assistant icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -749,7 +765,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link URL of the chat icon (right section)."
                 },
                 "getter": false,
                 "setter": false,
@@ -768,7 +784,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the chat icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -787,7 +803,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the chat icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -806,13 +822,33 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip text of the chat icon."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "chat-icon-tooltip"
             },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the bar's `<aside>` landmark. Default: `Quick actions`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label",
+                "defaultValue": "'Quick actions'"
+            },
             "hideMiddleSection": {
                 "type": "boolean",
                 "mutable": false,
@@ -825,7 +861,7 @@ export class DdaStickyFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Hides the middle logo section. The section shows only when this is explicitly `false`."
                 },
                 "getter": false,
                 "setter": false,
@@ -839,4 +875,5 @@ export class DdaStickyFooter {
             "isHidden": {}
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -65,7 +65,7 @@ const Template = args => `
     news-button-href="${args.newsButtonHref}"
     news-button-text="${args.newsButtonText}"
     news-button-icon="${args.newsButtonIcon}"
-    news-logo-src="${args.newsButtonSrc}"
+    news-button-src="${args.newsButtonSrc}"
 
     ai-icon-href="${args.aiIconHref}"
     ai-icon-src="${args.aiIconSrc}"

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

@@ -1,11 +1,17 @@
 import { h, Host } from "@stencil/core";
 export class DdaTabs {
     constructor() {
+        /** Tab content: `text` (label only) or `text-icon` (icon from `tab_icons` before the label). */
         this.type = 'text';
+        /** Style of the active and hovered tab: `dda-tab-default`, `dda-tab-filed`, `dda-tab-underline` or `dda-tab-underline-filled`. */
         this.hover_style = 'dda-tab-default';
+        /** Not used by the component; it has no effect. */
         this.border_bottom = false;
+        /** Extra CSS classes added to the tab group. */
         this.custom_class = '';
-        this.tab_texts = '["Tab 1", "Tab 2", "Tab 3"]'; // Keep it as a string
+        /** Tab labels, as a JSON string array, e.g. `'["Details", "Documents"]'`. */
+        this.tab_texts = '["Tab 1", "Tab 2", "Tab 3"]';
+        /** Material Icons names, one per tab in the same order, as a JSON string array. Shown when `type` is `text-icon`. */
         this.tab_icons = '["sentiment_satisfied", "sentiment_satisfied", "sentiment_satisfied"]';
         this.tabhandler = (index) => {
             this.tabClick.emit(index);
@@ -38,7 +44,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: '64c80c8f7d18c478dbbbe2ffe9209bbf4f186747' }, h("div", { key: '677b141249edd4ec826c83a83c523b271b078d31', 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` }, this.parsedIcons[index] || ""), h("span", null, title)))))));
+        return (h(Host, { key: '08043e9d39b5ad9a620384b4f917245ddff9924e' }, h("div", { key: '2ed3614f6f932a43c4601201c2bf02483e161a0e', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || ""), h("span", null, title)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {
@@ -65,7 +71,7 @@ export class DdaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tab content: `text` (label only) or `text-icon` (icon from `tab_icons` before the label)."
                 },
                 "getter": false,
                 "setter": false,
@@ -85,7 +91,7 @@ export class DdaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Style of the active and hovered tab: `dda-tab-default`, `dda-tab-filed`, `dda-tab-underline` or `dda-tab-underline-filled`."
                 },
                 "getter": false,
                 "setter": false,
@@ -105,7 +111,7 @@ export class DdaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Not used by the component; it has no effect."
                 },
                 "getter": false,
                 "setter": false,
@@ -125,7 +131,7 @@ export class DdaTabs {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the tab group."
                 },
                 "getter": false,
                 "setter": false,
@@ -145,7 +151,7 @@ export class DdaTabs {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class on the tab group, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -164,7 +170,7 @@ export class DdaTabs {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` set on every tab button."
                 },
                 "getter": false,
                 "setter": false,
@@ -183,7 +189,7 @@ export class DdaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name for the tab group (`aria-label` on the `role=\"group\"` container)."
                 },
                 "getter": false,
                 "setter": false,
@@ -202,7 +208,7 @@ export class DdaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tab labels, as a JSON string array, e.g. `'[\"Details\", \"Documents\"]'`."
                 },
                 "getter": false,
                 "setter": false,
@@ -222,7 +228,7 @@ export class DdaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Icons names, one per tab in the same order, as a JSON string array. Shown when `type` is `text-icon`."
                 },
                 "getter": false,
                 "setter": false,
@@ -242,7 +248,7 @@ export class DdaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` set on every tab button."
                 },
                 "getter": false,
                 "setter": false,
@@ -265,11 +271,11 @@ export class DdaTabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Fires when the user clicks a tab. `detail` is the tab index, a number from 0."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 }
             }];

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

@@ -33,10 +33,6 @@ export default {
             control: { type: 'array' },
             description: 'Array of tab labels',
         },
-        onTabClick: {
-            action: 'tab-clicked',
-            description: 'Callback function when a tab is clicked',
-        },
         button_name: {
             control: { type: 'text' },
             description: 'Button name for the tabs',
@@ -57,14 +53,13 @@ export default {
       button_id="button"
       aria_label="tabs"
       tab_texts='["Tab 1", "Tab 2", "Tab 3"]'
-      onTabClick="handleTabClick"
       button_name="button"
     ></dda-tabs>
 
     <script>
-      function handleTabClick(index) {
-        console.log('Clicked Tab:', index);
-      }
+      document.querySelector('dda-tabs').addEventListener('tabClick', e => {
+        console.log('Clicked Tab:', e.detail);
+      });
     </script>
   \`\`\`
   `,
@@ -88,7 +83,6 @@ TextTabs.args = {
     button_id: 'button',
     aria_label: 'tabs',
     tab_texts: ['Tab 1', 'Tab 2', 'Tab 3'],
-    onTabClick: (index) => alert(`Tab ${index + 1} clicked!`), // Example event
     button_name: 'button',
 };
 export const TextIconTabs = Template.bind({});
@@ -100,6 +94,5 @@ TextIconTabs.args = {
     button_id: 'button',
     aria_label: 'tabs',
     tab_texts: ['Tab 1', 'Tab 2', 'Tab 3'],
-    onTabClick: (index) => alert(`Tab ${index + 1} clicked!`), // Example event
     button_name: 'button',
 };