@sapudex/web-components 2.54.0 → 2.56.0

package/src/i18n/messagebundle_lt.properties

@@ -3,3 +3,129 @@ OVERVIEW=Apžvalga
 LOGOUT=Atsijungti
 MAIN_LINKS=Pagrindinės nuorodos
 BACK_TO_TOP=Grįžti aukštyn
+COUNT=Skaičius
+OF=iš
+PAGINATION_PAGE=Puslapis
+SELECTED=Pasirinkta
+UNSELECTED=Nepasirinkta
+INDETERMINATE=Nenustatyta
+EDIT_BUTTON=Redaguoti
+DELETE_BUTTON=Naikinti
+BACK_TO_REGION_LIST=Grįžti į regionų sąrašą
+BUTTON_ARIA_TYPE_PRIMARY=Pirminis
+BUTTON_ARIA_TYPE_SECONDARY=Antrinis
+BUTTON_ARIA_TYPE_TERTIARY=Tretinis
+BUTTON_ARIA_TYPE_WARNING=Įspėjimas
+BUTTON_ARIA_TYPE_POSITIVE=Teigiamas
+BUTTON_ARIA_TYPE_NEGATIVE=Neigiamas
+BUTTON_ARIA_EMPHASIZED=Pabrėžta
+BUTTON_ARIA_DEFAULT=Numatytasis
+BUTTON_ARIA_TRANSPARENT=Skaidrus
+BUTTON_ARIA_ATTENTION=Dėmesio
+DATEPICKER_DATE_DESCRIPTION=Datos įvestis
+TOGGLED=Perjungta
+FIRST_PAGE=Pirmas puslapis
+LAST_PAGE=Paskutinis puslapis
+PREVIOUS_PAGE=Ankstesnis puslapis
+NEXT_PAGE=Paskesnis puslapis
+CURRENT_PAGE=Esamas puslapis
+ACTIVATE_PAGE=Aktyvinti puslapio numerį
+SUGGESTED_TEXT=siūlomos ieškos
+ACCESSIBLE_NAME_SEARCH_ICON=Ieškoti
+TOOLTIP_VOICE_BUTTON=Balsas
+TOOLTIP_SUBMIT_BUTTON=Pateikti
+LISTENING=Klausomasi
+AVAILABLE_VALUES=Prieinamos reikšmės
+RECOMMENDED_TEXT=Rekomenduojami puslapiai
+EXPAND_ALL=Išskleisti viską
+COLLAPSE_ALL=Suskleisti viską
+MORE=Daugiau
+ATTENTION_BADGE=Dėmesio ženklelis
+READ_MORE=Skaityti daugiau
+READ_LESS=Skaityti mažiau
+SHOW_MORE=Rodyti daugiau
+SHOW_LESS=Rodyti mažiau
+RATING_INDICATOR_TEXT=Įvertinimo indikatorius
+RATING_INDICATOR_TOOLTIP_TEXT=Įvertinimas
+RATING_INDICATOR_ARIA_DESCRIPTION=Būtina
+TOTAL=Iš viso
+RATING_COUNT_TITLE=Įvertinimas
+ARIA_LABEL_LIST_MULTISELECTABLE=Yra kelis kartus pasirenkamų pozicijų
+ARIA_LABEL_LIST_SELECTABLE=Yra pasirenkamų įrašų
+SHOW_RESULTS=Rodyti rezultatus
+RESET=Atkurti
+MESSAGE_STRIP_CLOSE_BUTTON=Pranešimo juostos uždarymo mygtukas
+MESSAGE_STRIP_INFORMATION=Informacinė juosta
+MESSAGE_STRIP_SUCCESS=Teigiama juosta
+MESSAGE_STRIP_WARNING=Įspėjimo juosta
+MESSAGE_STRIP_ERROR=Neigiama juosta
+MESSAGE_STRIP_ACTION=Veiksmų juosta
+REVIEWS=peržiūros
+STARS=žvaigždutės
+SELECT_OPTIONS=Pasirinkimo variantai
+SELECT_ALL=Pasirinkti viską
+TEXTAREA_CHARACTERS_LEFT=Liko simbolių: {0}
+VALUE_STATE_TYPE_ERROR=Lauko būsenos klaida
+VALUE_STATE_TYPE_WARNING=Lauko būsenos įspėjimas
+VALUE_STATE_TYPE_SUCCESS=Lauko būsenos sėkmė
+VALUE_STATE_TYPE_STANDARD=Lauko būsenos standartas
+CAROUSEL_PREVIOUS_ARROW_TEXT=Ankstesnis puslapis
+CAROUSEL_NEXT_ARROW_TEXT=Paskesnis puslapis
+NO_MATCHES_FOUND=Atitikmenų nerasta.
+BREADCRUMBS_ARIA_LABEL=Naršymo kelias
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Daugiau
+STEPINPUT_INC_ICON_TITLE=Padidinti kiekį
+STEPINPUT_DEC_ICON_TITLE=Sumažinti kiekį pagal
+TABLE_NO_DATA_FOUND=Duomenų nerasta
+VALUE_STATE_ERROR=Netinkamas įrašas
+VALUE_STATE_WARNING=Įspėjimas paskelbtas
+VALUE_STATE_INFORMATION=Informatyvus įrašas
+VALUE_STATE_SUCCESS=Įrašas sėkmingai patvirtintas
+READ_ONLY=Tik skaityti
+SWITCH_ACCOUNT=Sukeisti paskyrą
+BACK=Atgal
+OTHER_IDENTITIES=Kitos tapatybės
+ADD_OR_REMOVE_ACCOUNT=Pridėti arba pašalinti paskyrą
+COUNTRY_SELECT=Pasirinkti šalį
+CART=Krepšelis
+COUNTRY_SELECTOR=Šalies parinkiklis
+PHONE_NUMBER=Telefono numeris
+CONTACT_US=Susisiekite su mumis
+EMAIL=El. paštas
+CHAT_WITH_US=Pasikalbėkite su mumis
+QUICK_LINKS=Spartieji saitai
+TRENDING=Tendencijos
+ABOUT_SAP=Apie SAP
+SITE_INFORMATION=Svetainės informacija
+AVATAR_TEXT=Pseudoportretas
+CALENDAR_ICON=Atidaryti kalendoriaus piktogramą
+LIST_ITEM_EDIT_ICON=Redaguoti sąrašo pozicijos įrašą
+LIST_ITEM_DELETE_ICON=Naikinti sąrašo pozicijos įrašą
+BACK_BUTTON_LABEL=mygtukas „atgal“
+STATUS_BADGE_TEXT=Būsenos ženklelis
+STATUS_BADGE_EDIT_TITLE=Spustelėkite, kad redaguotumėte profilį
+STATUS_BADGE_INFORMATION_TITLE=Spustelėkite, kad atidarytumėte profilio informaciją
+STATUS_BADGE_WARNING_TITLE=Įspėjimas, galima rizika, susijusi su profiliu
+STATUS_BADGE_ERROR_TITLE=Profilyje įvyko klaida
+STATUS_BADGE_SUCCESS_TITLE=Sėkmingai patvirtintas profilis
+PROFILE=Profilis
+OPENS_IN_A_NEW_WINDOW=atidaro naujame lange
+TEXT_FIELD=Teksto laukas
+UPLOADING_FILE_STATUS_TEXT=Įkeliama
+TERMINATED_FILE_STATUS_TEXT=Nutraukta
+REMOVE_FILE_TEXT=Pašalinti failą
+UPLOAD_BUTTON_LABEL=Įkelti failą
+COMPLETE_LIST_OF=Užbaigti sąrašą
+CALL_US_TODAY=Paskambinkite mums šiandien!
+SEARCH=Paieška
+RESULT_RETURNED=rezultatai (-ų) pateikti (-a).
+SOCIAL_MEDIA_BUTTON=Socialinės žiniasklaidos mygtukas
+PROMO_TILE=Reklamos plytelė
+PROMO_TILE_ICON=Reklamos plytelės piktograma
+PLAY_BUTTON_ACCESSIBLE_NAME=Paleidimo mygtukas, skirtas pradėti kliento logotipų rotaciją
+PAUSE_BUTTON_ACCESSIBLE_NAME=Pristabdymo mygtukas, skirtas sustabdyti kliento logotipų rotaciją
+LOCATION=Vieta
+TOAST_CLOSE_ACCESSIBLE_NAME=Uždaryti
+DISABLED=Išjungta
+EXPAND=Išplėsti
+COLLAPSE=Sutraukti

