@sapudex/web-components 2.32.1 → 2.34.0

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-header-background-color: transparent;--udex-button-tab-vertical-gap: var(--udexSpacer32, 32px);--udex-button-tab-text-transform-first-letter: uppercase;--udex-button-tab-text-transform: none;--udex-button-tab-text-color-default: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-text-color-hover: var(--udexColorBlue8);--udex-button-tab-text-color-active: var(--udexColorBlue8);--udex-button-tab-border-color-active: var(--udexColorBlue8);--udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));--udex-button-tab-font-family: var(--sapFontFamily, sans-serif);--udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));--udex-button-tab-line-height: 1.125;--udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);--udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);--udex-button-tab-with-icon-without-background-border-color-active: transparent;--udex-button-tab-with-icon-background: var(--sapList_SelectionBackgroundColor, var(--udexColorBlue1));--udex-button-tab-with-icon-background-hover: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-button-tab-with-icon-color: var(--sapAccentColor6, var(--udexColorBlue7));--udex-button-tab-with-icon-color-hover: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);--udex-button-tab-with-icon-background-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));--udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-without-background-margin-bottom: var(--udexSpacer16, 16px);--udex-button-tab-with-icon-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-tab-with-icon-text-color-active: var(--sapTextColor, --udexCoreNavigation);--udex-tab-navigation-tab-with-icon-without-background-color: transparent;--udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;--udex-button-more-margin-inline-end: 0;--udex-button-more-s-font-size: var(--udexTypographyNavigationMediumMFontSize, 14px);--udex-button-more-s-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-s-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-s-line-height: 1.07143;--udex-button-more-s-text-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-padding-vertical: var(--udexSpacer4, 4px);--udex-button-more-s-padding-horizontal: var(--udexSpacer8, 8px);--udex-button-more-s-border-color: var(--sapButton_Neutral_BorderColor, var(--udexColorGrey4));--udex-button-more-s-icon-margin-inline-start: var(--udexSpacer4, 4px);--udex-button-more-s-icon-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-border-color-toggled: var(--udexColorBlue4);--udex-button-more-s-text-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-s-icon-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-m-font-size: var(--sapFontSize, var(--udexTypographyNavigationMediumXLFontSize));--udex-button-more-m-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-m-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-m-line-height: 1.125;--udex-button-more-m-padding-vertical: var(--udexSpacer8, 8px);--udex-button-more-m-padding-horizontal: var(--udexSpacer12, 12px);--udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);--udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);--udex-tab-navigation-content-font-family: var(--sapFontFamily, sans-serif);--udex-tab-navigation-content-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-tab-navigation-content-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-navigation-content-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-tab-header-width: 428px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer{margin-bottom:var(--udex-button-tab-with-icon-without-background-margin-bottom);background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color);color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active:before{background-color:var(--udex-button-tab-with-icon-without-background-border-color-active)}:host([mode="Dark"]){--udex-header-background-color: var(--sapList_GroupHeaderTextColor, var(--udexColorGrey10));--udex-button-tab-text-color-default: var(--sapList_GroupHeaderBackground, var(--udexColorNeutralWhite));--udex-button-tab-text-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-border-color-active: transparent;--udex-button-tab-with-icon-background: transparent;--udex-button-tab-with-icon-color: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-background-active: transparent;--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge,:host([icon-without-background]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-inline-end:-9px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer,:host([icon-without-background]) .udex-tab-navigation__button-icon{width:24px;height:24px}:host([icon-without-background]) .udex-tab-navigation__button-tab--with-icon{padding-block-end:var(--udex-button-tab-padding-vertical)}:host([icon-without-background]) .udex-tabs-navigation__button-tab{padding-bottom:var(--udex-button-tab-padding-vertical)}:host(:not([icon-without-background])) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{color:var(--udex-button-tab-with-icon-text-color-active)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer,:host([mode="Dark"]) .udex-tab-navigation__button-icon{width:32px;height:32px}:host([size-more-button="Medium"]) .udex-tab-navigation__button-more{padding:var(--udex-button-more-m-padding-vertical) var(--udex-button-more-m-padding-horizontal);height:34px;font-size:var(--udex-button-more-m-font-size);font-family:var(--udex-button-more-m-font-family);font-weight:var(--udex-button-more-m-font-weight);line-height:var(--udex-button-more-m-line-height)}:host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,.udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text{outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.udex-tab-navigation__root{width:100%}.udex-tab-navigation__header{background-color:var(--udex-header-background-color);min-height:43px;display:flex;align-items:center;position:relative}.udex-tab-navigation__header:before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;border-bottom:1px solid var(--udexColorGrey3, #D5DADD)}.udex-tab-navigation__header-tabs{display:flex;flex:1 1 0%;overflow:hidden;white-space:nowrap}.udex-tab-navigation__button-tab,.udex-tab-navigation__button-more{padding:0;display:block;background:none;border:0;border-radius:0;cursor:pointer}.udex-tab-navigation__button-tab{padding:var(--udex-button-tab-padding-vertical) var(--udex-button-tab-padding-horizontal) calc(var(--udex-button-tab-padding-vertical) + 3px);position:relative;z-index:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--udex-button-tab-text-color-default);font-size:var(--udex-button-tab-font-size-default);font-family:var(--udex-button-tab-font-family);font-weight:var(--udex-button-tab-font-weight);line-height:var(--udex-button-tab-line-height);text-decoration:none;text-align:center;text-transform:var(--udex-button-tab-text-transform);white-space:normal}.udex-tab-navigation__button-text{margin:0}.udex-tab-navigation__button-text:first-letter{text-transform:var(--udex-button-tab-text-transform-first-letter)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon{justify-content:start}.udex-tab-navigation__button-tab:not(.udex-tab-navigation__button-tab--icon-tab):hover{color:var(--udex-button-tab-text-color-hover)}.udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{font-weight:var(--udex-button-tab-with-icon-font-weight)}.udex-tab-navigation__button-tab:focus-visible{outline:none}.udex-tab-navigation__button-tab[hidden]{display:none}.udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:var(--udex-button-tab-vertical-gap)}.udex-tab-navigation__button-tab--with-icon{padding-block-end:calc(var(--udex-button-tab-padding-vertical) + 2px)}.udex-tab-navigation__button-tab--active{color:var(--udex-button-tab-text-color-active)}.udex-tab-navigation__button-tab--active:before{content:"";position:absolute;inset-block-end:0;inset-inline:0 0;z-index:1;height:3px;background-color:var(--udex-button-tab-border-color-active);border-radius:2px 2px 0 0}.udex-tab-navigation__button-badge{position:absolute;inset-block-start:var(--udexSpacer12);inset-inline-end:-6px;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}.udex-tab-navigation__button-more{margin-inline-start:auto;padding:var(--udex-button-more-s-padding-vertical) var(--udex-button-more-s-padding-horizontal);display:flex;align-items:center;flex:0 0 0;font-size:var(--udex-button-more-s-font-size);font-family:var(--udex-button-more-s-font-family);font-weight:var(--udex-button-more-s-font-weight);line-height:var(--udex-button-more-s-line-height);color:var(--udex-button-more-s-text-color);border:1px solid var(--udex-button-more-s-border-color);border-radius:var(--udexRadiusM, 8px);margin-inline-end:var(--udex-button-more-margin-inline-end)}:host([desktop]) .udex-tab-navigation__button-more:focus,.udex-tab-navigation__button-more:focus-visible{outline:2px solid var(--udex-button-tab-text-color-active);outline-offset:2px}.udex-tab-navigation__button-more[hidden]{display:none}.udex-tab-navigation__button-more--lg .udex-tab-navigation__button-more-icon{width:16px;height:16px}.udex-tab-navigation__button-more-icon{margin-inline-start:var(--udex-button-more-s-icon-margin-inline-start);width:14px;height:14px;color:var(--udex-button-more-s-icon-color)}.udex-tab-navigation__button-more--toggled{border-color:var(--udex-button-more-s-border-color-toggled);color:var(--udex-button-more-s-text-color-toggled)}.udex-tab-navigation__button-more--toggled .udex-tab-navigation__button-more-icon{color:var(--udex-button-more-s-icon-color-toggled)}.udex-tab-navigation__button-icon-outer{margin-left:auto;margin-right:auto;margin-bottom:var(--udex-button-tab-with-icon-margin-bottom);display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;border-radius:50%;background-color:var(--udex-button-tab-with-icon-background);color:var(--udex-button-tab-with-icon-color);position:relative;z-index:0}.udex-tab-navigation__button-icon{width:16px;height:16px;color:var(--udex-button-tab-with-icon-color)}.udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-block-start:1px;inset-inline-end:1px}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-active)}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-active)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-hover)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-hover)}.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-desktop);font-family:var(--udex-tab-navigation-content-font-family);font-size:var(--udex-tab-navigation-content-font-size);font-weight:var(--udex-tab-navigation-content-font-weight);line-height:var(--udex-tab-navigation-content-line-height)}.udex-tab-navigation__content-item:focus,.udex-tab-navigation__content-item:focus-visible{outline-offset:2px;outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.udex-tab-navigation__badge{margin-inline-start:var(--udexSpacer4);display:inline-flex}.udex-tab-navigation__button-body-text,.udex-tab-navigation__button-link{display:none}@media screen and (max-width: 979px){.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-mobile)}:host([orientation="Vertical"]) .udex-tab-navigation__root{flex-direction:column}:host([orientation="Vertical"]) .udex-tab-navigation__header{flex:0 0 100%}:host([orientation="Vertical"]) .udex-tab-navigation__content{flex:0 0 100%;padding-inline-start:0}:host([orientation="Vertical"])>.udex-tab-navigation__root>.udex-tab-navigation__content{display:none}}:host([orientation="Vertical"]) .udex-tab-navigation__root{display:flex;gap:var(--udexSpacer24, 24px)}:host([orientation="Vertical"]) .udex-tab-navigation__header{flex-direction:column;align-items:stretch;min-height:auto;height:auto;flex:0 0 25%;width:100%;max-height:none;align-self:var(--udex-tab-navigation-header-alignment, flex-start)}:host([orientation="Vertical"][vertical-alignment="Center"]){--udex-tab-navigation-header-alignment: center}:host([orientation="Vertical"]) .udex-tab-navigation__header:before{display:none}:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs{flex-direction:column;gap:var(--udexSpacer16, 16px);overflow:visible;white-space:normal;max-height:none;border-inline-start:1px solid var(--udexColorGrey3, #D5DADD)}@media screen and (max-width: 979px){:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs{gap:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-tab:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__tab-wrapper:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-link:not(:last-child):not(:has(+.udex-tab-navigation__content)){margin-block-end:var(--udexSpacer8, 8px)}}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab{padding:var(--udexSpacer16, 16px);align-items:flex-start;width:100%;height:auto;min-height:auto;margin-inline-end:0;transition:all .2s ease-in}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:0}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active{padding:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active:before{content:"";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--udexSpacer16, 16px);padding:var(--udexSpacer16, 16px);transition:all .2s ease-in}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active){padding:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active):before{content:"";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab{padding:0}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab--active:before{display:none}:host([orientation="Vertical"]) .udex-tab-navigation__button-badge{inset-block-start:0;inset-inline-end:-10px}:host([orientation="Vertical"]) .udex-tab-navigation__button-text{position:relative;font-size:var(--udexTypographyHeadingRegularXXSFontSize, 20px);line-height:1.1;font-weight:var(--udexTypographyFontWeightMedium);text-align:start}:host([orientation="Vertical"]) .udex-tab-navigation__button-body-text{display:none;margin:0;font-family:var(--udex-button-tab-font-family);font-size:var(--udexTypographyBodyXSFontSize, 14px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udexColorGrey7);line-height:var(--udex-tab-navigation-content-line-height);text-align:start}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-body-text{display:block}:host([orientation="Vertical"]) .udex-tab-navigation__button-links{display:none;flex-direction:column;gap:var(--udexSpacer2, 2px)}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-links{display:flex}:host([orientation="Vertical"]) .udex-tab-navigation__content{flex:1 1 75%;padding-block-start:0;padding-inline-start:var(--udexSpacer16, 16px)}:host([orientation="Vertical"][placement="End"]) .udex-tab-navigation__header{order:1}:host([orientation="Vertical"]) .udex-tab-navigation__play-button{margin-block-end:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__footer{margin-block-start:var(--udex-tab-navigation-footer-spacing, var(--udexSpacer20, 20px));padding-inline-start:var(--udexSpacer16, 16px)}
+export default `:host{--udex-header-background-color: transparent;--udex-button-tab-vertical-gap: var(--udexSpacer32, 32px);--udex-button-tab-text-transform-first-letter: uppercase;--udex-button-tab-text-transform: none;--udex-button-tab-text-color-default: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-text-color-hover: var(--udexColorBlue8);--udex-button-tab-text-color-active: var(--udexColorBlue8);--udex-button-tab-border-color-active: var(--udexColorBlue8);--udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));--udex-button-tab-font-family: var(--sapFontFamily, sans-serif);--udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));--udex-button-tab-line-height: 1.1;--udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);--udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);--udex-button-tab-with-icon-without-background-border-color-active: transparent;--udex-button-tab-with-icon-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-tab-with-icon-background-hover: var(--udexColorBlue2, #D1EFFF);--udex-button-tab-with-icon-color: var(--udexColorGrey7, #475E75);--udex-button-tab-with-icon-color-hover: var(--udexColorGrey9, #223548);--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);--udex-button-tab-with-icon-background-active: var(--udexColorBlue8, #0057D2);--udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));--udex-button-tab-with-icon-border-color: var(--udexColorGrey3, #D5DADD);--udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-without-background-margin-bottom: var(--udexSpacer16, 16px);--udex-button-tab-with-icon-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-tab-with-icon-text-color-active: var(--sapTextColor, --udexCoreNavigation);--udex-tab-navigation-tab-with-icon-without-background-color: transparent;--udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;--udex-button-more-margin-inline-end: 0;--udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);--udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);--udex-tab-navigation-content-font-family: var(--sapFontFamily, sans-serif);--udex-tab-navigation-content-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-tab-navigation-content-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-navigation-content-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-tab-header-width: 428px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer{margin-bottom:var(--udex-button-tab-with-icon-without-background-margin-bottom);background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color);color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active:before{background-color:var(--udex-button-tab-with-icon-without-background-border-color-active)}:host([mode="Dark"]){--udex-header-background-color: var(--sapList_GroupHeaderTextColor, var(--udexColorGrey10));--udex-button-tab-text-color-default: var(--sapList_GroupHeaderBackground, var(--udexColorNeutralWhite));--udex-button-tab-text-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-border-color-active: transparent;--udex-button-tab-with-icon-background: transparent;--udex-button-tab-with-icon-color: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-background-active: transparent;--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge,:host([icon-without-background]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-inline-end:-9px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer,:host([icon-without-background]) .udex-tab-navigation__button-icon{width:24px;height:24px}:host([icon-without-background]) .udex-tab-navigation__button-tab--with-icon{padding-block-end:var(--udex-button-tab-padding-vertical)}:host([icon-without-background]) .udex-tabs-navigation__button-tab{padding-bottom:var(--udex-button-tab-padding-vertical)}:host(:not([icon-without-background])) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{color:var(--udex-button-tab-with-icon-text-color-active)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer,:host([mode="Dark"]) .udex-tab-navigation__button-icon{width:32px;height:32px}:host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,.udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text{outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.udex-tab-navigation__root{width:100%}.udex-tab-navigation__header{background-color:var(--udex-header-background-color);min-height:43px;display:flex;align-items:center;position:relative}.udex-tab-navigation__header:before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;border-bottom:1px solid var(--udexColorGrey3, #D5DADD)}.udex-tab-navigation__header-tabs{display:flex;flex:1 1 0%;overflow:hidden;white-space:nowrap}.udex-tab-navigation__button-tab{padding:0;display:block;background:none;border:0;border-radius:0;cursor:pointer}.udex-tab-navigation__button-tab{padding:var(--udex-button-tab-padding-vertical) var(--udex-button-tab-padding-horizontal) calc(var(--udex-button-tab-padding-vertical) + 3px);position:relative;z-index:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--udex-button-tab-text-color-default);font-size:var(--udex-button-tab-font-size-default);font-family:var(--udex-button-tab-font-family);font-weight:var(--udex-button-tab-font-weight);line-height:var(--udex-button-tab-line-height);text-decoration:none;text-align:center;text-transform:var(--udex-button-tab-text-transform);white-space:normal}.udex-tab-navigation__button-text{margin:0}.udex-tab-navigation__button-text:first-letter{text-transform:var(--udex-button-tab-text-transform-first-letter)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon{justify-content:start}.udex-tab-navigation__button-tab:not(.udex-tab-navigation__button-tab--icon-tab):hover{color:var(--udex-button-tab-text-color-hover)}.udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{font-weight:var(--udex-button-tab-with-icon-font-weight)}.udex-tab-navigation__button-tab:focus-visible{outline:none}.udex-tab-navigation__button-tab[hidden]{display:none}.udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:var(--udex-button-tab-vertical-gap)}.udex-tab-navigation__button-tab--with-icon{padding-block-end:calc(var(--udex-button-tab-padding-vertical) + 2px)}.udex-tab-navigation__button-tab--active{color:var(--udex-button-tab-text-color-active)}.udex-tab-navigation__button-tab--active:before{content:"";position:absolute;inset-block-end:0;inset-inline:0 0;z-index:1;height:3px;background-color:var(--udex-button-tab-border-color-active);border-radius:2px 2px 0 0}.udex-tab-navigation__button-badge{position:absolute;inset-block-start:var(--udexSpacer12);inset-inline-end:-6px;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}.udex-tab-navigation__button-more{margin-inline-start:auto;flex:0 0 auto;margin-inline-end:var(--udex-button-more-margin-inline-end)}.udex-tab-navigation__button-more[hidden]{display:none}.udex-tab-navigation__button-icon-outer{margin-left:auto;margin-right:auto;margin-bottom:var(--udex-button-tab-with-icon-margin-bottom);display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;border-radius:50%;background-color:var(--udex-button-tab-with-icon-background);color:var(--udex-button-tab-with-icon-color);box-shadow:inset 0 0 0 1px var(--udex-button-tab-with-icon-border-color);position:relative;z-index:0}.udex-tab-navigation__button-icon{width:16px;height:16px;color:var(--udex-button-tab-with-icon-color)}.udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-block-start:1px;inset-inline-end:1px}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-active);box-shadow:none}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-active)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-hover);box-shadow:none}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-hover)}.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-desktop);font-family:var(--udex-tab-navigation-content-font-family);font-size:var(--udex-tab-navigation-content-font-size);font-weight:var(--udex-tab-navigation-content-font-weight);line-height:var(--udex-tab-navigation-content-line-height)}.udex-tab-navigation__content-item:focus,.udex-tab-navigation__content-item:focus-visible{outline-offset:2px;outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.udex-tab-navigation__badge{margin-inline-start:var(--udexSpacer4);display:inline-flex}.udex-tab-navigation__button-body-text,.udex-tab-navigation__button-link{display:none}@media screen and (max-width: 979px){.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-mobile)}:host([orientation="Vertical"]) .udex-tab-navigation__root{flex-direction:column}:host([orientation="Vertical"]) .udex-tab-navigation__header{flex:0 0 100%}:host([orientation="Vertical"]) .udex-tab-navigation__content{flex:0 0 100%;padding-inline-start:0}:host([orientation="Vertical"])>.udex-tab-navigation__root>.udex-tab-navigation__content{display:none}}:host([orientation="Vertical"]) .udex-tab-navigation__root{display:flex;gap:var(--udexSpacer24, 24px)}:host([orientation="Vertical"]) .udex-tab-navigation__header{flex-direction:column;align-items:stretch;min-height:auto;height:auto;flex:0 0 25%;width:100%;max-height:none;align-self:var(--udex-tab-navigation-header-alignment, flex-start)}:host([orientation="Vertical"][vertical-alignment="Center"]){--udex-tab-navigation-header-alignment: center}:host([orientation="Vertical"]) .udex-tab-navigation__header:before{display:none}:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs{flex-direction:column;gap:var(--udexSpacer16, 16px);overflow:visible;white-space:normal;max-height:none;border-inline-start:1px solid var(--udexColorGrey3, #D5DADD)}@media screen and (max-width: 979px){:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs{gap:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-tab:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__tab-wrapper:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-link:not(:last-child):not(:has(+.udex-tab-navigation__content)){margin-block-end:var(--udexSpacer8, 8px)}}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab{padding:var(--udexSpacer16, 16px);align-items:flex-start;width:100%;height:auto;min-height:auto;margin-inline-end:0;transition:all .2s ease-in}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:0}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active{padding:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active:before{content:"";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--udexSpacer16, 16px);padding:var(--udexSpacer16, 16px);transition:all .2s ease-in}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active){padding:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active):before{content:"";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab{padding:0}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab--active:before{display:none}:host([orientation="Vertical"]) .udex-tab-navigation__button-badge{inset-block-start:0;inset-inline-end:-10px}:host([orientation="Vertical"]) .udex-tab-navigation__button-text{position:relative;font-size:var(--udexTypographyHeadingRegularXXSFontSize, 20px);line-height:1.1;font-weight:var(--udexTypographyFontWeightMedium);text-align:start}:host([orientation="Vertical"]) .udex-tab-navigation__button-body-text{display:none;margin:0;font-family:var(--udex-button-tab-font-family);font-size:var(--udexTypographyBodyXSFontSize, 14px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udexColorGrey7);line-height:var(--udex-tab-navigation-content-line-height);text-align:start}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-body-text{display:block}:host([orientation="Vertical"]) .udex-tab-navigation__button-links{display:none;flex-direction:column;gap:var(--udexSpacer2, 2px)}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-links{display:flex}:host([orientation="Vertical"]) .udex-tab-navigation__content{flex:1 1 75%;padding-block-start:0;padding-inline-start:var(--udexSpacer16, 16px)}:host([orientation="Vertical"][placement="End"]) .udex-tab-navigation__header{order:1}:host([orientation="Vertical"]) .udex-tab-navigation__play-button{margin-block-end:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__footer{margin-block-start:var(--udex-tab-navigation-footer-spacing, var(--udexSpacer20, 20px));padding-inline-start:var(--udexSpacer16, 16px)}:host([process-tab]){--udex-button-tab-process-item-count-font-size: var(--udexTypographyNavigationRegularXSFontSize, 12px);--udex-button-tab-process-item-count-font-weight: var(--udexTypographyFontWeightRegular, 400)}:host([process-tab]) .udex-tab-navigation__button-tab--process{flex-direction:row;align-items:flex-start;padding:var(--udexSpacer12, 12px) 0 calc(var(--udexSpacer12, 12px) + 3px);gap:var(--udexSpacer8, 8px)}:host([process-tab]) .udex-tab-navigation__button-tab--process:not(:last-child){margin-inline-end:var(--udexSpacer32, 32px)}:host([process-tab]) .udex-tab-navigation__button-tab--process .udex-tab-navigation__button-icon-outer{flex-shrink:0;margin:0;align-self:center}:host([process-tab]) .udex-tab-navigation__button-text-block{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--udexSpacer4, 4px)}:host([process-tab]) .udex-tab-navigation__button-item-count{display:block;font-size:var(--udex-button-tab-process-item-count-font-size);font-weight:var(--udex-button-tab-process-item-count-font-weight);line-height:1.1;color:var(--udexColorGrey7, #475E75)}:host([process-tab]) .udex-tab-navigation__button-text-block .udex-tab-navigation__button-text{text-align:start;font-weight:var(--udex-button-tab-font-weight);font-size:var(--udex-button-tab-font-size-default)}
 `

package/src/themes/Breadcrumbs.css

@@ -118,6 +118,12 @@
   background-color: var(--udex-breadcrumbs-item-color);
 }
 
+.udex-breadcrumbs__item--current-page {
+  color: var(--udex-breadcrumbs-item-color);
+  font-size: var(--udex-breadcrumbs-item-font-size);
+  line-height: var(--udex-breadcrumbs-item-line-height);
+}
+
 .udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]:before {
   content: '';
 }

package/src/themes/BreadcrumbsPopover.css

@@ -21,12 +21,22 @@
 
 .udex-breadcrumbs__popover-content {
   padding: var(--udexSpacer32) 52px var(--udexSpacer32) var(--udexSpacer20);
+}
+
+.udex-breadcrumbs__popover-content ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
 }
 
+.udex-breadcrumbs__popover-content li {
+  display: flex;
+}
+
 .udex-breadcrumbs__popover-content .udex-breadcrumbs__item {
   font-size: var(--udex-breadcrumbs-dropdown-item-font-size);
   line-height: var(--udex-breadcrumbs-dropdown-item-line-height);
@@ -49,11 +59,11 @@
   padding: var(--udexSpacer32) var(--udexSpacer20) var(--udexSpacer32) 52px;
 }
 
-.udex-breadcrumbs__item--with-icon:dir(ltr) ~ .udex-breadcrumbs__item {
+li:has(.udex-breadcrumbs__item--with-icon):dir(ltr) ~ li .udex-breadcrumbs__item {
   padding-left: calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px));
 }
 
-.udex-breadcrumbs__item--with-icon:dir(rtl) ~ .udex-breadcrumbs__item {
+li:has(.udex-breadcrumbs__item--with-icon):dir(rtl) ~ li .udex-breadcrumbs__item {
   padding-right: calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px));
 }
 

