@ui5/webcomponents-fiori 2.23.0-rc.2 → 2.24.0-rc.0

package/dist/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.js

@@ -1,4 +1,10 @@
 export default `:host{
+    --_ui5_banner_background: var(--sapShell_HeroBanner_Background);
+    --_ui5_banner_text_color: var(--sapShell_HeroBanner_TextColor);
+    --_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);
+    --_ui5_banner_border: .0625rem solid var(--sapTile_BorderColor);
+    --_ui5_banner_box_shadow: var(--sapContent_Shadow0);
+    --_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);
     --_ui5_fcl_solid_bg: var(--sapBackgroundColor);
     --_ui5_fcl_column_border: solid .0625rem var(--sapGroup_ContentBorderColor);
     --_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #fff);

package/dist/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"parameters-bundle.css.js","sourceRoot":"","sources":["../../../../src/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.ts"],"names":[],"mappings":"AAAA,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNd,CAAA","sourcesContent":["export default `:host{\n    --_ui5_fcl_solid_bg: var(--sapBackgroundColor);\n    --_ui5_fcl_column_border: solid .0625rem var(--sapGroup_ContentBorderColor);\n    --_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #fff);\n    --_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #fff);\n    --sapIllus_BrandColorPrimary: var(--sapContent_Illustrative_Color1);\n    --sapIllus_BrandColorSecondary: var(--sapContent_Illustrative_Color2);\n    --sapIllus_StrokeDetailColor: var(--sapContent_Illustrative_Color4);\n    --sapIllus_Layering1: var(--sapContent_Illustrative_Color5);\n    --sapIllus_Layering2: var(--sapContent_Illustrative_Color6);\n    --sapIllus_BackgroundColor: var(--sapContent_Illustrative_Color7);\n    --sapIllus_ObjectFillColor: var(--sapContent_Illustrative_Color8);\n    --sapIllus_AccentColor: var(--sapContent_Illustrative_Color3);\n    --sapIllus_NoColor: none;\n    --sapIllus_PatternShadow: url(#sapIllus_PatternShadow);\n    --sapIllus_PatternHighlight: url(#sapIllus_PatternHighlight);\n    --_ui5_media_gallery_overflow_btn_background: var(--sapButton_Background);\n    --_ui5_media_gallery_overflow_btn_color: var(--sapButton_TextColor);\n    --_ui5_media_gallery_overflow_btn_border: 1px solid var(--sapButton_BorderColor);\n    --_ui5_media_gallery_thumbnail_border: 1px solid var(--sapContent_ForegroundColor);\n    --_ui5_media_gallery_thumbnail_selected_border: 2px solid var(--sapSelectedColor);\n    --_ui5_media_gallery_thumbnail_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);\n    --_ui5_media_gallery_item_overlay_box_shadow: inset 0px 0px 80px rgba(0, 0, 0, .2);\n    --_ui5_page_list_bg: var(--sapGroup_ContentBackground);\n    --_ui5_page_transparent_bg: var(--sapBackgroundColor);\n    --_ui5_product_switch_item_width: 11.25rem;\n    --_ui5_product_switch_item_height: 7rem;\n    --_ui5_product_switch_item_active_outline_color: var(--sapContent_ContrastFocusColor);\n    --_ui5_product_switch_item_outline_offset: -.25rem;\n    --_ui5_product_switch_item_border: 1px solid var(--sapField_BorderColor);\n    --_ui5_shellbar_root_height: 2.75rem;\n    --_ui5_shellbar_button_border: none;\n    --_ui5_shellbar_button_border_radius: .25rem;\n    --_ui5_shellbar_button_focused_border: .125rem dotted var(--sapContent_FocusColor);\n    --_ui5_shellbar_button_badge_border: 1px solid var(--sapGroup_ContentBorderColor);\n    --_ui5_shellbar_outline_offset: -.0625rem;\n    --_ui5_shellbar_search_field_outline_focused: .0625rem dotted var(--sapContent_ContrastFocusColor);\n    --_ui5_shellbar_search_field_background_hover: var(--sapShellColor);\n    --_ui5_shellbar_search_field_box_shadow_hover: none;\n    --_ui5_shellbar_menu_button_title_font_size: .75rem;\n    --_ui5_side_navigation_width: 16rem;\n    --_ui5_side_navigation_collapsed_width: 3rem;\n    --_ui5_side_navigation_navigation_separator_margin: .25rem .5rem .25rem .5rem;\n    --_ui5_side_navigation_navigation_separator_background_color: var(--sapList_GroupHeaderBorderColor);\n    --_ui5_side_navigation_navigation_separator_radius: unset;\n    --_ui5_side_navigation_navigation_separator_height: calc(2 * var(--sapList_BorderWidth));\n    --_ui5_side_navigation_triangle_color: var(--sapContent_IconColor);\n    --_ui5_side_navigation_border_right: 1px solid var(--sapGroup_ContentBorderColor);\n    --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);\n    --_ui5_side_navigation_triangle_display: block;\n    --_ui5_side_navigation_icon_color: var(--sapContent_IconColor);\n    --_ui5_side_navigation_expand_icon_color: var(--sapContent_IconColor);\n    --_ui5_side_navigation_expand_icon_width: 2rem;\n    --_ui5_side_navigation_hover_border_style_color: none;\n    --_ui5_side_navigation_hover_border_width: 0;\n    --_ui5_side_navigation_group_border_style_color: solid var(--sapList_BorderColor);\n    --_ui5_side_navigation_group_border_width: 0 0 .0625rem 0;\n    --_ui5_side_navigation_item_border_style_color: none;\n    --_ui5_side_navigation_item_border_width: 0;\n    --_ui5_side_navigation_item_height: var(--_ui5-compact-size, 2rem)  var(--_ui5-cozy-size, 2.5rem);\n    --_ui5_side_navigation_item_margin: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, .875rem);\n    --_ui5_side_navigation_item_expand_arrow_padding: var(--_ui5-compact-size, .3125rem)  var(--_ui5-cozy-size, .6875rem);\n    --_ui5_side_navigation_item_border_radius: 0;\n    --_ui5_side_navigation_item_bottom_margin: 0;\n    --_ui5_side_navigation_item_padding_start_in_popup: var(--_ui5_side_navigation_group_icon_width);\n    --_ui5_side_navigation_item_padding_start_in_overflow_popup: .75rem;\n    --_ui5_side_navigation_item_transition: none;\n    --_ui5_side_navigation_item_padding_left: .5rem;\n    --_ui5_side_navigation_item_focus_border_offset: 1px;\n    --_ui5_side_navigation_item_focus_border_radius: var(--_ui5_side_navigation_item_border_radius);\n    --_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 100% .0625rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor);\n    --_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / 100% .0625rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_Hover_SelectionBackground);\n    --_ui5_side_navigation_selected_item_border_color: var(--sapList_SelectionBorderColor);\n    --_ui5_side_navigation_selected_border_style_color: solid var(--_ui5_side_navigation_selected_item_border_color);\n    --_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color);\n    --_ui5_side_navigation_selected_border_width: 0 0 .0625rem 0;\n    --_ui5_side_navigation_group_expanded_border_width: 0;\n    --_ui5_side_navigation_group_icon_width: var(--_ui5_side_navigation_collapsed_width);\n    --_ui5_side_navigation_icon_padding_inline_end: .4375rem;\n    --_ui5_side_navigation_item_font_family: var(--sapFontFamily);\n    --_ui5_side_navigation_parent_item_font_family: var(--sapFontSemiboldDuplexFamily);\n    --_ui5_side_navigation_group_padding: .5rem;\n    --_ui5_side_navigation_padding-flexible: 0;\n    --_ui5_side_navigation_padding-fixed: 0;\n    --_ui5_side_navigation_popup_padding: 0;\n    --_ui5_side_navigation_popup_title_line_height: normal;\n    --_ui5_side_navigation_first_fixed_item_margin_top: 0;\n    --_ui5_side_navigation_item_expand_icon_visibility: none;\n    --_ui5_side_navigation_item_collapsed_hover_focus_width: auto;\n    --_ui5_side_navigation_item_collapsed_hover_focus_display: none;\n    --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0;\n    --_ui5_side_navigation_action_item_collapsed_padding: 0;\n    --_ui5_side_navigation_item_collapsed_padding: 0;\n    --_ui5_side_navigation_action_item_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);\n    --_ui5_side_navigation_action_item_border_active: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);\n    --_ui5_side_navigation_item_expand_icon_right: -.5rem;\n    --_ui5_side_navigation_item_expand_icon_hover_left: auto;\n    --_ui5_side_navigation_item_expand_icon_hover_right: 0;\n    --_ui5_side_navigation_active_text_color: var(--sapList_Active_TextColor);\n    --_ui5_TimelineItem_arrow_size: 1.625rem;\n    --_ui5_TimelineItem_bubble_border_width: .0625rem;\n    --_ui5_TimelineItem_bubble_border_style: dotted;\n    --_ui5_TimelineItem_bubble_border_radius: .25rem;\n    --_ui5_TimelineItem_bubble_border_color: var(--sapList_BorderColor);\n    --_ui5_TimelineItem_bubble_border_top: -.125rem;\n    --_ui5_TimelineItem_bubble_border_right: -.125rem;\n    --_ui5_TimelineItem_bubble_border_bottom: -.125rem;\n    --_ui5_TimelineItem_bubble_border_left: -.625rem;\n    --_ui5_TimelineItem_bubble_rtl_left_offset: -.1875rem;\n    --_ui5_TimelineItem_bubble_rtl_right_offset: -.6875rem;\n    --_ui5_TimelineItem_bubble_focus_border_radius: 0;\n    --_ui5_TimelineItem_horizontal_bubble_focus_top_offset: -.625rem;\n    --_ui5_TimelineItem_horizontal_bubble_focus_left_offset: -.125rem;\n    --_ui5_TimelineItem_bubble_content_padding: var(--_ui5_tl_bubble_padding);\n    --_ui5_TimelineItem_bubble_content_subtitle_padding_top: .375rem;\n    --_ui5_TimelineItem_bubble_content_description_padding_top: .75rem;\n    --_ui5_tl_bubble_padding: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, 1rem);\n    --_ui5_tl_padding: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, 1rem 1rem 1rem .5rem);\n    --_ui5_tl_li_margin_bottom: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, 1.625rem);\n    --_ui5_timeline_tli_indicator_before_bottom: var(--_ui5-compact-size, -.75rem)  var(--_ui5-cozy-size, -1.5rem);\n    --_ui5_timeline_tli_indicator_before_right: var(--_ui5-compact-size, -.5rem)  var(--_ui5-cozy-size, -1.625rem);\n    --_ui5_timeline_tli_indicator_before_without_icon_bottom: var(--_ui5-compact-size, -1rem)  var(--_ui5-cozy-size, -1.875rem);\n    --_ui5_timeline_tli_indicator_before_without_icon_right: var(--_ui5-compact-size, -.8125rem)  var(--_ui5-cozy-size, -1.9375rem);\n    --_ui5_timeline_tli_indicator_after_top: var(--_ui5-compact-size, calc(-100% + .9375rem) )  var(--_ui5-cozy-size, calc(-100% - 1rem) );\n    --_ui5_timeline_tli_indicator_after_height: var(--_ui5-compact-size, calc(100% - .75rem) )  var(--_ui5-cozy-size, calc(100% + 1rem) );\n    --_ui5_timeline_tli_indicator_before_height: var(--_ui5-compact-size, calc(100% - 1.25rem) )  var(--_ui5-cozy-size, 100%);\n    --_ui5_timeline_tli_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .25rem) );\n    --_ui5_timeline_tli_horizontal_indicator_after_left: var(--_ui5-compact-size, 1.8625rem)  var(--_ui5-cozy-size, 1.9375rem);\n    --_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .5rem) );\n    --_ui5_timeline_tli_horizontal_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .5rem) );\n    --_ui5_timeline_tli_icon_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .25rem) );\n    --_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: var(--_ui5-compact-size, calc(100% - .625rem) )  var(--_ui5-cozy-size, calc(100% + .375rem) );\n    --_ui5_timeline_tli_horizontal_indicator_short_after_width: var(--_ui5-compact-size, calc(100% - 1rem) )  var(--_ui5-cozy-size, 100%);\n    --ui5_upload_collection_drag_overlay_border: .1875rem dashed var(--sapContent_ForegroundBorderColor);\n    --ui5_upload_collection_drop_overlay_border: .1875rem solid var(--sapContent_HelpColor);\n    --ui5_upload_collection_drop_overlay_background: transparent;\n    --ui5_upload_collection_thumbnail_size: 3rem;\n    --ui5_upload_collection_thumbnail_margin_inline_end: .75rem;\n    --ui5_upload_collection_small_size_buttons_margin_block_start: .5rem;\n    --ui5_upload_collection_small_size_buttons_margin_inline_start: 0;\n    --ui5_upload_collection_drag_overlay_text_color: var(--sapContent_NonInteractiveIconColor);\n    --ui5_upload_collection_drag_overlay_icon_color: var(--sapContent_NonInteractiveIconColor);\n    --ui5_upload_collection_drag_overlay_border_radius: 0;\n    --ui5_upload_collection_drag_overlay_opacity: .8;\n    --_ui5_vsd_header_container: var(--_ui5-compact-size, 2.5rem)  var(--_ui5-cozy-size, 2.75rem);\n    --_ui5_vsd_sub_header_container_height: var(--_ui5-compact-size, 2rem)  var(--_ui5-cozy-size, 2.75rem);\n    --_ui5_vsd_content_li_padding: .375rem;\n    --_ui5_vsd_content_height: 23.4375rem;\n    --_ui5_vsd_expand_content_height: var(--_ui5-compact-size, 25.4375rem)  var(--_ui5-cozy-size, 26.1875rem);\n    --_ui5_wiz_content_item_wrapper_padding: 1rem;\n    --_ui5_wiz_content_item_wrapper_bg: var(--sapGroup_ContentBackground);\n    --_ui5_wiz_tab_focus_outline: .125rem dotted var(--sapContent_FocusColor);\n    --_ui5_wiz_tab_selected_bg: var(--sapContent_Selected_Background);\n    --_ui5_wiz_tab_border: 1px solid var(--sapContent_Selected_ForegroundColor);\n    --_ui5_wiz_tab_selection_line: var(--sapTextColor);\n    --_ui5_wiz_tab_icon_color: var(--sapTextColor);\n    --_ui5_wiz_tab_active_separator_color: var(--sapContent_Selected_ForegroundColor);\n    --_ui5_wiz_tab_title_color: var(--sapContent_LabelColor);\n    --_ui5_wiz_tab_title_font_family: var(--sapFontFamily);\n    --_ui5_wiz_tab_focus_border_radius: 0;\n    --_ui5_shellbar_logo_outline_color: var(--sapContent_ContrastFocusColor);\n    --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);\n    --_ui5_shellbar_button_box_shadow: none;\n    --_ui5_shellbar_button_box_shadow_active: none;\n    --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);\n    --_ui5_shellbar_search_field_background: var(--sapShellColor);\n    --_ui5_shellbar_search_field_border: .0625rem solid var(--sapShell_InteractiveBorderColor);\n    --_ui5_shellbar_search_field_box_shadow: none;\n    --_ui5_shellbar_search_field_color: var(--sapShell_TextColor);\n    --_ui5_shellbar_search_field_width: 25rem;\n    --_ui5_shellbar_input_focus_outline_color: inherit;\n    --_ui5_shellbar_overflow_container_middle_height: 2.5rem;\n    --_ui5_shellbar_image_button_border_radius: 50%;\n    --_ui5-shellbar-content-margin-start: .5rem;\n    --_ui5-shellbar-overflow-button-margin: .5rem;\n    --_ui5-shellbar_separator-color: var(--sapToolbar_SeparatorColor);\n    --_ui5-shellbar_cancel-button-color: var(--sapButton_Lite_TextColor);\n    --_ui5_dynamic_page_footer_spacer: 4rem;\n    --_ui5_dynamic_page_title_padding_S: .5rem 1rem;\n    --_ui5_dynamic_page_title_padding_M: .5rem 2rem;\n    --_ui5_dynamic_page_title_padding_L: .5rem 2rem;\n    --_ui5_dynamic_page_title_padding_XL: .5rem 3rem;\n    --_ui5_dynamic_page_header_padding_S: .5rem 1rem .125rem;\n    --_ui5_dynamic_page_header_padding_M: 1rem 2rem;\n    --_ui5_dynamic_page_header_padding_L: 1rem 2rem;\n    --_ui5_dynamic_page_header_padding_XL: 1rem 3rem;\n    --_ui5_dynamic_page_content_padding_S: 1rem 0 0;\n    --_ui5_dynamic_page_content_padding_M: 1rem 1rem 0;\n    --_ui5_dynamic_page_content_padding_L: 1rem 1rem 0;\n    --_ui5_dynamic_page_content_padding_XL: 1rem 2rem 0;\n    --ui5_dynamic_page_background: var(--sapBackgroundColor);\n    --_ui5_dynamic_page_title_padding_top: .5rem;\n    --_ui5_dynamic_page_title_padding_bottom: .5rem;\n    --_ui5_dynamic_page_title_min_height: 4rem;\n    --_ui5_dynamic_page_title_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);\n    --_ui5_dynamic_page_title_focus_outline_offset: -.0625rem;\n    --_ui5_dynamic_page_title_breadcrumbs_padding_top: .5rem;\n    --_ui5_dynamic_page_title_breadcrumbs_padding_bottom: .25rem;\n    --_ui5_dynamic_page_title_heading_padding_top: .3125rem;\n    --_ui5_dynamic_page_title_subheading_margin_top: .25rem;\n    --_ui5_dynamic_page_title_hover_background: var(--sapObjectHeader_Hover_Background);\n    --_ui5_dynamic_page_snapped_title_on_mobile_line_height: 2rem;\n    --_ui5_dynamic_page_snapped_title_on_mobile_min_height: 2rem;\n    --_ui5_dynamic_page_header_background_color: var(--sapObjectHeader_Background);\n    --_ui5_dynamic_page_header-actions-box-shadow: var(--sapContent_Shadow0);\n    --_ui5_dynamic_page_header-box-shadow: var(--sapContent_HeaderShadow);\n    --_ui5_dynamic_page_actions-lines-color: var(--sapObjectHeader_BorderColor);\n    --_ui5_dynamic_page_header-actions-background: var(--sapObjectHeader_Background);\n    --_ui5_dynamic_page_header-actions-color: var(--sapButton_TextColor);\n    --_ui5_dynamic_page_header-actions-background-pressed: var(--_ui5_dynamic_page_header-actions-background);\n    --_ui5_dynamic_page_header-actions-color-pressed: var(--_ui5_dynamic_page_header-actions-color);\n    --_ui5_timeline_tlgi_line_horizontal_height: 16.375rem;\n    --_ui5_timeline_tlgi_root_horizontal_height: var(--_ui5-compact-size, 20.90625rem)  var(--_ui5-cozy-size, 21.53125rem);\n    --_ui5_timeline_tlgi_compact_icon_before_height: var(--_ui5-compact-size, calc(100% + 1.5rem) ) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));\n    --_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tlgi_compact_icon_before_height)) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));\n    --_ui5_timeline_tlgi_horizontal_compact_root_margin_left: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));\n    --_ui5_timeline_tlgi_compact_root_gap: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8))}\n`"]}
+{"version":3,"file":"parameters-bundle.css.js","sourceRoot":"","sources":["../../../../src/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.ts"],"names":[],"mappings":"AAAA,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Nd,CAAA","sourcesContent":["export default `:host{\n    --_ui5_banner_background: var(--sapShell_HeroBanner_Background);\n    --_ui5_banner_text_color: var(--sapShell_HeroBanner_TextColor);\n    --_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);\n    --_ui5_banner_border: .0625rem solid var(--sapTile_BorderColor);\n    --_ui5_banner_box_shadow: var(--sapContent_Shadow0);\n    --_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);\n    --_ui5_fcl_solid_bg: var(--sapBackgroundColor);\n    --_ui5_fcl_column_border: solid .0625rem var(--sapGroup_ContentBorderColor);\n    --_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #fff);\n    --_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #fff);\n    --sapIllus_BrandColorPrimary: var(--sapContent_Illustrative_Color1);\n    --sapIllus_BrandColorSecondary: var(--sapContent_Illustrative_Color2);\n    --sapIllus_StrokeDetailColor: var(--sapContent_Illustrative_Color4);\n    --sapIllus_Layering1: var(--sapContent_Illustrative_Color5);\n    --sapIllus_Layering2: var(--sapContent_Illustrative_Color6);\n    --sapIllus_BackgroundColor: var(--sapContent_Illustrative_Color7);\n    --sapIllus_ObjectFillColor: var(--sapContent_Illustrative_Color8);\n    --sapIllus_AccentColor: var(--sapContent_Illustrative_Color3);\n    --sapIllus_NoColor: none;\n    --sapIllus_PatternShadow: url(#sapIllus_PatternShadow);\n    --sapIllus_PatternHighlight: url(#sapIllus_PatternHighlight);\n    --_ui5_media_gallery_overflow_btn_background: var(--sapButton_Background);\n    --_ui5_media_gallery_overflow_btn_color: var(--sapButton_TextColor);\n    --_ui5_media_gallery_overflow_btn_border: 1px solid var(--sapButton_BorderColor);\n    --_ui5_media_gallery_thumbnail_border: 1px solid var(--sapContent_ForegroundColor);\n    --_ui5_media_gallery_thumbnail_selected_border: 2px solid var(--sapSelectedColor);\n    --_ui5_media_gallery_thumbnail_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);\n    --_ui5_media_gallery_item_overlay_box_shadow: inset 0px 0px 80px rgba(0, 0, 0, .2);\n    --_ui5_page_list_bg: var(--sapGroup_ContentBackground);\n    --_ui5_page_transparent_bg: var(--sapBackgroundColor);\n    --_ui5_product_switch_item_width: 11.25rem;\n    --_ui5_product_switch_item_height: 7rem;\n    --_ui5_product_switch_item_active_outline_color: var(--sapContent_ContrastFocusColor);\n    --_ui5_product_switch_item_outline_offset: -.25rem;\n    --_ui5_product_switch_item_border: 1px solid var(--sapField_BorderColor);\n    --_ui5_shellbar_root_height: 2.75rem;\n    --_ui5_shellbar_button_border: none;\n    --_ui5_shellbar_button_border_radius: .25rem;\n    --_ui5_shellbar_button_focused_border: .125rem dotted var(--sapContent_FocusColor);\n    --_ui5_shellbar_button_badge_border: 1px solid var(--sapGroup_ContentBorderColor);\n    --_ui5_shellbar_outline_offset: -.0625rem;\n    --_ui5_shellbar_search_field_outline_focused: .0625rem dotted var(--sapContent_ContrastFocusColor);\n    --_ui5_shellbar_search_field_background_hover: var(--sapShellColor);\n    --_ui5_shellbar_search_field_box_shadow_hover: none;\n    --_ui5_shellbar_menu_button_title_font_size: .75rem;\n    --_ui5_side_navigation_width: 16rem;\n    --_ui5_side_navigation_collapsed_width: 3rem;\n    --_ui5_side_navigation_navigation_separator_margin: .25rem .5rem .25rem .5rem;\n    --_ui5_side_navigation_navigation_separator_background_color: var(--sapList_GroupHeaderBorderColor);\n    --_ui5_side_navigation_navigation_separator_radius: unset;\n    --_ui5_side_navigation_navigation_separator_height: calc(2 * var(--sapList_BorderWidth));\n    --_ui5_side_navigation_triangle_color: var(--sapContent_IconColor);\n    --_ui5_side_navigation_border_right: 1px solid var(--sapGroup_ContentBorderColor);\n    --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);\n    --_ui5_side_navigation_triangle_display: block;\n    --_ui5_side_navigation_icon_color: var(--sapContent_IconColor);\n    --_ui5_side_navigation_expand_icon_color: var(--sapContent_IconColor);\n    --_ui5_side_navigation_expand_icon_width: 2rem;\n    --_ui5_side_navigation_hover_border_style_color: none;\n    --_ui5_side_navigation_hover_border_width: 0;\n    --_ui5_side_navigation_group_border_style_color: solid var(--sapList_BorderColor);\n    --_ui5_side_navigation_group_border_width: 0 0 .0625rem 0;\n    --_ui5_side_navigation_item_border_style_color: none;\n    --_ui5_side_navigation_item_border_width: 0;\n    --_ui5_side_navigation_item_height: var(--_ui5-compact-size, 2rem)  var(--_ui5-cozy-size, 2.5rem);\n    --_ui5_side_navigation_item_margin: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, .875rem);\n    --_ui5_side_navigation_item_expand_arrow_padding: var(--_ui5-compact-size, .3125rem)  var(--_ui5-cozy-size, .6875rem);\n    --_ui5_side_navigation_item_border_radius: 0;\n    --_ui5_side_navigation_item_bottom_margin: 0;\n    --_ui5_side_navigation_item_padding_start_in_popup: var(--_ui5_side_navigation_group_icon_width);\n    --_ui5_side_navigation_item_padding_start_in_overflow_popup: .75rem;\n    --_ui5_side_navigation_item_transition: none;\n    --_ui5_side_navigation_item_padding_left: .5rem;\n    --_ui5_side_navigation_item_focus_border_offset: 1px;\n    --_ui5_side_navigation_item_focus_border_radius: var(--_ui5_side_navigation_item_border_radius);\n    --_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 100% .0625rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor);\n    --_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / 100% .0625rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_Hover_SelectionBackground);\n    --_ui5_side_navigation_selected_item_border_color: var(--sapList_SelectionBorderColor);\n    --_ui5_side_navigation_selected_border_style_color: solid var(--_ui5_side_navigation_selected_item_border_color);\n    --_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color);\n    --_ui5_side_navigation_selected_border_width: 0 0 .0625rem 0;\n    --_ui5_side_navigation_group_expanded_border_width: 0;\n    --_ui5_side_navigation_group_icon_width: var(--_ui5_side_navigation_collapsed_width);\n    --_ui5_side_navigation_icon_padding_inline_end: .4375rem;\n    --_ui5_side_navigation_item_font_family: var(--sapFontFamily);\n    --_ui5_side_navigation_parent_item_font_family: var(--sapFontSemiboldDuplexFamily);\n    --_ui5_side_navigation_group_padding: .5rem;\n    --_ui5_side_navigation_padding-flexible: 0;\n    --_ui5_side_navigation_padding-fixed: 0;\n    --_ui5_side_navigation_popup_padding: 0;\n    --_ui5_side_navigation_popup_title_line_height: normal;\n    --_ui5_side_navigation_first_fixed_item_margin_top: 0;\n    --_ui5_side_navigation_item_expand_icon_visibility: none;\n    --_ui5_side_navigation_item_collapsed_hover_focus_width: auto;\n    --_ui5_side_navigation_item_collapsed_hover_focus_display: none;\n    --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0;\n    --_ui5_side_navigation_action_item_collapsed_padding: 0;\n    --_ui5_side_navigation_item_collapsed_padding: 0;\n    --_ui5_side_navigation_action_item_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);\n    --_ui5_side_navigation_action_item_border_active: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);\n    --_ui5_side_navigation_item_expand_icon_right: -.5rem;\n    --_ui5_side_navigation_item_expand_icon_hover_left: auto;\n    --_ui5_side_navigation_item_expand_icon_hover_right: 0;\n    --_ui5_side_navigation_active_text_color: var(--sapList_Active_TextColor);\n    --_ui5_TimelineItem_arrow_size: 1.625rem;\n    --_ui5_TimelineItem_bubble_border_width: .0625rem;\n    --_ui5_TimelineItem_bubble_border_style: dotted;\n    --_ui5_TimelineItem_bubble_border_radius: .25rem;\n    --_ui5_TimelineItem_bubble_border_color: var(--sapList_BorderColor);\n    --_ui5_TimelineItem_bubble_border_top: -.125rem;\n    --_ui5_TimelineItem_bubble_border_right: -.125rem;\n    --_ui5_TimelineItem_bubble_border_bottom: -.125rem;\n    --_ui5_TimelineItem_bubble_border_left: -.625rem;\n    --_ui5_TimelineItem_bubble_rtl_left_offset: -.1875rem;\n    --_ui5_TimelineItem_bubble_rtl_right_offset: -.6875rem;\n    --_ui5_TimelineItem_bubble_focus_border_radius: 0;\n    --_ui5_TimelineItem_horizontal_bubble_focus_top_offset: -.625rem;\n    --_ui5_TimelineItem_horizontal_bubble_focus_left_offset: -.125rem;\n    --_ui5_TimelineItem_bubble_content_padding: var(--_ui5_tl_bubble_padding);\n    --_ui5_TimelineItem_bubble_content_subtitle_padding_top: .375rem;\n    --_ui5_TimelineItem_bubble_content_description_padding_top: .75rem;\n    --_ui5_tl_bubble_padding: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, 1rem);\n    --_ui5_tl_padding: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, 1rem 1rem 1rem .5rem);\n    --_ui5_tl_li_margin_bottom: var(--_ui5-compact-size, .5rem)  var(--_ui5-cozy-size, 1.625rem);\n    --_ui5_timeline_tli_indicator_before_bottom: var(--_ui5-compact-size, -.75rem)  var(--_ui5-cozy-size, -1.5rem);\n    --_ui5_timeline_tli_indicator_before_right: var(--_ui5-compact-size, -.5rem)  var(--_ui5-cozy-size, -1.625rem);\n    --_ui5_timeline_tli_indicator_before_without_icon_bottom: var(--_ui5-compact-size, -1rem)  var(--_ui5-cozy-size, -1.875rem);\n    --_ui5_timeline_tli_indicator_before_without_icon_right: var(--_ui5-compact-size, -.8125rem)  var(--_ui5-cozy-size, -1.9375rem);\n    --_ui5_timeline_tli_indicator_after_top: var(--_ui5-compact-size, calc(-100% + .9375rem) )  var(--_ui5-cozy-size, calc(-100% - 1rem) );\n    --_ui5_timeline_tli_indicator_after_height: var(--_ui5-compact-size, calc(100% - .75rem) )  var(--_ui5-cozy-size, calc(100% + 1rem) );\n    --_ui5_timeline_tli_indicator_before_height: var(--_ui5-compact-size, calc(100% - 1.25rem) )  var(--_ui5-cozy-size, 100%);\n    --_ui5_timeline_tli_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .25rem) );\n    --_ui5_timeline_tli_horizontal_indicator_after_left: var(--_ui5-compact-size, 1.8625rem)  var(--_ui5-cozy-size, 1.9375rem);\n    --_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .5rem) );\n    --_ui5_timeline_tli_horizontal_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .5rem) );\n    --_ui5_timeline_tli_icon_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height))  var(--_ui5-cozy-size, calc(100% + .25rem) );\n    --_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: var(--_ui5-compact-size, calc(100% - .625rem) )  var(--_ui5-cozy-size, calc(100% + .375rem) );\n    --_ui5_timeline_tli_horizontal_indicator_short_after_width: var(--_ui5-compact-size, calc(100% - 1rem) )  var(--_ui5-cozy-size, 100%);\n    --ui5_upload_collection_drag_overlay_border: .1875rem dashed var(--sapContent_ForegroundBorderColor);\n    --ui5_upload_collection_drop_overlay_border: .1875rem solid var(--sapContent_HelpColor);\n    --ui5_upload_collection_drop_overlay_background: transparent;\n    --ui5_upload_collection_thumbnail_size: 3rem;\n    --ui5_upload_collection_thumbnail_margin_inline_end: .75rem;\n    --ui5_upload_collection_small_size_buttons_margin_block_start: .5rem;\n    --ui5_upload_collection_small_size_buttons_margin_inline_start: 0;\n    --ui5_upload_collection_drag_overlay_text_color: var(--sapContent_NonInteractiveIconColor);\n    --ui5_upload_collection_drag_overlay_icon_color: var(--sapContent_NonInteractiveIconColor);\n    --ui5_upload_collection_drag_overlay_border_radius: 0;\n    --ui5_upload_collection_drag_overlay_opacity: .8;\n    --_ui5_vsd_header_container: var(--_ui5-compact-size, 2.5rem)  var(--_ui5-cozy-size, 2.75rem);\n    --_ui5_vsd_sub_header_container_height: var(--_ui5-compact-size, 2rem)  var(--_ui5-cozy-size, 2.75rem);\n    --_ui5_vsd_content_li_padding: .375rem;\n    --_ui5_vsd_content_height: 23.4375rem;\n    --_ui5_vsd_expand_content_height: var(--_ui5-compact-size, 25.4375rem)  var(--_ui5-cozy-size, 26.1875rem);\n    --_ui5_wiz_content_item_wrapper_padding: 1rem;\n    --_ui5_wiz_content_item_wrapper_bg: var(--sapGroup_ContentBackground);\n    --_ui5_wiz_tab_focus_outline: .125rem dotted var(--sapContent_FocusColor);\n    --_ui5_wiz_tab_selected_bg: var(--sapContent_Selected_Background);\n    --_ui5_wiz_tab_border: 1px solid var(--sapContent_Selected_ForegroundColor);\n    --_ui5_wiz_tab_selection_line: var(--sapTextColor);\n    --_ui5_wiz_tab_icon_color: var(--sapTextColor);\n    --_ui5_wiz_tab_active_separator_color: var(--sapContent_Selected_ForegroundColor);\n    --_ui5_wiz_tab_title_color: var(--sapContent_LabelColor);\n    --_ui5_wiz_tab_title_font_family: var(--sapFontFamily);\n    --_ui5_wiz_tab_focus_border_radius: 0;\n    --_ui5_shellbar_logo_outline_color: var(--sapContent_ContrastFocusColor);\n    --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);\n    --_ui5_shellbar_button_box_shadow: none;\n    --_ui5_shellbar_button_box_shadow_active: none;\n    --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);\n    --_ui5_shellbar_search_field_background: var(--sapShellColor);\n    --_ui5_shellbar_search_field_border: .0625rem solid var(--sapShell_InteractiveBorderColor);\n    --_ui5_shellbar_search_field_box_shadow: none;\n    --_ui5_shellbar_search_field_color: var(--sapShell_TextColor);\n    --_ui5_shellbar_search_field_width: 25rem;\n    --_ui5_shellbar_input_focus_outline_color: inherit;\n    --_ui5_shellbar_overflow_container_middle_height: 2.5rem;\n    --_ui5_shellbar_image_button_border_radius: 50%;\n    --_ui5-shellbar-content-margin-start: .5rem;\n    --_ui5-shellbar-overflow-button-margin: .5rem;\n    --_ui5-shellbar_separator-color: var(--sapToolbar_SeparatorColor);\n    --_ui5-shellbar_cancel-button-color: var(--sapButton_Lite_TextColor);\n    --_ui5_dynamic_page_footer_spacer: 4rem;\n    --_ui5_dynamic_page_title_padding_S: .5rem 1rem;\n    --_ui5_dynamic_page_title_padding_M: .5rem 2rem;\n    --_ui5_dynamic_page_title_padding_L: .5rem 2rem;\n    --_ui5_dynamic_page_title_padding_XL: .5rem 3rem;\n    --_ui5_dynamic_page_header_padding_S: .5rem 1rem .125rem;\n    --_ui5_dynamic_page_header_padding_M: 1rem 2rem;\n    --_ui5_dynamic_page_header_padding_L: 1rem 2rem;\n    --_ui5_dynamic_page_header_padding_XL: 1rem 3rem;\n    --_ui5_dynamic_page_content_padding_S: 1rem 0 0;\n    --_ui5_dynamic_page_content_padding_M: 1rem 1rem 0;\n    --_ui5_dynamic_page_content_padding_L: 1rem 1rem 0;\n    --_ui5_dynamic_page_content_padding_XL: 1rem 2rem 0;\n    --ui5_dynamic_page_background: var(--sapBackgroundColor);\n    --_ui5_dynamic_page_title_padding_top: .5rem;\n    --_ui5_dynamic_page_title_padding_bottom: .5rem;\n    --_ui5_dynamic_page_title_min_height: 4rem;\n    --_ui5_dynamic_page_title_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);\n    --_ui5_dynamic_page_title_focus_outline_offset: -.0625rem;\n    --_ui5_dynamic_page_title_breadcrumbs_padding_top: .5rem;\n    --_ui5_dynamic_page_title_breadcrumbs_padding_bottom: .25rem;\n    --_ui5_dynamic_page_title_heading_padding_top: .3125rem;\n    --_ui5_dynamic_page_title_subheading_margin_top: .25rem;\n    --_ui5_dynamic_page_title_hover_background: var(--sapObjectHeader_Hover_Background);\n    --_ui5_dynamic_page_snapped_title_on_mobile_line_height: 2rem;\n    --_ui5_dynamic_page_snapped_title_on_mobile_min_height: 2rem;\n    --_ui5_dynamic_page_header_background_color: var(--sapObjectHeader_Background);\n    --_ui5_dynamic_page_header-actions-box-shadow: var(--sapContent_Shadow0);\n    --_ui5_dynamic_page_header-box-shadow: var(--sapContent_HeaderShadow);\n    --_ui5_dynamic_page_actions-lines-color: var(--sapObjectHeader_BorderColor);\n    --_ui5_dynamic_page_header-actions-background: var(--sapObjectHeader_Background);\n    --_ui5_dynamic_page_header-actions-color: var(--sapButton_TextColor);\n    --_ui5_dynamic_page_header-actions-background-pressed: var(--_ui5_dynamic_page_header-actions-background);\n    --_ui5_dynamic_page_header-actions-color-pressed: var(--_ui5_dynamic_page_header-actions-color);\n    --_ui5_timeline_tlgi_line_horizontal_height: 16.375rem;\n    --_ui5_timeline_tlgi_root_horizontal_height: var(--_ui5-compact-size, 20.90625rem)  var(--_ui5-cozy-size, 21.53125rem);\n    --_ui5_timeline_tlgi_compact_icon_before_height: var(--_ui5-compact-size, calc(100% + 1.5rem) ) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));\n    --_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tlgi_compact_icon_before_height)) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));\n    --_ui5_timeline_tlgi_horizontal_compact_root_margin_left: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));\n    --_ui5_timeline_tlgi_compact_root_gap: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8))}\n`"]}

package/dist/types/HeroBannerActionsPlacement.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Available HeroBanner actions placement options.
+ *
+ * Defines where the actions slot is rendered within the hero banner header area.
+ * @public
+ * @since 2.23.0
+ */
+declare enum HeroBannerActionsPlacement {
+    /**
+     * Places the actions to the right of the header text, aligned to the top of the header row.
+     * @public
+     */
+    TopEnd = "TopEnd",
+    /**
+     * Places the actions below the header text, aligned to the start.
+     * @public
+     */
+    BottomStart = "BottomStart"
+}
+export default HeroBannerActionsPlacement;

package/dist/types/HeroBannerActionsPlacement.js

@@ -0,0 +1,22 @@
+/**
+ * Available HeroBanner actions placement options.
+ *
+ * Defines where the actions slot is rendered within the hero banner header area.
+ * @public
+ * @since 2.23.0
+ */
+var HeroBannerActionsPlacement;
+(function (HeroBannerActionsPlacement) {
+    /**
+     * Places the actions to the right of the header text, aligned to the top of the header row.
+     * @public
+     */
+    HeroBannerActionsPlacement["TopEnd"] = "TopEnd";
+    /**
+     * Places the actions below the header text, aligned to the start.
+     * @public
+     */
+    HeroBannerActionsPlacement["BottomStart"] = "BottomStart";
+})(HeroBannerActionsPlacement || (HeroBannerActionsPlacement = {}));
+export default HeroBannerActionsPlacement;
+//# sourceMappingURL=HeroBannerActionsPlacement.js.map

package/dist/types/HeroBannerActionsPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroBannerActionsPlacement.js","sourceRoot":"","sources":["../../src/types/HeroBannerActionsPlacement.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,IAAK,0BAYJ;AAZD,WAAK,0BAA0B;IAC9B;;;OAGG;IACH,+CAAiB,CAAA;IAEjB;;;OAGG;IACH,yDAA2B,CAAA;AAC5B,CAAC,EAZI,0BAA0B,KAA1B,0BAA0B,QAY9B;AAED,eAAe,0BAA0B,CAAC","sourcesContent":["/**\n * Available HeroBanner actions placement options.\n *\n * Defines where the actions slot is rendered within the hero banner header area.\n * @public\n * @since 2.23.0\n */\nenum HeroBannerActionsPlacement {\n\t/**\n\t * Places the actions to the right of the header text, aligned to the top of the header row.\n\t * @public\n\t */\n\tTopEnd = \"TopEnd\",\n\n\t/**\n\t * Places the actions below the header text, aligned to the start.\n\t * @public\n\t */\n\tBottomStart = \"BottomStart\"\n}\n\nexport default HeroBannerActionsPlacement;\n"]}

