@sapudex/web-components 2.2.0 → 2.3.0

package/src/themes/Button.css

@@ -261,8 +261,6 @@
   inset: var(--udex-button-invisible-focus-inset);
 }
 
-
-
 :host,
 :host([size="Medium"]) {
   font-size: var(--udexTypographyNavigationMediumXLFontSize, 1rem);
@@ -297,7 +295,7 @@
   min-height: var(--udex-button-medium-size);
 }
 
-:host([icon-end]) .ui5-button-icon {
+:host([end-icon]) .ui5-button-icon {
   margin-inline-start: 0;
 }
 
@@ -372,6 +370,20 @@
   margin-inline-start: var(--udex-button-icon-text-spacing-large-size);
 }
 
+:host:disabled,
+:host([design="Default"]):disabled,
+:host([design="Secondary"]):disabled,
+:host([design="Invisible"]):disabled,
+:host([design="Emphasized"][_aria-disabled]):disabled,
+:host([design="Primary"][_aria-disabled]):disabled,
+:host([design="Transparent"]):disabled,
+:host([design="Tertiary"]):disabled,
+:host([design="Negative"]):disabled,
+:host([design="Attention"]):disabled,
+:host([design="Warning"]):disabled,
+:host([design="Positive"]):disabled {
+  opacity: var(--sapContent_DisabledOpacity, 0.4);
+}
 
 /* Standard/Primary css-rules */
 :host,
@@ -395,8 +407,8 @@
   border: 1px solid var(--udex-button-color-primary-standard-hover-border-color);
 }
 
-:host([active]:not([disabled])) ,
-:host([design="Emphasized"][active]:not([disabled])) ,
+:host([active]:not([disabled])),
+:host([design="Emphasized"][active]:not([disabled])),
 :host([design="Primary"][active]:not([disabled])) {
   color: var(--udex-button-color-primary-standard-active-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-active-background);
@@ -409,7 +421,6 @@
   color: var(--udex-button-color-primary-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-disabled-background);
   border: 1px solid var(--udex-button-color-primary-standard-disabled-background);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Primary toggled*/
@@ -429,13 +440,12 @@
   border: 1px solid var(--udex-button-color-primary-toggled-hover-border);
 }
 
