@sapudex/web-components 2.54.0 → 2.56.0

package/src/themes/Link.css

@@ -1,9 +1,5 @@
 :host {
   --udex-link-font-size: var(--sapFontSize);
-  --udex-link-text-decoration: underline;
-  --udex-link-hover-text-decoration: underline;
-  --udex-link-focused-hover-text-decoration: underline;
-  --udex-link-focus-text-decoration: underline;
   --udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);
   --udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);
   --udex-link-emphasized-text-decoration: none;
@@ -21,6 +17,10 @@
   --udex-link-focus-background-color: transparent;
   --udex-link-focus-color: inherit;
   white-space: normal;
+  transition: color 300ms linear;
+  text-decoration: none;
+  --_udex-link-inline-underline-default-size: 100% 1px;
+  --_udex-link-inline-underline-hover-size: 0% 1px;
 }
 
 :host([desktop]:hover:not(:active):focus-within),
@@ -55,6 +55,7 @@
 
 :host([design="Subtle"]) {
   color: var(--udex-link-subtle-color);
+  text-decoration: none;
 }
 
 :host([design="Subtle"][focused]),
@@ -71,7 +72,7 @@
 }
 
 :host([design="Subtle"]) .ui5-link-root:hover {
-  text-decoration: var(--udex-link-hover-text-decoration);
+  text-decoration: none;
 }
 
 .ui5-link-root {
@@ -103,7 +104,7 @@
 }
 
 .ui5-link-root slot {
-  text-decoration: var(--udex-link-text-decoration);
+  text-decoration: none;
   display: inline;
 }
 