package/src/themes/ListItem.css

@@ -159,7 +159,7 @@
 
 :host::part(additional-text) {
   margin-inline-start: 0;
-  margin-inline-end: var(--udexSpacer8, 8px);
+  margin-inline-end: var(--udexSpacer12, 12px);
 }
 
 :host([mode="SingleContent"])::part(button) {
@@ -206,6 +206,11 @@
   width: 100%;
 }
 
+.udex-list__btn-wrap {
+  display: flex;
+  gap: var(--udexSpacer8, 8px);
+}
+
 .udex-list__number {
   margin-inline-end: var(--udexSpacer8, 8px);
 }
@@ -319,14 +324,16 @@
   align-items: center;
 }
 
+:host([collapsed]) .udex-list__group-heading__icon,
 :host(:dir(rtl)) .udex-list__group-heading__icon {
   transform: rotate(90deg);
 }
 
-:host([collapsed]) .udex-list__group-heading__icon {
-  transform: rotate(90deg);
-}
-
 :host([collapsed]:dir(rtl)) .udex-list__group-heading__icon {
   transform: rotate(-90deg);
 }
+
+[udex-rating-indicator] {
+  --udex_rating_indicator_disabled_opacity: 1;
+  pointer-events: none;
+}

package/src/themes/MastheadMenu.css

