@sapudex/web-components 0.226.0 → 0.226.2

package/src/themes/Button.css

@@ -21,9 +21,11 @@
 
   /* Default */
   --udex-button-color-primary-standard-default-background: var(--sapButton_Emphasized_Background, var(--udexColorBlue8));
+  --udex-button-color-primary-standard-default-border-color: var(--sapButton_Emphasized_BorderColor, var(--udexColorBlue8));
   --udex-button-color-primary-standard-default-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexCoreTextLight));
   /* Hover */
   --udex-button-color-primary-standard-hover-background: var(--sapButton_Emphasized_Hover_Background, var(--udexColorBlue9));
+  --udex-button-color-primary-standard-hover-border-color: var(--sapButton_Emphasized_Hover_BorderColor, var(--udexColorBlue9));
   --udex-button-color-primary-standard-hover-text-and-icon: var(--sapButton_Emphasized_Hover_TextColor, var(--udexCoreTextLight));
   /* Active */
   --udex-button-color-primary-standard-active-background: var(--sapButton_Emphasized_Active_Background, var(--udexColorNeutralWhite));
@@ -89,8 +91,8 @@
   --udex-button-color-tertiary-standard-hover-border: var(--sapButton_Lite_Hover_BorderColor, var(--udexColorGrey7));
   --udex-button-color-tertiary-standard-hover-text-and-icon: var(--sapButton_Lite_Hover_TextColor, var(--udexColorBlue9));
   /* Active */
-  --udex-button-color-tertiary-standard-active-background: var(--sapButton_Lite_Active_Background, var(--udexColorBlue9));
-  --udex-button-color-tertiary-standard-active-border: var(--sapButton_Lite_Active_BorderColor, var(--udexColorNeutralWhite));
+  --udex-button-color-tertiary-standard-active-background: var(--sapButton_Lite_Active_Background, var(--udexColorNeutralWhite));
+  --udex-button-color-tertiary-standard-active-border: var(--sapButton_Lite_Active_BorderColor, var(--udexColorBlue9));
   --udex-button-color-tertiary-standard-active-text-and-icon: var(--sapButton_Lite_TextColor, var(--udexColorBlue9));
   /* Disabled */
   --udex-button-color-tertiary-standard-disabled-background: var(--udex-button-color-transparent, hsla(0, 0%, 0%, 0));
@@ -231,7 +233,7 @@
 }
 
 :host([size="Small"]) {
-  font-size: var(--udexTypographyNavigationMediumMFontSize);
+  font-size: var(--udexTypographyNavigationMediumMFontSize, 14px);
   height: var(--udex-button-small-size);
 }
 :host([size="Small"])::part(button) {
@@ -256,7 +258,7 @@
 
 :host,
 :host([size="Medium"]) {
-  font-size: 1rem;
+  font-size: var(--udexTypographyNavigationMediumXLFontSize, 1rem);
   height: var(--udex-button-medium-size);
 }
 
@@ -266,7 +268,7 @@
 }
 
 :host([size="Large"]) {
-  font-size: 1rem;
+  font-size: var(--udexTypographyNavigationMediumXLFontSize, 1rem);
   height: var(--udex-button-large-size);
 }
 :host([size="Large"])::part(button) {
@@ -342,10 +344,12 @@
   margin-inline-start: var(--udex-button-icon-text-spacing-small-size);
 }
 
+:host([has-icon]:not([icon-only])[icon-end]) .ui5-button-text,
 :host([has-icon]:not([icon-only])[size="Medium"][icon-end]) .ui5-button-text {
   margin-inline-end: var(--udex-button-icon-text-spacing-medium-size);
 }
 
+:host([has-icon]:not([icon-only]):not([icon-end])) .ui5-button-text,
 :host([has-icon]:not([icon-only])[size="Medium"]:not([icon-end])) .ui5-button-text {
   margin-inline-start: var(--udex-button-icon-text-spacing-medium-size);
 }
