@sapudex/web-components 0.226.1 → 0.227.0

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: 8px;--udex-home-input-padding-left: var(--udexSpacer12, 12px);--udex-home-input-padding-right: var(--udexSpacer8, 8px);--udex-home-input-padding-vertical: 8px;--udex-button-size: var(--sapFontHeader2Size, 28px);--udex-button-color: var(--sapAccentColor10, var(--udexColorGrey7));--udex-button-non-interactive-icon-color: var(--sapContent_NonInteractiveIconColor, var(--udexColorGrey7));--udex-button-non-interactive-icon-size: var(--sapFontHeader5Size, 18px);--udex-dropdown-border-width: auto;--udex-search-container-padding-inline-end: var(--udexSpacer12, 12px);--udex-search-home-container-padding-inline-end: var(--udexSpacer8, 8px);--udex-search-label-inset-inline-start: var(--udexSpacer12, 12px);--udex-search-icons-column-gap: 0;--udex-search-home-icons-column-gap: var(--udexSpacer4, 4px);--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%;position:relative}: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;inset-block-start:9px;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,:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover-top:after,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover-top: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__root--show-popover-top:after,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover-top:after,.udex-search__prefix--show-popover-top:after{transform:translateY(-21px)}: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__root.udex-search-prefix.udex-search__root--show-popover-top: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-mode-home-search .udex-search__container{padding-inline-end:var(--udex-search-home-container-padding-inline-end)}.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)}:host(:not([_is-touched])[active]) .udex-search__root:before{content:"";position:absolute;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udex-input-radius)}:host([mode="Home Search"]:not([_is-touched])[active]) .udex-search__root:before{z-index:-1}.udex-search__field{display:block;width:100%;color:var(--udex-input-color-typed-text);font-size:16px;font-family:var(--sapFontFamily);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-mode-home-search .udex-search__field{padding:var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-right) var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-left)}.udex-search__field::placeholder{color:var(--udexColorGrey7);font-family:var(--sapFontFamily, sans-serif);font-size:16px}.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-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-size))}.udex-search__label-with-search-icon.udex-search__label-with-voice-icon{max-width:calc(var(--udex-search-label-width) - var(--udex-button-size) * 2 - var(--udex-search-icons-column-gap))}.udex-search__icons{display:flex;align-items:center;column-gap:var(--udex-search-icons-column-gap)}.udex-search-mode-home-search .udex-search__icons{column-gap:var(--udex-search-home-icons-column-gap)}.udex-search__icon{margin-inline:5px;background-color:transparent;border:none;color:var(--udex-button-non-interactive-icon-color);min-width:var(--udex-button-non-interactive-icon-size);height:var(--udex-button-non-interactive-icon-size);border-radius:50%;position:relative;z-index:1;overflow:visible}.udex-search__button{background-color:transparent;border:none;color:var(--udex-button-color);min-width:var(--udex-button-size);height:var(--udex-button-size);border-radius:50%;position:relative;z-index:1;overflow:visible}[udex-control-button]{--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px}[udex-control-button].udex-search__reset-button{--sapButton_BorderWidth: 0px 1px 0 1px}[udex-control-button].udex-search__submit-button{margin:0px calc((var(--udex-search-container-padding-inline-end)) * -1) 0px 0;--sapButton_BorderWidth: 0 0 0 1px}[ui5-button].udex-search__button::part(button):focus-visible:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:28px;height:28px;border:2px solid var(--udexColorBlue9, #0040B0);border-radius:50%;box-sizing:border-box}[ui5-button].udex-search__button::part(button){padding:0;width:28px;height:28px;line-height:0}[ui5-icon].udex-search__button-icon{color:inherit;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.udex-search__voice-button:hover{background-color:#0000001a;border:none;box-shadow:none}[ui5-button].udex-search__button.udex-search__voice-button.udex-search__voice-button--active,[ui5-button][active].udex-search__button.udex-search__voice-button{background:var(--udexColorBlue8, #0057D2);color:var(--udexColorNeutralWhite, #FFFFFF)}[ui5-button].udex-search__button:focus{outline:none}.udex-search__prefix{position:relative;z-index:1}.udex-search__prefix--show-popover:after,.udex-search__prefix--show-popover-top: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-top{border-end-start-radius:0;border-end-end-radius:0;border:1px solid var(--udexCoreBorderDefault);border-block-end:0;box-shadow:none;background-color:var(--udexColorNeutralWhite, #fff);clip-path:inset(0px -10px -10px -10px)}.udex-search__prefix-popover::part(content),.udex-search__prefix-popover-top::part(content){padding:0}[udex-dropdown]{--udex-dropdown-pane-max-width: 100%}.hidden{display:none}
+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: 8px;--udex-home-input-padding-left: var(--udexSpacer12, 12px);--udex-home-input-padding-right: var(--udexSpacer8, 8px);--udex-home-input-padding-vertical: 8px;--udex-button-size: var(--sapFontHeader2Size, 28px);--udex-button-color: var(--sapAccentColor10, var(--udexColorGrey7));--udex-button-non-interactive-icon-color: var(--sapContent_NonInteractiveIconColor, var(--udexColorGrey7));--udex-button-non-interactive-icon-size: var(--sapFontHeader5Size, 18px);--udex-dropdown-border-width: auto;--udex-search-container-padding-inline-end: var(--udexSpacer12, 12px);--udex-search-home-container-padding-inline-end: var(--udexSpacer8, 8px);--udex-search-label-inset-inline-start: var(--udexSpacer12, 12px);--udex-search-icons-column-gap: 0;--udex-search-home-icons-column-gap: var(--udexSpacer4, 4px);--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%;position:relative}: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;inset-block-start:9px;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,:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover-top:after,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover-top: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__root--show-popover-top:after,:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover-top:after,.udex-search__prefix--show-popover-top:after{transform:translateY(-21px)}: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__root.udex-search-prefix.udex-search__root--show-popover-top: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-mode-home-search .udex-search__container{padding-inline-end:var(--udex-search-home-container-padding-inline-end)}.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)}:host(:not([_is-touched])[active]) .udex-search__root:before{content:"";position:absolute;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udex-input-radius)}:host([mode="Home Search"]:not([_is-touched])[active]) .udex-search__root:before{z-index:-1}.udex-search__field{display:block;width:100%;color:var(--udex-input-color-typed-text);font-size:16px;font-family:var(--sapFontFamily);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-mode-home-search .udex-search__field{padding:var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-right) var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-left)}.udex-search__field::placeholder{color:var(--udexColorGrey7);font-family:var(--sapFontFamily, sans-serif);font-size:16px}.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-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-size))}.udex-search__label-with-search-icon.udex-search__label-with-voice-icon{max-width:calc(var(--udex-search-label-width) - var(--udex-button-size) * 2 - var(--udex-search-icons-column-gap))}.udex-search__icons{display:flex;align-items:center;column-gap:var(--udex-search-icons-column-gap)}.udex-search-mode-home-search .udex-search__icons{column-gap:var(--udex-search-home-icons-column-gap)}.udex-search__icon{margin-inline:5px;background-color:transparent;border:none;color:var(--udex-button-non-interactive-icon-color);min-width:var(--udex-button-non-interactive-icon-size);height:var(--udex-button-non-interactive-icon-size);border-radius:50%;position:relative;z-index:1;overflow:visible}.udex-search__button{background-color:transparent;border:none;color:var(--udex-button-color);min-width:var(--udex-button-size);height:var(--udex-button-size);border-radius:50%;position:relative;z-index:1;overflow:visible}[udex-control-button]{--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px}[udex-control-button].udex-search__reset-button{--sapButton_BorderWidth: 0px 1px 0 1px}[udex-control-button].udex-search__submit-button{margin:0px calc((var(--udex-search-container-padding-inline-end)) * -1) 0px 0;--sapButton_BorderWidth: 0 0 0 1px}[ui5-button].udex-search__button::part(button):focus-visible:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:28px;height:28px;border:2px solid var(--udexColorBlue9, #0040B0);border-radius:50%;box-sizing:border-box}[ui5-button].udex-search__button::part(button){padding:0;width:28px;height:28px;line-height:0}[ui5-icon].udex-search__button-icon{color:inherit;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.udex-search__voice-button:hover{background-color:#0000001a;border:none;box-shadow:none}[ui5-button].udex-search__button.udex-search__voice-button.udex-search__voice-button--active,[ui5-button][active].udex-search__button.udex-search__voice-button{background:var(--udexColorBlue8, #0057D2);color:var(--udexColorNeutralWhite, #FFFFFF)}[ui5-button].udex-search__button:focus{outline:none}.udex-search__prefix{position:relative;z-index:1}.udex-search__prefix--show-popover:after,.udex-search__prefix--show-popover-top: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-top{border-end-start-radius:0;border-end-end-radius:0;border:1px solid var(--udexCoreBorderDefault);border-block-end:0;box-shadow:none;background-color:var(--udexColorNeutralWhite, #fff);clip-path:inset(0px -10px -10px -10px)}.udex-search__prefix-popover::part(content),.udex-search__prefix-popover-top::part(content){padding:0}[udex-dropdown]{--udex-dropdown-pane-max-width: 100%}.hidden{position:absolute;width:0px;height:0px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}
 `};
 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-226-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)}
+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-227-0_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/themes/Breadcrumbs.css

@@ -86,6 +86,9 @@
   height: 12px;
   width: 12px;
   margin: auto;
+  --udex-link-icon-width: 12px;
+  --udex-link-icon-height: 12px;
+  --udex-link-line-height: 12px;
 }
 
 .udex-breadcrumbs__trigger:focus {

package/src/themes/Button.css

@@ -15,6 +15,7 @@
   --udex-button-icon-text-spacing-small-size: 4px;
   --udex-button-icon-text-spacing-medium-size: 8px;
   --udex-button-icon-text-spacing-large-size: 8px;
+  --udex-button-focus-border-radius: 0.375rem;
   --udexTypographyFontWeightMedium: 500;
 
   /* Primary design */
@@ -91,8 +92,8 @@
   --udex-button-color-tertiary-standard-hover-border: var(--sapButton_Lite_Hover_BorderColor, var(--udexColorGrey7));
   --udex-button-color-tertiary-standard-hover-text-and-icon: var(--sapButton_Lite_Hover_TextColor, var(--udexColorBlue9));
   /* Active */
-  --udex-button-color-tertiary-standard-active-background: var(--sapButton_Lite_Active_Background, var(--udexColorBlue9));
-  --udex-button-color-tertiary-standard-active-border: var(--sapButton_Lite_Active_BorderColor, var(--udexColorNeutralWhite));
+  --udex-button-color-tertiary-standard-active-background: var(--sapButton_Lite_Active_Background, var(--udexColorNeutralWhite));
+  --udex-button-color-tertiary-standard-active-border: var(--sapButton_Lite_Active_BorderColor, var(--udexColorBlue9));
   --udex-button-color-tertiary-standard-active-text-and-icon: var(--sapButton_Lite_TextColor, var(--udexColorBlue9));
   /* Disabled */
   --udex-button-color-tertiary-standard-disabled-background: var(--udex-button-color-transparent, hsla(0, 0%, 0%, 0));
@@ -227,6 +228,10 @@
   --udex-button-color-warning-toggled-disabled-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexCoreSemanticWarning10));
 }
 
+:host([desktop][active]) .ui5-button-root:focus-within:before {
+  border-radius: var(--udex-button-focus-border-radius);
+}
+
 :host {
   display: inline-block;
   font-weight: var(--udexTypographyFontWeightMedium);
@@ -256,6 +261,8 @@
   inset: var(--udex-button-invisible-focus-inset);
 }
 
+
+
 :host,
 :host([size="Medium"]) {
   font-size: var(--udexTypographyNavigationMediumXLFontSize, 1rem);
@@ -321,17 +328,20 @@
   margin-inline-start: 0;
 }
 
-:host([size="Small"])::part(icon) {
+:host([size="Small"])::part(icon),
+:host([size="Small"])::part(endIcon)  {
   height: var(--udex-button-icon-s-size, 14px);
   width: var(--udex-button-icon-s-size, 14px);
 }
 
-:host([size="Medium"])::part(icon) {
+:host([size="Medium"])::part(icon),
+:host([size="Medium"])::part(endIcon)  {
   height: var(--udex-button-icon-m-size, 16px);
   width: var(--udex-button-icon-m-size, 16px);
 }
 
-:host([size="Large"])::part(icon) {
+:host([size="Large"])::part(icon),
+:host([size="Large"])::part(endIcon)  {
   height: var(--udex-button-icon-l-size, 18px);
   width: var(--udex-button-icon-l-size, 18px);
 }
@@ -362,11 +372,26 @@
   margin-inline-start: var(--udex-button-icon-text-spacing-large-size);
 }
 
+:host:disabled,
+:host([design="Default"]):disabled,
+:host([design="Secondary"]):disabled,
+:host([design="Invisible"]):disabled,
+:host([design="Emphasized"][_aria-disabled]):disabled,
+:host([design="Primary"][_aria-disabled]):disabled,
+:host([design="Transparent"]):disabled,
+:host([design="Tertiary"]):disabled,
+:host([design="Negative"]):disabled,
+:host([design="Attention"]):disabled,
+:host([design="Warning"]):disabled,
+:host([design="Positive"]):disabled {
+  opacity: var(--sapContent_DisabledOpacity, 0.4);
+}
 
 /* Standard/Primary css-rules */
 :host,
 :host([design="Emphasized"]),
 :host([design="Primary"]) {
+  font-family: var(--sapFontFamily);
   color: var(--udex-button-color-primary-standard-default-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-default-background);
   border: 1px solid var(--udex-button-color-primary-standard-default-border-color);
@@ -384,8 +409,8 @@
   border: 1px solid var(--udex-button-color-primary-standard-hover-border-color);
 }
 
-:host([active]:not([disabled])) ,
-:host([design="Emphasized"][active]:not([disabled])) ,
+:host([active]:not([disabled])),
+:host([design="Emphasized"][active]:not([disabled])),
 :host([design="Primary"][active]:not([disabled])) {
   color: var(--udex-button-color-primary-standard-active-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-active-background);
@@ -398,7 +423,6 @@
   color: var(--udex-button-color-primary-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-disabled-background);
   border: 1px solid var(--udex-button-color-primary-standard-disabled-background);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Primary toggled*/
@@ -418,13 +442,12 @@
   border: 1px solid var(--udex-button-color-primary-toggled-hover-border);
 }
 
-:host([toggled]):disabled ,
-:host([design="Emphasized"][toggled]):disabled ,
+:host([toggled]):disabled,
+:host([design="Emphasized"][toggled]):disabled,
 :host([design="Primary"][toggled]):disabled {
   color: var(--udex-button-color-primary-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-primary-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-primary-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Secondary css-rules */
@@ -446,7 +469,7 @@
   border: 1px solid var(--udex-button-color-secondary-standard-hover-border);
 }
 
-:host([design="Default"][active]:not([disabled])) ,
+:host([design="Default"][active]:not([disabled])),
 :host([design="Secondary"][active]:not([disabled])) {
   color: var(--udex-button-color-secondary-standard-active-text-and-icon);
   background-color: var(--udex-button-color-secondary-standard-active-background);
@@ -458,30 +481,28 @@
   color: var(--udex-button-color-secondary-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-secondary-standard-disabled-background);
   border: 1px solid var(--udex-button-color-secondary-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Secondary toggled*/
-:host([design="Default"][toggled]) ,
+:host([design="Default"][toggled]),
 :host([design="Secondary"][toggled]) {
   color: var(--udex-button-color-secondary-toggled-default-text-and-icon);
   background-color: var(--udex-button-color-secondary-toggled-default-background);
   border: 1px solid var(--udex-button-color-secondary-toggled-default-border);
 }
 
-:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
+:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
 :host([design="Secondary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-secondary-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-secondary-toggled-hover-background);
   border: 1px solid var(--sapButton_Selected_Hover_BorderColor);
 }
 
-:host([design="Default"][toggled]):disabled ,
+:host([design="Default"][toggled]):disabled,
 :host([design="Secondary"][toggled]):disabled {
   color: var(--udex-button-color-secondary-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-secondary-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-secondary-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Tertiary css-rules */
@@ -515,7 +536,6 @@
   color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-tertiary-standard-disabled-background);
   border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Tertiary toggled*/
@@ -527,7 +547,7 @@
 }
 
 :host([design="Transparent"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
+:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-tertiary-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-tertiary-toggled-hover-background);
   border: 1px solid var(--udex-button-color-tertiary-toggled-hover-border);
@@ -576,7 +596,6 @@
   color: var(--udex-button-color-invisible-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-invisible-standard-disabled-background);
   border: none;
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Positive css-rules */
@@ -604,7 +623,6 @@
   color: var(--udex-button-color-positive-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-positive-standard-disabled-background);
   border: 1px solid var(--udex-button-color-positive-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Positive toggled*/
@@ -614,7 +632,7 @@
   border: 1px solid var(--udex-button-color-positive-toggled-default-border);
 }
 
-:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
+:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-positive-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-positive-toggled-hover-background);
   border: 1px solid var(--udex-button-color-positive-toggled-hover-border);
@@ -624,7 +642,6 @@
   color: var(--udex-button-color-positive-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-positive-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-positive-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Negative css-rules */
@@ -642,7 +659,8 @@
   border: 1px solid var(--udex-button-color-negative-standard-hover-border);
 }
 
-:host([design=Negative][active]:not([disabled])) {
+:host([design=Negative][active]:not([disabled])),
+:host([design=Negative][active][_aria-disabled="false"]) {
   color: var(--udex-button-color-negative-standard-active-text-and-icon);
   background-color: var(--udex-button-color-negative-standard-active-background);
   border: 1px solid var(--udex-button-color-negative-standard-active-border);
@@ -652,7 +670,6 @@
   color: var(--udex-button-color-negative-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-negative-standard-disabled-background);
   border: 1px solid var(--udex-button-color-negative-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Negative toggled*/
@@ -672,7 +689,6 @@
   color: var(--udex-button-color-negative-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-negative-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-negative-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Warning css-rules */
@@ -694,7 +710,7 @@
   border: 1px solid var(--udex-button-color-warning-standard-hover-border);
 }
 
-:host([design="Attention"][active]:not([disabled])) ,
+:host([design="Attention"][active]:not([disabled])),
 :host([design="Warning"][active]:not([disabled])) {
   color: var(--udex-button-color-warning-standard-active-text-and-icon);
   background-color: var(--udex-button-color-warning-standard-active-background);
@@ -706,7 +722,6 @@
   color: var(--udex-button-color-warning-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-warning-standard-disabled-background);
   border: 1px solid var(--udex-button-color-warning-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Warning toggled*/
@@ -717,7 +732,7 @@
   border: 1px solid var(--udex-button-color-warning-toggled-default-border);
 }
 
-:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
+:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
 :host([design="Warning"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-warning-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-warning-toggled-hover-background);
@@ -729,5 +744,45 @@
   color: var(--udex-button-color-warning-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-warning-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-warning-toggled-disabled-border);
+}
+
+:host([aria-disabled="true"][design="Tertiary"]) .ui5-button-root,
+:host([_aria-disabled][design="Tertiary"]) .ui5-button-root,
+:host([design="Tertiary"][_aria-disabled][active]),
+:host([design="Tertiary"][aria-disabled="true"][active]) {
+  color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
+  background-color: var(--udex-button-color-tertiary-standard-disabled-background);
+  border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
+}
+
+:host([aria-disabled="true"][design="Tertiary"]) .ui5-button-root,
+:host([_aria-disabled][design="Tertiary"]) .ui5-button-root {
   opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
+
+:host([design="Tertiary"][aria-disabled="true"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
+:host([design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled]))
+:host([design="Tertiary"][_aria-disabled][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
+:host([design="Tertiary"][_aria-disabled]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover)  {
+  color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
+  background-color: var(--udex-button-color-tertiary-standard-disabled-background);
+  border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
+}
+
+:host([design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
+:host([design="Tertiary"][_aria-disabled][active]:not([disabled])),
+:host([desktop][design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
+:host([desktop][design="Tertiary"][_aria-disabled][active]) {
+  border: none;
+}
+
+:host([desktop][design="Tertiary"][_aria-disabled]) .ui5-button-root::after,
+:host([desktop][design="Tertiary"][_aria-disabled]) .ui5-button-root::before,
+:host([desktop][active][design="Tertiary"][_aria-disabled]) .ui5-button-root::after,
+:host([desktop][active][design="Tertiary"][_aria-disabled]) .ui5-button-root::before,
+:host([desktop][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::after,
+:host([desktop][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::before,
+:host([desktop][active][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::after,
+:host([desktop][active][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::before {
+  content: none;
+}

package/src/themes/ListItem.css

@@ -163,6 +163,10 @@
   display: inherit;
 }
 
+::slotted([udex-button]:hover:not([active])) {
+  background-color: var(--udex-button-color-tertiary-standard-default-background);
+}
+
 .udex-list__item:focus-visible {
   outline: none;
 }
@@ -256,7 +260,7 @@
 .udex-list__edit-button,
 .udex-list__delete-button {
   --udex-button-color-tertiary-standard-hover-background: none;
-  --udex-button-color-tertiary-standard-hover-border: var(--udexColorGrey5, #8396A8);
+  --udex-button-color-tertiary-standard-hover-border: var(--udexColorGrey7, #475E75);
   --udex-button-color-tertiary-standard-active-border: var(--udexColorBlue7, #0070f2);
 }
 

package/src/themes/MastheadCountrySelector.css

@@ -7,18 +7,17 @@
   --udex-masthead-country-selector-desktop-max-height: 375px;
 }
 
-:host([_is-mobile-mode]) .udex-masthead-country-selector__list_countries {
-  max-height: initial;
-  overflow: initial;
-}
-
 :host([_is-mobile-mode]) .udex-masthead-country-selector__item_countries {
   --udex-masthead-menu-item-padding-desktop: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);
   border-bottom: 1px solid var(--udex-masthead-menu-item-border-color);
+  max-height: initial;
+  overflow: initial;
 }
 
 :host([_is-mobile-mode]) .udex-masthead-country-selector {
   padding: var(--udex-masthead-country-selector-padding-l);
+  min-height: 100%;
+  box-sizing: border-box;
 }
 
 .udex-masthead-country-selector {
@@ -79,6 +78,10 @@
   overflow: auto;
 }
 
+:host([_is-mobile-mode]) .udex-masthead-country-selector__list_countries {
+  max-height: initial;
+}
+
 @media (max-width: 1279px) {
   .udex-masthead-country-selector {
     padding: var(--udex-masthead-country-selector-padding-l);

package/src/themes/MastheadItem.css

@@ -23,7 +23,8 @@
   --udex-masthead-item-dropdown-mobile-min-width: 360px;
   --udex-masthead-item-dropdown-select-box-min-width: 397px;
   --udex-masthead-item-dropdown-position: absolute;
-  --udex-masthead-item-dropdown-height:  calc(100vh - 60px);
+  --udex-masthead-item-dropdown-mobile-height: var(--udex-masthead-shell-mobile-menu-height, 100%);
+  --udex-masthead-item-dropdown-box-shadow-mobile: none;
   --udex-masthead-item-dropdown-zindex: 100;
   --udex-masthead-item-button-icon-size: 32px;
 
@@ -224,12 +225,18 @@
   --udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4));
 }
 
+:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),
 :host([slot="profile"]) ::slotted([slot="dropdown"]) {
   width: 100%;
   display: flex;
   flex-direction: column;
 }
 
+:host([slot="countrySelector"][_is-mobile-mode]) ::slotted([slot="dropdown"]),
+:host([slot="profile"][_is-mobile-mode]) ::slotted([slot="dropdown"]) {
+  display: initial;
+}
+
 :host([_is-mobile-mode]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,
 :host([part="menu-open-btn"]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown {
   min-width: var(--udex-masthead-item-dropdown-mobile-min-width);
@@ -238,7 +245,7 @@
 :host([_is-mobile-mode]) .udex-masthead-item__dropdown,
 :host([part="menu-open-btn"]) .udex-masthead-item__dropdown {
   position: var(--udex-masthead-item-dropdown-position);
-  height: var(--udex-masthead-item-dropdown-height);
+  height: var(--udex-masthead-item-dropdown-mobile-height);
   width: var(--udex-masthead-item-dropdown-mobile-min-width);
   top: 60px;
   right: 0;
@@ -278,6 +285,7 @@
     position: initial;
   }
 
+  :host([slot="countrySelector"]) ::slotted([slot="dropdown"]),
   :host([slot="profile"]) ::slotted([slot="dropdown"]) {
     display: initial;
   }
@@ -300,9 +308,9 @@
 
   .udex-masthead-item__dropdown {
     position: var(--udex-masthead-item-dropdown-position);
-    height: var(--udex-masthead-item-dropdown-height);
+    height: var(--udex-masthead-item-dropdown-mobile-height);
     width: var(--udex-masthead-item-dropdown-mobile-min-width);
-    box-shadow: none;
+    box-shadow: var(--udex-masthead-item-dropdown-box-shadow-mobile);
     top: 60px;
   }
 

package/src/themes/MastheadShell.css

@@ -1,4 +1,5 @@
 :host {
+  --udex-masthead-shell-height: 60px;
   --udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);
   --udex-masthead-shell-dropdown-shadow:  var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
   --udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);
@@ -23,6 +24,7 @@
   --udex-masthead-mobile-menu-buttons-width: 360px;
   --udex-masthead-right-menu-padding: var(--udexSpacer64);
   --udex-masthead-shell-explore-margin: var(--udexSpacer12);
+  --udex-masthead-shell-mobile-menu-height: 100%;
 }
 
 :host {
@@ -74,7 +76,7 @@
   padding: 0 var(--udexSpacer84);
   max-width: var(--udex-masthead-shell-container-xl-max-width);
   margin: 0 auto;
-  height: 60px;
+  height: var(--udex-masthead-shell-height);
 }
 
 .udex-masthead-shell__logo {
@@ -211,7 +213,7 @@
 :host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,
 :host([_is-mobile-menu-open]) .udex-masthead-shell__cart,
 :host([_is-mobile-menu-open]) .udex-masthead-shell__profile,
-:host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn {
+:host([_is-mobile-mode][_is-mobile-menu-open]) .udex-masthead-shell__close-btn {
   display: flex;
 }
 
@@ -283,6 +285,7 @@
     display: none;
   }
 
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn,
   .udex-masthead-shell__menu-btn {
     display: flex;
   }

package/src/themes/Modal.css

@@ -23,7 +23,7 @@
 
 :host .ui5-popup-root .ui5-popup-content  {
 	padding: var(--udexModalAndOverlayModalContentPaddingVertical) var(--udexModalAndOverlayModalContentPaddingHorizontal);
-  scrollbar-gutter: stable both-edges;
+  scrollbar-gutter: auto;
 }
 
 :host([type="basic"]) {
@@ -33,6 +33,11 @@
 
 :host([type="basic"]) .ui5-popup-root .ui5-popup-content {
 	padding: 0 var(--udexModalAndOverlayModalContentPaddingHorizontal);
+  scrollbar-gutter: auto;
+}
+
+:host ::slotted([slot="header"][ui5-bar]) {
+  height: 32px;
 }
 
 :host ::slotted([slot="footer"]) {

package/src/themes/Pagination.css

@@ -124,3 +124,22 @@
 .udex-pagination__item--short-value {
   padding: var(--udex-pagination-short-item-paddings);
 }
+
+[udex-button][aria-disabled="true"]:focus,
+[udex-button][aria-disabled="true"]:focus-visible,
+[udex-button][_aria-disabled]:focus,
+[udex-button][_aria-disabled]:focus-visible {
+  outline: 2px solid #002A86;
+  outline-offset: -4px;
+}
+
+.hidden {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+  padding: 0;
+}

package/src/themes/Search.css

@@ -447,5 +447,12 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 .hidden {
-  display: none;
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+  padding: 0;
 }