@@ -13,6 +13,14 @@
   --udex-masthead-menu-item-mobile-border-color: var(--udexColorGrey2, #EAECEE);
   --udex-masthead-menu-grid-template-columns: auto;
   --udex-masthead-menu-justify-content: flex-start;
+  --udex-masthead-menu-sub-category-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-masthead-menu-sub-category-color: var(--udexColorGrey9, #223548);
+  --udex-masthead-menu-sub-category-text-transform: none;
+  --udex-masthead-menu-sub-category-font-weight: var(--udexTypographyFontWeightRegular, 400);
+  --udex-masthead-menu-sub-category-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  --udex-masthead-menu-sub-category-padding: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udexSpacer8);
+  --udex-masthead-menu-sub-list-item-spacing: var(--udexSpacer4);
+  --udex-masthead-menu-sub-list-indent: var(--udexSpacer24, 24px);
 }
 
 .udex-masthead-menu {
@@ -201,6 +209,43 @@
   display: block;
 }
 
+.udex-masthead-menu__sub-category {
+  display: block;
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--udex-masthead-menu-sub-category-font-size);
+  line-height: var(--udex-masthead-menu-sub-category-line-height);
+  font-weight: var(--udex-masthead-menu-sub-category-font-weight);
+  text-transform: var(--udex-masthead-menu-sub-category-text-transform);
+  color: var(--udex-masthead-menu-sub-category-color);
+  padding: var(--udex-masthead-menu-sub-category-padding);
+  box-sizing: border-box;
+}
+
+[udex-masthead-menu-item].udex-masthead-menu__sub-category {
+  --udex-masthead-menu-item-color: var(--udex-masthead-menu-sub-category-color);
+  --udex-masthead-menu-item-font-size: var(--udex-masthead-menu-sub-category-font-size);
+  --udex-masthead-menu-item-line-height: var(--udex-masthead-menu-sub-category-line-height);
+  --udex-masthead-menu-item-font-weight: var(--udex-masthead-menu-sub-category-font-weight);
+  --udex-masthead-menu-item-padding-desktop: var(--udex-masthead-menu-sub-category-padding);
+  text-transform: var(--udex-masthead-menu-sub-category-text-transform);
+  padding: 0;
+}
+
+.udex-masthead-menu__sub-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-inline-start: var(--udex-masthead-menu-sub-list-indent);
+}
+
+.udex-masthead-menu__sub-list [udex-masthead-menu-item] {
+  --udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) 0;
+}
+
+.udex-masthead-menu__sub-list li {
+  margin-bottom: var(--udex-masthead-menu-sub-list-item-spacing);
+}
+
 @media (max-width: 1279px) {
   [udex-masthead-menu-item]::part(menu-item-link-badge) {
     border-bottom: 1px solid var(--udex-masthead-menu-item-mobile-border-color);

package/src/themes/MastheadMobileMenu.css

@@ -5,6 +5,14 @@
   --udex-masthead-mobile-menu-background: var(--sapShell_Navigation_Background, #FFF);
   --udex-masthead-mobile-search-margin-bottom: var(--udexSpacer16, 16);
   --udex-masthead-mobile-explore-btn-position: sticky;
+  --udex-masthead-menu-sub-category-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-masthead-menu-sub-category-color: var(--udexColorGrey9, #223548);
+  --udex-masthead-menu-sub-category-text-transform: none;
+  --udex-masthead-menu-sub-category-font-weight: var(--udexTypographyFontWeightRegular, 400);
+  --udex-masthead-menu-sub-category-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  --udex-masthead-menu-sub-category-padding: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);
+  --udex-masthead-menu-sub-list-item-spacing: 0;
+  --udex-masthead-menu-sub-list-indent: var(--udexSpacer24, 24px);
 }
 
 .udex-masthead-mobile-menu__list-search {
@@ -67,6 +75,43 @@
   margin-inline-start: 0;
 }
 
+span.udex-masthead-mobile-menu__sub-category {
+  display: block;
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--udex-masthead-menu-sub-category-font-size);
+  line-height: var(--udex-masthead-menu-sub-category-line-height);
+  font-weight: var(--udex-masthead-menu-sub-category-font-weight);
+  text-transform: var(--udex-masthead-menu-sub-category-text-transform);
+  color: var(--udex-masthead-menu-sub-category-color);
+  padding: var(--udex-masthead-menu-sub-category-padding);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+[udex-masthead-menu-item].udex-masthead-mobile-menu__sub-category {
+  --udex-masthead-menu-item-color: var(--udex-masthead-menu-sub-category-color);
+  --udex-masthead-menu-item-font-size: var(--udex-masthead-menu-sub-category-font-size);
+  --udex-masthead-menu-item-line-height: var(--udex-masthead-menu-sub-category-line-height);
+  --udex-masthead-menu-item-font-weight: var(--udex-masthead-menu-sub-category-font-weight);
+  --udex-masthead-menu-item-padding-mobile: var(--udex-masthead-menu-sub-category-padding);
+  text-transform: var(--udex-masthead-menu-sub-category-text-transform);
+}
+
+.udex-masthead-mobile-menu__sub-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-inline-start: var(--udex-masthead-menu-sub-list-indent);
+}
+
+.udex-masthead-mobile-menu__sub-list [udex-masthead-menu-item] {
+  --udex-masthead-menu-item-padding-mobile: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) 0;
+}
+
+.udex-masthead-mobile-menu__sub-list li {
+  margin-bottom: var(--udex-masthead-menu-sub-list-item-spacing);
+}
+
 @media (max-width: 979px) {
   .udex-masthead-mobile-menu__nav-holder {
     padding: var(--udex-masthead-mobile-menu-padding-s);

package/src/themes/TabNavigation.css

@@ -11,19 +11,20 @@
   --udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));
   --udex-button-tab-font-family: var(--sapFontFamily, sans-serif);
   --udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));
