@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/src/i18n/messagebundle_tr.properties

@@ -19,7 +19,19 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=Birleşik avatarlar.
 
 AVATAR_GROUP_MOVE=Taşımak için OK tuşlarına basın.
 
-BADGE_DESCRIPTION=Rozet
+TAG_DESCRIPTION_BADGE=Rozet
+
+TAG_DESCRIPTION_TAG=Etiket
+
+TAG_ROLE_DESCRIPTION=Etiket düğmesi
+
+TAG_ERROR=Hata
+
+TAG_WARNING=Uyarı
+
+TAG_SUCCESS=Başarılı
+
+TAG_INFORMATION=Bilgi
 
 BREADCRUMB_ITEM_POS={0}/{1}
 
@@ -37,6 +49,14 @@ BUTTON_ARIA_TYPE_REJECT=Negatif işlem
 
 BUTTON_ARIA_TYPE_EMPHASIZED=Vurgulandı
 
+CAL_LEGEND_TODAY_TEXT=Bugün
+
+CAL_LEGEND_SELECTED_TEXT=Seçilen gün
+
+CAL_LEGEND_WORKING_DAY_TEXT=Çalışma günü
+
+CAL_LEGEND_NON_WORKING_DAY_TEXT=Çalışılmayan gün
+
 CAROUSEL_OF_TEXT=/
 
 CAROUSEL_DOT_TEXT={1} öğeden {0} öğe görüntüleniyor
@@ -59,6 +79,8 @@ COLOR_PALETTE_DIALOG_TITLE=Rengi değiştir
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Daha fazla renk...
 
+COLOR_PALETTE_DEFAULT_COLOR_TEXT=Varsayılan renk
+
 COLORPICKER_ALPHA_SLIDER=Alfa denetimi
 
 COLORPICKER_HUE_SLIDER=Renk tonu denetimi
@@ -93,8 +115,12 @@ SELECT_ROLE_DESCRIPTION=Liste kutusu
 
 SELECT_OPTIONS=Seçenekleri seç
 
+SHOW_SELECTED_BUTTON=Yalnızca seçilen öğeleri göster
+
 INPUT_SUGGESTIONS=Öneriler kullanılabilir
 
+MCB_SELECTED_ITEMS=Tümünü seç ({0}/{1})
+
 INPUT_SUGGESTIONS_TITLE=Seç
 
 INPUT_SUGGESTIONS_ONE_HIT=1 sonuç mevcut
@@ -139,6 +165,8 @@ MESSAGE_STRIP_SUCCESS=Başarı bilgi çubuğu
 
 MESSAGE_STRIP_INFORMATION=Bilgi çubuğu
 
+MESSAGE_STRIP_CUSTOM=Özel bilgiler çubuğu
+
 MULTICOMBOBOX_DIALOG_OK_BUTTON=Tamam
 
 RADIO_BUTTON_GROUP_REQUIRED=Mevcut seçeneklerden birini seçin.
@@ -301,6 +329,8 @@ MENU_BACK_BUTTON_ARIA_LABEL=Geri
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=Reddet
 
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Dolaşma
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Etkileşimli başlık
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Yeniden boyutlandırmak için Shift+Ok tuşlarını kullanın

package/src/i18n/messagebundle_uk.properties

@@ -19,7 +19,19 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=Об’єднані аватари.
 
 AVATAR_GROUP_MOVE=Для переміщення натисніть клавіші зі СТРІЛКАМИ.
 
-BADGE_DESCRIPTION=Бейдж
+TAG_DESCRIPTION_BADGE=Значок
+
+TAG_DESCRIPTION_TAG=Тег
+
+TAG_ROLE_DESCRIPTION=Кнопка тегу
+
+TAG_ERROR=Помилка
+
+TAG_WARNING=Застереження
+
+TAG_SUCCESS=Успіх
+
+TAG_INFORMATION=Інформація
 
 BREADCRUMB_ITEM_POS={0} з {1}
 
@@ -37,6 +49,14 @@ BUTTON_ARIA_TYPE_REJECT=Негативна операція
 
 BUTTON_ARIA_TYPE_EMPHASIZED=Виділено
 
+CAL_LEGEND_TODAY_TEXT=Сьогодні
+
+CAL_LEGEND_SELECTED_TEXT=Вибраний день
+
+CAL_LEGEND_WORKING_DAY_TEXT=Робочий день
+
+CAL_LEGEND_NON_WORKING_DAY_TEXT=Неробочий день
+
 CAROUSEL_OF_TEXT=з
 
 CAROUSEL_DOT_TEXT=Позиція {0} з {1} відображена
