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

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-BnrqwGTj.js';
-export { s as setNonce } from './index-BnrqwGTj.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-BJOt1fv7.js';
+export { s as setNonce } from './index-BJOt1fv7.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"dda-header\",[[0,\"dda-header\",{\"firstLogoSrc\":[1,\"first-logo-src\"],\"firstLogoWhiteSrc\":[1,\"first-logo-white-src\"],\"firstLogoAlt\":[1,\"first-logo-alt\"],\"firstLogoHref\":[1,\"first-logo-href\"],\"secondLogoSrc\":[1,\"second-logo-src\"],\"secondLogoWhiteSrc\":[1,\"second-logo-white-src\"],\"secondLogoAlt\":[1,\"second-logo-alt\"],\"secondLogoHref\":[1,\"second-logo-href\"],\"loginLink\":[1,\"login-link\"],\"sideMenuItems\":[1,\"side-menu-items\"],\"sideMainMenuTitle\":[1,\"side-main-menu-title\"],\"sideOtherMenuTitle\":[1,\"side-other-menu-title\"],\"otherMenuItems\":[1,\"other-menu-items\"],\"hideOtherMenu\":[4,\"hide-other-menu\"],\"mobileMenuSearchId\":[1,\"mobile-menu-search-id\"],\"mobileMenuSearchUrl\":[1,\"mobile-menu-search-url\"],\"quickLinks\":[1,\"quick-links\"],\"readSpeakerLink\":[1,\"read-speaker-link\"],\"read_speaker_link\":[1],\"contrast_title\":[1],\"contrast_description\":[1],\"contrast_normal_text\":[1],\"contrast_noraml_text\":[1],\"contrast_color_blind_text\":[1],\"contrast_red_weakness_text\":[1],\"contrast_green_weakness_text\":[1],\"screen_reader_title\":[1],\"screen_reader_description\":[1],\"screen_reader_link_label\":[1],\"text_size_title\":[1],\"text_size_description\":[1],\"selected_contrast\":[1025],\"selected_text_size\":[1025],\"searchText\":[1,\"search-text\"],\"loginIcon\":[1,\"login-icon\"],\"loginText\":[1,\"login-text\"],\"hide_login\":[4],\"language_text\":[1],\"language_lang\":[1],\"accessibility_tooltip\":[1],\"accessibility_button_text\":[1],\"accessibility_button_id\":[1],\"accessibility_button_icon_family\":[1],\"accessibility_button_icon_name\":[1],\"search_tooltip\":[1],\"search_input_placeholder\":[1],\"language_tooltip\":[1],\"login_tooltip\":[1],\"usePredesignedAccessibilityMenu\":[4,\"use-predesigned-accessibility-menu\"],\"hamburger_menu_button_name\":[1],\"menu_button_label\":[1],\"accessibility_button_name\":[1],\"search_button_name\":[1],\"search_input_name\":[1],\"search_action\":[1],\"language_button_name\":[1],\"close_menu_button_name\":[1],\"close_accessibility_button_name\":[1],\"close_sidebar_button_name\":[1],\"toggle_accessibility_button_name\":[1],\"isMenuOpen\":[32],\"isSubMenuOpen\":[32],\"isSideSubMenuOpen\":[32],\"isAccessibiltyOpen\":[32],\"isSearchOpen\":[32],\"openMenus\":[32],\"activeMenuIndex\":[32],\"activeSubIndex\":[32],\"activeSubTop\":[32]},null,{\"isMenuOpen\":[{\"onMenuOpenChange\":0}]}]]],[\"dda-footer\",[[0,\"dda-footer\",{\"footerTitle\":[1,\"footer-title\"],\"heading_level\":[2],\"description\":[1],\"signUpButtonText\":[1,\"sign-up-button-text\"],\"loginButtonText\":[1,\"login-button-text\"],\"logoSrc\":[1,\"logo-src\"],\"logoAlt\":[1,\"logo-alt\"],\"copyrightText\":[1,\"copyright-text\"],\"logoDescription\":[1,\"logo-description\"],\"footerSections\":[1,\"footer-sections\"],\"socialIcons\":[1,\"social-icons\"]}]]],[\"dda-home-carousel\",[[0,\"dda-home-carousel\",{\"bannercardlist\":[1],\"items_in_view\":[2],\"aria_label\":[1],\"custom_class\":[1],\"component_mode\":[1]}]]],[\"dda-sticky-footer\",[[0,\"dda-sticky-footer\",{\"happinessIconHref\":[1,\"happiness-icon-href\"],\"happinessIconSrc\":[1,\"happiness-icon-src\"],\"happinessIconAlt\":[1,\"happiness-icon-alt\"],\"happinessIconTooltip\":[1,\"happiness-icon-tooltip\"],\"happinessIconId\":[1,\"happiness-icon-id\"],\"happinessIconSrcDark\":[1,\"happiness-icon-src-dark\"],\"accessibilityIconHref\":[1,\"accessibility-icon-href\"],\"accessibilityIconSrc\":[1,\"accessibility-icon-src\"],\"accessibilityIconAlt\":[1,\"accessibility-icon-alt\"],\"accessibilityIconTooltip\":[1,\"accessibility-icon-tooltip\"],\"accessibilityIconId\":[1,\"accessibility-icon-id\"],\"accessibilityIconSrcDark\":[1,\"accessibility-icon-src-dark\"],\"servicesIconHref\":[1,\"services-icon-href\"],\"servicesIconSrc\":[1,\"services-icon-src\"],\"servicesIconAlt\":[1,\"services-icon-alt\"],\"servicesIconTooltip\":[1,\"services-icon-tooltip\"],\"servicesIconText\":[1,\"services-icon-text\"],\"servicesIconId\":[1,\"services-icon-id\"],\"servicesIconSrcDark\":[1,\"services-icon-src-dark\"],\"firstLogoHref\":[1,\"first-logo-href\"],\"firstLogoSrc\":[1,\"first-logo-src\"],\"firstLogoAlt\":[1,\"first-logo-alt\"],\"firstLogoTooltip\":[1,\"first-logo-tooltip\"],\"secondLogoHref\":[1,\"second-logo-href\"],\"secondLogoSrc\":[1,\"second-logo-src\"],\"secondLogoAlt\":[1,\"second-logo-alt\"],\"secondLogoTooltip\":[1,\"second-logo-tooltip\"],\"thirdLogoHref\":[1,\"third-logo-href\"],\"thirdLogoSrc\":[1,\"third-logo-src\"],\"thirdLogoAlt\":[1,\"third-logo-alt\"],\"thirdLogoTooltip\":[1,\"third-logo-tooltip\"],\"middleLink\":[1,\"middle-link\"],\"locationButtonHref\":[1,\"location-button-href\"],\"locationLogoSrc\":[1,\"location-logo-src\"],\"locationButtonText\":[1,\"location-button-text\"],\"locationButtonIcon\":[1,\"location-button-icon\"],\"newsButtonHref\":[1,\"news-button-href\"],\"newsButtonSrc\":[1,\"news-button-src\"],\"newsButtonText\":[1,\"news-button-text\"],\"newsButtonIcon\":[1,\"news-button-icon\"],\"aiIconHref\":[1,\"ai-icon-href\"],\"aiIconSrc\":[1,\"ai-icon-src\"],\"aiIconAlt\":[1,\"ai-icon-alt\"],\"aiIconTooltip\":[1,\"ai-icon-tooltip\"],\"aiIconId\":[1,\"ai-icon-id\"],\"aiIconSrcDark\":[1,\"ai-icon-src-dark\"],\"chatIconHref\":[1,\"chat-icon-href\"],\"chatIconSrc\":[1,\"chat-icon-src\"],\"chatIconAlt\":[1,\"chat-icon-alt\"],\"chatIconTooltip\":[1,\"chat-icon-tooltip\"],\"chatIconId\":[1,\"chat-icon-id\"],\"chatIconSrcDark\":[1,\"chat-icon-src-dark\"],\"rightLink\":[1,\"right-link\"],\"dubaiaeIconHref\":[1,\"dubaiae-icon-href\"],\"dubaiaeIconId\":[1,\"dubaiae-icon-id\"],\"dubaiaeIconSrc\":[1,\"dubaiae-icon-src\"],\"dubaiaeIconSrcDark\":[1,\"dubaiae-icon-src-dark\"],\"dubaiaeIconSmallSrc\":[1,\"dubaiae-icon-small-src\"],\"dubaiaeIconAlt\":[1,\"dubaiae-icon-alt\"],\"dubaiaeIconTooltip\":[1,\"dubaiae-icon-tooltip\"],\"moreIcon\":[1,\"more-icon\"],\"moreIconFamily\":[1,\"more-icon-family\"],\"more_button_label\":[1],\"colorTheme\":[1,\"color-theme\"],\"aria_label\":[1],\"hideMiddleSection\":[4,\"hide-middle-section\"],\"isHidden\":[32],\"rightOpen\":[32],\"isMobile\":[32]}]]],[\"dda-accordion\",[[260,\"dda-accordion\",{\"design\":[1],\"header_text\":[1],\"body_description\":[1],\"custom_class\":[1],\"component_mode\":[1],\"accordion_icon\":[1],\"isOpen\":[32]}]]],[\"dda-alert\",[[0,\"dda-alert\",{\"type\":[1],\"variation\":[1],\"title_text\":[1],\"description\":[1],\"button_text\":[1],\"custom_class\":[1],\"component_mode\":[1],\"component_id\":[1],\"first_link\":[1],\"second_link\":[1],\"first_button\":[1],\"second_button\":[1],\"button_name\":[1],\"clickHandler\":[16],\"close_button_label\":[1],\"heading_level\":[2]}]]],[\"dda-attach-file\",[[0,\"dda-attach-file\",{\"label\":[1],\"helper_text\":[1],\"error_message\":[1],\"size\":[1],\"validation_type\":[1],\"input_type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1],\"button_aria_label\":[1],\"input_id\":[1],\"button_id\":[1],\"button_name\":[1],\"input_name\":[1],\"file\":[32]}]]],[\"dda-avatar\",[[0,\"dda-avatar\",{\"type\":[1],\"size\":[1],\"design\":[1],\"rounded\":[1],\"src\":[1],\"icon\":[1],\"text\":[1],\"notification_number\":[2],\"custom_class\":[1],\"selected\":[1025],\"options\":[1],\"component_mode\":[1],\"aria_label\":[1],\"button_id\":[1],\"button_name\":[1],\"isOpen\":[32]}]]],[\"dda-banner\",[[1,\"dda-banner\",{\"slides\":[1],\"slider_width\":[1],\"slider_height\":[1],\"aria_label\":[1],\"parsedSlides\":[32]}]]],[\"dda-breadcrumb\",[[0,\"dda-breadcrumb\",{\"design\":[1],\"separator\":[1],\"custom_class\":[1],\"component_mode\":[1],\"breadcrumbs\":[1]}]]],[\"dda-checkbox\",[[0,\"dda-checkbox\",{\"title_text\":[1],\"supporting\":[1],\"group_name\":[1],\"input_id\":[1],\"checked\":[4],\"checkbox_status\":[1],\"size\":[1],\"style_type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1]}]]],[\"dda-chip\",[[260,\"dda-chip\",{\"bg_color\":[1],\"rounded\":[1],\"icon\":[1],\"show_close_icon\":[4],\"close_button_label\":[1],\"size\":[1],\"custom_class\":[1],\"component_mode\":[1],\"clickHandler\":[16]}]]],[\"dda-credit-card\",[[0,\"dda-credit-card\",{\"balance\":[1],\"name\":[1],\"card_number\":[1],\"card_type\":[1],\"design\":[1],\"custom_class\":[1],\"component_mode\":[1]}]]],[\"dda-creditcard-field\",[[0,\"dda-creditcard-field\",{\"placeholder\":[1],\"label\":[1],\"value\":[1025],\"card_icon\":[1],\"error_message\":[1],\"validation_type\":[1],\"size\":[1],\"input_type\":[1],\"helper_text\":[1],\"disabled\":[4],\"custom_class\":[1],\"restrict_input\":[4],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"input_name\":[1],\"autocomplete\":[1],\"formattedValue\":[32]}]]],[\"dda-dropdown\",[[0,\"dda-dropdown\",{\"label\":[1],\"options\":[1],\"selected\":[1025],\"disabled\":[4],\"error\":[1],\"helper_text\":[1],\"type\":[1],\"size\":[1],\"icon_mode\":[4],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"aria_label\":[1],\"arrow_button_name\":[1],\"dropdown_button_name\":[1],\"toggle_button_label\":[1],\"isopen\":[32]},[[0,\"click\",\"onHostClick\"]]]]],[\"dda-home-banner\",[[260,\"dda-home-banner\",{\"autoplay\":[4],\"interval\":[2],\"aria_label\":[1],\"previous_button_label\":[1],\"next_button_label\":[1],\"pause_button_label\":[1],\"play_button_label\":[1],\"slide_button_label\":[1],\"slide_status_label\":[1],\"currentSlide\":[32],\"slides\":[32],\"isPaused\":[32],\"reducedMotion\":[32]},null,{\"autoplay\":[{\"autoplayChanged\":0}],\"interval\":[{\"autoplayChanged\":0}]}]]],[\"dda-horizontal-stepper\",[[0,\"dda-horizontal-stepper\",{\"steps\":[1],\"current_step\":[2],\"custom_class\":[1],\"component_mode\":[1],\"parsedSteps\":[32]},null,{\"steps\":[{\"parseSteps\":0}]}]]],[\"dda-input\",[[0,\"dda-input\",{\"label\":[1],\"placeholder\":[1],\"value\":[1],\"type\":[1],\"helper_text\":[1],\"error_message\":[1],\"validation_type\":[1],\"size\":[1],\"input_status\":[1],\"custom_class\":[1],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"input_name\":[1],\"autocomplete\":[1]}]]],[\"dda-number-field\",[[0,\"dda-number-field\",{\"placeholder\":[1],\"label\":[1],\"value\":[1],\"helper_text\":[1],\"error_message\":[1],\"validation_type\":[1],\"size\":[1],\"input_status\":[1],\"currencies\":[1],\"selected_currency\":[1],\"custom_class\":[1],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"input_name\":[1],\"toggle_button_name\":[1],\"currency_button_name\":[1],\"toggle_button_label\":[1],\"is_focused\":[32],\"isCurrencyDropdownOpen\":[32]}]]],[\"dda-pagination\",[[0,\"dda-pagination\",{\"total_pages\":[1026],\"current_page\":[1026],\"type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"simple_slider_prev_button\":[1],\"simple_slider_next_button\":[1],\"buttons_prev_button\":[1],\"buttons_next_button\":[1],\"text_prev_button\":[1],\"text_next_button\":[1],\"text_pages_prev_button\":[1],\"text_pages_next_button\":[1],\"button_text_prev_button\":[1],\"button_text_next_button\":[1],\"buttons_pages_prev_button\":[1],\"buttons_pages_next_button\":[1],\"previous_button_label\":[1],\"next_button_label\":[1]},null,{\"total_pages\":[{\"validateTotalPages\":0}],\"current_page\":[{\"validateCurrentPage\":0}]}]]],[\"dda-phonefield\",[[0,\"dda-phonefield\",{\"label\":[1],\"placeholder\":[1],\"helper_text\":[1],\"validation_type\":[1],\"error_message\":[1],\"disabled\":[4],\"size\":[1],\"custom_class\":[1],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"button_id\":[1],\"button_aria_label\":[1],\"toggle_button_name\":[1],\"country_select_button_name\":[1],\"toggle_button_label\":[1],\"phone_input_name\":[1],\"autocomplete\":[1],\"country_code\":[32],\"country_flag\":[32],\"phone_number\":[32],\"is_focused\":[32],\"dropdown_open\":[32],\"countries\":[32]}]]],[\"dda-progressbar\",[[0,\"dda-progressbar\",{\"progress\":[2],\"tooltip\":[4],\"tooltip_position\":[1],\"show_percentage_text\":[4],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1]}]]],[\"dda-range-slider\",[[0,\"dda-range-slider\",{\"min\":[2],\"max\":[2],\"step\":[2],\"initial_min\":[2],\"initial_max\":[2],\"size\":[1],\"tooltip_position\":[1],\"custom_class\":[1],\"component_mode\":[1],\"left_input_id\":[1],\"right_input_id\":[1],\"left_aria_label\":[1],\"right_aria_label\":[1],\"left_input_name\":[1],\"right_input_name\":[1],\"min_value\":[32],\"max_value\":[32]}]]],[\"dda-search-input\",[[0,\"dda-search-input\",{\"placeholder\":[1],\"label\":[1],\"size\":[1],\"error_message\":[1],\"show_button\":[4],\"helper_text\":[1],\"input_status\":[1],\"has_error\":[4],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"input_id\":[1],\"aria_label\":[1],\"button_aria_label\":[1],\"search_input_name\":[1],\"close_button_name\":[1],\"clear_button_label\":[1],\"search_button_name\":[1]}]]],[\"dda-segmented-tabs\",[[0,\"dda-segmented-tabs\",{\"items\":[1],\"radius_type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"button_name\":[1],\"aria_label\":[1],\"selected_index\":[2],\"icon_labels\":[1],\"active_index\":[32]},null,{\"items\":[{\"itemsChanged\":0}],\"selected_index\":[{\"selectedIndexChanged\":0}]}]]],[\"dda-select\",[[0,\"dda-select\",{\"label\":[1],\"options\":[1],\"selected\":[1025],\"disabled\":[4],\"error\":[1],\"error_message\":[1],\"helper_text\":[1],\"size\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1],\"button_id\":[1],\"toggle_button_name\":[1],\"option_select_button_name\":[1],\"is_open\":[32]},[[0,\"click\",\"onHostClick\"]]]]],[\"dda-tabs\",[[0,\"dda-tabs\",{\"type\":[1],\"hover_style\":[1],\"border_bottom\":[4],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"aria_label\":[1],\"tab_texts\":[1],\"tab_icons\":[1],\"button_name\":[1],\"active_tab\":[32]}]]],[\"dda-textarea\",[[0,\"dda-textarea\",{\"placeholder\":[1],\"label\":[1],\"value\":[1],\"error_message\":[1],\"validation_type\":[1],\"input_status\":[1],\"helper_text\":[1],\"custom_class\":[1],\"enable_rich_editor\":[4],\"max_characters\":[2],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"textarea_name\":[1],\"characterCount\":[32]}]]],[\"dda-toggle\",[[0,\"dda-toggle\",{\"checked\":[4],\"size\":[1],\"custom_class\":[1],\"group_name\":[1],\"input_id\":[1],\"component_mode\":[1],\"aria_label\":[1],\"title_text\":[1],\"supporting\":[1]}]]],[\"dda-ui-card\",[[260,\"dda-ui-card\",{\"type\":[1],\"icon\":[1],\"image\":[1],\"maintitle\":[1],\"subtitle\":[1],\"link\":[1],\"linktext\":[1],\"linkicon\":[1],\"heading_level\":[2]}]]],[\"dda-vertical-stepper\",[[0,\"dda-vertical-stepper\",{\"steps\":[1],\"current_step\":[2],\"current_Step\":[2,\"current_-step\"],\"custom_class\":[1],\"component_mode\":[1],\"parsedSteps\":[32]},null,{\"steps\":[{\"parseSteps\":0}]}]]],[\"dda-banner-card\",[[0,\"dda-banner-card\",{\"banner_card_href\":[1],\"banner_card_url\":[1],\"banner_card_id\":[1],\"image_src\":[1],\"image_alt\":[1],\"banner_card_title\":[1],\"banner_card_description\":[1],\"banner_card_value\":[1],\"banner_card_name\":[1],\"custom_class\":[1],\"component_mode\":[1]}]]],[\"dda-link-button_2\",[[260,\"dda-link-button\",{\"type\":[1],\"disabled\":[4],\"start_icon\":[1],\"end_icon\":[1],\"aria_label\":[1],\"button_color\":[1],\"size\":[1],\"button_shape\":[1],\"icon_button_shape\":[1],\"gap\":[2],\"custom_class\":[1],\"href\":[1],\"component_mode\":[1],\"button_id\":[1]}],[0,\"dda-radiobutton\",{\"title_text\":[1],\"supporting\":[1],\"group_name\":[1],\"input_id\":[1],\"checked\":[4],\"radio_status\":[1],\"size\":[1],\"variants\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1]}]]],[\"dda-button\",[[260,\"dda-button\",{\"type\":[1],\"disabled\":[4],\"start_icon\":[1],\"end_icon\":[1],\"aria_label\":[1],\"button_color\":[1],\"size\":[1],\"button_shape\":[1],\"icon_button_shape\":[1],\"gap\":[2],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"button_name\":[1],\"clickHandler\":[16]}]]],[\"dda-tooltip\",[[260,\"dda-tooltip\",{\"title_text\":[1],\"description\":[1],\"position\":[1],\"custom_class\":[1],\"component_mode\":[1],\"dismissed\":[32]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"dda-header\",[[0,\"dda-header\",{\"firstLogoSrc\":[1,\"first-logo-src\"],\"firstLogoWhiteSrc\":[1,\"first-logo-white-src\"],\"firstLogoAlt\":[1,\"first-logo-alt\"],\"firstLogoHref\":[1,\"first-logo-href\"],\"secondLogoSrc\":[1,\"second-logo-src\"],\"secondLogoWhiteSrc\":[1,\"second-logo-white-src\"],\"secondLogoAlt\":[1,\"second-logo-alt\"],\"secondLogoHref\":[1,\"second-logo-href\"],\"loginLink\":[1,\"login-link\"],\"sideMenuItems\":[1,\"side-menu-items\"],\"sideMainMenuTitle\":[1,\"side-main-menu-title\"],\"sideOtherMenuTitle\":[1,\"side-other-menu-title\"],\"otherMenuItems\":[1,\"other-menu-items\"],\"hideOtherMenu\":[4,\"hide-other-menu\"],\"mobileMenuSearchId\":[1,\"mobile-menu-search-id\"],\"mobileMenuSearchUrl\":[1,\"mobile-menu-search-url\"],\"quickLinks\":[1,\"quick-links\"],\"readSpeakerLink\":[1,\"read-speaker-link\"],\"read_speaker_link\":[1],\"contrast_title\":[1],\"contrast_description\":[1],\"contrast_normal_text\":[1],\"contrast_noraml_text\":[1],\"contrast_color_blind_text\":[1],\"contrast_red_weakness_text\":[1],\"contrast_green_weakness_text\":[1],\"screen_reader_title\":[1],\"screen_reader_description\":[1],\"screen_reader_link_label\":[1],\"text_size_title\":[1],\"text_size_description\":[1],\"selected_contrast\":[1025],\"selected_text_size\":[1025],\"searchText\":[1,\"search-text\"],\"loginIcon\":[1,\"login-icon\"],\"loginText\":[1,\"login-text\"],\"hide_login\":[4],\"language_text\":[1],\"language_lang\":[1],\"accessibility_tooltip\":[1],\"accessibility_button_text\":[1],\"accessibility_button_id\":[1],\"accessibility_button_icon_family\":[1],\"accessibility_button_icon_name\":[1],\"search_tooltip\":[1],\"search_input_placeholder\":[1],\"language_tooltip\":[1],\"login_tooltip\":[1],\"usePredesignedAccessibilityMenu\":[4,\"use-predesigned-accessibility-menu\"],\"hamburger_menu_button_name\":[1],\"menu_button_label\":[1],\"accessibility_button_name\":[1],\"search_button_name\":[1],\"search_input_name\":[1],\"search_action\":[1],\"language_button_name\":[1],\"close_menu_button_name\":[1],\"close_accessibility_button_name\":[1],\"close_sidebar_button_name\":[1],\"toggle_accessibility_button_name\":[1],\"isMenuOpen\":[32],\"isSubMenuOpen\":[32],\"isSideSubMenuOpen\":[32],\"isAccessibiltyOpen\":[32],\"isSearchOpen\":[32],\"openMenus\":[32],\"activeMenuIndex\":[32],\"activeSubIndex\":[32],\"activeSubTop\":[32]},null,{\"isMenuOpen\":[{\"onMenuOpenChange\":0}]}]]],[\"dda-footer\",[[0,\"dda-footer\",{\"footerTitle\":[1,\"footer-title\"],\"heading_level\":[2],\"description\":[1],\"signUpButtonText\":[1,\"sign-up-button-text\"],\"loginButtonText\":[1,\"login-button-text\"],\"logoSrc\":[1,\"logo-src\"],\"logoAlt\":[1,\"logo-alt\"],\"copyrightText\":[1,\"copyright-text\"],\"logoDescription\":[1,\"logo-description\"],\"footerSections\":[1,\"footer-sections\"],\"socialIcons\":[1,\"social-icons\"]}]]],[\"dda-home-banner\",[[260,\"dda-home-banner\",{\"autoplay\":[4],\"interval\":[2],\"aria_label\":[1],\"previous_button_label\":[1],\"next_button_label\":[1],\"pause_button_label\":[1],\"play_button_label\":[1],\"slide_button_label\":[1],\"slide_status_label\":[1],\"show_scroll_icon\":[4],\"show_scroll_icon_mobile\":[4],\"currentSlide\":[32],\"slides\":[32],\"isPaused\":[32],\"reducedMotion\":[32]},null,{\"autoplay\":[{\"autoplayChanged\":0}],\"interval\":[{\"autoplayChanged\":0}]}]]],[\"dda-home-carousel\",[[0,\"dda-home-carousel\",{\"bannercardlist\":[1],\"items_in_view\":[2],\"aria_label\":[1],\"custom_class\":[1],\"component_mode\":[1]}]]],[\"dda-sticky-footer\",[[0,\"dda-sticky-footer\",{\"happinessIconHref\":[1,\"happiness-icon-href\"],\"happinessIconSrc\":[1,\"happiness-icon-src\"],\"happinessIconAlt\":[1,\"happiness-icon-alt\"],\"happinessIconTooltip\":[1,\"happiness-icon-tooltip\"],\"happinessIconId\":[1,\"happiness-icon-id\"],\"happinessIconSrcDark\":[1,\"happiness-icon-src-dark\"],\"accessibilityIconHref\":[1,\"accessibility-icon-href\"],\"accessibilityIconSrc\":[1,\"accessibility-icon-src\"],\"accessibilityIconAlt\":[1,\"accessibility-icon-alt\"],\"accessibilityIconTooltip\":[1,\"accessibility-icon-tooltip\"],\"accessibilityIconId\":[1,\"accessibility-icon-id\"],\"accessibilityIconSrcDark\":[1,\"accessibility-icon-src-dark\"],\"servicesIconHref\":[1,\"services-icon-href\"],\"servicesIconSrc\":[1,\"services-icon-src\"],\"servicesIconAlt\":[1,\"services-icon-alt\"],\"servicesIconTooltip\":[1,\"services-icon-tooltip\"],\"servicesIconText\":[1,\"services-icon-text\"],\"servicesIconId\":[1,\"services-icon-id\"],\"servicesIconSrcDark\":[1,\"services-icon-src-dark\"],\"firstLogoHref\":[1,\"first-logo-href\"],\"firstLogoSrc\":[1,\"first-logo-src\"],\"firstLogoAlt\":[1,\"first-logo-alt\"],\"firstLogoTooltip\":[1,\"first-logo-tooltip\"],\"secondLogoHref\":[1,\"second-logo-href\"],\"secondLogoSrc\":[1,\"second-logo-src\"],\"secondLogoAlt\":[1,\"second-logo-alt\"],\"secondLogoTooltip\":[1,\"second-logo-tooltip\"],\"thirdLogoHref\":[1,\"third-logo-href\"],\"thirdLogoSrc\":[1,\"third-logo-src\"],\"thirdLogoAlt\":[1,\"third-logo-alt\"],\"thirdLogoTooltip\":[1,\"third-logo-tooltip\"],\"middleLink\":[1,\"middle-link\"],\"locationButtonHref\":[1,\"location-button-href\"],\"locationLogoSrc\":[1,\"location-logo-src\"],\"locationButtonText\":[1,\"location-button-text\"],\"locationButtonIcon\":[1,\"location-button-icon\"],\"newsButtonHref\":[1,\"news-button-href\"],\"newsButtonSrc\":[1,\"news-button-src\"],\"newsButtonText\":[1,\"news-button-text\"],\"newsButtonIcon\":[1,\"news-button-icon\"],\"aiIconHref\":[1,\"ai-icon-href\"],\"aiIconSrc\":[1,\"ai-icon-src\"],\"aiIconAlt\":[1,\"ai-icon-alt\"],\"aiIconTooltip\":[1,\"ai-icon-tooltip\"],\"aiIconId\":[1,\"ai-icon-id\"],\"aiIconSrcDark\":[1,\"ai-icon-src-dark\"],\"chatIconHref\":[1,\"chat-icon-href\"],\"chatIconSrc\":[1,\"chat-icon-src\"],\"chatIconAlt\":[1,\"chat-icon-alt\"],\"chatIconTooltip\":[1,\"chat-icon-tooltip\"],\"chatIconId\":[1,\"chat-icon-id\"],\"chatIconSrcDark\":[1,\"chat-icon-src-dark\"],\"rightLink\":[1,\"right-link\"],\"dubaiaeIconHref\":[1,\"dubaiae-icon-href\"],\"dubaiaeIconId\":[1,\"dubaiae-icon-id\"],\"dubaiaeIconSrc\":[1,\"dubaiae-icon-src\"],\"dubaiaeIconSrcDark\":[1,\"dubaiae-icon-src-dark\"],\"dubaiaeIconSmallSrc\":[1,\"dubaiae-icon-small-src\"],\"dubaiaeIconAlt\":[1,\"dubaiae-icon-alt\"],\"dubaiaeIconTooltip\":[1,\"dubaiae-icon-tooltip\"],\"moreIcon\":[1,\"more-icon\"],\"moreIconFamily\":[1,\"more-icon-family\"],\"more_button_label\":[1],\"colorTheme\":[1,\"color-theme\"],\"aria_label\":[1],\"hideMiddleSection\":[4,\"hide-middle-section\"],\"isHidden\":[32],\"rightOpen\":[32],\"isMobile\":[32]}]]],[\"dda-accordion\",[[260,\"dda-accordion\",{\"design\":[1],\"header_text\":[1],\"body_description\":[1],\"custom_class\":[1],\"component_mode\":[1],\"accordion_icon\":[1],\"isOpen\":[32]}]]],[\"dda-alert\",[[0,\"dda-alert\",{\"type\":[1],\"variation\":[1],\"title_text\":[1],\"description\":[1],\"button_text\":[1],\"custom_class\":[1],\"component_mode\":[1],\"component_id\":[1],\"first_link\":[1],\"second_link\":[1],\"first_button\":[1],\"second_button\":[1],\"button_name\":[1],\"clickHandler\":[16],\"close_button_label\":[1],\"heading_level\":[2]}]]],[\"dda-attach-file\",[[0,\"dda-attach-file\",{\"label\":[1],\"helper_text\":[1],\"error_message\":[1],\"size\":[1],\"validation_type\":[1],\"input_type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1],\"button_aria_label\":[1],\"input_id\":[1],\"button_id\":[1],\"button_name\":[1],\"input_name\":[1],\"file\":[32]}]]],[\"dda-avatar\",[[0,\"dda-avatar\",{\"type\":[1],\"size\":[1],\"design\":[1],\"rounded\":[1],\"src\":[1],\"icon\":[1],\"text\":[1],\"notification_number\":[2],\"custom_class\":[1],\"selected\":[1025],\"options\":[1],\"component_mode\":[1],\"aria_label\":[1],\"button_id\":[1],\"button_name\":[1],\"isOpen\":[32]}]]],[\"dda-banner\",[[1,\"dda-banner\",{\"slides\":[1],\"slider_width\":[1],\"slider_height\":[1],\"aria_label\":[1],\"parsedSlides\":[32]}]]],[\"dda-breadcrumb\",[[0,\"dda-breadcrumb\",{\"design\":[1],\"separator\":[1],\"custom_class\":[1],\"component_mode\":[1],\"breadcrumbs\":[1]}]]],[\"dda-checkbox\",[[0,\"dda-checkbox\",{\"title_text\":[1],\"supporting\":[1],\"group_name\":[1],\"input_id\":[1],\"checked\":[4],\"checkbox_status\":[1],\"size\":[1],\"style_type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1]}]]],[\"dda-chip\",[[260,\"dda-chip\",{\"bg_color\":[1],\"rounded\":[1],\"icon\":[1],\"show_close_icon\":[4],\"close_button_label\":[1],\"size\":[1],\"custom_class\":[1],\"component_mode\":[1],\"clickHandler\":[16]}]]],[\"dda-credit-card\",[[0,\"dda-credit-card\",{\"balance\":[1],\"name\":[1],\"card_number\":[1],\"card_type\":[1],\"design\":[1],\"custom_class\":[1],\"component_mode\":[1]}]]],[\"dda-creditcard-field\",[[0,\"dda-creditcard-field\",{\"placeholder\":[1],\"label\":[1],\"value\":[1025],\"card_icon\":[1],\"error_message\":[1],\"validation_type\":[1],\"size\":[1],\"input_type\":[1],\"helper_text\":[1],\"disabled\":[4],\"custom_class\":[1],\"restrict_input\":[4],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"input_name\":[1],\"autocomplete\":[1],\"formattedValue\":[32]}]]],[\"dda-dropdown\",[[0,\"dda-dropdown\",{\"label\":[1],\"options\":[1],\"selected\":[1025],\"disabled\":[4],\"error\":[1],\"helper_text\":[1],\"type\":[1],\"size\":[1],\"icon_mode\":[4],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"aria_label\":[1],\"arrow_button_name\":[1],\"dropdown_button_name\":[1],\"toggle_button_label\":[1],\"isopen\":[32]},[[0,\"click\",\"onHostClick\"]]]]],[\"dda-horizontal-stepper\",[[0,\"dda-horizontal-stepper\",{\"steps\":[1],\"current_step\":[2],\"custom_class\":[1],\"component_mode\":[1],\"parsedSteps\":[32]},null,{\"steps\":[{\"parseSteps\":0}]}]]],[\"dda-input\",[[0,\"dda-input\",{\"label\":[1],\"placeholder\":[1],\"value\":[1],\"type\":[1],\"helper_text\":[1],\"error_message\":[1],\"validation_type\":[1],\"size\":[1],\"input_status\":[1],\"custom_class\":[1],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"input_name\":[1],\"autocomplete\":[1]}]]],[\"dda-number-field\",[[0,\"dda-number-field\",{\"placeholder\":[1],\"label\":[1],\"value\":[1],\"helper_text\":[1],\"error_message\":[1],\"validation_type\":[1],\"size\":[1],\"input_status\":[1],\"currencies\":[1],\"selected_currency\":[1],\"custom_class\":[1],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"input_name\":[1],\"toggle_button_name\":[1],\"currency_button_name\":[1],\"toggle_button_label\":[1],\"is_focused\":[32],\"isCurrencyDropdownOpen\":[32]}]]],[\"dda-pagination\",[[0,\"dda-pagination\",{\"total_pages\":[1026],\"current_page\":[1026],\"type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"simple_slider_prev_button\":[1],\"simple_slider_next_button\":[1],\"buttons_prev_button\":[1],\"buttons_next_button\":[1],\"text_prev_button\":[1],\"text_next_button\":[1],\"text_pages_prev_button\":[1],\"text_pages_next_button\":[1],\"button_text_prev_button\":[1],\"button_text_next_button\":[1],\"buttons_pages_prev_button\":[1],\"buttons_pages_next_button\":[1],\"previous_button_label\":[1],\"next_button_label\":[1]},null,{\"total_pages\":[{\"validateTotalPages\":0}],\"current_page\":[{\"validateCurrentPage\":0}]}]]],[\"dda-phonefield\",[[0,\"dda-phonefield\",{\"label\":[1],\"placeholder\":[1],\"helper_text\":[1],\"validation_type\":[1],\"error_message\":[1],\"disabled\":[4],\"size\":[1],\"custom_class\":[1],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"button_id\":[1],\"button_aria_label\":[1],\"toggle_button_name\":[1],\"country_select_button_name\":[1],\"toggle_button_label\":[1],\"phone_input_name\":[1],\"autocomplete\":[1],\"country_code\":[32],\"country_flag\":[32],\"phone_number\":[32],\"is_focused\":[32],\"dropdown_open\":[32],\"countries\":[32]}]]],[\"dda-progressbar\",[[0,\"dda-progressbar\",{\"progress\":[2],\"tooltip\":[4],\"tooltip_position\":[1],\"show_percentage_text\":[4],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1]}]]],[\"dda-range-slider\",[[0,\"dda-range-slider\",{\"min\":[2],\"max\":[2],\"step\":[2],\"initial_min\":[2],\"initial_max\":[2],\"size\":[1],\"tooltip_position\":[1],\"custom_class\":[1],\"component_mode\":[1],\"left_input_id\":[1],\"right_input_id\":[1],\"left_aria_label\":[1],\"right_aria_label\":[1],\"left_input_name\":[1],\"right_input_name\":[1],\"min_value\":[32],\"max_value\":[32]}]]],[\"dda-search-input\",[[0,\"dda-search-input\",{\"placeholder\":[1],\"label\":[1],\"size\":[1],\"error_message\":[1],\"show_button\":[4],\"helper_text\":[1],\"input_status\":[1],\"has_error\":[4],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"input_id\":[1],\"aria_label\":[1],\"button_aria_label\":[1],\"search_input_name\":[1],\"close_button_name\":[1],\"clear_button_label\":[1],\"search_button_name\":[1]}]]],[\"dda-segmented-tabs\",[[0,\"dda-segmented-tabs\",{\"items\":[1],\"radius_type\":[1],\"custom_class\":[1],\"component_mode\":[1],\"button_name\":[1],\"aria_label\":[1],\"selected_index\":[2],\"icon_labels\":[1],\"active_index\":[32]},null,{\"items\":[{\"itemsChanged\":0}],\"selected_index\":[{\"selectedIndexChanged\":0}]}]]],[\"dda-select\",[[0,\"dda-select\",{\"label\":[1],\"options\":[1],\"selected\":[1025],\"disabled\":[4],\"error\":[1],\"error_message\":[1],\"helper_text\":[1],\"size\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1],\"button_id\":[1],\"toggle_button_name\":[1],\"option_select_button_name\":[1],\"placeholder\":[1],\"input_name\":[1],\"main_aria_label\":[1],\"validation_type\":[1],\"is_open\":[32]},[[0,\"click\",\"onHostClick\"]]]]],[\"dda-tabs\",[[0,\"dda-tabs\",{\"type\":[1],\"hover_style\":[1],\"border_bottom\":[4],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"aria_label\":[1],\"tab_texts\":[1],\"tab_icons\":[1],\"button_name\":[1],\"active_tab\":[32]}]]],[\"dda-textarea\",[[0,\"dda-textarea\",{\"placeholder\":[1],\"label\":[1],\"value\":[1],\"error_message\":[1],\"validation_type\":[1],\"input_status\":[1],\"helper_text\":[1],\"custom_class\":[1],\"enable_rich_editor\":[4],\"max_characters\":[2],\"component_mode\":[1],\"input_id\":[1],\"aria_label\":[1],\"textarea_name\":[1],\"characterCount\":[32]}]]],[\"dda-toggle\",[[0,\"dda-toggle\",{\"checked\":[4],\"size\":[1],\"custom_class\":[1],\"group_name\":[1],\"input_id\":[1],\"component_mode\":[1],\"aria_label\":[1],\"title_text\":[1],\"supporting\":[1]}]]],[\"dda-ui-card\",[[260,\"dda-ui-card\",{\"type\":[1],\"icon\":[1],\"image\":[1],\"maintitle\":[1],\"subtitle\":[1],\"link\":[1],\"linktext\":[1],\"linkicon\":[1],\"heading_level\":[2]}]]],[\"dda-vertical-stepper\",[[0,\"dda-vertical-stepper\",{\"steps\":[1],\"current_step\":[2],\"current_Step\":[2,\"current_-step\"],\"custom_class\":[1],\"component_mode\":[1],\"parsedSteps\":[32]},null,{\"steps\":[{\"parseSteps\":0}]}]]],[\"dda-banner-card\",[[0,\"dda-banner-card\",{\"banner_card_href\":[1],\"banner_card_url\":[1],\"banner_card_id\":[1],\"image_src\":[1],\"image_alt\":[1],\"banner_card_title\":[1],\"banner_card_description\":[1],\"banner_card_value\":[1],\"banner_card_name\":[1],\"custom_class\":[1],\"component_mode\":[1]}]]],[\"dda-scroll-icon\",[[0,\"dda-scroll-icon\",{\"scroll_icon_size\":[1],\"scroll_icon_color\":[1],\"custom_class\":[1],\"component_mode\":[1]}]]],[\"dda-link-button_2\",[[260,\"dda-link-button\",{\"type\":[1],\"disabled\":[4],\"start_icon\":[1],\"end_icon\":[1],\"aria_label\":[1],\"button_color\":[1],\"size\":[1],\"button_shape\":[1],\"icon_button_shape\":[1],\"gap\":[2],\"custom_class\":[1],\"href\":[1],\"component_mode\":[1],\"button_id\":[1]}],[0,\"dda-radiobutton\",{\"title_text\":[1],\"supporting\":[1],\"group_name\":[1],\"input_id\":[1],\"checked\":[4],\"radio_status\":[1],\"size\":[1],\"variants\":[1],\"custom_class\":[1],\"component_mode\":[1],\"aria_label\":[1]}]]],[\"dda-button\",[[260,\"dda-button\",{\"type\":[1],\"disabled\":[4],\"start_icon\":[1],\"end_icon\":[1],\"aria_label\":[1],\"button_color\":[1],\"size\":[1],\"button_shape\":[1],\"icon_button_shape\":[1],\"gap\":[2],\"custom_class\":[1],\"component_mode\":[1],\"button_id\":[1],\"button_name\":[1],\"clickHandler\":[16]}]]],[\"dda-tooltip\",[[260,\"dda-tooltip\",{\"title_text\":[1],\"description\":[1],\"position\":[1],\"custom_class\":[1],\"component_mode\":[1],\"dismissed\":[32]}]]]]"), options);
 };
 
 export { defineCustomElements };