-  --udex-button-tab-line-height: 1.125;
+  --udex-button-tab-line-height: 1.1;
   --udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);
   --udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);
 
   --udex-button-tab-with-icon-without-background-border-color-active: transparent;
 
-  --udex-button-tab-with-icon-background: var(--sapList_SelectionBackgroundColor, var(--udexColorBlue1));
-  --udex-button-tab-with-icon-background-hover: var(--sapAvatar_6_Background, var(--udexColorBlue2));
-  --udex-button-tab-with-icon-color: var(--sapAccentColor6, var(--udexColorBlue7));
-  --udex-button-tab-with-icon-color-hover: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));
+  --udex-button-tab-with-icon-background: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-tab-with-icon-background-hover: var(--udexColorBlue2, #D1EFFF);
+  --udex-button-tab-with-icon-color: var(--udexColorGrey7, #475E75);
+  --udex-button-tab-with-icon-color-hover: var(--udexColorGrey9, #223548);
   --udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);
-  --udex-button-tab-with-icon-background-active: var(--sapHighlightColor, var(--udexColorBlue7));
+  --udex-button-tab-with-icon-background-active: var(--udexColorBlue8, #0057D2);
   --udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));
+  --udex-button-tab-with-icon-border-color: var(--udexColorGrey3, #D5DADD);
 
   --udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));
   --udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));
