@sapudex/web-components 0.111.0 → 0.117.1

package/src/generated/themes/TextField.css.ts

@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
 
-const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/TextField.css.ts",content:`:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 9px var(--udexSpacer12, 12px)}.udex-text-field__container{width:100%;position:relative;font-family:var(--sapFontFamily, sans-serif)}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:42px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;border:1px solid var(--udex-input-color-standard-default-border);font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-text-field__container:hover .udex-text-field__input{border:1px solid var(--udex-input-color-standard-hover-border)}.udex-text-field__input[open],:host([active]) .udex-text-field__input,.udex-text-field__input:focus{border:1px solid var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__input[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__input{border:1px solid var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__input{border:1px solid var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([displayonly]) .udex-text-field__container .udex-text-field__input{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__container .udex-text-field__input[open],:host([displayonly]) .udex-text-field__container .udex-text-field__input:focus{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__input:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__input:hover,:host([displayonly][value-state="Error"]) .udex-text-field__input:hover{border:none}:host([value-state="Error"]) .udex-text-field__input{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__input:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__input[open],:host([value-state="Error"]) .udex-text-field__input:focus{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__input{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__input:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__input[open],:host([value-state="Warning"]) .udex-text-field__input:focus{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__input{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__input:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__input[open],:host([value-state="Success"]) .udex-text-field__input:focus{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active{line-height:18px;transform:translateY(-110%);padding:0 4px;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px}.udex-text-field_icon-container{position:absolute;display:flex;justify-content:center;align-items:center;right:1px;top:1px}:host(:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([value-state="Success"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container,:host([value-state="Error"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container,:host([value-state="Warning"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--udex-control-button-success-border-color: var(--udexColorGrey4, #A9B4BE);--udex-control-button-error-border-color: var(--udexColorGrey4, #A9B4BE);--udex-control-button-warning-border-color: var(--udexColorGrey4, #A9B4BE)}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}:host .udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}:host .udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}:host .udex-text-field__input[type=number]{appearance:textfield}:host .udex-text-field__input[type=number]::-webkit-outer-spin-button,:host .udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hidden-text{display:none}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/TextField.css.ts",content:`:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 9px var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:42px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;border:1px solid var(--udex-input-color-standard-default-border);font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-text-field__container:hover .udex-text-field__input{border:1px solid var(--udex-input-color-standard-hover-border)}.udex-text-field__input[open],:host([active]) .udex-text-field__input,.udex-text-field__input:focus{border:1px solid var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__input[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__input{border:1px solid var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__input{border:1px solid var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([displayonly]) .udex-text-field__container .udex-text-field__input{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__container .udex-text-field__input[open],:host([displayonly]) .udex-text-field__container .udex-text-field__input:focus{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__input:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__input:hover,:host([displayonly][value-state="Error"]) .udex-text-field__input:hover{border:none}:host([value-state="Error"]) .udex-text-field__input{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__input:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__input[open],:host([value-state="Error"]) .udex-text-field__input:focus{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__input{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__input:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__input[open],:host([value-state="Warning"]) .udex-text-field__input:focus{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__input{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__input:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__input[open],:host([value-state="Success"]) .udex-text-field__input:focus{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active{line-height:18px;transform:translateY(-110%);padding:0 4px;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px}.udex-text-field_icon-container{position:absolute;display:flex;justify-content:center;align-items:center;right:1px;top:1px}:host(:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([value-state="Success"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container,:host([value-state="Error"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container,:host([value-state="Warning"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--udex-control-button-success-border-color: var(--udexColorGrey4, #A9B4BE);--udex-control-button-error-border-color: var(--udexColorGrey4, #A9B4BE);--udex-control-button-warning-border-color: var(--udexColorGrey4, #A9B4BE)}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}:host .udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}:host .udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}:host .udex-text-field__input[type=number]{appearance:textfield}:host .udex-text-field__input[type=number]::-webkit-outer-spin-button,:host .udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hidden-text{display:none}
 `};
 export default styleData;
 	

package/src/i18n/messagebundle.properties

