@sapudex/web-components 0.111.0

package/src/i18n/messagebundle_en.properties

@@ -0,0 +1,85 @@
+COUNT=Count
+OF=of
+PAGINATION_PAGE=Pagination page
+SELECTED=Selected
+UNSELECTED=Unselected
+INDETERMINATE=Indeterminate
+EDIT_BUTTON=Edit button
+DELETE_BUTTON=Delete button
+BUTTON_ARIA_TYPE_PRIMARY=Primary
+BUTTON_ARIA_TYPE_SECONDARY=Secondary
+BUTTON_ARIA_TYPE_TERTIARY=Tertiary
+BUTTON_ARIA_TYPE_WARNING=Warning
+BUTTON_ARIA_TYPE_POSITIVE=Positive
+BUTTON_ARIA_TYPE_NEGATIVE=Negative
+BUTTON_ARIA_EMPHASIZED=Emphasized
+BUTTON_ARIA_DEFAULT=Default
+BUTTON_ARIA_TRANSPARENT=Transparent
+BUTTON_ARIA_ATTENTION=Attention
+TOGGLED=Toggled
+FIRST_PAGE=First page
+LAST_PAGE=Last page
+PREVIOUS_PAGE=Previous page
+NEXT_PAGE=Next page
+ACTIVATE_PAGE=Activate page number
+SUGGESTED_TEXT=Suggested searches
+AVAILABLE_VALUES=Available Values
+RECOMMENDED_TEXT=Recommended pages
+EXPAND_ALL=Expand All
+COLLAPSE_ALL=Collapse All
+MORE=More
+ATTENTION_BADGE=Attention badge
+READ_MORE=Read more
+READ_LESS=Read less
+RATING_INDICATOR_TEXT=Rating Indicator
+RATING_INDICATOR_TOOLTIP_TEXT=Rating
+RATING_INDICATOR_ARIA_DESCRIPTION=Required
+TOTAL=Total
+ARIA_LABEL_LIST_MULTISELECTABLE=Contains Multi-Selectable Items
+ARIA_LABEL_LIST_SELECTABLE=Contains Selectable Items
+SHOW_RESULTS=Show Results
+SHOW_HIDE_PASSWORD=Show/Hide Password Button
+RESET=Reset
+MESSAGE_STRIP_CLOSE_BUTTON=Information Bar Close
+MESSAGE_STRIP_INFORMATION=Information
+MESSAGE_STRIP_SUCCESS=Success
+MESSAGE_STRIP_WARNING=Warning
+MESSAGE_STRIP_ERROR=Error
+SELECT_OPTIONS=Select Options
+SELECT_ALL=Select All
+TEXTAREA_CHARACTERS_LEFT={0} characters remaining
+VALUE_STATE_TYPE_ERROR=Field State Error
+VALUE_STATE_TYPE_WARNING=Field State Warning
+VALUE_STATE_TYPE_SUCCESS=Field State Success
+VALUE_STATE_TYPE_STANDARD=Field State Standard
+CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
+CAROUSEL_NEXT_ARROW_TEXT=Next Page
+NO_MATCHES_FOUND=No matches found.
+BREADCRUMBS_ARIA_LABEL=Breadcrumb Trail
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=More
+STEPINPUT_INC_ICON_TITLE=Increase Quantity by
+STEPINPUT_DEC_ICON_TITLE=Decrease Quantity by
+TABLE_NO_DATA_FOUND=No data found
+VALUE_STATE_ERROR=Invalid entry
+VALUE_STATE_WARNING=Warning issued
+VALUE_STATE_INFORMATION=Informative entry
+VALUE_STATE_SUCCESS=Entry successfully validated
+READ_ONLY=Read only
+LOGOUT=Logout
+COUNTRY_SELECT=Country Select
+OVERVIEW=Overview
+SOCIAL_LINK_ICON=Link Graphic
+PHONE_NUMBER=Phone number
+CONTACT_US=Contact us
+EMAIL=Email
+CHAT_WITH_US=Chat with us
+QUICK_LINKS=Quick Links
+TRENDING=Trending
+ABOUT_SAP=About SAP
+SITE_INFORMATION=Site Information
+SEE_COMPLETE_LIST=Or see our complete list of 
+LOCAL_COUNTRY_NAMES=local country numbers
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Employee start date
+LIST_ITEM_EDIT_ICON=Edit list item entry
+LIST_ITEM_DELETE_ICON=Delete list item entry