@@ -126,7 +127,7 @@
 }
 
 :host(:hover) slot {
-  text-decoration: var(--udex-link-hover-text-decoration);
+  text-decoration: none;
 }
 
 [ui5-icon] {
@@ -136,7 +137,7 @@
 
 :host([desktop]:hover:active),
 :host([desktop]:active) {
-  text-decoration: var(--udex-link-focus-text-decoration);
+  text-decoration: none;
 }
 
 :host .ui5-link-root {
@@ -170,15 +171,133 @@
   color: var(--udex-link-focus-color);
 }
 
+/* Override UI5 base focus text-decoration — gradient underline handles focus styling */
+:host(:not([desktop])) .ui5-link-root:focus-visible,
+:host([desktop]:focus-within),
+:host([design="Subtle"][desktop]:focus-within) {
+  text-decoration: none;
+}
+
 .ui5-link-icon {
   margin-inline-end: 0;
   padding-inline-end: var(--udexSpacer4, 4px);
   float: none;
   vertical-align: calc(0.5cap - (var(--udex-link-icon-height) / 2));
+  transition: transform 300ms linear;
 }
 
 .ui5-link-end-icon {
   margin-inline-start: calc(var(--udexSpacer20)* -1);;
   padding-inline-start: var(--udexSpacer4, 4px);
   vertical-align: calc(0.5cap - (var(--udex-link-icon-height) / 2));
+  transition: transform 300ms linear;
+}
+
+/* Inline links (no icon, not emphasized): underline visible by default, disappears on hover */
+:host(:not([icon]):not([end-icon]):not([design="Emphasized"])) .ui5-link-text {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: var(--_udex-link-inline-underline-default-size);
+  background-repeat: no-repeat;
+  background-position: 100% 100%;
+  transition: background-size 300ms linear;
+}
+
+:host(:not([icon]):not([end-icon]):not([design="Emphasized"]):dir(rtl)) .ui5-link-text {
+  background-position: 0% 100%;
+}
+
+:host(:not([icon]):not([end-icon]):not([design="Emphasized"]):hover) .ui5-link-text {
+  background-size: var(--_udex-link-inline-underline-hover-size);
+}
+
+/* Standalone link (with icon) animated underline */
+:host([icon]) .ui5-link-text,
+:host([end-icon]) .ui5-link-text {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: var(--_udex-link-icon-underline-default-size, 0% 1px);
+  background-repeat: no-repeat;
+  background-position: 0% 100%;
+  transition: background-size 300ms linear;
+}
+
+:host([icon]:dir(rtl)) .ui5-link-text,
+:host([end-icon]:dir(rtl)) .ui5-link-text {
+  background-position: 100% 100%;
+}
+
+:host([icon]:hover) .ui5-link-text,
+:host([end-icon]:hover) .ui5-link-text {
+  background-size: var(--_udex-link-icon-underline-hover-size, 100% 1px);
+}
+
+/* Remove native text-decoration on hover for standalone links (replaced by background-image underline) */
+:host([icon]:hover) slot,
+:host([end-icon]:hover) slot {
+  text-decoration: none;
+}
+
+/* Standalone link icon hover animations */
+:host([icon]:hover) .ui5-link-icon {
+  transform: var(--_udex-link-icon-hover-transform, translateX(-4px));
+}
+
+:host([end-icon]:hover) .ui5-link-end-icon {
+  transform: var(--_udex-link-end-icon-hover-transform, translateX(4px));
+}
+
+:host([icon]:dir(rtl):hover) .ui5-link-icon {
+  transform: var(--_udex-link-icon-hover-transform-rtl, translateX(4px));
+}
+
+:host([end-icon]:dir(rtl):hover) .ui5-link-end-icon {
+  transform: var(--_udex-link-end-icon-hover-transform-rtl, translateX(-4px));
+}
+
+/* Focused + hovered: separate variables so consumers can suppress animation without
+   touching the plain-hover transform (defaults fall through to the hover variables) */
+:host([icon]:hover) a.ui5-link-root:is(:focus, :focus-within, :focus-visible) .ui5-link-icon {
+  transform: var(--_udex-link-icon-focused-hover-transform, var(--_udex-link-icon-hover-transform, translateX(-4px)));
+}
+
+:host([end-icon]:hover) a.ui5-link-root:is(:focus, :focus-within, :focus-visible) .ui5-link-end-icon {
+  transform: var(--_udex-link-end-icon-focused-hover-transform, var(--_udex-link-end-icon-hover-transform, translateX(4px)));
+}
+
+:host([icon]:dir(rtl):hover) a.ui5-link-root:is(:focus, :focus-within, :focus-visible) .ui5-link-icon {
+  transform: var(--_udex-link-icon-focused-hover-transform-rtl, var(--_udex-link-icon-hover-transform-rtl, translateX(4px)));
+}
+
+:host([end-icon]:dir(rtl):hover) a.ui5-link-root:is(:focus, :focus-within, :focus-visible) .ui5-link-end-icon {
+  transform: var(--_udex-link-end-icon-focused-hover-transform-rtl, var(--_udex-link-end-icon-hover-transform-rtl, translateX(-4px)));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    transition: none;
+  }
+
+  :host(:not([icon]):not([end-icon]):not([design="Emphasized"])) .ui5-link-text {
+    transition: none;
+  }
+
+  :host(:not([icon]):not([end-icon]):not([design="Emphasized"]):hover) .ui5-link-text {
+    background-size: var(--_udex-link-inline-underline-default-size);
+  }
+
+  :host([icon]) .ui5-link-text,
+  :host([end-icon]) .ui5-link-text {
+    transition: none;
+  }
+
+  .ui5-link-icon,
+  .ui5-link-end-icon {
+    transition: none;
+  }
+
+  :host([icon]:hover) .ui5-link-icon,
+  :host([end-icon]:hover) .ui5-link-end-icon,
+  :host([icon]:dir(rtl):hover) .ui5-link-icon,
+  :host([end-icon]:dir(rtl):hover) .ui5-link-end-icon {
+    transform: none;
+  }
 }

package/src/themes/ListGroupHeader.css