@@ -147,13 +147,21 @@ QUICK_LINKS=Quick Links
 TRENDING=Trending
 ABOUT_SAP=About SAP
 SITE_INFORMATION=Site Information
-SEE_COMPLETE_LIST=Or see our complete list of 
+SEE_COMPLETE_LIST=Or see our complete list of
 LOCAL_COUNTRY_NAMES=local country numbers
 
 #Avatar accessible names
 AVATAR_TEXT=Avatar
 DISABLED=Disabled
 
+#Status badge accessible names
+STATUS_BADGE_TEXT=Status badge
+STATUS_BADGE_EDIT_TITLE=Click to edit profile
+STATUS_BADGE_INFORMATION_TITLE=Click to open profile information
+STATUS_BADGE_WARNING_TITLE=Warning, potential risk with the profile
+STATUS_BADGE_ERROR_TITLE=There is an error with the profile
+STATUS_BADGE_SUCCESS_TITLE=Successfully verified profile
+
 
 #Text for Date Picker Calendar button icon
 CALENDAR_ICON=Employee start date
@@ -164,3 +172,6 @@ TABLE_NO_DATA_FOUND=No data found
 #Text for List Item button icons
 LIST_ITEM_EDIT_ICON=Edit list item entry
 LIST_ITEM_DELETE_ICON=Delete list item entry
+
+#SecondaryNavigationSubItem Aria label for back button
+BACK_BUTTON_LABEL=back button

package/src/i18n/messagebundle_en.properties

@@ -77,9 +77,16 @@ QUICK_LINKS=Quick Links
 TRENDING=Trending
 ABOUT_SAP=About SAP
 SITE_INFORMATION=Site Information
-SEE_COMPLETE_LIST=Or see our complete list of 
+SEE_COMPLETE_LIST=Or see our complete list of
 LOCAL_COUNTRY_NAMES=local country numbers
 AVATAR_TEXT=Avatar
 CALENDAR_ICON=Employee start date
 LIST_ITEM_EDIT_ICON=Edit list item entry
 LIST_ITEM_DELETE_ICON=Delete list item entry
+BACK_BUTTON_LABEL=back button label
+STATUS_BADGE_TEXT=Status Badge
+STATUS_BADGE_EDIT_TITLE=Click to edit profile
+STATUS_BADGE_INFORMATION_TITLE=Click to open profile information
+STATUS_BADGE_WARNING_TITLE=Warning, potential risk with the profile
+STATUS_BADGE_ERROR_TITLE=There is an error with the profile
+STATUS_BADGE_SUCCESS_TITLE=Successfully verified profile

package/src/themes/AccordionItem.css

@@ -1,10 +1,10 @@
 :host {
-  --udex-accordion-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));
-  --udex-accordion-headline-color: var(--sapTextColor, var(--udexCoreTextDark));
-  --udex-accordion-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));
-  --udex-accordion-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
-  --udex-accordion-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));
-  --udex-accordion-border-width: .5px;
+  --udex-accordion-item-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));
+  --udex-accordion-item-headline-color: var(--sapTextColor, var(--udexCoreTextDark));
+  --udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));
+  --udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
+  --udex-accordion-item-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));
+  --udex-accordion-item-border-width: .5px;
   --udex-accordion-item-header-padding: 12px 12px 12px 8px;
   --udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
   font-family: var(--sapFontFamily, sans-serif);
