@sapudex/web-components 0.226.2 → 0.227.0

package/src/generated/themes/Pagination.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/Pagination.css.ts",content:`:host{--udex-pagination-font-size: var(--sapFontSize, 16px);--udex-pagination-font-family: var(--sapFontFamily, sans-serif);--udex-pagination-item-paddings: var(--sapFontSmallSize, .75rem);--udex-pagination-item-inner-paddings: 0rem .25rem;--udex-pagination-mobile-item-paddings: .5625rem .875rem .6875rem .875rem;--udex-pagination-item-line-height: var(--sapContent_LineHeight, 1.5rem);--udex-pagination-item-text-color: var(--sapPrimary5, #5b738b);--udex-pagination-item-active-text-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9, #223548));--udex-pagination-item-active-background-color: var(--udexColorGrey1);--udex-pagination-item-active-border-color: var(--udexColorBlue8);--udex-pagination-item-active-border-width: var(--sapField_InformationBorderWidth, .125rem);--udex-pagination-item-gap: .25rem;--udex-pagination-mobile-item-gap: .5rem;--udex-pagination-short-item-gap: 24px;--udex-pagination-short-separator-paddings: 0 4px;--udex-pagination-short-separator-margin: 0 4px;--udex-pagination-short-item-paddings: 0 4px;--udex-pagination-button-opacity: 1}.udex-pagination{font-family:var(--udex-pagination-font-family);font-size:var(--udex-pagination-font-size)}.udex-pagination__list{padding:0;margin:0;display:flex;gap:var(--udex-pagination-item-gap);align-items:center;flex-wrap:wrap}.udex-pagination--short .udex-pagination__list{gap:var(--udex-pagination-short-item-gap)}.udex-pagination__item{cursor:pointer;display:inline-block;position:relative}.udex-pagination__item a{text-decoration:none;display:flex}:host([desktop]) .udex-pagination__item a:focus,.udex-pagination__item a:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue10, #002A86);outline-offset:var(--udexSpacer2, 2px);border-radius:var(--udexRadiusXXS, 2px)}.udex-pagination__page{display:block;padding:0 var(--udex-pagination-item-paddings) var(--udex-pagination-item-active-border-width) var(--udex-pagination-item-paddings);color:var(--udex-pagination-item-text-color)}.udex-pagination--mobile .udex-pagination__page{padding:var(--udex-pagination-mobile-item-paddings)}.udex-pagination__item--first a,.udex-pagination__item--last a,.udex-pagination__item--prev a,.udex-pagination__item--next a{padding:var(--udex-pagination-item-paddings)}.udex-pagination__page--value{display:block;position:relative;padding:var(--udex-pagination-item-inner-paddings);line-height:var(--udex-pagination-item-line-height)}.udex-pagination__page:not([active]):hover{background-color:var(--udex-pagination-item-active-background-color);color:var(--udex-pagination-item-active-text-color);border-radius:4px}.udex-pagination__page:hover,.udex-pagination__page:visited{color:var(--udex-pagination-item-text-color)}.udex-pagination__page[active]{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__page[active] .udex-pagination__page--value:after{content:"";position:absolute;bottom:calc(-1 * var(--udex-pagination-item-active-border-width));left:0;right:0;height:var(--udex-pagination-item-active-border-width);background-color:var(--udex-pagination-item-active-border-color)}.udex-pagination__item--short{gap:var(--udex-pagination-short-item-gap);direction:inherit}.udex-pagination--rtl .udex-pagination__item--short{display:flex;white-space-collapse:preserve}.udex-pagination__item--short{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__item--short-separator{padding:var(--udex-pagination-short-separator-paddings);margin:var(--udex-pagination-short-separator-margin)}.udex-pagination__item--short-value{padding:var(--udex-pagination-short-item-paddings)}.hidden{display:none}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Pagination.css.ts",content:`:host{--udex-pagination-font-size: var(--sapFontSize, 16px);--udex-pagination-font-family: var(--sapFontFamily, sans-serif);--udex-pagination-item-paddings: var(--sapFontSmallSize, .75rem);--udex-pagination-item-inner-paddings: 0rem .25rem;--udex-pagination-mobile-item-paddings: .5625rem .875rem .6875rem .875rem;--udex-pagination-item-line-height: var(--sapContent_LineHeight, 1.5rem);--udex-pagination-item-text-color: var(--sapPrimary5, #5b738b);--udex-pagination-item-active-text-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9, #223548));--udex-pagination-item-active-background-color: var(--udexColorGrey1);--udex-pagination-item-active-border-color: var(--udexColorBlue8);--udex-pagination-item-active-border-width: var(--sapField_InformationBorderWidth, .125rem);--udex-pagination-item-gap: .25rem;--udex-pagination-mobile-item-gap: .5rem;--udex-pagination-short-item-gap: 24px;--udex-pagination-short-separator-paddings: 0 4px;--udex-pagination-short-separator-margin: 0 4px;--udex-pagination-short-item-paddings: 0 4px}.udex-pagination{font-family:var(--udex-pagination-font-family);font-size:var(--udex-pagination-font-size)}.udex-pagination__list{padding:0;margin:0;display:flex;gap:var(--udex-pagination-item-gap);align-items:center;flex-wrap:wrap}.udex-pagination--short .udex-pagination__list{gap:var(--udex-pagination-short-item-gap)}.udex-pagination__item{cursor:pointer;display:inline-block;position:relative}.udex-pagination__item a{text-decoration:none;display:flex}:host([desktop]) .udex-pagination__item a:focus,.udex-pagination__item a:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue10, #002A86);outline-offset:var(--udexSpacer2, 2px);border-radius:var(--udexRadiusXXS, 2px)}.udex-pagination__page{display:block;padding:0 var(--udex-pagination-item-paddings) var(--udex-pagination-item-active-border-width) var(--udex-pagination-item-paddings);color:var(--udex-pagination-item-text-color)}.udex-pagination--mobile .udex-pagination__page{padding:var(--udex-pagination-mobile-item-paddings)}.udex-pagination__item--first a,.udex-pagination__item--last a,.udex-pagination__item--prev a,.udex-pagination__item--next a{padding:var(--udex-pagination-item-paddings)}.udex-pagination__page--value{display:block;position:relative;padding:var(--udex-pagination-item-inner-paddings);line-height:var(--udex-pagination-item-line-height)}.udex-pagination__page:not([active]):hover{background-color:var(--udex-pagination-item-active-background-color);color:var(--udex-pagination-item-active-text-color);border-radius:4px}.udex-pagination__page:hover,.udex-pagination__page:visited{color:var(--udex-pagination-item-text-color)}.udex-pagination__page[active]{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__page[active] .udex-pagination__page--value:after{content:"";position:absolute;bottom:calc(-1 * var(--udex-pagination-item-active-border-width));left:0;right:0;height:var(--udex-pagination-item-active-border-width);background-color:var(--udex-pagination-item-active-border-color)}.udex-pagination__item--short{gap:var(--udex-pagination-short-item-gap);direction:inherit}.udex-pagination--rtl .udex-pagination__item--short{display:flex;white-space-collapse:preserve}.udex-pagination__item--short{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__item--short-separator{padding:var(--udex-pagination-short-separator-paddings);margin:var(--udex-pagination-short-separator-margin)}.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}
 `};
 export default styleData;
 	