-:host([toggled]):disabled ,
-:host([design="Emphasized"][toggled]):disabled ,
+:host([toggled]):disabled,
+:host([design="Emphasized"][toggled]):disabled,
 :host([design="Primary"][toggled]):disabled {
   color: var(--udex-button-color-primary-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-primary-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-primary-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Secondary css-rules */
@@ -457,7 +467,7 @@
   border: 1px solid var(--udex-button-color-secondary-standard-hover-border);
 }
 
-:host([design="Default"][active]:not([disabled])) ,
+:host([design="Default"][active]:not([disabled])),
 :host([design="Secondary"][active]:not([disabled])) {
   color: var(--udex-button-color-secondary-standard-active-text-and-icon);
   background-color: var(--udex-button-color-secondary-standard-active-background);
@@ -469,30 +479,28 @@
   color: var(--udex-button-color-secondary-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-secondary-standard-disabled-background);
   border: 1px solid var(--udex-button-color-secondary-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Secondary toggled*/
-:host([design="Default"][toggled]) ,
+:host([design="Default"][toggled]),
 :host([design="Secondary"][toggled]) {
   color: var(--udex-button-color-secondary-toggled-default-text-and-icon);
   background-color: var(--udex-button-color-secondary-toggled-default-background);
   border: 1px solid var(--udex-button-color-secondary-toggled-default-border);
 }
 
-:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
+:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
 :host([design="Secondary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-secondary-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-secondary-toggled-hover-background);
   border: 1px solid var(--sapButton_Selected_Hover_BorderColor);
 }
 
-:host([design="Default"][toggled]):disabled ,
+:host([design="Default"][toggled]):disabled,
 :host([design="Secondary"][toggled]):disabled {
   color: var(--udex-button-color-secondary-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-secondary-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-secondary-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Tertiary css-rules */
@@ -526,7 +534,6 @@
   color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-tertiary-standard-disabled-background);
   border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Tertiary toggled*/
@@ -538,7 +545,7 @@
 }
 
 :host([design="Transparent"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
-:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
+:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-tertiary-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-tertiary-toggled-hover-background);
   border: 1px solid var(--udex-button-color-tertiary-toggled-hover-border);
@@ -587,7 +594,6 @@
   color: var(--udex-button-color-invisible-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-invisible-standard-disabled-background);
   border: none;
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Positive css-rules */
@@ -615,7 +621,6 @@
   color: var(--udex-button-color-positive-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-positive-standard-disabled-background);
   border: 1px solid var(--udex-button-color-positive-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Positive toggled*/
@@ -625,7 +630,7 @@
   border: 1px solid var(--udex-button-color-positive-toggled-default-border);
 }
 
-:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
+:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-positive-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-positive-toggled-hover-background);
   border: 1px solid var(--udex-button-color-positive-toggled-hover-border);
@@ -635,7 +640,6 @@
   color: var(--udex-button-color-positive-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-positive-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-positive-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Negative css-rules */
@@ -653,7 +657,8 @@
   border: 1px solid var(--udex-button-color-negative-standard-hover-border);
 }
 
-:host([design=Negative][active]:not([disabled])) {
+:host([design=Negative][active]:not([disabled])),
+:host([design=Negative][active][_aria-disabled="false"]) {
   color: var(--udex-button-color-negative-standard-active-text-and-icon);
   background-color: var(--udex-button-color-negative-standard-active-background);
   border: 1px solid var(--udex-button-color-negative-standard-active-border);
@@ -663,7 +668,6 @@
   color: var(--udex-button-color-negative-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-negative-standard-disabled-background);
   border: 1px solid var(--udex-button-color-negative-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Negative toggled*/
@@ -683,7 +687,6 @@
   color: var(--udex-button-color-negative-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-negative-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-negative-toggled-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /* Warning css-rules */
@@ -705,7 +708,7 @@
   border: 1px solid var(--udex-button-color-warning-standard-hover-border);
 }
 
-:host([design="Attention"][active]:not([disabled])) ,
+:host([design="Attention"][active]:not([disabled])),
 :host([design="Warning"][active]:not([disabled])) {
   color: var(--udex-button-color-warning-standard-active-text-and-icon);
   background-color: var(--udex-button-color-warning-standard-active-background);
@@ -717,7 +720,6 @@
   color: var(--udex-button-color-warning-standard-disabled-text-and-icon);
   background-color: var(--udex-button-color-warning-standard-disabled-background);
   border: 1px solid var(--udex-button-color-warning-standard-disabled-border);
-  opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
 
 /*Warning toggled*/
@@ -728,7 +730,7 @@
   border: 1px solid var(--udex-button-color-warning-toggled-default-border);
 }
 
-:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) ,
+:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
 :host([design="Warning"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
   color: var(--udex-button-color-warning-toggled-hover-text-and-icon);
   background-color: var(--udex-button-color-warning-toggled-hover-background);
@@ -740,5 +742,45 @@
   color: var(--udex-button-color-warning-toggled-disabled-text-and-icon);
   background-color: var(--udex-button-color-warning-toggled-disabled-background);
   border: 1px solid var(--udex-button-color-warning-toggled-disabled-border);
+}
+
+:host([aria-disabled="true"][design="Tertiary"]) .ui5-button-root,
+:host([_aria-disabled][design="Tertiary"]) .ui5-button-root,
+:host([design="Tertiary"][_aria-disabled][active]),
+:host([design="Tertiary"][aria-disabled="true"][active]) {
+  color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
+  background-color: var(--udex-button-color-tertiary-standard-disabled-background);
+  border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
+}
+
+:host([aria-disabled="true"][design="Tertiary"]) .ui5-button-root,
+:host([_aria-disabled][design="Tertiary"]) .ui5-button-root {
   opacity: var(--sapContent_DisabledOpacity, 0.4);
 }
+
+:host([design="Tertiary"][aria-disabled="true"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
+:host([design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled]))
+:host([design="Tertiary"][_aria-disabled][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
+:host([design="Tertiary"][_aria-disabled]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover)  {
+  color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
+  background-color: var(--udex-button-color-tertiary-standard-disabled-background);
+  border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
+}
+
+:host([design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
+:host([design="Tertiary"][_aria-disabled][active]:not([disabled])),
+:host([desktop][design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
+:host([desktop][design="Tertiary"][_aria-disabled][active]) {
+  border: none;
+}
+
+:host([desktop][design="Tertiary"][_aria-disabled]) .ui5-button-root::after,
+:host([desktop][design="Tertiary"][_aria-disabled]) .ui5-button-root::before,
+:host([desktop][active][design="Tertiary"][_aria-disabled]) .ui5-button-root::after,
+:host([desktop][active][design="Tertiary"][_aria-disabled]) .ui5-button-root::before,
+:host([desktop][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::after,
+:host([desktop][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::before,
+:host([desktop][active][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::after,
+:host([desktop][active][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::before {
+  content: none;
+}

package/src/themes/DatePickerPopover.css

@@ -1,12 +1,70 @@
 .udex-date-picker__popover {
   --udex-dropdown-border-width: 0;
   --udex-dropdown-pane-max-width: fit-content;
+  padding: 8px;
 }
 
+::part(year-picker-root),
+::part(month-picker-root) {
+  padding: var(--udexSpacer24, 24px) 0;
+}
+
+::part(month-cell),
+::part(calendar-header-middle-button) {
+  padding: 8px 14px;
+  height: 42px;
+  font-weight: 500;
+}
+
+::part(month-cell) {
+  margin: 0 6px 16px 6px;
+  min-width: calc(33.333% - 8px);
+}
+
+::part(year-cell) {
+  margin: 0 4px 16px 4px;
+  min-width: calc(25% - 6px);
+}
+
+::part(year-range-cell) {
+  width: 50%;
+  margin: 0 4px 16px 4px;
+}
+
+::part(year-range-cell),
+::part(year-cell) {
+  height: 36px;
+  padding: 9px 10px;
+  font-weight: 500;
+}
 
-@media (width < 640px) {
-  .udex-date-picker__popover {
-    --udex-dropdown-pane-min-width-xs: fit-content;
-    --udex-dropdown-pane-max-width-xs: fit-content;
-  }
-}
+::part(calendar-header-middle-button) {
+  width: auto;
+  flex-grow: 0;
+  border: 1px solid var(--udex-button-color-transparent, hsla(0, 0%, 0%, 0));
+}
+
+::part(calendar-header-middle-button):hover {
+  background-color: var(--sapButton_Lite_Hover_Background, var(--udexColorGrey2));
+  border-color: var(--sapButton_Lite_Hover_BorderColor, var(--udexColorGrey7));
+}
+
+::part(day-cell):hover {
+  background-color: var(--udexColorGrey3, #D5DADD);
+}
+
+::part(year-cell-selected):hover,
+::part(month-cell-selected):hover,
+::part(day-cell-selected):hover {
+  background-color: var(--udexColorBlue1, #EBF8FF);
+  border-color: var(--udexColorBlue9, #0040B0);
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+::part(day-cell-selected-between) {
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+::part(day-cell-selected-between):hover {
+  background-color: var(--udexColorBlue2, #D1EFFF);
+}