package/src/i18n/messagebundle_es.properties

@@ -0,0 +1,7 @@
+COUNT=Cuenta
+SUGGESTED_TEXT=Búsquedas sugeridas
+RECOMMENDED_TEXT=Páginas recomendadas
+VALUE_STATE_ERROR=Entrada no válida
+VALUE_STATE_WARNING=Advertencia enviada
+VALUE_STATE_INFORMATION=Entrada informativa
+VALUE_STATE_SUCCESS=Entrada validada correctamente

package/src/i18n/messagebundle_fr.properties

@@ -0,0 +1,7 @@
+COUNT=Comte
+SUGGESTED_TEXT=Recherches suggérées
+RECOMMENDED_TEXT=Pages recommandées
+VALUE_STATE_ERROR=Entrée non valide
+VALUE_STATE_WARNING=Avertissement édité
+VALUE_STATE_INFORMATION=Entrée pour information
+VALUE_STATE_SUCCESS=Entrée validée correctement

package/src/themes/Accordion.css

@@ -0,0 +1,33 @@
+:host {
+  --udex-accordion-heading-color: var(--sapTitleColor, var(--udexCoreHeadingDark));
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--sapFontSize, 16px);
+}
+
+.udex-accordion__head {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--udexSpacer16, 16px);
+}
+
+.udex-accordion__headline {
+  font-size: var(--sapFontHeader3Size,var(--udexTypographyHeadingRegularXSFontSize, 24px));
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  line-height: var(--udexTypographyHeadingLineHeight, 26px);
+  margin: var(--udexSpacer8, 8px);
+  color: var(--udex-accordion-heading-color);
+}
+
+.udex-accordion__btn {
+  height: 42px;
+}
+
+.udex-accordion__btn::part(button){
+  padding-inline: var(--udexSpacer12,12px);
+}
+
+.udex-accordion__list {
+  list-style: none;
+  padding: 0;
+  margin-inline: 0;
+}

package/src/themes/AccordionItem.css