@@ -189,11 +189,14 @@
 }
 
 /* Group header ring via [part="group-item"]: use ::after to avoid conflicting
-   with the [selected]::before left accent bar on the inner list item. */
-:host(._udex-active-descendant) [part="group-item"] {
+   with the [selected]::before left accent bar on the inner list item.
+   Exclude .udex-list__group-content elements: those are the single-select
+   collapsible divs that already get a ::before ring, so omitting :not()
+   here would produce double concentric rings on the same element. */
+:host(._udex-active-descendant) [part="group-item"]:not(.udex-list__group-content) {
   position: relative;
 }
-:host(._udex-active-descendant) [part="group-item"]:after {
+:host(._udex-active-descendant) [part="group-item"]:not(.udex-list__group-content):after {
   content: '';
   position: absolute;
   inset: 4px;

package/src/themes/ListItem.css

@@ -30,7 +30,7 @@
   --udex-list-item-outline-border-color: var(--udexColorBlue10, #002A86);
   --udex-list-item-disabled-opacity: var(--sapContent_DisabledOpacity, 0.4);
   --udex-list-item-additional-text-font-weight: 400;
-
+  --udex-list-item-flag-border-color: var(--udexColorGrey2, #EAECEE);
 
   background: var(--udex-list-item-background-default);
   color: var(--udex-list-item-color-default);
@@ -174,7 +174,7 @@
   top: 0;
   right: 12px;
   left: 0;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   border-radius: var(--udexRadiusM, 8px) 0 0;
 }
 
@@ -311,6 +311,14 @@
   transform: translate(0, -50%);
 }
 
+.udex-list__flag:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1px solid var(--udex-list-item-flag-border-color);
+}
+
 .hidden {
   display: none;
 }

package/src/themes/MastheadCountrySelector.css

@@ -137,7 +137,7 @@
   right: 0;
   bottom: 0;
   height: 40px;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
 }
 

package/src/themes/MastheadItem.css

@@ -28,7 +28,7 @@
   --udex-masthead-item-dropdown-position: absolute;
   --udex-masthead-item-dropdown-mobile-height: var(--udex-masthead-shell-mobile-menu-height, 100%);
   --udex-masthead-item-dropdown-box-shadow-mobile: none;
-  --udex-masthead-item-dropdown-zindex: 100;
+  --udex-masthead-item-dropdown-zindex: var(--udexZIndex100, 100);
   --udex-masthead-item-button-icon-size: 32px;
   --udex-masthead-item-arrow-icon-size: 16px;
   --udex-masthead-item-arrow-margin-inline-start: var(--udexSpacer4);

package/src/themes/MastheadProfileMenu.css

@@ -167,7 +167,7 @@
   right: 0;
   bottom: 0;
   height: 40px;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
 }
 

package/src/themes/MastheadShell.css

