@sapudex/web-components 2.26.0 → 2.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/cypress/specs/TabNavigation.cy.tsx +1024 -0
  2. package/cypress/support/component-imports.src.ts +4 -0
  3. package/dist/Tab.d.ts +57 -0
  4. package/dist/Tab.js +67 -0
  5. package/dist/Tab.js.map +1 -1
  6. package/dist/TabNavigation.d.ts +25 -3
  7. package/dist/TabNavigation.js +96 -18
  8. package/dist/TabNavigation.js.map +1 -1
  9. package/dist/assets/{InputSuggestions-CG5owMFQ.js → InputSuggestions-Bm_0fOBQ.js} +1 -1
  10. package/dist/assets/{ListItemStandardExpandableTextTemplate-DpVr7qdn.js → ListItemStandardExpandableTextTemplate-CHXlUP-E.js} +1 -1
  11. package/dist/assets/{bundle.esm-CTkLMr6f.js → bundle.esm-D_SXCGNu.js} +218 -218
  12. package/dist/css/themes/RatingIndicator.css +1 -1
  13. package/dist/css/themes/Slider.css +1 -1
  14. package/dist/css/themes/TabNavigation.css +1 -1
  15. package/dist/custom-elements-internal.json +205 -154
  16. package/dist/custom-elements.json +186 -139
  17. package/dist/generated/templates/TabHeaderTemplate.lit.js +30 -11
  18. package/dist/generated/templates/TabHeaderTemplate.lit.js.map +1 -1
  19. package/dist/generated/templates/TabNavigationTemplate.lit.js +8 -6
  20. package/dist/generated/templates/TabNavigationTemplate.lit.js.map +1 -1
  21. package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
  22. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  23. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  24. package/dist/generated/themes/Slider.css.d.ts +1 -1
  25. package/dist/generated/themes/Slider.css.js +1 -1
  26. package/dist/generated/themes/Slider.css.js.map +1 -1
  27. package/dist/generated/themes/TabNavigation.css.d.ts +1 -1
  28. package/dist/generated/themes/TabNavigation.css.js +1 -1
  29. package/dist/generated/themes/TabNavigation.css.js.map +1 -1
  30. package/dist/vscode.html-custom-data.json +11 -1
  31. package/dist/web-types.json +29 -2
  32. package/package.json +1 -1
  33. package/src/Tab.ts +98 -0
  34. package/src/TabHeader.hbs +85 -33
  35. package/src/TabNavigation.hbs +16 -0
  36. package/src/TabNavigation.ts +109 -21
  37. package/src/generated/templates/TabHeaderTemplate.lit.ts +29 -10
  38. package/src/generated/templates/TabNavigationTemplate.lit.ts +8 -6
  39. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  40. package/src/generated/themes/Slider.css.ts +1 -1
  41. package/src/generated/themes/TabNavigation.css.ts +1 -1
  42. package/src/themes/TabNavigation.css +203 -1
