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

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

@@ -1,15 +1,39 @@
 import { h } from "@stencil/core";
 export class DdaSegmentedTabs {
     constructor() {
+        /** Index of the segment selected by default. Clamped to a valid item index. */
+        this.selected_index = 0;
+        /** F-004 repair: the currently-selected segment. Exactly one segment is
+         * selected at a time; this is what makes the component interactive at all. */
+        this.active_index = 0;
         this.parsedItems = [];
     }
     componentWillLoad() {
         this.parsedItems = JSON.parse(this.items);
+        this.active_index = this.clampIndex(this.selected_index);
+    }
+    clampIndex(index) {
+        if (!Array.isArray(this.parsedItems) || this.parsedItems.length === 0) {
+            return 0;
+        }
+        if (typeof index !== 'number' || index < 0 || index >= this.parsedItems.length) {
+            return 0;
+        }
+        return index;
+    }
+    selectSegment(index) {
+        if (index === this.active_index) {
+            return;
+        }
+        this.active_index = index;
+        this.segmentChange.emit(index);
     }
     render() {
-        return (h("div", { key: 'e0189026efbabcdfae9ccef7050705bf645bf33a', class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map(item => (item.startsWith('fo') ?
-            h("button", { name: this.button_name, class: "dda-segmented-item" }, h("i", { class: "material-icons  material-symbols-outlined" }, item)) :
-            h("button", { name: this.button_name, class: "dda-segmented-item" }, item)))));
+        return (h("div", { key: '83b176643df1781211b5ec722d0c057002c6bc72', 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', onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));
+        })));
     }
     static get is() { return "dda-segmented-tabs"; }
     static get originalStyleUrls() {
@@ -118,7 +142,69 @@ export class DdaSegmentedTabs {
                 "setter": false,
                 "reflect": false,
                 "attribute": "button_name"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the group (applied as aria-label on the group container)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label"
+            },
+            "selected_index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the segment selected by default. Clamped to a valid item index."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected_index",
+                "defaultValue": "0"
             }
         };
     }