@@ -37,26 +38,6 @@
   --udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;
 
   --udex-button-more-margin-inline-end: 0;
-  --udex-button-more-s-font-size: var(--udexTypographyNavigationMediumMFontSize, 14px);
-  --udex-button-more-s-font-family: var(--sapFontFamily, sans-serif);
-  --udex-button-more-s-font-weight: var(--udexTypographyFontWeightMedium, 500);
-  --udex-button-more-s-line-height: 1.07143;
-  --udex-button-more-s-text-color: var(--sapTextColor, var(--udexColorGrey9));
-  --udex-button-more-s-padding-vertical: var(--udexSpacer4, 4px);
-  --udex-button-more-s-padding-horizontal: var(--udexSpacer8, 8px);
-  --udex-button-more-s-border-color: var(--sapButton_Neutral_BorderColor, var(--udexColorGrey4));
-  --udex-button-more-s-icon-margin-inline-start: var(--udexSpacer4, 4px);
-  --udex-button-more-s-icon-color: var(--sapTextColor, var(--udexColorGrey9));
-  --udex-button-more-s-border-color-toggled: var(--udexColorBlue4);
-  --udex-button-more-s-text-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));
-  --udex-button-more-s-icon-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));
-
-  --udex-button-more-m-font-size: var(--sapFontSize, var(--udexTypographyNavigationMediumXLFontSize));
-  --udex-button-more-m-font-family: var(--sapFontFamily, sans-serif);
-  --udex-button-more-m-font-weight: var(--udexTypographyFontWeightMedium, 500);
-  --udex-button-more-m-line-height: 1.125;
-  --udex-button-more-m-padding-vertical: var(--udexSpacer8, 8px);
-  --udex-button-more-m-padding-horizontal: var(--udexSpacer12, 12px);
 
   --udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);
   --udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);