package/src/i18n/messagebundle_lv.properties

@@ -129,3 +129,12 @@ TOAST_CLOSE_ACCESSIBLE_NAME=Aizvērt
 DISABLED=Atspējots
 EXPAND=Izvērst
 COLLAPSE=Sakļaut
+SHOW_PASSWORD=Parādīt paroli
+HIDE_PASSWORD=Noslēpt paroli
+CAROUSEL_AUTOPLAY_TOGGLE_START=Uzsākt karuseļa automātisko atskaņošanu
+CAROUSEL_AUTOPLAY_TOGGLE_STOP=Apturēt karuseļa automātisko atskaņošanu
+SUPPORT=Palīdzība
+SEE_COMPLETE_LIST=Vai arī skatiet mūsu pilno sarakstu ar
+LOCAL_COUNTRY_NAMES=vietējiem valstu numuriem
+ACCESSIBLE_NAME_RESET_ICON=Notīrīt
+TOOLTIP_RESET_BUTTON=Notīrīt

package/src/i18n/messagebundle_uk.properties

@@ -1,3 +1,11 @@
+ASK_JOULE=Запитати Joule
+SHOW_PASSWORD=Показати пароль
+HIDE_PASSWORD=Приховати пароль
+SUPPORT=Підтримка
+ACCESSIBLE_NAME_RESET_ICON=Очистити
+TOOLTIP_RESET_BUTTON=Очистити
+CAROUSEL_AUTOPLAY_TOGGLE_START=Розпочати автовідтворення каруселі
+CAROUSEL_AUTOPLAY_TOGGLE_STOP=Зупинити автовідтворення каруселі
 COPYRIGHT=© {0} SAP SE або афілійована компанія SAP. Усі права захищено.
 OVERVIEW=Огляд
 LOGOUT=Вихід