@@ -59,6 +79,8 @@ COLOR_PALETTE_DIALOG_TITLE=Змінити колір
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Більше кольорів...
 
+COLOR_PALETTE_DEFAULT_COLOR_TEXT=Усталений колір
+
 COLORPICKER_ALPHA_SLIDER=Елемент регулювання Альфа
 
 COLORPICKER_HUE_SLIDER=Елемент регулювання відтінку
@@ -93,8 +115,12 @@ SELECT_ROLE_DESCRIPTION=Список
 
 SELECT_OPTIONS=Вибрати опції
 
+SHOW_SELECTED_BUTTON=Показати тільки вибрані позиції
+
 INPUT_SUGGESTIONS=Пропозиції доступні
 
+MCB_SELECTED_ITEMS=Вибрати все ({0} з {1})
+
 INPUT_SUGGESTIONS_TITLE=Вибрати
 
 INPUT_SUGGESTIONS_ONE_HIT=Доступний 1 результат
@@ -139,6 +165,8 @@ MESSAGE_STRIP_SUCCESS=Успіх інформаційної панелі
 
 MESSAGE_STRIP_INFORMATION=Інформаційна панель
 
+MESSAGE_STRIP_CUSTOM=Користувацька інформаційна панель
+
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
 RADIO_BUTTON_GROUP_REQUIRED=Виберіть одну з доступних опцій.
@@ -301,6 +329,8 @@ MENU_BACK_BUTTON_ARIA_LABEL=Назад
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=Відхилити
 
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Навігація
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Інтерактивний заголовок
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Використовуйте клавішу Shift + клавіші зі стрілками для зміни розміру

package/src/i18n/messagebundle_vi.properties

@@ -19,7 +19,19 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=Ảnh đại diện kết hợp.
 
 AVATAR_GROUP_MOVE=Nhấn các phím MŨI TÊN để di chuyển.
 
-BADGE_DESCRIPTION=Biểu tượng
+TAG_DESCRIPTION_BADGE=Huy hiệu
+
+TAG_DESCRIPTION_TAG=Thẻ
+
+TAG_ROLE_DESCRIPTION=Nút thẻ
+
+TAG_ERROR=Lỗi
+
+TAG_WARNING=Cảnh báo
+
+TAG_SUCCESS=Thành công
+
+TAG_INFORMATION=Thông tin
 
 BREADCRUMB_ITEM_POS={0} của {1}
 
@@ -37,6 +49,14 @@ BUTTON_ARIA_TYPE_REJECT=Hành động tiêu cực
 
 BUTTON_ARIA_TYPE_EMPHASIZED=Được nhấn mạnh
 
+CAL_LEGEND_TODAY_TEXT=Hôm nay
+
+CAL_LEGEND_SELECTED_TEXT=Ngày được chọn
+
+CAL_LEGEND_WORKING_DAY_TEXT=Ngày làm việc
+
+CAL_LEGEND_NON_WORKING_DAY_TEXT=Ngày không làm việc
+
 CAROUSEL_OF_TEXT=của
 
 CAROUSEL_DOT_TEXT=Mục {0} của {1} được hiển thị
@@ -59,6 +79,8 @@ COLOR_PALETTE_DIALOG_TITLE=Thay đổi màu
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Nhiều màu hơn...
 
+COLOR_PALETTE_DEFAULT_COLOR_TEXT=Màu mặc định
+
 COLORPICKER_ALPHA_SLIDER=Kiểm soát Alpha
 
 COLORPICKER_HUE_SLIDER=Kiểm soát sắc độ màu
@@ -93,8 +115,12 @@ SELECT_ROLE_DESCRIPTION=Hộp danh sách
 
 SELECT_OPTIONS=Lựa chọn các tùy chọn
 
+SHOW_SELECTED_BUTTON=Chỉ hiển thị mục được chọn
+
 INPUT_SUGGESTIONS=Có sẵn đề xuất
 
+MCB_SELECTED_ITEMS=Chọn tất cả ({0} trong số {1})
+
 INPUT_SUGGESTIONS_TITLE=Chọn
 
 INPUT_SUGGESTIONS_ONE_HIT=1 kết quả có sẵn
@@ -139,6 +165,8 @@ MESSAGE_STRIP_SUCCESS=Thanh thông tin thành công
 
 MESSAGE_STRIP_INFORMATION=Thanh thông tin
 
