@sapudex/web-components 0.192.2 → 0.199.3

package/src/generated/themes/UploadItem.css.ts

@@ -0,0 +1,13 @@
+import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
+
+registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
+registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
+
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/UploadItem.css.ts",content:`:host{--udex-upload-item-progress-bar-width: 124px;--udex-upload-item-progress-bar-min-width: 124px;--udex-upload-item-progress-bar-max-width: 200px;--udex-upload-item-progress-bar-width-m: 100%;--udex-upload-item-progress-bar-min-width-m: 100%;--udex-upload-item-progress-bar-max-width-m: 100%;--udex-upload-item-progress-bar-padding: 5px 0;font-family:var(--sapFontFamily, sans-serif)}.udex-upload-item__wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-block:var(--udexSpacer8, 8px);box-sizing:border-box;border-bottom:1px solid var(--udexColorGrey3)}.udex-upload-item__info{display:flex;flex-direction:column}[udex-link]{--udex-link-text-decoration: none}.udex-upload-item__name{padding:0;margin:0;color:var(--sapTitleColor, var(--udexColorNeutralBlack));font-size:var(--sapFontSize)}.udex-upload-item__info{padding:0;margin:0;color:var(--udexColorGrey7);font-size:var(--udexTypographyBodyXXSFontSize);font-weight:var(--udexTypographyFontWeightRegular);line-height:var(--udexTypographyBodyLineHeight)}.udex-upload-item__error{color:var(--udexColorRed7)}.udex-upload-item__progress-info-wrapper{display:flex;flex-direction:row;align-items:center;margin-inline-start:var(--udexSpacer32, 32px)}.udex-upload-item__progress-info{display:flex;flex-direction:column;align-items:flex-start}.udex-upload-item__progress-status{padding:0;margin:0;color:var(--udexColorGrey7);font-size:var(--udexTypographyBodyXXSFontSize);font-weight:var(--udexTypographyFontWeightRegular);line-height:var(--udexTypographyBodyLineHeight)}[udex-progress-bar]{max-width:var(--udex-upload-item-progress-bar-max-width);min-width:var(--udex-upload-item-progress-bar-min-width);width:var(--udex-upload-item-progress-bar-width);overflow:hidden;padding:var(--udex-upload-item-progress-bar-padding)}[udex-link]{margin-bottom:var(--udexSpacer4, 4px)}[udex-button]{margin-inline-start:var(--udexSpacer24, 24px)}@media (max-width: 1279px){.udex-upload-item__wrapper{flex-direction:column;align-items:flex-start}.udex-upload-item__info{margin-bottom:var(--udexSpacer4, 4px);flex-direction:row;justify-content:space-between;align-items:center;width:100%}.udex-upload-item__progress-info-wrapper{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin:0}.udex-upload-item__progress-info{display:flex;flex-direction:column;align-items:flex-start;width:100%}.udex-upload-item__name{margin-bottom:var(--udexSpacer4, 4px)}[udex-progress-bar]{max-width:var(--udex-upload-item-progress-bar-max-width-m);min-width:var(--udex-upload-item-progress-bar-min-width-m);width:var(--udex-upload-item-progress-bar-width-m)}}.udex-upload-item__info-uploaded{margin-bottom:0}
+`};
+export default styleData;
+	

package/src/i18n/messagebundle.properties

@@ -75,10 +75,11 @@ TOTAL=Total
 
 # the "close button" text for the MessageStrip component
 MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close Button
-MESSAGE_STRIP_INFORMATION=Information
-MESSAGE_STRIP_SUCCESS=Positive
-MESSAGE_STRIP_WARNING=Warning
-MESSAGE_STRIP_ERROR=Negative
+MESSAGE_STRIP_INFORMATION=Information Bar
+MESSAGE_STRIP_SUCCESS=Positive Bar
+MESSAGE_STRIP_WARNING=Warning Bar
+MESSAGE_STRIP_ERROR=Negative Bar
+MESSAGE_STRIP_ACTION=Action Bar
 
 #ARIA announcement for the list which allows multiple selections
 ARIA_LABEL_LIST_MULTISELECTABLE=Contains Multi-Selectable Items
@@ -216,3 +217,11 @@ BACK_BUTTON_LABEL=back button
 
 #Dropdown trigger aria label
 TRIGGER=Dropdown trigger
+
+#Uploaded file labels
+UPLOADING_FILE_STATUS_TEXT=Uploading
+TERMINATED_FILE_STATUS_TEXT=Terminated
+REMOVE_FILE_TEXT=Remove file
+
+#Upload button aria-label
+UPLOAD_BUTTON_LABEL=Upload file

package/src/i18n/messagebundle_en.properties

@@ -48,10 +48,11 @@ SHOW_RESULTS=Show Results
 SHOW_HIDE_PASSWORD=Show/Hide Password Button
 RESET=Reset
 MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close Button
-MESSAGE_STRIP_INFORMATION=Information
-MESSAGE_STRIP_SUCCESS=Positive
-MESSAGE_STRIP_WARNING=Warning
-MESSAGE_STRIP_ERROR=Negative
+MESSAGE_STRIP_INFORMATION=Information Bar
+MESSAGE_STRIP_SUCCESS=Positive Bar
+MESSAGE_STRIP_WARNING=Warning Bar
+MESSAGE_STRIP_ERROR=Negative Bar
+MESSAGE_STRIP_ACTION=Action Bar
 REVIEWS=reviews
 STARS=stars
 SELECT_OPTIONS=Select Options
@@ -105,3 +106,7 @@ TRIGGER=Dropdown trigger
 MAIN_LINKS=main links
 OPENS_IN_A_NEW_WINDOW=opens in a new window
 TEXT_FIELD=Text field
+UPLOADING_FILE_STATUS_TEXT=Uploading
+TERMINATED_FILE_STATUS_TEXT=Terminated
+REMOVE_FILE_TEXT=Remove file
+UPLOAD_BUTTON_LABEL=Upload file

package/src/themes/Avatar.css

@@ -36,66 +36,57 @@
 
   --udex-avatar-blue-default-background-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));
   --udex-avatar-blue-default-border-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));
-  --udex-avatar-blue-default-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));
+  --udex-avatar-blue-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));
   --udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));
-  --udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));
-  --udex-avatar-blue-hover-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));
+  --udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));
 
   --udex-avatar-mango-default-background-color: var(--sapAvatar_1_Background, var(--udexColorMango2));
   --udex-avatar-mango-default-border-color: var(--sapAvatar_1_Background, var(--udexColorMango2));
-  --udex-avatar-mango-default-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));
+  --udex-avatar-mango-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));
   --udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));
-  --udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));
-  --udex-avatar-mango-hover-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));
+  --udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));
 
   --udex-avatar-red-default-background-color: var(--sapAvatar_2_Background, var(--udexColorRed2));
   --udex-avatar-red-default-border-color: var(--sapAvatar_2_Background, var(--udexColorRed2));
-  --udex-avatar-red-default-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));
+  --udex-avatar-red-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));
   --udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));
-  --udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));
-  --udex-avatar-red-hover-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));
+  --udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));
 
   --udex-avatar-raspberry-default-background-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));
   --udex-avatar-raspberry-default-border-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));
-  --udex-avatar-raspberry-default-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));
+  --udex-avatar-raspberry-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));
   --udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));
-  --udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));
-  --udex-avatar-raspberry-hover-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));
+  --udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));
 
   --udex-avatar-pink-default-background-color: var(--sapAvatar_4_Background, var(--udexColorPink2));
   --udex-avatar-pink-default-border-color: var(--sapAvatar_4_Background, var(--udexColorPink2));
-  --udex-avatar-pink-default-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));
+  --udex-avatar-pink-icon-color: var(--sapAvatar_4_TextColor,  var(--udexColorPink8));
   --udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));
-  --udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));
-  --udex-avatar-pink-hover-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));
+  --udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor,  var(--udexColorPink8));
 
   --udex-avatar-indigo-default-background-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));
   --udex-avatar-indigo-default-border-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));
-  --udex-avatar-indigo-default-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));
+  --udex-avatar-indigo-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));
   --udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));
-  --udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));
-  --udex-avatar-indigo-hover-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));
+  --udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));
 
   --udex-avatar-teal-default-background-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));
   --udex-avatar-teal-default-border-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));
-  --udex-avatar-teal-default-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));
+  --udex-avatar-teal-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));
   --udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));
-  --udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));
-  --udex-avatar-teal-hover-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));
+  --udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));
 
   --udex-avatar-green-default-background-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));
   --udex-avatar-green-default-border-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));
-  --udex-avatar-green-default-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));
+  --udex-avatar-green-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));
   --udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));
-  --udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));
-  --udex-avatar-green-hover-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));
+  --udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));
 
   --udex-avatar-grey-default-background-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));
   --udex-avatar-grey-default-border-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));
-  --udex-avatar-grey-default-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));
+  --udex-avatar-grey-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));
   --udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));
-  --udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));
-  --udex-avatar-grey-hover-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));
+  --udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));
 
   --udex-avatar-transparent-default-background-color: hsla(0, 0%, 0%, 0);
   --udex-avatar-transparent-default-border-color: hsla(0, 0%, 0%, 0);
@@ -299,7 +290,7 @@
 
 :host([color-scheme="Blue"]) .udex-avatar {
   background-color: var(--udex-avatar-blue-default-background-color);
-  color: var(--udex-avatar-blue-default-icon-color);
+  color: var(--udex-avatar-blue-icon-color);
   border-color: var(--udex-avatar-blue-default-border-color);
 }
 
@@ -307,14 +298,14 @@
 :host([color-scheme="Blue"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-blue-default-background-color);
   border-color: var(--udex-avatar-blue-hover-border-color);
-  color: var(--udex-avatar-blue-default-icon-color);
+  color: var(--udex-avatar-blue-icon-color);
 }
 
 /* Mango color scheme styles */
 
 :host([color-scheme="Mango"]) .udex-avatar {
   background-color: var(--udex-avatar-mango-default-background-color);
-  color: var(--udex-avatar-mango-default-icon-color);
+  color: var(--udex-avatar-mango-icon-color);
   border-color: var(--udex-avatar-mango-default-border-color);
 }
 
@@ -322,7 +313,7 @@
 :host([color-scheme="Mango"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-mango-default-background-color);
   border-color: var(--udex-avatar-mango-hover-border-color);
-  color: var(--udex-avatar-mango-default-icon-color);
+  color: var(--udex-avatar-mango-icon-color);
 }
 
 /* Disabled styles */
@@ -335,7 +326,7 @@
 
 :host([color-scheme="Red"]) .udex-avatar {
   background-color: var(--udex-avatar-red-default-background-color);
-  color: var(--udex-avatar-red-default-icon-color);
+  color: var(--udex-avatar-red-icon-color);
   border-color: var(--udex-avatar-red-default-border-color);
 }
 
@@ -343,14 +334,14 @@
 :host([color-scheme="Red"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-red-default-background-color);
   border-color: var(--udex-avatar-red-hover-border-color);
-  color: var(--udex-avatar-red-default-icon-color);
+  color: var(--udex-avatar-red-icon-color);
 }
 
 /* Raspberry color scheme styles */
 
 :host([color-scheme="Raspberry"]) .udex-avatar {
   background-color: var(--udex-avatar-raspberry-default-background-color);
-  color: var(--udex-avatar-raspberry-default-icon-color);
+  color: var(--udex-avatar-raspberry-icon-color);
   border-color: var(--udex-avatar-raspberry-default-border-color);
 }
 
@@ -358,14 +349,14 @@
 :host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-raspberry-default-background-color);
   border-color: var(--udex-avatar-raspberry-hover-border-color);
-  color: var(--udex-avatar-raspberry-default-icon-color);
+  color: var(--udex-avatar-raspberry-icon-color);
 }
 
 /* Pink color scheme styles */
 
 :host([color-scheme="Pink"]) .udex-avatar {
   background-color: var(--udex-avatar-pink-default-background-color);
-  color: var(--udex-avatar-pink-default-icon-color);
+  color: var(--udex-avatar-pink-icon-color);
   border-color: var(--udex-avatar-pink-default-border-color);
 }
 
@@ -373,14 +364,14 @@
 :host([color-scheme="Pink"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-pink-default-background-color);
   border-color: var(--udex-avatar-pink-hover-border-color);
-  color: var(--udex-avatar-pink-default-icon-color);
+  color: var(--udex-avatar-pink-icon-color);
 }
 
 /* Indigo color scheme styles */
 
 :host([color-scheme="Indigo"]) .udex-avatar {
   background-color: var(--udex-avatar-indigo-default-background-color);
-  color: var(--udex-avatar-indigo-default-icon-color);
+  color: var(--udex-avatar-indigo-icon-color);
   border-color: var(--udex-avatar-indigo-default-border-color);
 }
 
@@ -388,14 +379,14 @@
 :host([color-scheme="Indigo"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-indigo-default-background-color);
   border-color: var(--udex-avatar-indigo-hover-border-color);
-  color: var(--udex-avatar-indigo-default-icon-color);
+  color: var(--udex-avatar-indigo-icon-color);
 }
 
 /* Teal color scheme styles */
 
 :host([color-scheme="Teal"]) .udex-avatar {
   background-color: var(--udex-avatar-teal-default-background-color);
-  color: var(--udex-avatar-teal-default-icon-color);
+  color: var(--udex-avatar-teal-icon-color);
   border-color: var(--udex-avatar-teal-default-border-color);
 }
 
@@ -403,14 +394,14 @@
 :host([color-scheme="Teal"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-teal-default-background-color);
   border-color: var(--udex-avatar-teal-hover-border-color);
-  color: var(--udex-avatar-teal-default-icon-color);
+  color: var(--udex-avatar-teal-icon-color);
 }
 
 /* Green color scheme styles */
 
 :host([color-scheme="Green"]) .udex-avatar {
   background-color: var(--udex-avatar-green-default-background-color);
-  color: var(--udex-avatar-green-default-icon-color);
+  color: var(--udex-avatar-green-icon-color);
   border-color: var(--udex-avatar-green-default-border-color);
 }
 
@@ -418,14 +409,14 @@
 :host([color-scheme="Green"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-green-default-background-color);
   border-color: var(--udex-avatar-green-hover-border-color);
-  color: var(--udex-avatar-green-default-icon-color);
+  color: var(--udex-avatar-green-icon-color);
 }
 
 /* Grey color scheme styles */
 
 :host([color-scheme="Grey"]) .udex-avatar {
   background-color: var(--udex-avatar-grey-default-background-color);
-  color: var(--udex-avatar-grey-default-icon-color);
+  color: var(--udex-avatar-grey-icon-color);
   border-color: var(--udex-avatar-grey-default-border-color);
 }
 
@@ -433,7 +424,7 @@
 :host([color-scheme="Grey"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-grey-default-background-color);
   border-color: var(--udex-avatar-grey-hover-border-color);
-  color: var(--udex-avatar-grey-default-icon-color);
+  color: var(--udex-avatar-grey-icon-color);
 }
 
 /* Transparent color scheme styles */

package/src/themes/Button.css

@@ -238,7 +238,7 @@
   padding: var(--udex-button-padding-small);
 }
 
-:host([design="Primary"][focused]:not([active]):not([toggled]))::part(button):before {
+:host([design="Primary"][focused]:not([active]):not([toggled])) .ui5-button-root:before {
   content: "";
   position: absolute;
   box-sizing: border-box;
@@ -248,8 +248,8 @@
   z-index: 1;
 }
 
-:host([design="Invisible"][focused]:not([active]):not([toggled]))::part(button):after,
-:host([design="Invisible"][active]:not([toggled]))::part(button):before {
+:host([design="Invisible"][focused]:not([active]):not([toggled])) .ui5-button-root:after,
+:host([design="Invisible"][active]:not([toggled])) .ui5-button-root:before {
   content: "";
   position: absolute;
   box-sizing: border-box;

package/src/themes/CountrySelector.css

@@ -35,6 +35,7 @@
   width: 100%;
 }
 
+:host([hide-flag-images])::part(textfield-input),
 .udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item) {
   padding-left: var(--udexSpacer12);
   padding-right: var(--udexSpacer12);

package/src/themes/Link.css

@@ -5,9 +5,12 @@
   --udex-link-focus-text-decoration: underline;
   --udex-link-emphasized-text-decoration: none;
   --udex-link-icon-height: 24px;
-  --udex-link-icon-width:var(--sapFontSize);
+  --udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  --udex-link-color: var(--udexColorBlue8);
+  --udex-link-hover-color: var(--udexColorBlue10);
+  --udex-link-active-color: var(--udexColorBlue11);
+  --udex-link-icon-width: var(--sapFontSize);
   --udex-link-white-space: break-spaces;
-
   white-space: normal;
 }
 
@@ -16,6 +19,15 @@
 :host([focused]:hover:not(:active)),
 :host(:hover) {
   text-decoration: none;
+  color: var(--udex-link-hover-color);
+}
+
+:host(:active) {
+  color: var(--udex-link-active-color);
+}
+
+:host, :host(:visited) {
+  color: var(--udex-link-color);
 }
 
 :host([focused]) slot {
@@ -37,6 +49,7 @@
 
 .ui5-link-root {
   overflow: visible;
+  line-height: var(--udex-link-line-height);
 }
 
 [ui5-link][disabled] .linkIcon {
@@ -82,8 +95,8 @@
   height: var(--udex-link-icon-height);
 }
 
-[ui5-link][focused] {
-  color: var(--sapLinkColor);
+[ui5-link] {
+  color: inherit;
 }
 
 :host([focused]) .ui5-link-root,

package/src/themes/Pagination.css

@@ -8,7 +8,7 @@
   --udex-pagination-item-text-color: var(--sapPrimary5, #5b738b);
   --udex-pagination-item-active-text-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9, #223548));
   --udex-pagination-item-active-background-color: var(--udexColorGrey1);
-  --udex-pagination-item-active-border-color: var(--sapButton_Active_BorderColor, #0040b0);
+  --udex-pagination-item-active-border-color: var(--udexColorBlue8);
   --udex-pagination-item-active-border-width: var(--sapField_InformationBorderWidth, 0.125rem);
   --udex-pagination-item-gap: 0.25rem;
   --udex-pagination-mobile-item-gap: 0.5rem;

package/src/themes/StatusBadge.css

@@ -1,22 +1,22 @@
 :host {
   --udex-status-badge-icon-color-error: var(--udexColorRed8);
-  --udex-status-badge-background-color-error: var(--udexColorRed2);
-  --udex-status-badge-border-color-error: var(--udexColorRed7);
+  --udex-status-badge-background-color-error: var(--udexColorRed1);
+  --udex-status-badge-border-color-error: var(--udexColorRed6);
 
   --udex-status-badge-icon-color-success: var(--udexColorGreen8);
-  --udex-status-badge-background-color-success: var(--udexColorGreen2);
-  --udex-status-badge-border-color-success: var(--udexColorGreen7);
+  --udex-status-badge-background-color-success: var(--udexColorGreen1);
+  --udex-status-badge-border-color-success: var(--udexColorGreen6);
 
   --udex-status-badge-icon-color-warning: var(--udexColorMango8);
-  --udex-status-badge-background-color-warning: var(--udexColorMango2);
-  --udex-status-badge-border-color-warning: var(--udexColorMango7);
+  --udex-status-badge-background-color-warning: var(--udexColorMango1);
+  --udex-status-badge-border-color-warning: var(--udexColorMango6);
 
   --udex-status-badge-icon-color-information: var(--udexColorBlue8);
-  --udex-status-badge-background-color-information: var(--udexColorBlue2);
-  --udex-status-badge-border-color-information: var(--udexColorBlue7);
+  --udex-status-badge-background-color-information: var(--udexColorBlue1);
+  --udex-status-badge-border-color-information: var(--udexColorBlue6);
 
   --udex-status-badge-icon-color-edit: white;
-  --udex-status-badge-background-color-edit: var(--udexColorBlue7);
+  --udex-status-badge-background-color-edit: var(--udexColorBlue8);
 
   --udex-status-badge-size-background-xs-and-s-and-m: 18px;
   --udex-status-badge-size-background-l: 20px;

package/src/themes/Tag.css

@@ -6,7 +6,8 @@
   --udex-tags-line-height: 18px;
   --udex-tags-medium-line-height: 21px;
   --udex-tags-icon-size: 12px;
-  --udex-tags-medium-icon-size: 14px;
+  --udex-tags-icon-padding: 2px;
+  --udex-tags-medium-icon-size: 12px;
   --udex-tags-radius-size: 6px;
   --udex-tags-text-icon-gap: 3px;
   --udex-tags-padding-vertical: var(--udexSpacer2, 2px);
@@ -105,14 +106,16 @@
 }
 
 .udex-tag__icon {
+  padding: var(--udex-tags-icon-padding);
   height: var(--udex-tags-icon-size);
-  min-width: var(--udex-tags-icon-size);
+  width: var(--udex-tags-icon-size);
   color: inherit;
 }
 
 .udex-tag--medium .udex-tag__icon {
+  padding: var(--udex-tags-icon-padding);
   height: var(--udex-tags-medium-icon-size);
-  min-width: var(--udex-tags-medium-icon-size);
+  width: var(--udex-tags-medium-icon-size);
 }
 
 .udex-tag-grey,

package/src/themes/TagGroup.css

@@ -39,10 +39,6 @@
   pointer-events: none;
 }
 
-:host([displayonly]) .udex-tag-group__tag[data-overflows] {
-  margin-inline-end: -10px;
-}
-
 :host([displayonly]) .udex-tag-group__tag {
   margin-inline-end: 0;
   position: relative;

package/src/themes/TextField.css

@@ -220,7 +220,8 @@
   padding: 0;
 }
 
-.udex-text-field__label.udex-text-field__label_active {
+.udex-text-field__label.udex-text-field__label_active,
+:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label {
   line-height: 18px;
   transform: translateY(-110%);
   padding: 6px 4px 0;

package/src/themes/Upload.css

@@ -0,0 +1,65 @@
+:host {
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+.udex-upload__title {
+  line-height: var(--udexTypographyHeadingLineHeight);
+  font-size: var(--udexTypographyHeadingRegularXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightMedium);
+  margin: 0;
+  padding: 0;
+}
+
+.udex-upload__additional-text {
+  padding: 0;
+  margin: 0;
+  margin-top: var(--udexSpacer8);
+  margin-bottom: var(--udexSpacer24);
+  color: var(--udexColorGrey7);
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+.udex-upload__files-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--udexSpacer24, 24px);
+}
+
+.udex-upload__upload-button-container {
+  display: flex;
+  gap: var(--udexSpacer16);
+  align-items: center;
+}
+
+.udex-upload__upload-button input {
+  display: none;
+}
+
+.udex-upload__error {
+  padding: 0;
+  margin: 0;
+  color: var(--udexCoreSemanticError7, var(--udexColorRed7));
+  font-size: var(--udexTypographyBodyXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+:host([required]) .udex-upload__title::after {
+  content: "*";
+  color: var(--udexColorGrey7);
+  line-height: var(--udexTypographyHeadingLineHeight);
+  font-size: var(--udexTypographyHeadingRegularXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightMedium);
+}
+
+
+@media (max-width: 979px) {
+  .udex-upload__title, 
+  :host([required]) .udex-upload__title::after {
+    line-height: var(--udexTypographyHeadingLineHeight);
+    font-size: var(--udexTypographyHeadingRegularXXXSFontSize);
+    font-weight: var(--udexTypographyFontWeightMedium);
+  }
+}