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

package/dist/types/components.d.ts

@@ -6,7 +6,15 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BreadcrumbItem } from "./components/dda-breadcrumb/dda-breadcrumb";
+import { QuickLinkItem } from "./components/dda-header/dda-header";
+import { BannerCardItem } from "./components/dda-home-carousel/dda-home-carousel";
+import { SelectOption } from "./components/dda-select/dda-select";
+import { MiddleLinkItem, RightLinkItem } from "./components/dda-sticky-footer/dda-sticky-footer";
 export { BreadcrumbItem } from "./components/dda-breadcrumb/dda-breadcrumb";
+export { QuickLinkItem } from "./components/dda-header/dda-header";
+export { BannerCardItem } from "./components/dda-home-carousel/dda-home-carousel";
+export { SelectOption } from "./components/dda-select/dda-select";
+export { MiddleLinkItem, RightLinkItem } from "./components/dda-sticky-footer/dda-sticky-footer";
 export namespace Components {
     interface DdaAccordion {
         /**
@@ -264,6 +272,53 @@ export namespace Components {
          */
         "slides": string;
     }
+    interface DdaBannerCard {
+        /**
+          * Text under the title. An empty value shows nothing.
+         */
+        "banner_card_description": string;
+        /**
+          * Link URL. With a URL the card is a link; without one it is a button.
+         */
+        "banner_card_href": string;
+        /**
+          * `id` of the link or button.
+         */
+        "banner_card_id": string;
+        /**
+          * `name` of the button (cards without a URL).
+         */
+        "banner_card_name": string;
+        /**
+          * Title of the card; it is the accessible name.
+         */
+        "banner_card_title": string;
+        /**
+          * 3.x name of `banner_card_href`. `banner_card_href` wins when both are set.
+         */
+        "banner_card_url": string;
+        /**
+          * `value` of the button (cards without a URL).
+         */
+        "banner_card_value": string;
+        /**
+          * Theme override class, e.g. `light-mode`.
+         */
+        "component_mode": string;
+        /**
+          * Extra CSS classes.
+          * @default ''
+         */
+        "custom_class": string;
+        /**
+          * Kept for 3.x markup. The icon is decorative, so this text is not read.
+         */
+        "image_alt": string;
+        /**
+          * Icon image URL. The icon is decorative: the title names the card.
+         */
+        "image_src": string;
+    }
     interface DdaBreadcrumb {
         /**
           * The items, as an array or a JSON string of `{ text, icon?, url? }` objects. The last item is the current page. The `data-breadcrumbs` attribute is still read when this is not set.
@@ -676,10 +731,30 @@ export namespace Components {
         "socialIcons": string;
     }
     interface DdaHeader {
+        /**
+          * `class` of the accessibility button icon. Default: `material-icons  material-symbols-outlined`.
+         */
+        "accessibility_button_icon_family": string;
+        /**
+          * Material icon name of the accessibility buttons. Default: `accessibility`.
+         */
+        "accessibility_button_icon_name": string;
+        /**
+          * `id` of the desktop accessibility button. The side-menu button gets this id plus `-sidemenu`.
+         */
+        "accessibility_button_id": string;
         /**
           * `name` attribute of the accessibility button in the side menu.
          */
         "accessibility_button_name": string;
+        /**
+          * Accessible name (visually hidden text) of both accessibility buttons. Default: `Accessibility`.
+         */
+        "accessibility_button_text": string;
+        /**
+          * Tooltip of the desktop accessibility button. Default: `Accessibility`.
+         */
+        "accessibility_tooltip": string;
         /**
           * `name` attribute of the buttons that close the accessibility panel.
          */
@@ -692,6 +767,34 @@ export namespace Components {
           * Not used: the current markup does not render an element with this name.
          */
         "close_sidebar_button_name": string;
+        /**
+          * Label of the colour-blind contrast option. Default: `Colours Blind`.
+         */
+        "contrast_color_blind_text": string;
+        /**
+          * Text above the contrast options. Default: `Select your preferred contrast setting`.
+         */
+        "contrast_description": string;
+        /**
+          * Label of the green-weakness contrast option. Default: `Green Weakness`.
+         */
+        "contrast_green_weakness_text": string;
+        /**
+          * 3.x spelling of `contrast_normal_text`. `contrast_normal_text` wins when both are set.
+         */
+        "contrast_noraml_text": string;
+        /**
+          * Label of the normal contrast option. Default: `Normal`.
+         */
+        "contrast_normal_text": string;
+        /**
+          * Label of the red-weakness contrast option. Default: `Red Weakness`.
+         */
+        "contrast_red_weakness_text": string;
+        /**
+          * Heading of the contrast column in the accessibility panel. Default: `Contrast`. An empty value removes the heading.
+         */
+        "contrast_title": string;
         /**
           * Alternative text for the first logo.
          */
@@ -713,6 +816,11 @@ export namespace Components {
           * `name` attribute of the hamburger menu button.
          */
         "hamburger_menu_button_name": string;
+        /**
+          * Hides the "other" side-menu links and their title. Default: `false`.
+          * @default false
+         */
+        "hideOtherMenu": boolean;
         /**
           * Hides the Login link in the desktop toolbar and the side menu.
           * @default false
@@ -728,9 +836,13 @@ export namespace Components {
          */
         "language_lang": string;
         /**
-          * Label of the language buttons in the desktop toolbar and the side menu. Default: `العربية`.
+          * Label of the language buttons in the desktop toolbar and the side menu. Default: `العربية`. An empty value removes the language buttons.
          */
         "language_text": string;
+        /**
+          * Tooltip of the desktop language button. Default: `Language`.
+         */
+        "language_tooltip": string;
         /**
           * Material Symbols icon name of the Login link in the desktop toolbar and the side menu. Default: `sentiment_satisfied`.
          */
@@ -740,22 +852,54 @@ export namespace Components {
          */
         "loginLink": string;
         /**
-          * Label of the Login link in the desktop toolbar and the side menu. Default: `Login`.
+          * Label of the Login link in the desktop toolbar and the side menu. Default: `Login`. An empty value removes the Login link.
          */
         "loginText": string;
+        /**
+          * Tooltip of the desktop Login link. Default: the Login label.
+         */
+        "login_tooltip": string;
         /**
           * Accessible name of the hamburger menu button (visually hidden text). Default: `Menu`.
           * @default 'Menu'
          */
         "menu_button_label": string;
         /**
-          * Main navigation links. JSON array of `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu.
+          * `id` of the mobile search control.
          */
-        "quickLinks": string;
+        "mobileMenuSearchId": string;
+        /**
+          * 3.x mobile search: when set, the mobile search is a plain link to this URL (with `mobileMenuSearchId` as its id) and the header's own search panel is not rendered.
+         */
+        "mobileMenuSearchUrl": string;
+        /**
+          * Second list in the side menu. JSON array (or array property) of `{ label, href, active }`; `active: "true"` marks the current page.
+         */
+        "otherMenuItems": string | Array<{ label: string; href: string; active?: string }>;
+        /**
+          * Main navigation links: a JSON array (HTML attribute) or an array (JavaScript property). 5.x items are `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu. 3.x items (`{ type, headerMenuLabel, url, children, ... }`) also work.
+         */
+        "quickLinks": string | QuickLinkItem[];
         /**
           * URL of the ReadSpeaker "listen" link in the accessibility panel.
          */
         "readSpeakerLink": string;
+        /**
+          * 3.x name of `readSpeakerLink`, as an attribute: `read_speaker_link`. `readSpeakerLink` wins when both are set.
+         */
+        "read_speaker_link": string;
+        /**
+          * Text in the screen reader column. Default: `Listen to the content of the page by clicking play or listen`.
+         */
+        "screen_reader_description": string;
+        /**
+          * Accessible name of the ReadSpeaker play link. Default: `Listen to this page using ReadSpeaker`.
+         */
+        "screen_reader_link_label": string;
+        /**
+          * Heading of the screen reader column. Default: `Screen Reader`.
+         */
+        "screen_reader_title": string;
         /**
           * Placeholder and accessible label of the search input. Default: `Search`.
          */
@@ -772,6 +916,14 @@ export namespace Components {
           * `name` of the search input, which is the query parameter sent to `search_action`. Default: `q`.
          */
         "search_input_name": string;
+        /**
+          * Placeholder of the search inputs. Default: the `searchText` value, else `Search`.
+         */
+        "search_input_placeholder": string;
+        /**
+          * Tooltip of the desktop search. Default: `Search`.
+         */
+        "search_tooltip": string;
         /**
           * Alternative text for the second logo.
          */
@@ -789,14 +941,44 @@ export namespace Components {
           * Image URL of the white second logo, shown in dark theme and on a transparent header. Falls back to `secondLogoSrc` on desktop.
          */
         "secondLogoWhiteSrc": string;
+        /**
+          * The contrast option shown as selected. The header updates it when the user picks an option. Default: `normal`.
+          * @default 'normal'
+         */
+        "selected_contrast": 'normal' | 'colorblind' | 'redweakness' | 'greenweakness';
+        /**
+          * The text size button shown as selected (`default-primary`). The header updates it on each click. Default: none.
+         */
+        "selected_text_size": 'small' | 'normal' | 'large';
+        /**
+          * Title above the side-menu links. Default: `Quick Links`. An empty value removes it.
+         */
+        "sideMainMenuTitle": string;
         /**
           * Side menu items. JSON array of `{ label, href, subMenu }`; each `subMenu` item is `{ headerLabel, label, href, subMenu }` and can nest.
          */
         "sideMenuItems": string;
+        /**
+          * Title above the "other" side-menu links. It shows only when there are other links.
+         */
+        "sideOtherMenuTitle": string;
+        /**
+          * Text in the text size column. Default: `Use the buttons below to increase or decrease the text size`.
+         */
+        "text_size_description": string;
+        /**
+          * Heading of the text size column. Default: `Text Size`.
+         */
+        "text_size_title": string;
         /**
           * `name` attribute of the accessibility button in the desktop toolbar.
          */
         "toggle_accessibility_button_name": string;
+        /**
+          * When `false`, the header renders no accessibility panel; the buttons only emit `accessibilitymenufunctionality`, so the page can open its own panel. Default: `true`.
+          * @default true
+         */
+        "usePredesignedAccessibilityMenu": boolean;
     }
     interface DdaHomeBanner {
         /**
@@ -834,6 +1016,16 @@ export namespace Components {
           * @default 'Previous slide'
          */
         "previous_button_label": string;
+        /**
+          * Shows the decorative scroll icon at the end of the slide controls (hidden at 992px and below unless `show_scroll_icon_mobile` is set). Default: `true`.
+          * @default true
+         */
+        "show_scroll_icon": boolean;
+        /**
+          * Also shows the scroll icon at 992px and below. Default: `false`.
+          * @default false
+         */
+        "show_scroll_icon_mobile": boolean;
         /**
           * Prefix for each slide dot's accessible name, e.g. "Go to slide 2".
           * @default 'Go to slide'
@@ -845,6 +1037,31 @@ export namespace Components {
          */
         "slide_status_label": string;
     }
+    interface DdaHomeCarousel {
+        /**
+          * Accessible name of the card list. Default: `Quick links`.
+          * @default 'Quick links'
+         */
+        "aria_label": string;
+        /**
+          * The cards. JSON array, or array property, of `{ banner_card_href, banner_card_title, banner_card_description, image_src, image_alt, banner_card_id, banner_card_value, banner_card_name, custom_class, component_mode }`.
+         */
+        "bannercardlist": string | BannerCardItem[];
+        /**
+          * Theme override class, e.g. `light-mode`.
+         */
+        "component_mode": string;
+        /**
+          * Extra CSS classes on the list.
+          * @default ''
+         */
+        "custom_class": string;
+        /**
+          * Cards shown at once on wide screens. A card is never narrower than 220px. Default: `5`.
+          * @default 5
+         */
+        "items_in_view": number;
+    }
     interface DdaHorizontalStepper {
         /**
           * Theme override class on the stepper container, e.g. `light-mode`.
@@ -1384,6 +1601,27 @@ export namespace Components {
          */
         "tooltip_position"?: string;
     }
+    interface DdaScrollIcon {
+        /**
+          * Theme override class, e.g. `light-mode`.
+         */
+        "component_mode": string;
+        /**
+          * Extra CSS classes on the icon.
+          * @default ''
+         */
+        "custom_class": string;
+        /**
+          * Colour: `white` or `black`. Default: `white`.
+          * @default 'white'
+         */
+        "scroll_icon_color": 'white' | 'black';
+        /**
+          * Size: `sm` (16.5 × 24px) or `lg` (40 × 60px). Default: `sm`.
+          * @default 'sm'
+         */
+        "scroll_icon_size": 'sm' | 'lg';
+    }
     interface DdaSearchInput {
         /**
           * Accessible name of the search input. Use it when there is no visible label.
@@ -1534,20 +1772,32 @@ export namespace Components {
           * Helper text shown under the field.
          */
         "helper_text": string;
+        /**
+          * `name` sent in `selectBlurred`. Falls back to `button_id`.
+         */
+        "input_name": string;
         /**
           * Label shown above the field. The trigger button is named by the label and its current text.
          */
         "label": string;
+        /**
+          * 3.x name of `aria_label`, used as the trigger's aria-label only when `label` is not set. `aria_label` wins when both are set; when `label` is set, `main_aria_label` is ignored and the trigger keeps its `aria-labelledby`.
+         */
+        "main_aria_label": string;
         /**
           * `name` of each option button in the list.
          */
         "option_select_button_name": string;
         /**
-          * Options as a JSON array string, e.g. `'["Dubai","Abu Dhabi","Sharjah"]'`. Invalid JSON shows "No options available".
+          * Options: a JSON array, or an array property, of strings (`["Dubai","Sharjah"]`) or 3.x `{ id, text }` objects (`[{"id":1,"text":"Dubai"}]`). Other entries are ignored. Invalid JSON shows "No options available".
          */
-        "options": string;
+        "options": string | Array<string | SelectOption>;
         /**
-          * The selected option. Must match an entry in `options`. The trigger shows "Select an option" when it is empty. Updated when the user picks an option. Mutable: the component assigns it.
+          * Text in the trigger when nothing is selected. Default: `Select an option`.
+         */
+        "placeholder": string;
+        /**
+          * The selected option: its id, or its text. For string options the id is the text. Updated to the picked option's id (as a string) when the user picks one. Mutable: the component assigns it.
          */
         "selected": string;
         /**
@@ -1558,6 +1808,10 @@ export namespace Components {
           * `name` of the trigger button.
          */
         "toggle_button_name": string;
+        /**
+          * 3.x name of `error` (the validation state class). `error` wins when both are set.
+         */
+        "validation_type": string;
     }
     interface DdaStickyFooter {
         /**
@@ -1568,10 +1822,18 @@ export namespace Components {
           * Link URL of the accessibility icon, the second icon in the left section.
          */
         "accessibilityIconHref": string;
+        /**
+          * `id` of the accessibility (04) link.
+         */
+        "accessibilityIconId": string;
         /**
           * Image URL of the accessibility icon.
          */
         "accessibilityIconSrc": string;
+        /**
+          * Accessibility (04) image for `color-theme="dark"`.
+         */
+        "accessibilityIconSrcDark": string;
         /**
           * Tooltip text of the accessibility icon.
          */
@@ -1584,10 +1846,18 @@ export namespace Components {
           * Link URL of the AI assistant icon (right section).
          */
         "aiIconHref": string;
+        /**
+          * `id` of the AI assistant link.
+         */
+        "aiIconId": string;
         /**
           * Image URL of the AI assistant icon.
          */
         "aiIconSrc": string;
+        /**
+          * AI assistant image for `color-theme="dark"`.
+         */
+        "aiIconSrcDark": string;
         /**
           * Tooltip text of the AI assistant icon.
          */
@@ -1605,14 +1875,55 @@ export namespace Components {
           * Link URL of the chat icon (right section).
          */
         "chatIconHref": string;
+        /**
+          * `id` of the chat link.
+         */
+        "chatIconId": string;
         /**
           * Image URL of the chat icon.
          */
         "chatIconSrc": string;
+        /**
+          * Chat image for `color-theme="dark"`.
+         */
+        "chatIconSrcDark": string;
         /**
           * Tooltip text of the chat icon.
          */
         "chatIconTooltip": string;
+        /**
+          * `dark` uses the `*-src-dark` images; an image without a dark version keeps its light image. Default: `light`.
+          * @default 'light'
+         */
+        "colorTheme": 'light' | 'dark';
+        /**
+          * Alternative text of both dubai.ae images.
+         */
+        "dubaiaeIconAlt": string;
+        /**
+          * Link URL of the dubai.ae link (right section).
+         */
+        "dubaiaeIconHref": string;
+        /**
+          * `id` of the dubai.ae link.
+         */
+        "dubaiaeIconId": string;
+        /**
+          * dubai.ae small icon, shown at 992px and below.
+         */
+        "dubaiaeIconSmallSrc": string;
+        /**
+          * dubai.ae wordmark image, shown on desktop. The link shows only when this and `dubaiaeIconSmallSrc` are set.
+         */
+        "dubaiaeIconSrc": string;
+        /**
+          * dubai.ae wordmark for `color-theme="dark"`.
+         */
+        "dubaiaeIconSrcDark": string;
+        /**
+          * Tooltip text of the dubai.ae link.
+         */
+        "dubaiaeIconTooltip": string;
         /**
           * Alternative text for the first logo.
          */
@@ -1637,16 +1948,25 @@ export namespace Components {
           * Link URL of the happiness icon (left section).
          */
         "happinessIconHref": string;
+        /**
+          * `id` of the happiness link.
+         */
+        "happinessIconId": string;
         /**
           * Image URL of the happiness icon.
          */
         "happinessIconSrc": string;
+        /**
+          * Happiness image for `color-theme="dark"`.
+         */
+        "happinessIconSrcDark": string;
         /**
           * Tooltip text of the happiness icon.
          */
         "happinessIconTooltip": string;
         /**
-          * Hides the middle logo section. The section shows only when this is explicitly `false`.
+          * Hides the middle logo section. Default: `false` (the logos show when at least one is set).
+          * @default false
          */
         "hideMiddleSection": boolean;
         /**
@@ -1665,6 +1985,23 @@ export namespace Components {
           * Image URL of the location icon. Takes precedence over `locationButtonIcon`.
          */
         "locationLogoSrc": string;
+        /**
+          * Middle logos as a list (3.x). JSON array, or array property, of `{ LogoTooltip, href, src, srcDark, alt }`. When set, it replaces the first, second and third logo props.
+         */
+        "middleLink": string | MiddleLinkItem[];
+        /**
+          * Material icon name of the "more" button. When set, the right links collapse behind this button at 992px and below.
+         */
+        "moreIcon": string;
+        /**
+          * `class` of the "more" button icon. Default: `material-icons`.
+         */
+        "moreIconFamily": string;
+        /**
+          * Accessible name of the "more" button. Default, and fallback for an empty value: `More`.
+          * @default 'More'
+         */
+        "more_button_label": string;
         /**
           * Link URL of the news icon (right section).
          */
@@ -1681,6 +2018,10 @@ export namespace Components {
           * Tooltip text and alternative text of the news icon.
          */
         "newsButtonText": string;
+        /**
+          * Right-side text links as a list (3.x). JSON array, or array property, of `{ RightLinkTooltip, href, title, itemId, IconFamily, IconName, LinkText }`. When set, it replaces the location and news links.
+         */
+        "rightLink": string | RightLinkItem[];
         /**
           * Alternative text for the second logo.
          */
@@ -1705,10 +2046,18 @@ export namespace Components {
           * Link URL of the services icon (left section).
          */
         "servicesIconHref": string;
+        /**
+          * `id` of the services link.
+         */
+        "servicesIconId": string;
         /**
           * Image URL of the services icon.
          */
         "servicesIconSrc": string;
+        /**
+          * Services image for `color-theme="dark"`.
+         */
+        "servicesIconSrcDark": string;
         /**
           * Text shown next to the services icon. Nothing is shown when it is not set.
          */
@@ -1996,6 +2345,10 @@ export interface DdaHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDdaHeaderElement;
 }
+export interface DdaHomeCarouselCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDdaHomeCarouselElement;
+}
 export interface DdaPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDdaPaginationElement;
@@ -2070,6 +2423,12 @@ declare global {
         prototype: HTMLDdaBannerElement;
         new (): HTMLDdaBannerElement;
     };
+    interface HTMLDdaBannerCardElement extends Components.DdaBannerCard, HTMLStencilElement {
+    }
+    var HTMLDdaBannerCardElement: {
+        prototype: HTMLDdaBannerCardElement;
+        new (): HTMLDdaBannerCardElement;
+    };
     interface HTMLDdaBreadcrumbElement extends Components.DdaBreadcrumb, HTMLStencilElement {
     }
     var HTMLDdaBreadcrumbElement: {
@@ -2141,6 +2500,8 @@ declare global {
         new (): HTMLDdaFooterElement;
     };
     interface HTMLDdaHeaderElementEventMap {
+        "accessibilitymenufunctionality": void;
+        "searchfunctionality": string;
         "languageSwitch": void;
         "smTextSize": void;
         "baseTextSize": void;
@@ -2171,6 +2532,23 @@ declare global {
         prototype: HTMLDdaHomeBannerElement;
         new (): HTMLDdaHomeBannerElement;
     };
+    interface HTMLDdaHomeCarouselElementEventMap {
+        "cardClick": BannerCardItem;
+    }
+    interface HTMLDdaHomeCarouselElement extends Components.DdaHomeCarousel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDdaHomeCarouselElementEventMap>(type: K, listener: (this: HTMLDdaHomeCarouselElement, ev: DdaHomeCarouselCustomEvent<HTMLDdaHomeCarouselElementEventMap[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 HTMLDdaHomeCarouselElementEventMap>(type: K, listener: (this: HTMLDdaHomeCarouselElement, ev: DdaHomeCarouselCustomEvent<HTMLDdaHomeCarouselElementEventMap[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 HTMLDdaHomeCarouselElement: {
+        prototype: HTMLDdaHomeCarouselElement;
+        new (): HTMLDdaHomeCarouselElement;
+    };
     interface HTMLDdaHorizontalStepperElement extends Components.DdaHorizontalStepper, HTMLStencilElement {
     }
     var HTMLDdaHorizontalStepperElement: {
@@ -2236,6 +2614,12 @@ declare global {
         prototype: HTMLDdaRangeSliderElement;
         new (): HTMLDdaRangeSliderElement;
     };
+    interface HTMLDdaScrollIconElement extends Components.DdaScrollIcon, HTMLStencilElement {
+    }
+    var HTMLDdaScrollIconElement: {
+        prototype: HTMLDdaScrollIconElement;
+        new (): HTMLDdaScrollIconElement;
+    };
     interface HTMLDdaSearchInputElement extends Components.DdaSearchInput, HTMLStencilElement {
     }
     var HTMLDdaSearchInputElement: {
@@ -2260,7 +2644,9 @@ declare global {
         new (): HTMLDdaSegmentedTabsElement;
     };
     interface HTMLDdaSelectElementEventMap {
-        "selectionChange": { value: string };
+        "selectionChange": { value: string; id: string | number; text: string };
+        "selectChanged": SelectOption;
+        "selectBlurred": { name: string; value: string };
     }
     interface HTMLDdaSelectElement extends Components.DdaSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDdaSelectElementEventMap>(type: K, listener: (this: HTMLDdaSelectElement, ev: DdaSelectCustomEvent<HTMLDdaSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2346,6 +2732,7 @@ declare global {
         "dda-attach-file": HTMLDdaAttachFileElement;
         "dda-avatar": HTMLDdaAvatarElement;
         "dda-banner": HTMLDdaBannerElement;
+        "dda-banner-card": HTMLDdaBannerCardElement;
         "dda-breadcrumb": HTMLDdaBreadcrumbElement;
         "dda-button": HTMLDdaButtonElement;
         "dda-checkbox": HTMLDdaCheckboxElement;
@@ -2356,6 +2743,7 @@ declare global {
         "dda-footer": HTMLDdaFooterElement;
         "dda-header": HTMLDdaHeaderElement;
         "dda-home-banner": HTMLDdaHomeBannerElement;
+        "dda-home-carousel": HTMLDdaHomeCarouselElement;
         "dda-horizontal-stepper": HTMLDdaHorizontalStepperElement;
         "dda-input": HTMLDdaInputElement;
         "dda-link-button": HTMLDdaLinkButtonElement;
@@ -2365,6 +2753,7 @@ declare global {
         "dda-progressbar": HTMLDdaProgressbarElement;
         "dda-radiobutton": HTMLDdaRadiobuttonElement;
         "dda-range-slider": HTMLDdaRangeSliderElement;
+        "dda-scroll-icon": HTMLDdaScrollIconElement;
         "dda-search-input": HTMLDdaSearchInputElement;
         "dda-segmented-tabs": HTMLDdaSegmentedTabsElement;
         "dda-select": HTMLDdaSelectElement;
@@ -2646,6 +3035,53 @@ declare namespace LocalJSX {
          */
         "slides"?: string;
     }
+    interface DdaBannerCard {
+        /**
+          * Text under the title. An empty value shows nothing.
+         */
+        "banner_card_description"?: string;
+        /**
+          * Link URL. With a URL the card is a link; without one it is a button.
+         */
+        "banner_card_href"?: string;
+        /**
+          * `id` of the link or button.
+         */
+        "banner_card_id"?: string;
+        /**
+          * `name` of the button (cards without a URL).
+         */
+        "banner_card_name"?: string;
+        /**
+          * Title of the card; it is the accessible name.
+         */
+        "banner_card_title"?: string;
+        /**
+          * 3.x name of `banner_card_href`. `banner_card_href` wins when both are set.
+         */
+        "banner_card_url"?: string;
+        /**
+          * `value` of the button (cards without a URL).
+         */
+        "banner_card_value"?: string;
+        /**
+          * Theme override class, e.g. `light-mode`.
+         */
+        "component_mode"?: string;
+        /**
+          * Extra CSS classes.
+          * @default ''
+         */
+        "custom_class"?: string;
+        /**
+          * Kept for 3.x markup. The icon is decorative, so this text is not read.
+         */
+        "image_alt"?: string;
+        /**
+          * Icon image URL. The icon is decorative: the title names the card.
+         */
+        "image_src"?: string;
+    }
     interface DdaBreadcrumb {
         /**
           * The items, as an array or a JSON string of `{ text, icon?, url? }` objects. The last item is the current page. The `data-breadcrumbs` attribute is still read when this is not set.
@@ -3066,10 +3502,30 @@ declare namespace LocalJSX {
         "socialIcons"?: string;
     }
     interface DdaHeader {
+        /**
+          * `class` of the accessibility button icon. Default: `material-icons  material-symbols-outlined`.
+         */
+        "accessibility_button_icon_family"?: string;
+        /**
+          * Material icon name of the accessibility buttons. Default: `accessibility`.
+         */
+        "accessibility_button_icon_name"?: string;
+        /**
+          * `id` of the desktop accessibility button. The side-menu button gets this id plus `-sidemenu`.
+         */
+        "accessibility_button_id"?: string;
         /**
           * `name` attribute of the accessibility button in the side menu.
          */
         "accessibility_button_name"?: string;
+        /**
+          * Accessible name (visually hidden text) of both accessibility buttons. Default: `Accessibility`.
+         */
+        "accessibility_button_text"?: string;
+        /**
+          * Tooltip of the desktop accessibility button. Default: `Accessibility`.
+         */
+        "accessibility_tooltip"?: string;
         /**
           * `name` attribute of the buttons that close the accessibility panel.
          */
@@ -3082,6 +3538,34 @@ declare namespace LocalJSX {
           * Not used: the current markup does not render an element with this name.
          */
         "close_sidebar_button_name"?: string;
+        /**
+          * Label of the colour-blind contrast option. Default: `Colours Blind`.
+         */
+        "contrast_color_blind_text"?: string;
+        /**
+          * Text above the contrast options. Default: `Select your preferred contrast setting`.
+         */
+        "contrast_description"?: string;
+        /**
+          * Label of the green-weakness contrast option. Default: `Green Weakness`.
+         */
+        "contrast_green_weakness_text"?: string;
+        /**
+          * 3.x spelling of `contrast_normal_text`. `contrast_normal_text` wins when both are set.
+         */
+        "contrast_noraml_text"?: string;
+        /**
+          * Label of the normal contrast option. Default: `Normal`.
+         */
+        "contrast_normal_text"?: string;
+        /**
+          * Label of the red-weakness contrast option. Default: `Red Weakness`.
+         */
+        "contrast_red_weakness_text"?: string;
+        /**
+          * Heading of the contrast column in the accessibility panel. Default: `Contrast`. An empty value removes the heading.
+         */
+        "contrast_title"?: string;
         /**
           * Alternative text for the first logo.
          */
@@ -3103,6 +3587,11 @@ declare namespace LocalJSX {
           * `name` attribute of the hamburger menu button.
          */
         "hamburger_menu_button_name"?: string;
+        /**
+          * Hides the "other" side-menu links and their title. Default: `false`.
+          * @default false
+         */
+        "hideOtherMenu"?: boolean;
         /**
           * Hides the Login link in the desktop toolbar and the side menu.
           * @default false
@@ -3118,9 +3607,13 @@ declare namespace LocalJSX {
          */
         "language_lang"?: string;
         /**
-          * Label of the language buttons in the desktop toolbar and the side menu. Default: `العربية`.
+          * Label of the language buttons in the desktop toolbar and the side menu. Default: `العربية`. An empty value removes the language buttons.
          */
         "language_text"?: string;
+        /**
+          * Tooltip of the desktop language button. Default: `Language`.
+         */
+        "language_tooltip"?: string;
         /**
           * Material Symbols icon name of the Login link in the desktop toolbar and the side menu. Default: `sentiment_satisfied`.
          */
@@ -3130,14 +3623,30 @@ declare namespace LocalJSX {
          */
         "loginLink"?: string;
         /**
-          * Label of the Login link in the desktop toolbar and the side menu. Default: `Login`.
+          * Label of the Login link in the desktop toolbar and the side menu. Default: `Login`. An empty value removes the Login link.
          */
         "loginText"?: string;
+        /**
+          * Tooltip of the desktop Login link. Default: the Login label.
+         */
+        "login_tooltip"?: string;
         /**
           * Accessible name of the hamburger menu button (visually hidden text). Default: `Menu`.
           * @default 'Menu'
          */
         "menu_button_label"?: string;
+        /**
+          * `id` of the mobile search control.
+         */
+        "mobileMenuSearchId"?: string;
+        /**
+          * 3.x mobile search: when set, the mobile search is a plain link to this URL (with `mobileMenuSearchId` as its id) and the header's own search panel is not rendered.
+         */
+        "mobileMenuSearchUrl"?: string;
+        /**
+          * Emitted on every click of an accessibility button (3.x name).
+         */
+        "onAccessibilitymenufunctionality"?: (event: DdaHeaderCustomEvent<void>) => void;
         /**
           * Emitted when the user clicks the `A` (default text size) button in the accessibility panel.
          */
@@ -3170,18 +3679,42 @@ declare namespace LocalJSX {
           * Emitted when a non-empty search is submitted. Call `preventDefault()` to stop the browser navigating to `search_action`, for example to route inside a single-page app.
          */
         "onSearchSubmit"?: (event: DdaHeaderCustomEvent<{ query: string }>) => void;
+        /**
+          * Emitted with the query when a non-empty search is submitted (3.x name). Pages that open a results page from this event keep working. `searchSubmit` is the 5.x event, and it can cancel the navigation.
+         */
+        "onSearchfunctionality"?: (event: DdaHeaderCustomEvent<string>) => void;
         /**
           * Emitted when the user clicks the `A-` (smaller text) button in the accessibility panel.
          */
         "onSmTextSize"?: (event: DdaHeaderCustomEvent<void>) => void;
         /**
-          * Main navigation links. JSON array of `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu.
+          * Second list in the side menu. JSON array (or array property) of `{ label, href, active }`; `active: "true"` marks the current page.
          */
-        "quickLinks"?: string;
+        "otherMenuItems"?: string | Array<{ label: string; href: string; active?: string }>;
+        /**
+          * Main navigation links: a JSON array (HTML attribute) or an array (JavaScript property). 5.x items are `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu. 3.x items (`{ type, headerMenuLabel, url, children, ... }`) also work.
+         */
+        "quickLinks"?: string | QuickLinkItem[];
         /**
           * URL of the ReadSpeaker "listen" link in the accessibility panel.
          */
         "readSpeakerLink"?: string;
+        /**
+          * 3.x name of `readSpeakerLink`, as an attribute: `read_speaker_link`. `readSpeakerLink` wins when both are set.
+         */
+        "read_speaker_link"?: string;
+        /**
+          * Text in the screen reader column. Default: `Listen to the content of the page by clicking play or listen`.
+         */
+        "screen_reader_description"?: string;
+        /**
+          * Accessible name of the ReadSpeaker play link. Default: `Listen to this page using ReadSpeaker`.
+         */
+        "screen_reader_link_label"?: string;
+        /**
+          * Heading of the screen reader column. Default: `Screen Reader`.
+         */
+        "screen_reader_title"?: string;
         /**
           * Placeholder and accessible label of the search input. Default: `Search`.
          */
@@ -3198,6 +3731,14 @@ declare namespace LocalJSX {
           * `name` of the search input, which is the query parameter sent to `search_action`. Default: `q`.
          */
         "search_input_name"?: string;
+        /**
+          * Placeholder of the search inputs. Default: the `searchText` value, else `Search`.
+         */
+        "search_input_placeholder"?: string;
+        /**
+          * Tooltip of the desktop search. Default: `Search`.
+         */
+        "search_tooltip"?: string;
         /**
           * Alternative text for the second logo.
          */
@@ -3215,14 +3756,44 @@ declare namespace LocalJSX {
           * Image URL of the white second logo, shown in dark theme and on a transparent header. Falls back to `secondLogoSrc` on desktop.
          */
         "secondLogoWhiteSrc"?: string;
+        /**
+          * The contrast option shown as selected. The header updates it when the user picks an option. Default: `normal`.
+          * @default 'normal'
+         */
+        "selected_contrast"?: 'normal' | 'colorblind' | 'redweakness' | 'greenweakness';
+        /**
+          * The text size button shown as selected (`default-primary`). The header updates it on each click. Default: none.
+         */
+        "selected_text_size"?: 'small' | 'normal' | 'large';
+        /**
+          * Title above the side-menu links. Default: `Quick Links`. An empty value removes it.
+         */
+        "sideMainMenuTitle"?: string;
         /**
           * Side menu items. JSON array of `{ label, href, subMenu }`; each `subMenu` item is `{ headerLabel, label, href, subMenu }` and can nest.
          */
         "sideMenuItems"?: string;
+        /**
+          * Title above the "other" side-menu links. It shows only when there are other links.
+         */
+        "sideOtherMenuTitle"?: string;
+        /**
+          * Text in the text size column. Default: `Use the buttons below to increase or decrease the text size`.
+         */
+        "text_size_description"?: string;
+        /**
+          * Heading of the text size column. Default: `Text Size`.
+         */
+        "text_size_title"?: string;
         /**
           * `name` attribute of the accessibility button in the desktop toolbar.
          */
         "toggle_accessibility_button_name"?: string;
+        /**
+          * When `false`, the header renders no accessibility panel; the buttons only emit `accessibilitymenufunctionality`, so the page can open its own panel. Default: `true`.
+          * @default true
+         */
+        "usePredesignedAccessibilityMenu"?: boolean;
     }
     interface DdaHomeBanner {
         /**
@@ -3260,6 +3831,16 @@ declare namespace LocalJSX {
           * @default 'Previous slide'
          */
         "previous_button_label"?: string;
+        /**
+          * Shows the decorative scroll icon at the end of the slide controls (hidden at 992px and below unless `show_scroll_icon_mobile` is set). Default: `true`.
+          * @default true
+         */
+        "show_scroll_icon"?: boolean;
+        /**
+          * Also shows the scroll icon at 992px and below. Default: `false`.
+          * @default false
+         */
+        "show_scroll_icon_mobile"?: boolean;
         /**
           * Prefix for each slide dot's accessible name, e.g. "Go to slide 2".
           * @default 'Go to slide'
@@ -3271,6 +3852,35 @@ declare namespace LocalJSX {
          */
         "slide_status_label"?: string;
     }
+    interface DdaHomeCarousel {
+        /**
+          * Accessible name of the card list. Default: `Quick links`.
+          * @default 'Quick links'
+         */
+        "aria_label"?: string;
+        /**
+          * The cards. JSON array, or array property, of `{ banner_card_href, banner_card_title, banner_card_description, image_src, image_alt, banner_card_id, banner_card_value, banner_card_name, custom_class, component_mode }`.
+         */
+        "bannercardlist"?: string | BannerCardItem[];
+        /**
+          * Theme override class, e.g. `light-mode`.
+         */
+        "component_mode"?: string;
+        /**
+          * Extra CSS classes on the list.
+          * @default ''
+         */
+        "custom_class"?: string;
+        /**
+          * Cards shown at once on wide screens. A card is never narrower than 220px. Default: `5`.
+          * @default 5
+         */
+        "items_in_view"?: number;
+        /**
+          * Emitted when a card is clicked, with its item. A link card still navigates.
+         */
+        "onCardClick"?: (event: DdaHomeCarouselCustomEvent<BannerCardItem>) => void;
+    }
     interface DdaHorizontalStepper {
         /**
           * Theme override class on the stepper container, e.g. `light-mode`.
@@ -3814,6 +4424,27 @@ declare namespace LocalJSX {
          */
         "tooltip_position"?: string;
     }
+    interface DdaScrollIcon {
+        /**
+          * Theme override class, e.g. `light-mode`.
+         */
+        "component_mode"?: string;
+        /**
+          * Extra CSS classes on the icon.
+          * @default ''
+         */
+        "custom_class"?: string;
+        /**
+          * Colour: `white` or `black`. Default: `white`.
+          * @default 'white'
+         */
+        "scroll_icon_color"?: 'white' | 'black';
+        /**
+          * Size: `sm` (16.5 × 24px) or `lg` (40 × 60px). Default: `sm`.
+          * @default 'sm'
+         */
+        "scroll_icon_size"?: 'sm' | 'lg';
+    }
     interface DdaSearchInput {
         /**
           * Accessible name of the search input. Use it when there is no visible label.
@@ -3968,24 +4599,44 @@ declare namespace LocalJSX {
           * Helper text shown under the field.
          */
         "helper_text"?: string;
+        /**
+          * `name` sent in `selectBlurred`. Falls back to `button_id`.
+         */
+        "input_name"?: string;
         /**
           * Label shown above the field. The trigger button is named by the label and its current text.
          */
         "label"?: string;
         /**
-          * Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new option.
+          * 3.x name of `aria_label`, used as the trigger's aria-label only when `label` is not set. `aria_label` wins when both are set; when `label` is set, `main_aria_label` is ignored and the trigger keeps its `aria-labelledby`.
+         */
+        "main_aria_label"?: string;
+        /**
+          * 3.x event: emitted when the trigger loses focus, with `{ name, value }` — `input_name` (or `button_id`) and the selected text.
+         */
+        "onSelectBlurred"?: (event: DdaSelectCustomEvent<{ name: string; value: string }>) => void;
+        /**
+          * 3.x event: emitted each time the user picks one, even if it is already selected. For a string option this is `{ id, text }`; for an object option this is the original option object, extra fields included, as 3.x did.
+         */
+        "onSelectChanged"?: (event: DdaSelectCustomEvent<SelectOption>) => void;
+        /**
+          * Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new `selected` value (the option id as a string); `detail.id` and `detail.text` are the option.
          */
-        "onSelectionChange"?: (event: DdaSelectCustomEvent<{ value: string }>) => void;
+        "onSelectionChange"?: (event: DdaSelectCustomEvent<{ value: string; id: string | number; text: string }>) => void;
         /**
           * `name` of each option button in the list.
          */
         "option_select_button_name"?: string;
         /**
-          * Options as a JSON array string, e.g. `'["Dubai","Abu Dhabi","Sharjah"]'`. Invalid JSON shows "No options available".
+          * Options: a JSON array, or an array property, of strings (`["Dubai","Sharjah"]`) or 3.x `{ id, text }` objects (`[{"id":1,"text":"Dubai"}]`). Other entries are ignored. Invalid JSON shows "No options available".
          */
-        "options"?: string;
+        "options"?: string | Array<string | SelectOption>;
+        /**
+          * Text in the trigger when nothing is selected. Default: `Select an option`.
+         */
+        "placeholder"?: string;
         /**
-          * The selected option. Must match an entry in `options`. The trigger shows "Select an option" when it is empty. Updated when the user picks an option. Mutable: the component assigns it.
+          * The selected option: its id, or its text. For string options the id is the text. Updated to the picked option's id (as a string) when the user picks one. Mutable: the component assigns it.
          */
         "selected"?: string;
         /**
@@ -3996,6 +4647,10 @@ declare namespace LocalJSX {
           * `name` of the trigger button.
          */
         "toggle_button_name"?: string;
+        /**
+          * 3.x name of `error` (the validation state class). `error` wins when both are set.
+         */
+        "validation_type"?: string;
     }
     interface DdaStickyFooter {
         /**
@@ -4006,10 +4661,18 @@ declare namespace LocalJSX {
           * Link URL of the accessibility icon, the second icon in the left section.
          */
         "accessibilityIconHref"?: string;
+        /**
+          * `id` of the accessibility (04) link.
+         */
+        "accessibilityIconId"?: string;
         /**
           * Image URL of the accessibility icon.
          */
         "accessibilityIconSrc"?: string;
+        /**
+          * Accessibility (04) image for `color-theme="dark"`.
+         */
+        "accessibilityIconSrcDark"?: string;
         /**
           * Tooltip text of the accessibility icon.
          */
@@ -4022,10 +4685,18 @@ declare namespace LocalJSX {
           * Link URL of the AI assistant icon (right section).
          */
         "aiIconHref"?: string;
+        /**
+          * `id` of the AI assistant link.
+         */
+        "aiIconId"?: string;
         /**
           * Image URL of the AI assistant icon.
          */
         "aiIconSrc"?: string;
+        /**
+          * AI assistant image for `color-theme="dark"`.
+         */
+        "aiIconSrcDark"?: string;
         /**
           * Tooltip text of the AI assistant icon.
          */
@@ -4043,14 +4714,55 @@ declare namespace LocalJSX {
           * Link URL of the chat icon (right section).
          */
         "chatIconHref"?: string;
+        /**
+          * `id` of the chat link.
+         */
+        "chatIconId"?: string;
         /**
           * Image URL of the chat icon.
          */
         "chatIconSrc"?: string;
+        /**
+          * Chat image for `color-theme="dark"`.
+         */
+        "chatIconSrcDark"?: string;
         /**
           * Tooltip text of the chat icon.
          */
         "chatIconTooltip"?: string;
+        /**
+          * `dark` uses the `*-src-dark` images; an image without a dark version keeps its light image. Default: `light`.
+          * @default 'light'
+         */
+        "colorTheme"?: 'light' | 'dark';
+        /**
+          * Alternative text of both dubai.ae images.
+         */
+        "dubaiaeIconAlt"?: string;
+        /**
+          * Link URL of the dubai.ae link (right section).
+         */
+        "dubaiaeIconHref"?: string;
+        /**
+          * `id` of the dubai.ae link.
+         */
+        "dubaiaeIconId"?: string;
+        /**
+          * dubai.ae small icon, shown at 992px and below.
+         */
+        "dubaiaeIconSmallSrc"?: string;
+        /**
+          * dubai.ae wordmark image, shown on desktop. The link shows only when this and `dubaiaeIconSmallSrc` are set.
+         */
+        "dubaiaeIconSrc"?: string;
+        /**
+          * dubai.ae wordmark for `color-theme="dark"`.
+         */
+        "dubaiaeIconSrcDark"?: string;
+        /**
+          * Tooltip text of the dubai.ae link.
+         */
+        "dubaiaeIconTooltip"?: string;
         /**
           * Alternative text for the first logo.
          */
@@ -4075,16 +4787,25 @@ declare namespace LocalJSX {
           * Link URL of the happiness icon (left section).
          */
         "happinessIconHref"?: string;
+        /**
+          * `id` of the happiness link.
+         */
+        "happinessIconId"?: string;
         /**
           * Image URL of the happiness icon.
          */
         "happinessIconSrc"?: string;
+        /**
+          * Happiness image for `color-theme="dark"`.
+         */
+        "happinessIconSrcDark"?: string;
         /**
           * Tooltip text of the happiness icon.
          */
         "happinessIconTooltip"?: string;
         /**
-          * Hides the middle logo section. The section shows only when this is explicitly `false`.
+          * Hides the middle logo section. Default: `false` (the logos show when at least one is set).
+          * @default false
          */
         "hideMiddleSection"?: boolean;
         /**
@@ -4103,6 +4824,23 @@ declare namespace LocalJSX {
           * Image URL of the location icon. Takes precedence over `locationButtonIcon`.
          */
         "locationLogoSrc"?: string;
+        /**
+          * Middle logos as a list (3.x). JSON array, or array property, of `{ LogoTooltip, href, src, srcDark, alt }`. When set, it replaces the first, second and third logo props.
+         */
+        "middleLink"?: string | MiddleLinkItem[];
+        /**
+          * Material icon name of the "more" button. When set, the right links collapse behind this button at 992px and below.
+         */
+        "moreIcon"?: string;
+        /**
+          * `class` of the "more" button icon. Default: `material-icons`.
+         */
+        "moreIconFamily"?: string;
+        /**
+          * Accessible name of the "more" button. Default, and fallback for an empty value: `More`.
+          * @default 'More'
+         */
+        "more_button_label"?: string;
         /**
           * Link URL of the news icon (right section).
          */
@@ -4119,6 +4857,10 @@ declare namespace LocalJSX {
           * Tooltip text and alternative text of the news icon.
          */
         "newsButtonText"?: string;
+        /**
+          * Right-side text links as a list (3.x). JSON array, or array property, of `{ RightLinkTooltip, href, title, itemId, IconFamily, IconName, LinkText }`. When set, it replaces the location and news links.
+         */
+        "rightLink"?: string | RightLinkItem[];
         /**
           * Alternative text for the second logo.
          */
@@ -4143,10 +4885,18 @@ declare namespace LocalJSX {
           * Link URL of the services icon (left section).
          */
         "servicesIconHref"?: string;
+        /**
+          * `id` of the services link.
+         */
+        "servicesIconId"?: string;
         /**
           * Image URL of the services icon.
          */
         "servicesIconSrc"?: string;
+        /**
+          * Services image for `color-theme="dark"`.
+         */
+        "servicesIconSrcDark"?: string;
         /**
           * Text shown next to the services icon. Nothing is shown when it is not set.
          */
@@ -4486,6 +5236,19 @@ declare namespace LocalJSX {
         "slider_height": string;
         "aria_label": string;
     }
+    interface DdaBannerCardAttributes {
+        "banner_card_href": string;
+        "banner_card_url": string;
+        "banner_card_id": string;
+        "image_src": string;
+        "image_alt": string;
+        "banner_card_title": string;
+        "banner_card_description": string;
+        "banner_card_value": string;
+        "banner_card_name": string;
+        "custom_class": string;
+        "component_mode": string;
+    }
     interface DdaBreadcrumbAttributes {
         "design": 'text' | 'icon-text' | 'icon';
         "separator": 'chevron_right' | 'pen_size_2';
@@ -4602,14 +5365,45 @@ declare namespace LocalJSX {
         "secondLogoHref": string;
         "loginLink": string;
         "sideMenuItems": string;
-        "quickLinks": string;
+        "sideMainMenuTitle": string;
+        "sideOtherMenuTitle": string;
+        "otherMenuItems": string | Array<{ label: string; href: string; active?: string }>;
+        "hideOtherMenu": boolean;
+        "mobileMenuSearchId": string;
+        "mobileMenuSearchUrl": string;
+        "quickLinks": string | QuickLinkItem[];
         "readSpeakerLink": string;
+        "read_speaker_link": string;
+        "contrast_title": string;
+        "contrast_description": string;
+        "contrast_normal_text": string;
+        "contrast_noraml_text": string;
+        "contrast_color_blind_text": string;
+        "contrast_red_weakness_text": string;
+        "contrast_green_weakness_text": string;
+        "screen_reader_title": string;
+        "screen_reader_description": string;
+        "screen_reader_link_label": string;
+        "text_size_title": string;
+        "text_size_description": string;
+        "selected_contrast": 'normal' | 'colorblind' | 'redweakness' | 'greenweakness';
+        "selected_text_size": 'small' | 'normal' | 'large';
         "searchText": string;
         "loginIcon": string;
         "loginText": string;
         "hide_login": boolean;
         "language_text": string;
         "language_lang": string;
+        "accessibility_tooltip": string;
+        "accessibility_button_text": string;
+        "accessibility_button_id": string;
+        "accessibility_button_icon_family": string;
+        "accessibility_button_icon_name": string;
+        "search_tooltip": string;
+        "search_input_placeholder": string;
+        "language_tooltip": string;
+        "login_tooltip": string;
+        "usePredesignedAccessibilityMenu": boolean;
         "hamburger_menu_button_name": string;
         "menu_button_label": string;
         "accessibility_button_name": string;
@@ -4632,6 +5426,15 @@ declare namespace LocalJSX {
         "play_button_label": string;
         "slide_button_label": string;
         "slide_status_label": string;
+        "show_scroll_icon": boolean;
+        "show_scroll_icon_mobile": boolean;
+    }
+    interface DdaHomeCarouselAttributes {
+        "bannercardlist": string | BannerCardItem[];
+        "items_in_view": number;
+        "aria_label": string;
+        "custom_class": string;
+        "component_mode": string;
     }
     interface DdaHorizontalStepperAttributes {
         "steps": string;
@@ -4772,6 +5575,12 @@ declare namespace LocalJSX {
         "left_input_name": string;
         "right_input_name": string;
     }
+    interface DdaScrollIconAttributes {
+        "scroll_icon_size": 'sm' | 'lg';
+        "scroll_icon_color": 'white' | 'black';
+        "custom_class": string;
+        "component_mode": string;
+    }
     interface DdaSearchInputAttributes {
         "placeholder": string;
         "label": string;
@@ -4804,7 +5613,7 @@ declare namespace LocalJSX {
     }
     interface DdaSelectAttributes {
         "label": string;
-        "options": string;
+        "options": string | Array<string | SelectOption>;
         "selected": string;
         "disabled": boolean;
         "error": string;
@@ -4817,21 +5626,31 @@ declare namespace LocalJSX {
         "button_id": string;
         "toggle_button_name": string;
         "option_select_button_name": string;
+        "placeholder": string;
+        "input_name": string;
+        "main_aria_label": string;
+        "validation_type": string;
     }
     interface DdaStickyFooterAttributes {
         "happinessIconHref": string;
         "happinessIconSrc": string;
         "happinessIconAlt": string;
         "happinessIconTooltip": string;
+        "happinessIconId": string;
+        "happinessIconSrcDark": string;
         "accessibilityIconHref": string;
         "accessibilityIconSrc": string;
         "accessibilityIconAlt": string;
         "accessibilityIconTooltip": string;
+        "accessibilityIconId": string;
+        "accessibilityIconSrcDark": string;
         "servicesIconHref": string;
         "servicesIconSrc": string;
         "servicesIconAlt": string;
         "servicesIconTooltip": string;
         "servicesIconText": string;
+        "servicesIconId": string;
+        "servicesIconSrcDark": string;
         "firstLogoHref": string;
         "firstLogoSrc": string;
         "firstLogoAlt": string;
@@ -4844,6 +5663,7 @@ declare namespace LocalJSX {
         "thirdLogoSrc": string;
         "thirdLogoAlt": string;
         "thirdLogoTooltip": string;
+        "middleLink": string | MiddleLinkItem[];
         "locationButtonHref": string;
         "locationLogoSrc": string;
         "locationButtonText": string;
@@ -4856,10 +5676,26 @@ declare namespace LocalJSX {
         "aiIconSrc": string;
         "aiIconAlt": string;
         "aiIconTooltip": string;
+        "aiIconId": string;
+        "aiIconSrcDark": string;
         "chatIconHref": string;
         "chatIconSrc": string;
         "chatIconAlt": string;
         "chatIconTooltip": string;
+        "chatIconId": string;
+        "chatIconSrcDark": string;
+        "rightLink": string | RightLinkItem[];
+        "dubaiaeIconHref": string;
+        "dubaiaeIconId": string;
+        "dubaiaeIconSrc": string;
+        "dubaiaeIconSrcDark": string;
+        "dubaiaeIconSmallSrc": string;
+        "dubaiaeIconAlt": string;
+        "dubaiaeIconTooltip": string;
+        "moreIcon": string;
+        "moreIconFamily": string;
+        "more_button_label": string;
+        "colorTheme": 'light' | 'dark';
         "aria_label": string;
         "hideMiddleSection": boolean;
     }
@@ -4934,6 +5770,7 @@ declare namespace LocalJSX {
         "dda-attach-file": Omit<DdaAttachFile, keyof DdaAttachFileAttributes> & { [K in keyof DdaAttachFile & keyof DdaAttachFileAttributes]?: DdaAttachFile[K] } & { [K in keyof DdaAttachFile & keyof DdaAttachFileAttributes as `attr:${K}`]?: DdaAttachFileAttributes[K] } & { [K in keyof DdaAttachFile & keyof DdaAttachFileAttributes as `prop:${K}`]?: DdaAttachFile[K] };
         "dda-avatar": Omit<DdaAvatar, keyof DdaAvatarAttributes> & { [K in keyof DdaAvatar & keyof DdaAvatarAttributes]?: DdaAvatar[K] } & { [K in keyof DdaAvatar & keyof DdaAvatarAttributes as `attr:${K}`]?: DdaAvatarAttributes[K] } & { [K in keyof DdaAvatar & keyof DdaAvatarAttributes as `prop:${K}`]?: DdaAvatar[K] };
         "dda-banner": Omit<DdaBanner, keyof DdaBannerAttributes> & { [K in keyof DdaBanner & keyof DdaBannerAttributes]?: DdaBanner[K] } & { [K in keyof DdaBanner & keyof DdaBannerAttributes as `attr:${K}`]?: DdaBannerAttributes[K] } & { [K in keyof DdaBanner & keyof DdaBannerAttributes as `prop:${K}`]?: DdaBanner[K] };
+        "dda-banner-card": Omit<DdaBannerCard, keyof DdaBannerCardAttributes> & { [K in keyof DdaBannerCard & keyof DdaBannerCardAttributes]?: DdaBannerCard[K] } & { [K in keyof DdaBannerCard & keyof DdaBannerCardAttributes as `attr:${K}`]?: DdaBannerCardAttributes[K] } & { [K in keyof DdaBannerCard & keyof DdaBannerCardAttributes as `prop:${K}`]?: DdaBannerCard[K] };
         "dda-breadcrumb": Omit<DdaBreadcrumb, keyof DdaBreadcrumbAttributes> & { [K in keyof DdaBreadcrumb & keyof DdaBreadcrumbAttributes]?: DdaBreadcrumb[K] } & { [K in keyof DdaBreadcrumb & keyof DdaBreadcrumbAttributes as `attr:${K}`]?: DdaBreadcrumbAttributes[K] } & { [K in keyof DdaBreadcrumb & keyof DdaBreadcrumbAttributes as `prop:${K}`]?: DdaBreadcrumb[K] };
         "dda-button": Omit<DdaButton, keyof DdaButtonAttributes> & { [K in keyof DdaButton & keyof DdaButtonAttributes]?: DdaButton[K] } & { [K in keyof DdaButton & keyof DdaButtonAttributes as `attr:${K}`]?: DdaButtonAttributes[K] } & { [K in keyof DdaButton & keyof DdaButtonAttributes as `prop:${K}`]?: DdaButton[K] };
         "dda-checkbox": Omit<DdaCheckbox, keyof DdaCheckboxAttributes> & { [K in keyof DdaCheckbox & keyof DdaCheckboxAttributes]?: DdaCheckbox[K] } & { [K in keyof DdaCheckbox & keyof DdaCheckboxAttributes as `attr:${K}`]?: DdaCheckboxAttributes[K] } & { [K in keyof DdaCheckbox & keyof DdaCheckboxAttributes as `prop:${K}`]?: DdaCheckbox[K] };
@@ -4944,6 +5781,7 @@ declare namespace LocalJSX {
         "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": 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-home-carousel": Omit<DdaHomeCarousel, keyof DdaHomeCarouselAttributes> & { [K in keyof DdaHomeCarousel & keyof DdaHomeCarouselAttributes]?: DdaHomeCarousel[K] } & { [K in keyof DdaHomeCarousel & keyof DdaHomeCarouselAttributes as `attr:${K}`]?: DdaHomeCarouselAttributes[K] } & { [K in keyof DdaHomeCarousel & keyof DdaHomeCarouselAttributes as `prop:${K}`]?: DdaHomeCarousel[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] };
@@ -4953,6 +5791,7 @@ declare namespace LocalJSX {
         "dda-progressbar": Omit<DdaProgressbar, keyof DdaProgressbarAttributes> & { [K in keyof DdaProgressbar & keyof DdaProgressbarAttributes]?: DdaProgressbar[K] } & { [K in keyof DdaProgressbar & keyof DdaProgressbarAttributes as `attr:${K}`]?: DdaProgressbarAttributes[K] } & { [K in keyof DdaProgressbar & keyof DdaProgressbarAttributes as `prop:${K}`]?: DdaProgressbar[K] };
         "dda-radiobutton": Omit<DdaRadiobutton, keyof DdaRadiobuttonAttributes> & { [K in keyof DdaRadiobutton & keyof DdaRadiobuttonAttributes]?: DdaRadiobutton[K] } & { [K in keyof DdaRadiobutton & keyof DdaRadiobuttonAttributes as `attr:${K}`]?: DdaRadiobuttonAttributes[K] } & { [K in keyof DdaRadiobutton & keyof DdaRadiobuttonAttributes as `prop:${K}`]?: DdaRadiobutton[K] };
         "dda-range-slider": Omit<DdaRangeSlider, keyof DdaRangeSliderAttributes> & { [K in keyof DdaRangeSlider & keyof DdaRangeSliderAttributes]?: DdaRangeSlider[K] } & { [K in keyof DdaRangeSlider & keyof DdaRangeSliderAttributes as `attr:${K}`]?: DdaRangeSliderAttributes[K] } & { [K in keyof DdaRangeSlider & keyof DdaRangeSliderAttributes as `prop:${K}`]?: DdaRangeSlider[K] };
+        "dda-scroll-icon": Omit<DdaScrollIcon, keyof DdaScrollIconAttributes> & { [K in keyof DdaScrollIcon & keyof DdaScrollIconAttributes]?: DdaScrollIcon[K] } & { [K in keyof DdaScrollIcon & keyof DdaScrollIconAttributes as `attr:${K}`]?: DdaScrollIconAttributes[K] } & { [K in keyof DdaScrollIcon & keyof DdaScrollIconAttributes as `prop:${K}`]?: DdaScrollIcon[K] };
         "dda-search-input": Omit<DdaSearchInput, keyof DdaSearchInputAttributes> & { [K in keyof DdaSearchInput & keyof DdaSearchInputAttributes]?: DdaSearchInput[K] } & { [K in keyof DdaSearchInput & keyof DdaSearchInputAttributes as `attr:${K}`]?: DdaSearchInputAttributes[K] } & { [K in keyof DdaSearchInput & keyof DdaSearchInputAttributes as `prop:${K}`]?: DdaSearchInput[K] };
         "dda-segmented-tabs": Omit<DdaSegmentedTabs, keyof DdaSegmentedTabsAttributes> & { [K in keyof DdaSegmentedTabs & keyof DdaSegmentedTabsAttributes]?: DdaSegmentedTabs[K] } & { [K in keyof DdaSegmentedTabs & keyof DdaSegmentedTabsAttributes as `attr:${K}`]?: DdaSegmentedTabsAttributes[K] } & { [K in keyof DdaSegmentedTabs & keyof DdaSegmentedTabsAttributes as `prop:${K}`]?: DdaSegmentedTabs[K] };
         "dda-select": Omit<DdaSelect, keyof DdaSelectAttributes> & { [K in keyof DdaSelect & keyof DdaSelectAttributes]?: DdaSelect[K] } & { [K in keyof DdaSelect & keyof DdaSelectAttributes as `attr:${K}`]?: DdaSelectAttributes[K] } & { [K in keyof DdaSelect & keyof DdaSelectAttributes as `prop:${K}`]?: DdaSelect[K] };
@@ -4974,6 +5813,7 @@ declare module "@stencil/core" {
             "dda-attach-file": LocalJSX.IntrinsicElements["dda-attach-file"] & JSXBase.HTMLAttributes<HTMLDdaAttachFileElement>;
             "dda-avatar": LocalJSX.IntrinsicElements["dda-avatar"] & JSXBase.HTMLAttributes<HTMLDdaAvatarElement>;
             "dda-banner": LocalJSX.IntrinsicElements["dda-banner"] & JSXBase.HTMLAttributes<HTMLDdaBannerElement>;
+            "dda-banner-card": LocalJSX.IntrinsicElements["dda-banner-card"] & JSXBase.HTMLAttributes<HTMLDdaBannerCardElement>;
             "dda-breadcrumb": LocalJSX.IntrinsicElements["dda-breadcrumb"] & JSXBase.HTMLAttributes<HTMLDdaBreadcrumbElement>;
             "dda-button": LocalJSX.IntrinsicElements["dda-button"] & JSXBase.HTMLAttributes<HTMLDdaButtonElement>;
             "dda-checkbox": LocalJSX.IntrinsicElements["dda-checkbox"] & JSXBase.HTMLAttributes<HTMLDdaCheckboxElement>;
@@ -4984,6 +5824,7 @@ declare module "@stencil/core" {
             "dda-footer": LocalJSX.IntrinsicElements["dda-footer"] & JSXBase.HTMLAttributes<HTMLDdaFooterElement>;
             "dda-header": LocalJSX.IntrinsicElements["dda-header"] & JSXBase.HTMLAttributes<HTMLDdaHeaderElement>;
             "dda-home-banner": LocalJSX.IntrinsicElements["dda-home-banner"] & JSXBase.HTMLAttributes<HTMLDdaHomeBannerElement>;
+            "dda-home-carousel": LocalJSX.IntrinsicElements["dda-home-carousel"] & JSXBase.HTMLAttributes<HTMLDdaHomeCarouselElement>;
             "dda-horizontal-stepper": LocalJSX.IntrinsicElements["dda-horizontal-stepper"] & JSXBase.HTMLAttributes<HTMLDdaHorizontalStepperElement>;
             "dda-input": LocalJSX.IntrinsicElements["dda-input"] & JSXBase.HTMLAttributes<HTMLDdaInputElement>;
             "dda-link-button": LocalJSX.IntrinsicElements["dda-link-button"] & JSXBase.HTMLAttributes<HTMLDdaLinkButtonElement>;
@@ -4993,6 +5834,7 @@ declare module "@stencil/core" {
             "dda-progressbar": LocalJSX.IntrinsicElements["dda-progressbar"] & JSXBase.HTMLAttributes<HTMLDdaProgressbarElement>;
             "dda-radiobutton": LocalJSX.IntrinsicElements["dda-radiobutton"] & JSXBase.HTMLAttributes<HTMLDdaRadiobuttonElement>;
             "dda-range-slider": LocalJSX.IntrinsicElements["dda-range-slider"] & JSXBase.HTMLAttributes<HTMLDdaRangeSliderElement>;
+            "dda-scroll-icon": LocalJSX.IntrinsicElements["dda-scroll-icon"] & JSXBase.HTMLAttributes<HTMLDdaScrollIconElement>;
             "dda-search-input": LocalJSX.IntrinsicElements["dda-search-input"] & JSXBase.HTMLAttributes<HTMLDdaSearchInputElement>;
             "dda-segmented-tabs": LocalJSX.IntrinsicElements["dda-segmented-tabs"] & JSXBase.HTMLAttributes<HTMLDdaSegmentedTabsElement>;
             "dda-select": LocalJSX.IntrinsicElements["dda-select"] & JSXBase.HTMLAttributes<HTMLDdaSelectElement>;