@dubai-design-system/components-js 5.0.3 → 5.1.0

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-Cq6A4mXg.js';
-export { s as setNonce } from './index-Cq6A4mXg.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-o6021Dsk.js';
+export { s as setNonce } from './index-o6021Dsk.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\"],\"secondLogoSrc\":[1,\"second-logo-src\"],\"secondLogoWhiteSrc\":[1,\"second-logo-white-src\"],\"secondLogoAlt\":[1,\"second-logo-alt\"],\"loginLink\":[1,\"login-link\"],\"sideMenuItems\":[1,\"side-menu-items\"],\"quickLinks\":[1,\"quick-links\"],\"readSpeakerLink\":[1,\"read-speaker-link\"],\"searchText\":[1,\"search-text\"],\"loginIcon\":[1,\"login-icon\"],\"loginText\":[1,\"login-text\"],\"language_text\":[1],\"hamburger_menu_button_name\":[1],\"accessibility_button_name\":[1],\"search_button_name\":[1],\"search_input_name\":[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],\"openMenus\":[32],\"activeMenuIndex\":[32]}]]],[\"dda-footer\",[[0,\"dda-footer\",{\"footerTitle\":[1,\"footer-title\"],\"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\"],\"footerSections\":[1,\"footer-sections\"],\"socialIcons\":[1,\"social-icons\"]}]]],[\"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\"],\"accessibilityIconHref\":[1,\"accessibility-icon-href\"],\"accessibilityIconSrc\":[1,\"accessibility-icon-src\"],\"accessibilityIconAlt\":[1,\"accessibility-icon-alt\"],\"accessibilityIconTooltip\":[1,\"accessibility-icon-tooltip\"],\"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\"],\"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\"],\"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\"],\"chatIconHref\":[1,\"chat-icon-href\"],\"chatIconSrc\":[1,\"chat-icon-src\"],\"chatIconAlt\":[1,\"chat-icon-alt\"],\"chatIconTooltip\":[1,\"chat-icon-tooltip\"],\"hideMiddleSection\":[4,\"hide-middle-section\"],\"isHidden\":[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]}]]],[\"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\":[1],\"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],\"parsedSlides\":[32]}]]],[\"dda-breadcrumb\",[[0,\"dda-breadcrumb\",{\"design\":[1],\"separator\":[1],\"custom_class\":[1],\"component_mode\":[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],\"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\":[1],\"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\":[1],\"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],\"isopen\":[32]}]]],[\"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]}]]],[\"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]}]]],[\"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],\"is_focused\":[32],\"isCurrencyDropdownOpen\":[32]}]]],[\"dda-pagination\",[[0,\"dda-pagination\",{\"total_pages\":[2],\"current_page\":[2],\"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]},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],\"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],\"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],\"active_index\":[32]}]]],[\"dda-select\",[[0,\"dda-select\",{\"label\":[1],\"options\":[1],\"selected\":[1],\"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]}]]],[\"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]}]]],[\"dda-ui-card\",[[260,\"dda-ui-card\",{\"type\":[1],\"icon\":[1],\"image\":[1],\"maintitle\":[1],\"subtitle\":[1],\"link\":[1],\"linktext\":[1],\"linkicon\":[1]}]]],[\"dda-vertical-stepper\",[[0,\"dda-vertical-stepper\",{\"steps\":[1],\"current_Step\":[2,\"current_-step\"],\"custom_class\":[1],\"component_mode\":[1],\"parsedSteps\":[32]}]]],[\"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\"],\"quickLinks\":[1,\"quick-links\"],\"readSpeakerLink\":[1,\"read-speaker-link\"],\"searchText\":[1,\"search-text\"],\"loginIcon\":[1,\"login-icon\"],\"loginText\":[1,\"login-text\"],\"language_text\":[1],\"language_lang\":[1],\"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]},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-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\"],\"accessibilityIconHref\":[1,\"accessibility-icon-href\"],\"accessibilityIconSrc\":[1,\"accessibility-icon-src\"],\"accessibilityIconAlt\":[1,\"accessibility-icon-alt\"],\"accessibilityIconTooltip\":[1,\"accessibility-icon-tooltip\"],\"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\"],\"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\"],\"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\"],\"chatIconHref\":[1,\"chat-icon-href\"],\"chatIconSrc\":[1,\"chat-icon-src\"],\"chatIconAlt\":[1,\"chat-icon-alt\"],\"chatIconTooltip\":[1,\"chat-icon-tooltip\"],\"aria_label\":[1],\"hideMiddleSection\":[4,\"hide-middle-section\"],\"isHidden\":[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]}]]],[\"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-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/esm/unique-id-B-I003EB.js

