@dubai-design-system/components-js 3.12.16 → 5.0.0

package/dist/collection/components/dda-range-slider/dda-range-slider.css

@@ -12,10 +12,23 @@
   border-radius: 5px;
 }
 
+/*
+ * F-022 (WCAG 2.5.8 target size, minimum): the sweep's checker measures
+ * the <input>'s own box (its INTERACTIVE selector matches `input`
+ * generically, not the UA-styled ::-webkit-slider-thumb/::-moz-range-thumb
+ * pseudo-elements it can't select) - previously 100% wide but only 6px
+ * tall, the same height as the visible track. Growing the input's own
+ * height to 24px and re-centring it over the track fixes what the checker
+ * (and any pointer/touch user, since pointer-events below still route
+ * clicks to the thumb) actually measures, without changing the visible
+ * 6px track or the track fill drawn by .dda-range-slider/.dda-range-slider-track.
+ */
 .dda-range-slider-input {
   position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   width: 100%;
-  height: 6px;
+  height: 24px;
   background: transparent;
   -webkit-appearance: none;
   appearance: none;
@@ -61,7 +74,10 @@
 }
 
 .dda-range-slider-track span {
-  background: var(--dda-neutral-100);
+  /* F-023 B3: was raw, theme-invariant --dda-neutral-100, paired with the
+     theme-flipping text alias --dda-on-surface-variant-30. Swap to the
+     theme-aware surface alias so the background flips with the text. */
+  background: var(--dda-surface-100);
   width: 55px;
   height: 35px;
   font-size: 16px;

package/dist/collection/components/dda-range-slider/dda-range-slider.js

@@ -28,10 +28,10 @@ export class DdaRangeSlider {
         return ((value - this.min) / (this.max - this.min)) * 100;
     }
     render() {
-        return (h(Host, { key: '5670018e299720907af7d8251b353ba053a8ab57' }, h("div", { key: 'b330d6b9ecb417cbda31d0a03d9e317b752b5710', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'de0596c2790b949420c70f2d56f6e34a242b5b4c', class: "dda-range-slider" }, h("div", { key: 'a97e4ad627ea82d950580b1e330733a57064ac7e', class: "dda-range-slider-track", style: {
+        return (h(Host, { key: '80a768ff1c3149aa7e863bbe8fe4936f6c39ff43' }, h("div", { key: 'ec21fa68c81ef52b6d41a2dd73232f2da367b59a', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '01837c6961c25dae8dd22722ccffb88dc6740c48', class: "dda-range-slider" }, h("div", { key: '21e0c50619dff33b4552a1b2cfaacd6d5ee4259a', class: "dda-range-slider-track", style: {
                 left: `${this.getPercentage(this.min_value)}%`,
                 right: `${100 - this.getPercentage(this.max_value)}%`,
-            } }, h("span", { key: 'a33cd24a052e635eef5396f0a3bce913409e89b4', class: "min-label" }, this.min_value, "%"), h("span", { key: 'c5e09c25e8bab33b739cf02effddaefa91eb1df4', class: "max-label" }, this.max_value, "%")), h("label", { key: '1d84152f1ac26de381718ddaf83d5d28d7950699', htmlFor: this.left_input_id }, h("input", { key: 'c4d1cb836fe410b3dbd8323942902d297dac969a', id: this.left_input_id, name: this.left_input_name, "aria-label": this.left_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("label", { key: '5fd1337d18f17fdcda1bfc8b9846358e20d5ec59', htmlFor: this.right_input_id }, h("input", { key: '7abee593c9bcbed9bc3ad13a184f9e23de6deb3f', id: this.right_input_id, name: this.right_input_name, "aria-label": this.right_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
+            } }, h("span", { key: '697d15494be5b1b2223c6994f5757449b8137d0a', class: "min-label" }, this.min_value, "%"), h("span", { key: 'cf9fb2c9a32acadf8aa39ba3bfe81eb669c3d5b6', class: "max-label" }, this.max_value, "%")), h("label", { key: '11d8300e01852e9ea304489a60611ad311318a8a', htmlFor: this.left_input_id }, h("input", { key: '11d5bf0e71ad6c1e6486baf367cc77b82b487a15', id: this.left_input_id, name: this.left_input_name, "aria-label": this.left_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("label", { key: 'c0985baf70eba826197503254da107693d7a21bc', htmlFor: this.right_input_id }, h("input", { key: '2b3c8aed413ef9615dca183c089c4840fdf83ab6', id: this.right_input_id, name: this.right_input_name, "aria-label": this.right_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-search-input/dda-search-input.js

@@ -7,14 +7,31 @@ export class DdaSearchInput {
         this.has_error = false; // control error state
         this.custom_class = '';
     }
+    // F-016: ids derived from the consumer-supplied input_id, same pattern as
+    // dda-input/dda-select.
+    get helperId() {
+        return this.input_id ? `${this.input_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    }
     clearInput() {
-        const input = this.el.querySelector('#search');
+        // Was `#search` — the search input's id is now the consumer-supplied
+        // input_id (possibly undefined), so target the stable class instead.
+        const input = this.el.querySelector('.dda-search-field');
         if (input) {
             input.value = '';
         }
     }
     render() {
-        return (h(Host, { key: 'd819b5cad21471fa5c0a5c4085ce472af98e270f' }, h("div", { key: 'c181b8b9cc53d609beede37c8d6f3cb32947b18f', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '8bb82ef67ae6900c1836a4ca98413f318da0a325', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '7e3b5763937d5cba119531f7aba41f66abaff40d', class: "dda-search-area dda-search-action" }, h("i", { key: '0d24a6ceb56fca500c5fc0cf15eb5575b53f76ab', class: "material-icons icon-left" }, "search"), h("input", { key: '835b3ab4f73ba3b07ef9240608559469af77cacd', name: this.search_input_name, "aria-label": this.aria_label, id: 'search', type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder }), h("div", { key: '74c9306fb4a3ae14670f89813665c5b4a5f18f19', class: "dda-search-btngroup" }, h("button", { key: '82c1638597f0dce0a1d19a6db7896ae4482a740e', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '43fad8a06e9976fa49dbe98c055c6d80044eb87a', class: "material-icons  material-symbols-outlined" }, "close")), this.show_button && (h("button", { key: 'ccc677526923d8e25fafefe1ca4cb01698c728d2', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'f362c2e27910c046ba30defc97fdee1a62d536e6', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '0457586d16926f680433410e97a61a558eb7379c', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: 'defadb63674c2c2a74ff001a33c46e1b70884362' }, h("div", { key: '6b485070024fe6138c6964aafd30ac31f76add42', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '71564d0889be28002cedf12d11159be2c0fc6ad8', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'edd31c93a5098642a98952e9e786a1f52cef5f57', class: "dda-search-area dda-search-action" }, h("i", { key: '708fbf189d534e27c1a26c9491389c6caae0826d', class: "material-icons icon-left" }, "search"), h("input", { key: '8e1a5df3baf8c894a474047ff041db15191bc874', name: this.search_input_name, "aria-label": this.aria_label, id: this.input_id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '622e7a0ee2b0659ced993f533369e27bab553d6b', class: "dda-search-btngroup" }, h("button", { key: 'f508784161c13624b4cc30baaa05c031c6dbbbe4', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '6680303fc0fe51810eaf1e2f2f509ac894fc0a8a', class: "material-icons  material-symbols-outlined" }, "close")), this.show_button && (h("button", { key: '37c5dce6caff03bca2b018f2a789b5de2614aded', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'ca5d52ea2953f2de298b6dbbca209697b006220f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '2c7e0710441d65ed6a4652fc3962629c4a644b05', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-search-input"; }
     static get originalStyleUrls() {
@@ -243,6 +260,25 @@ export class DdaSearchInput {
                 "reflect": false,
                 "attribute": "button_id"
             },
+            "input_id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input_id"
+            },
             "aria_label": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/dda-search-input/dda-search-input.stories.js

@@ -49,6 +49,10 @@ export default {
             control: { type: 'text' },
             description: 'default',
         },
+        input_id: {
+            control: { type: 'text' },
+            description: 'Id for the search input field. The visible label targets this, not button_id (F-017).',
+        },
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for the search input',
@@ -92,6 +96,7 @@ export default {
     custom_class=""
     component_mode=""
     button_id="button"
+    input_id="search"
     aria_label="search-input"
     button_aria_label="clear-search"
     onchange="console.log('changed')"
@@ -124,6 +129,7 @@ Default.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',
@@ -143,6 +149,7 @@ WithButton.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',
@@ -161,6 +168,7 @@ WithError.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',
@@ -180,6 +188,7 @@ Disabled.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',

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

@@ -5,6 +5,85 @@ export class Ddaselect {
         this.is_open = false;
         //@Prop() validationtype?: string;
         this.custom_class = '';
+        // F-014: focus target requested by a keyboard interaction (ArrowDown/Up
+        // from the trigger) that fires before the listbox exists in the DOM.
+        // Consumed by componentDidRender, then cleared.
+        this.pendingFocusIndex = null;
+        this.onTriggerKeyDown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                const wasOpen = this.is_open;
+                this.is_open = true;
+                const target = this.initialOptionIndex();
+                if (wasOpen) {
+                    this.focusOption(target);
+                }
+                else {
+                    this.pendingFocusIndex = target;
+                }
+            }
+            else if (event.key === 'Escape' && this.is_open) {
+                event.preventDefault();
+                this.is_open = false;
+            }
+        };
+        this.onOptionKeyDown = (event, option) => {
+            const currentIndex = this.currentFocusedOptionIndex();
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusOption(currentIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusOption(currentIndex - 1);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusOption(0);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusOption(this.parsedOptions.length - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.selectOption(option);
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.closeAndReturnFocus();
+                    break;
+                case 'Tab':
+                    // Let focus leave naturally; don't trap it, but the popup should
+                    // not stay open once it does.
+                    this.is_open = false;
+                    break;
+                default:
+                    break;
+            }
+        };
+    }
+    get listboxId() {
+        return `${this.button_id}-listbox`;
+    }
+    // F-016: same button_id-derived uniqueness pattern as listboxId above.
+    get helperId() {
+        return this.button_id ? `${this.button_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.button_id ? `${this.button_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
     }
     get parsedOptions() {
         try {
@@ -14,19 +93,50 @@ export class Ddaselect {
             return [];
         }
     }
+    focusOption(index) {
+        const options = Array.from(this.el.querySelectorAll('.dda-input-dropdown-item[role="option"]'));
+        if (options.length === 0) {
+            return;
+        }
+        const clamped = Math.max(0, Math.min(index, options.length - 1));
+        options[clamped].focus();
+    }
+    currentFocusedOptionIndex() {
+        const options = Array.from(this.el.querySelectorAll('.dda-input-dropdown-item[role="option"]'));
+        return options.indexOf(document.activeElement);
+    }
+    initialOptionIndex() {
+        const options = this.parsedOptions;
+        const selectedIndex = options.indexOf(this.selected);
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    }
     toggleSelect() {
         if (!this.disabled) {
             this.is_open = !this.is_open;
         }
     }
+    closeAndReturnFocus() {
+        this.is_open = false;
+        const trigger = this.el.querySelector('.dda-select-header');
+        if (trigger) {
+            trigger.focus();
+        }
+    }
     selectOption(option) {
         if (!this.disabled) {
             this.selected = option;
-            this.is_open = false;
+            this.closeAndReturnFocus();
+        }
+    }
+    componentDidRender() {
+        if (this.is_open && this.pendingFocusIndex !== null) {
+            const target = this.pendingFocusIndex;
+            this.pendingFocusIndex = null;
+            this.focusOption(target);
         }
     }
     render() {
-        return (h(Host, { key: 'f43752c23652460fc0be76e7335aab5484f59cab' }, h("div", { key: '3b0a32ae0da79d1a40f84309597ffacce73b3cf4', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: 'ec1e1b9e3341a539be689886dfdfae2066a24ac4', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '62aaf844f12412582d184a9dece450c36d58442f', class: "dda-dropdown-container" }, h("button", { key: '2e36a72d1c5273abeb98e83529e703633071ea8c', name: this.toggle_button_name, "aria-label": this.aria_label, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", onClick: () => { this.toggleSelect(); } }, this.selected || 'Select an option', h("i", { key: 'ac90d996055a9327f179a57439c292e7a2118874', class: `material-icons` }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'e1de5eb55e0ec0cc1e55a3948b253e7c1f350949', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { name: this.option_select_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '58fb41fabc366406d58e3ced4cf63d86edffc5b5', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'e9e79b110711195a627d8367057bd2ed01589ade', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '24112cb3263994d6e4b7c87a5a1ec75d010c6ee0' }, h("div", { key: '9d49fc8c1905079e83a8949ca8c1f46fa3255401', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '96d14ea8c1174032261945b9bef49f23e6ff55b6', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '0896838d28313f76b1938c225bdf5df1fdbc7849', class: "dda-dropdown-container" }, h("button", { key: 'a224ad80778a6e315735e806a0afbb4fc7c57e93', name: this.toggle_button_name, "aria-label": this.aria_label, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '7ed3bdb440c0a892795af32b1b2f9105633d5af7', class: `material-icons` }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '266c9fc8de36433de06bf289a854c22ab499f0ca', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '62028ea0d45943d0728f71ec58122ab58a554ec7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '30f11a0804b15424e0ca7a8769477f5f4547b191', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {
@@ -316,4 +426,5 @@ export class Ddaselect {
             "is_open": {}
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -19,18 +19,17 @@ export class DdaStickyFooter {
         this.lastScrollY = currentScrollY;
     }
     render() {
-        return (h("footer", { key: '89b93b4e9bd0648ec1a438013c76489e5311ebc2', class: { 'dda-footer': true, 'hidden': this.isHidden } }, h("div", { key: '7aee61c8d0cb4fdffc90aa26b18c82e5426e6152', class: "footer-content" }, h("div", { key: '724316638763499627d0d554b72fe53bab74336f', class: "dda-footer-item dda-footer-left" }, h("ul", { key: 'e5ba1fbafe2e8f04a2781143c52f3a0e35a9eb42' }, h("li", { key: '149f92fe51f7de7e9eff0f26ead210ed8649e2e4', class: "foot-icon-btn" }, h("dda-tooltip", { key: '6eeb93d2ce7fe634cfaafd82bb17f687c6d66b26', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: '9e616706462953a68f62ed9d8ea7576ab7681cb2', href: this.happinessIconHref }, h("img", { key: '3960b214b510cbf8fbb16ee1b504f30c85619b69', src: this.happinessIconSrc, alt: this.happinessIconAlt })))), h("li", { key: '84a2f0f3b890df0cebb5fc3d44d9e8b6ccfa6f90', class: "foot-icon-btn" }, h("dda-tooltip", { key: '30700d2b1da82356ee26876bf815d486e9a4be14', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: 'e6ebe9758bfa4fda06ce9274c1f2752c568b1af7', href: this.accessibilityIconHref }, h("img", { key: '87c8dacc363b8bd9fe2b4606c62eee9b68c481cf', src: this.accessibilityIconSrc, alt: this.accessibilityIconAlt })))), h("li", { key: 'cc2762d7f183239746f20799221fb60a128dcd75', class: "foot-icon-btn" }, h("dda-tooltip", { key: '2383045c7a420dfca91102f0b6ad16e73aa36f47', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: 'b80d32bdf2e71ce9519571cfb53f0aae721f5a8b', href: this.servicesIconHref }, h("img", { key: '395b4c85452fb71949c6011b0ac9419e5ca47aec', src: this.servicesIconSrc, alt: this.servicesIconAlt }), this.servicesIconText && h("span", { key: '24e2c08e710c464a3ae27ab149eb6cdb14288cdd' }, this.servicesIconText)))))), this.hideMiddleSection == false && (h("div", { key: '5f4ab28b6904d8d0cfd7b624f69c485d91c9162f', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: 'b617b4417cf4c68cc51c9a8113ad982c87ea5a42', class: "foot-logo" }, h("li", { key: 'e1035852dac542efd5cb777dabe91d792db89a30' }, h("dda-tooltip", { key: 'ee686d5fa5f35d6efe67f89d338b73934a0a1992', title_text: this.firstLogoTooltip, description: "", position: "top" }, h("a", { key: 'b1f0ef7f13f779f6b988a5b268821c9c1950a585', href: this.firstLogoHref }, h("img", { key: 'cfd5976082c41211105f1b271db9e03efe4d122c', src: this.firstLogoSrc, alt: this.firstLogoAlt })))), h("li", { key: '5a9b1401d5c21e779a63908e8ff193961646cdce' }, h("dda-tooltip", { key: '5448309fbaf187b734c6001fc604d218c95a7946', title_text: this.secondLogoTooltip, description: "", position: "top" }, h("a", { key: '638dfedd53577ac875a282de7c2c2fc221fcc2b4', href: this.secondLogoHref }, h("img", { key: '1860290f805a4d5c31f262f76556876cc45683e2', src: this.secondLogoSrc, alt: this.secondLogoAlt })))), h("li", { key: '0821c3e2978b4e422ac9946c1ea47531c193eef6' }, h("dda-tooltip", { key: '88e032ea2feb66d9db3d5d082d408e1c38e24c50', title_text: this.thirdLogoTooltip, description: "", position: "top" }, h("a", { key: '9e1e51e1b1a3498ae098eb91ecf14b4b8a898ee4', href: this.thirdLogoHref }, h("img", { key: 'bfaaf0c20a49f250df238ee94006ad3ac38bb988', src: this.thirdLogoSrc, alt: this.thirdLogoAlt }))))))), h("div", { key: '840438cdaf483724dba721ef57f229736c186e2a', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '8b42a2500b853a2205506e0a2cd340b9fa4d855a' }, h("li", { key: '292c5f53d90b3800b76a6ef17e2f05e4b9ebc50a', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'd6f0374da987ac7b6946976ba72a0833c603cc26', title_text: this.locationButtonText, description: "", position: "top" }, h("a", { key: 'bdb17b5db502af940adf88fee829098a4dda4451', href: this.locationButtonHref }, h("img", { key: '9cf92dba8d8a54883f5aa3dbbaa5708b0cb8167f', src: this.locationLogoSrc, alt: this.locationButtonText })))), h("li", { key: '5c726caf71dad5888a48557ad1fc73815b50945a', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'fe0de2d566472b6c2171ec9b834beafc72f18f90', title_text: this.newsButtonText, description: "", position: "top" }, h("a", { key: '095786e81b72c3e4f67426d64f7a6d350b519448', href: this.newsButtonHref }, h("img", { key: '188d72526534db9e151b04a0225550434bcb4437', src: this.newsButtonSrc, alt: this.newsButtonText })))), h("li", { key: '3865bc0184372c3a746ba9ca0672cd80552461ea', class: "foot-icon-btn" }, h("dda-tooltip", { key: '7ba86a2826fe6148eed90b501b27047e395f428a', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '5bd9a9abbc7c0bcedc6896dc184756fdd1e32ce6', href: this.aiIconHref }, h("img", { key: '25b08b569f9959951c0c02af6886794cecbb79c9', src: this.aiIconSrc, alt: this.aiIconAlt })))), h("li", { key: '40fe1d1f5368dfafb9f095c234380be9147a43e9', class: "foot-icon-btn" }, h("dda-tooltip", { key: '14bbacb1c02cee1f10751e9270b877d44f47b455', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '9bc3fc68bbc5ee9b14e963b5496a5b0d83c6627b', href: this.chatIconHref }, h("img", { key: 'c2e17b7a01414a98eff36b4fe00b8c3c371571ed', src: this.chatIconSrc, alt: this.chatIconAlt })))))))));
+        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 })))))))));
     }
     static get is() { return "dda-sticky-footer"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-sticky-footer.css"]
+            "$": ["dda-sticky-footer.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-sticky-footer.css"]
+            "$": ["dda-sticky-footer.css", "../../global/global.css"]
         };
     }
     static get properties() {

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

@@ -38,7 +38,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: '2e7c1e817a306b08c9ee5a95a79b51db3a878d1a' }, h("div", { key: '3eb168d7413531c14b0062da5f59afe2cf6c692c', 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, "aria-label": this.aria_label, type: "button", 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: '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)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {

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

@@ -6,9 +6,64 @@ export class DdaTextarea {
         this.value = '';
         this.characterCount = 0; // State to track the character count
     }
+    // F-016: ids derived from the consumer-supplied input_id (same pattern as
+    // dda-input/dda-select). F-015: the rich-editor container also needs a
+    // stable label id to point aria-labelledby at.
+    get labelId() {
+        return this.input_id ? `${this.input_id}-label` : undefined;
+    }
+    get helperId() {
+        return this.input_id ? `${this.input_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    }
+    // F-015: Quill does not make the container passed to `new Quill(...)`
+    // editable — it mounts its real editable surface as a child `.ql-editor`
+    // div with contenteditable="true" (that's what Tab actually lands on, per
+    // the pre-existing focus-ring e2e test below). aria-labelledby/role/etc.
+    // on the container never reach an AT's accessible-name computation for a
+    // descendant, so the label/description/invalid-state must be applied
+    // directly to quill.root (the `.ql-editor` element) after mount, and kept
+    // in sync whenever the driving props change.
+    syncRichEditorA11y() {
+        if (!this.quill) {
+            return;
+        }
+        const editorEl = this.quill.root;
+        editorEl.setAttribute('role', 'textbox');
+        editorEl.setAttribute('aria-multiline', 'true');
+        if (this.labelId) {
+            editorEl.setAttribute('aria-labelledby', this.labelId);
+        }
+        else {
+            editorEl.removeAttribute('aria-labelledby');
+        }
+        if (this.describedBy) {
+            editorEl.setAttribute('aria-describedby', this.describedBy);
+        }
+        else {
+            editorEl.removeAttribute('aria-describedby');
+        }
+        if (this.error_message) {
+            editorEl.setAttribute('aria-invalid', 'true');
+        }
+        else {
+            editorEl.removeAttribute('aria-invalid');
+        }
+    }
     componentDidLoad() {
         if (this.enable_rich_editor) {
-            const editor = this.el.querySelector('#editor');
+            // F-015: was `#editor` — the id is now the consumer-supplied
+            // input_id (possibly undefined), so target the stable class instead.
+            const editor = this.el.querySelector('.dda-richeditor-field');
             this.quill = new Quill(editor, {
                 modules: {
                     toolbar: [
@@ -33,6 +88,12 @@ export class DdaTextarea {
                 this.value = this.quill.root.innerHTML;
                 this.characterCount = this.quill.getText().length - 1; // Update character count
             });
+            this.syncRichEditorA11y();
+        }
+    }
+    componentDidUpdate() {
+        if (this.enable_rich_editor) {
+            this.syncRichEditorA11y();
         }
     }
     handleInput(event) {
@@ -48,7 +109,15 @@ export class DdaTextarea {
             this.input_status ? `dda-input-${this.input_status}` : '',
             this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '526ef730ca35987cbe8b0d0ddee68a7a44b9c011' }, h("div", { key: '28a02038494692efdac97bcd74c2b9a4a2cfc354', class: textareaClass }, this.label && h("label", { key: 'ede2d805ac6adc01b32b0ccfb9d20196953089f3', htmlFor: this.input_id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters })), this.helper_text && (h("div", { key: '2c82052df04e4e01f06af9eaa788da28e5c66df0', class: "dda-helper-text" }, h("span", { key: 'de738b9edf2cfdfb8d933e0e55db45af3418297e', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '9dd57848081c3b120d7e8154c899e8eb4a07fe39', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.helper_text), h("span", { key: '880a886279652df965424aedd3891e17f2a0172b', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '83e0061cc4575c340d3505694317f9954244f944', class: "dda-error-message" }, h("span", { key: '5c33386da5261f3a4b52b675a966a576988a0498', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '660f6cac35a3d3ee8b6b4abf73d75b151d2ed1bb', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.error_message), h("span", { key: 'c94ee50aa22ddac0be150a72f3f743edeff26c51', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+        return (h(Host, { key: '622c5d071b6bc1a27d98bcce0b2e1103c2cd56b8' }, h("div", { key: '48c2d05b77ef1d8badd31382cb6669d8cc23e46d', class: textareaClass }, this.label && h("label", { key: '6d659cd684ff5afa46ceee22cc33dcdf0995f722', id: this.labelId, htmlFor: this.input_id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        // F-015: previously a bare `<div id="editor">` — the visible
+        // label's `for` cannot target a non-labelable <div>, and even
+        // aria-labelledby here would be wrong: Quill turns this
+        // container into a wrapper and mounts the real editable surface
+        // as a child `.ql-editor`, which is what AT and Tab actually
+        // land on. The ARIA lives on quill.root (.ql-editor), applied
+        // imperatively in syncRichEditorA11y() after mount.
+        h("div", { id: this.input_id, class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: '6d6733d1b96b26acd713f2bdb230a6ecc93e746d', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '6e11cfb6dcc23a17fce5723d3a5e3b6cc8aef3b4', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '0946a74fbf33efb08ce50810b932595341f11b0c', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.helper_text), h("span", { key: 'ef8e61d7fae106951d802253afa962ed82096022', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '539ade6c788aa436587936ccf60a55e025752f18', id: this.errorId, class: "dda-error-message" }, h("span", { key: '25ec27d18994c0a83deb589bb5e407734a03526b', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '40d501e7d690a5525f17c36a7ea7b4114a8515e3', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.error_message), h("span", { key: '191a2521e12bebe37d874f501bfe21d40d183487', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {

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

@@ -10,7 +10,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'b83f75e3b8c3d70e98018c951da5ea3ccc0c6602' }, h("label", { key: '72467061a3897dc32eab8640f67f93a4312a7bf1', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '1dd2b5c72ecc6c8ac253d08437f71363d9c6e372', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '0d14580e223fc04916c7f5b91242e4aa37783228', class: "toggle" }), h("p", { key: '90916a148d933a1e4dbfe91568b4e6891e3bfa1f' }, h("span", { key: 'b75b05a7a391a97c703880b99ccccff53f1877f4', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '2393937d711461dc0634e2cea807d16fb39da344', class: "toggle-supporting" }, "Supporting Text")))));
+        return (h(Host, { key: 'f01e62cab63407de5a460bea59d60be7baef9b96' }, h("label", { key: '42494c1ace83b7b0af66116e6fa263f2abe4a647', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '77e61b283527b562bbac7b1577bb27aaab285913', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '469818087720955164d61897c2d9e31a5d2f082c', class: "toggle" }), h("p", { key: 'a2866cc3ebfde7f3216b0713e725b085099be974' }, h("span", { key: 'd19a8c1a9cc7b252326dce41b0a3dd1577457825', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '667b7febf89ff08e3749dbd95478120c3b4ff091', class: "toggle-supporting" }, "Supporting Text")))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {

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

@@ -16,10 +16,26 @@
   opacity: 0;
   transition: opacity 0.3s;
 }
-.dda-tooltip-container:hover .dda-tooltip-box {
+/*
+ * F-011 (WCAG 1.4.13, 2.1.1): showing the tooltip only on :hover left it
+ * entirely unreachable by keyboard. :focus-within reveals it as soon as the
+ * slotted trigger (or anything inside the tooltip) is focused - matching
+ * `:hover`'s existing "hoverable" and "persistent" behaviour for free,
+ * since the box is a DOM descendant of this same container either way.
+ * Escape-driven dismissal (the third 1.4.13 sub-criterion, and the one
+ * this selector alone can't satisfy) is handled in dda-tooltip.tsx via the
+ * .dismissed class below.
+ */
+.dda-tooltip-container:hover .dda-tooltip-box,
+.dda-tooltip-container:focus-within .dda-tooltip-box {
   visibility: visible;
   opacity: 1;
 }
+
+.dda-tooltip-container.dismissed .dda-tooltip-box {
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
 .dda-tooltip-box strong{
   font-size: 16px;
   color: var(--dda-neutral-0);

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

@@ -3,9 +3,33 @@ export class DdaTooltip {
     constructor() {
         this.position = 'top'; // Default to top position
         this.custom_class = '';
+        // F-011 (WCAG 1.4.13 dismissible): Escape hides the tooltip without
+        // moving the pointer or focus. Losing hover/focus (mouseleave/focusout)
+        // resets it so the next hover or focus shows it again, instead of
+        // suppressing it permanently.
+        this.dismissed = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape' || event.key === 'Esc') {
+                this.dismissed = true;
+            }
+        };
+        this.resetDismissed = () => {
+            if (this.dismissed)
+                this.dismissed = false;
+        };
+    }
+    connectedCallback() {
+        this.el.addEventListener('keydown', this.handleKeyDown);
+        this.el.addEventListener('focusout', this.resetDismissed);
+        this.el.addEventListener('mouseleave', this.resetDismissed);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+        this.el.removeEventListener('focusout', this.resetDismissed);
+        this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: '4494c13e629622514b5c4e5dcfe3d6cba25c3793' }, h("div", { key: 'f5fd919624dcfd05986e7c80a2832f4af8f2d9d1', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode}` }, h("slot", { key: '8c45f3ccf747a7f801b43e19ac0f136c3ac73588' }), h("div", { key: '409fe05bf41db260aa130540c9e9c2439a03083d', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '7df6fbe29044ec091334ea5752f4b8819307a3fa' }, this.title_text), h("p", { key: 'a39656c6e995732b0fd876990a25628372d14dac' }, this.description)))));
+        return (h(Host, { key: '1cdf4f709c81572379fffdfb63832ce42345aceb' }, h("div", { key: '4a02d6eda15fd3e97b56b6eb6e58566164f250ec', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'f18f7b1d729b310b8c5467c4766f675dfedaaea9' }), h("div", { key: 'b21175526d8510415920b09a0993b3bd92387046', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '2571076616dcd823da28a14a9aa3c39b42ef6b1c' }, this.title_text), h("p", { key: '8d1c7abbc7fb5a2d66df13b5abb1a9280495ab07' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {
@@ -119,4 +143,10 @@ export class DdaTooltip {
             }
         };
     }
+    static get states() {
+        return {
+            "dismissed": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }

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

@@ -11,7 +11,7 @@ export class DdaUiCard {
         this.linkicon = 'arrow_forward';
     }
     render() {
-        return (h(Host, { key: '30c63ed62e73c8cc2450bf87e68696fa75d2ffa9' }, h("div", { key: '84b0ee5cd11c08b8ce4f255984686522d18a0e21', class: 'dda-card' }, h("div", { key: '8dbd4052cf9f65ecbee0564f3053451b51f97f4c', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '4d19b37ed54d7750502d0d887e8f3e176e29032e' }, !!this.icon && (h("span", { key: '57208d2990bedd1a9f2aee6bb98d92bce8040705', class: 'dda-card-icon' }, h("i", { key: 'e75ebb8cbfb0c6f01b671578b506b2f0f28643d5', class: 'material-icons' }, this.icon))), !!this.image && (h("span", { key: 'dc779d3cff58242aee5d793f891e6690976729e9', class: 'dda-card-icon' }, h("img", { key: '00412adf49dbdb05f82fb8ae84b211325b2716e3', src: this.image, alt: this.maintitle }))), !!this.maintitle && h("h1", { key: 'fff43c9f0ef550aac34817bed2712e1fa570ed01', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'a9e3e53004c78dae194808dad1611d0267860ef1', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '2d16d8feab0e3162eecabeb0b52048a0a6251281', href: this.link, class: 'dda-card-link' }, this.linktext, ' ', this.linkicon && (h("span", { key: '9d99219b356886256f5e2c81cb9b393d2fea4626' }, h("i", { key: '4a54cfe82b308866a7b6dfab353035da852c6d0a', class: 'material-icons' }, this.linkicon))))))), h("slot", { key: 'b8861e92d81fcb83f2dd4a5eb1eaed2726dd5932' })))));
+        return (h(Host, { key: '23b67e77b8cb78795a684ad15030ac31918853e7' }, h("div", { key: 'abee006879a59559d7154c95c4d88ad1513c75b5', class: 'dda-card' }, h("div", { key: '33732334dafbc7bcaa4a0e24f972e8f04e62c46e', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '626c85266899eeef3690113f51ff06f330f3cf60' }, !!this.icon && (h("span", { key: 'e6a6ddb2ba041b3942f63967b6cce2d618e1a4ba', class: 'dda-card-icon' }, h("i", { key: '340c651b6fbf945d22b9b6405d2077996dcea0e5', class: 'material-icons' }, this.icon))), !!this.image && (h("span", { key: 'aa79e723ca9995cf8e71d33e480418a77ab44e9d', class: 'dda-card-icon' }, h("img", { key: 'c366fdb9f184680b0f94f0f05e7c102f5cf5daeb', src: this.image, alt: this.maintitle }))), !!this.maintitle && h("h1", { key: 'ad686e57e270a8bd12bdb5a98e49e0918a460dfc', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '57dcc9ea2918b7075cd329d8a37ef87ada70fd31', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'f823984df47c3e48570e76c1cd67804d622626ae', href: this.link, class: 'dda-card-link' }, this.linktext, ' ', this.linkicon && (h("span", { key: '5a41b73f4c7b40d15bfeb47e756eabe70ccd49a4' }, h("i", { key: '6be0795bcde440b7274b7bb1d2314f7d453b403c', class: 'material-icons' }, this.linkicon))))))), h("slot", { key: '83e3e779ff67cadae63c41f36f1862a68093d24c' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {