@sapudex/web-components 0.114.2 → 0.117.1

package/src/generated/themes/Search.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/Search.css.ts",content:`:host{--udex-input-color-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-font-family-label: var(--sapFontFamily, sans-serif);--udex-input-font-size-label: var(--sapFontLargeSize, var(--udexTypographyBodySFontSize));--udex-input-font-weight-label: var(--udexTypographyFontWeightRegular, 400);--udex-input-line-height-label: var(--udexTypographyBodyLineHeight, 24px);--udex-input-background-color: var(--sapList_Hover_Background, var(--udexColorGrey1));--udex-input-font-family-label-active: var(--sapFontFamily, sans-serif);--udex-input-font-size-label-active: var(--sapFontSmallSize, var(--udexTypographyBodyXXSFontSize));--udex-input-font-weight-label-active: var(--udexTypographyFontWeightRegular, 400);--udex-input-line-height-label-active: var(--udexTypographyBodyLineHeight, 1.5);--udex-input-color-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-radius: var(--sapField_BorderCornerRadius, var(--udexRadiusXS));--udex-input-padding-horizontal: var(--udexSpacer12, 12px);--udex-input-padding-vertical: var(--udexSpacer8, 8px);--udex-button-icon-size: var(--sapFontHeader2Size, 28px);--udex-dropdown-border-width: auto;--udex-search-container-padding-inline-end: 12px;--udex-search-label-inset-inline-start: 12px;--udex-search-icons-margin-inline-end: 12px;--udex-search-label-width: calc( 100% - var(--udex-search-label-inset-inline-start) - var(--udex-input-padding-horizontal) - var(--udex-search-container-padding-inline-end) );display:block;width:100%}:host([mode="Standard"]) .udex-search__label.udex-search__label--active{display:none}:host(:not([mode="Home Search"])) .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled,:host(:not([mode="Home Search"])) .udex-search-prefix .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled{display:block;line-height:18px;transform:translateY(-110%);padding:0 4px;font-family:var(--udex-input-font-family-label-active);font-size:var(--udex-input-font-size-label-active);font-weight:var(--udex-input-font-weight-label-active);line-height:var(--udex-input-line-height-label-active);background-color:#fff}:host([mode="Home Search"]) .udex-search__root,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix{--udex-input-radius: var(--udexRadiusXXL, 24px);position:relative;z-index:1}:host([mode="Home Search"]) .udex-search__root.udex-search-prefix{display:flex;width:100%;position:relative;z-index:1}:host([mode="Home Search"]) .udex-search-prefix .udex-search__prefix+.udex-search__container{border-start-start-radius:0;border-start-end-radius:var(--udexRadiusXXL, 24px);border-end-start-radius:0;border-end-end-radius:var(--udexRadiusXXL, 24px);flex-grow:1}:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover:after,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover:after{content:"";position:absolute;z-index:-1;height:21px;inset-inline:0;inset-block-end:0;background-color:var(--udexColorNeutralWhite, #fff);border-left:1px solid var(--udexColorGrey6, #5B738B);border-right:1px solid var(--udexColorGrey6, #5B738B);box-shadow:var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, .3));overflow-y:hidden}:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover:after{inset-inline-start:auto;width:50px}:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value),:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value) .udex-search__field,:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value),:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value) .udex-search__field{background-color:var(--udex-input-background-color)}:host([mode="Home Search"]) .udex-search__label.udex-search__label--active,:host([mode="Home Search"]) .udex-search-prefix .udex-search__label.udex-search__label--active{display:none}.udex-search__container{padding-inline-end:var(--udex-search-container-padding-inline-end);display:flex;align-items:center;position:relative;z-index:1;border:1px solid var(--udex-input-color-border);border-radius:var(--udex-input-radius);background-color:field}.udex-search__container:not(.udex-search__container--focus):hover{border-color:var(--udex-input-color-hover-border)}.udex-search__container--focus{border-color:var(--udex-input-color-active-border)}.udex-search__field{display:block;width:100%;color:var(--udex-input-color-typed-text);font-size:16px;line-height:24px;padding:var(--udex-input-padding-vertical) var(--udex-input-padding-horizontal);box-sizing:border-box;border:0;border-radius:var(--udex-input-radius);font-weight:var(--udexTypographyFontWeightRegular, 400);background:var(--udex-input-color-background-light)}.udex-search__field:focus{outline:none}input[type=search]::-ms-clear{display:none;width:0;height:0}input[type=search]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.udex-search__label{position:absolute;inset-block-start:9px;inset-inline-start:var(--udex-search-label-inset-inline-start);z-index:2;color:var(--udex-input-color-label);font-family:var(--udex-input-font-family-label);font-size:var(--udex-input-font-size-label);font-weight:var(--udex-input-font-weight-label);line-height:var(--udex-input-line-height-label);transition:transform .15s ease-out,font-size .15s ease-out;overflow:hidden;white-space:nowrap;max-width:var(--udex-search-label-width)}.udex-search__label-with-search-icon,.udex-search__label-with-voice-icon{max-width:calc(var(--udex-search-label-width) - var(--udex-button-icon-size))}.udex-search__label-with-search-icon.udex-search__label-with-voice-icon{max-width:calc(var(--udex-search-label-width) - var(--udex-button-icon-size) * 2 - var(--udex-search-icons-margin-inline-end))}.udex-search__icons{display:flex;align-items:center}.udex-search__icons-start{padding-inline-start:12px}.udex-search__icons>*{margin-inline-end:var(--udex-search-icons-margin-inline-end)}.udex-search__icons>*:last-child{margin-inline-end:0}.udex-search__icon,.udex-search__button{background-color:transparent;border:none;color:#475e75;min-width:var(--udex-button-icon-size);height:var(--udex-button-icon-size);border-radius:50%;position:relative;z-index:1;overflow:visible}[ui5-button].udex-search__voice-button--active{color:#0040b0}[ui5-button].udex-search__voice-button--active:before,[ui5-button].udex-search__button:focus:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:28px;height:28px;border:2px solid #0040B0;border-radius:50%;box-sizing:border-box}[ui5-button].udex-search__button::part(button){width:28px;height:28px}[ui5-button].udex-search__button::part(icon){width:18px;height:18px}[ui5-button].udex-search__button::part(button):after{display:none}[ui5-button].udex-search__button:hover{background:transparent;border:none;box-shadow:none}[ui5-button].udex-search__button:focus{outline:none}[ui5-button].udex-search__submit-button--active{position:relative;z-index:1;color:#fff}[ui5-button].udex-search__submit-button--active:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:28px;height:28px;background-color:#0070f2;border-radius:50%}.udex-search__prefix{position:relative;z-index:1}.udex-search__prefix--show-popover:after{content:"";position:absolute;z-index:-1;height:50%;width:50px;inset-inline-start:0;inset-block-end:0;background-color:var(--udexColorNeutralWhite, #fff);border-left:1px solid var(--udexColorGrey6, #5B738B);border-right:1px solid var(--udexColorGrey6, #5B738B);box-shadow:var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, .3));overflow-y:hidden}.udex-search__prefix-button{padding-inline:var(--udexSpacer12) var(--udexSpacer8);display:flex;align-items:center;max-width:200px;height:100%;border:1px solid var(--udex-input-color-border);border-inline-end:0;border-start-start-radius:var(--udexRadiusXXL, 24px);border-end-start-radius:var(--udexRadiusXXL, 24px);background-color:var(--sapShell_Navigation_Active_Background, var(--udexColorGrey1));color:var(--sapContent_LabelColor, var(--udexColorGrey7));font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:var(--udexTypographyBodyLineHeight, 1.5);text-align:start;white-space:nowrap}.udex-search__prefix-button:hover{cursor:pointer;background-color:var(--udexCoreBase);color:var(--udexColorBlue8)}.udex-search__prefix-button:focus,.udex-search__prefix-button:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);outline-offset:-2px}.udex-search__prefix-button--active{background-color:var(--udexCoreBase);color:var(--udexColorBlue10)}.udex-search__prefix-label{margin-inline-end:var(--udexSpacer4, 4px);max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}.udex-search__prefix-icon{width:16px;height:16px;color:inherit;flex-shrink:1}.udex-search__prefix-popover{border-start-start-radius:0;border-start-end-radius:0;border:1px solid var(--udexCoreBorderDefault);border-block-start:0;box-shadow:var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,.3));background-color:var(--udexColorNeutralWhite, #fff);clip-path:inset(0px -10px -10px -10px)}.udex-search__prefix-popover::part(content){padding:0}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Search.css.ts",content:`:host{--udex-input-color-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-font-family-label: var(--sapFontFamily, sans-serif);--udex-input-font-size-label: var(--sapFontLargeSize, var(--udexTypographyBodySFontSize));--udex-input-font-weight-label: var(--udexTypographyFontWeightRegular, 400);--udex-input-line-height-label: var(--udexTypographyBodyLineHeight, 24px);--udex-input-background-color: var(--sapList_Hover_Background, var(--udexColorGrey1));--udex-input-font-family-label-active: var(--sapFontFamily, sans-serif);--udex-input-font-size-label-active: var(--sapFontSmallSize, var(--udexTypographyBodyXXSFontSize));--udex-input-font-weight-label-active: var(--udexTypographyFontWeightRegular, 400);--udex-input-line-height-label-active: var(--udexTypographyBodyLineHeight, 1.5);--udex-input-color-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-radius: var(--sapField_BorderCornerRadius, var(--udexRadiusXS));--udex-input-padding-horizontal: var(--udexSpacer12, 12px);--udex-input-padding-vertical: var(--udexSpacer8, 8px);--udex-button-icon-size: var(--sapFontHeader5Size, 18px);--udex-dropdown-border-width: auto;--udex-search-container-padding-inline-end: 12px;--udex-search-label-inset-inline-start: 12px;--udex-search-icons-margin-inline-end: 12px;--udex-search-label-width: calc( 100% - var(--udex-search-label-inset-inline-start) - var(--udex-input-padding-horizontal) - var(--udex-search-container-padding-inline-end) );display:block;width:100%}:host([mode="Standard"]) .udex-search__label.udex-search__label--active{display:none}:host(:not([mode="Home Search"])) .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled,:host(:not([mode="Home Search"])) .udex-search-prefix .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled{display:block;line-height:18px;transform:translateY(-110%);padding:0 4px;font-family:var(--udex-input-font-family-label-active);font-size:var(--udex-input-font-size-label-active);font-weight:var(--udex-input-font-weight-label-active);line-height:var(--udex-input-line-height-label-active);background-color:#fff}:host([mode="Home Search"]) .udex-search__root,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix{--udex-input-radius: var(--udexRadiusXXL, 24px);position:relative;z-index:1}:host([mode="Home Search"]) .udex-search__root.udex-search-prefix{display:flex;width:100%;position:relative;z-index:1}:host([mode="Home Search"]) .udex-search-prefix .udex-search__prefix+.udex-search__container{border-start-start-radius:0;border-start-end-radius:var(--udexRadiusXXL, 24px);border-end-start-radius:0;border-end-end-radius:var(--udexRadiusXXL, 24px);flex-grow:1}:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover:after,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover:after{content:"";position:absolute;z-index:-1;height:21px;inset-inline:0;inset-block-end:0;background-color:var(--udexColorNeutralWhite, #fff);border-left:1px solid var(--udexColorGrey6, #5B738B);border-right:1px solid var(--udexColorGrey6, #5B738B);box-shadow:var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, .3));overflow-y:hidden}:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover:after{inset-inline-start:auto;width:50px}:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value),:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value) .udex-search__field,:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value),:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value) .udex-search__field{background-color:var(--udex-input-background-color)}:host([mode="Home Search"]) .udex-search__label.udex-search__label--active,:host([mode="Home Search"]) .udex-search-prefix .udex-search__label.udex-search__label--active{display:none}.udex-search__container{padding-inline-end:var(--udex-search-container-padding-inline-end);display:flex;align-items:center;position:relative;z-index:1;border:1px solid var(--udex-input-color-border);border-radius:var(--udex-input-radius);background-color:field}.udex-search__container:not(.udex-search__container--focus):hover{border-color:var(--udex-input-color-hover-border)}.udex-search__container--focus{border-color:var(--udex-input-color-active-border)}.udex-search__field{display:block;width:100%;color:var(--udex-input-color-typed-text);font-size:16px;line-height:24px;padding:var(--udex-input-padding-vertical) var(--udex-input-padding-horizontal);box-sizing:border-box;border:0;border-radius:var(--udex-input-radius);font-weight:var(--udexTypographyFontWeightRegular, 400);background:var(--udex-input-color-background-light)}.udex-search__field:focus{outline:none}input[type=search]::-ms-clear{display:none;width:0;height:0}input[type=search]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.udex-search__label{position:absolute;inset-block-start:9px;inset-inline-start:var(--udex-search-label-inset-inline-start);z-index:2;color:var(--udex-input-color-label);font-family:var(--udex-input-font-family-label);font-size:var(--udex-input-font-size-label);font-weight:var(--udex-input-font-weight-label);line-height:var(--udex-input-line-height-label);transition:transform .15s ease-out,font-size .15s ease-out;overflow:hidden;white-space:nowrap;max-width:var(--udex-search-label-width)}.udex-search__label-with-search-icon,.udex-search__label-with-voice-icon{max-width:calc(var(--udex-search-label-width) - var(--udex-button-icon-size))}.udex-search__label-with-search-icon.udex-search__label-with-voice-icon{max-width:calc(var(--udex-search-label-width) - var(--udex-button-icon-size) * 2 - var(--udex-search-icons-margin-inline-end))}.udex-search__icons{display:flex;align-items:center}.udex-search__icons-start{padding-inline-start:12px}.udex-search__icons>*{margin-inline-end:var(--udex-search-icons-margin-inline-end)}.udex-search__icons>*:last-child{margin-inline-end:0}.udex-search__icon,.udex-search__button{background-color:transparent;border:none;color:#475e75;min-width:var(--udex-button-icon-size);height:var(--udex-button-icon-size);border-radius:50%;position:relative;z-index:1;overflow:visible}[ui5-button].udex-search__voice-button--active{color:#0040b0}[ui5-button].udex-search__voice-button--active:before,[ui5-button].udex-search__button:focus:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:18px;height:18px;border:2px solid #0040B0;border-radius:50%;box-sizing:border-box}[ui5-button].udex-search__button::part(button){width:18px;height:18px}[ui5-button].udex-search__button::part(icon){width:18px;height:18px}[ui5-button].udex-search__button::part(button):after{display:none}[ui5-button].udex-search__button:hover{background:transparent;border:none;box-shadow:none}[ui5-button].udex-search__button:focus{outline:none}[ui5-button].udex-search__submit-button--active{position:relative;z-index:1;color:#fff}[ui5-button].udex-search__submit-button--active:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:18px;height:18px;background-color:#0070f2;border-radius:50%}.udex-search__prefix{position:relative;z-index:1}.udex-search__prefix--show-popover:after{content:"";position:absolute;z-index:-1;height:50%;width:50px;inset-inline-start:0;inset-block-end:0;background-color:var(--udexColorNeutralWhite, #fff);border-left:1px solid var(--udexColorGrey6, #5B738B);border-right:1px solid var(--udexColorGrey6, #5B738B);box-shadow:var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, .3));overflow-y:hidden}.udex-search__prefix-button{padding-inline:var(--udexSpacer12) var(--udexSpacer8);display:flex;align-items:center;max-width:200px;height:100%;border:1px solid var(--udex-input-color-border);border-inline-end:0;border-start-start-radius:var(--udexRadiusXXL, 24px);border-end-start-radius:var(--udexRadiusXXL, 24px);background-color:var(--sapShell_Navigation_Active_Background, var(--udexColorGrey1));color:var(--sapContent_LabelColor, var(--udexColorGrey7));font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:var(--udexTypographyBodyLineHeight, 1.5);text-align:start;white-space:nowrap}.udex-search__prefix-button:hover{cursor:pointer;background-color:var(--udexCoreBase);color:var(--udexColorBlue8)}.udex-search__prefix-button:focus,.udex-search__prefix-button:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);outline-offset:-2px}.udex-search__prefix-button--active{background-color:var(--udexCoreBase);color:var(--udexColorBlue10)}.udex-search__prefix-label{margin-inline-end:var(--udexSpacer4, 4px);max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}.udex-search__prefix-icon{width:16px;height:16px;color:inherit;flex-shrink:1}.udex-search__prefix-popover{border-start-start-radius:0;border-start-end-radius:0;border:1px solid var(--udexCoreBorderDefault);border-block-start:0;box-shadow:var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,.3));background-color:var(--udexColorNeutralWhite, #fff);clip-path:inset(0px -10px -10px -10px)}.udex-search__prefix-popover::part(content){padding:0}udex-dropdown{--udex-dropdown-pane-max-width: 100%}
 `};
 export default styleData;
 	

package/src/generated/themes/SecondaryNavigation.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/SecondaryNavigation.css.ts",content:`:host{--udex-secondary-navigation-padding: 0 var(--udexSpacer84);--udex-secondary-navigation-height: 72px;--udex-secondary-navigation-min-height: 72px;--udex-secondary-navigation-z-index: 10;--udex-secondary-navigation-background: #FFF;--udex-secondary-navigation-title-color: var(--udexColorGrey9, #223548);--udex-secondary-navigation-title-font-size: var(--udexTypographyBodySFontSize, 16px);--udex-secondary-navigation-title-line-height: var(--udexTypographyHeadingLineHeight, 1.1);--udex-secondary-navigation-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-secondary-navigation-item-color: var(--sapTextColor, #223548);--udex-secondary-navigation-item-hover-color: var(--udexColorBlue7, #0070f2);--udex-secondary-navigation-item-active-color: var(--udexColorBlue9, #0040B0);--udex-secondary-navigation-item-active-border-color: var(--udexColorBlue7, #0070f2);--udex-secondary-navigation-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-secondary-navigation-item-line-height: 1.125rem;--udex-secondary-navigation-title-border-color: var(--udexColorGrey3, #D5DADD);--udex-secondary-navigation-border-color: var(--udexColorGrey2, #EAECEE);--udex-secondary-navigation-title-max-width: 248px;--udex-secondary-navigation-dropdown-shadow: 0 10px 30px 0 #22364940;--udex-secondary-navigation-mobile-dropdown-shadow: 0 2px 8px 0 #2236494D;--udex-secondary-navigation-mobile-heading-shadow: 0 2px 4px 0 #22364933;--udex-secondary-navigation-mobile-button-border-color: var(--udexColorGrey3, #D5DADD);--udex-secondary-navigation-dropdown-background: #FFF;--udex-secondary-navigation-dropdown-min-width: 240px;--udex-secondary-navigation-dropdown-max-width: 360px;--udex-secondary-navigation-mobile-title-icon-width: 22px;--udex-secondary-navigation-mobile-title-icon-height: 22px}:host{border-bottom:1px solid var(--udex-secondary-navigation-border-color);display:block;padding:var(--udex-secondary-navigation-padding);z-index:var(--udex-secondary-navigation-z-index);background:var(--udex-secondary-navigation-background);position:relative}.udex-secondary-navigation__root{max-width:1428px;margin:0 auto;padding-top:var(--udexSpacer12);height:var(--udex-secondary-navigation-height);min-height:var(--udex-secondary-navigation-min-height);box-sizing:border-box;display:flex;flex-direction:column}.udex-secondary-navigation__holder{display:flex;position:relative;flex:auto}.udex-secondary-navigation__title{max-width:var(--udex-secondary-navigation-title-max-width);font-family:var(--sapFontFamily);font-size:var(--udex-secondary-navigation-title-font-size);line-height:var(--udex-secondary-navigation-title-line-height);font-weight:var(--udex-secondary-navigation-title-font-weight);color:var(--udex-secondary-navigation-title-color);border-inline-end:1px solid var(--udex-secondary-navigation-title-border-color);margin-inline-end:20px;padding-inline-end:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.udex-secondary-navigation__list{list-style:none;margin:0;padding:0;display:flex;flex:auto;column-gap:var(--udexSpacer20)}.udex-secondary-navigation__buttons{display:flex;align-items:center;margin-top:-24px;padding-inline-start:var(--udexSpacer16)}.udex-secondary-navigation__wrap{flex:auto;background:var(--udex-secondary-navigation-background)}.udex-secondary-navigation__wrap,.udex-secondary-navigation__text-wrap,.udex-secondary-navigation__heading{display:flex}.udex-secondary-navigation__heading{flex-shrink:0;align-items:flex-start}.udex-secondary-navigation__mobile-opener,.udex-secondary-navigation__active-title{display:none}.udex-secondary-navigation__active-title{font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1)}.udex-secondary-navigation__root_centered{padding-top:0}.udex-secondary-navigation__root_centered .udex-secondary-navigation__list,.udex-secondary-navigation__root_centered .udex-secondary-navigation__heading,.udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item{align-items:center}.udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item{height:100%;display:flex}.udex-secondary-navigation__root_centered .udex-secondary-navigation__buttons{margin-top:0}.udex-secondary-navigation__item{color:var(--udex-secondary-navigation-item-color);font-family:var(--sapFontFamily);font-size:var(--udex-secondary-navigation-item-font-size);line-height:var(--udex-secondary-navigation-item-line-height);display:flex;align-items:center;text-decoration:none;position:relative;background:none;cursor:pointer;border:none;padding:0}.udex-secondary-navigation__dropdown-item,.udex-secondary-navigation__mobile-opener,.udex-secondary-navigation__item:focus{outline:none}:host([desktop]) .udex-secondary-navigation__dropdown-item:focus,:host([desktop]) .udex-secondary-navigation__item:focus,.udex-secondary-navigation__mobile-opener:focus-visible,.udex-secondary-navigation__dropdown-item:focus-visible,.udex-secondary-navigation__item:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusXXS)}:host([desktop]) .udex-secondary-navigation__dropdown-item:focus{outline-offset:-4px}.udex-secondary-navigation__mobile-opener:focus-visible{outline-offset:-4px}.udex-secondary-navigation__item-icon{margin-inline-start:var(--udexSpacer4);transition:.25s transform}.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,.udex-secondary-navigation__item:hover{color:var(--udex-secondary-navigation-item-hover-color)}.udex-secondary-navigation__item:active .udex-secondary-navigation__item-icon,.udex-secondary-navigation__item:active{color:var(--udex-secondary-navigation-item-active-color)}.udex-secondary-navigation__list-item{position:relative}.udex-secondary-navigation__list_measure .udex-secondary-navigation__list-item{display:block;position:absolute;visibility:hidden}[hidden].udex-secondary-navigation__list-item{display:none}[active]>.udex-secondary-navigation__dropdown-item:before,[active].udex-secondary-navigation__list-item:before{background:var(--udex-secondary-navigation-item-active-border-color);content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px 2px 0 0}.udex-secondary-navigation__list-item_open .udex-secondary-navigation__item-icon{transform:rotateX(180deg)}.udex-secondary-navigation__dropdown{position:absolute;top:100%;margin-top:1px;left:calc(var(--udexSpacer16) * -1);box-shadow:var(--udex-secondary-navigation-dropdown-shadow);min-width:var(--udex-secondary-navigation-dropdown-min-width);max-width:var(--udex-secondary-navigation-dropdown-max-width);background:var(--udex-secondary-navigation-dropdown-background)}.udex-secondary-navigation__dropdown-list{padding:var(--udexSpacer12) 0;margin:0;list-style:none}.udex-secondary-navigation__dropdown-item{padding:var(--udexSpacer12) var(--udexSpacer16);font-family:var(--sapFontFamily);font-size:var(--udex-secondary-navigation-item-font-size);line-height:var(--udex-secondary-navigation-item-line-height);color:var(--udexColorGrey9, #223548);display:block;text-decoration:none;position:relative}button.udex-secondary-navigation__dropdown-item{background:none;border:0;text-align:start;width:100%}[active] .udex-secondary-navigation__dropdown-item:before{top:0;bottom:0;width:3px;height:100%}.udex-secondary-navigation__dropdown-item:hover{background:var(--udexColorGrey1, #F5F6F7)}.udex-secondary-navigation__dropdown-item:active{background:var(--udexColorGrey2, #EAECEE)}.udex-secondary-navigation__dropdown:dir(rtl){left:auto;right:calc(var(--udexSpacer16) * -1)}@media (max-width: 979px){:host{border:none;padding:0}.udex-secondary-navigation__title,.udex-secondary-navigation__active-title,.udex-secondary-navigation__mobile-opener{display:block}.udex-secondary-navigation__mobile-opener{border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:flex-end;position:absolute;top:0;left:0;right:0;border:0;height:100%;padding-inline-end:var(--udexSpacer48)}.udex-secondary-navigation__title-icon{transition:.25s transform;width:var(--udex-secondary-navigation-mobile-title-icon-width);height:var(--udex-secondary-navigation-mobile-title-icon-height)}.udex-secondary-navigation__root_open .udex-secondary-navigation__title-icon{transform:rotateX(180deg)}.udex-secondary-navigation__wrap,.udex-secondary-navigation__breadcrumbs,.udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item_more,.udex-secondary-navigation__list-item_more{display:none}.udex-secondary-navigation__wrap,.udex-secondary-navigation__list,.udex-secondary-navigation__text-wrap{flex-direction:column}.udex-secondary-navigation__wrap{display:none;position:absolute;top:100%;left:0;right:0;box-shadow:var(--udex-secondary-navigation-mobile-dropdown-shadow);padding:var(--udexSpacer16) 0;border-radius:0 0 var(--udexRadiusM) var(--udexRadiusM)}.udex-secondary-navigation__root_open .udex-secondary-navigation__wrap{display:block}.udex-secondary-navigation__title{border:none;padding:0;margin:0 0 7px;max-width:inherit}.udex-secondary-navigation__text-wrap,.udex-secondary-navigation__heading{width:100%}.udex-secondary-navigation__text-wrap{padding-inline-end:42px}.udex-secondary-navigation__heading{align-items:center}.udex-secondary-navigation__list-item,.udex-secondary-navigation__buttons{margin:0;margin-inline-end:0}.udex-secondary-navigation__item{font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);padding:var(--udexSpacer12) var(--udexSpacer48);text-align:start;width:100%;box-sizing:border-box}[active].udex-secondary-navigation__list-item:before{left:0;top:0;bottom:0;width:3px;height:auto}.udex-secondary-navigation__buttons{padding:var(--udexSpacer24) var(--udexSpacer48) var(--udexSpacer8);margin-top:var(--udexSpacer16);position:relative}.udex-secondary-navigation__buttons:before{content:"";position:absolute;left:var(--udexSpacer48);right:var(--udexSpacer48);top:0;height:1px;background:var(--udex-secondary-navigation-mobile-button-border-color)}.udex-secondary-navigation__root{padding:0}.udex-secondary-navigation__holder{border:none}.udex-secondary-navigation__heading{padding:var(--udexSpacer12) var(--udexSpacer48);box-shadow:var(--udex-secondary-navigation-mobile-heading-shadow);background:var(--udex-secondary-navigation-background);box-sizing:border-box;z-index:3}.udex-secondary-navigation__item:focus-visible{outline-offset:-4px}.udex-secondary-navigation__root_centered .udex-secondary-navigation__list{align-items:normal}}@media (max-width: 639px){.udex-secondary-navigation__heading,.udex-secondary-navigation__item{padding:var(--udexSpacer12) var(--udexSpacer24)}.udex-secondary-navigation__buttons{padding:var(--udexSpacer24) var(--udexSpacer24) var(--udexSpacer8);flex-direction:column;align-items:flex-start}.udex-secondary-navigation__buttons:before{left:var(--udexSpacer24);right:var(--udexSpacer24)}.udex-secondary-navigation__mobile-opener{padding-inline-end:var(--udexSpacer24)}}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/SecondaryNavigation.css.ts",content:`:host{--udex-secondary-navigation-border-color: var(--udexColorGrey2, #EAECEE);--udex-secondary-navigation-padding: 0 var(--udexSpacer84);--udex-secondary-navigation-height: 72px;--udex-secondary-navigation-min-height: 72px;--udex-secondary-navigation-z-index: 10;--udex-secondary-navigation-background: #FFF;--udex-secondary-navigation-title-color-hover: var(--udexColorBlue8, #0057D2);--udex-secondary-navigation-title-color: var(--udexColorGrey9, #223548);--udex-secondary-navigation-title-font-size: var(--udexTypographyBodySFontSize, 16px);--udex-secondary-navigation-title-line-height: var(--udexTypographyHeadingLineHeight, 1.1);--udex-secondary-navigation-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-secondary-navigation-title-border-color: var(--udexColorGrey3, #D5DADD);--udex-secondary-navigation-title-max-width: 248px;--udex-secondary-navigation-mobile-button-border-color: var(--udexColorGrey3, #D5DADD);border-bottom:1px solid var(--udex-secondary-navigation-border-color);display:block;padding:var(--udex-secondary-navigation-padding);z-index:var(--udex-secondary-navigation-z-index);background:var(--udex-secondary-navigation-background);position:relative}.udex-secondary-navigation__root{max-width:1428px;margin:0 auto;padding-top:var(--udexSpacer12);height:var(--udex-secondary-navigation-height);min-height:var(--udex-secondary-navigation-min-height);box-sizing:border-box;display:flex;flex-direction:column}.udex-secondary-navigation__holder{display:flex;position:relative;flex:auto}.udex-secondary-navigation__title{max-width:var(--udex-secondary-navigation-title-max-width);font-family:var(--sapFontFamily);font-size:var(--udex-secondary-navigation-title-font-size);line-height:var(--udex-secondary-navigation-title-line-height);font-weight:var(--udex-secondary-navigation-title-font-weight);color:var(--udex-secondary-navigation-title-color);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}a.udex-secondary-navigation__title{text-decoration:none}a.udex-secondary-navigation__title:hover{color:var(--udex-secondary-navigation-title-color-hover)}a.udex-secondary-navigation__title:focus,a.udex-secondary-navigation__title:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);border-radius:var(--udexRadiusXXS)}.udex-secondary-navigation__list{list-style:none;margin:0;padding:0;display:flex;flex:auto;column-gap:var(--udexSpacer20)}.udex-secondary-navigation__buttons{display:flex;align-items:center;margin-top:calc(var(--udexSpacer24) * -1);padding-inline-start:var(--udexSpacer20)}.udex-secondary-navigation__wrap{flex:auto;background:var(--udex-secondary-navigation-background)}.udex-secondary-navigation__wrap,.udex-secondary-navigation__heading{display:flex}.udex-secondary-navigation__heading{margin-inline-end:var(--udexSpacer16);padding-inline-end:var(--udexSpacer20);position:relative;flex-shrink:0;align-items:flex-start}.udex-secondary-navigation__heading:before{height:calc(var(--udex-secondary-navigation-title-font-size)* 1.25);background:var(--udex-secondary-navigation-title-border-color);content:"";position:absolute;width:1px;right:0;top:0}.udex-secondary-navigation__heading:dir(rtl):before{right:auto;left:0}.udex-secondary-navigation__list-item{position:relative}.udex-secondary-navigation__mobile-nav{display:none}@media (max-width: 1599px){:host{padding-left:var(--udexSpacer72);padding-right:var(--udexSpacer72)}}@media (max-width: 979px){:host{border:none;padding:0}.udex-secondary-navigation__breadcrumbs,.udex-secondary-navigation__holder{display:none}.udex-secondary-navigation__mobile-nav{display:block}.udex-secondary-navigation__root{padding:0}.udex-secondary-navigation__list{flex-direction:column}.udex-secondary-navigation__list-item,.udex-secondary-navigation__buttons{margin:0;margin-inline-end:0}.udex-secondary-navigation__buttons{padding:var(--udexSpacer24) var(--udexSpacer48) var(--udexSpacer8);margin-top:var(--udexSpacer16);position:relative}.udex-secondary-navigation__buttons:before{content:"";position:absolute;left:var(--udexSpacer48);right:var(--udexSpacer48);top:0;height:1px;background:var(--udex-secondary-navigation-mobile-button-border-color)}.udex-secondary-navigation__holder{border:none}}@media (max-width: 639px){.udex-secondary-navigation__heading{padding:var(--udexSpacer12) var(--udexSpacer24)}.udex-secondary-navigation__buttons{padding:var(--udexSpacer24) var(--udexSpacer24) var(--udexSpacer8);flex-direction:column;align-items:flex-start}.udex-secondary-navigation__buttons:before{left:var(--udexSpacer24);right:var(--udexSpacer24)}}
 `};
 export default styleData;
 	

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

