@sapudex/web-components 2.29.0 → 2.31.0

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-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-title-min-height: 64px;--udex-secondary-navigation-item-dropdown-min-width: 240px;--udex-secondary-navigation-item-dropdown-max-width: 360px;--udex-secondary-navigation-item-dropdown-max-height: 100%;--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:flex-start;height:100%;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:-1px;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,.udex-secondary-navigation__dropdown[data-horizontal-align=left]:dir(rtl){position:absolute;top:100%;margin-top:1px;left:calc(var(--udexSpacer16) * -1);right:auto;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[data-horizontal-align=right]{left:auto;right:calc(var(--udexSpacer16) * -1)}.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;overflow-y:auto;max-height:calc(var(--udex-secondary-navigation-item-dropdown-max-height) - var(--udexSpacer24))}.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:var(--udex-secondary-navigation-item-title-min-height);width:100%;z-index:1;display:flex;align-items:center;height:fit-content}.udex-secondary-navigation__item-sub-title{font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);font-weight:400;display:block}.udex-secondary-navigation__dropdown{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);gap:var(--udexSpacer16)}.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 `:host{--udex-secondary-navigation-item-color: var(--sapTextColor, #223548);--udex-secondary-navigation-item-hover-color: var(--udexColorBlue8, #0057D2);--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.1;--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-title-min-height: 64px;--udex-secondary-navigation-item-dropdown-min-width: 240px;--udex-secondary-navigation-item-dropdown-max-width: 360px;--udex-secondary-navigation-item-dropdown-max-height: 100%;--udex-secondary-navigation-item-mobile-dropdown-shadow: 0 2px 8px 0 var(--udexColorGrey2, #EAECEE);--udex-secondary-navigation-item-mobile-heading-shadow: 0 2px 4px 0 var(--udexColorGrey2, #EAECEE);--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:flex-start;height:100%;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:-1px;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;max-width:16px;height:16px}.udex-secondary-navigation__dropdown,.udex-secondary-navigation__dropdown[data-horizontal-align=left]:dir(rtl){position:absolute;top:100%;margin-top:1px;left:calc(var(--udexSpacer16) * -1);right:auto;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[data-horizontal-align=right]{left:auto;right:calc(var(--udexSpacer16) * -1)}.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:0;top:50%;width:22px;max-width:22px;height:22px;margin:0}.udex-secondary-navigation__item-icon:dir(rtl){right:auto;left:0}.udex-secondary-navigation__dropdown{position:relative;box-shadow:none;min-width:initial;max-width:initial;left:initial;margin-top:initial;top:initial;overflow-y:auto;max-height:calc(var(--udex-secondary-navigation-item-dropdown-max-height) - var(--udexSpacer24))}.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:var(--udex-secondary-navigation-item-title-min-height);width:100%;z-index:1;display:flex;align-items:center;height:fit-content}.udex-secondary-navigation__item-sub-title{font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);font-weight:400;display:block}.udex-secondary-navigation__dropdown{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:42px;gap:6px}.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)}}
 `

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-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-background: var(--udexColorGrey1, #F5F6F7);--udex-secondary-navigation-sub-item-active-background: 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;text-align:left}.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-background)}.udex-secondary-navigation__dropdown-item:active{background:var(--udex-secondary-navigation-sub-item-active-background)}.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)}.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 `:host{--udex-secondary-navigation-sub-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-secondary-navigation-sub-item-line-height: 1.1;--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-background: var(--udexColorGrey1, #F5F6F7);--udex-secondary-navigation-sub-item-active-background: 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;text-align:left;gap:4px}.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-background)}.udex-secondary-navigation__dropdown-item:active{background:var(--udex-secondary-navigation-sub-item-active-background)}.udex-secondary-navigation__dropdown:dir(rtl){left:auto;right:calc(var(--udexSpacer16) * -1)}.udex-secondary-navigation__dropdown-icon{max-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)}.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)}}
 `

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-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, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}: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);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-29-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)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
+export default `: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, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}: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);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-31-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)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
 `

package/src/i18n/messagebundle.properties

@@ -70,6 +70,10 @@ STARS=stars
 READ_MORE=Read more
 READ_LESS=Read less
 
+# the "show more" and "show less" buttons text for the Review component
+SHOW_MORE=Show more
+SHOW_LESS=Show less
+
 # rating indicator "text" for aria-role, "tooltop" text and "required" for aria-description
 RATING_INDICATOR_TEXT=Rating Indicator
 RATING_INDICATOR_TOOLTIP_TEXT=Rating
@@ -162,6 +166,9 @@ READ_ONLY=Read only
 #Aria label text for Masthead main navigation
 MAIN_LINKS=main links
 
+#Aria label text for Masthead back to region list button
+BACK_TO_REGION_LIST=back to region list
+
 #Text for link opens in new window
 OPENS_IN_A_NEW_WINDOW=opens in a new window
 
@@ -234,6 +241,8 @@ 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
+EXPAND=Expand
+COLLAPSE=Collapse
 
 #SecondaryNavigationSubItem Aria label for back button
 BACK_BUTTON_LABEL=back button

package/src/i18n/messagebundle_en.properties

@@ -6,6 +6,7 @@ UNSELECTED=Unselected
 INDETERMINATE=Indeterminate
 EDIT_BUTTON=Edit
 DELETE_BUTTON=Delete
+BACK_TO_REGION_LIST=back to region list
 BUTTON_ARIA_TYPE_PRIMARY=Primary
 BUTTON_ARIA_TYPE_SECONDARY=Secondary
 BUTTON_ARIA_TYPE_TERTIARY=Tertiary
@@ -39,6 +40,8 @@ MORE=More
 ATTENTION_BADGE=Attention badge
 READ_MORE=Read more
 READ_LESS=Read less
+SHOW_MORE=Show more
+SHOW_LESS=Show less
 RATING_INDICATOR_TEXT=Rating Indicator
 RATING_INDICATOR_TOOLTIP_TEXT=Rating
 RATING_INDICATOR_ARIA_DESCRIPTION=Required

package/src/themes/BreadcrumbsPopover.css

@@ -3,6 +3,7 @@
   --udex-breadcrumbs-current-item-color:  var(--udexCoreTextDark, #223548);
   --udex-breadcrumbs-dropdown-item-font-size:  var(--udexTypographyNavigationMediumXSFontSize, 12px);
   --udex-breadcrumbs-dropdown-item-line-height:  var(--udexTypographyNavigationLineHeight, 1.1);
+  --udex-breadcrumbs-dropdown-box-shadow: var(--sapContent_Shadow2, 0px 10px 30px 0px rgba(34, 54, 73, 0.25));
 }
 
 .udex-breadcrumbs__popover {
@@ -10,6 +11,7 @@
   --udex-dropdown-border-width: 0;
   --udex-dropdown-border-radius: 0;
   --udex-dropdown-pane-max-width: fit-content;
+  --udex-dropdown-box-shadow: var(--udex-breadcrumbs-dropdown-box-shadow);
 }
 
 [ui5-icon] {

package/src/themes/Dropdown.css

@@ -25,10 +25,14 @@
   overflow: var(--udex-dropdown-pane-overflow);
   border: var(--udex-dropdown-border-width) solid var(--udex-dropdown-border-color-default);
   border-radius: var(--udex-dropdown-border-radius);
-  box-shadow: var(--udex-dropdown-box-shadow);
   background: var(--udex-dropdown-background-content);
 }
 
+:host,
+:host([hide-arrow]) {
+  box-shadow: var(--udex-dropdown-box-shadow);
+}
+
 .ui5-popup-root.ui5-popover-root {
   margin: var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);
 }

package/src/themes/FilterMenu.css

@@ -14,7 +14,7 @@
   --udex-filter-menu-trigger-prefix-color-active: var(--sapShell_NeutralColor, #475e75);
   --udex-filter-menu-trigger-prefix-color-disabled: var(--sapShell_NeutralColor, #475e75);
 
-  --udex-filter-menu-trigger-selection-bar-background: var(--sapHoverColor, #0070f2);
+  --udex-filter-menu-trigger-selection-bar-background: var(--udexColorBlue8, #0057D2);
   --udex-filter-menu-trigger-outline-border-color:  var(--udexColorBlue10, #002A86);
 
   --udex-filter-menu-popover-left-offset: 0px;
@@ -110,7 +110,7 @@
 
 .udex-filter-menu__trigger-active:before {
   opacity: 1;
-}  
+}
 
 .udex-filter-menu__trigger-icon {
   width: 16px;

package/src/themes/ImageGridTicker.css

@@ -45,7 +45,7 @@
 
 .udex-image-grid-ticker {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
 }
 
 .udex-image-grid-ticker__track-wrapper {
@@ -74,31 +74,7 @@
 }
 
 .udex-image-grid-ticker__play-button-holder {
-  padding-top: 34px;
-}
-
-.udex-image-grid-ticker__play-button {
-  position: relative;
-  --udex-button-medium-size: 32px;
-  --udex-button-icon-m-size: 32px;
-  --udex-button-focus-border-radius: 50%;
-  --udex-button-invisible-focus-inset: 0;
-  --udex-button-color-invisible-standard-default-text-and-icon: var(--udex-image-grid-ticker-play-btn-color);
-  --udex-button-color-invisible-standard-hover-text-and-icon: var(--udex-image-grid-ticker-play-btn-color-hover);
-}
-
-:host([desktop]) .udex-image-grid-ticker__play-button:focus:before,
-.udex-image-grid-ticker__play-button:focus-visible:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  box-shadow: 0 0 0 2px #FFF;
-  border-radius: 50%;
-}
-
-.udex-image-grid-ticker__play-button::part(button):focus-within:after,
-.udex-image-grid-ticker__play-button::part(button):focus-within:before {
-  border-radius: 50%;
+  padding-bottom: 34px;
 }
 
 @keyframes scroll-ticker-rtl {

package/src/themes/Link.css

@@ -47,7 +47,6 @@
 :host([end-icon]) .ui5-link-text {
   white-space: var(--udex-link-white-space);
   margin-inline-end: var(--udexSpacer20);
-  vertical-align: middle;
 }
 
 :host([design="Emphasized"]) {
@@ -156,12 +155,12 @@
 .ui5-link-icon {
   margin-inline-end: 0;
   padding-inline-end: var(--udexSpacer4, 4px);
-  vertical-align: middle;
   float: none;
+  vertical-align: text-bottom;
 }
 
 .ui5-link-end-icon {
   margin-inline-start: calc(var(--udexSpacer20)* -1);;
   padding-inline-start: var(--udexSpacer4, 4px);
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }

package/src/themes/ListGroupHeader.css

@@ -1,8 +1,9 @@
 :host {
-  --udex-list-item-group-header-padding-vertical: var(--udexSpacer8, 8px);
-  --udex-list-item-group-header-padding-horizontal: var(--udexSpacer12, 12px);
+  --udex-list-item-group-header-padding-vertical: var(--udexSpacer12, 12px);
+  --udex-list-item-group-header-padding-horizontal: var(--udexSpacer16, 16px);
   --udex-list-item-group-header-supporting-text-color: var(--sapContent_LabelColor, #223548);
   --udex-list-item-group-header-border-color: var(--sapList_BorderColor, #A9B4BE);
+  --udex-list-item-group-header-outline-border-color: var(--udexColorBlue10, #002A86);
 }
 
 .udex-list__header {
@@ -26,6 +27,11 @@
   margin: 0;
 }
 
+.udex-list__group ::slotted([udex-list-item]) {
+  padding-inline-start: calc(var(--udexSpacer24) + var(--udexSpacer16));
+  --udex-list-item-padding-inline-start: 0;
+}
+
 .udex-list__header,
 .udex-list__group-header {
   font-weight:  var(--udexTypographyFontWeightMedium, 500);
@@ -37,23 +43,26 @@
 
 .udex-list__group-content {
   display: flex;
-  border-bottom: 1px solid var(--udex-list-item-group-header-border-color);
+  border-top: 1px solid var(--udex-list-item-group-header-border-color);
   padding: var(--udex-list-item-group-header-padding-vertical) var(--udex-list-item-group-header-padding-horizontal);
+  align-items: center;
+  position: relative;
 }
 
-.udex-list__number {
-  margin-inline-end: var(--udexSpacer8, 8px);
-}
-
-.udex-list__circle {
-  display: block;
-  min-width: 20px;
-  height: 22px;
-  position: relative;
+.udex-list__group-content.udex-list_group-content__focusable:focus,
+.udex-list__group-content.udex-list_group-content__focusable:focus-visible {
+  outline: none;
 }
 
-:host([mode="SingleContent"])::part(group-item) {
-  padding: var(--udexSpacer4, 4px) 0;
+.udex-list__group-content.udex-list_group-content__focusable:focus:before,
+.udex-list__group-content.udex-list_group-content__focusable:focus-visible:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  outline: var(--udexRadiusXXS) solid var(--udex-list-item-group-header-outline-border-color);
+  outline-offset: -4px;
+  border-radius: var(--udexRadiusM, 8px);
+  pointer-events: none;
 }
 
 :host([mode="MultiSelect"]) .udex-list__group-header {
@@ -84,8 +93,86 @@
   font-size: var(--udexTypographyBodySFontSize, 16px);
   line-height: var(--udexTypographyBodyLineHeight, 24px);
   font-weight: var(--udexTypographyFontWeightMedium, 500);
-  padding: var(--udexSpacer8, 8px) var(--udexSpacer20, 20px);
+  padding: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
   border-bottom: 1px solid var(--sapList_BorderColor, #A9B4BE);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.udex-list__inactive-header-content {
   display: flex;
   flex-direction: column;
 }
+
+.udex-list__group-heading__icon {
+  transform: rotate(-90deg);
+  height: 18px;
+  width: 18px;
+  color: inherit;
+  cursor: pointer;
+  --udex-button-icon-s-size: 18px;
+}
+
+.udex-list__group-heading__icon-wrapper {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-inline-start: auto;
+}
+
+:host(:dir(rtl)) .udex-list__group-heading__icon {
+  transform: rotate(90deg);
+}
+
+:host([collapsed]) .udex-list__group-heading__icon {
+  transform: rotate(90deg);
+}
+
+:host([collapsed]:dir(rtl)) .udex-list__group-heading__icon {
+  transform: rotate(-90deg);
+}
+
+:host([collapsible]) .udex-list__group-list__content,
+:host([collapsible]) + .udex-list__group-list__content {
+  max-height: var(--udex-list-content-max-height);
+  overflow: hidden;
+  transition: max-height 200ms ease-in;
+}
+
+:host([collapsible]) [udex-list-item][collapsed] + .udex-list__group-list__content,
+:host([collapsible][collapsed]) .udex-list__inactive-header + .udex-list__group-list__content,
+:host([collapsible][collapsed]) .udex-list__group-content + .udex-list__group-list__content,
+:host([collapsible][collapsed]) + .udex-list__group-list__content,
+.udex-list__group-header[collapsible][collapsed] + .udex-list__group-list__content {
+  max-height: 0;
+}
+
+:host([collapsible][mode="MultiSelect"]) header,
+:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap,
+:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap,
+:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap {
+  position: relative;
+}
+
+:host([collapsible][mode="MultiSelect"]) header:focus,
+:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus,
+:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus,
+:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus {
+  outline: none;
+}
+
+:host([collapsible][mode="MultiSelect"]) header:focus:before,
+:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus:before,
+:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus:before,
+:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10, #002A86);
+  outline-offset: -4px;
+  border-radius: var(--udexRadiusM, 8px);
+}
+

package/src/themes/ListItem.css

@@ -1,13 +1,16 @@
 :host {
-  --udex-list-item-padding-vertical: var(--udexSpacer8, 8px);
-  --udex-list-item-padding-horizontal: var(--udexSpacer12, 12px);
+  --udex-list-item-padding-vertical: var(--udexSpacer12, 12px);
+  --udex-list-item-padding-horizontal: var(--udexSpacer16, 16px);
+  --udex-list-item-padding-top: var(--udex-list-item-padding-vertical);
+  --udex-list-item-padding-bottom: var(--udex-list-item-padding-vertical);
+  --udex-list-item-padding-inline-start: var(--udex-list-item-padding-horizontal);
+  --udex-list-item-padding-inline-end: var(--udex-list-item-padding-horizontal);
 
   --udex-list-item-background-active: var(--sapList_Active_Background, #EAECEE);
   --udex-list-item-border-color-active: var(--sapList_BorderColor, #A9B4BE);
   --udex-list-item-color-active: var(--sapList_Active_TextColor, #000);
   --udex-list-item-supporting-text-color-active: var(--sapContent_LabelColor, #475E75);
   --udex-list-item-background-selected-hover: var(--sapButton_Selected_Hover_Background, #D1EFFF);
-  --udex-list-item-border-color-selected-hover: var(--udexColorBlue8, #0057D2);
 
   --udex-list-item-background-default: var(--sapList_Background, #FFF);
   --udex-list-item-color-default: var(--sapList_HeaderTextColor, #223548);
@@ -17,7 +20,7 @@
   --udex-list-item-background-hover: var(--sapList_Hover_Background, #F5F6F7);
   --udex-list-item-color-hover: var(--sapList_HeaderTextColor, #223548);
 
-  --udex-list-item-border-color-selected: var(--sapList_SelectionBorderColor, #0070F2);
+  --udex-list-item-border-color-selected: var(--udexColorBlue8, #0057D2);
   --udex-list-item-background-selected: var(--sapList_SelectionBackgroundColor, #EBF8FF);
   --udex-list-item-color-selected: var(--sapList_HeaderTextColor, #223548);
   --udex-list-item-supporting-text-color-selected: var(--sapContent_LabelColor, #475E75);
@@ -30,10 +33,24 @@
   background: var(--udex-list-item-background-default);
   color: var(--udex-list-item-color-default);
   display: block;
-  border-bottom: 1px solid transparent;
   position: relative;
 }
 
+:host([selected]):before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--udex-list-item-border-color-selected);
+}
+
+:host([selected]:dir(rtl)):before {
+  left: auto;
+  right: 0;
+}
+
 :host([disabled]:not([mode="SingleContent"])) {
   opacity: var(--udex-list-item-disabled-opacity);
   pointer-events: none;
@@ -59,24 +76,22 @@
 
 :host([_aria-selected][selected]:not([mode="SingleContent"])) {
   background: var(--udex-list-item-background-selected-hover);
-  border-color: var(--udex-list-item-border-color-selected-hover);
 }
 
 :host(:not([mode="SingleContent"]):not([disabled])[desktop]) .udex-list__item:focus:before,
 :host(:not([mode="SingleContent"]):not([disabled])) .udex-list__item:focus-visible:before {
   content: '';
   position: absolute;
-  inset: 0;
+  inset: 4px 4px 4px 6px;
   outline: var(--udexRadiusXXS) solid var(--udex-list-item-outline-border-color);
-  outline-offset: -4px;
   border-radius: var(--udexRadiusM, 8px);
   pointer-events: none;
 }
 
-:host(:not([mode="SingleContent"]):not([disabled])[desktop]:focus:active) {
-    background: var(--udex-list-item-background-active);
-    border-color: var(--udex-list-item-border-color-active);
-    color: var(--udex-list-item-color-active);
+:host([active]:not([mode="SingleContent"]):not([disabled])[desktop]:focus) {
+  background: var(--udex-list-item-background-active);
+  border-color: var(--udex-list-item-border-color-active);
+  color: var(--udex-list-item-color-active);
 }
 
 :host(:not([disabled]):hover) .udex-list__supporting-text {
@@ -85,13 +100,11 @@
 
 :host([selected]:not([mode="SingleContent"])) {
   background: var(--udex-list-item-background-selected);
-  border-color: var(--udex-list-item-border-color-selected);
   color: var(--udex-list-item-color-selected);
 }
 
 :host(:hover[selected]:not([disabled]):not([mode="SingleContent"])) {
   background: var(--udex-list-item-background-selected-hover);
-  border-color: var(--udex-list-item-border-color-selected-hover);
 }
 
 :host([selected]) .udex-list__supporting-text {
@@ -125,6 +138,13 @@
 :host::part(checkbox),
 :host::part(radio) {
   padding-inline-end: var(--udexSpacer12, 12px);
+}
+
+:host::part(checkbox) {
+  min-width: 24px;
+}
+
+:host::part(radio) {
   min-width: 42px;
 }
 
@@ -173,7 +193,10 @@
 }
 
 .udex-list__item {
-  padding: var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);
+  padding-top: var(--udex-list-item-padding-top);
+  padding-bottom: var(--udex-list-item-padding-bottom);
+  padding-inline-start: var(--udex-list-item-padding-inline-start);
+  padding-inline-end: var(--udex-list-item-padding-inline-end);
   display: flex;
   align-items: center;
 }
@@ -278,3 +301,32 @@
 .hidden {
   display: none;
 }
+
+.udex-list__group-heading__icon {
+  transform: rotate(-90deg);
+  height: 18px;
+  width: 18px;
+  color: inherit;
+  cursor: pointer;
+  --udex-button-icon-s-size: 18px;
+}
+
+.udex-list__group-heading__icon-wrapper {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:host(:dir(rtl)) .udex-list__group-heading__icon {
+  transform: rotate(90deg);
+}
+
+:host([collapsed]) .udex-list__group-heading__icon {
+  transform: rotate(90deg);
+}
+
+:host([collapsed]:dir(rtl)) .udex-list__group-heading__icon {
+  transform: rotate(-90deg);
+}

package/src/themes/MastheadCountrySelector.css

@@ -48,6 +48,7 @@
 
 .udex-masthead-country-selector__region-back-item::part(menu-item-button) {
   font-weight: var(--udexTypographyFontWeightMedium, 500);
+  color: var(--udexColorNeutralBlack);
   justify-content: space-between;
 }
 
@@ -65,8 +66,9 @@
   --udex-masthead-menu-item-padding-desktop: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);
 }
 
+.udex-masthead-country-selector__item::part(menu-item-link),
 .udex-masthead-country-selector__item_countries {
-  --udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8);
+  --udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udexSpacer8);
 }
 
 .udex-masthead-country-selector__item::part(menu-item-link) {