package/dist/types/HeroBannerColumnsRatio.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Available HeroBanner columns ratio options.
+ *
+ * Defines how the two content blocks are sized relative to each other within the hero banner.
+ * When no value is set, the content renders in a single column.
+ * @public
+ * @since 2.23.0
+ */
+declare enum HeroBannerColumnsRatio {
+    /**
+     * Two equal columns. Both content blocks share the available width equally.
+     * @public
+     */
+    Equal = "Equal",
+    /**
+     * Two unequal columns. The first content block takes two-thirds of the width, the second takes one-third.
+     * @public
+     */
+    FirstWider = "FirstWider"
+}
+export default HeroBannerColumnsRatio;

package/dist/types/HeroBannerColumnsRatio.js

@@ -0,0 +1,23 @@
+/**
+ * Available HeroBanner columns ratio options.
+ *
+ * Defines how the two content blocks are sized relative to each other within the hero banner.
+ * When no value is set, the content renders in a single column.
+ * @public
+ * @since 2.23.0
+ */
+var HeroBannerColumnsRatio;
+(function (HeroBannerColumnsRatio) {
+    /**
+     * Two equal columns. Both content blocks share the available width equally.
+     * @public
+     */
+    HeroBannerColumnsRatio["Equal"] = "Equal";
+    /**
+     * Two unequal columns. The first content block takes two-thirds of the width, the second takes one-third.
+     * @public
+     */
+    HeroBannerColumnsRatio["FirstWider"] = "FirstWider";
+})(HeroBannerColumnsRatio || (HeroBannerColumnsRatio = {}));
+export default HeroBannerColumnsRatio;
+//# sourceMappingURL=HeroBannerColumnsRatio.js.map