@@ -0,0 +1,13 @@
+import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+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/SecondaryNavigationItem.css.ts",content:`:host{--udex-secondary-navigation-item-color: var(--sapTextColor, #223548);--udex-secondary-navigation-item-hover-color: var(--udexColorBlue7, #0070f2);--udex-secondary-navigation-item-active-color: var(--udexColorBlue9, #0040B0);--udex-secondary-navigation-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-secondary-navigation-item-mobile-font-size: var(--udexTypographyBodySFontSize, 16px);--udex-secondary-navigation-item-line-height: 1.125rem;--udex-secondary-navigation-item-active-border-color: var(--udexColorBlue7, #0070f2);--udex-secondary-navigation-item-dropdown-shadow: 0 10px 30px 0 #22364940;--udex-secondary-navigation-item-dropdown-background: #FFF;--udex-secondary-navigation-item-dropdown-min-width: 240px;--udex-secondary-navigation-item-dropdown-max-width: 360px;--udex-secondary-navigation-item-mobile-dropdown-shadow: 0 2px 8px 0 #2236494D;--udex-secondary-navigation-item-mobile-heading-shadow: 0 2px 4px 0 #22364933;--udex-secondary-navigation-item-mobile-title-color: var(--udexColorGrey9, #223548);--udex-secondary-navigation-item-mobile-title-font-size: var(--udexTypographyBodySFontSize, 16px);--udex-secondary-navigation-item-mobile-title-line-height: var(--udexTypographyHeadingLineHeight, 1.1);--udex-secondary-navigation-item-mobile-title-font-weight: var(--udexTypographyFontWeightMedium, 500)}.udex-secondary-navigation__dropdown-list{padding:var(--udexSpacer12) 0;margin:0;list-style:none}.udex-secondary-navigation__item{color:var(--udex-secondary-navigation-item-color);font-family:var(--sapFontFamily);font-size:var(--udex-secondary-navigation-item-font-size);line-height:var(--udex-secondary-navigation-item-line-height);display:flex;align-items:center;text-decoration:none;background:none;cursor:pointer;border:none;padding:0;white-space:nowrap}.udex-secondary-navigation__item:focus{outline:none}:host([desktop]) .udex-secondary-navigation__item:focus,.udex-secondary-navigation__item:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);border-radius:var(--udexRadiusXXS)}.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,.udex-secondary-navigation__item:hover{color:var(--udex-secondary-navigation-item-hover-color)}.udex-secondary-navigation__item:active .udex-secondary-navigation__item-icon,.udex-secondary-navigation__item:active{color:var(--udex-secondary-navigation-item-active-color)}[active].udex-secondary-navigation__item:before{border-radius:var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;background:var(--udex-secondary-navigation-item-active-border-color);content:"";position:absolute;left:0;right:0;bottom:0;height:3px}:host([is-open]) .udex-secondary-navigation__item-icon{transform:rotateX(180deg)}.udex-secondary-navigation__item-icon{margin-inline-start:var(--udexSpacer4);transition:.25s transform;min-width:14px;height:14px}.udex-secondary-navigation__dropdown{position:absolute;top:100%;margin-top:1px;left:calc(var(--udexSpacer16) * -1);box-shadow:var(--udex-secondary-navigation-item-dropdown-shadow);min-width:var(--udex-secondary-navigation-item-dropdown-min-width);max-width:var(--udex-secondary-navigation-item-dropdown-max-width);background:var(--udex-secondary-navigation-item-dropdown-background)}.udex-secondary-navigation__dropdown:dir(rtl){right:calc(var(--udexSpacer16) * -1);left:auto}.udex-secondary-navigation__item-sub-title{display:none}.udex-secondary-navigation__item-text-wrap{display:flex;align-items:center;white-space:nowrap}@media (max-width: 979px){:host{width:100%;min-height:100%}.udex-secondary-navigation__item-icon{transform:translateY(-50%);position:absolute;right:5px;top:50%;width:22px;height:22px;margin:0}.udex-secondary-navigation__item-icon:dir(rtl){right:auto;left:5px}.udex-secondary-navigation__dropdown{position:relative;box-shadow:none;min-width:initial;max-width:initial;left:initial;margin-top:initial;top:initial}.udex-secondary-navigation__dropdown:dir(rtl){right:0}.udex-secondary-navigation__item{font-size:var(--udex-secondary-navigation-item-mobile-font-size);font-weight:var(--udex-secondary-navigation-item-mobile-title-font-weight);color:var(--udex-secondary-navigation-item-mobile-title-color);box-shadow:var(--udex-secondary-navigation-item-mobile-heading-shadow);background:var(--udex-secondary-navigation-item-dropdown-background);padding:var(--udexSpacer12) var(--udexSpacer48);position:relative;box-sizing:border-box;white-space:normal;min-height:100%;width:100%;z-index:1}.udex-secondary-navigation__item-sub-title{font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);margin-top:var(--udexSpacer8);font-weight:400;display:block}.udex-secondary-navigation__dropdown{padding:var(--udexSpacer16) 0;border-radius:0 0 var(--udexRadiusM) var(--udexRadiusM);box-shadow:var(--udex-secondary-navigation-item-mobile-dropdown-shadow)}[active].udex-secondary-navigation__item:before{display:none}:host([desktop]) .udex-secondary-navigation__item:focus{outline:none}:host([desktop]) .udex-secondary-navigation__item:focus-visible,.udex-secondary-navigation__item:focus-visible{outline-offset:calc(var(--udexSpacer4) * -1);outline:var(--udexRadiusXXS) solid var(--udexColorBlue10)}:host([is-open]) .udex-secondary-navigation__item-icon{transform:translateY(-50%) rotateX(180deg)}.udex-secondary-navigation__item-text-wrap{display:flex;align-items:baseline;flex-direction:column;white-space:normal;position:relative;text-align:left;width:100%;padding-inline-end:var(--udexSpacer32)}.udex-secondary-navigation__item-text-wrap:dir(rtl){align-items:flex-start;text-align:right}.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,.udex-secondary-navigation__item:hover{color:var(--udex-secondary-navigation-item-color)}}@media (max-width: 639px){.udex-secondary-navigation__item{padding:var(--udexSpacer12) var(--udexSpacer24)}}
+`};
+export default styleData;
+	

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

@@ -0,0 +1,13 @@
+import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+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/SecondaryNavigationSubItem.css.ts",content:`:host{--udex-secondary-navigation-sub-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-secondary-navigation-sub-item-line-height: 1.125rem;--udex-secondary-navigation-sub-item-color: var(--udexColorGrey9, #223548);--udex-secondary-navigation-sub-item-hover-color: var(--udexColorBlue7, #0070f2);--udex-secondary-navigation-sub-item-hover-bakground: var(--udexColorGrey1, #F5F6F7);--udex-secondary-navigation-sub-item-active-bakground: var(--udexColorGrey2, #EAECEE);--udex-secondary-navigation-sub-item-active-border-color: var(--udexColorBlue7, #0070f2)}.udex-secondary-navigation__dropdown-item{padding:var(--udexSpacer12) var(--udexSpacer16);font-family:var(--sapFontFamily);font-size:var(--udex-secondary-navigation-sub-item-font-size);line-height:var(--udex-secondary-navigation-sub-item-line-height);color:var(--udex-secondary-navigation-sub-item-color);display:flex;text-decoration:none;position:relative;cursor:pointer}button.udex-secondary-navigation__dropdown-item{border:0;width:100%;background:none;justify-content:space-between;align-items:center}.udex-secondary-navigation__dropdown-item:focus{outline:none}:host([desktop]) .udex-secondary-navigation__dropdown-item:focus,.udex-secondary-navigation__dropdown-item:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);border-radius:var(--udexRadiusXXS);outline-offset:calc(var(--udexSpacer4) * -1)}[active].udex-secondary-navigation__dropdown-item:before,[sub-active].udex-secondary-navigation__dropdown-item:before{background:var(--udex-secondary-navigation-sub-item-active-border-color);border-radius:0 var(--udexRadiusXXS) var(--udexRadiusXXS) 0;content:"";position:absolute;top:0;bottom:0;left:0;height:100%;width:3px}[active].udex-secondary-navigation__dropdown-item:dir(rtl):before,[sub-active].udex-secondary-navigation__dropdown-item:dir(rtl):before{left:auto;right:0}[is-back].udex-secondary-navigation__dropdown-item{justify-content:normal}.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,.udex-secondary-navigation__item:hover{color:var(--udex-secondary-navigation-sub-item-hover-color)}.udex-secondary-navigation__dropdown-item:hover{background:var(--udex-secondary-navigation-sub-item-hover-bakground)}.udex-secondary-navigation__dropdown-item:active{background:var(--udex-secondary-navigation-sub-item-active-bakground)}.udex-secondary-navigation__dropdown:dir(rtl){left:auto;right:calc(var(--udexSpacer16) * -1)}.udex-secondary-navigation__dropdown-icon{min-width:14px;height:14px}.udex-secondary-navigation__dropdown-icon_back{margin-inline-end:var(--udexSpacer4)}@media (max-width: 979px){.udex-secondary-navigation__dropdown-item{padding:var(--udexSpacer12) var(--udexSpacer48);text-align:left}.udex-secondary-navigation__dropdown-item:hover .udex-secondary-navigation__dropdown-icon,.udex-secondary-navigation__dropdown-item:hover{background:none}:host([desktop]) .udex-secondary-navigation__dropdown-item:focus{outline:none}:host([desktop]) .udex-secondary-navigation__dropdown-item:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);border-radius:var(--udexRadiusXXS);outline-offset:calc(var(--udexSpacer4) * -1)}}@media (max-width: 639px){.udex-secondary-navigation__dropdown-item{padding:var(--udexSpacer12) var(--udexSpacer24)}}
+`};
+export default styleData;
+	

package/src/generated/themes/Slider.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/Slider.css.ts",content:`:host{--udex-slider-color-track-start-point: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-track-active: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-handle-focus-range: var( --sapSlider_Selected_BorderColor, #0070f2 );--udex-slider-color-handle-active-background: var( --sapSlider_Active_HandleBackground, #ffffff );--udex-slider-color-handle-default-icon: var( --sapContent_Selected_ForegroundColor, #0040b0 );--udex-slider-radius-range-size: var(---udexRadiusM, .5rem)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v0-114-2_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Slider.css.ts",content:`:host{--udex-slider-color-track-start-point: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-track-active: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-handle-focus-range: var( --sapSlider_Selected_BorderColor, #0070f2 );--udex-slider-color-handle-active-background: var( --sapSlider_Active_HandleBackground, #ffffff );--udex-slider-color-handle-default-icon: var( --sapContent_Selected_ForegroundColor, #0040b0 );--udex-slider-radius-range-size: var(---udexRadiusM, .5rem)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v0-117-1_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}
 `};
 export default styleData;
 	

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

@@ -0,0 +1,13 @@
+import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+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/StatusBadge.css.ts",content:`:host{--udex-status-badge-icon-color-error: var(--udexColorRed8);--udex-status-badge-background-color-error: var(--udexColorRed2);--udex-status-badge-border-color-error: var(--udexColorRed7);--udex-status-badge-icon-color-success: var(--udexColorGreen8);--udex-status-badge-background-color-success: var(--udexColorGreen2);--udex-status-badge-border-color-success: var(--udexColorGreen7);--udex-status-badge-icon-color-warning: var(--udexColorMango8);--udex-status-badge-background-color-warning: var(--udexColorMango2);--udex-status-badge-border-color-warning: var(--udexColorMango7);--udex-status-badge-icon-color-information: var(--udexColorBlue8);--udex-status-badge-background-color-information: var(--udexColorBlue2);--udex-status-badge-border-color-information: var(--udexColorBlue7);--udex-status-badge-icon-color-edit: white;--udex-status-badge-background-color-edit: var(--udexColorBlue7);--udex-status-badge-size-background-xs-and-s-and-m: 18px;--udex-status-badge-size-background-l: 20px;--udex-status-badge-size-background-xl: 28px;--udex-status-badge-size-icon-xs-and-s-and-m: 12px;--udex-status-badge-size-icon-l: 14px;--udex-status-badge-size-icon-xl: 16px;display:inline-block;box-sizing:border-box;position:relative}.udex-status-badge__icon{color:inherit;display:inline-block;border-radius:50%;outline:1px solid;vertical-align:top}.udex-status-badge__icon,:host([value-state="Information"]) .udex-status-badge__icon{color:var(--udex-status-badge-icon-color-information);border-color:var(--udex-status-badge-border-color-information);background:var(--udex-status-badge-background-color-information)}:host([value-state="Error"]) .udex-status-badge__icon{color:var(--udex-status-badge-icon-color-error);border-color:var(--udex-status-badge-border-color-error);background:var(--udex-status-badge-background-color-error)}:host([value-state="Success"]) .udex-status-badge__icon{color:var(--udex-status-badge-icon-color-success);border-color:var(--udex-status-badge-border-color-success);background:var(--udex-status-badge-background-color-success)}:host([value-state="Warning"]) .udex-status-badge__icon{color:var(--udex-status-badge-icon-color-warning);border-color:var(--udex-status-badge-border-color-warning);background:var(--udex-status-badge-background-color-warning)}:host([value-state="Edit"]) .udex-status-badge__icon{color:var(--udex-status-badge-icon-color-edit);background:var(--udex-status-badge-background-color-edit);border:0;outline:0;cursor:pointer}.udex-status-badge__icon,:host([size="XS"]) .udex-status-badge__icon{width:var(--udex-status-badge-size-icon-xs-and-s-and-m);height:var(--udex-status-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="S"]) .udex-status-badge__icon{width:var(--udex-status-badge-size-icon-xs-and-s-and-m);height:var(--udex-status-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="M"]) .udex-status-badge__icon{width:var(--udex-status-badge-size-icon-xs-and-s-and-m);height:var(--udex-status-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="L"]) .udex-status-badge__icon{width:var(--udex-status-badge-size-icon-l);height:var(--udex-status-badge-size-icon-l);padding:3px}:host([size="XL"]) .udex-status-badge__icon{width:var(--udex-status-badge-size-icon-xl);height:var(--udex-status-badge-size-icon-xl);padding:6px}.udex-status-badge,:host([size="XS"]) .udex-status-badge{width:var(--udex-status-badge-size-background-xs-and-s-and-m);height:var(--udex-status-badge-size-background-xs-and-s-and-m)}:host([size="S"]) .udex-status-badge{width:var(--udex-status-badge-size-background-xs-and-s-and-m);height:var(--udex-status-badge-size-background-xs-and-s-and-m)}:host([size="M"]) .udex-status-badge{width:var(--udex-status-badge-size-background-xs-and-s-and-m);height:var(--udex-status-badge-size-background-xs-and-s-and-m)}:host([size="L"]) .udex-status-badge{width:var(--udex-status-badge-size-background-l);height:var(--udex-status-badge-size-background-l)}:host([size="XL"]) .udex-status-badge{width:var(--udex-status-badge-size-background-xl);height:var(--udex-status-badge-size-background-xl)}
+`};
+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/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/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

@@ -120,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/Dropdown.css

@@ -7,6 +7,7 @@
   --udex-dropdown-horizontal-distance: 0;
   --udex-dropdown-vertical-distance: 0;
   --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;
@@ -19,6 +20,7 @@
   border-radius: var(--udex-dropdown-border-radius);
   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);

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/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

@@ -345,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%;
+}

package/src/themes/Search.css

@@ -20,7 +20,7 @@
   --udex-input-padding-horizontal: var(--udexSpacer12, 12px);
   --udex-input-padding-vertical: var(--udexSpacer8, 8px);
 
-  --udex-button-icon-size: var(--sapFontHeader2Size, 28px);
+  --udex-button-icon-size: var(--sapFontHeader5Size, 18px);
 
   --udex-dropdown-border-width: auto;
 
@@ -237,16 +237,16 @@ input[type="search"]::-webkit-search-results-decoration {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  width: 28px;
-  height: 28px;
+  width: 18px;
+  height: 18px;
   border: 2px solid #0040B0;
   border-radius: 50%;
   box-sizing: border-box;
 }
 
 [ui5-button].udex-search__button::part(button) {
-  width: 28px;
-  height: 28px;
+  width: 18px;
+  height: 18px;
 }
 
 [ui5-button].udex-search__button::part(icon) {
@@ -280,8 +280,8 @@ input[type="search"]::-webkit-search-results-decoration {
   z-index: -1;
   top: 0;
   left: 0;
-  width: 28px;
-  height: 28px;
+  width: 18px;
+  height: 18px;
   background-color: #0070F2;
   border-radius: 50%;
 }
@@ -370,3 +370,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .udex-search__prefix-popover::part(content) {
   padding: 0;
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: 100%;
+}