@sapudex/web-components 2.51.0 → 2.53.0

package/src/themes/ListItem.css

@@ -81,7 +81,8 @@
 }
 
 :host(:not([mode="SingleContent"]):not([disabled])[desktop]) .udex-list__item:focus:before,
-:host(:not([mode="SingleContent"]):not([disabled])) .udex-list__item:focus-visible:before {
+:host(:not([mode="SingleContent"]):not([disabled])) .udex-list__item:focus-visible:before,
+:host(._udex-active-descendant:not([mode="SingleContent"]):not([disabled])) .udex-list__item:before {
   content: '';
   position: absolute;
   inset: 4px 4px 4px 6px;

package/src/themes/MessageStrip.css

@@ -24,11 +24,13 @@
   --udex-message-strip-close-icon-top: calc(50% - 13px);
 
   --udex-message-strip-min-height: 20px;
-  --udex-message-strip-padding-inline-no-icon: var(--udexSpacer12, 12px);
+  --udex-message-strip-padding-inline-end-no-icon: 36px;
+  --udex-message-strip-padding-inline-start-no-icon: var(--udexSpacer12, 12px);
   --udex-message-strip-padding-block-no-icon: var(--udexSpacer8, 8px);
   --udex-message-strip-border-width: 1px;
   --udex-message-strip-padding: var(--udexSpacer8, 8px) 36px;
-  --udex-message-strip-padding-hide-icon: var(--udexSpacer8, 12px);
+  --udex-message-strip-padding-hide-icon: var(--udexSpacer8, 8px);
+  --udex-message-strip-content-padding-inline-end: var(--udexSpacer16, 16px);
 
   /* Grey Light */
   --udex-message-strip-color-grey-light-background: var(--udexColorGrey1, #F5F6F7);
@@ -148,7 +150,8 @@
 }
 
 .ui5-message-strip-root.ui5-message-strip-root-hide-icon {
-  padding-inline: var(--udex-message-strip-padding-inline-no-icon);
+  padding-inline-end: var(--udex-message-strip-padding-inline-end-no-icon);
+  padding-inline-start: var(--udex-message-strip-padding-inline-start-no-icon);
   padding-block: var(--udex-message-strip-padding-block-no-icon);
 }
 
@@ -168,7 +171,7 @@
 }
 
 :host .message-strip__text {
-  padding-inline-end: var(--udexSpacer48, 48px);
+  padding-inline-end: var(--udex-message-strip-content-padding-inline-end);
   min-height: var(--udex-message-strip-min-height);
 }
 
@@ -446,4 +449,4 @@
   --udex-button-focus-border-color: var(--udexColorNeutralWhite, #ffffff);
   --_ui5_button_focused_border: 0.125rem solid var(--udexColorNeutralWhite, #ffffff);
   --_ui5_button_pressed_focused_border_color: var(--udexColorNeutralWhite, #ffffff);
-}
+}

package/src/themes/Search.css

@@ -103,7 +103,7 @@
   background-color: var(--udexColorNeutralWhite, #fff);
   border-left: 1px solid var(--udexColorGrey6, #5B738B);
   border-right: 1px solid var(--udexColorGrey6, #5B738B);
-  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, 0.3));
+  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 53, 72, 0.3));
   overflow-y: hidden;
   bottom: -2px;
 }
@@ -369,7 +369,7 @@ input[type="search"]::-webkit-search-results-decoration {
   background-color: var(--udexColorNeutralWhite, #fff);
   border-left: 1px solid var(--udexColorGrey6, #5B738B);
   border-right: 1px solid var(--udexColorGrey6, #5B738B);
-  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, 0.3));
+  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 53, 72, 0.3));
   overflow-y: hidden;
 }
 
@@ -393,7 +393,7 @@ input[type="search"]::-webkit-search-results-decoration {
   white-space: nowrap;
 }
 
-.udex-search__prefix-button:focus, 
+.udex-search__prefix-button:focus,
 .udex-search__prefix-button:focus-visible,
 .udex-search__prefix-button:hover {
   cursor: pointer;

package/src/themes/SelectBase.css

@@ -21,7 +21,8 @@
   position: relative;
 }
 