+MESSAGE_STRIP_CUSTOM=Thanh thông tin tùy chỉnh
+
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
 RADIO_BUTTON_GROUP_REQUIRED=Chọn một trong các tùy chọn khả dụng.
@@ -301,6 +329,8 @@ MENU_BACK_BUTTON_ARIA_LABEL=Quay lại
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=Từ chối
 
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Điều hướng
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Đầu mục tương tác
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Sử dụng tổ hợp phím Shift+Mũi tên để định kích cỡ lại

package/src/i18n/messagebundle_zh_CN.properties

@@ -19,7 +19,19 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=联合头像。
 
 AVATAR_GROUP_MOVE=按箭头键进行移动。
 
-BADGE_DESCRIPTION=徽章
+TAG_DESCRIPTION_BADGE=徽章
+
+TAG_DESCRIPTION_TAG=标记
+
+TAG_ROLE_DESCRIPTION=标记按钮
+
+TAG_ERROR=错误
+
+TAG_WARNING=警告
+
+TAG_SUCCESS=成功
+
+TAG_INFORMATION=信息
 
 BREADCRUMB_ITEM_POS={0} / {1}
 
@@ -37,6 +49,14 @@ BUTTON_ARIA_TYPE_REJECT=消极操作
 
 BUTTON_ARIA_TYPE_EMPHASIZED=加重
 
+CAL_LEGEND_TODAY_TEXT=今天
+
+CAL_LEGEND_SELECTED_TEXT=选定日
+
+CAL_LEGEND_WORKING_DAY_TEXT=工作日
+
+CAL_LEGEND_NON_WORKING_DAY_TEXT=非工作日
+
 CAROUSEL_OF_TEXT=/
 
 CAROUSEL_DOT_TEXT=显示项目 {0}，共 {1} 个
@@ -59,6 +79,8 @@ COLOR_PALETTE_DIALOG_TITLE=更改颜色
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多颜色...
 
+COLOR_PALETTE_DEFAULT_COLOR_TEXT=缺省颜色
+
 COLORPICKER_ALPHA_SLIDER=Alpha 控制
 
 COLORPICKER_HUE_SLIDER=色度控制
@@ -93,8 +115,12 @@ SELECT_ROLE_DESCRIPTION=列表框
 
 SELECT_OPTIONS=选择选项
 
+SHOW_SELECTED_BUTTON=仅显示所选项目
+
 INPUT_SUGGESTIONS=有可用建议
 
+MCB_SELECTED_ITEMS=全选（{0} 个，共 {1} 个）
+
 INPUT_SUGGESTIONS_TITLE=选择
 
 INPUT_SUGGESTIONS_ONE_HIT=1 个结果可用
@@ -139,6 +165,8 @@ MESSAGE_STRIP_SUCCESS=成功信息栏
 
 MESSAGE_STRIP_INFORMATION=信息栏
 
+MESSAGE_STRIP_CUSTOM=自定义信息栏
+
 MULTICOMBOBOX_DIALOG_OK_BUTTON=确定
 
 RADIO_BUTTON_GROUP_REQUIRED=选择其中一个可用的选项。
@@ -301,6 +329,8 @@ MENU_BACK_BUTTON_ARIA_LABEL=返回
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=拒绝
 
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=导航
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=交互式抬头
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=使用 Shift+箭头键重新调整大小

package/src/i18n/messagebundle_zh_TW.properties

@@ -19,7 +19,19 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=結合虛擬個人頭像。
 
 AVATAR_GROUP_MOVE=按箭頭鍵以移動。
 
-BADGE_DESCRIPTION=徽章
+TAG_DESCRIPTION_BADGE=徽章
+
+TAG_DESCRIPTION_TAG=標籤
+
+TAG_ROLE_DESCRIPTION=標籤按鈕
+
+TAG_ERROR=錯誤
+
+TAG_WARNING=警告
+
+TAG_SUCCESS=成功
+
+TAG_INFORMATION=資訊
 
 BREADCRUMB_ITEM_POS={0}/{1}
 
@@ -37,6 +49,14 @@ BUTTON_ARIA_TYPE_REJECT=負向作業
 
 BUTTON_ARIA_TYPE_EMPHASIZED=強調
 
+CAL_LEGEND_TODAY_TEXT=今天
+
+CAL_LEGEND_SELECTED_TEXT=選取的日期
+
+CAL_LEGEND_WORKING_DAY_TEXT=工作日
+
+CAL_LEGEND_NON_WORKING_DAY_TEXT=非工作日
+
 CAROUSEL_OF_TEXT=/
 
 CAROUSEL_DOT_TEXT=已顯示項目 {0}/{1}
