@sapudex/web-components 0.111.0

package/src/themes/Carousel.css

@@ -0,0 +1,56 @@
+:host {
+  --sapElement_BorderWidth: 0;
+}
+
+.udex-carousel {
+  position: relative;
+}
+
+.udex-carousel__navigation--bottom {
+  padding-bottom: 6px;
+}
+
+.udex-carousel__navigation--bottom ui5-carousel::part(content) {
+  padding-bottom: 7px;
+}
+
+:host([hide-page-indicator]) .udex-carousel__navigation--bottom,
+:host([hide-page-indicator]) .udex-carousel__navigation--bottom ui5-carousel::part(content) {
+  padding-bottom: 0;
+}
+
+.udex-carousel__navigation-wrapper {
+  height: 3.5rem;
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.udex-carousel__navigation--top .udex-carousel__navigation-wrapper {
+  justify-content: end;
+  margin-bottom: 10px;
+}
+
+.udex-carousel__navigation--bottom .udex-carousel__navigation-wrapper {
+  justify-content: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+:host([hide-page-indicator]) .udex-carousel__navigation--bottom .udex-carousel__navigation-wrapper {
+  position: static;
+}
+
+.udex-carousel__navigation--top .udex-carousel__navigation-button {
+  margin-inline-start: var(--udexSpacer16, 16px);
+}
+
+.udex-carousel__navigation--bottom .udex-carousel__navigation-button:first-child {
+  margin-inline-end: 4.7rem;
+}
+.udex-carousel__navigation--bottom .udex-carousel__navigation-button:last-child {
+  margin-inline-start: 4.7rem;
+}

package/src/themes/Checkbox.css

@@ -0,0 +1,16 @@
+:host([readonly]){
+    --sapField_TextColor: var(--sapField_ReadOnly_BorderColor);
+}
+
+
+:host([display-only])::part(icon) {
+  height: 24px;
+  width: 24px;
+}
+
+:host([readonly]) .ui5-checkbox-inner,
+:host([readonly][value-state="Warning"][value-state="Error"][value-state="Success"]) .ui5-checkbox-inner {
+  background: var(--sapField_ReadOnly_Background);
+  border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
+  color: var(--sapField_TextColor);
+}

package/src/themes/ControlButton.css

@@ -0,0 +1,232 @@
+:host {
+  --udex-control-button-font-weight: 500;
+  --udex-control-button-line-height: inherit;
+  --udex-control-button-small-padding: 4.5px; /* include 1px of border each side */
+  --udex-control-button-medium-padding: 6px; /* include 1px of border each side */
+  --udex-control-button-large-padding: 11px; /* include 1px of border each side */
+  --udex-control-button-with-text-small-padding: 4.5px; /* include 1px of border each side */
+  --udex-control-button-with-text-medium-padding: 6px; /* include 1px of border each side */
+  --udex-control-button-with-text-large-padding: 11px; /* include 1px of border each side */
+  --udex-control-button-small-height: 25px;
+  --udex-control-button-small-width: 25px;
+  --udex-control-button-medium-height: 32px;
+  --udex-control-button-medium-width: 32px;
+  --udex-control-button-large-height: 42px;
+  --udex-control-button-large-width: 42px;
+  --udex-control-button-small-icon-size: 14px;
+  --udex-control-button-medium-icon-size: 18px;
+  --udex-control-button-large-icon-size: 18px;
+  --udex-control-button-border-radius: var(--udexRadiusXS, 4px);
+  --udex-control-button-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-hover-color: var(--udexColorGrey7, var(--sapButton_Hover_TextColor));
+  --udex-control-button-hover-border-color: var(--sapButton_Neutral_Hover_BorderColor, var(--sapButton_Hover_BorderColor));
+  --udex-control-button-hover-background-color: var(--udexColorNeutralWhite, var(--sapButton_Hover_Background));
+  --udex-control-button-selected-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-selected-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-active-color: var(--udexColorBlue9, #0040B0);
+  --udex-control-button-active-border-color: var(--udexColorBlue4, #89D1FF);
+  --udex-control-button-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_BorderColor));
+  --udex-control-button-warning-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-warning-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-warning-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-error-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-error-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-error-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-success-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-success-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-success-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-warning-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_Attention_Background));
+  --udex-control-button-warning-active-border-color: var(--udexColorMango6, var(--sapButton_Attention_BorderColor));
+  --udex-control-button-warning-active-color: var(--udexColorMango9, var(--sapButton_Attention_TextColor));
+  --udex-control-button-error-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_Reject_Background));
+  --udex-control-button-error-active-border-color: var(--udexColorRed4, var(--sapButton_Attention_BorderColor));
+  --udex-control-button-error-active-color: var(--udexColorRed9, var(--sapButton_Attention_TextColor));
+  --udex-control-button-success-active-background-color: var(--udexColorNeutralWhite, var(--sapButton_Accept_Background));
+  --udex-control-button-success-active-border-color: var(--udexColorGreen6, var(--sapButton_Attention_BorderColor));
+  --udex-control-button-success-active-color: var(--udexColorGreen9, var(--sapButton_Attention_TextColor));
+  --udex-control-button-warning-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-warning-selected-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-warning-selected-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-error-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-error-selected-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-error-selected-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-success-selected-background-color: var(--udexColorNeutralWhite0, var(--sapButton_Background));
+  --udex-control-button-success-selected-border-color: var(--udexColorNeutralWhite0, var(--sapButton_BorderColor));
+  --udex-control-button-success-selected-color: var(--udexColorGrey7, var(--sapButton_TextColor));
+  --udex-control-button-readonly-icon-color: var(--udexColorGrey8, #354A5F);
+}
+
+:host([design="Default"]),
+:host{
+  background-color: var(--udex-control-button-background-color);
+  border-style: solid; 
+  border-color: var(--udex-control-button-border-color);
+  border-width: var(--sapButton_BorderWidth);
+  color: var(--udex-control-button-color);
+  border-radius: var(--udex-control-button-border-radius);
+  height: var(--udex-control-button-medium-height);
+  min-width: var(--udex-control-button-medium-width);
+  font-weight: var(--udex-control-button-font-weight);
+  line-height: var(--udex-control-button-line-height);
+}
+
+.ui5-button-root {
+  padding: var(--udex-control-button-with-text-medium-padding);
+}
+
+:host([has-icon]) .ui5-button-root {
+  padding: var(--udex-control-button-medium-padding);
+}
+
+:host([size="Large"]) {
+  height: var(--udex-control-button-large-height);
+  min-width: var(--udex-control-button-large-width);
+}
+
+:host([size="Medium"]) {
+  height: var(--udex-control-button-medium-height);
+  min-width: var(--udex-control-button-medium-width);
+}
+
+:host([size="Small"]) {
+  height: var(--udex-control-button-small-height);
+  min-width: var(--udex-control-button-small-width);
+}
+
+:host([size="Small"][has-icon]) .ui5-button-root {
+  padding: var(--udex-control-button-small-padding);
+}
+
+:host([size="Medium"][has-icon]) .ui5-button-root {
+  padding: var(--udex-control-button-medium-padding);
+}
+
+:host([size="Large"][has-icon]) .ui5-button-root {
+  padding: var(--udex-control-button-large-padding);
+}
+
+:host([size="Small"]) .ui5-button-root {
+  padding: var(--udex-control-button-with-text-small-padding);
+}
+
+:host([size="Medium"]) .ui5-button-root {
+  padding: var(--udex-control-button-with-text-medium-padding);
+}
+
+:host([size="Large"]) .ui5-button-root {
+  padding: var(--udex-control-button-with-text-large-padding);
+}
+
+:host([design="Success"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),  
+:host([design="Error"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),  
+:host([design="Warning"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover), 
+:host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover), :host(:not([hidden]):not([disabled]).ui5_hovered),
+:host([design="Default"][pressed]:hover), :host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+  background: var(--udex-control-button-hover-background-color);
+  border-color: var(--udex-control-button-hover-border-color);
+  border-width: var(--sapButton_BorderWidth);
+  color: var(--udex-control-button-hover-color);
+}
+
+.ui5-button-icon {
+  height: var(--udex-control-button-medium-icon-size);
+  width: var(--udex-control-button-medium-icon-size);
+}
+
+:host([size="Small"]) .ui5-button-icon {
+  height: var(--udex-control-button-small-icon-size);
+  width: var(--udex-control-button-small-icon-size);
+}
+
+:host([size="Large"]) .ui5-button-icon {
+  height: var(--udex-control-button-large-icon-size);
+  width: var(--udex-control-button-large-icon-size);
+}
+
+:host([pressed]), :host([design="Default"][pressed]),
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch])), 
+:host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background: var(--udex-control-button-selected-background-color);
+  border-color: var(--udex-control-button-selected-border-color);
+  border-width: var(--sapButton_BorderWidth);
+  color: var(--udex-control-button-selected-color);
+}
+
+:host([active]), :host([active][focused]), :host([active][pressed]), :host([design="Default"][active]), :host([design="Default"][pressed][active]):not([non-interactive]):not([_is-touch]), :host([design="Default"][active][focused]) {
+  color: var(--udex-control-button-active-color);
+  border-color: var(--udex-control-button-active-border-color);
+  background-color: var(--udex-control-button-active-background-color);
+}
+
+:host([design="Success"]) {
+  background-color: var(--udex-control-button-success-background-color);
+  border-color: var(--udex-control-button-success-border-color);
+  color: var(--udex-control-button-success-color);
+}
+
+:host([design="Error"]) {
+  background-color: var(--udex-control-button-error-background-color);
+  border-color: var(--udex-control-button-error-border-color);
+  color: var(--udex-control-button-error-color);
+}
+
+:host([design="Warning"]) {
+  background-color: var(--udex-control-button-warning-background-color);
+  border-color: var(--udex-control-button-warning-border-color);
+  color: var(--udex-control-button-warning-color);
+}
+
+:host([design="Success"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background-color: var(--udex-control-button-success-selected-background-color);
+  border-color: var(--udex-control-button-success-selected-border-color);
+  color: var(--udex-control-button-success-selected-color);
+}
+
+:host([design="Error"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background-color: var(--udex-control-button-error-selected-background-color);
+  border-color: var(--udex-control-button-error-selected-border-color);
+  color: var(--udex-control-button-error-selected-color);
+}
+
+:host([design="Warning"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+  background-color: var(--udex-control-button-warning-selected-background-color);
+  border-color: var(--udex-control-button-warning-selected-border-color);
+  color: var(--udex-control-button-warning-selected-color);
+}
+
+:host([design="Success"][active]) {
+  background-color: var(--udex-control-button-success-active-background-color);
+  border-color: var(--udex-control-button-success-active-border-color);
+  color: var(--udex-control-button-success-active-color);
+}
+
+:host([design="Error"][active]) {
+  background-color: var(--udex-control-button-error-active-background-color);
+  border-color: var(--udex-control-button-error-active-border-color);
+  color: var(--udex-control-button-error-active-color);
+}
+
+:host([design="Warning"][active]) {
+  background-color: var(--udex-control-button-warning-active-background-color);
+  border-color: var(--udex-control-button-warning-active-border-color);
+  color: var(--udex-control-button-warning-active-color);
+}
+
+:host([disabled]), :host([disabled][focused]), :host([disabled][pressed]), :host([design="Default"][disabled]), :host([design="Transparent"][disabled]), :host([design="Emphasized"][disabled]) { 
+  color: var(--udex-control-button-color);
+  border-color: transparent;
+  background-color: var(--udex-control-button-background-color);
+}
+
+:host([readonly]) {
+  color: var(--udex-control-button-readonly-icon-color);
+  pointer-events: none;
+}
+
+.ui5-button-text bdi {
+  display: flex;
+  align-items: center;
+}

package/src/themes/CountrySelector.css

@@ -0,0 +1,111 @@
+:host {
+  --udex-country-selector-flag-width: 30px;
+  --udex-country-selector-flag-height: 20px;
+  --udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, 0.4);
+}
+
+.udex-country-selector__text {
+  width: 100%;
+}
+
+.udex-country-selector__dropdown--hide-flag udex-list-item::part(item) {
+  padding-left: var(--udexSpacer12);
+  padding-right: var(--udexSpacer12);
+}
+
+.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger::after {
+  left: var(--udexSpacer12);
+  right: var(--udexSpacer32);
+}
+
+.udex-country-selector__trigger {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: max-content;
+}
+
+:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger {
+  cursor: pointer;
+}
+
+.udex-country-selector__trigger--disabled {
+  opacity: var(--udex-country-selector-input-disabled-opacity);
+}
+
+.udex-list::part(content) {
+  padding: 0;
+}
+
+.udex-country-selector__icon {
+  position: absolute;
+  right: 12px;
+}
+
+.udex-country-selector__icon:dir(rtl) {
+  right: auto;
+  left: 12px;
+}
+
+.udex-country-selector__icon {
+  pointer-events: none;
+}
+
+udex-dropdown[open] .udex-country-selector__icon {
+  transform: rotate(180deg)
+}
+
+.udex-country-selector__trigger::after {
+  content: attr(value);
+  position: absolute;
+  left: calc(24px + var(--udex-country-selector-flag-width));
+  right: 40px;
+  font-family: var(--sapFontFamily, sans-serif);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  line-height: var(--udexTypographyBodyLineHeight, 24px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+:dir(rtl) .udex-country-selector__trigger::after {
+  right: calc(24px + var(--udex-country-selector-flag-width));
+  left: 40px;
+}
+
+.udex-text-field__input {
+  inset-inline-start: var(--udexSpacer12);
+}
+
+udex-text-field::part(label) {
+  transform: translateY(-110%);
+  padding: 0 var(--udexSpacer4, 4px);
+  font-size: var(--udexTypographyBodyXXSFontSize, 12px);
+  line-height: 18px;
+  background: linear-gradient(transparent 55%, var(--sapField_Background) 45%);
+}
+
+.udex-country-selector-item__image, .udex-country-selector__image {
+  background-image: url("https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp");
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  z-index: 1;
+  width: var(--udex-country-selector-flag-width);
+  height: var(--udex-country-selector-flag-height);
+  inset-inline-start: var(--udexSpacer12);
+  inset-inline-end: 30px;
+  pointer-events: none;
+}
+
+udex-list-item::part(item) {
+  position: relative;
+  padding-inline-start: calc(24px + var(--udex-country-selector-flag-width));
+  padding-inline-end: var(--udexSpacer12, 12px);
+}
+
+udex-text-field[readonly]::part(label) {
+  background: linear-gradient(var(--sapField_Background) 65%, var(--sapField_ReadOnly_Background) 35%);
+}

package/src/themes/DatePicker.css

@@ -0,0 +1,25 @@
+:host {
+  --udex-date-picker-width: 354px;
+  position: relative;
+  font-family: var(--sapFontFamily);
+}
+
+.udex-date-picker__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.udex-date-picker__calendar {
+  min-width: var(--udex-date-picker-width, 354px);
+  background-color: var(--udexNeutralColorWhite, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px 0 #2236494D;
+  position: absolute;
+  top: 42px;
+  z-index: 100;
+}
+
+.udex-date-picker__input {
+  --udex-input-padding: 9px 48px 9px 12px;
+}
+

package/src/themes/DatePickerPopover.css

@@ -0,0 +1,3 @@
+.udex-date-picker__popover {
+  --udex-dropdown-border-width: 0;
+}

package/src/themes/Divider.css

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

package/src/themes/Dropdown.css

@@ -0,0 +1,55 @@
+:host {
+  --udex-dropdown-box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
+  --udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-dropdown-border-radius: var(--udexRadiusM, 8px);
+  --udex-dropdown-border-width: var(--sapElement_BorderWidth, 1px);
+  --udex-dropdown-default-background-color: var(--udexColorNeutralWhite, #fff);
+  --udex-dropdown-horizontal-distance: 0;
+  --udex-dropdown-vertical-distance: 0;
+  --udex-dropdown-pane-max-width: 640px;
+  --udex-dropdown-pane-min-width: 320px;
+  --udex-dropdown-pane-max-height: none;
+  --udex-dropdown-pane-overflow: visible;
+  --udex-dropdown-pane-content-overflow: auto;
+}
+
+.udex-dropdown__pane {
+  border: var(--udex-dropdown-border-width) solid var(--udex-dropdown-border-color-default);
+  box-shadow: var(--udex-dropdown-box-shadow);
+  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);
+  max-height: var(--udex-dropdown-pane-max-height);
+  margin: var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);
+  overflow: var(--udex-dropdown-pane-overflow);
+}
+
+.udex-dropdown__pane::part(content) {
+  padding: 0;
+  overflow: var(--udex-dropdown-pane-content-overflow);
+}
+
+.udex-dropdown__pane::part(header),
+.udex-dropdown__pane::part(footer) {
+  padding: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);
+}
+
+.udex-dropdown__pane::part(footer) {
+  justify-content: flex-start;
+  border-color: var(--udex-dropdown-border-color-default);
+  box-shadow: var(--udex-dropdown-box-shadow);
+}
+
+::slotted([slot="header"])  {
+  width: 100%;
+}
+
+::slotted(.udex-no-result){
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  color: var(--sapContent_TitleColor, #000000);
+  padding: 0 var(--udexSpacer16, 16px) var(--udexSpacer16, 16px);
+}

package/src/themes/FilterMenu.css

@@ -0,0 +1,136 @@
+:host {
+  --udex-filter-menu-trigger-color-default: var(--sapTextColor, #223548);
+  --udex-filter-menu-trigger-color-hover: var(--sapHoverColor, #0070f2);
+  --udex-filter-menu-trigger-color-active: var(--sapShell_Active_TextColor, #0040b0);
+  --udex-filter-menu-trigger-color-disabled: var(--sapTextColor, #223548);
+
+  --udex-filter-menu-trigger-icon-default: var(--sapContent_IconColor, #223548);
+  --udex-filter-menu-trigger-icon-hover: var(--sapHoverColor, #0070f2);
+  --udex-filter-menu-trigger-icon-active: var(--sapSelectedColor, #0040b0);
+  --udex-filter-menu-trigger-icon-disabled: var(--sapContent_IconColor, #223548);
+
+  --udex-filter-menu-trigger-prefix-color-default: var(--sapShell_NeutralColor, #475e75);
+  --udex-filter-menu-trigger-prefix-color-hover: var(--sapShell_NeutralColor, #475e75);
+  --udex-filter-menu-trigger-prefix-color-active: var(--sapShell_NeutralColor, #475e75);
+  --udex-filter-menu-trigger-prefix-color-disabled: var(--sapShell_NeutralColor, #475e75);
+
+  --udex-filter-menu-trigger-selection-bar-background: var(--sapHoverColor, #0070f2);
+  --udex-filter-menu-trigger-outline-border-color:  var(--udexColorBlue10, #002A86);
+}
+
+:host([desktop]) .udex-filter-menu__trigger:focus,
+.udex-filter-menu__trigger:focus-visible {
+  outline: 2px solid var(--udex-filter-menu-trigger-outline-border-color);
+  outline-offset: var(--udexSpacer2, 2px);
+  border-radius: var(--udexRadiusM, 8px);
+}
+
+.udex-filter-menu__trigger {
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 0;
+  position: relative;
+  background: none;
+  border: none;
+}
+
+.udex-filter-menu__trigger-wrap {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+
+.udex-filter-menu__trigger-wrap[disabled] {
+  pointer-events: none;
+}
+
+.udex-filter-menu__trigger-wrap[disabled]:hover .udex-filter-menu__trigger-name,
+.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-name {
+  color: var(--udex-filter-menu-trigger-color-disabled);
+  opacity: var(--sapContent_DisabledOpacity, 0.4);
+}
+
+.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-prefix {
+  color: var(--udex-filter-menu-trigger-prefix-color-disabled);
+}
+
+.udex-filter-menu__trigger-wrap[disabled]:hover .udex-filter-menu__trigger-icon,
+.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-icon {
+  color: var(--udex-filter-menu-trigger-icon-disabled);
+  opacity: var(--sapContent_DisabledOpacity, 0.4);
+}
+
+.udex-filter-menu__trigger-prefix {
+  margin-right: var(--udexSpacer8, 8px);
+  color: var(--udex-filter-menu-trigger-prefix-color-default);
+}
+
+.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-prefix{
+  color: var(--udex-filter-menu-trigger-prefix-color-hover);
+}
+
+.udex-filter-menu[open] .udex-filter-menu__trigger-prefix {
+  color: var(--udex-filter-menu-trigger-prefix-color-active);
+}
+
+.udex-filter-menu__trigger-name {
+  color: var(--udex-filter-menu-trigger-color-default);
+}
+
+.udex-filter-menu__trigger:before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  border-radius: 2px 2px 0;
+  background: var(--udex-filter-menu-trigger-selection-bar-background);
+  opacity: 0;
+}
+
+.udex-filter-menu[open] .udex-filter-menu__trigger:before {
+  opacity: 1;
+}
+
+.udex-filter-menu__trigger-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: var(--udexSpacer8, 8px);
+  color: var(--udex-filter-menu-trigger-icon-default);
+}
+
+.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-name{
+  color: var(--udex-filter-menu-trigger-color-hover);
+}
+
+.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-icon {
+  color: var(--udex-filter-menu-trigger-icon-hover);
+}
+
+.udex-filter-menu[open] .udex-filter-menu__trigger-icon {
+  transform: rotate(180deg);
+  color: var(--udex-filter-menu-trigger-icon-active);
+}
+
+.udex-filter-menu[open] .udex-filter-menu__trigger-name {
+  color: var(--udex-filter-menu-trigger-color-active);
+}
+
+.udex-filter-menu__search {
+  width: 100%;
+}
+
+.udex-filter-menu__footer {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+}
+
+.udex-filter-menu__badge {
+  margin-inline-start: var(--udexSpacer4, 4px);
+}