@sapudex/web-components 0.224.0 → 2.0.0

package/src/themes/RatingIndicator.css

@@ -15,11 +15,6 @@
   --udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500);
 }
 
-.udex-rating-indicator {
-  font-family: var(--sapFontFamily);
-  font-size: var(--sapFontSize, 16px);
-}
-
 :host(:not([hidden])) {
   display: inline-flex;
   margin: var(--_ui5_rating_indicator_component_spacing);
@@ -63,6 +58,9 @@
 }
 
 .udex-rating-indicator {
+  font-family: var(--sapFontFamily);
+  font-size: var(--sapFontSize, 16px);
+  padding: 0;
   outline: none;
   position: relative;
   display: inline-flex;
@@ -100,14 +98,11 @@
   user-select: none;
 }
 
-.udex-rating-indicator__item.udex-rating-indicator__item-sel {
-  color: var(--udex-rating_indicator_rated_color);
-}
-
 .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);
 }
@@ -155,8 +150,7 @@
 }
 
 :host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,
-:host([disabled]) .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);
 }

package/src/themes/Search.css

@@ -295,7 +295,7 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 
-[ui5-button].udex-search__button::part(button):focus-visible::before {
+[udex-button].udex-search__button::part(button):focus-visible::before {
   content: '';
   position: absolute;
   inset-block-start: 0;
@@ -307,7 +307,7 @@ input[type="search"]::-webkit-search-results-decoration {
   box-sizing: border-box;
 }
 
-[ui5-button].udex-search__button::part(button) {
+[udex-button].udex-search__button::part(button) {
   padding: 0;
   width: 28px;
   height: 28px;
@@ -320,28 +320,28 @@ input[type="search"]::-webkit-search-results-decoration {
   height: 18px;
 }
 
-[ui5-button].udex-search__button::part(icon) {
+[udex-button].udex-search__button::part(icon) {
   width: 18px;
   height: 18px;
 }
 
-[ui5-button].udex-search__button::part(button)::after {
+[udex-button].udex-search__button::part(button)::after {
   display: none;
 }
 
-[ui5-button].udex-search__button.udex-search__voice-button:hover {
+[udex-button].udex-search__button.udex-search__voice-button:hover {
   background-color: rgba(0,0,0,0.1);
   border: none;
   box-shadow: none;
 }
 
-[ui5-button].udex-search__button.udex-search__voice-button.udex-search__voice-button--active,
-[ui5-button][active].udex-search__button.udex-search__voice-button {
+[udex-button].udex-search__button.udex-search__voice-button.udex-search__voice-button--active,
+[udex-button][active].udex-search__button.udex-search__voice-button {
   background: var(--udexColorBlue8, #0057D2);
   color: var(--udexColorNeutralWhite, #FFFFFF);
 }
 
-[ui5-button].udex-search__button:focus {
+[udex-button].udex-search__button:focus {
   outline: none;
 }
 
@@ -447,4 +447,4 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .hidden {
   display: none;
-}
+}

package/src/themes/SegmentedButton.css

@@ -37,4 +37,4 @@
 
 .ui5-segmented-button-root {
   box-shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--udex-segmented-button-border-color);
-}
+}

package/src/themes/SegmentedButtonItem.css

@@ -62,7 +62,7 @@
 }
 
 :host([design="Default"]),
-:host{
+:host {
   background-color: var(--udex-segmented-button-item-background-color);
   border: var(--sapButton_BorderWidth) solid var(--udex-segmented-button-item-border-color);
   color: var(--udex-segmented-button-item-color);
@@ -70,13 +70,14 @@
   height: var(--udex-segmented-button-item-medium-height);
   min-width: var(--udex-segmented-button-item-medium-width);
   font-weight: var(--udex-segmented-button-item-font-weight);
+  font-family: var(--sapFontFamily);
 }
 
-.ui5-button-root {
+.ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-with-text-medium-padding);
 }
 
-:host([has-icon]) .ui5-button-root {
+:host([icon-only]) .ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-medium-padding);
 }
 
@@ -98,58 +99,58 @@
   font-size: var(--udex-segmented-button-item-small-font-size);
 }
 
-:host([size="Small"][has-icon]) .ui5-button-root {
+:host([size="Small"][icon-only]) .ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-small-padding);
 }
 
-:host([size="Medium"][has-icon]) .ui5-button-root {
+:host([size="Medium"][icon-only]) .ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-medium-padding);
 }
 
-:host([size="Large"][has-icon]) .ui5-button-root {
+:host([size="Large"][icon-only]) .ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-large-padding);
 }
 
-:host([size="Small"]) .ui5-button-root {
+:host([size="Small"]) .ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-with-text-small-padding);
 }
 
-:host([size="Medium"]) .ui5-button-root {
+:host([size="Medium"]) .ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-with-text-medium-padding);
 }
 
