@sapudex/web-components 0.226.1 → 0.226.2

package/src/themes/Button.css

@@ -91,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));
@@ -362,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,
@@ -378,7 +431,14 @@
 :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-border-color);
@@ -386,19 +446,24 @@
 
 :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*/
@@ -410,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 */
@@ -440,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*/
@@ -469,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 */
@@ -497,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*/
@@ -527,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);
@@ -560,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 */
@@ -588,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*/
@@ -614,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 */
@@ -636,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*/
@@ -662,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 */
@@ -688,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/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/Search.css

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