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

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

@@ -44,7 +44,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: 'cd618ae51b42c4b3537c9d79f9d0722c6fedcdf3' }, h("div", { key: '6c5ce0c1e8742ad322d845da606224b0caa9286c', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || ""), h("span", null, title)))))));
+        return (h(Host, { key: '30474ea86c4c1c8fff84f5c09606e1c8a5b88a84' }, h("div", { key: '47bee1548f4f93e7b09b7cb8f28e61d5ddf91f50', 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() {

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

@@ -2,6 +2,14 @@ import { h, Host } from "@stencil/core";
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
 import { uniqueId } from "../../utils/unique-id";
+// English names of the rich editor's toolbar dropdowns; toolbar_labels overrides them.
+const DEFAULT_PICKER_LABELS = {
+    header: 'Heading',
+    color: 'Text colour',
+    background: 'Highlight colour',
+    font: 'Font',
+    align: 'Alignment',
+};
 export class DdaTextarea {
     constructor() {
         /** Value of the textarea. Updates as the user types; in rich text mode it holds the editor HTML. */
@@ -68,6 +76,27 @@ export class DdaTextarea {
             editorEl.removeAttribute('aria-invalid');
         }
     }
+    // Quill names its toolbar buttons but not its dropdowns ("pickers"): each picker's label is a
+    // <span role="button"> with no text, so screen readers announce an unnamed button (axe
+    // aria-command-name). Name each one from toolbar_labels, falling back to English.
+    labelToolbarPickers() {
+        let custom = {};
+        if (typeof this.toolbar_labels === 'string') {
+            try {
+                custom = JSON.parse(this.toolbar_labels);
+            }
+            catch (_a) {
+                custom = {};
+            }
+        }
+        else if (this.toolbar_labels) {
+            custom = this.toolbar_labels;
+        }
+        for (const picker of Object.keys(DEFAULT_PICKER_LABELS)) {
+            const label = this.el.querySelector(`.ql-toolbar .ql-picker.ql-${picker} .ql-picker-label`);
+            label === null || label === void 0 ? void 0 : label.setAttribute('aria-label', custom[picker] || DEFAULT_PICKER_LABELS[picker]);
+        }
+    }
     componentDidLoad() {
         if (this.enable_rich_editor) {
             // F-015: was `#editor` — the id is now the consumer-supplied
@@ -98,11 +127,13 @@ export class DdaTextarea {
                 this.characterCount = this.quill.getText().length - 1; // Update character count
             });
             this.syncRichEditorA11y();
+            this.labelToolbarPickers();
         }
     }
     componentDidUpdate() {
         if (this.enable_rich_editor) {
             this.syncRichEditorA11y();
+            this.labelToolbarPickers();
         }
     }
     handleInput(event) {
@@ -119,7 +150,7 @@ export class DdaTextarea {
             this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: '22ab5c9ede23feedead5b61e2ed4963c1851ecbc' }, h("div", { key: 'cef06c4a45c19a9ae0eefddd2609b9e9e9f1e48c', class: textareaClass }, this.label && h("label", { key: '76fb6bce4a0510aab2a79209f450d201a24ef9a6', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        return (h(Host, { key: '8f62ec35e00cc27385213d87a20ffb212c3d18a7' }, h("div", { key: '40b7431ed35401f0fd3eed435382c025b7315535', class: textareaClass }, this.label && h("label", { key: '8c24c541942306cca7ba1668ad916ce9d99f3b71', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : 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
@@ -127,7 +158,7 @@ export class DdaTextarea {
         // 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: id, class: "dda-richeditor-field" })) : (h("textarea", { id: 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: '382ba6b5dc9755bf262adb033a118c1be6941bd8', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '5d07ab9a7f7698528fc731778bc668c69fa0e5ec', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '33236593cdafdf4ed5694e272f5c4fcf85ca2f68', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '2845bd3bface431badd534f44f12faa748c1a718', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'cc1fabc27cd1bf0f87cfe6e3194c68a0d43ac7f7', id: this.errorId, class: "dda-error-message" }, h("span", { key: '731658aad2027ae1ae107ad58962acb6bbf40eb2', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '80c26defc477ed47439939cbb23875e0373c9598', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: 'e4f4ca076692226881b259322af66f87b18ccc38', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: 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: 'b71d5885604e71af4188d097727c875d7a69ef47', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '497c95108fffd9e12adf08480e8877a9a3cf7ee9', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'caa536f2039c9c85b922d34a5a2f8ee48beeb9f8', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '9bb54ec991d1b38f712974f37741b032056a7a5e', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '24c199bd4481dc7f3061dd1d8f5c78c581be93dc', id: this.errorId, class: "dda-error-message" }, h("span", { key: 'bfa8ef3356a3407130cfb08499c2478b2a70572e', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '1fe75706036a93d63039822dbb8da1d1c659f379', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '52001e0f2bdd24ac1d61f14b17e6a174e01ace11', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {
@@ -314,6 +345,39 @@ export class DdaTextarea {
                 "reflect": false,
                 "attribute": "enable_rich_editor"
             },
+            "toolbar_labels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Partial<Record<RichEditorPicker, string>>",
+                    "resolved": "\"align\" | \"background\" | \"color\" | \"font\" | \"header\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "RichEditorPicker": {
+                            "location": "local",
+                            "path": "/home/runner/work/dubai-design-system/dubai-design-system/packages/stencil/src/components/dda-textarea/dda-textarea.tsx",
+                            "id": "src/components/dda-textarea/dda-textarea.tsx::RichEditorPicker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible names of the rich editor's toolbar dropdowns, as a JSON object or an object. Keys: `header`, `color`, `background`, `font`, `align`. A key that is not set keeps its English default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toolbar_labels"
+            },
             "max_characters": {
                 "type": "number",
                 "mutable": false,

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

@@ -11,7 +11,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '034a0d08e3c605fe38f0f0b3244e1d5cc7442472' }, h("label", { key: '93539da2d2ccfa1e51d0eebf4cc1b234e1e03606', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '21c0ca32b52ed5cb69da4339f1fce9c26dcaf1fa', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '8d2def2951a2566625276ba4d350d2407c19af77', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'e56ce02068c3e3c87f3b7452a81b741560297274' }, this.title_text && h("span", { key: 'faeea2f00ee0c50f0b96b5e24c09da088a98f183', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '7999b6126c0fefb6cb09ac67930e311dad18d2b2', class: "toggle-supporting" }, this.supporting))))));
+        return (h(Host, { key: 'eac9f5ced9ca4d38f3efc55cbcf11fbf878d367b' }, h("label", { key: 'e384f0ca71eec7527d9134ea64e2dec08a665d09', class: toggleClass, htmlFor: this.input_id }, h("input", { key: 'c1f6818b50b9fac0cff146fedbfa13e5a266d0a3', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '313f1f6b8ca14d0b9c7b96f41ea483a2505486d9', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: '463331817fa6376e309543dc94cf6e9a893a7076' }, this.title_text && h("span", { key: 'c2ba361c9e048d4283e9a59d9da510942c10a2af', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: 'a0b6512f2a6c1ace0aede3be49dff2579dd09482', class: "toggle-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class DdaTooltip {
         this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: 'e77ebb12700ccbbef52e2d2138e0950d65127778' }, h("div", { key: 'ea64d67136e615b33138a61f1f1a4ba804db5eea', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'c191a8ff9be73014c2da7b1a4fdbcce57e94ba4d' }), h("div", { key: 'c6733ebddb99c659db89027384a50ba9c7836341', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '47c45f8411f5803c4ba59d0b9b4ac5c830b403c7' }, this.title_text), h("p", { key: '4f08ecda01307162262d7c79aa26e795ff03251b' }, this.description)))));
+        return (h(Host, { key: 'f5622191d861ba0c36c89f17368fce0f570ef597' }, h("div", { key: '449e589306dc734ce2d381fc8e4cffaaba290330', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'd88db337e9f9a7bc321a33fc2a045a9b36f878e3' }), h("div", { key: '63c1bf1f0a515735fdfe546d8009f9c468ca7d95', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '4df5ed27d0aa958a1a8c4ae2d3921025329d1d3d' }, this.title_text), h("p", { key: '9f28802fff31d6ab171fb318117d438d8dd3be25' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {

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

@@ -28,7 +28,7 @@ export class DdaUiCard {
     }
     render() {
         const HeadingTag = this.headingTag;
-        return (h(Host, { key: 'd82fda87340a70612440a60808a854297d749883' }, h("div", { key: '8cb77a42b82ed7121af29a234e4c065a416887d5', class: 'dda-card' }, h("div", { key: 'e25298c9dbb2d9247bdc238f9c505180aae45b67', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '3d6d6e4b66a787270593fc53ecb9432ef87cd144' }, !!this.icon && (h("span", { key: '17d02a755a1a6345961ba4c922d2c5205ca79dcd', class: 'dda-card-icon' }, h("i", { key: 'a4eea58a0b1511548c2d60b12bc05068326ce339', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'fe5b33c447adb2a06c20495b576d185258a98bca', class: 'dda-card-icon' }, h("img", { key: '7db29168e53eebe578fb8241795a47862d732d13', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'c2c0a5bd81432dad7b5400c9011998f30823adbf', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '9620bfa353acba31cb43d4a818c11d17bb58ea6d', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'd81101699701091f7d952c6f38637a621fb27324', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: 'e7304fca873531077bb4cafda43e462b8d3403d4' }, h("i", { key: 'd13a118077f9a11b76ba06f5cb4f1ab20f9b5472', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '995bf90013e00498354bfb9a3bfd6950032dd924' })))));
+        return (h(Host, { key: 'adf18a25d016f46bc87b4a1e31241ca162b333e0' }, h("div", { key: '0737db71a77843ea82b477a2f53cf86edf49d8e9', class: 'dda-card' }, h("div", { key: '798f2db5233a36522d7f84d89119cad74d11a006', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '8c6793c79377b6e5eb0e0ab9bd18a2c1ca4f253a' }, !!this.icon && (h("span", { key: '4570999010919bbf9842e3cd6d3fc4f55dec8c82', class: 'dda-card-icon' }, h("i", { key: 'e80483b0a3da315a7535ab1bda1a2885681152b3', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'b4185ea5c24a6675dc9d0eeef4d179e99130528f', class: 'dda-card-icon' }, h("img", { key: '56306706dce39081bd2cb26bedd0f40b0af6f03c', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: '7c2a2790cd3115a1631a45c49abe98b5467c2e82', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'fd207fb19f40281ba00d9b0310ef8a744e9ad907', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'ec7277518f56c8bc596cc1786b6bc950f1454965', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '2191736e59506877a9a094eca2a8caa80056d9c4' }, h("i", { key: 'beb1f6805dc66f93a85c7e4f47eeab22c38bf6c5', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: 'bbaabacc33bc9bcacfbd20e54a38058339126169' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {

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

@@ -69,7 +69,7 @@ export class DdaSegmentedTabs {
         this.segmentChange.emit(index);
     }
     render() {
-        return (h("div", { key: '4a72982d49270f6c04cee7fdeaafcba7cccc6d3c', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
+        return (h("div", { key: '182bb79c4e5cc855c33642c649185c2f7da80884', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
             const isSelected = index === this.active_index;
             const className = `dda-segmented-item${isSelected ? ' active' : ''}`;
             return item.startsWith('fo') ? (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', "aria-label": this.iconLabel(item, index), onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));

package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.js

@@ -20,7 +20,7 @@ export class DdaHorizontalStepper {
         }
     }
     render() {
-        return (h(Host, { key: '30afa97eccb87ee8595802f451f2ca2f0624da2a' }, h("div", { key: '70d6126c99005e54565473c574bde94545584b58', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
+        return (h(Host, { key: 'c1434fd26373f59e991e22d9e1287b2c797a76e7' }, h("div", { key: '8f7bbcc7faefee327222fb192ecf12bd2c99ad06', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
     }
     static get is() { return "dda-horizontal-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.js

@@ -24,7 +24,7 @@ export class DdaVerticalStepper {
     render() {
         var _a;
         const current = (_a = this.current_step) !== null && _a !== void 0 ? _a : this.current_Step;
-        return (h(Host, { key: '9aefae11819e6581b65a39af851806fb2c4cfd75' }, h("div", { key: 'b9f812a1626f99993e07a3cf07c0a0a15ed42f11', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
+        return (h(Host, { key: '1d0b6cbc4fb3f11bc24adce00250b43a6a42374e' }, h("div", { key: '8fa15dad62552c04527e97e7b98e1450c61cf9e9', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons`, "aria-hidden": "true" }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "chevron_right"))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/global/global.css

@@ -560,6 +560,7 @@
   --dda-neutral-variant-99: #F4FEFD;
   --dda-neutral-variant-100: #FFFFFF;
 
+  --dda-surface-variant-94: var(--dda-neutral-variant-94);
   --dda-surface-variant-90: var(--dda-neutral-variant-90);
   --dda-surface-variant-87: var(--dda-neutral-variant-87);
   --dda-surface-variant-80: var(--dda-neutral-variant-80);
@@ -574,6 +575,8 @@
 
 :root[data-theme='dark'] {
 
+  /* Behind --dda-color-primary-40 text (the active tab): #21BEBA on #293232 is 5.72:1. */
+  --dda-surface-variant-94: var(--dda-neutral-variant-20);
   --dda-surface-variant-90: var(--dda-neutral-variant-30);
   --dda-surface-variant-87: var(--dda-neutral-variant-25);
   --dda-surface-variant-80: var(--dda-neutral-variant-22);
@@ -3028,23 +3031,43 @@ body {
     width: calc(100% - 32px);
 }
 
+/* The mega menu opens under its own link, like the 3.x dropdown (.dda-default-submenu), and is as
+   wide as its columns. When it does not fit there, dda-header sets --dda-mega-shift to flip it back
+   toward the start of the nav, or to clamp it inside the screen (alignMegaPanel). */
 .megamenu-content{
     display: none;
-    width: 100%;
-    padding: 0 15px;
-    position: fixed;
-    top: 150px;
-    left: 0;
+    width: max-content;
+    max-width: calc(100vw - 32px);
+    padding-top: 5px;
+    position: absolute;
+    top: 100%;
+    inset-inline-start: var(--dda-mega-shift, 0px);
+    z-index: 1;
 }
 .megamenu-item{
     min-height: 350px;
     background: var(--dda-surface-100);
     border-radius: 8px;
-    margin: 0 auto;
+    margin: 0;
     padding: 42px 15px;
     box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
     position: relative;
 }
+/* .megamenu-item also has .dda-container; the panel is not a page-wide container. Its height comes
+   from its links, and the end padding keeps the close button clear of the column titles. */
+.megamenu-content .megamenu-item.dda-container{
+    width: auto;
+    max-width: none;
+    min-height: 0;
+    padding-block: 32px 16px;
+    padding-inline-end: 64px;
+}
+/* Fixed-width columns: percentage columns (.dda-col-md-3) have no width to take in a max-content panel. */
+.megamenu-content .dda-row > [class*='dda-col-']{
+    flex: 0 0 300px;
+    width: 300px;
+    max-width: 300px;
+}
 .megamenu-item .mega-menu-title{
     height: 24px;
     font-size: var(--dda-fs-body-lg);

package/dist/collection/global/input.css

@@ -708,7 +708,12 @@
  * report for the computed ratios.
  */
 .dda-validation-error .dda-input-field:focus-visible,
-.dda-input-disabled .dda-input-field:focus-visible {
+.dda-input-disabled .dda-input-field:focus-visible,
+/* The phone and number fields put their input inside a bordered group. In the error and disabled
+   states the group drops its focus shadow, so the input itself takes the ring (WCAG 2.4.7). */
+.dda-validation-error .dda-field-group-input:focus-visible,
+.dda-input-disabled .dda-field-group-input:focus-visible,
+.dda-phone-field-group.error .dda-field-group-input:focus-visible {
     outline: none;
     box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
 }