package/src/themes/AccordionItem.css

@@ -14,7 +14,7 @@
   --udex-accordion-item-icon-height: 16px;
   --udex-accordion-item-label-icon-width: 24px;
   --udex-accordion-item-label-icon-height: 24px;
-  --udex-accordion-item-content-padding: 0 var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);
+  --udex-accordion-item-content-padding: var(--udexSpacer4, 4px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);
   --udex-accordion-item-with-icon-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) calc(var(--udexSpacer16, 16px) + var(--udex-accordion-item-label-icon-width, 24px) + var(--udexSpacer12, 12px));
   --udex-accordion-item-content-max-height: 1000px;
   --udex-accordion-item-button-icon-m-size: 16px;

package/src/themes/AccordionSpotlight.css

@@ -149,7 +149,7 @@
   background-color: var(--udex-accordion-spotlight-indicator-color);
   border-start-end-radius: var(--udexRadiusXXS, 2px);
   border-end-end-radius: var(--udexRadiusXXS, 2px);
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .udex-accordion-spotlight__content {

package/src/themes/Avatar.css

@@ -185,7 +185,7 @@
   content: '';
   inset-block-start: 0;
   inset-inline-end: 0;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   width: 6px;
   height: 6px;
   border: 1px solid #fff;

package/src/themes/Breadcrumbs.css

@@ -69,6 +69,10 @@
   --sapLinkColor: var(--udex-breadcrumbs-item-color);
   --sapLink_Active_Color: var(--udex-breadcrumbs-item-color);
   --udex-link-text-decoration: none;
+  /* Suppress UI5 base focused+hover text-decoration — breadcrumbs use ::after instead */
+  --_ui5_link_focused_hover_text_decoration: none;
+  --_udex-link-inline-underline-default-size: 0 0;
+  --_udex-link-inline-underline-hover-size: 0 0;
   position: relative;
 }
 