@@ -17,26 +17,26 @@
 
 .udex-accordion-item__header {
   align-items: center;
-  color: var(--udex-accordion-headline-color);
+  color: var(--udex-accordion-item-headline-color);
   display: flex;
-  font-size: var(--udex-accordion-headline-font-size);
+  font-size: var(--udex-accordion-item-headline-font-size);
   gap: var(--udexSpacer12, 12px);
   padding: var(--udex-accordion-item-header-padding);
   line-height: var(--udexTypographyHeadingLineHeight, 1.1);
-  border-bottom: var(--udex-accordion-border-width) solid var(--udex-accordion-border-color);
+  border-bottom: var(--udex-accordion-item-border-width) solid var(--udex-accordion-item-border-color);
   cursor: pointer;
 }
 
 :host([desktop]) .udex-accordion-item__header:focus,
 .udex-accordion-item__header:focus-visible {
-  outline: 2px solid #002A86;
-  border-radius: 8px;
+  outline: 2px solid var(--udexColorBlue10, #002A86);
+  border-radius: var(--udexRadiusM, 8px);
 }
 
 .udex-accordion-item__icon {
   height: var(--udex-button-icon-l-size, 18px);
   width: var(--udex-button-icon-l-size, 18px);
-  color: var(--udex-accordion-icon-color);
+  color: var(--udex-accordion-item-icon-color);
   transform: rotate(0);
 }
 
@@ -61,9 +61,9 @@
 }
 
 .udex-accordion-item__title {
-  margin: 0;
-  font-weight: var(--udex-accordion-title-font-weight);
-  flex: 1;
+  font-weight: var(--udex-accordion-item-title-font-weight);
+  align-items: center;
+  display: flex;
 }
 
 .udex-accordion-item__content {
@@ -78,3 +78,8 @@
 .active .udex-accordion-item__content {
   display: block;
 }
+
+.udex-accordion-item__badge {
+  display: inline-flex;
+  margin-inline-start: var(--udexSpacer8);
+}

package/src/themes/Avatar.css

@@ -126,6 +126,10 @@
   box-shadow: none;
 }
 
+::slotted(*) {
+	pointer-events: all;
+}
+
 /* Styles for avatar with image inside */
 
 :host([color-scheme]) .udex-avatar.udex-avatar--with-image {
@@ -144,6 +148,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  bottom: 0;
+  right: 0;
 }
 
 :host([size="XS"]) .udex-avatar ::slotted([slot="badge"]) {
@@ -181,6 +187,20 @@
   padding: 6px;
 }
 
+:host([show-attention-badge][size="XS"]) .udex-avatar::before {
+  position: absolute;
+  content: '';
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  width: 6px;
+  height: 6px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  background-color: var(--udexColorRed7);
+}
+
+
 /* Size styles */
 
 :host([size="XS"]) .udex-avatar {

package/src/themes/Breadcrumbs.css

@@ -1,7 +1,7 @@
 :host {
   --udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));
   --udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);
-  --udex-breadcrumbs_margin: 0;
+  --udex-breadcrumbs-margin: 0;
 }
 
 .udex-breadcrumbs {
@@ -22,6 +22,7 @@
 
 .udex-breadcrumbs > ol > li {
   display: inline-flex;
+  align-items: baseline;
 }
 
 .udex-breadcrumbs__separator::after {
@@ -120,6 +121,7 @@
   padding-left: 0;
 }
 
-.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after, .udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after {
+.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after,
+.udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after {
   border-bottom: 0;
 }

package/src/themes/Checkbox.css

@@ -14,3 +14,15 @@
   border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
   color: var(--sapField_TextColor);
 }
+
+:host([required]) .ui5-checkbox-label::after {
+  padding-left: var(--udexSpacer8);
+  padding-right: var(--udexSpacer2);
+  content: "*";
+}
+
+:host([required]) .ui5-checkbox-label:dir(rtl)::after {
+  padding-left: var(--udexSpacer2);
+  padding-right: var(--udexSpacer8);
+  content: "*";
+}

package/src/themes/CountrySelector.css

@@ -2,6 +2,9 @@
   --udex-country-selector-flag-width: 30px;
   --udex-country-selector-flag-height: 20px;
   --udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, 0.4);
+  --udex-country-selector-min-width: 320px;
+  --udex-country-selector-max-width: 100%;
+  --udex-country-selector-min-width-xs-and-s: 100%;
 }
 
 .udex-country-selector__text {
@@ -18,11 +21,19 @@
   right: var(--udexSpacer32);
 }
 