@@ -248,7 +248,7 @@
   top: 0;
   bottom: 0;
   right: 0;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 :host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl) {

package/src/themes/MediaPlayer.css

@@ -586,7 +586,7 @@ body.vjs-pip-window .video-js {
   font-size: 1.2em;
   line-height: 1.5;
   padding: 20px 24px;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .vjs-menu-button {
@@ -965,7 +965,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   position: absolute;
   right: -4px;
   line-height: 8px;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   height: 8px;
   width: 8px;
   background-color: #fff;
@@ -985,7 +985,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   height: 0.9em;
   pointer-events: none;
   line-height: 0.15em;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .video-js .vjs-load-progress {
@@ -1008,7 +1008,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   position: absolute;
   top: -3.4em;
   visibility: hidden;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .video-js .vjs-progress-control:hover .vjs-time-tooltip,
@@ -1028,7 +1028,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   width: 1px;
   height: 100%;
   background-color: #000;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .video-js .vjs-progress-control:hover .vjs-mouse-display {
@@ -1160,7 +1160,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
 .video-js .vjs-volume-level:before {
   position: absolute;
   font-size: 0.9em;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .vjs-slider-vertical .vjs-volume-level {
@@ -1169,7 +1169,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
 .vjs-slider-vertical .vjs-volume-level:before {
   top: -0.5em;
   left: -0.3em;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .vjs-svg-icons-enabled .vjs-volume-level:before {
@@ -1181,7 +1181,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   width: 0.9em;
   height: 0.9em;
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .vjs-slider-horizontal .vjs-volume-level {
@@ -1238,7 +1238,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   position: absolute;
   top: -3.4em;
   visibility: hidden;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .video-js .vjs-volume-control:hover .vjs-volume-tooltip,
@@ -1264,7 +1264,7 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   width: 100%;
   height: 1px;
   background-color: #000;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .video-js .vjs-volume-horizontal .vjs-mouse-display {

package/src/themes/Modal.css

@@ -7,11 +7,13 @@
   --udex-modal-and-overlay-modal-header-padding-vertical: var(--udexGridXSMargins, 24px);
   --udex-modal-border-radius: 20px;
 	--udex-modal-browser-scrollbar-border-radius: var(--udexRadiusM, 8px);
-  --udex-modal-block-layer-background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+  --udex-modal-block-layer-background: var(--udexColorNeutralBlack, #000);
+  --udex-modal-block-layer-background-opacity: 50%;
 }
 
-:host .ui5-block-layer {
-  background: var(--udex-modal-block-layer-background);
+:host::backdrop {
+    background-color: var(--udex-modal-block-layer-background);
+    opacity: var(--udex-modal-block-layer-background-opacity);
 }
 
 :host .ui5-popup-root .ui5-popup-footer-root {

package/src/themes/PhoneNumberField.css

@@ -43,11 +43,13 @@
   --udex-phone-number-field-button-margins-horizontal: -12px 8px;
   --udex-phone-number-field-radius: var(--udexRadiusXS, 4px);
   --udex-phone-number-field-flag-background: var(--udexColorGrey4, #A9B4BE);
-  --udex-phone-number-field-flag-width: 28px;
-  --udex-phone-number-field-flag-height: 18px;
+  --udex-phone-number-field-flag-width: 30px;
+  --udex-phone-number-field-flag-height: 20px;
   --udex-phone-number-field-button-border: var(--udexColorGrey4, #A9B4BE);
   --udex-phone-number-field-button-color-tertiary-standard-hover-border: var(--udexColorGrey4, #A9B4BE);
   --udex-phone-number-field-max-width: 100%;
+  --udex-phone-number-field-flag-border-color: var(--udexColorGrey2, #EAECEE);
+
   display: block;
   font-family: var(--sapFontFamily, sans-serif);
   font-size: var(--sapFontSize, 16px);
@@ -69,7 +71,7 @@
 :host(:not([_is-touched])[active]) .udex-phone-number-field:before {
   content:"";
   position:absolute;
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
   inset: -5px;
   border: 2px solid var(--udexColorBlue10);
   border-radius: var(--udexRadiusS, 6px);
@@ -127,7 +129,7 @@
 .udex-phone-number-field__open-button[focused]:not([active])::part(button):after,
 .udex-phone-number-field__open-button[focused][active]::part(button):before {
   inset: 3px;
-  border-radius: 4px;
+  border-radius: var(--udexRadiusXS, 4px);
 }
 
 .udex-phone-number-field__open-button::part(button) {
@@ -193,8 +195,7 @@
 }
 
 .udex-phone-number-field udex-list-item::part(item) {
-  padding-top: var(--udexSpacer12, 12px);
-  padding-bottom: var(--udexSpacer12, 12px);
+  padding: var(--udexSpacer12, 12px);
 }
 
 .udex-phone-number-field__dropdown-list-item {
@@ -337,6 +338,15 @@
   height: var(--udex-phone-number-field-flag-height);
   min-width: var(--udex-phone-number-field-flag-width);
   margin-right: var(--udexSpacer6, 6px);
+  position: relative;
+}
+
+.udex-phone-number-field__flag:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1px solid var(--udex-phone-number-field-flag-border-color);
 }
 
 .udex-phone-number-field__dropdown-list-item .udex-phone-number-field__flag {

package/src/themes/Search.css

@@ -72,14 +72,14 @@
 :host([mode="Home Search"]) .udex-search__root.udex-search-prefix {
   --udex-input-radius: var(--udexRadiusXXL, 24px);
   position: relative;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 :host([mode="Home Search"]) .udex-search__root.udex-search-prefix {
   display: flex;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 :host([mode="Home Search"]) .udex-search-prefix .udex-search__prefix + .udex-search__container {
@@ -96,7 +96,7 @@
 :host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover-top::after{
   content: '';
   position: absolute;
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
   height: 23px;
   inset-inline: 0;
   inset-block-end: 0;
@@ -139,7 +139,7 @@
   display: flex;
   align-items: center;
   position: relative;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   border: 1px solid var(--udex-input-color-border);
   border-radius: var(--udex-input-radius);
   background-color: field;
@@ -166,7 +166,7 @@
 }
 
 :host([mode="Home Search"]:not([_is-touched])[active]) .udex-search__root:before {
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
 }
 
 .udex-search__field {
@@ -268,7 +268,7 @@ input[type="search"]::-webkit-search-results-decoration {
   height: var(--udex-button-non-interactive-icon-size);
   border-radius: 50%;
   position: relative;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   overflow: visible;
 }
 
@@ -280,7 +280,7 @@ input[type="search"]::-webkit-search-results-decoration {
   height: var(--udex-button-size);
   border-radius: 50%;
   position: relative;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   overflow: visible;
 }
 
@@ -354,14 +354,14 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .udex-search__prefix {
   position: relative;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 .udex-search__prefix--show-popover::after,
 .udex-search__prefix--show-popover-top::after {
   content: "";
   position: absolute;
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
   height: 50%;
   width: 50px;
   inset-inline-start: 0;

package/src/themes/SecondaryNavigationItem.css

@@ -170,7 +170,7 @@
     white-space: normal;
     min-height: var(--udex-secondary-navigation-item-title-min-height);
     width: 100%;
-    z-index: 1;
+    z-index: var(--udexZIndex1, 1);
     display: flex;
     align-items: center;
     height: fit-content;

package/src/themes/SelectBase.css

@@ -136,7 +136,7 @@
   border-color: transparent;
   border-radius: var(--udexRadiusXS);
   padding: var(--udexSpacer4);
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   height: 42px;
   width: 42px;
   min-width: 42px;
@@ -165,7 +165,7 @@
   overflow: hidden;
   padding: var(--udexSpacer8) 0;
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/src/themes/StepInput.css

@@ -132,6 +132,6 @@
 
 .hidden {
     position: absolute;
-    z-index: -1;
+    z-index: var(--udexZIndexNegative, -1);
     color: transparent;
 }

package/src/themes/TabInOverflow.css

@@ -55,7 +55,7 @@
 .udex-tab-overflow__button-icon {
   margin-inline-end: var(--udexSpacer8);
   position: relative;
-  z-index: 0;
+  z-index: var(--udexZIndex0, 0);
 }
 
 .udex-tab-overflow__button-badge {
@@ -73,7 +73,7 @@
   margin-block-start: 0;
   margin-inline-start: 0;
   position: absolute;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   inset-block-start: -4px;
   inset-inline-end: -6px;
 }

package/src/themes/TabNavigation.css

@@ -138,7 +138,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
   border-bottom: 1px solid var(--udexColorGrey3, #D5DADD);
 }
 
@@ -161,7 +161,7 @@
 .udex-tab-navigation__button-tab {
   padding: var(--udex-button-tab-padding-vertical) var(--udex-button-tab-padding-horizontal) calc(var(--udex-button-tab-padding-vertical) + 3px);
   position: relative;
-  z-index: 0;
+  z-index: var(--udexZIndex0, 0);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -222,7 +222,7 @@
   position: absolute;
   inset-block-end: 0;
   inset-inline: 0 0;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   height: 3px;
   background-color: var(--udex-button-tab-border-color-active);
   border-radius: 2px 2px 0 0;
@@ -232,7 +232,7 @@
   position: absolute;
   inset-block-start: var(--udexSpacer12);
   inset-inline-end: -6px;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   width: 6px;
   height: 6px;
   border: 1px solid #fff;
@@ -265,7 +265,7 @@
   color: var(--udex-button-tab-with-icon-color);
   box-shadow: inset 0 0 0 1px var(--udex-button-tab-with-icon-border-color);
   position: relative;
-  z-index: 0;
+  z-index: var(--udexZIndex0, 0);
 }
 
 .udex-tab-navigation__button-icon {
@@ -431,7 +431,7 @@
   position: absolute;
   inset-inline-start: -1px;
   inset-block: 0;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   width: 3px;
   height: 100%;
   background-color: var(--udex-button-tab-border-color-active);
@@ -459,7 +459,7 @@
   position: absolute;
   inset-inline-start: -1px;
   inset-block: 0;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   width: 3px;
   height: 100%;
   background-color: var(--udex-button-tab-border-color-active);

package/src/themes/TableCellBase.css

@@ -15,7 +15,7 @@
 :host([_sticky]) {
   position: sticky;
   left: 0;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
 }
 
 :host([_sticky]:dir(rtl)) {

package/src/themes/TagGroup.css

@@ -63,7 +63,7 @@
   width: 4px;
   height: 4px;
   border-radius: 50%;
-  z-index: 1;
+  z-index: var(--udexZIndex1, 1);
   background: var(--udexColorGrey9, #223548);
 }
 

package/src/themes/TextArea.css

@@ -115,7 +115,7 @@
 :host(:not([_is-touched])[active]) .udex-textarea__wrapper:before {
   content:"";
   position:absolute;
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
   inset: -5px;
   border: 2px solid var(--udexColorBlue10);
   border-radius: var(--udexRadiusS, 6px);

package/src/themes/TextField.css

@@ -87,7 +87,7 @@
 :host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before {
   content:"";
   position:absolute;
-  z-index: -1;
+  z-index: var(--udexZIndexNegative, -1);
   inset: -5px;
   border: 2px solid var(--udexColorBlue10);
   border-radius: var(--udexRadiusS, 6px);