-:host([_focused]) .udex-text-field__wrap:before {
+:host([_focused]) .udex-text-field__wrap:before,
+:host([_open]) .udex-text-field__wrap:before {
   content: "";
   position: absolute;
   inset: -5px;

package/src/themes/SelectBox.css

@@ -54,3 +54,13 @@
 ::slotted([slot="footer"]) {
   height: auto;
 }
+
+/* While the dropdown is open (including keyboard navigation), suppress the
+   input focus ring so visual focus appears on the list / active item. */
+:host([_navigating]) .udex-text-field__wrap:before {
+  content: none;
+}
+:host([_navigating]) .udex-text-field__wrap {
+  outline: none;
+  border-color: var(--udex-input-color-standard-active-border);
+}

package/src/themes/Slider.css

@@ -164,7 +164,7 @@
   height: var(--udex-slider-tooltip-height);
   min-width: var(--udex-slider-tooltip-min-width);
   border: var(--udex-slider-tooltip-border);
-  box-shadow: var(--sapContent_Shadow0, 0px 2px 4px 0px rgba(34, 54, 73, .2));
+  box-shadow: var(--sapContent_Shadow0, 0px 2px 4px 0px rgba(34, 53, 72, .2));
   border-radius: var(--udex-slider-tooltip-border-radius);
   font-size: var(--udex-slider-tooltip-font-size);
   color: var(--udex-slider-tooltip-color);

package/src/themes/Tile.css

@@ -11,8 +11,8 @@
   --udex-tile-color-generic-hover-background: var(--sapTile_Hover_Background, #fff);
   --udex-tile-color-generic-focus-background: var(--sapTile_Active_Background, #fff);
 
-  --udex-tile-box-shadow-generic-default: var(--sapContent_Shadow0, "0 2px 4px 0 rgba(34, 54, 73, 0.20)");
-  --udex-tile-box-shadow-generic-hover: var(--sapContent_Shadow1, "0 2px 8px 0 rgba(34, 54, 73, 0.30)");
+  --udex-tile-box-shadow-generic-default: var(--sapContent_Shadow0, "0 2px 4px 0 rgba(34, 53, 72, 0.20)");
+  --udex-tile-box-shadow-generic-hover: var(--sapContent_Shadow1, "0 2px 8px 0 rgba(34, 53, 72, 0.30)");
 
   --udex-tile-content-padding-vertical: var(--udexSpacer24, 24px);
   --udex-tile-content-padding-horizontal: var(--udexSpacer20, 20px);

package/src/themes/Toast.css

@@ -8,7 +8,7 @@
   --udex-toast-status-icon-size: 18px;
   --udex-toast-vertical-offset: 2.5rem;
   --udex-toast-background:var(--udexColorNeutralWhite, #FFF);
-  --udex-toast-shadow:var(--sapContent_Shadow2, 0 10px 30px 0 rgba(34, 54, 73, 0.25));
+  --udex-toast-shadow:var(--sapContent_Shadow2, 0 10px 30px 0 rgba(34, 53, 72, 0.25));
 }
 
 :host {

package/src/themes/Tooltip.css

@@ -1,7 +1,7 @@
 :host {
   --udex-tooltip-background-color: var(--udexColorNeutralWhite, #fff);
   --udex-tooltip-border-color: var(--udexColorGrey4, var(--udexColorGrey4));
-  --udex-tooltip-box-shadow: var(--sapContent_Shadow0, 0px 2px 4px 0px rgba(34, 54, 73, 0.2));
+  --udex-tooltip-box-shadow: var(--sapContent_Shadow0, 0px 2px 4px 0px rgba(34, 54, 72, 0.2));
 }
 
 [ui5-popover] {

package/dist/assets/messagebundle_lv-BHId5zho.js

@@ -1 +0,0 @@
-const s="© {0} SAP SE vai ar SAP saistīts uzņēmums. Visas tiesības paturētas.",t="Apskats",a="Iziet",O="Galvenās saites",e="Atpakaļ uz sākumu",I={COPYRIGHT:s,OVERVIEW:t,LOGOUT:a,MAIN_LINKS:O,BACK_TO_TOP:e};export{e as BACK_TO_TOP,s as COPYRIGHT,a as LOGOUT,O as MAIN_LINKS,t as OVERVIEW,I as default};

package/dist/assets/messagebundle_nl-etaldyfo.js

@@ -1 +0,0 @@
-const e="© {0} SAP SE of een aan SAP gelieerde onderneming. Alle rechten voorbehouden.",n="Overzicht",o="Afmelden",O="Belangrijkste links",s="Terug naar boven",t={COPYRIGHT:e,OVERVIEW:n,LOGOUT:o,MAIN_LINKS:O,BACK_TO_TOP:s};export{s as BACK_TO_TOP,e as COPYRIGHT,o as LOGOUT,O as MAIN_LINKS,n as OVERVIEW,t as default};