-:host([size="Large"]) .ui5-button-root {
+:host([size="Large"]) .ui5-segmented-button-item-root {
   padding: var(--udex-segmented-button-item-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([design="Success"][selected]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Error"][selected]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Warning"][selected]: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) {
+:host([design="Default"][selected]:hover), :host([design="Default"][selected]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
   background: var(--udex-segmented-button-item-hover-background-color);
   border: 1px solid var(--udex-segmented-button-item-hover-border-color);
   color: var(--udex-segmented-button-item-hover-color);
 }
 
-.ui5-button-icon {
+.ui5-segmented-button-item-icon {
   height: var(--udex-segmented-button-item-medium-icon-size);
   width: var(--udex-segmented-button-item-medium-icon-size);
 }
 
-:host([size="Small"]) .ui5-button-icon {
+:host([size="Small"]) .ui5-segmented-button-item-icon {
   height: var(--udex-segmented-button-item-small-icon-size);
   width: var(--udex-segmented-button-item-small-icon-size);
 }
 
-:host([size="Large"]) .ui5-button-icon {
+:host([size="Large"]) .ui5-segmented-button-item-icon {
   height: var(--udex-segmented-button-item-large-icon-size);
   width: var(--udex-segmented-button-item-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])) {
+:host([selected]), :host([design="Default"][selected]),
+:host([selected]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Default"][selected]:not([active]):not([non-interactive]):not([_is-touch])) {
   background: var(--udex-segmented-button-item-selected-background-color);
   border: 1px solid var(--udex-segmented-button-item-selected-border-color);
   color: var(--udex-segmented-button-item-selected-color);
@@ -183,19 +184,19 @@
   color: var(--udex-segmented-button-item-warning-color);
 }
 
-:host([design="Success"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+:host([design="Success"][selected]:not([active]):not([non-interactive]):not([_is-touch])) {
   background-color: var(--udex-segmented-button-item-success-selected-background-color);
   border-color: var(--udex-segmented-button-item-success-selected-border-color);
   color: var(--udex-segmented-button-item-success-selected-color);
 }
 
-:host([design="Error"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+:host([design="Error"][selected]:not([active]):not([non-interactive]):not([_is-touch])) {
   background-color: var(--udex-segmented-button-item-error-selected-background-color);
   border-color: var(--udex-segmented-button-item-error-selected-border-color);
   color: var(--udex-segmented-button-item-error-selected-color);
 }
 
-:host([design="Warning"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+:host([design="Warning"][selected]:not([active]):not([non-interactive]):not([_is-touch])) {
   background-color: var(--udex-segmented-button-item-warning-selected-background-color);
   border-color: var(--udex-segmented-button-item-warning-selected-border-color);
   color: var(--udex-segmented-button-item-warning-selected-color);
@@ -229,18 +230,27 @@
   background-color: var(--udex-segmented-button-item-background-color);
 }
 
-.ui5-button-text bdi {
+.ui5-segmented-button-item-text bdi {
   display: flex;
   align-items: center;
   line-height: var(--udex-segmented-button-item-medium-line-height);
 }
 
-:host([size="Small"]) .ui5-button-text bdi {
+:host([size="Small"]) .ui5-segmented-button-item-text bdi {
   line-height: var(--udex-segmented-button-item-small-line-height);
 }
 
-:host([size="Medium"]) .ui5-button-text bdi, :host([size="Large"]) .ui5-button-text bdi {
+:host([size="Medium"]) .ui5-segmented-button-item-text bdi, :host([size="Large"]) .ui5-segmented-button-item-text bdi {
   line-height: var(--udex-segmented-button-item-medium-line-height);
 }
 
+:host([has-icon="true"]:not([icon-end])) .ui5-segmented-button-item-text {
+	margin-inline-start: 6px;
+}
 
+:host([has-icon="false"]:not([icon-end])) .ui5-segmented-button-item-text {
+	margin-inline-start: 0;
+}
+.ui5-segmented-button-item-icon {
+  padding-inline-end: 0;
+}

package/src/themes/SelectBox.css

@@ -154,8 +154,8 @@
 }
 
 .udex-tag-group {
-  border: none;
-  width: auto;
+  display: flex;
+  width: 100%;
   min-width: 100px;
   max-width: calc(100% - 42px - var(--udexSpacer8));
 }

package/src/themes/SideNavigation.css

@@ -27,11 +27,11 @@
 :host(:not([hidden])) {
   box-shadow: var(--udex-side-navigation-box-shadow);
   font-family: var(--sapFontFamily);
-  width: 100%;
   max-width: var(--udex-side-navigation-max-width);
+  width: 100%;
 }
 
-.ui5-sn-list {
+.ui5-sn-root .ui5-sn-list {
   padding: var(--udex-side-navigation-padding) 0 0;
   margin: 0;
 }

package/src/themes/SideNavigationGroup.css

@@ -1,7 +1,6 @@
 :host {
   --udex-side-navigation-item-height: 2.5rem;
   --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
-  --udex-side-navigation-item-focus-border-offset: 0;
 
   color: var(--udexColorGrey7, #475E75);
 }
@@ -40,10 +39,6 @@
   padding-inline-start: var(--udexSpacer12);
 }
 
-.ui5-sn-item:focus:after {
-  inset: var(--udex-side-navigation-item-focus-border-offset);
-}
-
 :host(:not([expanded]):last-child) {
   margin-block-end: var(--udexSpacer16);
 }

package/src/themes/SideNavigationItem.css

@@ -6,7 +6,6 @@
   --udex-side-navigation-item-padding-left: var(--udexSpacer16);
   --udex-side-navigation-selection-indicator-display: none;
   --udex-side-navigation-text-weight: var(--udexTypographyFontWeightMedium);
-  --udex-side-navigation-item-focus-border-offset: 0;
   --udex-side-navigation-selection-background-color: none;
   --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
 
@@ -21,9 +20,10 @@
   overflow: auto;
 }
 
-.ui5-sn-item {
+.ui5-sn-item, :host(:not([in-popover])) .ui5-sn-item {
   height: var(--udex-side-navigation-item-height);
   padding-inline-end: var(--udexSpacer16);
+  margin-bottom: var(--udexSpacer8, 8px);
 }
 
 .ui5-sn-item .ui5-sn-item-text {
@@ -36,15 +36,30 @@
   min-width: var(--udex-side-navigation-icon-font-size);
   color: var(--udex-side-navigation-icon-color);
   padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+  padding-inline-start: 0;
 }
 
 .ui5-sn-item-toggle-icon,
-.ui5-sn-item-external-link-icon {
+.ui5-sn-item-external-link-icon,
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
+  margin: 0;
+  padding: 0;
   color: var(--udex-side-navigation-icon-color);
-  padding-inline-start: var(--udexSpacer12);
+  padding-inline-start: var(--udexSpacer12, 12px);
+}
+
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon::part(root) {
+  border: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
+  border-inline-start: 0;
 }
 
 .ui5-sn-item-level1,
@@ -69,6 +84,7 @@
   display: var(--udex-side-navigation-selection-indicator-display);
 }
 
-.ui5-sn-item:focus::after {
-  inset: var(--udex-side-navigation-item-focus-border-offset);
+:host([desktop]) .ui5-sn-item:focus:after,
+.ui5-sn-item:focus-visible:after {
+  inset: 0;
 }

package/src/themes/SideNavigationMobileDropdown.css

@@ -16,11 +16,11 @@
 
 .udex-side-navigation-mobile__popover {
   --udex-dropdown-vertical-distance: 0;
-  --udex-dropdown-box-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
   --udex-dropdown-border-radius: 0;
   --udex-dropdown-border-width: 0;
   --udex-dropdown-pane-max-width: 100%;
   --udex-dropdown-pane-overflow: auto;
+  margin-top: 1px;
 }
 
 [udex-side-navigation] {

package/src/themes/SideNavigationSubItem.css

@@ -6,7 +6,6 @@
   --udex-side-navigation-item_color-selected-text: var(--udexColorBlue7, #0070F2);
   --udex-side-navigation-selection-indicator-display: none;
   --udex-side-navigation-item-padding-left: var(--udexSpacer16);
-  --udex-side-navigation-item-focus-border-offset: 0;
   --udex-side-navigation-selection-background-color: none;
   --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
 
@@ -58,6 +57,7 @@
   padding-inline-start: var(--udex-side-navigation-group-icon-width);
 }
 
-.ui5-sn-item:focus::after {
-  inset: var(--udex-side-navigation-item-focus-border-offset);
+:host([desktop]) .ui5-sn-item:focus:after,
+.ui5-sn-item:focus-visible:after {
+  inset: 0;
 }

package/src/themes/Slider.css

@@ -1,26 +1,32 @@
 :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, 0.5rem);
+  --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: -0.875rem;
+  --udex-slider-handle-height: var(--udexSpacer32, 2rem);
+  --udex-slider-start-end-point-left: -0.875rem;
+  --udex-slider-start-end-point-right: -0.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, 0.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 * (2.75rem / 2) - 5px);
+  --udex-slider-progress-focus-height: 42px;
+  --udex-slider-progress-focus-width: calc(100% + 2.75rem + 10px);
 }
 
 :host {
@@ -43,6 +49,11 @@
 .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,
@@ -63,3 +74,56 @@
 [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);
+}

package/src/themes/TagGroup.css

@@ -1,3 +1,7 @@
+.udex-tag-group {
+  width: 100%;
+}
+
 .udex-tag-group__tokenizer {
   border: none;
   width: 100%;

package/src/themes/TextArea.css

@@ -128,54 +128,54 @@
   border-radius: var(--udexRadiusS, 6px);
 }
 
-:host([field-state="Warning"]) .udex-textarea__field {
+:host([value-state="Warning"]) .udex-textarea__field {
   background-color: var(--udex-textarea-color-warning-default-background);
   border-color: var(--udex-textarea-color-warning-default-border);
 }
 
-:host([field-state="Warning"]) .udex-textarea__label--active {
+:host([value-state="Warning"]) .udex-textarea__label--active {
   background: linear-gradient(var(--udex-textarea-color-label-background) 65%, var(--udex-textarea-color-warning-default-background) 35%);
 }
 
-:host([field-state="Warning"]) .udex-textarea__field:hover {
+:host([value-state="Warning"]) .udex-textarea__field:hover {
   border-color: var(--udex-textarea-color-warning-hover-border);
 }
 
-:host([field-state="Warning"]) .udex-textarea__field:focus {
+:host([value-state="Warning"]) .udex-textarea__field:focus {
   border-color: var(--udex-textarea-color-warning-actives-border);
 }
 
-:host([field-state="Error"]) .udex-textarea__field {
+:host([value-state="Error"]) .udex-textarea__field {
   background-color: var(--udex-textarea-color-error-default-background);
   border-color: var(--udex-textarea-color-error-default-border);
 }
 
-:host([field-state="Error"]) .udex-textarea__label--active {
+:host([value-state="Error"]) .udex-textarea__label--active {
   background: linear-gradient(var(--udex-textarea-color-label-background) 65%, var(--udex-textarea-color-error-default-background) 35%);
 }
 
-:host([field-state="Error"]) .udex-textarea__field:hover {
+:host([value-state="Error"]) .udex-textarea__field:hover {
   border-color: var(--udex-textarea-color-error-hover-border);
 }
 
-:host([field-state="Error"]) .udex-textarea__field:focus {
+:host([value-state="Error"]) .udex-textarea__field:focus {
   border-color: var(--udex-textarea-color-error-actives-border);
 }
 
-:host([field-state="Success"]) .udex-textarea__field {
+:host([value-state="Success"]) .udex-textarea__field {
   background-color: var(--udex-textarea-color-success-default-background);
   border-color: var(--udex-textarea-color-success-default-border);
 }
 
-:host([field-state="Success"]) .udex-textarea__label--active {
+:host([value-state="Success"]) .udex-textarea__label--active {
   background: linear-gradient(var(--udex-textarea-color-label-background) 65%, var(--udex-textarea-color-success-default-background) 35%);
 }
 
-:host([field-state="Success"]) .udex-textarea__field:hover {
+:host([value-state="Success"]) .udex-textarea__field:hover {
   border-color: var(--udex-textarea-color-success-hover-border);
 }
 
-:host([field-state="Success"]) .udex-textarea__field:focus {
+:host([value-state="Success"]) .udex-textarea__field:focus {
   border-color: var(--udex-textarea-color-success-actives-border);
 }
 
@@ -237,15 +237,15 @@
   border: 2px solid var(--udex-textarea-color-standard-default-background);
 }
 
-:host([field-state="Warning"]) .udex-textarea__field::-webkit-scrollbar-thumb {
+:host([value-state="Warning"]) .udex-textarea__field::-webkit-scrollbar-thumb {
   border: 2px solid var(--udex-textarea-color-warning-default-background);
 }
 
-:host([field-state="Error"]) .udex-textarea__field::-webkit-scrollbar-thumb {
+:host([value-state="Error"]) .udex-textarea__field::-webkit-scrollbar-thumb {
   border: 2px solid var(--udex-textarea-color-error-default-background);
 }
 
-:host([field-state="Success"]) .udex-textarea__field::-webkit-scrollbar-thumb {
+:host([value-state="Success"]) .udex-textarea__field::-webkit-scrollbar-thumb {
   border: 2px solid var(--udex-textarea-color-success-default-background);
 }
 

package/src/themes/Tile.css

@@ -19,6 +19,13 @@
   --udex-tile-radius: var(--udexRadiusL, 12px);
 }
 
+:host {
+  font-size: var(--udexTypographyBodySFontSize);
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
 .udex-tile {
   border-radius: var(--udex-tile-radius);
   background: var(--udex-tile-color-generic-default-background);

package/src/themes/Toast.css

@@ -6,11 +6,22 @@
   --udex-toast-border-color: var(--udexColorGrey3, #D5DADD);
   --udex-toast-close-icon-color: var(--udexColorGrey7, #475E75);
   --udex-toast-status-icon-size: var(--udexCoreSizeIconInput, 18px);
+  --udex-toast-vertical-offset: 2.5rem;
+  --udex-toast-background:var(--udexColorNeutralWhite, #FFF);
+  --udex-toast-shadow:var(--sapContent_Shadow2, #0px 10px 30px 0px rgba(34, 54, 73, 0.25));
+}
 
+:host {
+  background: var(--udex-toast-background);
+  box-shadow: var(--udex-toast-shadow);
   border: var(--udex-toast-border-width) solid var(--udex-toast-border-color);
   padding: 0;
 }
 
+:host([placement="BottomCenter"]) {
+  bottom: var(--udex-toast-vertical-offset);
+}
+
 :host([desktop]) .udex-toast:focus,
 .udex-toast:focus-visible {
   outline: var(--udexSpacer2, 2px) solid var(--udexColorBlue9, #0040B0);
@@ -24,6 +35,7 @@
   border-radius: inherit;
   line-height: var(--udex-toast-text-line-height);
   font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  color: var(--udex-toast-color);
   --sapFontSize: var(--udex-toast-font-size);
 }