@@ -122,14 +126,51 @@
   display: inline-flex;
 }
 
-[ui5-link]:not([icon]).udex-breadcrumbs__item:hover:after {
+.udex-breadcrumbs__link-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.udex-breadcrumbs__link-wrap::after {
   content: '';
   position: absolute;
-  height: 0.0625rem;
-  left: .125rem;
-  right: .125rem;
-  bottom: .125rem;
+  left: 0;
+  right: 0;
+  bottom: 3px;
+  height: 1px;
   background-color: var(--udex-breadcrumbs-item-color);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 300ms linear;
+  pointer-events: none;
+}
+
+.udex-breadcrumbs__link-wrap:dir(rtl)::after {
+  transform-origin: right center;
+}
+
+.udex-breadcrumbs__link-wrap:not(:focus-within):hover::after {
+  transform: scaleX(1);
+}
+
+/* Keep underline visible when focused (with or without hover) */
+.udex-breadcrumbs__link-wrap:focus-within::after {
+  transform: scaleX(1);
+}
+
+/* Suppress icon shift animation on the dropdown trigger */
+.udex-breadcrumbs__trigger:hover::part(icon) {
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .udex-breadcrumbs__link-wrap::after {
+    transition: none;
+  }
+
+  .udex-breadcrumbs__link-wrap:not(:focus-within):hover::after {
+    transform: scaleX(1);
+  }
 }
 
 .udex-breadcrumbs__item--current-page {

package/src/themes/BreadcrumbsPopover.css

@@ -49,6 +49,71 @@
   --udex-link-line-height: var(--udex-breadcrumbs-dropdown-item-line-height);
   --udex-link-icon-height: 12px;
   --udex-link-icon-width: 12px;
+  /* Suppress all Link/UI5 text-decoration underlines — popover uses ::after instead */
+  --udex-link-text-decoration: none;
+  --udex-link-hover-text-decoration: none;
+  --udex-link-focused-hover-text-decoration: none;
+  --udex-link-focus-text-decoration: none;
+  --_ui5_link_focused_hover_text_decoration: none;
+  --_udex-link-inline-underline-default-size: 0 0;
+  --_udex-link-inline-underline-hover-size: 0 0;
+  --_udex-link-icon-underline-default-size: 0 0;
+  --_udex-link-icon-underline-hover-size: 0 0;
+  /* Suppress icon shift animation when item is keyboard-focused */
+  --_udex-link-icon-focused-hover-transform: none;
+  --_udex-link-icon-focused-hover-transform-rtl: none;
+  --_udex-link-end-icon-focused-hover-transform: none;
+  --_udex-link-end-icon-focused-hover-transform-rtl: none;
+}
+
+/* Animated underline via ::after on the link element.
+   bottom: 6px offsets the 6px padding-bottom from ::part(root) so the line
+   sits at the text baseline rather than at the padded bottom of the shadow host. */
+.udex-breadcrumbs__popover-content .udex-breadcrumbs__item:not(.udex-breadcrumbs__item--current)::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 6px;
+  height: 1px;
+  background-color: var(--udex-breadcrumbs-item-dropdown-color);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 300ms linear;
+  pointer-events: none;
+}
+
+.udex-breadcrumbs__popover-content .udex-breadcrumbs__item:not(.udex-breadcrumbs__item--current):dir(rtl)::after {
+  transform-origin: right center;
+}
+
+.udex-breadcrumbs__popover-content .udex-breadcrumbs__item:not(.udex-breadcrumbs__item--current):not(:focus-within):hover::after {
+  transform: scaleX(1);
+}
+
+/* Keep underline visible when focused (with or without hover) */
+.udex-breadcrumbs__popover-content .udex-breadcrumbs__item:not(.udex-breadcrumbs__item--current):focus-within::after {
+  transform: scaleX(1);
+}
+
+/* For icon links, offset left so underline starts at text, not icon */
+.udex-breadcrumbs__popover-content .udex-breadcrumbs__item[icon]:not(.udex-breadcrumbs__item--current)::after {
+  left: calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px));
+}
+
+.udex-breadcrumbs__popover-content .udex-breadcrumbs__item[icon]:not(.udex-breadcrumbs__item--current):dir(rtl)::after {
+  left: 0;
+  right: calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .udex-breadcrumbs__popover-content .udex-breadcrumbs__item:not(.udex-breadcrumbs__item--current)::after {
+    transition: none;
+  }
+
+  .udex-breadcrumbs__popover-content .udex-breadcrumbs__item:not(.udex-breadcrumbs__item--current):not(:focus-within):hover::after {
+    transform: scaleX(1);
+  }
 }
 
 .udex-breadcrumbs__popover-content li:has(.udex-breadcrumbs__item--with-icon):dir(rtl)~li .udex-breadcrumbs__item {

package/src/themes/CountrySelector.css

@@ -3,12 +3,14 @@
   --udex-country-selector-flag-height: 20px;
   --udex-country-selector-padding-start: 50px;
   --udex-country-selector-padding-end: 12px;
-  --udex-country-selector-text-offset: 36px;
+  --udex-country-selector-text-offset: 40px;
   --udex-country-selector-search-inset-end: 42px;
   --udex-country-selector-search-inset-start: 36px;
   --udex-country-selector-active-text-offset-y: -21px;
   --udex-country-selector-label-offset-y: 96px;
+  --udex-country-selector-flag-border-color: var(--udexColorGrey2, #EAECEE);
 }
+
 :host([_country-selector]) .udex-text-field__label {
   max-width: calc(100% - var(--udex-country-selector-label-offset-y));
 }
@@ -70,7 +72,7 @@
   position: absolute;
   top: 0;
   transform: translate(0, 50%);
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   min-width: var(--udex-country-selector-flag-width);
   width: var(--udex-country-selector-flag-width);
   height: var(--udex-country-selector-flag-height);
@@ -79,6 +81,14 @@
   pointer-events: none;
 }
 