+    static get states() {
+        return {
+            "active_index": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "segmentChange",
+                "name": "segmentChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the newly-selected index whenever the selection changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -23,12 +23,26 @@ export default {
         button_name: {
             control: { type: 'text' },
             description: 'Button name',
-        }
+        },
+        aria_label: {
+            control: { type: 'text' },
+            description: 'Accessible name for the group (applied as aria-label on the role="group" container)',
+        },
+        selected_index: {
+            control: { type: 'number' },
+            description: 'Index of the segment selected by default (clamped to a valid item index; defaults to 0)',
+        },
     },
     parameters: {
         docs: {
             description: {
                 component: `
+  Exactly one segment is selected at a time. Clicking a segment, or focusing it with
+  Tab and activating it with Enter or Space, selects it and fires \`segmentChange\`
+  with the newly-selected index. This is a group of mutually-exclusive toggle
+  buttons (\`role="group"\` + \`aria-pressed\`), not the WAI tabs pattern — it has no
+  associated tabpanels, so it does not claim \`role="tablist"\`/\`"tab"\`.
+
   To use the \`dda-segmented-tabs\` component, pass the following props:
 
   \`\`\`html
@@ -38,6 +52,8 @@ export default {
     component_mode=""
     items='["All","Recent","Saved"]'
     button_name="button_name"
+    aria_label="Filter results"
+    selected_index="0"
 ></dda-segmented-tabs>
   \`\`\`
   `,
@@ -60,6 +76,8 @@ TextItems.args = {
     custom_class: '',
     component_mode: '',
     button_name: 'button',
+    aria_label: 'Filter results',
+    selected_index: 0,
 };
 export const IconItems = Template.bind({});
 IconItems.args = {
@@ -68,4 +86,6 @@ IconItems.args = {
     custom_class: '',
     component_mode: '',
     button_name: 'button',
+    aria_label: 'Text alignment',
+    selected_index: 0,
 };

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

@@ -45,13 +45,17 @@
 .h-step .h-step-title {
   font-size: 14px;
   font-weight: var(--dda-fw-400);
-  color: var(--dda-neutral-variant-30);
+  color: var(--dda-on-surface-variant-30);
   margin-bottom: 10px;
 }
 
+.light-mode .h-step .h-step-title {
+  color: var(--dda-neutral-variant-30);
+}
+
 .h-step .h-step-subtitle {
   font-size: 18px;
-  color: var(--dda-neutral-60);
+  color: var(--dda-on-surface-muted);
   font-weight: var(--dda-fw-500);
 }
 
@@ -61,7 +65,7 @@
 
 .h-step .h-step-description {
   font-size: 14px;
-  color: var(--dda-neutral-60);
+  color: var(--dda-on-surface-muted);
 }
 
 .h-step.completed .circle{
@@ -101,9 +105,17 @@
 }
 .h-step.completed .h-step-subtitle,
 .h-step.active .h-step-subtitle{
+  color: var(--dda-on-surface-0);
+}
+.light-mode .h-step.completed .h-step-subtitle,
+.light-mode .h-step.active .h-step-subtitle{
   color: var(--dda-neutral-0);
 }
 .h-step.completed .h-step-description,
 .h-step.active .h-step-description{
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .h-step.completed .h-step-description,
+.light-mode .h-step.active .h-step-description{
   color: var(--dda-neutral-variant-30);
 }

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

@@ -8,7 +8,7 @@ export class DdaHorizontalStepper {
         this.parsedSteps = JSON.parse(this.steps);
     }
     render() {
-        return (h(Host, { key: '72b17c2db0f8fbecedab6a228fe807b26ccce42b' }, h("div", { key: '613016ac02a3c302e266a3043a73e0bcb88cd41a', 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: '5b6bf0b6d79e08768c25d78f15e14bb449f3f9d4' }, h("div", { key: 'f3c2ef7bd4ae7685747fe4194b143c2fc962d3bb', 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

@@ -9,7 +9,7 @@ export class DdaVerticalStepper {
         this.parsedSteps = JSON.parse(this.steps);
     }
     render() {
-        return (h(Host, { key: '7255a2449381606ddb2b225a5e84bb067b1dbfe8' }, h("div", { key: '438ad499767fe4b47aed90d0bd85652e377ddfdc', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= this.current_Step ? '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: '2cc0fba05a159beb85c51bc0d27a81a1714ad3de' }, h("div", { key: 'b9b4f452fb34f825dd30581fa976ccf183b7921f', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= this.current_Step ? '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"))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/global/dda-button.css

@@ -12,6 +12,53 @@
   justify-content: center;
   gap: .5rem;
 }
+/**
+ * WCAG 2.4.7/1.4.11 focus-visible repair (Task 9d: F-019, F-020, F-021).
+ * Every btn-color-* variant used to rely on a per-variant `:focus` rule to
+ * restore an indicator over the base `outline: 0` above - most attempted it
+ * with a malformed single-value `outline: <color>` shorthand (resets
+ * outline-style to its initial `none`, so nothing ever rendered - F-019),
+ * one variant (onsurface-primary) never attempted it at all (F-020), and
+ * variants with no :focus rule at all (e.g. btn-color-disabled, the
+ * "looks disabled but isn't" style used without the native `disabled`
+ * attribute) showed no change whatsoever (F-021). One rule here replaces
+ * all of that: a `:focus-visible`-scoped box-shadow ring, so a mouse click
+ * leaves no ring but Tab does. Same white+dark double-ring idiom as
+ * dda-home-banner's `.slider-nav *:focus-visible` (home-banner.css:182-187)
+ * - reused deliberately so the system has one focus-ring recipe, not one
+ * per component. box-shadow is not clobbered by any rule in this file, and
+ * a fixed white/black pair is contrast-safe against every btn-color-*
+ * background in both `data-theme` values by construction: for any
+ * background, at least one of pure white or pure black clears 3:1 against
+ * it (the two are complementary across the luminance range) - verified
+ * against every variant this task touched, see the task 9d report.
+ */
+.dda-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+/**
+ * Deliberate exemption, not an oversight: btn-color-default-link,
+ * btn-color-error-link and btn-color-onsurface-link (22px tall, no
+ * background, no border - styled to read as inline text, not a button)
+ * already had a working, unbroken `outline: auto` on `:focus` (:158-160,
+ * 260-262, 359-361) before this task started. They were never part of
+ * F-019/F-020/F-021. Without this exemption the rule above would paint its
+ * box-shadow ring on top of that already-working outline - not a WCAG
+ * failure (over-indication, not under), but two different focus treatments
+ * inside one component family, which defeats the point of standardising on
+ * one idiom. A box-shadow ring reads as a filled rectangle; on a
+ * link-styled control with no visible button chrome at rest, that would
+ * change its resting silhouette into something that looks like a real
+ * button the instant it's focused - a worse fit than the native outline,
+ * which just traces the existing text. So: keep the native outline for the
+ * three link variants, suppress the shared ring for them specifically.
+ */
+.btn-color-default-link:focus-visible,
+.btn-color-error-link:focus-visible,
+.btn-color-onsurface-link:focus-visible {
+  box-shadow: none;
+}
 /**/
 .btn-color-default-primary{
   background-color: var(--dda-color-primary-40);
@@ -24,7 +71,6 @@
 }
 .btn-color-default-primary:focus {
   background-color: var(--dda-on-primary-variant-20);
-  outline: var(--dda-on-primary-variant-20);
 }
 /*light*/
 .light-mode.btn-color-default-primary,
@@ -41,7 +87,6 @@
 .light-mode.btn-color-default-primary:focus,
 .light-mode .btn-color-default-primary:focus {
   background-color: var(--dda-primary-20);
-  outline: var(--dda-primary-20);
 }
 /**/
 
@@ -57,7 +102,6 @@
 }
 .btn-color-default-secondary:focus {
   background-color: var(--dda-primary-variant-92);
-  outline: var(--dda-primary-variant-92);
 }
 /*light*/
 .light-mode.btn-color-default-secondary {
@@ -71,7 +115,6 @@
 }
 .light-mode.btn-color-default-secondary:focus {
   background-color: var(--dda-primary-92);
-  outline: var(--dda-primary-92);
 }
 /**/
 
@@ -130,7 +173,6 @@
 .btn-color-error-primary:focus {
   background-color: var(--dda-color-error-30);
   border: solid 1px var(--dda-color-error-30);
-  outline: var(--dda-color-error-30);
 }
 /*light*/
 .light-mode.btn-color-error-primary {
@@ -145,7 +187,6 @@
 .light-mode.btn-color-error-primary:focus {
   background-color: var(--dda-error-30);
   border: solid 1px var(--dda-error-30);
-  outline: var(--dda-error-30);
 }
 /**/
 
@@ -332,7 +373,6 @@
 .btn-color-secondary:focus {
   background-color: var(--dda-color-secondary-20);
   border: solid 1px var(--dda-color-secondary-20);
-  outline: var(--dda-color-secondary-20);
 }
 /*light*/
 .light-mode.btn-color-secondary {
@@ -347,7 +387,6 @@
 .light-mode.btn-color-secondary:focus {
   background-color: var(--dda-secondary-20);
   border: solid 1px var(--dda-secondary-20);
-  outline: var(--dda-secondary-20);
 }
 /**/
 
@@ -363,7 +402,6 @@
 .btn-color-success:focus {
   background-color: var(--dda-color-success-30);
   border: solid 1px var(--dda-color-success-30);
-  outline: var(--dda-color-success-30);
 }
 /*light*/
 .light-mode.btn-color-success {
@@ -378,7 +416,6 @@
 .light-mode.btn-color-success:focus {
   background-color: var(--dda-success-30);
   border: solid 1px var(--dda-success-30);
-  outline: var(--dda-success-30);
 }
 /**/
 
@@ -395,7 +432,6 @@
 .btn-color-warning:focus {
   background-color: var(--dda-color-warning-30);
   border: solid 1px var(--dda-color-warning-30);
-  outline: var(--dda-color-warning-30);
 }
 /*light*/
 .light-mode.btn-color-warning {
@@ -411,7 +447,6 @@
 .light-mode.btn-color-warning:focus {
   background-color: var(--dda-warning-30);
   border: solid 1px var(--dda-warning-30);
-  outline: var(--dda-warning-30);
 }
 /**/
 
@@ -427,7 +462,6 @@
 .btn-color-surface:focus {
   background-color: var(--dda-surface-92);
   border: solid 1px var(--dda-surface-92);
-  outline: var(--dda-on-surface-20);
 }
 /*light*/
 .light-mode.btn-color-surface {
@@ -442,7 +476,6 @@
 .light-mode.btn-color-surface:focus {
   background-color: var(--dda-neutral-92);
   border: solid 1px var(--dda-neutral-92);
-  outline: var(--dda-neutral-20);
 }
 /**/
 
@@ -458,7 +491,6 @@
 .btn-color-surface-variant:focus {
   background-color: var(--dda-on-surface-variant-20);
   border: solid 1px var(--dda-on-surface-variant-20);
-  outline: var(--dda-on-surface-variant-20);
 }
 /*light*/
 .light-mode.btn-color-surface-variant {
@@ -473,20 +505,19 @@
 .light-mode.btn-color-surface-variant:focus {
   background-color: var(--dda-neutral-variant-20);
   border: solid 1px var(--dda-neutral-variant-20);
-  outline: var(--dda-neutral-variant-20);
 }
 /**/
 
 .btn-color-disabled {
   background-color: var(--dda-surface-92) !important;
   border: solid 1px var(--dda-surface-92) !important;
-  color: var(--dda-neutral-60) !important;
+  color: var(--dda-on-surface-muted) !important;
   cursor: not-allowed;
 }
 .light-mode.btn-color-disabled {
   background-color: var(--dda-neutral-92) !important;
   border: solid 1px var(--dda-neutral-92) !important;
-  color: var(--dda-neutral-60) !important;
+  color: var(--dda-neutral-40) !important;
   cursor: not-allowed;
 }
 /**/

package/dist/collection/global/global.css

@@ -63,7 +63,10 @@
   --dda-on-primary-94: var(--dda-primary-20);
 
   --dda-primary-variant-96: var(--dda-primary-30);
-  --dda-primary-variant-95: var(--dda-primary-30);
+  /* F-023 Decision 2: was var(--dda-primary-30) — 4.05:1 against the alert's
+     info text, failing 4.5:1. Darkening the fill (not the text, which is
+     also the alert's border/link/icon colour) brings it to 5.72:1. */
+  --dda-primary-variant-95: var(--dda-primary-20);
   --dda-primary-variant-94: var(--dda-primary-25);
   --dda-primary-variant-92: var(--dda-primary-20);
   --dda-primary-variant-87: var(--dda-primary-12);
@@ -282,7 +285,11 @@
 }
 :root[data-theme='dark'] {
   --dda-color-warning-50: var(--dda-warning-80);
-  --dda-color-warning-40: var(--dda-warning-50);
+  /* F-023 Decision 2: was var(--dda-warning-50) — 2.08:1 against the alert's
+     warning fill, failing both the 24px title's 3:1 and the description's
+     4.5:1. This token is also the alert's border/link/icon colour, so the
+     text tone moves (not the fill) to stay in one place: 5.47:1. */
+  --dda-color-warning-40: var(--dda-warning-80);
   --dda-color-warning-30: var(--dda-warning-90);
   --dda-color-warning-20: var(--dda-warning-94);
 
@@ -499,6 +506,11 @@
   --dda-on-surface-30: var(--dda-neutral-30);
   --dda-on-surface-40: var(--dda-neutral-40);
   --dda-on-surface-0: var(--dda-neutral-0);
+
+  /* F-023 Decision 1: theme-aware muted/disabled-text alias. --dda-neutral-60
+     itself stays a theme-invariant raw ramp step; this alias is the
+     theme-aware layer for the 8 call sites that use it as text. */
+  --dda-on-surface-muted: var(--dda-neutral-40);
 }
 
 :root[data-theme='dark'] {
@@ -515,6 +527,8 @@
   --dda-on-surface-20: var(--dda-neutral-90);
   --dda-on-surface-30: var(--dda-neutral-80);
   --dda-on-surface-40: var(--dda-neutral-70);
+
+  --dda-on-surface-muted: var(--dda-neutral-70);
 }
 
 :root {
@@ -2036,6 +2050,16 @@
     width: 100%;
     z-index: 5;
     padding: 0 20px;
+    transform: translateY(0);
+    transition: transform 300ms ease-in-out;
+}
+
+/* dda-sticky-footer toggles this class off its own scroll-direction state
+   (see dda-sticky-footer.tsx handleScroll) to hide the bar while scrolling
+   down and bring it back while scrolling up. Same transition idiom as
+   .dda-header in dda-header-main.css. */
+.dda-footer.hidden {
+    transform: translateY(100%);
 }
 
 .footer-content {

package/dist/collection/global/input.css

@@ -210,7 +210,6 @@
     cursor: pointer;
 }
 
-.dda-input-dropdown-item:focus-visible,
 .dda-input-dropdown-item:hover {
     background-color: var(--dda-neutral-variant-95);
     outline: 0;
@@ -295,14 +294,14 @@
 .dda-input-disabled .dda-dropdown-select,
 .dda-input-disabled .dda-file-input span,
 .dda-input-disabled .dda-file-choose {
-    color: var(--dda-neutral-60) !important;
+    color: var(--dda-on-surface-muted) !important;
 }
 
 .dda-input-disabled .dda-input-field-group,
 .dda-input-disabled .dda-input-field {
-    background: var(--dda-neutral-92);
+    background: var(--dda-surface-92);
     border-color: var(--dda-neutral-90);
-    color: var(--dda-neutral-60) !important;
+    color: var(--dda-on-surface-muted) !important;
     box-shadow: none;
     pointer-events: none;
 }
@@ -313,11 +312,11 @@
     fill: var(--dda-neutral-variant-60);
 }
 .dda-input-disabled .dda-input-field::-ms-input-placeholder {
-    color: var(--dda-neutral-60);
+    color: var(--dda-on-surface-muted);
 }
 
 .dda-input-disabled .dda-input-field::placeholder {
-    color: var(--dda-neutral-60);
+    color: var(--dda-on-surface-muted);
 }
 
 .dda-input-disabled .dda-btn {
@@ -552,7 +551,7 @@
 }
 .dda-file-choose {
     height: 40px;
-    background-color: var(--dda-neutral-100);
+    background-color: var(--dda-surface-100);
     border: solid 1px var(--dda-neutral-90);
     color: var(--dda-color-primary-40);
     font-weight: var(--dda-fw-500);
@@ -566,7 +565,7 @@
 }
 
 .dda-input-disabled .dda-file-choose {
-    background-color: var(--dda-neutral-95);
+    background-color: var(--dda-surface-94);
 }
 
 .dda-file-choose input {
@@ -613,3 +612,65 @@
     padding: 0px;
 }
 
+/**
+ * WCAG 2.4.7/1.4.11 focus-visible repair (Task 9d: F-021).
+ *
+ * `.dda-validation-error .dda-input-field` and `.dda-input-disabled
+ * .dda-input-field` (above) both set `box-shadow: none` unconditionally,
+ * regardless of focus state, at the same or higher specificity than the
+ * base `.dda-input-field:focus` ring (line ~78) - so on these two states
+ * the ring never rendered at all. Neither state's story sets the real
+ * `disabled` attribute on the underlying <input>/<textarea>/<button>, so
+ * these remain real, reachable Tab stops. `.dda-dropdown-container.bg-
+ * transparent .dda-dropdown-header` has the same defect by a different
+ * route: `box-shadow: none` at *higher* specificity than the base ring it
+ * shares via its own `dda-input-field` class. `.ql-editor` (Quill's rich-
+ * text region, dda-textarea's enable_rich_editor mode) never had a focus
+ * rule of any kind - it carries no dda-* class at all.
+ *
+ * `.dda-input-dropdown-item:focus-visible` (Task: final-fix-wave, F-002's
+ * arrow-navigable dda-select option list): was paired with `:hover` at
+ * line ~213, `outline: 0`, background-only - 1.13:1 against the list
+ * background, identical to the `:hover` state, so a keyboard user could
+ * not tell focus from a stray pointer. Split from `:hover` and given the
+ * same double-ring here instead. Shared by dda-select, dda-avatar,
+ * dda-phonefield and dda-number-field's option lists, all of which use
+ * this one class.
+ *
+ * Each fix below adds `:focus-visible` to the exact selector that broke
+ * the ring, which raises its specificity strictly above the offending rule
+ * (or, for the validation-error case, ties the `.light-mode` variant's
+ * specificity - placed at the end of the file so source order also
+ * resolves in its favour). Same white+dark double-ring idiom as
+ * `.dda-btn:focus-visible` (dda-button.css) and dda-home-banner's
+ * `.slider-nav *:focus-visible` (home-banner.css:182-187) - one focus-ring
+ * recipe reused everywhere. Fixed white/black colours need no per-theme or
+ * per-`.light-mode` variant: for any background, at least one of pure
+ * white or pure black clears 3:1 against it - verified against every
+ * background this task touched (input/textarea/select/search-input/
+ * creditcard-field's surface-100 and disabled-neutral-92 backgrounds, the
+ * rich editor's white background, and the dropdown's transparent-over-
+ * surface-100 background) in both `data-theme` values; see the task 9d
+ * report for the computed ratios.
+ */
+.dda-validation-error .dda-input-field:focus-visible,
+.dda-input-disabled .dda-input-field:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+
+.dda-dropdown-container.bg-transparent .dda-dropdown-header:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+
+.dda-richeditor-field .ql-editor:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+
+.dda-input-dropdown-item:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+

package/dist/collection/utils/contrast.js

@@ -0,0 +1,38 @@
+// F-023: shared test helper for asserting the *contrast outcome* of a
+// foreground/background pairing, not the CSS custom property name behind it.
+// Not consumed by any component — used only from e2e specs, which read real
+// `getComputedStyle()` color strings (e.g. "rgb(94, 96, 95)") from a
+// rendered page and pass them here.
+/**
+ * Parses a CSS color string as returned by `getComputedStyle()`
+ * (`rgb(r, g, b)` or `rgba(r, g, b, a)`) into its channel values.
+ */
+export function parseRgb(color) {
+    const match = color.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+    if (!match) {
+        throw new Error(`contrast.ts: could not parse computed color "${color}"`);
+    }
+    return { r: Number(match[1]), g: Number(match[2]), b: Number(match[3]) };
+}
+function channelLuminance(channel) {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+/** WCAG relative luminance, 0 (black) to 1 (white). */
+export function relativeLuminance({ r, g, b }) {
+    return 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b);
+}
+/**
+ * WCAG contrast ratio between two colors, each either a `getComputedStyle()`
+ * color string or a pre-parsed { r, g, b }. Order doesn't matter — the
+ * lighter color is always treated as the numerator, per spec.
+ */
+export function contrastRatio(a, b) {
+    const rgbA = typeof a === 'string' ? parseRgb(a) : a;
+    const rgbB = typeof b === 'string' ? parseRgb(b) : b;
+    const lumA = relativeLuminance(rgbA);
+    const lumB = relativeLuminance(rgbB);
+    const lighter = Math.max(lumA, lumB);
+    const darker = Math.min(lumA, lumB);
+    return (lighter + 0.05) / (darker + 0.05);
+}