package/src/generated/themes/RatingIndicator.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/RatingIndicator.css.ts",content:`:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v0-226-2_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-sel{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/RatingIndicator.css.ts",content:`:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v0-227-0_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-sel{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
 `};
 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-2_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Slider.css.ts",content:`:host{--udex-slider-color-track-start-point: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-track-active: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-handle-focus-range: var( --sapSlider_Selected_BorderColor, #0070f2 );--udex-slider-color-handle-active-background: var( --sapSlider_Active_HandleBackground, #ffffff );--udex-slider-color-handle-default-icon: var( --sapContent_Selected_ForegroundColor, #0040b0 );--udex-slider-radius-range-size: var(---udexRadiusM, .5rem)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v0-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/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 */
@@ -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);
 }
@@ -373,46 +383,7 @@
 :host([design="Negative"]):disabled,
 :host([design="Attention"]):disabled,
 :host([design="Warning"]):disabled,
-:host([design="Positive"]):disabled,
-:host([_aria-disabled]),
-:host([design="Default"][_aria-disabled]),
-:host([design="Secondary"][_aria-disabled]),
-:host([design="Invisible"][_aria-disabled]),
-:host([design="Emphasized"][_aria-disabled]),
-:host([design="Primary"][_aria-disabled]),
-:host([design="Transparent"][_aria-disabled]),
-:host([design="Tertiary"][_aria-disabled]),
-:host([design="Negative"][_aria-disabled]),
-:host([design="Warning"][_aria-disabled]),
-:host([design="Attention"][_aria-disabled]),
-:host([design="Positive"][_aria-disabled]) {
-  opacity: 1;
-}
-
-:host:disabled .udex-button-content,
-:host([design="Default"]):disabled .udex-button-content,
-:host([design="Secondary"]):disabled .udex-button-content,
-:host([design="Invisible"]):disabled .udex-button-content,
-:host([design="Emphasized"][_aria-disabled]):disabled .udex-button-content,
-:host([design="Primary"][_aria-disabled]):disabled .udex-button-content,
-:host([design="Transparent"]):disabled .udex-button-content,
-:host([design="Tertiary"]):disabled .udex-button-content,
-:host([design="Negative"]):disabled .udex-button-content,
-:host([design="Attention"]):disabled .udex-button-content,
-:host([design="Warning"]):disabled .udex-button-content,
-:host([design="Positive"]):disabled .udex-button-content,
-:host([_aria-disabled]) .udex-button-content,
-:host([design="Default"][_aria-disabled]) .udex-button-content,
-:host([design="Secondary"][_aria-disabled]) .udex-button-content,
-:host([design="Invisible"][_aria-disabled]) .udex-button-content,
-:host([design="Emphasized"][_aria-disabled]) .udex-button-content,
-:host([design="Primary"][_aria-disabled]) .udex-button-content,
-:host([design="Transparent"][_aria-disabled]) .udex-button-content, 
-:host([design="Tertiary"][_aria-disabled]) .udex-button-content,
-:host([design="Negative"][_aria-disabled]) .udex-button-content,
-:host([design="Warning"][_aria-disabled]) .udex-button-content,
-:host([design="Attention"][_aria-disabled]) .udex-button-content,
-:host([design="Positive"][_aria-disabled]) .udex-button-content {
+:host([design="Positive"]):disabled {
   opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
@@ -420,6 +391,7 @@
 :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);
@@ -431,36 +403,23 @@
 :host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
 :host([design="Primary"]:not([disabled]):hover),
 :host([design="Primary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover),
-:host([design="Primary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
-:host([_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Emphasized"][_aria-disabled="false"]:hover),
-:host([design="Emphasized"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Emphasized"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered),
-:host([design="Primary"][_aria-disabled="false"]:hover),
-:host([design="Primary"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Primary"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered) {
+:host([design="Primary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered) {
   color: var(--udex-button-color-primary-standard-hover-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-hover-background);
   border: 1px solid var(--udex-button-color-primary-standard-hover-border-color);
 }
 
-:host([active]:not([disabled])) ,
-:host([design="Emphasized"][active]:not([disabled])) ,
-:host([design="Primary"][active]:not([disabled])),
-:host([active][_aria-disabled="false"]) ,
-:host([design="Emphasized"][active][_aria-disabled="false"]) ,
-:host([design="Primary"][active][_aria-disabled="false"]) {
+: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);
   border: 1px solid var(--udex-button-color-primary-standard-active-border);
 }
 
-:host:disabled,
-:host([design="Emphasized"][_aria-disabled]):disabled,
-:host([design="Primary"][_aria-disabled]):disabled,
-:host([_aria-disabled]),
-:host([design="Emphasized"][_aria-disabled]),
-:host([design="Primary"][_aria-disabled]) {
+:host:disabled ,
+:host([design="Emphasized"]):disabled ,
+:host([design="Primary"]):disabled {
   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);
@@ -475,12 +434,9 @@
   border: 1px solid var(--udex-button-color-primary-toggled-default-border);
 }
 
-:host([toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([design="Emphasized"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([design="Primary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):hover) ,
-:host([design="Emphasized"][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):hover) ,
-:host([design="Primary"][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):hover)  {
+:host([toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
+:host([design="Emphasized"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
+:host([design="Primary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-primary-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-primary-toggled-hover-background);
   border: 1px solid var(--udex-button-color-primary-toggled-hover-border);
@@ -488,10 +444,7 @@
 
 :host([toggled]):disabled,
 :host([design="Emphasized"][toggled]):disabled,
-:host([design="Primary"][toggled]):disabled,
-:host([toggled][_aria-disabled]) ,
-:host([design="Emphasized"][toggled][_aria-disabled]),
-:host([design="Primary"][toggled][_aria-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);
@@ -510,38 +463,28 @@
 :host([design="Default"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
 :host([design="Secondary"]:not([disabled]):hover),
 :host([design="Secondary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover),
-:host([design="Secondary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
-:host([design="Default"][_aria-disabled="false"]:hover),
-:host([design="Default"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Default"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered),
-:host([design="Secondary"][_aria-disabled="false"]:hover),
-:host([design="Secondary"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host([design="Secondary"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+:host([design="Secondary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered) {
   color: var(--udex-button-color-secondary-standard-hover-text-and-icon);
   background-color: var(--udex-button-color-secondary-standard-hover-background);
   border: 1px solid var(--udex-button-color-secondary-standard-hover-border);
 }
 
 :host([design="Default"][active]:not([disabled])),
-:host([design="Secondary"][active]:not([disabled])),
-:host([design="Default"][active][_aria-disabled="false"]) ,
-:host([design="Secondary"][active][_aria-disabled="false"]) {
+: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);
   border: 1px solid var(--udex-button-color-secondary-standard-active-border);
 }
 
-:host([design="Default"]):disabled,
-:host([design="Secondary"]):disabled,
-:host([design="Default"][_aria-disabled]),
-:host([design="Secondary"][_aria-disabled]) {
+:host([design="Default"]):disabled ,
+:host([design="Secondary"]):disabled {
   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);
 }
 
 /*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);
@@ -549,18 +492,14 @@
 }
 
 :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),
-:host([design="Default"][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):hover),
-:host([design="Secondary"][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):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="Secondary"][toggled]):disabled,
-:host([design="Default"][toggled][_aria-disabled]),
-:host([design="Secondary"][toggled][_aria-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);
@@ -579,31 +518,21 @@
 :host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
 :host([design="Tertiary"]:not([disabled]):hover),
 :host([design="Tertiary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover),
-:host([design="Tertiary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
-:host([design="Transparent"][_aria-disabled="false"]:hover),
-:host([design="Transparent"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Transparent"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered),
-:host([design="Tertiary"][_aria-disabled="false"]:hover),
-:host([design="Tertiary"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Tertiary"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered) {
+:host([design="Tertiary"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered) {
   color: var(--udex-button-color-tertiary-standard-hover-text-and-icon);
   background-color: var(--udex-button-color-tertiary-standard-hover-background);
   border: 1px solid var(--udex-button-color-tertiary-standard-hover-border);
 }
 
 :host([design="Transparent"][active]:not([disabled])),
-:host([design="Tertiary"][active]:not([disabled])),
-:host([design="Transparent"][active][_aria-disabled="false"]),
-:host([design="Tertiary"][active][_aria-disabled="false"]) {
+:host([design="Tertiary"][active]:not([disabled])) {
   color: var(--udex-button-color-tertiary-standard-active-text-and-icon);
   background-color: var(--udex-button-color-tertiary-standard-active-background);
   border: 1px solid var(--udex-button-color-tertiary-standard-active-border);
 }
 
 :host([design="Transparent"]):disabled,
-:host([design="Tertiary"]):disabled,
-:host([design="Transparent"][_aria-disabled]),
-:host([design="Tertiary"][_aria-disabled]) {
+:host([design="Tertiary"]):disabled {
   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);
@@ -618,18 +547,14 @@
 }
 
 :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="Transparent"][toggled]:not([non-interactive]):not([_is-touch])[_aria-disabled="false"]:hover),
-:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch])[_aria-disabled="false"]: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);
 }
 
 :host([design="Transparent"][toggled]):disabled,
-:host([design="Tertiary"][toggled]):disabled,
-:host([design="Transparent"][toggled][_aria-disabled])
-:host([design="Tertiary"][_aria-disabled]) {
+:host([design="Tertiary"][toggled]):disabled {
   color: var(--udex-button-color-tertiary-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-tertiary-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-tertiary-toggled-disabled-border);
@@ -655,24 +580,19 @@
 
 :host([design="Invisible"]:not([disabled]):hover),
 :host([design="Invisible"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([design="Invisible"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered),
-:host([design="Invisible"][_aria-disabled="false"]:hover),
-:host([design="Invisible"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host([design="Invisible"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+:host([design="Invisible"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
   color: var(--udex-button-color-invisible-standard-hover-text-and-icon);
   background-color: var(--udex-button-color-invisible-standard-hover-background);
   border: none;
 }
 
-:host([design="Invisible"][active]:not([disabled])),
-:host([design="Invisible"][active][_aria-disabled="false"]) {
+:host([design="Invisible"][active]:not([disabled])) {
   color: var(--udex-button-color-invisible-standard-active-text-and-icon);
   background-color: var(--udex-button-color-invisible-standard-active-background);
   border: none;
 }
 
-:host([design="Invisible"]):disabled,
-:host([design="Invisible"][_aria-disabled]) {
+:host([design="Invisible"]):disabled {
   color: var(--udex-button-color-invisible-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-invisible-standard-disabled-background);
   border: none;
@@ -687,24 +607,19 @@
 
 :host([design="Positive"]:not([disabled]):hover),
 :host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover),
-:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
-:host([design="Positive"][_aria-disabled="false"]:hover),
-:host([design="Positive"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Positive"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered) {
+:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered) {
   color: var(--udex-button-color-positive-standard-hover-text-and-icon);
   background-color: var(--udex-button-color-positive-standard-hover-background);
   border: 1px solid var(--udex-button-color-positive-standard-hover-border);
 }
 
-:host([design=Positive][active]:not([disabled])),
-:host([design=Positive][active][_aria-disabled="false"]) {
+:host([design=Positive][active]:not([disabled])) {
   color: var(--udex-button-color-positive-standard-active-text-and-icon);
   background-color: var(--udex-button-color-positive-standard-active-background);
   border: 1px solid var(--udex-button-color-positive-standard-active-border);
 }
 
-:host([design=Positive]):disabled,
-:host([design=Positive][_aria-disabled]) {
+:host([design=Positive]):disabled {
   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);
@@ -717,15 +632,13 @@
   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][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):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);
 }
 
-:host([design=Positive][toggled]):disabled,
-:host([design=Positive][toggled][_aria-disabled]) {
+:host([design=Positive][toggled]):disabled {
   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);
@@ -740,10 +653,7 @@
 
 :host([design="Negative"]:not([disabled]):hover),
 :host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover),
-:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
-:host([design="Negative"][_aria-disabled="false"]:hover),
-:host([design="Negative"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Negative"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered) {
+:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered) {
   color: var(--udex-button-color-negative-standard-hover-text-and-icon);
   background-color: var(--udex-button-color-negative-standard-hover-background);
   border: 1px solid var(--udex-button-color-negative-standard-hover-border);
@@ -756,8 +666,7 @@
   border: 1px solid var(--udex-button-color-negative-standard-active-border);
 }
 
-:host([design=Negative]):disabled,
-:host([design=Negative][_aria-disabled]) {
+:host([design=Negative]):disabled {
   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);
@@ -770,15 +679,13 @@
   border: 1px solid var(--udex-button-color-negative-toggled-default-border);
 }
 
-:host([design=Negative][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([design=Negative][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):hover) {
+:host([design=Negative][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-negative-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-negative-toggled-hover-background);
   border: 1px solid var(--udex-button-color-negative-toggled-hover-border);
 }
 
-:host([design=Negative][toggled]):disabled,
-:host([design=Negative][toggled][_aria-disabled]){
+:host([design=Negative][toggled]):disabled {
   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);
@@ -797,38 +704,28 @@
 :host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
 :host([design="Warning"]:not([disabled]):hover),
 :host([design="Warning"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover),
-:host([design="Warning"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered),
-:host([design="Attention"][_aria-disabled="false"]:hover),
-:host([design="Attention"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Attention"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered),
-:host([design="Warning"][_aria-disabled="false"]:hover),
-:host([design="Warning"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
-:host([design="Warning"][_aria-disabled="false"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]).ui5_hovered) {
+:host([design="Warning"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]).ui5_hovered) {
   color: var(--udex-button-color-warning-standard-hover-text-and-icon);
   background-color: var(--udex-button-color-warning-standard-hover-background);
   border: 1px solid var(--udex-button-color-warning-standard-hover-border);
 }
 
 :host([design="Attention"][active]:not([disabled])),
-:host([design="Warning"][active]:not([disabled])),
-:host([design="Attention"][active][_aria-disabled="false"]),
-:host([design="Warning"][active][_aria-disabled="false"])  {
+: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);
   border: 1px solid var(--udex-button-color-warning-standard-active-border);
 }
 
-:host([design="Attention"]):disabled,
-:host([design="Warning"]):disabled,
-:host([design="Attention"][_aria-disabled]),
-:host([design="Warning"][_aria-disabled]) {
+:host([design="Attention"]):disabled ,
+:host([design="Warning"]):disabled {
   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);
 }
 
 /*Warning toggled*/
-:host([design="Attention"][toggled]),
+:host([design="Attention"][toggled]) ,
 :host([design="Warning"][toggled]) {
   color: var(--udex-button-color-warning-toggled-default-text-and-icon);
   background-color: var(--udex-button-color-warning-toggled-default-background);
@@ -836,25 +733,56 @@
 }
 
 :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),
-:host([design="Attention"][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):hover),
-:host([design="Warning"][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):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);
   border: 1px solid var(--udex-button-color-warning-toggled-hover-border);
 }
 
 :host([design="Attention"][toggled]):disabled,
-:host([design="Warning"][toggled]):disabled,
-:host([design="Attention"][toggled][_aria-disabled]),
-:host([design="Warning"][toggled][_aria-disabled]) {
+:host([design="Warning"][toggled]):disabled {
   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);
 }
 
-.udex-button-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+: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/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);