package/dist/types/HeroBannerColumnsRatio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroBannerColumnsRatio.js","sourceRoot":"","sources":["../../src/types/HeroBannerColumnsRatio.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,IAAK,sBAYJ;AAZD,WAAK,sBAAsB;IAC1B;;;OAGG;IACH,yCAAe,CAAA;IAEf;;;OAGG;IACH,mDAAyB,CAAA;AAC1B,CAAC,EAZI,sBAAsB,KAAtB,sBAAsB,QAY1B;AAED,eAAe,sBAAsB,CAAC","sourcesContent":["/**\n * Available HeroBanner columns ratio options.\n *\n * Defines how the two content blocks are sized relative to each other within the hero banner.\n * When no value is set, the content renders in a single column.\n * @public\n * @since 2.23.0\n */\nenum HeroBannerColumnsRatio {\n\t/**\n\t * Two equal columns. Both content blocks share the available width equally.\n\t * @public\n\t */\n\tEqual = \"Equal\",\n\n\t/**\n\t * Two unequal columns. The first content block takes two-thirds of the width, the second takes one-third.\n\t * @public\n\t */\n\tFirstWider = \"FirstWider\",\n}\n\nexport default HeroBannerColumnsRatio;\n"]}

package/dist/types/HeroBannerHeaderBlockPlacement.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Available HeroBanner header text block placement options.
+ *
+ * Defines the vertical placement of the header text block within the banner header area.
+ * @public
+ * @since 2.23.0
+ */
+declare enum HeroBannerHeaderBlockPlacement {
+    /**
+     * Places the header text block at the top of the header area.
+     * @public
+     */
+    Top = "Top",
+    /**
+     * Places the header text block at the bottom of the header area.
+     * @public
+     */
+    Bottom = "Bottom"
+}
+export default HeroBannerHeaderBlockPlacement;