@@ -59,6 +79,8 @@ COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
+COLOR_PALETTE_DEFAULT_COLOR_TEXT=預設色彩
+
 COLORPICKER_ALPHA_SLIDER=Alpha 控制
 
 COLORPICKER_HUE_SLIDER=色調控制
@@ -93,8 +115,12 @@ SELECT_ROLE_DESCRIPTION=清單方塊
 
 SELECT_OPTIONS=選擇選項
 
+SHOW_SELECTED_BUTTON=僅顯示所選項目
+
 INPUT_SUGGESTIONS=可用建議
 
+MCB_SELECTED_ITEMS=全選 ({0}/{1})
+
 INPUT_SUGGESTIONS_TITLE=選擇
 
 INPUT_SUGGESTIONS_ONE_HIT=1 個可用的結果
@@ -139,6 +165,8 @@ MESSAGE_STRIP_SUCCESS=成功資訊列
 
 MESSAGE_STRIP_INFORMATION=資訊列
 
+MESSAGE_STRIP_CUSTOM=自訂資訊列
+
 MULTICOMBOBOX_DIALOG_OK_BUTTON=確定
 
 RADIO_BUTTON_GROUP_REQUIRED=請選擇其中一個可用的選項。
@@ -301,6 +329,8 @@ MENU_BACK_BUTTON_ARIA_LABEL=返回
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕
 
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=瀏覽
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=互動表頭
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=使用　Shift　+　箭頭鍵以調整大小

package/src/styles/Icon.module.css

@@ -0,0 +1 @@
+@import "../themes/InputIcon.css";

package/src/themes/Avatar.css

@@ -2,6 +2,7 @@
 	display: inline-block;
 	box-sizing: border-box;
 	position: relative;
+	font-family: "72override", var(--sapFontFamily);
 }
 
 /* The ui5_hovered class is set by FileUploader to indicate hover state of the control */
@@ -9,32 +10,27 @@
 	opacity: .7;
 }
 