@@ -0,0 +1,12 @@
+let counter = 0;
+/**
+ * Returns an id that is unique on the page, for elements such as a label's input when the
+ * consumer did not pass one. Call it once per component instance (as a field initializer),
+ * so the id stays stable across renders.
+ */
+function uniqueId(prefix) {
+    counter += 1;
+    return `${prefix}-${counter}`;
+}
+
+export { uniqueId as u };

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

@@ -1,9 +1,15 @@
 export declare class DdaAccordion {
+    /** Container style: `bg-border` (filled background with border) or `no-border` (no background or border). */
     design: 'bg-border' | 'no-border';
+    /** Text shown in the header button that opens and closes the panel. */
     header_text: string;
+    /** Paragraph text shown in the panel when it is open. Slotted content follows it. */
     body_description: string;
+    /** Extra CSS classes added to the accordion container. */
     custom_class?: string;
+    /** Theme override class for the container, e.g. `light-mode`. */
     component_mode?: string;
+    /** Material Symbols icon name shown before the header text, e.g. `info`. */
     accordion_icon: string;
     isOpen: boolean;
     toggleAccordion(): void;

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

@@ -1,23 +1,44 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaAlert {
+    /** Style: `primary` uses a tinted background and border in the variation color; `secondary` uses a neutral surface and border. */
     type: 'primary' | 'secondary';
+    /** Color and screen reader urgency: `info`, `warning`, `error` or `success`. `error` uses `role="alert"`; the others use `role="status"`. */
     variation: 'info' | 'warning' | 'error' | 'success';
+    /** Heading text of the alert. */
     title_text: string;
+    /** Body text shown below the heading. */
     description: string;
+    /** Not used by the component; nothing is rendered from this value. */
     button_text: string;
+    /** Extra CSS classes added to the alert container. */
     custom_class?: string;
+    /** Theme override class for the alert, e.g. `light-mode`. */
     component_mode?: string;
+    /** Not used by the component; it is not applied to any element. */
     component_id?: string;
+    /** `href` of the first action link. */
     first_link?: string;
+    /** `href` of the second action link. */
     second_link?: string;
+    /** Label of the first action link. The link shows only when this is set. */
     first_button?: string;
+    /** Label of the second action link. The link shows only when this is set. */
     second_button?: string;
+    /** `name` of the close button. */
     button_name?: string;
+    /** Click handler for the close button, set as a JavaScript property. The alert does not hide itself. */
     clickHandler?: (event: MouseEvent) => void;
+    /** Accessible name of the close button, read by screen readers instead of the icon ligature. */
+    close_button_label: string;
+    /** Heading level (1–6) of the title; pick the level that fits the page outline. */
+    heading_level: number;
+    /** Fires when the first action link is clicked. No detail. */
     firstClick?: EventEmitter<void>;
+    /** Fires when the second action link is clicked. No detail. */
     secondClick?: EventEmitter<void>;
     private firstClickHandler;
     private secondClickHandler;
     private get role();
+    private get headingTag();
     render(): any;
 }

package/dist/types/components/dda-attach-file/dda-attach-file.d.ts

@@ -1,23 +1,40 @@
 export declare class DdaAttachFile {
+    /** Label text shown above the field. Linked to the file input through `input_id` (or a generated id). */
     label: string;
+    /** Helper text shown below the field. Linked by `aria-describedby`. */
     helper_text: string;
+    /** Error text shown below the field. Also sets `aria-invalid="true"` on the file input. */
     error_message: string;
+    /** Size: `default` or `small`. */
     size?: string;
+    /** Validation state: `error` applies the error colors. */
     validation_type?: string;
+    /** Adds the class `dda-input-<value>`. `disabled` gives the disabled look only; it does not disable the file input. */
     input_type?: string;
     file: File | null;
+    /** Extra CSS classes added to the field container. */
     custom_class?: string;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** Accessible name of the file input. Not rendered when empty. */
     aria_label?: string;
+    /** Accessible name of the remove button shown after a file is chosen, e.g. `Remove file`. */
     button_aria_label?: string;
+    /** `id` of the file input. Also used to link the label, helper text and error message. Optional: an id is generated when it is not set. */
     input_id: string;
+    /** `id` of the remove button shown after a file is chosen. */
     button_id: string;
+    /** `name` of the remove button shown after a file is chosen. */
     button_name?: string;
+    /** `name` of the file input. */
     input_name?: string;
     private fileIcons;
     handleFileInput(event: any): void;
     removeFile(): void;
     getFileIcon(fileName: string): any;
+    private fileInput?;
+    private readonly fallbackId;
+    private get inputId();
     private get helperId();
     private get errorId();
     private get describedBy();

package/dist/types/components/dda-attach-file/dda-attach-file.stories.d.ts

@@ -71,10 +71,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        onchange: {
-            control: string;
-            description: string;
-        };
         button_name: {
             control: string;
             description: string;

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

@@ -1,20 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaAvatar {
+    /** Content: `photo` shows the `src` image, `icon` shows a smiley icon, `text` shows `text` as initials. */
     type: 'photo' | 'icon' | 'text';
+    /** Size: `xs` (24px), `sm` (32px), `md` (40px), `lg` (48px), `xl` (56px) or `xxl` (64px). */
     size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** Badge: `default` (none), `status` (green dot), `verified` (check badge), `notification` (count from `notification_number`). `story` has no style yet. */
     design: 'default' | 'status' | 'verified' | 'story' | 'notification';
+    /** Shape: `circle` or `square` (rounded corners). */
     rounded: 'square' | 'circle';
+    /** Image URL shown when `type` is `photo`. */
     src: string;
+    /** CSS class of the icon font used when `type` is `icon`, e.g. `material-icons`. The icon glyph is always `sentiment_satisfied`. */
     icon: string;
+    /** Initials shown when `type` is `text`. */
     text: string;
+    /** Count shown in the badge when `design` is `notification`. Hidden at sizes `xs` and `sm`. */
     notification_number: number;
+    /** Extra CSS classes added to the avatar container. */
     custom_class?: string;
     isOpen: boolean;
+    /** The selected option. Matches one entry of `options`; updated when the user picks an option. Mutable: the component assigns it. */
     selected: string;
+    /** Dropdown options as a JSON array of strings, e.g. `["Profile","Sign out"]`. When set, the avatar becomes a button that opens the list. */
     options: string;
+    /** Theme override class for the avatar, e.g. `light-mode`. */
     component_mode?: string;
+    /** Accessible name of the avatar button and of each option button. The avatar button falls back to `Avatar options`. */
     aria_label: string;
+    /** `id` applied to each option button in the dropdown. */
     button_id?: string;
+    /** `name` of each option button in the dropdown. Also added as a CSS class on the avatar container. */
     button_name?: string;
+    /** Emitted every time the user picks an option from the dropdown, also when it is already selected. `detail.value` is the option. */
+    optionSelect: EventEmitter<{
+        value: string;
+    }>;
     toggleDropdown(): void;
     selectOption(option: string): void;
     private get parsedOptions();

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

@@ -1,7 +1,12 @@
 export declare class DdaBanner {
+    /** Slide images. JSON array of `{ image, title }`; `image` is the image URL and `title` its alternative text. Read once, when the component loads. */
     slides: string;
+    /** CSS width of each slide image, e.g. `360px`. */
     slider_width: string;
+    /** CSS height of each slide image, e.g. `220px`. */
     slider_height: string;
+    /** Accessible name of the scrollable slide region that keyboard users focus to scroll. */
+    aria_label: string;
     parsedSlides: {
         image: string;
         title: string;

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

@@ -1,14 +1,20 @@
+export interface BreadcrumbItem {
+    text: string;
+    icon?: string;
+    url?: string;
+}
 export declare class DdaBreadcrumb {
+    /** What each item shows: `text` (label only), `icon-text` (icon and label) or `icon` (icon only). */
     design: 'text' | 'icon-text' | 'icon';
+    /** Material Symbols icon shown between items: `chevron_right` or `pen_size_2` (a slash). */
     separator: 'chevron_right' | 'pen_size_2';
+    /** Extra CSS classes added to the inner `<nav>`. */
     custom_class?: string;
+    /** Theme override class on the wrapper, e.g. `light-mode`. */
     component_mode?: string;
+    /** 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. */
+    breadcrumbs?: string | BreadcrumbItem[];
     el: HTMLElement;
-    breadcrumbs: {
-        text: string;
-        icon: string;
-        url: string;
-    }[];
-    componentWillLoad(): void;
+    private parseBreadcrumbs;
     render(): any;
 }

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

@@ -1,22 +1,33 @@
 export declare class DdaButton {
-    /** Type of button, e.g., "button", "submit" */
+    /** Native button type: `button`, `submit` or `reset`. */
     type: string;
-    /** Disable the button */
+    /** Disables the button. */
     disabled: boolean;
-    /** Icon class for the starting icon */
+    /** Material Symbols icon name shown before the label, e.g. `arrow_back`. */
     start_icon: string;
+    /** Material Symbols icon name shown after the label, e.g. `arrow_forward`. */
     end_icon: string;
+    /** Accessible name. Required when the button shows only an icon. */
     aria_label?: string;
+    /** Color variant, e.g. `default-primary`, `default-secondary`, `error-primary`, `onsurface-link`. */
     button_color: string;
+    /** Size: `sm`, `md`, `lg` or `xl`. */
     size?: string;
+    /** Shape: `default` or `circle`. */
     button_shape?: string;
+    /** Shape of an icon-only button: `default` or `circle`. */
     icon_button_shape?: string;
+    /** Gap between icon and label, as a spacing step: 1–6, 8, 10, 12 or 16. */
     gap?: number;
+    /** Extra CSS classes added to the inner `<button>`. */
     custom_class?: string;
+    /** Theme override class for the button, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the inner `<button>`. */
     button_id: string;
+    /** `name` of the inner `<button>`, submitted with its form. */
     button_name?: string;
-    /** Function to be called on button click */
+    /** Click handler, set as a JavaScript property. You can also listen for the native `click` event. */
     clickHandler?: (event: MouseEvent) => void;
     render(): any;
 }

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

@@ -1,14 +1,25 @@
 export declare class DdaCheckbox {
+    /** Label shown next to the checkbox. */
     title_text: string;
+    /** Secondary text shown under the title. */
     supporting?: string;
+    /** `name` of the inner checkbox input. */
     group_name?: string;
+    /** `id` of the inner checkbox input. The label points to it, so set a unique value to make the label clickable. */
     input_id?: string;
+    /** Checked state of the inner input. Read the current state from the input or its `change` event. */
     checked: boolean;
+    /** Status: `disabled` shows the disabled style and blocks pointer clicks. */
     checkbox_status?: string;
+    /** Size: `sm`, `md` or `lg`. */
     size?: string;
+    /** Box shape: `square` or `rounded`. */
     style_type?: string;
+    /** Extra CSS classes added to the checkbox container. */
     custom_class?: string;
+    /** Theme override class for the checkbox, e.g. `light-mode`. */
     component_mode?: string;
+    /** Accessible name of the inner checkbox input. */
     aria_label?: string;
     render(): any;
 }

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

@@ -14,10 +14,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        labelfor: {
-            control: string;
-            description: string;
-        };
         input_id: {
             control: string;
             description: string;
@@ -62,12 +58,6 @@ declare const _default: {
             };
             description: string;
         };
-        onclick: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
     };
     parameters: {
         docs: {

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

@@ -1,11 +1,21 @@
 export declare class DdaChip {
+    /** Color: `grey`, `primary`, `green`, `yellow`, `red` or `purple`. Other values, including the default, use the base primary style. */
     bg_color: string;
+    /** Corner radius: `sm`, `md`, `lg` or `circle`. */
     rounded?: string;
+    /** Material Symbols icon name shown before the label, e.g. `check_circle`. */
     icon: string;
+    /** Shows a close button after the label. Its accessible name comes from `close_button_label`. */
     show_close_icon: boolean;
+    /** Accessible name of the icon-only close button. */
+    close_button_label: string;
+    /** Height: `sm` (24px), `md` (26px) or `lg` (32px). */
     size?: string;
+    /** Extra CSS classes added to the chip container. */
     custom_class?: string;
+    /** Theme override class for the chip, e.g. `light-mode`. */
     component_mode?: string;
+    /** Click handler for the close button, set as a JavaScript property. The chip does not remove itself. */
     clickHandler?: (event: MouseEvent) => void;
     render(): any;
 }

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

@@ -48,12 +48,6 @@ declare const _default: {
             options: string[];
             description: string;
         };
-        onclick: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
     };
     parameters: {
         docs: {

package/dist/types/components/dda-credit-card/dda-credit-card.d.ts

@@ -1,10 +1,17 @@
 export declare class DdaCreditCard {
+    /** Balance text shown under the fixed "Current Balance" label, e.g. `AED 5,750.20`. */
     balance: string;
+    /** Card holder name. */
     name: string;
+    /** Card number. Only the last four characters are shown, after `****`. When not set, only `****` is shown. */
     card_number: string;
+    /** URL of the card type image (e.g. a card brand logo) shown at the bottom end of the card. When not set, no image is rendered. */
     card_type: string;
+    /** Background design: `default`, `green` or `dark`. */
     design: string;
+    /** Extra CSS classes added to the card container. */
     custom_class?: string;
+    /** Theme override class for the card, e.g. `light-mode`. */
     component_mode?: string;
     render(): any;
 }

package/dist/types/components/dda-creditcard-field/dda-creditcard-field.d.ts

@@ -1,22 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaCreditCardField {
+    /** Placeholder text of the input, e.g. `0000 - 0000 - 0000 - 0000`. */
     placeholder: string;
+    /** Label text shown above the input. Linked to the input through `input_id` (or a generated id). */
     label: string;
+    /** Card number. Shown as groups of four digits separated by ` - `; the component updates it as the user types. Mutable: the component assigns it. */
     value: string;
+    /** URL of an image shown at the start of the input, e.g. a card brand logo. */
     card_icon: string;
+    /** Error text shown below the input. Also sets `aria-invalid="true"` on the input. */
     error_message: string;
+    /** Validation state: `error` applies the error colors. */
     validation_type?: string;
+    /** Size: `default` or `small`. */
     size?: string;
+    /** Adds the class `dda-input-<value>`. `disabled` gives only the disabled look; use `disabled` to disable the input. */
     input_type?: string;
+    /** Helper text shown below the input. Linked by `aria-describedby`. */
     helper_text: string;
+    /** Disables the input and applies the disabled look. */
     disabled: boolean;
+    /** Extra CSS classes added to the field container. */
     custom_class?: string;
+    /** Sets the input `maxlength`: 25 characters when `false` (16 digits with separators), 100 when `true`. */
     restrict_input: boolean;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the inner `<input>`. Also used to link the label, helper text and error message. Optional: an id is generated when it is not set. */
     input_id: string;
+    /** Accessible name of the input. Use it when there is no visible `label`. */
     aria_label?: string;
+    /** `name` of the inner `<input>`, submitted with its form. */
     input_name?: string;
+    /** `autocomplete` token of the input. Defaults to `cc-number`. */
     autocomplete: string;
+    /** Emitted when user input changes `value`, after the component removes characters other than digits and `-`. `detail.value` is the new `value`. */
+    valueChange: EventEmitter<{
+        value: string;
+    }>;
     formattedValue: string;
+    private readonly fallbackId;
+    private get inputId();
     private get helperId();
     private get errorId();
     private get describedBy();

package/dist/types/components/dda-creditcard-field/dda-creditcard-field.stories.d.ts

@@ -80,12 +80,6 @@ declare const _default: {
             };
             description: string;
         };
-        onchange: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
         input_name: {
             control: {
                 type: string;

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

@@ -1,22 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaDropdown {
+    /** Label shown above the dropdown. The dropdown button is named by the label and its current text. */
     label: string;
+    /** Options as a JSON array string, e.g. `'["Edit","Download","Delete"]'`. Invalid JSON shows "No options available". */
     options: string;
+    /** The selected option. Must match an entry in `options`. The button shows "Select an option" when it is empty. Updated when the user picks an option. Mutable: the component assigns it. */
     selected: string;
+    /** Disables the dropdown: the list does not open and options cannot be picked. */
     disabled: boolean;
+    /** Error text shown under the dropdown. */
     error: string;
+    /** Helper text shown under the dropdown. */
     helper_text: string;
+    /** Button background: `bg-white` (field style) or `bg-transparent` (no border, background or padding). */
     type: 'bg-transparent' | 'bg-white';
+    /** Size: `medium` or `small`. */
     size: 'small' | 'medium';
+    /** Shows only the three-dots icon, without the selected text and arrow. */
     icon_mode: boolean;
+    /** Extra CSS classes added to the dropdown container. */
     custom_class?: string;
+    /** Theme override class for the dropdown, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the dropdown button. The label id is built from it. When it is not set, the component generates a unique id. */
     button_id: string;
+    /** Accessible name of the dropdown button. Set it when `icon_mode` is on. */
     aria_label?: string;
+    /** `name` of the dropdown button that opens the list. */
     arrow_button_name?: string;
+    /** `name` of each option button in the list. */
     dropdown_button_name?: string;
+    /** Accessible name of the dropdown button in `icon_mode` when `aria_label` and `label` are not set. */
+    toggle_button_label?: string;
+    /** Emitted every time the user picks an option, also when it is already selected, so the dropdown works as an action menu. `detail.value` is the option. */
+    optionSelect: EventEmitter<{
+        value: string;
+    }>;
     isopen: boolean;
+    private readonly fallbackId;
+    private buttonEl?;
     private get parsedOptions();
     toggleDropdown(): void;
+    onHostClick(event: MouseEvent): void;
     selectOption(option: string): void;
     render(): any;
 }

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

@@ -16,10 +16,6 @@ declare const _default: {
             options: string[];
             description: string;
         };
-        placeholder: {
-            control: string;
-            description: string;
-        };
         label: {
             control: string;
             description: string;

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

@@ -1,12 +1,25 @@
 export declare class DdaFooter {
+    /** Heading of the call-to-action area at the top of the footer. */
     footerTitle: string;
+    /** Heading level (1 to 6) of `footerTitle`, to fit the page's heading order. Default: `4`. */
+    heading_level: number;
+    /** Paragraph under `footerTitle`. */
     description: string;
+    /** Label of the primary (Sign up) button. The button has no link or action. */
     signUpButtonText: string;
+    /** Label of the tertiary (Login) button. The button has no link or action. */
     loginButtonText: string;
+    /** Image URL of the footer logo. */
     logoSrc: string;
+    /** Alternative text for the footer logo. */
     logoAlt: string;
+    /** Copyright text in the bottom row. */
     copyrightText: string;
+    /** Short text shown under the footer logo. Nothing is shown when it is not set. */
+    logoDescription: string;
+    /** Link columns. JSON array of `{ title, links: [{ label, href }] }`. */
     footerSections: string;
+    /** Social links in the bottom row. JSON array of `{ href, src, alt }`, where `src` is an image URL. */
     socialIcons: string;
     private parseJsonArray;
     render(): any;