@@ -358,6 +362,59 @@
   margin-inline-start: var(--udex-button-icon-text-spacing-large-size);
 }
 
+:host:disabled,
+:host([design="Default"]):disabled,
+:host([design="Secondary"]):disabled,
+:host([design="Invisible"]):disabled,
+:host([design="Emphasized"][_aria-disabled]):disabled,
+:host([design="Primary"][_aria-disabled]):disabled,
+:host([design="Transparent"]):disabled,
+:host([design="Tertiary"]):disabled,
+:host([design="Negative"]):disabled,
+:host([design="Attention"]):disabled,
+:host([design="Warning"]):disabled,
+:host([design="Positive"]):disabled,
+: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 {
+  opacity: var(--sapContent_DisabledOpacity, 0.4);
+}
 
 /* Standard/Primary css-rules */
 :host,
@@ -365,7 +422,7 @@
 :host([design="Primary"]) {
   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-background);
+  border: 1px solid var(--udex-button-color-primary-standard-default-border-color);
 }
 
 :host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover),
@@ -374,27 +431,39 @@
 :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([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) {
   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-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([design="Primary"][active]:not([disabled])),
+:host([active][_aria-disabled="false"]) ,
+:host([design="Emphasized"][active][_aria-disabled="false"]) ,
+:host([design="Primary"][active][_aria-disabled="false"]) {
   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"]):disabled ,
-:host([design="Primary"]):disabled {
+: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]) {
   color: var(--udex-button-color-primary-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-disabled-background);
   border: 1px solid var(--udex-button-color-primary-standard-disabled-background);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Primary toggled*/
@@ -406,21 +475,26 @@
   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]: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)  {
   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);
 }
 
-:host([toggled]):disabled ,
-:host([design="Emphasized"][toggled]):disabled ,
-:host([design="Primary"][toggled]):disabled {
+: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]) {
   color: var(--udex-button-color-primary-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-primary-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-primary-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Secondary css-rules */
@@ -436,25 +510,34 @@
 :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="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) {
   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]:not([disabled])),
+:host([design="Secondary"][active]:not([disabled])),
+:host([design="Default"][active][_aria-disabled="false"]) ,
+:host([design="Secondary"][active][_aria-disabled="false"]) {
   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"]):disabled,
+:host([design="Secondary"]):disabled,
+:host([design="Default"][_aria-disabled]),
+:host([design="Secondary"][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Secondary toggled*/
@@ -465,19 +548,22 @@
   border: 1px solid var(--udex-button-color-secondary-toggled-default-border);
 }
 
-:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
-:host([design="Secondary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
+:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Secondary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+: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) {
   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]):disabled,
+:host([design="Secondary"][toggled]):disabled,
+:host([design="Default"][toggled][_aria-disabled]),
+:host([design="Secondary"][toggled][_aria-disabled]) {
   color: var(--udex-button-color-secondary-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-secondary-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-secondary-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Tertiary css-rules */
@@ -493,25 +579,34 @@
 :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="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) {
   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="Tertiary"][active]:not([disabled])),
+:host([design="Transparent"][active][_aria-disabled="false"]),
+:host([design="Tertiary"][active][_aria-disabled="false"]) {
   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="Tertiary"]):disabled,
+:host([design="Transparent"][_aria-disabled]),
+:host([design="Tertiary"][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Tertiary toggled*/
@@ -523,14 +618,18 @@
 }
 
 :host([design="Transparent"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
+:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+: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) {
   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="Tertiary"][toggled]):disabled,
+:host([design="Transparent"][toggled][_aria-disabled])
+:host([design="Tertiary"][_aria-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);
@@ -556,23 +655,27 @@
 
 :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"]: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) {
   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]:not([disabled])),
+:host([design="Invisible"][active][_aria-disabled="false"]) {
   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"]):disabled,
+:host([design="Invisible"][_aria-disabled]) {
   color: var(--udex-button-color-invisible-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-invisible-standard-disabled-background);
   border: none;
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Positive css-rules */
@@ -584,23 +687,27 @@
 
 :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"]: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) {
   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]:not([disabled])),
+:host([design=Positive][active][_aria-disabled="false"]) {
   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]):disabled,