-:host(:is([interactive]):not([disabled])) {
+:host([interactive]:not([disabled])) {
 	cursor: pointer;
 }
 
-:host(:is([interactive][pressed]):not([hidden])) {
-	background: var(--sapButton_Active_Background);
+:host([interactive]:not([hidden]):active) {
+	background-color: var(--sapButton_Active_Background);
 	border-color: var(--sapButton_Active_BorderColor);
 	color: var(--sapButton_Active_TextColor);
 }
 
-:host(:is([interactive][pressed]):not([hidden]):hover) {
-	background: var(--sapButton_Selected_Hover_Background);
-	border-color: var(--sapButton_Selected_Hover_BorderColor);
-	color: var(--sapButton_Selected_TextColor);
-}
-
-:host(:is([interactive]):not([hidden]):not([pressed]):not([disabled]):hover) {
+:host([interactive]:not([hidden]):not([disabled]):not(:active):hover) {
 	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
 }
 
-:host(:is([interactive][focused]):not([hidden]):not([pressed])) {
+:host([interactive][desktop]:not([hidden])) .ui5-avatar-root:focus-within,
+:host([interactive]:not([hidden])) .ui5-avatar-root:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
-:host(:is([disabled])) {
+:host([disabled]) {
 	opacity: var(--sapContent_DisabledOpacity);
 }
 
@@ -54,6 +50,7 @@
 	outline: none;
 	height: 100%;
 	width: 100%;
+	border-radius: inherit;
 }
 
 /* Sizes */
@@ -66,6 +63,7 @@
 	font-size: var(--_ui5_avatar_fontsize_XS);
 }
 
+:host(:not([size])),
 :host([_size="S"]),
 :host([size="S"]) {
 	min-height: 3rem;
@@ -133,8 +131,8 @@
 
 ::slotted(*) {
 	border-radius: 50%;
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 	pointer-events: none;
 }
 
@@ -241,7 +239,7 @@
 	display: none;
 }
 
-.ui5-avatar-initials:not(.ui5-avatar-initials-hidden) + .ui5-avatar-icon-fallback {
+.ui5-avatar-fallback-icon-hidden {
 	display: none;
 }
 
@@ -259,32 +257,37 @@
 	right: 0;
 	width: 1.125rem;
 	height: 1.125rem;
-	background: var(--sapButton_Emphasized_Background);
-	border: var(--sapButton_Emphasized_Background);
-	border-radius: 1rem;
-	color: var(--sapContent_BadgeTextColor);
-	justify-content: center;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
-}
+	color: var(--sapBackgroundColor);
+
+	--_ui5-tag-height: 1.125rem;
+	--_ui5-tag-border-radius: 50%;
 
-::slotted([ui5-badge][slot="badge"]) {
-	padding: 0.1875rem;
+	--ui5-tag-color-scheme-1-background: var(--sapButton_Emphasized_Background);
+	--ui5-tag-color-scheme-1-color: var(--sapButton_Emphasized_TextColor);
+	--ui5-tag-color-scheme-1-border: var(--sapButton_Emphasized_BorderColor);
 }
 
 :host([_size="L"]) ::slotted([slot="badge"]),
 :host([size="L"]) ::slotted([slot="badge"]) {
 	width: 1.25rem;
 	height: 1.25rem;
+
+	--_ui5-tag-height: 1.25rem;
+	--_ui5-tag-icon-width: 0.875rem;
 }
 
 :host([_size="XL"]) ::slotted([slot="badge"]),
 :host([size="XL"]) ::slotted([slot="badge"]) {
-	padding: 0.375rem;
 	width: 1.75rem;
 	height: 1.75rem;
+
+	--_ui5-tag-height: 1.75rem;
+	--_ui5-tag-icon-width: 1rem;
 }
 
+/* Slotted Badge - Square Avatar Shape */
 :host([shape="Square"]) ::slotted([slot="badge"]) {
 	bottom: -0.125rem;
 	right: -0.125rem;

package/src/themes/AvatarGroup.css

@@ -13,7 +13,8 @@
 	outline: none;
 }
 
-:host([type="Group"]) .ui5-avatar-group-items:focus {
+:host([type="Group"][desktop]) .ui5-avatar-group-items:focus-within,
+:host([type="Group"]) .ui5-avatar-group-items:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 	border-radius: var(--_ui5_avatar_group_focus_border_radius);
@@ -38,6 +39,14 @@
 	pointer-events: none;
 }
 
+.ui5-avatar-group-overflow-btn {
+	overflow: visible;
+}
+
+.ui5-avatar-group-overflow-btn::part(button) {
+	min-width: auto;
+}
+
 ::slotted([ui5-button]:not([hidden])),
 .ui5-avatar-group-overflow-btn:not([hidden]) {
 	--_ui5_button_base_padding: 0;
@@ -47,10 +56,16 @@
 	z-index: 0; /* prevent last visible avatar from covering half of the button */
 }
 
-::slotted([ui5-button][focused]),
-.ui5-avatar-group-overflow-btn[focused] {
+::slotted([ui5-button][desktop]:focus-within),
+.ui5-avatar-group-overflow-btn[desktop]:focus-within {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_overflow_button_focus_offset);
+}
+
+.ui5-avatar-group-overflow-btn::part(button):focus-visible:after {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: 50%;
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/Bar.css

@@ -0,0 +1,75 @@
+:host {
+	background-color: var(--sapPageHeader_Background);
+	height: var(--_ui5_bar_base_height);
+	width: 100%;
+	box-shadow: var(--sapContent_HeaderShadow);
+	display: block;
+}
+
+.ui5-bar-root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: inherit;
+	width: inherit;
+	background-color: inherit;
+	box-shadow: inherit;
+	border-radius: inherit;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.ui5-bar-root .ui5-bar-content-container {
+	min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
+							 + var(--_ui5_bar-end-container-padding-end)
+						  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+}
+
+.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
+	min-width: 0px;
+	overflow: hidden;
+	height: 100%;
+}
+
+.ui5-bar-root .ui5-bar-endcontent-container {
+	padding-inline-end: var(--_ui5_bar-end-container-padding-end);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+}
+.ui5-bar-root .ui5-bar-midcontent-container {
+	padding: 0 var(--_ui5_bar-mid-container-padding-start-end);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+:host([design="Footer"]){
+	background-color: var(--sapPageFooter_Background);
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+	box-shadow: none;
+}
+
+:host([design="Subheader"]){
+	height: var(--_ui5_bar_subheader_height);
+	margin-top: var(--_ui5_bar_subheader_margin-top);
+}
+
+:host([design="FloatingFooter"]){
+	border-radius: var(--sapElement_BorderCornerRadius);
+	background-color: var(--sapPageFooter_Background);
+	box-shadow: var(--sapContent_Shadow1);
+	border: none;
+}
+
+::slotted(*) {
+	margin: 0 0.25rem;
+}