@@ -132,14 +113,6 @@
   height: 32px;
 }
 
-:host([size-more-button="Medium"]) .udex-tab-navigation__button-more {
-  padding: var(--udex-button-more-m-padding-vertical) var(--udex-button-more-m-padding-horizontal);
-  height: 34px;
-  font-size: var(--udex-button-more-m-font-size);
-  font-family: var(--udex-button-more-m-font-family);
-  font-weight: var(--udex-button-more-m-font-weight);
-  line-height: var(--udex-button-more-m-line-height);
-}
 
 :host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,
 .udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text {
@@ -176,8 +149,7 @@
   white-space: nowrap;
 }
 
-.udex-tab-navigation__button-tab,
-.udex-tab-navigation__button-more {
+.udex-tab-navigation__button-tab {
   padding: 0;
   display: block;
   background: none;
@@ -270,50 +242,14 @@
 
 .udex-tab-navigation__button-more {
   margin-inline-start: auto;
-  padding: var(--udex-button-more-s-padding-vertical) var(--udex-button-more-s-padding-horizontal);
-  display: flex;
-  align-items: center;
-  flex: 0 0 0;
-  font-size: var(--udex-button-more-s-font-size);
-  font-family: var(--udex-button-more-s-font-family);
-  font-weight: var(--udex-button-more-s-font-weight);
-  line-height: var(--udex-button-more-s-line-height);
-  color: var(--udex-button-more-s-text-color);
-  border: 1px solid var(--udex-button-more-s-border-color);
-  border-radius: var(--udexRadiusM, 8px);
+  flex: 0 0 auto;
   margin-inline-end: var(--udex-button-more-margin-inline-end);
 }
-:host([desktop]) .udex-tab-navigation__button-more:focus,
-.udex-tab-navigation__button-more:focus-visible {
-  outline: 2px solid var(--udex-button-tab-text-color-active);
-  outline-offset: 2px;
-}
 
 .udex-tab-navigation__button-more[hidden] {
   display: none;
 }
 
-.udex-tab-navigation__button-more--lg .udex-tab-navigation__button-more-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.udex-tab-navigation__button-more-icon {
-  margin-inline-start: var(--udex-button-more-s-icon-margin-inline-start);
-  width: 14px;
-  height: 14px;
-  color: var(--udex-button-more-s-icon-color);
-}
-
-.udex-tab-navigation__button-more--toggled {
-  border-color: var(--udex-button-more-s-border-color-toggled);
-  color: var(--udex-button-more-s-text-color-toggled);
-}
-
-.udex-tab-navigation__button-more--toggled .udex-tab-navigation__button-more-icon {
-  color: var(--udex-button-more-s-icon-color-toggled);
-}
-
 .udex-tab-navigation__button-icon-outer {
   margin-left: auto;
   margin-right: auto;
@@ -327,6 +263,7 @@
   border-radius: 50%;
   background-color: var(--udex-button-tab-with-icon-background);
   color: var(--udex-button-tab-with-icon-color);
+  box-shadow: inset 0 0 0 1px var(--udex-button-tab-with-icon-border-color);
   position: relative;
   z-index: 0;
 }
@@ -344,6 +281,7 @@
 
 .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer {
   background-color: var(--udex-button-tab-with-icon-background-active);
+  box-shadow: none;
 }
 
 .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon {
@@ -352,6 +290,7 @@
 
 .udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer {
   background-color: var(--udex-button-tab-with-icon-background-hover);
+  box-shadow: none;
 }
 
 .udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon {
@@ -598,3 +537,49 @@
   margin-block-start: var(--udex-tab-navigation-footer-spacing, var(--udexSpacer20, 20px));
   padding-inline-start: var(--udexSpacer16, 16px);
 }
+
+/* ===== Process Tab Variant ===== */
+
+:host([process-tab]) {
+  --udex-button-tab-process-item-count-font-size: var(--udexTypographyNavigationRegularXSFontSize, 12px);
+  --udex-button-tab-process-item-count-font-weight: var(--udexTypographyFontWeightRegular, 400);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-tab--process {
+  flex-direction: row;
+  align-items: flex-start;
+  padding: var(--udexSpacer12, 12px) 0 calc(var(--udexSpacer12, 12px) + 3px);
+  gap: var(--udexSpacer8, 8px);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-tab--process:not(:last-child) {
+  margin-inline-end: var(--udexSpacer32, 32px);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-tab--process .udex-tab-navigation__button-icon-outer {
+  flex-shrink: 0;
+  margin: 0;
+  align-self: center;
+}
+
+:host([process-tab]) .udex-tab-navigation__button-text-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--udexSpacer4, 4px);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-item-count {
+  display: block;
+  font-size: var(--udex-button-tab-process-item-count-font-size);
+  font-weight: var(--udex-button-tab-process-item-count-font-weight);
+  line-height: 1.1;
+  color: var(--udexColorGrey7, #475E75);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-text-block .udex-tab-navigation__button-text {
+  text-align: start;
+  font-weight: var(--udex-button-tab-font-weight);
+  font-size: var(--udex-button-tab-font-size-default);
+}