@sapudex/web-components 0.114.2 → 0.127.6

package/src/themes/Avatar.css

@@ -122,10 +122,18 @@
   display: inline-block;
 }
 
+:host([hidden]) {
+  display: none;
+}
+
 :host([interactive]) .udex-avatar:hover {
   box-shadow: none;
 }
 
+::slotted(*) {
+	pointer-events: none;
+}
+
 /* Styles for avatar with image inside */
 
 :host([color-scheme]) .udex-avatar.udex-avatar--with-image {
@@ -133,17 +141,15 @@
   border-color: var(--udex-avatar-image-default-border-color);
 }
 
-:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover {
-  border-color: var(--udex-avatar-image-hover-border-color);
-  background-color: hsla(0, 0%, 0%, 0);
-}
-
 /* Badge styles */
 
 .udex-avatar ::slotted([slot="badge"]) {
   display: flex;
   justify-content: center;
   align-items: center;
+  bottom: 0;
+  right: 0;
+  pointer-events: all;
 }
 
 :host([size="XS"]) .udex-avatar ::slotted([slot="badge"]) {
@@ -181,6 +187,20 @@
   padding: 6px;
 }
 
+:host([show-attention-badge][size="XS"]) .udex-avatar::before {
+  position: absolute;
+  content: '';
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  width: 6px;
+  height: 6px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  background-color: var(--udexColorRed7);
+}
+
+
 /* Size styles */
 
 :host([size="XS"]) .udex-avatar {
@@ -283,6 +303,7 @@
   border-color: var(--udex-avatar-blue-default-border-color);
 }
 
+:host([hover][color-scheme="Blue"]) .udex-avatar,
 :host([color-scheme="Blue"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-blue-default-background-color);
   border-color: var(--udex-avatar-blue-hover-border-color);
@@ -297,6 +318,7 @@
   border-color: var(--udex-avatar-mango-default-border-color);
 }
 
+:host([hover][color-scheme="Mango"]) .udex-avatar,
 :host([color-scheme="Mango"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-mango-default-background-color);
   border-color: var(--udex-avatar-mango-hover-border-color);
@@ -317,6 +339,7 @@
   border-color: var(--udex-avatar-red-default-border-color);
 }
 
+:host([hover][color-scheme="Red"]) .udex-avatar,
 :host([color-scheme="Red"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-red-default-background-color);
   border-color: var(--udex-avatar-red-hover-border-color);
@@ -331,6 +354,7 @@
   border-color: var(--udex-avatar-raspberry-default-border-color);
 }
 
+:host([hover][color-scheme="Raspberry"]) .udex-avatar,
 :host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-raspberry-default-background-color);
   border-color: var(--udex-avatar-raspberry-hover-border-color);
@@ -345,6 +369,7 @@
   border-color: var(--udex-avatar-pink-default-border-color);
 }
 
+:host([hover][color-scheme="Pink"]) .udex-avatar,
 :host([color-scheme="Pink"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-pink-default-background-color);
   border-color: var(--udex-avatar-pink-hover-border-color);
@@ -359,6 +384,7 @@
   border-color: var(--udex-avatar-indigo-default-border-color);
 }
 
+:host([hover][color-scheme="Indigo"]) .udex-avatar,
 :host([color-scheme="Indigo"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-indigo-default-background-color);
   border-color: var(--udex-avatar-indigo-hover-border-color);
@@ -373,6 +399,7 @@
   border-color: var(--udex-avatar-teal-default-border-color);
 }
 
+:host([hover][color-scheme="Teal"]) .udex-avatar,
 :host([color-scheme="Teal"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-teal-default-background-color);
   border-color: var(--udex-avatar-teal-hover-border-color);
@@ -387,6 +414,7 @@
   border-color: var(--udex-avatar-green-default-border-color);
 }
 
+:host([hover][color-scheme="Green"]) .udex-avatar,
 :host([color-scheme="Green"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-green-default-background-color);
   border-color: var(--udex-avatar-green-hover-border-color);
@@ -401,6 +429,7 @@
   border-color: var(--udex-avatar-grey-default-border-color);
 }
 
+:host([hover][color-scheme="Grey"]) .udex-avatar,
 :host([color-scheme="Grey"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-grey-default-background-color);
   border-color: var(--udex-avatar-grey-hover-border-color);
@@ -415,6 +444,7 @@
   border-color: var(--udex-avatar-transparent-default-border-color);
 }
 