+@media (width < 640px) {
+  .udex-country-selector__trigger{
+    min-width: var(--udex-country-selector-min-width-xs-and-s);
+  }
+}
+
 .udex-country-selector__trigger {
   display: flex;
   align-items: center;
   position: relative;
-  width: max-content;
+  max-width: var(--udex-country-selector-max-width);
+  min-width: var(--udex-country-selector-min-width);
+  width: 100%;
 }
 
 :host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger {
@@ -109,3 +120,7 @@ udex-list-item::part(item) {
 udex-text-field[readonly]::part(label) {
   background: linear-gradient(var(--sapField_Background) 65%, var(--sapField_ReadOnly_Background) 35%);
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: 100%;
+}

package/src/themes/DatePicker.css

@@ -10,7 +10,7 @@
 }
 
 .udex-date-picker__calendar {
-  min-width: var(--udex-date-picker-width, 354px);
+  min-width: var(--udex-date-picker-width);
   background-color: var(--udexNeutralColorWhite, #ffffff);
   border-radius: 8px;
   box-shadow: 0 2px 8px 0 #2236494D;

package/src/themes/Dropdown.css

@@ -6,8 +6,9 @@
   --udex-dropdown-default-background-color: var(--udexColorNeutralWhite, #fff);
   --udex-dropdown-horizontal-distance: 0;
   --udex-dropdown-vertical-distance: 0;
-  --udex-dropdown-pane-max-width: 640px;
   --udex-dropdown-pane-min-width: 320px;
+  --udex-dropdown-pane-max-width: 640px;
+  --udex-dropdown-pane-width: fit-content;
   --udex-dropdown-pane-max-height: none;
   --udex-dropdown-pane-overflow: visible;
   --udex-dropdown-pane-content-overflow: auto;
@@ -20,6 +21,7 @@
   background: var(--udex-dropdown-default-background-color);
   min-width: var(--udex-dropdown-pane-min-width);
   max-width: var(--udex-dropdown-pane-max-width);
+  width: var(--udex-dropdown-pane-width);
   max-height: var(--udex-dropdown-pane-max-height);
   margin: var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);
   overflow: var(--udex-dropdown-pane-overflow);

package/src/themes/FilterMenu.css

@@ -16,6 +16,11 @@
 
   --udex-filter-menu-trigger-selection-bar-background: var(--sapHoverColor, #0070f2);
   --udex-filter-menu-trigger-outline-border-color:  var(--udexColorBlue10, #002A86);
+
+  --udex-filter-menu-dropdown-width: fit-content;
+  --udex-filter-menu-dropdown-max-width: 640px;
+
+  display: inline-block;
 }
 
 :host([desktop]) .udex-filter-menu__trigger:focus,
@@ -134,3 +139,8 @@
 .udex-filter-menu__badge {
   margin-inline-start: var(--udexSpacer4, 4px);
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: var(--udex-filter-menu-dropdown-max-width);
+  --udex-dropdown-pane-width: var(--udex-filter-menu-dropdown-width);
+}

package/src/themes/HeroBanner.css

@@ -10,7 +10,11 @@
   --udexHeroBannerContentZIndex: 2;
   --udexHeroBannerContentPaddingHorizontal: var(--udexGridXSMargins, 24px);
   --udexHeroBannerContentPaddingVertical: var(--udexGridXSMargins, 24px);
-
+  --udexHeroBannerContentPaddingVerticalXLtoM: var(--udexSpacer56, 56px);
+  --udexHeroBannerPaddingHorizontalLandM: var(--udexSpacer72);
+  --udexHeroBannerPaddingHorizontalS: var(--udexSpacer48);
+  --udexHeroBannerPaddingHorizontalXS: var(--udexSpacer24);
+  --udexHeroBannerBackgroundVideoColor: var(--udexColorNeutralBlack);
   --udexHeroBannerBackgroundVideoColor: var(--udexColorNeutralBlack);
 
   --udexHeroBannerSlotMaxWidth: calc(
@@ -23,12 +27,15 @@
 
 .udex-hero-banner {
   container-type: inline-size;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
   min-height: var(--udexHeroBannerMinHeight, 200px);
 }
 
+.udex-hero-banner__container {
+  position: relative;
+  max-width: 1428px;
+  padding: 0;
+}
+
 .udex-hero-banner--video {
   color: var(--udexColorNeutralWhite);
   justify-content: center;
@@ -89,8 +96,37 @@
   flex-basis: 100%;
   flex-grow: 1;
   z-index: var(--udexHeroBannerContentZIndex, 2);
-  padding: var(--udexHeroBannerContentPaddingVertical)
-    var(--udexHeroBannerContentPaddingHorizontal);
+  padding: 0;
+}
+
+.udex-hero-banner__content-container {
+  display: flex;
+  gap: var(--udexSpacer48, 48px);
+  padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexSpacer84);
+}
+
+@media (max-width: 1599px) {
+  .udex-hero-banner__content-container {
+    padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM);
+  }
+}
+
+@media (max-width: 979px) {
+  .udex-hero-banner__content-container{
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS);
+  }
+}
+
+@media (max-width: 639px) {
+  .udex-hero-banner__container {
+    max-width: 100%;
+  }
+  .udex-hero-banner__content-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--udexSpacer32, 32px);
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS);
+  }
 }
 
 @container (min-width: 980px) {

package/src/themes/InputGroup.css

@@ -0,0 +1,19 @@
+.udex-input-group__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udexSpacer4);
+}
+
+:host([orientation="Horizontal"]) .udex-input-group__content {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--udexSpacer12);
+}
+
+.udex-input-group__content {
+  padding-bottom: var(--udexSpacer4);
+}
+
+.hidden-text {
+  display: none;
+}

