@sapudex/web-components 2.13.0 → 2.14.0

package/src/Tooltip.ts

@@ -2,9 +2,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import type { PopupBeforeCloseEventDetail } from "@ui5/webcomponents/dist/Popup.js";
 import { HorizontalAlign, Placement, VerticalAlign } from "./types/Dropdown.js";
 
 // Template
@@ -38,7 +40,41 @@ import TooltipCss from "./generated/themes/Tooltip.css.js";
   template: TooltipTemplate,
   dependencies: [Popover],
 })
+/**
+ * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
+ * @public
+ */
+@event("before-open", {
+  cancelable: true,
+})
+
+/**
+ * Fired after the component is opened.
+ * @public
+ */
+@event("open")
+
+/**
+ * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
+ * @public
+ * @param {boolean} escPressed Indicates that `ESC` key has triggered the event.
+ */
+@event("before-close", {
+  cancelable: true,
+})
+
+/**
+ * Fired after the component is closed.
+ * @public
+ */
+@event("close")
 class UDExTooltip extends UI5Element {
+  eventDetails!: {
+    "before-open": void
+    "open": void
+    "before-close": PopupBeforeCloseEventDetail
+    "close": void
+  };
   /**
    * Defines the content of the component.
    *
@@ -155,6 +191,22 @@ class UDExTooltip extends UI5Element {
   onExitDOM(): void {
     this.removeEventListener("close", this._onClose);
   }
+
+  handleBeforeOpen(e: CustomEvent<void>): void {
+    this.fireDecoratorEvent("before-open", e.detail);
+  }
+
+  handleOpen(e: CustomEvent<void>): void {
+    this.fireDecoratorEvent("open", e.detail);
+  }
+
+  handleBeforeClose(e: CustomEvent<PopupBeforeCloseEventDetail>): void {
+    this.fireDecoratorEvent("before-close", e.detail);
+  }
+
+  handleClose(e: CustomEvent<void>): void {
+    this.fireDecoratorEvent("close", e.detail);
+  }
 }
 
 UDExTooltip.define();

package/src/Upload.ts

@@ -362,3 +362,4 @@ class UDExUpload extends UI5Element {
 UDExUpload.define();
 
 export default UDExUpload;
+export type { UDExUploadBaseEventDetail, UDExUploadFileChangeEventDetail, UDExUploadFileDeleteEventDetail };

package/src/UploadItem.ts

@@ -9,10 +9,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import {
-  REMOVE_FILE_TEXT,
-  TERMINATED_FILE_STATUS_TEXT, UPLOADING_FILE_STATUS_TEXT,
-} from "./generated/i18n/i18n-defaults.js";
+import { REMOVE_FILE_TEXT, TERMINATED_FILE_STATUS_TEXT, UPLOADING_FILE_STATUS_TEXT } from "./generated/i18n/i18n-defaults.js";
 import UDExListItem from "./ListItem.js";
 import UDExProgressBar from "./ProgressBar.js";
 import UDExLink from "./Link.js";

package/src/Wizard.ts

@@ -16,13 +16,13 @@ import { RESPONSIVE_BREAKPOINTS, UDExWindowSize } from "./types/common.js";
 
 const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
 
-type AccessibilityInformation = {
+export type AccessibilityInformation = {
   ariaSetsize: number,
   ariaPosinset: number,
   ariaLabel: string,
 }
 
-type StepInfo = {
+export type StepInfo = {
   icon?: string,
   titleText?: string,
   subtitleText?: string,

package/src/WizardTab.ts

@@ -2,11 +2,11 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import UI5WizardTab from "@ui5/webcomponents-fiori/dist/WizardTab.js";
+import { UDExWindowSize } from "./types/common.js";
 
 // Styles
 import wizardTabCss from "@ui5/webcomponents-fiori/dist/generated/themes/WizardTab.css.js";
 import WizardTabCss from "./generated/themes/WizardTab.css.js";
-import { UDExWindowSize } from "./types/common.js";
 
 /**
  * @class

package/src/generated/templates/TooltipTemplate.lit.ts

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type Tooltip from "../../Tooltip.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Tooltip, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} .opener="${ifDefined(this.opener)}" ?open="${this.open}" class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-role="${ifDefined(this.accessibleRole)}" ?prevent-initial-focus="${this.preventInitialFocus}" ?prevent-focus-restore="${this.preventFocusRestore}">${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover .opener="${ifDefined(this.opener)}" ?open="${this.open}" class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-role="${ifDefined(this.accessibleRole)}" ?prevent-initial-focus="${this.preventInitialFocus}" ?prevent-focus-restore="${this.preventFocusRestore}">${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></ui5-popover>`;}
+function block0 (this: Tooltip, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} .opener="${ifDefined(this.opener)}" ?open="${this.open}" class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-role="${ifDefined(this.accessibleRole)}" ?prevent-initial-focus="${this.preventInitialFocus}" ?prevent-focus-restore="${this.preventFocusRestore}" @ui5-open="${ifDefined(this.handleOpen)}" @ui5-close="${ifDefined(this.handleClose)}" @ui5-before-close="${ifDefined(this.handleBeforeClose)}" @ui5-before-open="${ifDefined(this.handleBeforeOpen)}">${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover .opener="${ifDefined(this.opener)}" ?open="${this.open}" class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-role="${ifDefined(this.accessibleRole)}" ?prevent-initial-focus="${this.preventInitialFocus}" ?prevent-focus-restore="${this.preventFocusRestore}" @ui5-open="${ifDefined(this.handleOpen)}" @ui5-close="${ifDefined(this.handleClose)}" @ui5-before-close="${ifDefined(this.handleBeforeClose)}" @ui5-before-open="${ifDefined(this.handleBeforeOpen)}">${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></ui5-popover>`;}
 function block1 (this: Tooltip, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tooltip-title">${ifDefined(this.title)}</div>`;}
 
 function template(this: Tooltip) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-event-ribbon-dark-text-color: var(--udexColorNeutralWhite);--udex-event-ribbon-light-text-color: var(--udexColorNeutralBlack);--udex-event-ribbon-light-grey1-default-background-color: var(--udexColorGrey1);--udex-event-ribbon-light-grey1-hover-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-default-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-hover-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-default-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-hover-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-default-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-hover-background-color: var(--udexColorGrey5);--udex-event-ribbon-light-blue1-default-background-color: var(--udexColorBlue1);--udex-event-ribbon-light-blue1-hover-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-default-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-hover-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-default-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-hover-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-default-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-hover-background-color: var(--udexColorBlue5);--udex-event-ribbon-light-teal1-default-background-color: var(--udexColorTeal1);--udex-event-ribbon-light-teal1-hover-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-default-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-hover-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-default-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-hover-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-default-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-hover-background-color: var(--udexColorTeal5);--udex-event-ribbon-light-green1-default-background-color: var(--udexColorGreen1);--udex-event-ribbon-light-green1-hover-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-default-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-hover-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-default-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-hover-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-default-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-hover-background-color: var(--udexColorGreen5);--udex-event-ribbon-light-mango1-default-background-color: var(--udexColorMango1);--udex-event-ribbon-light-mango1-hover-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-default-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-hover-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-default-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-hover-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-default-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-hover-background-color: var(--udexColorMango5);--udex-event-ribbon-light-red1-default-background-color: var(--udexColorRed1);--udex-event-ribbon-light-red1-hover-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-default-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-hover-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-default-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-hover-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-default-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-hover-background-color: var(--udexColorRed5);--udex-event-ribbon-light-raspberry1-default-background-color: var(--udexColorRaspberry1);--udex-event-ribbon-light-raspberry1-hover-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-default-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-hover-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-default-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-hover-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-default-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-hover-background-color: var(--udexColorRaspberry5);--udex-event-ribbon-light-pink1-default-background-color: var(--udexColorPink1);--udex-event-ribbon-light-pink1-hover-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-default-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-hover-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-default-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-hover-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-default-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-hover-background-color: var(--udexColorPink5);--udex-event-ribbon-light-indigo1-default-background-color: var(--udexColorIndigo1);--udex-event-ribbon-light-indigo1-hover-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-default-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-hover-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-default-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-hover-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-default-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-hover-background-color: var(--udexColorIndigo5);--udex-event-ribbon-dark-grey1-default-background-color: var(--udexColorGrey7);--udex-event-ribbon-dark-grey1-hover-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-default-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-hover-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-default-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-hover-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-default-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-hover-background-color: var(--udexColorGrey11);--udex-event-ribbon-dark-blue1-default-background-color: var(--udexColorBlue7);--udex-event-ribbon-dark-blue1-hover-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-default-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-hover-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-default-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-hover-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-default-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-hover-background-color: var(--udexColorBlue11);--udex-event-ribbon-dark-teal1-default-background-color: var(--udexColorTeal7);--udex-event-ribbon-dark-teal1-hover-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-default-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-hover-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-default-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-hover-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-default-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-hover-background-color: var(--udexColorTeal11);--udex-event-ribbon-dark-green1-default-background-color: var(--udexColorGreen7);--udex-event-ribbon-dark-green1-hover-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-default-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-hover-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-default-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-hover-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-default-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-hover-background-color: var(--udexColorGreen11);--udex-event-ribbon-dark-mango1-default-background-color: var(--udexColorMango7);--udex-event-ribbon-dark-mango1-hover-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-default-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-hover-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-default-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-hover-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-default-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-hover-background-color: var(--udexColorMango11);--udex-event-ribbon-dark-red1-default-background-color: var(--udexColorRed7);--udex-event-ribbon-dark-red1-hover-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-default-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-hover-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-default-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-hover-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-default-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-hover-background-color: var(--udexColorRed11);--udex-event-ribbon-dark-raspberry1-default-background-color: var(--udexColorRaspberry7);--udex-event-ribbon-dark-raspberry1-hover-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-default-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-hover-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-default-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-hover-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-default-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-hover-background-color: var(--udexColorRaspberry11);--udex-event-ribbon-dark-pink1-default-background-color: var(--udexColorPink7);--udex-event-ribbon-dark-pink1-hover-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-default-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-hover-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-default-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-hover-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-default-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-hover-background-color: var(--udexColorPink11);--udex-event-ribbon-dark-indigo1-default-background-color: var(--udexColorIndigo7);--udex-event-ribbon-dark-indigo1-hover-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-default-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-hover-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-default-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-hover-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-default-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-hover-background-color: var(--udexColorIndigo11);--udex-event-ribbon-background-color: transparent;--udex-event-ribbon-hover-background-color: transparent;--udex-event-ribbon-background-blend-mode: multiply;--udex-event-ribbon-background-position: center;--udex-event-ribbon-background-size: 100%;--udex-event-ribbon-hover-background-size: 112%;--udex-event-ribbon-margin-xl: 84px;--udex-event-ribbon-margin-m-l: 72px;--udex-event-ribbon-margin-s: 48px;--udex-event-ribbon-margin-xs: 24px;--udex-event-ribbon-logo-height: auto;--udex-event-ribbon-custom-logo-dark-filter: none;--udex-event-ribbon-logo-dark-filter: brightness(0) invert(1);--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12)}.udex-event-ribbon__container{box-sizing:border-box;position:relative;overflow:hidden;text-decoration:none;background-color:var(--udex-event-ribbon-background-color);color:var(--udex-event-ribbon-light-text-color);height:70px;font-family:var(--sapFontFamily, sans-serif);border-radius:var(--udexSpacer12, 12px);padding-block:var(--udexSpacer12, 12px);padding-inline:var(--udexSpacer36, 36px);margin-block:var(--udexSpacer56, 56px) 84px;margin-inline:auto;max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xl));display:flex;align-items:center;gap:var(--udexSpacer32, 32px)}.udex-event-ribbon__container-with-background-image{background-image:var(--udex-event-ribbon-background-image);background-blend-mode:var(--udex-event-ribbon-background-blend-mode);background-position:var(--udex-event-ribbon-background-position);background-size:var(--udex-event-ribbon-background-size);background-repeat:no-repeat;transition:background ease-out .3s}.udex-event-ribbon__container:focus,.udex-event-ribbon__container:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);outline-offset:2px}.udex-event-ribbon__container:hover{background-color:var(--udex-event-ribbon-hover-background-color)}.udex-event-ribbon__container-with-background-image:hover{background-size:var(--udex-event-ribbon-hover-background-size)}:host([mode="dark"]) .udex-event-ribbon__container{color:var(--udex-event-ribbon-dark-text-color)}.udex-event-ribbon__logo{position:relative;display:flex;justify-content:flex-end;width:24.8%}:host([event-logo="sapphire"]){--udex-event-ribbon-logo-height: 40px}:host([event-logo="connect"]){--udex-event-ribbon-logo-height: 18px}:host([event-logo="now"]){--udex-event-ribbon-logo-height: 24px}:host([event-logo="teched"]){--udex-event-ribbon-logo-height: 21px}.udex-event-ribbon__logo-img{max-height:42px;height:var(--udex-event-ribbon-logo-height);max-width:100%}:host([mode="dark"]) .udex-event-ribbon__custom-logo{filter:var(--udex-event-ribbon-custom-logo-dark-filter)}:host([mode="dark"]) .udex-event-ribbon__logo-img:not(.udex-event-ribbon__custom-logo){filter:var(--udex-event-ribbon-logo-dark-filter)}.udex-event-ribbon__text{position:inherit;margin:0;padding:0;font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyBodyLineHeight);width:51%;max-height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis}.udex-event-ribbon__link-container{position:inherit;display:flex;align-items:center;gap:var(--udexSpacer8, 8px);width:21%}.udex-event-ribbon__link-text{line-height:var(--udexTypographyBodyLineHeight);font-size:var(--udexTypographyBodyXSFontSize);white-space:nowrap}[ui5-icon]{width:20px;height:20px;flex-shrink:0;color:inherit}@media (max-width: 1599px){.udex-event-ribbon__container{max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-m-l))}}@media (max-width: 1279px){.udex-event-ribbon__container{margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);gap:var(--udexSpacer24, 24px);padding-inline:var(--udexSpacer24, 24px)}}@media (max-width: 979px){.udex-event-ribbon__container{flex-direction:column;height:fit-content;padding-block:var(--udexSpacer16, 16px);gap:var(--udexSpacer8, 8px);align-items:flex-start;margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-s))}.udex-event-ribbon__link-container,.udex-event-ribbon__text{width:100%}.udex-event-ribbon__logo{justify-content:flex-start;width:100%}.udex-event-ribbon__link-text{white-space:normal}}@media (max-width: 639px){.udex-event-ribbon__container{padding-inline:var(--udexSpacer16, 16px);margin-block:var(--udexSpacer32, 32px) var(--udexSpacer56, 56px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xs))}}
+export default `:host{--udex-event-ribbon-dark-text-color: var(--udexColorNeutralWhite);--udex-event-ribbon-light-text-color: var(--udexColorNeutralBlack);--udex-event-ribbon-light-grey1-default-background-color: var(--udexColorGrey1);--udex-event-ribbon-light-grey1-hover-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-default-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-hover-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-default-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-hover-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-default-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-hover-background-color: var(--udexColorGrey5);--udex-event-ribbon-light-blue1-default-background-color: var(--udexColorBlue1);--udex-event-ribbon-light-blue1-hover-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-default-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-hover-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-default-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-hover-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-default-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-hover-background-color: var(--udexColorBlue5);--udex-event-ribbon-light-teal1-default-background-color: var(--udexColorTeal1);--udex-event-ribbon-light-teal1-hover-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-default-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-hover-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-default-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-hover-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-default-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-hover-background-color: var(--udexColorTeal5);--udex-event-ribbon-light-green1-default-background-color: var(--udexColorGreen1);--udex-event-ribbon-light-green1-hover-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-default-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-hover-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-default-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-hover-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-default-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-hover-background-color: var(--udexColorGreen5);--udex-event-ribbon-light-mango1-default-background-color: var(--udexColorMango1);--udex-event-ribbon-light-mango1-hover-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-default-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-hover-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-default-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-hover-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-default-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-hover-background-color: var(--udexColorMango5);--udex-event-ribbon-light-red1-default-background-color: var(--udexColorRed1);--udex-event-ribbon-light-red1-hover-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-default-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-hover-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-default-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-hover-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-default-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-hover-background-color: var(--udexColorRed5);--udex-event-ribbon-light-raspberry1-default-background-color: var(--udexColorRaspberry1);--udex-event-ribbon-light-raspberry1-hover-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-default-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-hover-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-default-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-hover-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-default-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-hover-background-color: var(--udexColorRaspberry5);--udex-event-ribbon-light-pink1-default-background-color: var(--udexColorPink1);--udex-event-ribbon-light-pink1-hover-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-default-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-hover-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-default-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-hover-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-default-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-hover-background-color: var(--udexColorPink5);--udex-event-ribbon-light-indigo1-default-background-color: var(--udexColorIndigo1);--udex-event-ribbon-light-indigo1-hover-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-default-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-hover-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-default-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-hover-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-default-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-hover-background-color: var(--udexColorIndigo5);--udex-event-ribbon-dark-grey1-default-background-color: var(--udexColorGrey7);--udex-event-ribbon-dark-grey1-hover-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-default-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-hover-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-default-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-hover-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-default-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-hover-background-color: var(--udexColorGrey11);--udex-event-ribbon-dark-blue1-default-background-color: var(--udexColorBlue7);--udex-event-ribbon-dark-blue1-hover-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-default-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-hover-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-default-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-hover-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-default-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-hover-background-color: var(--udexColorBlue11);--udex-event-ribbon-dark-teal1-default-background-color: var(--udexColorTeal7);--udex-event-ribbon-dark-teal1-hover-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-default-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-hover-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-default-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-hover-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-default-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-hover-background-color: var(--udexColorTeal11);--udex-event-ribbon-dark-green1-default-background-color: var(--udexColorGreen7);--udex-event-ribbon-dark-green1-hover-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-default-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-hover-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-default-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-hover-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-default-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-hover-background-color: var(--udexColorGreen11);--udex-event-ribbon-dark-mango1-default-background-color: var(--udexColorMango7);--udex-event-ribbon-dark-mango1-hover-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-default-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-hover-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-default-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-hover-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-default-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-hover-background-color: var(--udexColorMango11);--udex-event-ribbon-dark-red1-default-background-color: var(--udexColorRed7);--udex-event-ribbon-dark-red1-hover-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-default-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-hover-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-default-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-hover-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-default-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-hover-background-color: var(--udexColorRed11);--udex-event-ribbon-dark-raspberry1-default-background-color: var(--udexColorRaspberry7);--udex-event-ribbon-dark-raspberry1-hover-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-default-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-hover-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-default-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-hover-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-default-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-hover-background-color: var(--udexColorRaspberry11);--udex-event-ribbon-dark-pink1-default-background-color: var(--udexColorPink7);--udex-event-ribbon-dark-pink1-hover-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-default-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-hover-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-default-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-hover-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-default-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-hover-background-color: var(--udexColorPink11);--udex-event-ribbon-dark-indigo1-default-background-color: var(--udexColorIndigo7);--udex-event-ribbon-dark-indigo1-hover-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-default-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-hover-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-default-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-hover-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-default-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-hover-background-color: var(--udexColorIndigo11);--udex-event-ribbon-background-color: transparent;--udex-event-ribbon-hover-background-color: transparent;--udex-event-ribbon-background-blend-mode: multiply;--udex-event-ribbon-background-position: center;--udex-event-ribbon-background-size: 100%;--udex-event-ribbon-hover-background-size: 112%;--udex-event-ribbon-margin-xl: 84px;--udex-event-ribbon-margin-m-l: 72px;--udex-event-ribbon-margin-s: 48px;--udex-event-ribbon-margin-xs: 24px;--udex-event-ribbon-logo-height: auto;--udex-event-ribbon-custom-logo-dark-filter: none;--udex-event-ribbon-logo-dark-filter: brightness(0) invert(1);--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12)}.udex-event-ribbon__container{box-sizing:border-box;position:relative;overflow:hidden;text-decoration:none;background-color:var(--udex-event-ribbon-background-color);color:var(--udex-event-ribbon-light-text-color);height:70px;font-family:var(--sapFontFamily, sans-serif);border-radius:var(--udexSpacer12, 12px);padding-block:var(--udexSpacer12, 12px);padding-inline:var(--udexSpacer36, 36px);margin-block:var(--udexSpacer56, 56px) 84px;margin-inline:auto;max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xl));display:flex;align-items:center;gap:var(--udexSpacer32, 32px)}.udex-event-ribbon__container-with-background-image{background-image:var(--udex-event-ribbon-background-image);background-blend-mode:var(--udex-event-ribbon-background-blend-mode);background-position:var(--udex-event-ribbon-background-position);background-size:var(--udex-event-ribbon-background-size);background-repeat:no-repeat;transition:background ease-out .3s}.udex-event-ribbon__container:focus,.udex-event-ribbon__container:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);outline-offset:2px}.udex-event-ribbon__container:hover{background-color:var(--udex-event-ribbon-hover-background-color)}.udex-event-ribbon__container-with-background-image:hover{background-size:var(--udex-event-ribbon-hover-background-size)}:host([mode="dark"]) .udex-event-ribbon__container{color:var(--udex-event-ribbon-dark-text-color)}.udex-event-ribbon__logo{position:relative;display:flex;justify-content:flex-end;width:24%}:host([event-logo="sapphire"]){--udex-event-ribbon-logo-height: 40px}:host([event-logo="connect"]){--udex-event-ribbon-logo-height: 18px}:host([event-logo="now"]){--udex-event-ribbon-logo-height: 24px}:host([event-logo="teched"]){--udex-event-ribbon-logo-height: 21px}.udex-event-ribbon__logo-img{max-height:42px;height:var(--udex-event-ribbon-logo-height);max-width:100%}:host([mode="dark"]) .udex-event-ribbon__custom-logo{filter:var(--udex-event-ribbon-custom-logo-dark-filter)}:host([mode="dark"]) .udex-event-ribbon__logo-img:not(.udex-event-ribbon__custom-logo){filter:var(--udex-event-ribbon-logo-dark-filter)}.udex-event-ribbon__text{position:inherit;margin:0;padding:0;font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyBodyLineHeight);width:52%;max-height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis}.udex-event-ribbon__link-container{position:inherit;display:flex;align-items:center;gap:var(--udexSpacer8, 8px);width:24%}.udex-event-ribbon__link-text{line-height:var(--udexTypographyBodyLineHeight);font-size:var(--udexTypographyBodyXSFontSize);white-space:nowrap}[ui5-icon]{width:20px;height:20px;flex-shrink:0;color:inherit}@media (max-width: 1599px){.udex-event-ribbon__container{max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-m-l))}}@media (max-width: 1279px){.udex-event-ribbon__container{margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);gap:var(--udexSpacer24, 24px);padding-inline:var(--udexSpacer24, 24px)}}@media (max-width: 979px){.udex-event-ribbon__container{flex-direction:column;height:fit-content;padding-block:var(--udexSpacer16, 16px);gap:var(--udexSpacer8, 8px);align-items:flex-start;margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-s))}.udex-event-ribbon__link-container,.udex-event-ribbon__text{width:100%}.udex-event-ribbon__logo{justify-content:flex-start;width:100%}.udex-event-ribbon__link-text{white-space:normal}}@media (max-width: 639px){.udex-event-ribbon__container{padding-inline:var(--udexSpacer16, 16px);margin-block:var(--udexSpacer32, 32px) var(--udexSpacer56, 56px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xs))}}
 `

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `: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-13-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)}
+export default `: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-14-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)}
 `

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `: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-13-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)}
+export default `: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-14-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)}
 `

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-social-media-button-width: var(--udexSpacer32, 32px);--udex-social-media-button-height: var(--udexSpacer32, 32px);--udex-social-media-button-border-width: var(--udexCoreSizeBorderXS, 1px);--udex-social-media-button-border-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-border-radius: var(--udexRadiusXS, 4px);--udex-social-media-button-background-color: var(--sapButton_Neutral_Background, #FFFFFF);--udex-social-media-button-hover-border-color: var(--sapButton_Neutral_Hover_BorderColor, #A9B4BE);--udex-social-media-button-hover-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-hover-icon-color: var(--sapButton_Hover_TextColor, #0040B0);--udex-social-media-button-selected-border-color: var(--sapButton_Neutral_Selected_BorderColor, #0040B0);--udex-social-media-button-selected-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udexLinkOutlineOffset: calc(-1 * var(--udexRadiusXS, 4px));--udexLinkOutlineRadius: calc(var(--udexRadiusXS, 4px) + 2px)}.udex-social-media-button{width:calc(var(--udex-social-media-button-width) - 2 * var(--udex-social-media-button-border-width));height:calc(var(--udex-social-media-button-height) - 2 * var(--udex-social-media-button-border-width));text-align:center;border-radius:var(--udex-social-media-button-border-radius);background:var(--udex-social-media-button-background-color);border:var(--udex-social-media-button-border-width) solid var(--udex-social-media-button-border-color);display:flex;justify-content:center;align-items:center}.udex-social-media-button svg{max-height:16px}.udex-social-media-button:hover{background-color:var(--udex-social-media-button-hover-background-color);border-color:var(--udex-social-media-button-hover-border-color)}.udex-social-media-button:hover:not(:active) svg path{fill:var(--udex-social-media-button-hover-icon-color)}.udex-social-media-button:active{background-color:var(--udex-social-media-button-selected-background-color);border-color:var(--udex-social-media-button-selected-border-color)}.hidden{display:none}
+export default `:host{--udex-social-media-button-width: var(--udexSpacer32, 32px);--udex-social-media-button-height: var(--udexSpacer32, 32px);--udex-social-media-button-image-width: var(--udexSpacer16, 16px);--udex-social-media-button-image-height: var(--udexSpacer16, 16px);--udex-social-media-button-border-width: var(--udexCoreSizeBorderXS, 1px);--udex-social-media-button-border-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-border-radius: var(--udexRadiusXS, 4px);--udex-social-media-button-background-color: var(--sapButton_Neutral_Background, #FFFFFF);--udex-social-media-button-hover-border-color: var(--sapButton_Neutral_Hover_BorderColor, #A9B4BE);--udex-social-media-button-hover-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-hover-icon-color: var(--sapButton_Hover_TextColor, #0040B0);--udex-social-media-button-selected-border-color: var(--sapButton_Neutral_Selected_BorderColor, #0040B0);--udex-social-media-button-selected-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udexLinkOutlineOffset: calc(-1 * var(--udexRadiusXS, 4px));--udexLinkOutlineRadius: calc(var(--udexRadiusXS, 4px) + 2px)}.udex-social-media-button{width:calc(var(--udex-social-media-button-width) - 2 * var(--udex-social-media-button-border-width));height:calc(var(--udex-social-media-button-height) - 2 * var(--udex-social-media-button-border-width));text-align:center;border-radius:var(--udex-social-media-button-border-radius);background:var(--udex-social-media-button-background-color);border:var(--udex-social-media-button-border-width) solid var(--udex-social-media-button-border-color);display:flex;justify-content:center;align-items:center}.udex-social-media-button svg{max-height:var(--udex-social-media-button-image-height);max-width:var(--udex-social-media-button-image-width)}.udex-social-media-button:hover{background-color:var(--udex-social-media-button-hover-background-color);border-color:var(--udex-social-media-button-hover-border-color)}.udex-social-media-button:hover:not(:active) svg path{fill:var(--udex-social-media-button-hover-icon-color)}.udex-social-media-button:active{background-color:var(--udex-social-media-button-selected-background-color);border-color:var(--udex-social-media-button-selected-border-color)}.hidden{display:none}
 `

package/src/themes/EventRibbon.css

@@ -309,7 +309,7 @@
   position: relative;
   display: flex;
   justify-content: flex-end;
-  width: 24.8%;
+  width: 24%;
 }
 
 :host([event-logo='sapphire']) {
@@ -348,7 +348,7 @@
   padding: 0;
   font-size: var(--udexTypographyBodyXSFontSize);
   line-height: var(--udexTypographyBodyLineHeight);
-  width: 51%;
+  width: 52%;
   max-height: 100%;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -363,7 +363,7 @@
   display: flex;
   align-items: center;
   gap: var(--udexSpacer8, 8px);
-  width: 21%;
+  width: 24%;
 }
 
 .udex-event-ribbon__link-text {

package/src/themes/SocialMediaButton.css

@@ -1,6 +1,8 @@
 :host {
   --udex-social-media-button-width: var(--udexSpacer32, 32px);
   --udex-social-media-button-height: var(--udexSpacer32, 32px);
+  --udex-social-media-button-image-width: var(--udexSpacer16, 16px);
+  --udex-social-media-button-image-height: var(--udexSpacer16, 16px);
   --udex-social-media-button-border-width: var(--udexCoreSizeBorderXS, 1px);
   --udex-social-media-button-border-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);
   --udex-social-media-button-border-radius: var(--udexRadiusXS, 4px);
@@ -28,7 +30,8 @@
 }
 
 .udex-social-media-button svg {
-  max-height: 16px;
+  max-height: var(--udex-social-media-button-image-height);
+  max-width: var(--udex-social-media-button-image-width);
 }
 
 .udex-social-media-button:hover {