+:host([design=Positive][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Positive toggled*/
@@ -610,17 +717,18 @@
   border: 1px solid var(--udex-button-color-positive-toggled-default-border);
 }
 
-:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
+:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design=Positive][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):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]):disabled,
+:host([design=Positive][toggled][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Negative css-rules */
@@ -632,23 +740,27 @@
 
 :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"]: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) {
   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);
 }
 
-:host([design=Negative][active]:not([disabled])) {
+:host([design=Negative][active]:not([disabled])),
+:host([design=Negative][active][_aria-disabled="false"]) {
   color: var(--udex-button-color-negative-standard-active-text-and-icon);
   background-color: var(--udex-button-color-negative-standard-active-background);
   border: 1px solid var(--udex-button-color-negative-standard-active-border);
 }
 
-:host([design=Negative]):disabled {
+:host([design=Negative]):disabled,
+:host([design=Negative][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Negative toggled*/
@@ -658,17 +770,18 @@
   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]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design=Negative][toggled][_aria-disabled="false"]:not([non-interactive]):not([_is-touch]):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]):disabled,
+:host([design=Negative][toggled][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Warning css-rules */
@@ -684,46 +797,64 @@
 :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="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) {
   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]:not([disabled])),
+:host([design="Warning"][active]:not([disabled])),
+:host([design="Attention"][active][_aria-disabled="false"]),
+:host([design="Warning"][active][_aria-disabled="false"])  {
   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"]):disabled,
+:host([design="Warning"]):disabled,
+:host([design="Attention"][_aria-disabled]),
+:host([design="Warning"][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*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);
   border: 1px solid var(--udex-button-color-warning-toggled-default-border);
 }
 
-:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
-:host([design="Warning"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
+:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Warning"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+: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) {
   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="Warning"][toggled]):disabled,
+:host([design="Attention"][toggled][_aria-disabled]),
+:host([design="Warning"][toggled][_aria-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);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
+
+.udex-button-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/themes/Checkbox.css

@@ -18,6 +18,8 @@
 }
 
 .ui5-checkbox-root .ui5-checkbox-label {
+  font-family: var(--sapFontFamily);
+  font-size: var(--udexTypographyBodySFontSize, var(--sapFontSize, 16px));
   margin-inline-start: 2px;
 }
 

package/src/themes/ListItem.css

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

package/src/themes/MastheadShell.css

@@ -211,7 +211,7 @@
 :host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,
 :host([_is-mobile-menu-open]) .udex-masthead-shell__cart,
 :host([_is-mobile-menu-open]) .udex-masthead-shell__profile,
-:host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn {
+:host([_is-mobile-mode][_is-mobile-menu-open]) .udex-masthead-shell__close-btn {
   display: flex;
 }
 
@@ -283,6 +283,7 @@
     display: none;
   }
 
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn,
   .udex-masthead-shell__menu-btn {
     display: flex;
   }

package/src/themes/Modal.css

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

package/src/themes/Pagination.css

@@ -16,6 +16,7 @@
   --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 {
@@ -124,3 +125,7 @@
 .udex-pagination__item--short-value {
   padding: var(--udex-pagination-short-item-paddings);
 }
+
+.hidden {
+  display: none;
+}

package/src/themes/RadioButton.css

@@ -28,3 +28,8 @@
 :host([value-state="Error"]) {
   --sapField_InvalidColor: var(--udexCoreSemanticError5, #FF5C77);
 }
+
+[ui5-label].ui5-radio-label {
+  font-family: var(--sapFontFamily);
+  font-size: var(--udexTypographyBodySFontSize, var(--sapFontSize, 16px));
+}