package/src/themes/MastheadItem.css

@@ -153,6 +153,8 @@
   border-radius: var(--udex-masthead-item-border-radius);
 }
 
+:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,
+:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after,
 :host(:active) .udex-masthead-item.udex-masthead-item__button--profile:after,
 :host([selected]) .udex-masthead-item.udex-masthead-item__button--profile:after {
   bottom: -14px;
@@ -165,13 +167,6 @@
   color:var(--udex-masthead-item-color-active);
 }
 
-:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,
-:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after{
-  bottom: -20px;
-  left: -7px;
-  right: -7px;
-}
-
 .udex-masthead-item__icon-container {
   display: flex;
   align-items: center;

package/src/themes/MastheadMenuItem.css

@@ -160,10 +160,6 @@ button.udex-masthead-menu-item {
 }
 
 @media (max-width: 1279px) {
-  :host([has-border]) .udex-masthead-menu-item_is-list{
-    border-bottom: none
-  }
-
   .udex-masthead-menu-item {
     padding: var(--udex-masthead-menu-item-padding-mobile);
   }

package/src/themes/MastheadShell.css

@@ -124,16 +124,12 @@
 .udex-masthead-shell__right-menu {
   display: flex;
   align-items: center;
+  gap: var(--udexSpacer8);
 }
 
 .udex-masthead-shell__explore {
   white-space: nowrap;
-  margin-inline-end: var(--udexSpacer20);
-}
-
-.udex-masthead-shell__cart,
-.udex-masthead-shell__search-icon {
-  margin-inline-end: 10px;
+  margin-inline-end: var(--udexSpacer12);
 }
 
 .udex-masthead-shell__cart,
@@ -149,12 +145,11 @@
 
 .udex-masthead-shell__menu-btn {
   height: 18px;
-  margin-inline-start: var(--udexSpacer20);
 }
 
 .udex-masthead-shell__close-btn {
   position: relative;
-  margin-inline-start: var(--udexSpacer24);
+  margin-inline-start: var(--udexSpacer12);
 }
 
 .udex-masthead-shell__close-btn:before {
@@ -164,14 +159,14 @@
   top: 0;
   bottom: 0;
   height: 32px;
-  border-radius: 2px;
+  border-radius: var(--udexRadiusXXS);
   width: 1px;
   background: var(--udex-masthead-shell-close-button-divider-color);
 }
 
 :dir(rtl) .udex-masthead-shell__close-btn:before {
   left: auto;
-  right: -20px;
+  right: -12px;
 }
 
 :dir(rtl) .udex-masthead-mobile-wrap {
@@ -225,6 +220,10 @@
   .udex-masthead-shell_mobile-menu-open .udex-masthead-shell__close-btn {
     display: flex;
   }
+
+  .udex-masthead-shell__right-menu {
+    gap: var(--udexSpacer12);
+  }
 }
 
 @media (max-width: 979px) {

package/src/themes/MediaPlayer.css

@@ -5,6 +5,7 @@
   --udex-media-player-mobile-width: 100%;
   --udex-media-player-controls-bar-height: 48px;
   --udex-media-player-controls-bar-small-height: 34px;
+  --udex-media-player-poster-object-fit: cover;
   --udex-media-player-base-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M423.5 49h-335c-13 0-24 12-24 27v329c0 15 11 27 24 27h335c13 0 24-12 24-27V76c0-15-11-27-24-27zm0 431h-335c-40 0-72-33-72-75V76c0-41 32-75 72-75h335c40 0 72 34 72 75v329c0 42-32 75-72 75z"></path></svg>');
   --udex-media-player-pause-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M358 480h-33q-11 0-18.5-7.5T299 454V58q0-11 7.5-18.5T325 32h33q11 0 18.5 7.5T384 58v396q0 11-7.5 18.5T358 480zm-171 0h-33q-11 0-18.5-7.5T128 454V58q0-11 7.5-18.5T154 32h33q11 0 18.5 7.5T213 58v396q0 11-7.5 18.5T187 480z"></path></svg>');
   --udex-media-player-play-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M122 480q-11 0-18.5-7.5T96 454V58q0-11 7.5-18.5T122 32q7 0 15 5l269 198q10 8 10 21t-10 21L137 475q-8 5-15 5zm25-372v296l200-148z"></path></svg>');
@@ -1311,8 +1312,8 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
 .vjs-poster img {
   width: 100%;
   height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  -o-object-fit: var(--udex-media-player-poster-object-fit);
+  object-fit: var(--udex-media-player-poster-object-fit);
 }
 
 .video-js .vjs-live-control {

package/src/themes/PhoneNumberField.css

@@ -37,7 +37,6 @@
 
   --udex-phone-number-field-color-label-background: var(--sapField_Background, #fff);
 
-  --udex-phone-number-field-width: 320px;
   --udex-phone-number-field-height: 42px;
   --udex-phone-number-field-paddings: 9px var(--udexSpacer12, 12px);
   --udex-phone-number-field-button-margins-vertical: -10px;
@@ -48,12 +47,20 @@
   --udex-phone-number-field-flag-height: 20px;
   --udex-phone-number-field-button-border: var(--udexColorGrey4, #A9B4BE);
   --udex-phone-number-field-button-color-tertiary-standard-hover-border: var(--udexColorGrey4, #A9B4BE);
-
+  --udex-phone-number-field-min-width: 320px;
+  --udex-phone-number-field-min-width-xs-and-s :100%;
+  --udex-phone-number-field-max-width: 100%;
   display: block;
   font-family: var(--sapFontFamily, sans-serif);
   font-size: var(--sapFontSize, 16px);
   color: var(--udex-phone-number-field-color-standard-default-text);
-  width: var(--udex-phone-number-field-width);
+
+}
+
+@media (width < 640px) {
+  .udex-phone-number-field{
+    min-width: var(--udex-phone-number-field-min-width-xs-and-s);
+  }
 }
 
 .udex-phone-number-field {
@@ -64,6 +71,9 @@
   background: var(--udex-phone-number-field-color-standard-default-background);
   border-radius: var(--udex-phone-number-field-radius);
   border: 1px solid var(--udex-phone-number-field-color-standard-default-border);
+  min-width: var(--udex-phone-number-field-min-width);
+  max-width: var(--udex-phone-number-field-max-width);
+  width: 100%;
 }
 
 .udex-phone-number-field__label {
@@ -335,3 +345,7 @@
   border-left: 1px solid var(--udex-phone-number-field-button-color-tertiary-standard-hover-border);
   border-right: 1px solid transparent;
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: 100%;
+}