@@ -1 +1 @@
1
- :host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-26-0_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px);padding:0;outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-sel,.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
1
+ :host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-27-0_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px);padding:0;outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-sel,.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
@@ -1 +1 @@
1
- :host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-26-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
1
+ :host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-27-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
@@ -1 +1 @@
1
- :host{--udex-header-background-color: transparent;--udex-button-tab-vertical-gap: var(--udexSpacer32, 32px);--udex-button-tab-text-transform-first-letter: uppercase;--udex-button-tab-text-transform: none;--udex-button-tab-text-color-default: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-text-color-hover: var(--udexColorBlue8);--udex-button-tab-text-color-active: var(--udexColorBlue8);--udex-button-tab-border-color-active: var(--udexColorBlue8);--udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));--udex-button-tab-font-family: var(--sapFontFamily, sans-serif);--udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));--udex-button-tab-line-height: 1.125;--udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);--udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);--udex-button-tab-with-icon-without-background-border-color-active: transparent;--udex-button-tab-with-icon-background: var(--sapList_SelectionBackgroundColor, var(--udexColorBlue1));--udex-button-tab-with-icon-background-hover: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-button-tab-with-icon-color: var(--sapAccentColor6, var(--udexColorBlue7));--udex-button-tab-with-icon-color-hover: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);--udex-button-tab-with-icon-background-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));--udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-without-background-margin-bottom: var(--udexSpacer16, 16px);--udex-button-tab-with-icon-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-tab-with-icon-text-color-active: var(--sapTextColor, --udexCoreNavigation);--udex-tab-navigation-tab-with-icon-without-background-color: transparent;--udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;--udex-button-more-margin-inline-end: 0;--udex-button-more-s-font-size: var(--udexTypographyNavigationMediumMFontSize, 14px);--udex-button-more-s-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-s-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-s-line-height: 1.07143;--udex-button-more-s-text-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-padding-vertical: var(--udexSpacer4, 4px);--udex-button-more-s-padding-horizontal: var(--udexSpacer8, 8px);--udex-button-more-s-border-color: var(--sapButton_Neutral_BorderColor, var(--udexColorGrey4));--udex-button-more-s-icon-margin-inline-start: var(--udexSpacer4, 4px);--udex-button-more-s-icon-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-border-color-toggled: var(--udexColorBlue4);--udex-button-more-s-text-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-s-icon-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-m-font-size: var(--sapFontSize, var(--udexTypographyNavigationMediumXLFontSize));--udex-button-more-m-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-m-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-m-line-height: 1.125;--udex-button-more-m-padding-vertical: var(--udexSpacer8, 8px);--udex-button-more-m-padding-horizontal: var(--udexSpacer12, 12px);--udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);--udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);--udex-tab-navigation-content-font-family: var(--sapFontFamily, sans-serif);--udex-tab-navigation-content-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-tab-navigation-content-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-navigation-content-line-height: var(--udexTypographyHeadingLineHeight, 1.1)}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer{margin-bottom:var(--udex-button-tab-with-icon-without-background-margin-bottom);background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color);color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active:before{background-color:var(--udex-button-tab-with-icon-without-background-border-color-active)}:host([mode="Dark"]){--udex-header-background-color: var(--sapList_GroupHeaderTextColor, var(--udexColorGrey10));--udex-button-tab-text-color-default: var(--sapList_GroupHeaderBackground, var(--udexColorNeutralWhite));--udex-button-tab-text-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-border-color-active: transparent;--udex-button-tab-with-icon-background: transparent;--udex-button-tab-with-icon-color: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-background-active: transparent;--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge,:host([icon-without-background]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-inline-end:-9px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer,:host([icon-without-background]) .udex-tab-navigation__button-icon{width:24px;height:24px}:host([icon-without-background]) .udex-tab-navigation__button-tab--with-icon{padding-block-end:var(--udex-button-tab-padding-vertical)}:host([icon-without-background]) .udex-tabs-navigation__button-tab{padding-bottom:var(--udex-button-tab-padding-vertical)}:host(:not([icon-without-background])) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{color:var(--udex-button-tab-with-icon-text-color-active)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer,:host([mode="Dark"]) .udex-tab-navigation__button-icon{width:32px;height:32px}:host([size-more-button="Medium"]) .udex-tab-navigation__button-more{padding:var(--udex-button-more-m-padding-vertical) var(--udex-button-more-m-padding-horizontal);height:34px;font-size:var(--udex-button-more-m-font-size);font-family:var(--udex-button-more-m-font-family);font-weight:var(--udex-button-more-m-font-weight);line-height:var(--udex-button-more-m-line-height)}:host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,.udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text{outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.udex-tab-navigation__root{width:100%}.udex-tab-navigation__header{background-color:var(--udex-header-background-color);min-height:43px;display:flex;align-items:center;position:relative}.udex-tab-navigation__header:before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;border-bottom:1px solid var(--udexColorGrey3, #D5DADD)}.udex-tab-navigation__header-tabs{display:flex;flex:1 1 0%;overflow:hidden;white-space:nowrap}.udex-tab-navigation__button-tab,.udex-tab-navigation__button-more{padding:0;display:block;background:none;border:0;border-radius:0;cursor:pointer}.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;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--udex-button-tab-text-color-default);font-size:var(--udex-button-tab-font-size-default);font-family:var(--udex-button-tab-font-family);font-weight:var(--udex-button-tab-font-weight);line-height:var(--udex-button-tab-line-height);text-decoration:none;text-align:center;text-transform:var(--udex-button-tab-text-transform);white-space:normal}.udex-tab-navigation__button-text{margin:0}.udex-tab-navigation__button-text:first-letter{text-transform:var(--udex-button-tab-text-transform-first-letter)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon{justify-content:start}.udex-tab-navigation__button-tab:not(.udex-tab-navigation__button-tab--icon-tab):hover{color:var(--udex-button-tab-text-color-hover)}.udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{font-weight:var(--udex-button-tab-with-icon-font-weight)}.udex-tab-navigation__button-tab:focus-visible{outline:none}.udex-tab-navigation__button-tab[hidden]{display:none}.udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:var(--udex-button-tab-vertical-gap)}.udex-tab-navigation__button-tab--with-icon{padding-block-end:calc(var(--udex-button-tab-padding-vertical) + 2px)}.udex-tab-navigation__button-tab--active{color:var(--udex-button-tab-text-color-active)}.udex-tab-navigation__button-tab--active:before{content:"";position:absolute;inset-block-end:0;inset-inline:0 0;z-index:1;height:3px;background-color:var(--udex-button-tab-border-color-active);border-radius:2px 2px 0 0}.udex-tab-navigation__button-badge{position:absolute;inset-block-start:var(--udexSpacer12);inset-inline-end:-6px;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}.udex-tab-navigation__button-more{margin-inline-start:auto;padding:var(--udex-button-more-s-padding-vertical) var(--udex-button-more-s-padding-horizontal);display:flex;align-items:center;flex:0 0 0;font-size:var(--udex-button-more-s-font-size);font-family:var(--udex-button-more-s-font-family);font-weight:var(--udex-button-more-s-font-weight);line-height:var(--udex-button-more-s-line-height);color:var(--udex-button-more-s-text-color);border:1px solid var(--udex-button-more-s-border-color);border-radius:var(--udexRadiusM, 8px);margin-inline-end:var(--udex-button-more-margin-inline-end)}:host([desktop]) .udex-tab-navigation__button-more:focus,.udex-tab-navigation__button-more:focus-visible{outline:2px solid var(--udex-button-tab-text-color-active);outline-offset:2px}.udex-tab-navigation__button-more[hidden]{display:none}.udex-tab-navigation__button-more--lg .udex-tab-navigation__button-more-icon{width:16px;height:16px}.udex-tab-navigation__button-more-icon{margin-inline-start:var(--udex-button-more-s-icon-margin-inline-start);width:14px;height:14px;color:var(--udex-button-more-s-icon-color)}.udex-tab-navigation__button-more--toggled{border-color:var(--udex-button-more-s-border-color-toggled);color:var(--udex-button-more-s-text-color-toggled)}.udex-tab-navigation__button-more--toggled .udex-tab-navigation__button-more-icon{color:var(--udex-button-more-s-icon-color-toggled)}.udex-tab-navigation__button-icon-outer{margin-left:auto;margin-right:auto;margin-bottom:var(--udex-button-tab-with-icon-margin-bottom);display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;border-radius:50%;background-color:var(--udex-button-tab-with-icon-background);color:var(--udex-button-tab-with-icon-color);position:relative;z-index:0}.udex-tab-navigation__button-icon{width:16px;height:16px;color:var(--udex-button-tab-with-icon-color)}.udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-block-start:1px;inset-inline-end:1px}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-active)}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-active)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-hover)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-hover)}.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-desktop);font-family:var(--udex-tab-navigation-content-font-family);font-size:var(--udex-tab-navigation-content-font-size);font-weight:var(--udex-tab-navigation-content-font-weight);line-height:var(--udex-tab-navigation-content-line-height)}.udex-tab-navigation__content-item:focus,.udex-tab-navigation__content-item:focus-visible{outline-offset:2px;outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.hidden{display:none}.udex-tab-navigation__badge{margin-inline-start:var(--udexSpacer4);display:inline-flex}@media screen and (max-width: 979px){.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-mobile)}}
1
+ :host{--udex-header-background-color: transparent;--udex-button-tab-vertical-gap: var(--udexSpacer32, 32px);--udex-button-tab-text-transform-first-letter: uppercase;--udex-button-tab-text-transform: none;--udex-button-tab-text-color-default: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-text-color-hover: var(--udexColorBlue8);--udex-button-tab-text-color-active: var(--udexColorBlue8);--udex-button-tab-border-color-active: var(--udexColorBlue8);--udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));--udex-button-tab-font-family: var(--sapFontFamily, sans-serif);--udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));--udex-button-tab-line-height: 1.125;--udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);--udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);--udex-button-tab-with-icon-without-background-border-color-active: transparent;--udex-button-tab-with-icon-background: var(--sapList_SelectionBackgroundColor, var(--udexColorBlue1));--udex-button-tab-with-icon-background-hover: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-button-tab-with-icon-color: var(--sapAccentColor6, var(--udexColorBlue7));--udex-button-tab-with-icon-color-hover: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);--udex-button-tab-with-icon-background-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));--udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));--udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));--udex-button-tab-with-icon-without-background-margin-bottom: var(--udexSpacer16, 16px);--udex-button-tab-with-icon-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-tab-with-icon-text-color-active: var(--sapTextColor, --udexCoreNavigation);--udex-tab-navigation-tab-with-icon-without-background-color: transparent;--udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;--udex-button-more-margin-inline-end: 0;--udex-button-more-s-font-size: var(--udexTypographyNavigationMediumMFontSize, 14px);--udex-button-more-s-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-s-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-s-line-height: 1.07143;--udex-button-more-s-text-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-padding-vertical: var(--udexSpacer4, 4px);--udex-button-more-s-padding-horizontal: var(--udexSpacer8, 8px);--udex-button-more-s-border-color: var(--sapButton_Neutral_BorderColor, var(--udexColorGrey4));--udex-button-more-s-icon-margin-inline-start: var(--udexSpacer4, 4px);--udex-button-more-s-icon-color: var(--sapTextColor, var(--udexColorGrey9));--udex-button-more-s-border-color-toggled: var(--udexColorBlue4);--udex-button-more-s-text-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-s-icon-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));--udex-button-more-m-font-size: var(--sapFontSize, var(--udexTypographyNavigationMediumXLFontSize));--udex-button-more-m-font-family: var(--sapFontFamily, sans-serif);--udex-button-more-m-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-button-more-m-line-height: 1.125;--udex-button-more-m-padding-vertical: var(--udexSpacer8, 8px);--udex-button-more-m-padding-horizontal: var(--udexSpacer12, 12px);--udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);--udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);--udex-tab-navigation-content-font-family: var(--sapFontFamily, sans-serif);--udex-tab-navigation-content-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-tab-navigation-content-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-navigation-content-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-tab-header-width: 428px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer{margin-bottom:var(--udex-button-tab-with-icon-without-background-margin-bottom);background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color);color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-tab-navigation-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-without-background-color-active)}:host([icon-without-background]) .udex-tab-navigation__button-tab--active:before{background-color:var(--udex-button-tab-with-icon-without-background-border-color-active)}:host([mode="Dark"]){--udex-header-background-color: var(--sapList_GroupHeaderTextColor, var(--udexColorGrey10));--udex-button-tab-text-color-default: var(--sapList_GroupHeaderBackground, var(--udexColorNeutralWhite));--udex-button-tab-text-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-border-color-active: transparent;--udex-button-tab-with-icon-background: transparent;--udex-button-tab-with-icon-color: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-color-active: var(--sapProgress_InformationBorderColor, var(--udexColorBlue3));--udex-button-tab-with-icon-background-active: transparent;--udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge,:host([icon-without-background]) .udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-inline-end:-9px}:host([icon-without-background]) .udex-tab-navigation__button-icon-outer,:host([icon-without-background]) .udex-tab-navigation__button-icon{width:24px;height:24px}:host([icon-without-background]) .udex-tab-navigation__button-tab--with-icon{padding-block-end:var(--udex-button-tab-padding-vertical)}:host([icon-without-background]) .udex-tabs-navigation__button-tab{padding-bottom:var(--udex-button-tab-padding-vertical)}:host(:not([icon-without-background])) .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{color:var(--udex-button-tab-with-icon-text-color-active)}:host([mode="Dark"]) .udex-tab-navigation__button-icon-outer,:host([mode="Dark"]) .udex-tab-navigation__button-icon{width:32px;height:32px}:host([size-more-button="Medium"]) .udex-tab-navigation__button-more{padding:var(--udex-button-more-m-padding-vertical) var(--udex-button-more-m-padding-horizontal);height:34px;font-size:var(--udex-button-more-m-font-size);font-family:var(--udex-button-more-m-font-family);font-weight:var(--udex-button-more-m-font-weight);line-height:var(--udex-button-more-m-line-height)}:host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,.udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text{outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.udex-tab-navigation__root{width:100%}.udex-tab-navigation__header{background-color:var(--udex-header-background-color);min-height:43px;display:flex;align-items:center;position:relative}.udex-tab-navigation__header:before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;border-bottom:1px solid var(--udexColorGrey3, #D5DADD)}.udex-tab-navigation__header-tabs{display:flex;flex:1 1 0%;overflow:hidden;white-space:nowrap}.udex-tab-navigation__button-tab,.udex-tab-navigation__button-more{padding:0;display:block;background:none;border:0;border-radius:0;cursor:pointer}.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;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--udex-button-tab-text-color-default);font-size:var(--udex-button-tab-font-size-default);font-family:var(--udex-button-tab-font-family);font-weight:var(--udex-button-tab-font-weight);line-height:var(--udex-button-tab-line-height);text-decoration:none;text-align:center;text-transform:var(--udex-button-tab-text-transform);white-space:normal}.udex-tab-navigation__button-text{margin:0}.udex-tab-navigation__button-text:first-letter{text-transform:var(--udex-button-tab-text-transform-first-letter)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon{justify-content:start}.udex-tab-navigation__button-tab:not(.udex-tab-navigation__button-tab--icon-tab):hover{color:var(--udex-button-tab-text-color-hover)}.udex-tab-navigation__button-text.udex-tab-navigation__button-text--icon{font-weight:var(--udex-button-tab-with-icon-font-weight)}.udex-tab-navigation__button-tab:focus-visible{outline:none}.udex-tab-navigation__button-tab[hidden]{display:none}.udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:var(--udex-button-tab-vertical-gap)}.udex-tab-navigation__button-tab--with-icon{padding-block-end:calc(var(--udex-button-tab-padding-vertical) + 2px)}.udex-tab-navigation__button-tab--active{color:var(--udex-button-tab-text-color-active)}.udex-tab-navigation__button-tab--active:before{content:"";position:absolute;inset-block-end:0;inset-inline:0 0;z-index:1;height:3px;background-color:var(--udex-button-tab-border-color-active);border-radius:2px 2px 0 0}.udex-tab-navigation__button-badge{position:absolute;inset-block-start:var(--udexSpacer12);inset-inline-end:-6px;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}.udex-tab-navigation__button-more{margin-inline-start:auto;padding:var(--udex-button-more-s-padding-vertical) var(--udex-button-more-s-padding-horizontal);display:flex;align-items:center;flex:0 0 0;font-size:var(--udex-button-more-s-font-size);font-family:var(--udex-button-more-s-font-family);font-weight:var(--udex-button-more-s-font-weight);line-height:var(--udex-button-more-s-line-height);color:var(--udex-button-more-s-text-color);border:1px solid var(--udex-button-more-s-border-color);border-radius:var(--udexRadiusM, 8px);margin-inline-end:var(--udex-button-more-margin-inline-end)}:host([desktop]) .udex-tab-navigation__button-more:focus,.udex-tab-navigation__button-more:focus-visible{outline:2px solid var(--udex-button-tab-text-color-active);outline-offset:2px}.udex-tab-navigation__button-more[hidden]{display:none}.udex-tab-navigation__button-more--lg .udex-tab-navigation__button-more-icon{width:16px;height:16px}.udex-tab-navigation__button-more-icon{margin-inline-start:var(--udex-button-more-s-icon-margin-inline-start);width:14px;height:14px;color:var(--udex-button-more-s-icon-color)}.udex-tab-navigation__button-more--toggled{border-color:var(--udex-button-more-s-border-color-toggled);color:var(--udex-button-more-s-text-color-toggled)}.udex-tab-navigation__button-more--toggled .udex-tab-navigation__button-more-icon{color:var(--udex-button-more-s-icon-color-toggled)}.udex-tab-navigation__button-icon-outer{margin-left:auto;margin-right:auto;margin-bottom:var(--udex-button-tab-with-icon-margin-bottom);display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;border-radius:50%;background-color:var(--udex-button-tab-with-icon-background);color:var(--udex-button-tab-with-icon-color);position:relative;z-index:0}.udex-tab-navigation__button-icon{width:16px;height:16px;color:var(--udex-button-tab-with-icon-color)}.udex-tab-navigation__button-icon-outer .udex-tab-navigation__button-badge{inset-block-start:1px;inset-inline-end:1px}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-active)}.udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-active)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer{background-color:var(--udex-button-tab-with-icon-background-hover)}.udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon{color:var(--udex-button-tab-with-icon-color-hover)}.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-desktop);font-family:var(--udex-tab-navigation-content-font-family);font-size:var(--udex-tab-navigation-content-font-size);font-weight:var(--udex-tab-navigation-content-font-weight);line-height:var(--udex-tab-navigation-content-line-height)}.udex-tab-navigation__content-item:focus,.udex-tab-navigation__content-item:focus-visible{outline-offset:2px;outline:2px solid var(--udex-button-tab-text-color-active);border-radius:var(--udexRadiusXXS, 2px)}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.udex-tab-navigation__badge{margin-inline-start:var(--udexSpacer4);display:inline-flex}.udex-tab-navigation__button-body-text,.udex-tab-navigation__button-link{display:none}@media screen and (max-width: 979px){.udex-tab-navigation__content{padding-block-start:var(--udex-tab-navigation-content-padding-vertical-mobile)}:host([orientation="Vertical"]) .udex-tab-navigation__root{flex-direction:column}:host([orientation="Vertical"]) .udex-tab-navigation__header{flex:0 0 100%}:host([orientation="Vertical"]) .udex-tab-navigation__content{flex:0 0 100%;padding-inline-start:0}:host([orientation="Vertical"])>.udex-tab-navigation__root>.udex-tab-navigation__content{display:none}}:host([orientation="Vertical"]) .udex-tab-navigation__root{display:flex;gap:var(--udexSpacer24, 24px)}:host([orientation="Vertical"]) .udex-tab-navigation__header{flex-direction:column;align-items:stretch;min-height:auto;height:100%;flex:0 0 25%;width:100%;max-height:none}:host([orientation="Vertical"]) .udex-tab-navigation__header:before{display:none}:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs{flex-direction:column;gap:var(--udexSpacer32, 32px);overflow:visible;white-space:normal;max-height:none;border-inline-start:1px solid var(--udexColorGrey3, #D5DADD)}@media screen and (max-width: 979px){:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs{gap:var(--udexSpacer24, 24px)}:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-tab:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__tab-wrapper:not(:last-child):not(:has(+.udex-tab-navigation__content)),:host([orientation="Vertical"]) .udex-tab-navigation__header-tabs>.udex-tab-navigation__button-link:not(:last-child):not(:has(+.udex-tab-navigation__content)){margin-block-end:var(--udexSpacer8, 8px)}}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab{padding:0 var(--udexSpacer16, 16px);align-items:flex-start;width:100%;height:auto;min-height:auto;margin-inline-end:0;transition:all .2s ease-in}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab:not(:last-child){margin-inline-end:0}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active{padding:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active:before{content:"";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--udexSpacer16, 16px);padding:0 var(--udexSpacer16, 16px);transition:all .2s ease-in}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active){padding:var(--udexSpacer16, 16px)}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper:has(.udex-tab-navigation__button-tab--active):before{content:"";position:absolute;inset-inline-start:-1px;inset-block:0;z-index:1;width:3px;height:100%;background-color:var(--udex-button-tab-border-color-active);border-start-start-radius:0;border-start-end-radius:2px;border-end-start-radius:0;border-end-end-radius:2px}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab{padding:0}:host([orientation="Vertical"]) .udex-tab-navigation__tab-wrapper>.udex-tab-navigation__button-tab--active:before{display:none}:host([orientation="Vertical"]) .udex-tab-navigation__button-badge{inset-block-start:0;inset-inline-end:-10px}:host([orientation="Vertical"]) .udex-tab-navigation__button-text{position:relative;font-size:var(--udexTypographyHeadingRegularXXSFontSize, 20px);line-height:1.1;font-weight:var(--udexTypographyFontWeightMedium);text-align:start}:host([orientation="Vertical"]) .udex-tab-navigation__button-body-text{display:none;margin:0;font-family:var(--udex-button-tab-font-family);font-size:var(--udexTypographyBodyXSFontSize, 14px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udexColorGrey7);line-height:var(--udex-tab-navigation-content-line-height);text-align:start}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-body-text{display:block}:host([orientation="Vertical"]) .udex-tab-navigation__button-link{font-size:var(--udexTypographyNavigationRegularXLFontSize, 16px);font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:24px;display:none}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-link{display:block}:host([orientation="Vertical"]) .udex-tab-navigation__button-links{display:none;flex-direction:column;gap:var(--udexSpacer2, 2px)}:host([orientation="Vertical"]) .udex-tab-navigation__button-tab--active~.udex-tab-navigation__button-links{display:flex}:host([orientation="Vertical"]) .udex-tab-navigation__content{flex:1 1 75%;padding-block-start:0;padding-inline-start:var(--udexSpacer16, 16px)}