@@ -0,0 +1,80 @@
+:host {
+  --udex-accordion-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));
+  --udex-accordion-headline-color: var(--sapTextColor, var(--udexCoreTextDark));
+  --udex-accordion-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));
+  --udex-accordion-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
+  --udex-accordion-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));
+  --udex-accordion-border-width: .5px;
+  --udex-accordion-item-header-padding: 12px 12px 12px 8px;
+  --udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--sapProgress_FontSize, 16px);
+}
+
+.udex-accordion-item {
+  list-style-type: none;
+}
+
+.udex-accordion-item__header {
+  align-items: center;
+  color: var(--udex-accordion-headline-color);
+  display: flex;
+  font-size: var(--udex-accordion-headline-font-size);
+  gap: var(--udexSpacer12, 12px);
+  padding: var(--udex-accordion-item-header-padding);
+  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  border-bottom: var(--udex-accordion-border-width) solid var(--udex-accordion-border-color);
+  cursor: pointer;
+}
+
+:host([desktop]) .udex-accordion-item__header:focus,
+.udex-accordion-item__header:focus-visible {
+  outline: 2px solid #002A86;
+  border-radius: 8px;
+}
+
+.udex-accordion-item__icon {
+  height: var(--udex-button-icon-l-size, 18px);
+  width: var(--udex-button-icon-l-size, 18px);
+  color: var(--udex-accordion-icon-color);
+  transform: rotate(0);
+}
+
+.udex-accordion-item__icon-wrapper {
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rtl .udex-accordion-item__icon {
+  transform: rotate(0);
+}
+
+.active .udex-accordion-item__icon {
+  transform: rotate(90deg);
+}
+
+.rtl.active .udex-accordion-item__icon {
+  transform: rotate(-90deg);
+}
+
+.udex-accordion-item__title {
+  margin: 0;
+  font-weight: var(--udex-accordion-title-font-weight);
+  flex: 1;
+}
+
+.udex-accordion-item__content {
+  display: none;
+  margin: var(--udex-accordion-item-content-margin);
+}
+
+.active.udex-accordion-item {
+  border: none;
+}
+
+.active .udex-accordion-item__content {
+  display: block;
+}

package/src/themes/Avatar.css

@@ -0,0 +1,442 @@
+:host {
+  --udex-avatar-badge-size-background-xs-and-s-and-m: 18px;
+  --udex-avatar-badge-size-background-l: 20px;
+  --udex-avatar-badge-size-background-xl: 28px;
+
+  --udex-avatar-badge-size-icon-xs-and-s-and-m: 12px;
+  --udex-avatar-badge-size-icon-l: 14px;
+  --udex-avatar-badge-size-icon-xl: 16px;
+
+  --udex-avatar-size-xs: 32px;
+  --udex-avatar-size-s: 48px;
+  --udex-avatar-size-m: 64px;
+  --udex-avatar-size-l: 84px;
+  --udex-avatar-size-xl: 120px;
+
+  --udex-avatar-font-size-xs: 12px;
+  --udex-avatar-font-size-s: 18px;
+  --udex-avatar-font-size-m: 24px;
+  --udex-avatar-font-size-l: 32px;
+  --udex-avatar-font-size-xl: 48px;
+
+  --udex-avatar-icon-size-xs: 16px;
+  --udex-avatar-icon-size-s: 18px;
+  --udex-avatar-icon-size-m: 24px;
+  --udex-avatar-icon-size-l: 36px;
+  --udex-avatar-icon-size-xl: 52px;
+
+  --udex-avatar-radius-xs: var(--udexRadiusXS, 4px);
+  --udex-avatar-radius-s: var(--udexRadiusXS, 4px);
+  --udex-avatar-radius-m: var(--udexRadiusM, 8px);
+  --udex-avatar-radius-l: var(--udexRadiusM, 8px);
+  --udex-avatar-radius-xl: var(--udexRadiusXL, 16px);
+
+  --udex-avatar-image-default-border-color: var(--udexColorGrey2, #EAECEE);
+  --udex-avatar-image-hover-border-color: var(--udexColorGrey7, #475E75);
+
+  --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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-transparent-default-background-color: hsla(0, 0%, 0%, 0);
+  --udex-avatar-transparent-default-border-color: hsla(0, 0%, 0%, 0);
+  --udex-avatar-transparent-default-icon-color: var(--udexColorGrey9, #223548);
+  --udex-avatar-transparent-hover-backgound-color: hsla(0, 0%, 0%, 0);
+  --udex-avatar-transparent-hover-border-color: var(--udexColorGrey9, #223548);
+  --udex-avatar-transparent-hover-icon-color: var(--udexColorGrey9, #223548);
+
+  --udex-avatar-neutral-default-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));
+  --udex-avatar-neutral-default-border-color: var(--sapAvatar_10_BorderColor, var(--udexColorGrey3));
+  --udex-avatar-neutral-default-icon-color: var(--sapAvatar_10_TextColor , #0070F2);
+  --udex-avatar-neutral-hover-backgound-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));
+  --udex-avatar-neutral-hover-border-color: var(, var(--udexColorGrey5, #8396a8));
+  --udex-avatar-neutral-hover-icon-color: var(--sapAvatar_10_TextColor, #0070F2);
+
+  --udex-avatar-neutral-active-border-color: var(--udexColorBlue9, #0040B0);
+  --udex-avatar-neutral-active-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));
+  --udex-avatar-neutral-active-icon-color: var(--udexColorBlue9, #0040B0);
+}
+
+:host {
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--sapFontSize, 16px);
+  display: inline-block;
+}
+
+:host([interactive]) .udex-avatar:hover {
+  box-shadow: none;
+}
+
+/* Styles for avatar with image inside */
+
+:host([color-scheme]) .udex-avatar.udex-avatar--with-image {
+  background-color: hsla(0, 0%, 0%, 0);
+  border-color: var(--udex-avatar-image-default-border-color);
+}
+
+:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover {
+  border-color: var(--udex-avatar-image-hover-border-color);
+  background-color: hsla(0, 0%, 0%, 0);
+}
+
+/* Badge styles */
+
+.udex-avatar ::slotted([slot="badge"]) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:host([size="XS"]) .udex-avatar ::slotted([slot="badge"]) {
+  width: var(--udex-avatar-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-avatar-badge-size-background-xs-and-s-and-m);
+  font-size: var(--udex-avatar-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="S"]) .udex-avatar ::slotted([slot="badge"]) {
+  width: var(--udex-avatar-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-avatar-badge-size-background-xs-and-s-and-m);
+  font-size: var(--udex-avatar-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="M"]) .udex-avatar ::slotted([slot="badge"]) {
+  width: var(--udex-avatar-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-avatar-badge-size-background-xs-and-s-and-m);
+  font-size: var(--udex-avatar-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="L"]) .udex-avatar ::slotted([slot="badge"]) {
+  width: var(--udex-avatar-badge-size-background-l);
+  height: var(--udex-avatar-badge-size-background-l);
+  font-size: var(--udex-avatar-badge-size-icon-l);
+  padding: 3px;
+}
+
+:host([size="XL"]) .udex-avatar ::slotted([slot="badge"]) {
+  width: var(--udex-avatar-badge-size-background-xl);
+  height: var(--udex-avatar-badge-size-background-xl);
+  font-size: var(--udex-avatar-badge-size-icon-xl);
+  padding: 6px;
+}
+
+/* Size styles */
+
+:host([size="XS"]) .udex-avatar {
+  width: var(--udex-avatar-size-xs);
+  height: var(--udex-avatar-size-xs);
+  font-size: var(--udex-avatar-font-size-xs);
+}
+
+:host([size="XS"][icon]) .udex-avatar {
+  font-size: var(--udex-avatar-icon-size-xs);
+}
+
+:host([size="S"]) .udex-avatar {
+  width: var(--udex-avatar-size-s);
+  height: var(--udex-avatar-size-s);
+  font-size: var(--udex-avatar-font-size-s);
+}
+
+:host([size="S"][icon]) .udex-avatar {
+  font-size: var(--udex-avatar-icon-size-s);
+}
+
+:host([size="M"]) .udex-avatar {
+  width: var(--udex-avatar-size-m);
+  height: var(--udex-avatar-size-m);
+  font-size: var(--udex-avatar-font-size-m);
+}
+
+:host([size="M"][icon]) .udex-avatar {
+  font-size: var(--udex-avatar-icon-size-m);
+}
+
+:host([size="L"]) .udex-avatar {
+  width: var(--udex-avatar-size-l);
+  height: var(--udex-avatar-size-l);
+  font-size: var(--udex-avatar-font-size-l);
+}
+
+:host([size="L"][icon]) .udex-avatar {
+  font-size: var(--udex-avatar-icon-size-l);
+}
+
+:host([size="XL"]) .udex-avatar {
+  width: var(--udex-avatar-size-xl);
+  height: var(--udex-avatar-size-xl);
+  font-size: var(--udex-avatar-font-size-xl);
+}
+
+:host([size="XL"][icon]) .udex-avatar {
+  font-size: var(--udex-avatar-icon-size-xl);
+}
+
+/* Square styles */
+
+:host([size="XS"][shape="Square"]) .udex-avatar {
+  border-radius: var(--udex-avatar-radius-xs);
+}
+
+:host([size="XS"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])) {
+  border-radius: var(--udex-avatar-radius-xs);
+}
+
+:host([size="S"][shape="Square"]) .udex-avatar {
+  border-radius: var(--udex-avatar-radius-s);
+}
+
+:host([size="S"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])) {
+  border-radius: var(--udex-avatar-radius-s);
+}
+
+:host([size="M"][shape="Square"]) .udex-avatar {
+  border-radius: var(--udex-avatar-radius-m);
+}
+
+:host([size="M"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])) {
+  border-radius: var(--udex-avatar-radius-m);
+}
+
+:host([size="L"][shape="Square"]) .udex-avatar {
+  border-radius: var(--udex-avatar-radius-l);
+}
+
+:host([size="L"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])) {
+  border-radius: var(--udex-avatar-radius-l);
+}
+
+:host([size="XL"][shape="Square"]) .udex-avatar {
+  border-radius: var(--udex-avatar-radius-xl);
+}
+
+:host([size="XL"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])) {
+  border-radius: var(--udex-avatar-radius-xl);
+}
+
+/* Blue color scheme styles */
+
+:host([color-scheme="Blue"]) .udex-avatar {
+  background-color: var(--udex-avatar-blue-default-background-color);
+  color: var(--udex-avatar-blue-default-icon-color);
+  border-color: var(--udex-avatar-blue-default-border-color);
+}
+
+: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);
+}
+
+/* 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);
+  border-color: var(--udex-avatar-mango-default-border-color);
+}
+
+: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);
+}
+
+/* Disabled styles */
+
+:host([disabled]) .udex-avatar:hover {
+  border: 0;
+}
+
+/* Red color scheme styles */
+
+:host([color-scheme="Red"]) .udex-avatar {
+  background-color: var(--udex-avatar-red-default-background-color);
+  color: var(--udex-avatar-red-default-icon-color);
+  border-color: var(--udex-avatar-red-default-border-color);
+}
+
+: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);
+}
+
+/* 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);
+  border-color: var(--udex-avatar-raspberry-default-border-color);
+}
+
+: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);
+}
+
+/* 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);
+  border-color: var(--udex-avatar-pink-default-border-color);
+}
+
+: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);
+}
+
+/* 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);
+  border-color: var(--udex-avatar-indigo-default-border-color);
+}
+
+: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);
+}
+
+/* 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);
+  border-color: var(--udex-avatar-teal-default-border-color);
+}
+
+: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);
+}
+
+/* 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);
+  border-color: var(--udex-avatar-green-default-border-color);
+}
+
+: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);
+}
+
+/* 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);
+  border-color: var(--udex-avatar-grey-default-border-color);
+}
+
+: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);
+}
+
+/* Transparent color scheme styles */
+
+:host([color-scheme="Transparent"]) .udex-avatar {
+  background-color: var(--udex-avatar-transparent-default-background-color);
+  color: var(--udex-avatar-transparent-default-icon-color);
+  border-color: var(--udex-avatar-transparent-default-border-color);
+}
+
+:host([color-scheme="Transparent"][interactive]) .udex-avatar:hover {
+  background-color: var(--udex-avatar-transparent-default-background-color);
+  border-color: var(--udex-avatar-transparent-hover-border-color);
+  color: var(--udex-avatar-transparent-default-icon-color);
+}
+
+/* Neutral color scheme styles */
+
+:host([color-scheme="Neutral"]) .udex-avatar {
+  background-color: var(--udex-avatar-neutral-default-background-color);
+  color: var(--udex-avatar-neutral-default-icon-color);
+  border-color: var(--udex-avatar-neutral-default-border-color);
+}
+
+:host([color-scheme="Neutral"][interactive]) .udex-avatar:hover {
+  background-color: var(--udex-avatar-neutral-default-background-color);
+  border-color: var(--udex-avatar-neutral-hover-border-color);
+  color: var(--udex-avatar-neutral-default-icon-color);
+}
+
+:host([interactive]:not([hidden])) .udex-avatar:active, :host([interactive]:not([hidden])) .udex-avatar.udex-avatar--with-image:active {
+  border-color: var(--udex-avatar-neutral-active-border-color);
+  background-color: var(--udex-avatar-neutral-active-background-color);
+  color: var(--udex-avatar-neutral-active-icon-color);
+}