+.udex-text-field__image:before {
+  border: 1px solid var(--udex-country-selector-flag-border-color);
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
 .udex-text-field__input > .udex-text-field__image {
   position: relative;
   transform: translate(0);

package/src/themes/EventRibbon.css

@@ -300,7 +300,7 @@
   background-position: var(--udex-event-ribbon-background-position);
   background-repeat: no-repeat;
   transition: ease-out 300ms;
-  z-index: 0;
+  z-index: var(--udexZIndex0, 0);
   will-change: transform;
 }
 

package/src/themes/FilterMenu.css

@@ -141,9 +141,10 @@
 }
 
 .udex-filter-menu__footer {
+  height: auto;
   width: 100%;
   display: flex;
-  gap: 10px;
+  gap: var(--udexSpacer8, 8px);
 }
 
 .udex-filter-menu__badge {
@@ -166,7 +167,7 @@
 
 [ui5-popover]::part(header),
 [ui5-popover]::part(footer) {
-  padding: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);
+  padding: var(--udexSpacer12, 12px);
 }
 
 [ui5-popover]::part(footer) {

package/src/themes/Footer.css

@@ -117,11 +117,16 @@
 
 .udex-footer__country,
 .udex-footer__chat-with-us-link,
-.udex-footer__contact-us-link {
+.udex-footer__contact-us-link,
+.udex-footer__ask-joule {
   font-size: var(--udexTypographyBodyXSFontSize);
   line-height: 21px;
 }
 
+.udex-footer__ask-joule {
+  align-items: center;
+}
+
 .udex-footer__number {
   font-size: var(--udexTypographyHeadingMediumXXSFontSize);
   font-weight: var(--udexTypographyFontWeightMedium);
@@ -196,6 +201,7 @@
   line-height: var(--udexTypographyBodyLineHeight, 1.5);
   display: inline-block;
   box-sizing: border-box;
+  position: relative;
 }
 
 :host([desktop]) .udex-footer a:focus,
@@ -236,6 +242,97 @@
   max-width: var(--udex-footer-tagline-max-width);
 }
 
+/* Animated underline for desktop nav links */
+.udex-footer__links-list--desktop li a:hover {
+  text-decoration: none;
+}
+
+.udex-footer__nav-link-text {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: 0% 1px;
+  background-repeat: no-repeat;
+  background-position: 0% 100%;
+  transition: background-size 300ms linear;
+}
+
+.udex-footer__nav-link-text:dir(rtl) {
+  background-position: 100% 100%;
+}
+
+.udex-footer__links-list--desktop li a:not(:focus-visible):hover .udex-footer__nav-link-text,
+.udex-footer__links-list--desktop li a:focus-visible .udex-footer__nav-link-text {
+  background-size: 100% 1px;
+}
+
+:host([desktop]) .udex-footer__links-list--desktop li a:not(:focus):hover .udex-footer__nav-link-text,
+:host([desktop]) .udex-footer__links-list--desktop li a:focus .udex-footer__nav-link-text {
+  background-size: 100% 1px;
+}
+
+/* Animated underline for contact links (hover only; focus ring serves as the focus indicator) */
+.udex-footer__number,
+.udex-footer__contact-us-link,
+.udex-footer__chat-with-us-link,
+.udex-footer__ask-joule-link {
+  position: relative;
+}
+
+:host .udex-footer__number:hover,
+:host .udex-footer__contact-us-link:hover,
+:host .udex-footer__chat-with-us-link:hover,
+:host .udex-footer__ask-joule-link:hover {
+  text-decoration: none;
+}
+
+.udex-footer__number::after,
+.udex-footer__contact-us-link::after,
+.udex-footer__chat-with-us-link::after,
+.udex-footer__ask-joule-link:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background-color: var(--udex-footer-link-color);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 300ms linear;
+  pointer-events: none;
+}
+
+.udex-footer__number::after {
+  height: 2px;
+}
+
+.udex-footer__number:dir(rtl)::after,
+.udex-footer__contact-us-link:dir(rtl)::after,
+.udex-footer__chat-with-us-link:dir(rtl)::after,
+.udex-footer__ask-joule-link:dir(rtl)::after {
+  transform-origin: right center;
+}
+
+.udex-footer__number:not(:focus-visible):hover::after,
+.udex-footer__contact-us-link:not(:focus-visible):hover::after,
+.udex-footer__chat-with-us-link:not(:focus-visible):hover::after,
+.udex-footer__ask-joule-link:not(:focus-visible):hover::after,
+:host([desktop]) .udex-footer__number:not(:focus):hover::after,
+:host([desktop]) .udex-footer__contact-us-link:not(:focus):hover::after,
+:host([desktop]) .udex-footer__chat-with-us-link:not(:focus):hover::after,
+:host([desktop]) .udex-footer__ask-joule-link:not(:focus):hover::after {
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .udex-footer__nav-link-text,
+  .udex-footer__number::after,
+  .udex-footer__contact-us-link::after,
+  .udex-footer__chat-with-us-link::after,
+  .udex-footer__ask-joule-link::after {
+    transition: none;
+  }
+}
+
 @media (max-width: 1599px) {
   .udex-footer {
     padding: var(--udexSpacer72);

package/src/themes/HeroBanner.css

@@ -126,7 +126,7 @@
   background: var(--udexColorNeutralBlack);
   opacity: 0.8;
   border-radius: 50%;
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
 }
 
 .udex-hero-banner__media-button:dir(rtl) {

package/src/themes/ImageGridTicker.css

@@ -64,7 +64,7 @@
   bottom: 0;
   width: 120px;
   background: linear-gradient(90deg, #FFF 23.96%, rgba(255, 255, 255, 0) 100%);
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 :host([_is-scrollable]) .udex-image-grid-ticker__track-holder::after {