package/dist/types/HeroBannerHeaderBlockPlacement.js

@@ -0,0 +1,22 @@
+/**
+ * Available HeroBanner header text block placement options.
+ *
+ * Defines the vertical placement of the header text block within the banner header area.
+ * @public
+ * @since 2.23.0
+ */
+var HeroBannerHeaderBlockPlacement;
+(function (HeroBannerHeaderBlockPlacement) {
+    /**
+     * Places the header text block at the top of the header area.
+     * @public
+     */
+    HeroBannerHeaderBlockPlacement["Top"] = "Top";
+    /**
+     * Places the header text block at the bottom of the header area.
+     * @public
+     */
+    HeroBannerHeaderBlockPlacement["Bottom"] = "Bottom";
+})(HeroBannerHeaderBlockPlacement || (HeroBannerHeaderBlockPlacement = {}));
+export default HeroBannerHeaderBlockPlacement;
+//# sourceMappingURL=HeroBannerHeaderBlockPlacement.js.map

package/dist/types/HeroBannerHeaderBlockPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroBannerHeaderBlockPlacement.js","sourceRoot":"","sources":["../../src/types/HeroBannerHeaderBlockPlacement.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,IAAK,8BAYJ;AAZD,WAAK,8BAA8B;IAClC;;;OAGG;IACH,6CAAW,CAAA;IAEX;;;OAGG;IACH,mDAAiB,CAAA;AAClB,CAAC,EAZI,8BAA8B,KAA9B,8BAA8B,QAYlC;AAED,eAAe,8BAA8B,CAAC","sourcesContent":["/**\n * Available HeroBanner header text block placement options.\n *\n * Defines the vertical placement of the header text block within the banner header area.\n * @public\n * @since 2.23.0\n */\nenum HeroBannerHeaderBlockPlacement {\n\t/**\n\t * Places the header text block at the top of the header area.\n\t * @public\n\t */\n\tTop = \"Top\",\n\n\t/**\n\t * Places the header text block at the bottom of the header area.\n\t * @public\n\t */\n\tBottom = \"Bottom\"\n}\n\nexport default HeroBannerHeaderBlockPlacement;\n"]}