package/dist/types/components/dda-home-banner/dda-home-banner.d.ts

@@ -18,6 +18,10 @@ export declare class DdaHomeBanner {
     slide_button_label: string;
     /** Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted. */
     slide_status_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`. */
+    show_scroll_icon: boolean;
+    /** Also shows the scroll icon at 992px and below. Default: `false`. */
+    show_scroll_icon_mobile: boolean;
     currentSlide: number;
     slides: HTMLElement[];
     isPaused: boolean;

package/dist/types/components/dda-home-banner/dda-home-banner.stories.d.ts

@@ -34,6 +34,14 @@ declare const _default: {
             control: string;
             description: string;
         };
+        show_scroll_icon: {
+            control: string;
+            description: string;
+        };
+        show_scroll_icon_mobile: {
+            control: string;
+            description: string;
+        };
     };
     parameters: {
         docs: {

package/dist/types/components/dda-scroll-icon/dda-scroll-icon.d.ts

@@ -0,0 +1,11 @@
+export declare class DdaScrollIcon {
+    /** Size: `sm` (16.5 × 24px) or `lg` (40 × 60px). Default: `sm`. */
+    scroll_icon_size: 'sm' | 'lg';
+    /** Colour: `white` or `black`. Default: `white`. */
+    scroll_icon_color: 'white' | 'black';
+    /** Extra CSS classes on the icon. */
+    custom_class: string;
+    /** Theme override class, e.g. `light-mode`. */
+    component_mode: string;
+    render(): any;
+}

package/dist/types/components/dda-scroll-icon/dda-scroll-icon.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    component: string;
+    argTypes: {
+        scroll_icon_size: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        scroll_icon_color: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const LargeBlack: any;

package/dist/types/components/dda-select/dda-select.d.ts

@@ -1,10 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/** One option. 5.x string options are read as `{ id: text, text }`. */
+export interface SelectOption {
+    id: string | number;
+    text: string;
+}
+/** Internal: a parsed option plus, for an object option, the original entry (`source`), so
+ * `selectChanged` can emit it with its extra fields, as 3.x did. Never sent on `selectionChange`,
+ * and not part of the public `SelectOption` type. */
+interface ParsedOption extends SelectOption {
+    source?: SelectOption;
+}
 export declare class Ddaselect {
     /** Label shown above the field. The trigger button is named by the label and its current text. */
     label: string;
-    /** Options as a JSON array string, e.g. `'["Dubai","Abu Dhabi","Sharjah"]'`. Invalid JSON shows "No options available". */
-    options: 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. */
+    /** 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 | Array<string | SelectOption>;
+    /** 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;
     /** Disables the select: the list does not open and options cannot be picked. */
     disabled: boolean;
@@ -29,9 +40,28 @@ export declare class Ddaselect {
     toggle_button_name: string;
     /** `name` of each option button in the list. */
     option_select_button_name: string;
-    /** Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new option. */
+    /** Text in the trigger when nothing is selected. Default: `Select an option`. */
+    placeholder: string;
+    /** `name` sent in `selectBlurred`. Falls back to `button_id`. */
+    input_name: 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;
+    /** 3.x name of `error` (the validation state class). `error` wins when both are set. */
+    validation_type: string;
+    /** 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. */
     selectionChange: EventEmitter<{
         value: string;
+        id: string | number;
+        text: string;
+    }>;
+    /** 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. */
+    selectChanged: EventEmitter<SelectOption>;
+    /** 3.x event: emitted when the trigger loses focus, with `{ name, value }` — `input_name` (or `button_id`) and the selected text. */
+    selectBlurred: EventEmitter<{
+        name: string;
+        value: string;
     }>;
     el: HTMLElement;
     private pendingFocusIndex;
@@ -43,15 +73,20 @@ export declare class Ddaselect {
     private get errorId();
     private get describedBy();
     private get parsedOptions();
+    private findSelected;
+    private get selectedOption();
+    private get triggerLabel();
     private focusOption;
     private currentFocusedOptionIndex;
     private initialOptionIndex;
     toggleSelect(): void;
     private closeAndReturnFocus;
     onHostClick(event: MouseEvent): void;
-    selectOption(option: string): void;
+    selectOption(option: ParsedOption): void;
+    private onTriggerBlur;
     private onTriggerKeyDown;
     private onOptionKeyDown;
     componentDidRender(): void;
     render(): any;
 }
+export {};

package/dist/types/components/dda-select/dda-select.stories.d.ts

@@ -77,6 +77,30 @@ declare const _default: {
             };
             description: string;
         };
+        placeholder: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        input_name: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        main_aria_label: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        validation_type: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
     parameters: {
         docs: {
@@ -91,3 +115,4 @@ export declare const Default: any;
 export declare const Small: any;
 export declare const WithError: any;
 export declare const Disabled: any;
+export declare const IdAndText: any;

package/dist/types/components.d.ts

@@ -8,10 +8,12 @@ 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 {
@@ -1014,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'
@@ -1589,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.
@@ -1739,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;
         /**
@@ -1763,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 {
         /**
@@ -2565,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: {
@@ -2589,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;
@@ -2696,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;
@@ -3773,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'
@@ -4356,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.
@@ -4510,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>;
         /**
-          * 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;
         /**
@@ -4538,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 {
         /**
@@ -5313,6 +5426,8 @@ 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[];
@@ -5460,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;
@@ -5492,7 +5613,7 @@ declare namespace LocalJSX {
     }
     interface DdaSelectAttributes {
         "label": string;
-        "options": string;
+        "options": string | Array<string | SelectOption>;
         "selected": string;
         "disabled": boolean;
         "error": string;
@@ -5505,6 +5626,10 @@ 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;
@@ -5666,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] };
@@ -5708,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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubai-design-system/components-js",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "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",