+:host([hover][color-scheme="Transparent"]) .udex-avatar,
 :host([color-scheme="Transparent"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-transparent-default-background-color);
   border-color: var(--udex-avatar-transparent-hover-border-color);
@@ -429,14 +459,21 @@
   border-color: var(--udex-avatar-neutral-default-border-color);
 }
 
+:host([hover][color-scheme="Neutral"]) .udex-avatar,
 :host([color-scheme="Neutral"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-neutral-default-background-color);
   border-color: var(--udex-avatar-neutral-hover-border-color);
   color: var(--udex-avatar-neutral-default-icon-color);
 }
 
+:host([hover]) .udex-avatar.udex-avatar--with-image,
+:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover {
+  border-color: var(--udex-avatar-image-hover-border-color);
+  background-color: hsla(0, 0%, 0%, 0);
+}
+
 :host([interactive]:not([hidden])) .udex-avatar:active, :host([interactive]:not([hidden])) .udex-avatar.udex-avatar--with-image:active {
   border-color: var(--udex-avatar-neutral-active-border-color);
   background-color: var(--udex-avatar-neutral-active-background-color);
   color: var(--udex-avatar-neutral-active-icon-color);
-}
+}

package/src/themes/Badge.css

@@ -138,7 +138,7 @@
 .udex-badge--number.udex-badge--large {
   padding: 0 var(--udexSpacer4);
   height: 1rem;
-  line-height: 0.938rem;
+  line-height: 1rem;
   font-size: 0.875rem;
 }
 

package/src/themes/Checkbox.css

@@ -14,3 +14,15 @@
   border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
   color: var(--sapField_TextColor);
 }
+
+:host([required]) .ui5-checkbox-label::after {
+  padding-left: var(--udexSpacer8);
+  padding-right: var(--udexSpacer2);
+  content: "*";
+}
+
+:host([required]) .ui5-checkbox-label:dir(rtl)::after {
+  padding-left: var(--udexSpacer2);
+  padding-right: var(--udexSpacer8);
+  content: "*";
+}

package/src/themes/CountrySelector.css

@@ -120,3 +120,7 @@ udex-list-item::part(item) {
 udex-text-field[readonly]::part(label) {
   background: linear-gradient(var(--sapField_Background) 65%, var(--sapField_ReadOnly_Background) 35%);
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: 100%;
+}

package/src/themes/Divider.css

@@ -1,8 +1,12 @@
+:host {
+  --udex-divider-color: var(--udexCoreDividerLight, #D5DADD);
+}
+
 .udex-divider {
-  border-top: 1px solid var(--udexCoreDividerLight, #D5DADD);
+  border-top: 1px solid var(--udex-divider-color);
   display: block;
 }
 
 .udex-divider-wrapper {
-  padding: 2px 0px 2px 0px;
+  padding: var(--udexSpacer2) 0;
 }

package/src/themes/Dropdown.css

@@ -7,6 +7,7 @@
   --udex-dropdown-horizontal-distance: 0;
   --udex-dropdown-vertical-distance: 0;
   --udex-dropdown-pane-min-width: 320px;
+  --udex-dropdown-pane-max-width: 640px;
   --udex-dropdown-pane-width: fit-content;
   --udex-dropdown-pane-max-height: none;
   --udex-dropdown-pane-overflow: visible;
@@ -19,6 +20,7 @@
   border-radius: var(--udex-dropdown-border-radius);
   background: var(--udex-dropdown-default-background-color);
   min-width: var(--udex-dropdown-pane-min-width);
+  max-width: var(--udex-dropdown-pane-max-width);
   width: var(--udex-dropdown-pane-width);
   max-height: var(--udex-dropdown-pane-max-height);
   margin: var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);

package/src/themes/FilterMenu.css

@@ -16,6 +16,11 @@
 
   --udex-filter-menu-trigger-selection-bar-background: var(--sapHoverColor, #0070f2);
   --udex-filter-menu-trigger-outline-border-color:  var(--udexColorBlue10, #002A86);
+
+  --udex-filter-menu-dropdown-width: fit-content;
+  --udex-filter-menu-dropdown-max-width: 640px;
+
+  display: inline-block;
 }
 
 :host([desktop]) .udex-filter-menu__trigger:focus,
@@ -134,3 +139,8 @@
 .udex-filter-menu__badge {
   margin-inline-start: var(--udexSpacer4, 4px);
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: var(--udex-filter-menu-dropdown-max-width);
+  --udex-dropdown-pane-width: var(--udex-filter-menu-dropdown-width);
+}