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

package/dist/types/components.d.ts

@@ -254,6 +254,10 @@ export namespace Components {
     }
     interface DdaCreditcardField {
         "aria_label"?: string;
+        /**
+          * @default 'cc-number'
+         */
+        "autocomplete": string;
         "card_icon": string;
         "component_mode"?: string;
         /**
@@ -351,6 +355,51 @@ export namespace Components {
         "toggle_accessibility_button_name": string;
     }
     interface DdaHomeBanner {
+        /**
+          * Accessible name for the carousel region.
+          * @default 'Highlights'
+         */
+        "aria_label": string;
+        /**
+          * Advance through the slides automatically.
+          * @default false
+         */
+        "autoplay": boolean;
+        /**
+          * Milliseconds each slide is shown for when `autoplay` is on. Clamped to a 1000ms floor.
+          * @default 5000
+         */
+        "interval": number;
+        /**
+          * Accessible name for the next-slide button.
+          * @default 'Next slide'
+         */
+        "next_button_label": string;
+        /**
+          * Accessible name for the pause button shown while autoplay is running.
+          * @default 'Pause slideshow'
+         */
+        "pause_button_label": string;
+        /**
+          * Accessible name for the play button shown while autoplay is paused.
+          * @default 'Play slideshow'
+         */
+        "play_button_label": string;
+        /**
+          * Accessible name for the previous-slide button.
+          * @default 'Previous slide'
+         */
+        "previous_button_label": string;
+        /**
+          * Prefix for each slide dot's accessible name, e.g. "Go to slide 2".
+          * @default 'Go to slide'
+         */
+        "slide_button_label": string;
+        /**
+          * Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted.
+          * @default 'Slide {current} of {total}'
+         */
+        "slide_status_label": string;
     }
     interface DdaHorizontalStepper {
         "component_mode"?: string;
@@ -487,6 +536,10 @@ export namespace Components {
     }
     interface DdaPhonefield {
         "aria_label": string;
+        /**
+          * @default 'tel'
+         */
+        "autocomplete": string;
         "button_aria_label": string;
         "button_id"?: string;
         "component_mode"?: string;
@@ -510,6 +563,10 @@ export namespace Components {
         "validation_type"?: string;
     }
     interface DdaProgressbar {
+        /**
+          * @default 'Progress'
+         */
+        "aria_label": string;
         "component_mode"?: string;
         "custom_class": string;
         /**
@@ -596,6 +653,7 @@ export namespace Components {
          */
         "has_error": boolean;
         "helper_text": string;
+        "input_id"?: string;
         "input_status"?: string;
         "label": string;
         /**
@@ -614,11 +672,20 @@ export namespace Components {
         "size": string;
     }
     interface DdaSegmentedTabs {
+        /**
+          * Accessible name for the group (applied as aria-label on the group container).
+         */
+        "aria_label": string;
         "button_name": string;
         "component_mode"?: string;
         "custom_class": string;
         "items": string;
         "radius_type": string;
+        /**
+          * Index of the segment selected by default. Clamped to a valid item index.
+          * @default 0
+         */
+        "selected_index": number;
     }
     interface DdaSelect {
         "aria_label"?: string;
@@ -824,6 +891,10 @@ export interface DdaHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDdaHeaderElement;
 }
+export interface DdaSegmentedTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDdaSegmentedTabsElement;
+}
 export interface DdaTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDdaTabsElement;
@@ -1013,7 +1084,18 @@ declare global {
         prototype: HTMLDdaSearchInputElement;
         new (): HTMLDdaSearchInputElement;
     };
+    interface HTMLDdaSegmentedTabsElementEventMap {
+        "segmentChange": number;
+    }
     interface HTMLDdaSegmentedTabsElement extends Components.DdaSegmentedTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDdaSegmentedTabsElementEventMap>(type: K, listener: (this: HTMLDdaSegmentedTabsElement, ev: DdaSegmentedTabsCustomEvent<HTMLDdaSegmentedTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDdaSegmentedTabsElementEventMap>(type: K, listener: (this: HTMLDdaSegmentedTabsElement, ev: DdaSegmentedTabsCustomEvent<HTMLDdaSegmentedTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLDdaSegmentedTabsElement: {
         prototype: HTMLDdaSegmentedTabsElement;
@@ -1377,6 +1459,10 @@ declare namespace LocalJSX {
     }
     interface DdaCreditcardField {
         "aria_label"?: string;
+        /**
+          * @default 'cc-number'
+         */
+        "autocomplete"?: string;
         "card_icon"?: string;
         "component_mode"?: string;
         /**
@@ -1482,6 +1568,51 @@ declare namespace LocalJSX {
         "toggle_accessibility_button_name"?: string;
     }
     interface DdaHomeBanner {
+        /**
+          * Accessible name for the carousel region.
+          * @default 'Highlights'
+         */
+        "aria_label"?: string;
+        /**
+          * Advance through the slides automatically.
+          * @default false
+         */
+        "autoplay"?: boolean;
+        /**
+          * Milliseconds each slide is shown for when `autoplay` is on. Clamped to a 1000ms floor.
+          * @default 5000
+         */
+        "interval"?: number;
+        /**
+          * Accessible name for the next-slide button.
+          * @default 'Next slide'
+         */
+        "next_button_label"?: string;
+        /**
+          * Accessible name for the pause button shown while autoplay is running.
+          * @default 'Pause slideshow'
+         */
+        "pause_button_label"?: string;
+        /**
+          * Accessible name for the play button shown while autoplay is paused.
+          * @default 'Play slideshow'
+         */
+        "play_button_label"?: string;
+        /**
+          * Accessible name for the previous-slide button.
+          * @default 'Previous slide'
+         */
+        "previous_button_label"?: string;
+        /**
+          * Prefix for each slide dot's accessible name, e.g. "Go to slide 2".
+          * @default 'Go to slide'
+         */
+        "slide_button_label"?: string;
+        /**
+          * Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted.
+          * @default 'Slide {current} of {total}'
+         */
+        "slide_status_label"?: string;
     }
     interface DdaHorizontalStepper {
         "component_mode"?: string;
@@ -1618,6 +1749,10 @@ declare namespace LocalJSX {
     }
     interface DdaPhonefield {
         "aria_label"?: string;
+        /**
+          * @default 'tel'
+         */
+        "autocomplete"?: string;
         "button_aria_label"?: string;
         "button_id"?: string;
         "component_mode"?: string;
@@ -1641,6 +1776,10 @@ declare namespace LocalJSX {
         "validation_type"?: string;
     }
     interface DdaProgressbar {
+        /**
+          * @default 'Progress'
+         */
+        "aria_label"?: string;
         "component_mode"?: string;
         "custom_class"?: string;
         /**
@@ -1727,6 +1866,7 @@ declare namespace LocalJSX {
          */
         "has_error"?: boolean;
         "helper_text"?: string;
+        "input_id"?: string;
         "input_status"?: string;
         "label"?: string;
         /**
@@ -1745,11 +1885,24 @@ declare namespace LocalJSX {
         "size"?: string;
     }
     interface DdaSegmentedTabs {
+        /**
+          * Accessible name for the group (applied as aria-label on the group container).
+         */
+        "aria_label"?: string;
         "button_name"?: string;
         "component_mode"?: string;
         "custom_class"?: string;
         "items"?: string;
+        /**
+          * Emits the newly-selected index whenever the selection changes.
+         */
+        "onSegmentChange"?: (event: DdaSegmentedTabsCustomEvent<number>) => void;
         "radius_type"?: string;
+        /**
+          * Index of the segment selected by default. Clamped to a valid item index.
+          * @default 0
+         */
+        "selected_index"?: number;
     }
     interface DdaSelect {
         "aria_label"?: string;
@@ -2080,6 +2233,7 @@ declare namespace LocalJSX {
         "input_id": string;
         "aria_label": string;
         "input_name": string;
+        "autocomplete": string;
     }
     interface DdaDropdownAttributes {
         "label": string;
@@ -2134,6 +2288,17 @@ declare namespace LocalJSX {
         "close_sidebar_button_name": string;
         "toggle_accessibility_button_name": string;
     }
+    interface DdaHomeBannerAttributes {
+        "autoplay": boolean;
+        "interval": number;
+        "aria_label": string;
+        "previous_button_label": string;
+        "next_button_label": string;
+        "pause_button_label": string;
+        "play_button_label": string;
+        "slide_button_label": string;
+        "slide_status_label": string;
+    }
     interface DdaHorizontalStepperAttributes {
         "steps": string;
         "current_step": number;
@@ -2227,6 +2392,7 @@ declare namespace LocalJSX {
         "toggle_button_name": string;
         "country_select_button_name": string;
         "phone_input_name": string;
+        "autocomplete": string;
     }
     interface DdaProgressbarAttributes {
         "progress": number;
@@ -2235,6 +2401,7 @@ declare namespace LocalJSX {
         "show_percentage_text": boolean;
         "custom_class": string;
         "component_mode": string;
+        "aria_label": string;
     }
     interface DdaRadiobuttonAttributes {
         "title_text": string;
@@ -2278,6 +2445,7 @@ declare namespace LocalJSX {
         "custom_class": string;
         "component_mode": string;
         "button_id": string;
+        "input_id": string;
         "aria_label": string;
         "button_aria_label": string;
         "search_input_name": string;
@@ -2290,6 +2458,8 @@ declare namespace LocalJSX {
         "custom_class": string;
         "component_mode": string;
         "button_name": string;
+        "aria_label": string;
+        "selected_index": number;
     }
     interface DdaSelectAttributes {
         "label": string;
@@ -2427,7 +2597,7 @@ declare namespace LocalJSX {
         "dda-dropdown": Omit<DdaDropdown, keyof DdaDropdownAttributes> & { [K in keyof DdaDropdown & keyof DdaDropdownAttributes]?: DdaDropdown[K] } & { [K in keyof DdaDropdown & keyof DdaDropdownAttributes as `attr:${K}`]?: DdaDropdownAttributes[K] } & { [K in keyof DdaDropdown & keyof DdaDropdownAttributes as `prop:${K}`]?: DdaDropdown[K] };
         "dda-footer": Omit<DdaFooter, keyof DdaFooterAttributes> & { [K in keyof DdaFooter & keyof DdaFooterAttributes]?: DdaFooter[K] } & { [K in keyof DdaFooter & keyof DdaFooterAttributes as `attr:${K}`]?: DdaFooterAttributes[K] } & { [K in keyof DdaFooter & keyof DdaFooterAttributes as `prop:${K}`]?: DdaFooter[K] };
         "dda-header": Omit<DdaHeader, keyof DdaHeaderAttributes> & { [K in keyof DdaHeader & keyof DdaHeaderAttributes]?: DdaHeader[K] } & { [K in keyof DdaHeader & keyof DdaHeaderAttributes as `attr:${K}`]?: DdaHeaderAttributes[K] } & { [K in keyof DdaHeader & keyof DdaHeaderAttributes as `prop:${K}`]?: DdaHeader[K] };
-        "dda-home-banner": DdaHomeBanner;
+        "dda-home-banner": Omit<DdaHomeBanner, keyof DdaHomeBannerAttributes> & { [K in keyof DdaHomeBanner & keyof DdaHomeBannerAttributes]?: DdaHomeBanner[K] } & { [K in keyof DdaHomeBanner & keyof DdaHomeBannerAttributes as `attr:${K}`]?: DdaHomeBannerAttributes[K] } & { [K in keyof DdaHomeBanner & keyof DdaHomeBannerAttributes as `prop:${K}`]?: DdaHomeBanner[K] };
         "dda-horizontal-stepper": Omit<DdaHorizontalStepper, keyof DdaHorizontalStepperAttributes> & { [K in keyof DdaHorizontalStepper & keyof DdaHorizontalStepperAttributes]?: DdaHorizontalStepper[K] } & { [K in keyof DdaHorizontalStepper & keyof DdaHorizontalStepperAttributes as `attr:${K}`]?: DdaHorizontalStepperAttributes[K] } & { [K in keyof DdaHorizontalStepper & keyof DdaHorizontalStepperAttributes as `prop:${K}`]?: DdaHorizontalStepper[K] };
         "dda-input": Omit<DdaInput, keyof DdaInputAttributes> & { [K in keyof DdaInput & keyof DdaInputAttributes]?: DdaInput[K] } & { [K in keyof DdaInput & keyof DdaInputAttributes as `attr:${K}`]?: DdaInputAttributes[K] } & { [K in keyof DdaInput & keyof DdaInputAttributes as `prop:${K}`]?: DdaInput[K] };
         "dda-link-button": Omit<DdaLinkButton, keyof DdaLinkButtonAttributes> & { [K in keyof DdaLinkButton & keyof DdaLinkButtonAttributes]?: DdaLinkButton[K] } & { [K in keyof DdaLinkButton & keyof DdaLinkButtonAttributes as `attr:${K}`]?: DdaLinkButtonAttributes[K] } & { [K in keyof DdaLinkButton & keyof DdaLinkButtonAttributes as `prop:${K}`]?: DdaLinkButton[K] };

package/dist/types/utils/contrast.d.ts

@@ -0,0 +1,19 @@
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Parses a CSS color string as returned by `getComputedStyle()`
+ * (`rgb(r, g, b)` or `rgba(r, g, b, a)`) into its channel values.
+ */
+export declare function parseRgb(color: string): Rgb;
+/** WCAG relative luminance, 0 (black) to 1 (white). */
+export declare function relativeLuminance({ r, g, b }: Rgb): number;
+/**
+ * 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 declare function contrastRatio(a: string | Rgb, b: string | Rgb): number;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubai-design-system/components-js",
-  "version": "3.12.16",
+  "version": "5.0.0",
   "private": false,
   "description": "JavaScript package for the Digital Dubai Design System, offering reusable, customizable components for seamless integration into web applications",
   "main": "dist/index.cjs.js",
@@ -44,7 +44,15 @@
     "generate": "stencil generate",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "standard-version"
+    "release": "standard-version",
+    "lint": "eslint src",
+    "lint:report": "eslint src -f json -o ../../docs/a11y/eslint-report.json",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "check:api": "node scripts/check-api-consistency.mjs",
+    "check:api:test": "node --test scripts/check-api-consistency.test.mjs",
+    "test:a11y": "test-storybook --url http://127.0.0.1:6006",
+    "test:a11y:ci": "concurrently -k -s first -n SB,TEST \"http-server storybook-static --port 6006 --silent\" \"wait-on tcp:127.0.0.1:6006 && npm run test:a11y\""
   },
   "dependencies": {
     "chromatic": "^11.11.0",
@@ -54,8 +62,9 @@
     "react-markdown": "^9.0.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.5",
     "@stencil/angular-output-target": "^0.10.2",
-    "@stencil/core": "^4.7.0",
+    "@stencil/core": "4.43.5",
     "@stencil/react-output-target": "^0.8.2",
     "@stencil/vue-output-target": "^0.8.8",
     "@storybook/addon-a11y": "^8.2.7",
@@ -66,23 +75,31 @@
     "@storybook/addons": "^7.6.17",
     "@storybook/blocks": "^8.1.11",
     "@storybook/test": "^8.2.7",
+    "@storybook/test-runner": "^0.19.1",
     "@storybook/web-components": "^8.1.11",
     "@storybook/web-components-webpack5": "^8.1.11",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
     "@whitespace/storybook-addon-html": "^6.1.1",
+    "axe-playwright": "^2.2.2",
+    "concurrently": "^8.2.2",
+    "eslint": "^9.39.5",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "http-server": "^14.1.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "lit": "^3.1.4",
-    "prettier": "^3.3.3",
+    "prettier": "^3.9.6",
     "puppeteer": "^21.9.0",
     "react-syntax-highlighter": "^15.5.0",
     "standard-version": "^9.5.0",
-    "storybook": "^8.1.11"
+    "storybook": "^8.1.11",
+    "typescript-eslint": "^8.67.0",
+    "wait-on": "^7.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "license": "UNLICENSED",
-  "gitHead": "9342a9c577cf09a8ed3cf779d528feb16b9e1304"
+  "gitHead": "c37cc307e4f1c8f618fd09aed47c782f644c0908"
 }

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;