package/dist/vscode.html-custom-data.json

@@ -17,6 +17,11 @@
       "name": "ui5-dynamic-page",
       "description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\nIn order to use this functionality, you need to import the following module:\n\n- `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **pin-button-toggle** - Fired when the pin header button is toggled.\n- **title-toggle** - Fired when the expand/collapse area of the title is toggled.\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page.\n- **footerArea** - Defines the footer HTML Element.\n- **headerArea** - Defines the header HTML Element.\n- **titleArea** - Defines the title HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **fit-content** - Used to style the fit content container of the component.\n- **footer** - Used to style the footer of the component",
       "attributes": [
+        {
+          "name": "accessibility-attributes",
+          "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
+          "values": [{ "name": "DynamicPageAccessibilityAttributes" }]
+        },
         {
           "name": "header-pinned",
           "description": "Defines if the header is pinned.",
@@ -43,7 +48,13 @@
     {
       "name": "ui5-dynamic-page-header",
       "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page Header.",
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -226,6 +237,38 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-hero-banner",
+      "description": "### Overview\n\nThe `ui5-hero-banner` is a flexible, full-width banner designed for placement at the top of a page.\nIt provides a personalized greeting and quick access to key information or actions.\n\n### Structure\n\nThe HeroBanner consists of the following building blocks:\n\n- **Banner Canvas** - the visual base with a background color, optional background image and shadow.\n- **Overline** (optional) - contextual text at the top, e.g. the current date or a status message.\n- **Header** (optional) - the main greeting header below the overline, e.g. \"Hello, John\".\n- **Free Slots** (optional) - customizable content areas that can contain KPI cards, search components, text, buttons, etc.\n\nThe banner is not sticky — it scrolls away with the page content when the user scrolls down.\n\n### Usage\n\nPlace the `ui5-hero-banner` at the top of a page to welcome the user and surface relevant\ninformation or shortcuts at a glance.\n\nThe hero banner itself is non-interactive. However, interactive elements such as buttons, cards,\nor search fields can be placed inside the free content slots and will follow their own\ninteractive states.\n\n### Responsive Behavior\n\nThe hero banner adapts to different screen sizes:\n- On smaller screens, split layouts (Equal, FirstWider) collapse to a single stacked column.\n- The heading text wraps to multiple lines as needed.\n- Buttons in the headerAction slot will wrap.\n- On screens ≤1024px, the header text is wrapped to a maximum of 3 lines.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/HeroBanner.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **actions** - Defines action buttons displayed to the right of the header area.\nTypically used to display actions buttons in the top right corner.\n\nCan contain buttons, links, or other interactive elements that provide\nquick access to relevant actions directly from the hero banner header.\n- **default** - Defines the first (default) free content block of the hero banner.\n\nThis is the default slot — content placed directly inside `<ui5-hero-banner>`\nwithout a slot attribute lands here.\nCan contain KPI cards, search input fields, text, buttons, and more.\n- **endContent** - Defines the second free content block of the hero banner.\n\nUsed alongside `startContent` when `columnsRatio` is set (`Equal`, `FirstWider`).\nCan contain cards, buttons, and other interactive elements.\n\n### **CSS Parts:**\n - **canvas** - Used to style the banner canvas container\n- **content** - Used to style the content area of the banner\n- **endContent** - Used to style the end content block\n- **header** - Used to style the header area (salutation, date, header actions)\n- **startContent** - Used to style the start (default) content block",
+      "attributes": [
+        {
+          "name": "actions-placement",
+          "description": "Defines the placement of the actions slot within the hero banner header.\n\n- **TopEnd** (default) - Actions are displayed to the right of the header text, at the top of the header row.\n- **BottomStart** - Actions are displayed below the header text, left-aligned, regardless of `columnsRatio` or slot usage.",
+          "values": [{ "name": "TopEnd" }, { "name": "BottomStart" }]
+        },
+        {
+          "name": "columns-ratio",
+          "description": "Defines the ratio between the two content columns inside the hero banner.\n\nTakes effect only when `endContent` is provided. When no `endContent` is present, the content spans the full width (single column).\n\n- **Equal** - Two equal columns. Both content blocks share the available width equally.\n  On smaller screens, both slots stack vertically.\n- **FirstWider** - Two unequal columns. The start content takes two-thirds of the width, the end content one-third.\n  On smaller screens, both slots stack vertically.",
+          "values": [{ "name": "Equal" }, { "name": "FirstWider" }]
+        },
+        {
+          "name": "header-block-placement",
+          "description": "Defines the vertical placement of the header block within the content area.\n\n- **Top** (default) - Header block is placed at the top of the content area.\n- **Bottom** - Header block is pushed to the bottom of column 1. Only takes effect when `columnsRatio`\n  is `Equal` or `FirstWider` and only `endContent` is provided (no default slot content).\n  When `actionsPlacement` is also `BottomStart`, the `endContent` slot spans the full height.",
+          "values": [{ "name": "Top" }, { "name": "Bottom" }]
+        },
+        {
+          "name": "header-text",
+          "description": "Defines the header text displayed in the hero banner.\n\nThis is the main greeting header, typically a personalized message\nsuch as \"Hello, John\".",
+          "values": []
+        },
+        {
+          "name": "overline-text",
+          "description": "Defines text displayed above the heading as an overline.\nCan be used to show the current date, a status message, or any other relevant contextual information.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-illustrated-message",
       "description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.\n- **subtitle** - Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.\n- **title** - Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.\n\n### **CSS Parts:**\n - **subtitle** - Used to style the subtitle wrapper of the `ui5-illustrated-message`",
@@ -1204,7 +1247,7 @@
     },
     {
       "name": "ui5-timeline",
-      "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
+      "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header and Info Bar Slots\n\nThe Timeline exposes two named slots above the items area:\n\n- `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\nThe most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\na filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\nsearching — the application listens for events from its own controls and reorders, hides, or\nadds items in the default slot accordingly.\n\n- `infoBar` — for a status bar that reflects the result of the controls (active filters,\napplied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n\nThe Timeline itself does not filter, sort, or search — the application owns that logic.\nUse `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\na constrained height in this mode so it owns its scrollbar.\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **header** - Defines the content of the Timeline's header area, displayed above the items.\nTypically a `ui5-toolbar` with search, sort, and filter controls.\n- **infoBar** - Defines the content of the Timeline's info bar area, displayed below the header\nand above the items. Use for status display (applied filters, sort direction, counts).",
       "attributes": [
         {
           "name": "accessible-name",
@@ -1234,6 +1277,11 @@
           "name": "loading-delay",
           "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
           "values": []
+        },
+        {
+          "name": "sticky-header",
+          "description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
+          "values": []
         }
       ],
       "references": []

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.23.0-rc.2",
+  "version": "2.24.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -70,6 +70,14 @@
           "description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\nIn order to use this functionality, you need to import the following module:\n\n- `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n---\n\n\n### **Events:**\n - **pin-button-toggle** - Fired when the pin header button is toggled.\n- **title-toggle** - Fired when the expand/collapse area of the title is toggled.\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page.\n- **footerArea** - Defines the footer HTML Element.\n- **headerArea** - Defines the header HTML Element.\n- **titleArea** - Defines the title HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **fit-content** - Used to style the fit content container of the component.\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
+              "value": {
+                "type": "DynamicPageAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "header-pinned",
               "description": "Defines if the header is pinned.",
@@ -121,6 +129,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **root**: `root.role` and `root.name`.\n - **header**: `header.role` and `header.name`.\n - **content**: `content.role` and `content.name`.\n - **footer**: `footer.role` and `footer.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values per section:\n`root` — `none`, `main`, `region`;\n`header` — `none`, `banner`, `region`;\n`content` — `none`, `main`, `region`, `form`;\n`footer` — `none`, `contentinfo`, `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
+                "value": { "type": "DynamicPageAccessibilityAttributes" }
+              },
               {
                 "name": "header-pinned",
                 "description": "Defines if the header is pinned.",
@@ -158,7 +171,13 @@
           "name": "ui5-dynamic-page-header",
           "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page Header.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
           "slots": [
             {
               "name": "default",
@@ -166,7 +185,16 @@
             }
           ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA label for the header region.\nOverrides the default \"Header Expanded\" / \"Header Snapped\" text.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
         },
         {
           "name": "ui5-dynamic-page-header-actions",
@@ -580,6 +608,89 @@
             "events": []
           }
         },
+        {
+          "name": "ui5-hero-banner",
+          "description": "### Overview\n\nThe `ui5-hero-banner` is a flexible, full-width banner designed for placement at the top of a page.\nIt provides a personalized greeting and quick access to key information or actions.\n\n### Structure\n\nThe HeroBanner consists of the following building blocks:\n\n- **Banner Canvas** - the visual base with a background color, optional background image and shadow.\n- **Overline** (optional) - contextual text at the top, e.g. the current date or a status message.\n- **Header** (optional) - the main greeting header below the overline, e.g. \"Hello, John\".\n- **Free Slots** (optional) - customizable content areas that can contain KPI cards, search components, text, buttons, etc.\n\nThe banner is not sticky — it scrolls away with the page content when the user scrolls down.\n\n### Usage\n\nPlace the `ui5-hero-banner` at the top of a page to welcome the user and surface relevant\ninformation or shortcuts at a glance.\n\nThe hero banner itself is non-interactive. However, interactive elements such as buttons, cards,\nor search fields can be placed inside the free content slots and will follow their own\ninteractive states.\n\n### Responsive Behavior\n\nThe hero banner adapts to different screen sizes:\n- On smaller screens, split layouts (Equal, FirstWider) collapse to a single stacked column.\n- The heading text wraps to multiple lines as needed.\n- Buttons in the headerAction slot will wrap.\n- On screens ≤1024px, the header text is wrapped to a maximum of 3 lines.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/HeroBanner.js\";`\n---\n\n\n### **Slots:**\n - **actions** - Defines action buttons displayed to the right of the header area.\nTypically used to display actions buttons in the top right corner.\n\nCan contain buttons, links, or other interactive elements that provide\nquick access to relevant actions directly from the hero banner header.\n- **default** - Defines the first (default) free content block of the hero banner.\n\nThis is the default slot — content placed directly inside `<ui5-hero-banner>`\nwithout a slot attribute lands here.\nCan contain KPI cards, search input fields, text, buttons, and more.\n- **endContent** - Defines the second free content block of the hero banner.\n\nUsed alongside `startContent` when `columnsRatio` is set (`Equal`, `FirstWider`).\nCan contain cards, buttons, and other interactive elements.\n\n### **CSS Parts:**\n - **canvas** - Used to style the banner canvas container\n- **content** - Used to style the content area of the banner\n- **endContent** - Used to style the end content block\n- **header** - Used to style the header area (salutation, date, header actions)\n- **startContent** - Used to style the start (default) content block",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "actions-placement",
+              "description": "Defines the placement of the actions slot within the hero banner header.\n\n- **TopEnd** (default) - Actions are displayed to the right of the header text, at the top of the header row.\n- **BottomStart** - Actions are displayed below the header text, left-aligned, regardless of `columnsRatio` or slot usage.",
+              "value": {
+                "type": "\"TopEnd\" | \"BottomStart\"",
+                "default": "\"TopEnd\""
+              }
+            },
+            {
+              "name": "columns-ratio",
+              "description": "Defines the ratio between the two content columns inside the hero banner.\n\nTakes effect only when `endContent` is provided. When no `endContent` is present, the content spans the full width (single column).\n\n- **Equal** - Two equal columns. Both content blocks share the available width equally.\n  On smaller screens, both slots stack vertically.\n- **FirstWider** - Two unequal columns. The start content takes two-thirds of the width, the end content one-third.\n  On smaller screens, both slots stack vertically.",
+              "value": {
+                "type": "\"Equal\" | \"FirstWider\"",
+                "default": "\"FirstWider\""
+              }
+            },
+            {
+              "name": "header-block-placement",
+              "description": "Defines the vertical placement of the header block within the content area.\n\n- **Top** (default) - Header block is placed at the top of the content area.\n- **Bottom** - Header block is pushed to the bottom of column 1. Only takes effect when `columnsRatio`\n  is `Equal` or `FirstWider` and only `endContent` is provided (no default slot content).\n  When `actionsPlacement` is also `BottomStart`, the `endContent` slot spans the full height.",
+              "value": { "type": "\"Top\" | \"Bottom\"", "default": "\"Top\"" }
+            },
+            {
+              "name": "header-text",
+              "description": "Defines the header text displayed in the hero banner.\n\nThis is the main greeting header, typically a personalized message\nsuch as \"Hello, John\".",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "overline-text",
+              "description": "Defines text displayed above the heading as an overline.\nCan be used to show the current date, a status message, or any other relevant contextual information.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "actions",
+              "description": "Defines action buttons displayed to the right of the header area.\nTypically used to display actions buttons in the top right corner.\n\nCan contain buttons, links, or other interactive elements that provide\nquick access to relevant actions directly from the hero banner header."
+            },
+            {
+              "name": "default",
+              "description": "Defines the first (default) free content block of the hero banner.\n\nThis is the default slot — content placed directly inside `<ui5-hero-banner>`\nwithout a slot attribute lands here.\nCan contain KPI cards, search input fields, text, buttons, and more."
+            },
+            {
+              "name": "endContent",
+              "description": "Defines the second free content block of the hero banner.\n\nUsed alongside `startContent` when `columnsRatio` is set (`Equal`, `FirstWider`).\nCan contain cards, buttons, and other interactive elements."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "actions-placement",
+                "description": "Defines the placement of the actions slot within the hero banner header.\n\n- **TopEnd** (default) - Actions are displayed to the right of the header text, at the top of the header row.\n- **BottomStart** - Actions are displayed below the header text, left-aligned, regardless of `columnsRatio` or slot usage.",
+                "value": { "type": "\"TopEnd\" | \"BottomStart\"" }
+              },
+              {
+                "name": "columns-ratio",
+                "description": "Defines the ratio between the two content columns inside the hero banner.\n\nTakes effect only when `endContent` is provided. When no `endContent` is present, the content spans the full width (single column).\n\n- **Equal** - Two equal columns. Both content blocks share the available width equally.\n  On smaller screens, both slots stack vertically.\n- **FirstWider** - Two unequal columns. The start content takes two-thirds of the width, the end content one-third.\n  On smaller screens, both slots stack vertically.",
+                "value": { "type": "\"Equal\" | \"FirstWider\"" }
+              },
+              {
+                "name": "header-block-placement",
+                "description": "Defines the vertical placement of the header block within the content area.\n\n- **Top** (default) - Header block is placed at the top of the content area.\n- **Bottom** - Header block is pushed to the bottom of column 1. Only takes effect when `columnsRatio`\n  is `Equal` or `FirstWider` and only `endContent` is provided (no default slot content).\n  When `actionsPlacement` is also `BottomStart`, the `endContent` slot spans the full height.",
+                "value": { "type": "\"Top\" | \"Bottom\"" }
+              },
+              {
+                "name": "header-text",
+                "description": "Defines the header text displayed in the hero banner.\n\nThis is the main greeting header, typically a personalized message\nsuch as \"Hello, John\".",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "overline-text",
+                "description": "Defines text displayed above the heading as an overline.\nCan be used to show the current date, a status message, or any other relevant contextual information.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "ui5-illustrated-message",
           "description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.\n- **subtitle** - Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.\n- **title** - Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.\n\n### **CSS Parts:**\n - **subtitle** - Used to style the subtitle wrapper of the `ui5-illustrated-message`",
@@ -2795,7 +2906,7 @@
         },
         {
           "name": "ui5-timeline",
-          "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n---\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
+          "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header and Info Bar Slots\n\nThe Timeline exposes two named slots above the items area:\n\n- `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\nThe most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\na filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\nsearching — the application listens for events from its own controls and reorders, hides, or\nadds items in the default slot accordingly.\n\n- `infoBar` — for a status bar that reflects the result of the controls (active filters,\napplied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n\nThe Timeline itself does not filter, sort, or search — the application owns that logic.\nUse `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\na constrained height in this mode so it owns its scrollbar.\n---\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **header** - Defines the content of the Timeline's header area, displayed above the items.\nTypically a `ui5-toolbar` with search, sort, and filter controls.\n- **infoBar** - Defines the content of the Timeline's info bar area, displayed below the header\nand above the items. Use for status display (applied filters, sort direction, counts).",
           "doc-url": "",
           "attributes": [
             {
@@ -2828,12 +2939,25 @@
               "name": "loading-delay",
               "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
               "value": { "type": "number", "default": "1000" }
+            },
+            {
+              "name": "sticky-header",
+              "description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
               "name": "default",
               "description": "Determines the content of the `ui5-timeline`."
+            },
+            {
+              "name": "header",
+              "description": "Defines the content of the Timeline's header area, displayed above the items.\nTypically a `ui5-toolbar` with search, sort, and filter controls."
+            },
+            {
+              "name": "infoBar",
+              "description": "Defines the content of the Timeline's info bar area, displayed below the header\nand above the items. Use for status display (applied filters, sort direction, counts)."
             }
           ],
           "events": [
@@ -2868,6 +2992,11 @@
                 "name": "loading-delay",
                 "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
                 "value": { "type": "number" }
+              },
+              {
+                "name": "sticky-header",
+                "description": "Defines whether the content of the `header` and `infoBar` slots remains visible when the user scrolls the Timeline.\n\n**Note:** The bars pin to the Timeline's own scrollport. Give the Timeline a\nconstrained height (for example `style=\"height: 32rem\"`) so its items scroll\ninside it. Placing the Timeline inside an externally scrolling ancestor while\nleaving the Timeline itself unsized is not supported in this mode — the bars\nwill scroll away with the ancestor.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
@@ -4376,6 +4505,26 @@
           "name": "part(footer)",
           "description": "Used to style the footer of the component"
         },
+        {
+          "name": "part(canvas)",
+          "description": "Used to style the banner canvas container"
+        },
+        {
+          "name": "part(content)",
+          "description": "Used to style the content area of the banner"
+        },
+        {
+          "name": "part(endContent)",
+          "description": "Used to style the end content block"
+        },
+        {
+          "name": "part(header)",
+          "description": "Used to style the header area (salutation, date, header actions)"
+        },
+        {
+          "name": "part(startContent)",
+          "description": "Used to style the start (default) content block"
+        },
         {
           "name": "part(subtitle)",
           "description": "Used to style the subtitle wrapper of the `ui5-illustrated-message`"