@sapudex/web-components 2.19.0 → 2.20.1

package/src/Carousel.ts

@@ -11,11 +11,15 @@ import {
 import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import CarouselTemplate from "./CarouselTemplate.js";
 
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
+import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
+import type UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
@@ -76,6 +80,34 @@ class UDExCarousel extends UI5Element {
   @slot({ "default": true, type: HTMLElement, individualSlots: true })
     items!: Array<HTMLElement>;
 
+  /**
+   * Defines the number of items per page depending on the carousel width.
+   *
+   * - 'S' for screens smaller than 600 pixels.
+   * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.
+   * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.
+   * - 'XL' for screens greater than or equal to 1440 pixels.
+   *
+   * One item per page is shown by default.
+   * @default "S1 M1 L1 XL1"
+   * @public
+   */
+  @property()
+    itemsPerPage = "S1 M1 L1 XL1";
+
+  /**
+   * Defines the style of the page indicator.
+   * Available options are:
+   *
+   * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)
+   * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
+   * @since 1.10
+   * @default "Default"
+   * @public
+   */
+  @property()
+    pageIndicatorType: `${CarouselPageIndicatorType}` = "Default";
+
   /**
    * Defines the prev button is disabled
    *
@@ -150,23 +182,21 @@ class UDExCarousel extends UI5Element {
     this.isNextButtonDisabled = !this._carousel?.hasNext;
   }
 
-  _prevButtonClick() {
+  _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
     if (this.isPrevButtonDisabled) {
       return;
     }
 
-    this._carousel?.navigateLeft();
-    this._ui5CarouselRoot?.focus();
+    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
     this._calculateDisabledButtonsState();
   }
 
-  _nextButtonClick() {
+  _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
     if (this.isNextButtonDisabled) {
       return;
     }
 
-    this._carousel?.navigateRight();
-    this._ui5CarouselRoot?.focus();
+    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
     this._calculateDisabledButtonsState();
   }
 

package/src/CarouselTemplate.tsx

@@ -12,6 +12,8 @@ export default function CarouselTemplate(this: Carousel) {
     <div className={this.carouselClass} onKeyDown={this._onkeydown}>
       {this.showNavigationButtons.top && navigation.call(this)}
       <UI5Carousel
+        itemsPerPage={this.itemsPerPage}
+        pageIndicatorType={this.pageIndicatorType}
         id="carousel"
         hideNavigationArrows
         arrowsPlacement={CarouselArrowsPlacement.Navigation}
@@ -32,6 +34,7 @@ function navigation(this: Carousel) {
   return (
     <div class="udex-carousel__navigation-wrapper" part="navigation">
       <UDExButton
+        data-ui5-arrow-back
         size={UDExButtonSize.Large}
         disabled={this.isPrevButtonDisabled}
         class={btnClassName}
@@ -42,6 +45,7 @@ function navigation(this: Carousel) {
         part="prev-button">
       </UDExButton>
       <UDExButton
+        data-ui5-arrow-forward
         size={UDExButtonSize.Large}
         disabled={this.isNextButtonDisabled}
         class={btnClassName}

package/src/DatePicker.ts

@@ -1,23 +1,20 @@
 import DateComponentBase from "@ui5/webcomponents/dist/DateComponentBase.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-// eslint-disable-next-line
-import Calendar, { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
-import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
+import type { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
-import UDExTextField from "./TextField.js";
-import UDExDropdown from "./Dropdown.js";
-import UDExStatusMessage from "./StatusMessage.js";
+import type UDExTextField from "./TextField.js";
+import type UDExDropdown from "./Dropdown.js";
 import UDExValueState from "./types/common.js";
 
 // Template
-import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
+import DatePickerTemplate from "./DatePickerTemplate.js";
 
 // Styles
 import DatePickerCss from "./generated/themes/DatePicker.css.js";
@@ -60,10 +57,9 @@ type UDExDatePickerValueStateChangeEventDetail = {
  */
 @customElement({
   tag: "udex-date-picker",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [DatePickerCss, DatePickerPopoverCss],
   template: DatePickerTemplate,
-  dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],
 })
 /**
  * Fired when the selected dates change.
@@ -506,7 +502,7 @@ class UDExDatePicker extends DateComponentBase {
     this._updateValueAndFireDecoratorEvents((e.target as UDExDatePicker).value, true);
   }
 
-  handleInputClick(e: MouseEvent | KeyboardEvent): void {
+  handleInputClick(e: CustomEvent<void>): void {
     e.preventDefault();
 
     if (this.disabled || this.readonly) {

package/src/DatePickerPopoverTemplate.tsx

@@ -0,0 +1,35 @@
+import Calendar from "@ui5/webcomponents/dist/Calendar.js";
+import type DatePicker from "./DatePicker.js";
+import UDExDropdown from "./Dropdown.js";
+import { Placement } from "./types/Dropdown.js";
+import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
+import CalendarDateRange from "@ui5/webcomponents/dist/CalendarDateRange.js";
+
+export default function DatePickerPopoverTemplate(this: DatePicker) {
+  return (
+    <UDExDropdown
+      id={`udex-${this._id}-calendar__popover`}
+      opener={`udex-${this._id}-calendar__opener`}
+      class="udex-date-picker__popover"
+      placement={Placement.Bottom}
+      horizontal-align="Start"
+      onClose={this._afterDropdownClose}
+      onOpen={this._afterDropdownOpen}>
+      <Calendar
+        class="udex-date-picker__calendar"
+        onSelectionChange={this.handleCalendarChange}
+        selection-mode={this.selectionMode}
+        min-date={this.minDate}
+        max-date={this.maxDate}
+        format-pattern={this.formatPattern}>
+        { this.isRangeMode ?
+          <CalendarDateRange start-value={this.startValue} end-value={this.endValue}></CalendarDateRange>
+          :
+          this._calendarSelectedDates.map(date =>
+            <CalendarDate value={date}></CalendarDate>
+          )
+        }
+      </Calendar>
+    </UDExDropdown>
+  );
+}

package/src/DatePickerTemplate.tsx

@@ -0,0 +1,27 @@
+import type DatePicker from "./DatePicker.js";
+import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+import UDExTextField from "./TextField.js";
+
+export default function DatePickerTemplate(this: DatePicker) {
+  return (
+    <>
+      <UDExTextField
+        class="udex-date-picker__input"
+        _aria-has-popup="grid"
+        icon="appointment-2"
+        value={this.value}
+        label={this.label}
+        accessible-name={this.dateAccessibleName}
+        accessible-name-ref={this.accessibleNameRef}
+        accessible-icon-name={this.accessibleIconName}
+        {...(this.disabled ? { "disabled": true } : {})}
+        {...(this.required ? { "required": true } : {})}
+        {...(this.readonly ? { "readonly": true } : {})}
+        onClickIcon={this.handleInputClick}
+        onChange={this._onInputChange}
+        value-state={this.valueState}
+        supporting-text={this.supportingText} />
+      {DatePickerPopoverTemplate.call(this)}
+    </>
+  );
+}

package/src/MediaPlayerTemplate.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+// No ts check required for video-js tag usage. Please remove during development.
 import type UDExMediaPlayer from "./MediaPlayer.js";
 import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
 import UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
@@ -30,27 +32,26 @@ function renderAudioOnlyTemplate(this: UDExMediaPlayer, rootClass: string) {
 
 function renderStandardTemplate(this: UDExMediaPlayer, rootClass: string) {
   return (
-    <video
+    <video-js
       id={this.playerElementId}
       class={`${rootClass} ${this.aspectRatioClass}`}>
-      <source src={this.source} type={this.type}>
-        {this._tracks.map((element: HTMLTrackElement, index: number) => {
-          const {
-            "default": isDefault, kind, src, srclang, label
-          } = element;
-          return (
-            <track
-              key={index}
-              kind={kind}
-              src={src}
-              srclang={srclang}
-              label={label}
-              {...(isDefault ? { "default": true } : {})}
-            />
-          );
-        })}
-      </source>
-    </video>
+      <source src={this.source} type={this.type} />
+      {this._tracks.map((element: HTMLTrackElement, index: number) => {
+        const {
+          "default": isDefault, kind, src, srclang, label
+        } = element;
+        return (
+          <track
+            key={index}
+            kind={kind}
+            src={src}
+            srclang={srclang}
+            label={label}
+            {...(isDefault ? { "default": true } : {})}
+          />
+        );
+      })}
+    </video-js>
   );
 }
 

package/src/MessageStripTemplate.tsx

@@ -7,6 +7,8 @@ import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
 import alert from "@ui5/webcomponents-icons/dist/alert.js";
 import { UDExMessageStripDesign } from "./types/MessageStrip.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
 
 export default function MessageStripTemplate(this: UDExMessageStrip) {
   return (
@@ -47,9 +49,9 @@ export default function MessageStripTemplate(this: UDExMessageStrip) {
       </span>
       {!this.hideCloseButton && (
         <UDExButton
-          size="Small"
+          size={UDExButtonSize.Small}
           icon={decline}
-          design="Tertiary"
+          design={UDExButtonDesign.Tertiary}
           onClick={this._closeClick}
           tooltip={this._closeButtonText}
           part="close-button"

package/src/RatingBarTemplate.tsx

@@ -14,6 +14,7 @@ export default function RatingBarTemplate(this: RatingBar) {
       </div>
       <UI5Icon
         aria-labelledby="ratingDescription"
+        role="img"
         name={favorite}
         class={`${rootClass}__icon`}>
       </UI5Icon>

package/src/Review.ts

@@ -2,16 +2,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { REVIEWS, STARS } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
 import UDExRatingBar from "./RatingBar.js";
-import UDExRatingIndicator from "./RatingIndicator.js";
 import type UDExButton from "./Button.js";
-import ReviewTemplate from "./generated/templates/ReviewTemplate.lit.js";
+import ReviewTemplate from "./ReviewTemplate.js";
 
 // Styles
 import ReviewCss from "./generated/themes/Review.css.js";
@@ -35,10 +33,9 @@ import ReviewCss from "./generated/themes/Review.css.js";
  */
 @customElement({
   tag: "udex-review",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: ReviewCss,
   template: ReviewTemplate,
-  dependencies: [UDExRatingBar, UDExRatingIndicator, Icon],
 })
 
 class UDExReview extends UI5Element {

package/src/ReviewItem.ts

@@ -1,20 +1,17 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import UDExRatingIndicator from "./RatingIndicator.js";
-import UDExButton from "./Button.js";
-import ReviewItemTemplate from "./generated/templates/ReviewItemTemplate.lit.js";
+import ReviewItemTemplate from "./ReviewItemTemplate.js";
+import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import ReviewItemCss from "./generated/themes/ReviewItem.css.js";
-import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
@@ -35,10 +32,9 @@ import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
  */
 @customElement({
   tag: "udex-review-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: ReviewItemCss,
   template: ReviewItemTemplate,
-  dependencies: [UDExRatingIndicator, UDExButton],
 })
 
 class UDExReviewItem extends UI5Element {
@@ -129,17 +125,6 @@ class UDExReviewItem extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  _toggleText() {
-    this._textExpanded = !this._textExpanded;
-    if (this._textExpanded) {
-      this._completeText = this.text;
-      this._textElement.classList.add("udex-review-item__text-expanded");
-    } else {
-      this._textElement.classList.remove("udex-review-item__text-expanded");
-      this._completeText = this._visibleText;
-    }
-  }
-
   _handleResizeBound: ResizeObserverCallback;
   _textElement!: HTMLElement;
   _visibleText!: string;
@@ -167,6 +152,17 @@ class UDExReviewItem extends UI5Element {
     this._checkTextOverflow();
   }
 
+  _toggleText() {
+    this._textExpanded = !this._textExpanded;
+    if (this._textExpanded) {
+      this._completeText = this.text;
+      this._textElement.classList.add("udex-review-item__text-expanded");
+    } else {
+      this._textElement.classList.remove("udex-review-item__text-expanded");
+      this._completeText = this._visibleText;
+    }
+  }
+
   _checkTextOverflow() {
     const words = this.text.split(" ");
 

package/src/ReviewItemTemplate.tsx

@@ -0,0 +1,49 @@
+import type ReviewItem from "./ReviewItem.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+
+export default function ReviewItemTemplate(this: ReviewItem) {
+  const rootClass = "udex-review-item";
+
+  return (
+    <div className={this.reviewItemClasses}>
+      <div className={`${rootClass}__rating-container`}>
+        <UDExRatingIndicator
+          value={this.validatedRating}
+          max={this._maxRating}
+          readonly>
+        </UDExRatingIndicator>
+        {this.date && (
+          <slot
+            className={`${rootClass}__date`}
+            slot="date"
+            name="date">
+          </slot>
+        )}
+      </div>
+      <div className={`${rootClass}__text-container`}>
+        <div className={`${rootClass}__title`}>{this.reviewTitle}</div>
+        <div className={`${rootClass}__text-wrapper`}>
+          <p className={`${rootClass}__text`} id={`${rootClass}__text`}>
+            {this._completeText}
+          </p>
+          {this._showTextExpander && (
+            <UDExButton
+              id="reviewExpander"
+              class={`${rootClass}__text-expander`}
+              design={UDExButtonDesign.Invisible}
+              size={UDExButtonSize.Large}
+              onClick={this._toggleText.bind(this)}>
+              {this.buttonText}
+            </UDExButton>
+          )}
+        </div>
+        {this.author && (
+          <slot slot="author" name="author" className={`${rootClass}__author`}></slot>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ReviewTemplate.tsx

@@ -0,0 +1,69 @@
+import type Review from "./Review.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
+
+export default function ReviewTemplate(this: Review) {
+  const rootClass = "udex-review";
+
+  return (
+    this.isEmpty ? (
+      <div className={`${rootClass}__empty-container`}>
+        <slot className={`${rootClass}__default-text`} name="defaultText"></slot>
+        <slot name="reviewButton"></slot>
+      </div>
+    ) : this.withoutBreakdown ? (
+      <div className={`${rootClass}__container-without-breakdown`}>
+        <div className={`${rootClass}__content-without-breakdown`}>
+          <div
+            className={`${rootClass}__rating`}
+            aria-level={2}
+            role="heading"
+            aria-hidden="true">
+            {this.validatedRating}
+          </div>
+          <div className={`${rootClass}__rating-info-without-breakdown`}>
+            <UDExRatingIndicator
+              value={this.validatedRating}
+              max={this._maxRating}
+              readonly>
+            </UDExRatingIndicator>
+            <div className={`${rootClass}__reviews-text`}>{this.reviewsText}</div>
+          </div>
+        </div>
+        <div className={`${rootClass}__additional-content-without-breakdown`}>
+          <slot className={`${rootClass}__default-text`} name="defaultText"></slot>
+          <slot name="reviewButton"></slot>
+        </div>
+      </div>
+    ) : (
+      <div className={`${rootClass}__container`}>
+        <div className={`${rootClass}__content`}>
+          <div className={`${rootClass}__rating-info`}>
+            <div
+              className={`${rootClass}__rating`}
+              aria-level={2}
+              role="heading"
+              aria-hidden="true">
+              {this.validatedRating}
+            </div>
+            <UI5Icon
+              aria-labelledby="ratingDescription"
+              role="img"
+              name={favorite}
+              class={`${rootClass}__icon`}>
+            </UI5Icon>
+          </div>
+          <div className={`${rootClass}__reviews-text`}>{this.reviewsText}</div>
+          <slot name="reviewButton"></slot>
+        </div>
+        <div className={`${rootClass}__additional-content`}>
+          {this.validatedRatingBars.map(bar => (
+            <slot name={bar._individualSlot}></slot>
+          ))}
+        </div>
+        <span id="ratingDescription" class="hidden-text">{this._ratingDescription}</span>
+      </div>
+    )
+  );
+}

package/src/TileTemplate.tsx

@@ -10,6 +10,7 @@ export default function TileTemplate(this: Tile) {
         <a
           className={rootClass}
           part={part}
+          tabindex={0}
           href={this.href}
           target={this.target}
           role="link"

package/src/generated/themes/Quote.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{display:block;width:100%;container-type:inline-size}.udex-quote__container{display:flex;flex-direction:row;width:100%;text-align:left;gap:var(--udexSpacer24)}.udex-quote__container:dir(rtl){text-align:right}:host([image-size="small"]) .udex-quote__container,:host([text-size="small"]) .udex-quote__container{gap:var(--udexSpacer16)}.udex-quote__text,::slotted([slot="author"]),::slotted([slot="link"]){padding:0 50px}::slotted([slot="image"]){display:block;width:120px;height:120px}:host([mask="rectangle"]) ::slotted([slot="image"]){display:block;width:200px;height:100px;background-color:transparent;object-fit:contain}:host([image-size="small"]) ::slotted([slot="image"]){width:var(--udexSpacer64);height:var(--udexSpacer64)}:host([image-size="small"][mask="rectangle"]) ::slotted([slot="image"]){width:160px;height:80px}.udex-quote__text-container{position:relative;margin:0}.udex-quote__text{margin:0 0 var(--udexSpacer24);font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodyXLFontSize, 24px);line-height:var(--udexTypographyBodyLineHeight, 1.5);color:var(--udexColorGrey8, #354A5F)}.udex-quote__text ::slotted(*){margin:0}.udex-quote__text-container:before,.udex-quote__text-container:after{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightMedium, 500);text-align:center;position:absolute;display:inline-block;font-size:84px;line-height:84px;height:58px;width:34px;color:var(--udexColorGrey8, #354A5F);margin-top:-9px}.udex-quote__text-container:before{content:open-quote;top:0;left:0}.udex-quote__text-container:after{content:close-quote;top:0;right:0}:host([text-size="small"]) .udex-quote__text-container:after,:host([text-size="small"]) .udex-quote__text-container:before{font-size:72px;line-height:72px;font-weight:var(--udexTypographyFontWeightRegular, 400);height:50px;width:26px;margin-top:-12px}::slotted([slot="author"]){display:block;margin-bottom:var(--udexSpacer24);font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyHeadingRegularXXSFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--udexColorGrey8, #354A5F)}:host([text-size="small"]) .udex-quote__text{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 1.5);padding-inline:34px}:host([text-size="small"]) ::slotted([slot="author"]){font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);padding-inline:34px}:host([text-size="small"]) ::slotted([slot="link"]){padding-inline:34px}@media screen and (max-width: 1279px){.udex-quote__container{gap:var(--udexSpacer16)}::slotted([slot="author"]){font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);padding:0 34px}::slotted([slot="link"]){padding:0 34px}::slotted([slot="image"]){width:var(--udexSpacer64);height:var(--udexSpacer64)}:host([mask="rectangle"]) ::slotted([slot="image"]){width:160px;height:80px}.udex-quote__text-container:after,.udex-quote__text-container:before{font-size:72px;font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:72px;height:50px;width:26px}.udex-quote__text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 1.5);padding:0 34px}}@media (max-width: 639px){.udex-quote__container,:host([image-placement="right"]) .udex-quote__container{flex-direction:column;gap:var(--udexSpacer16)}::slotted([slot="image"]){margin:0 auto}}
+export default `:host{display:block;width:100%;container-type:inline-size}.udex-quote__container{display:flex;flex-direction:row;width:100%;text-align:left;gap:var(--udexSpacer24)}.udex-quote__container:dir(rtl){text-align:right}:host([image-size="small"]) .udex-quote__container,:host([text-size="small"]) .udex-quote__container{gap:var(--udexSpacer16)}.udex-quote__text,::slotted([slot="author"]),::slotted([slot="link"]){padding:0 50px}::slotted([slot="image"]){display:block;width:120px;height:120px}:host([mask="rectangle"]) ::slotted([slot="image"]){display:block;width:200px;height:100px;background-color:transparent;object-fit:contain}:host([image-size="small"]) ::slotted([slot="image"]){width:var(--udexSpacer64);height:var(--udexSpacer64)}:host([image-size="small"][mask="rectangle"]) ::slotted([slot="image"]){width:160px;height:80px}.udex-quote__text-container{quotes:"\\201c""\\201d";position:relative;margin:0}.udex-quote__text{margin:0 0 var(--udexSpacer24);font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodyXLFontSize, 24px);line-height:var(--udexTypographyBodyLineHeight, 1.5);color:var(--udexColorGrey8, #354A5F)}.udex-quote__text ::slotted(*){margin:0}.udex-quote__text-container:before,.udex-quote__text-container:after{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightMedium, 500);text-align:center;position:absolute;display:inline-block;font-size:84px;line-height:84px;height:58px;width:34px;color:var(--udexColorGrey8, #354A5F);margin-top:-9px}.udex-quote__text-container:before{content:open-quote;top:0;left:0}.udex-quote__text-container:after{content:close-quote;top:0;right:0}:host([text-size="small"]) .udex-quote__text-container:after,:host([text-size="small"]) .udex-quote__text-container:before{font-size:72px;line-height:72px;font-weight:var(--udexTypographyFontWeightRegular, 400);height:50px;width:26px;margin-top:-12px}::slotted([slot="author"]){display:block;margin-bottom:var(--udexSpacer24);font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyHeadingRegularXXSFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--udexColorGrey8, #354A5F)}:host([text-size="small"]) .udex-quote__text{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 1.5);padding-inline:34px}:host([text-size="small"]) ::slotted([slot="author"]){font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);padding-inline:34px}:host([text-size="small"]) ::slotted([slot="link"]){padding-inline:34px}@media screen and (max-width: 1279px){.udex-quote__container{gap:var(--udexSpacer16)}::slotted([slot="author"]){font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);padding:0 34px}::slotted([slot="link"]){padding:0 34px}::slotted([slot="image"]){width:var(--udexSpacer64);height:var(--udexSpacer64)}:host([mask="rectangle"]) ::slotted([slot="image"]){width:160px;height:80px}.udex-quote__text-container:after,.udex-quote__text-container:before{font-size:72px;font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:72px;height:50px;width:26px}.udex-quote__text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 1.5);padding:0 34px}}@media (max-width: 639px){.udex-quote__container{flex-direction:column;gap:var(--udexSpacer16)}:host([image-placement="right"]) .udex-quote__container{flex-direction:column-reverse;gap:var(--udexSpacer16)}::slotted([slot="image"]){margin:0 auto}}
 `

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-19-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-20-1_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-19-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-20-1_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/themes/Quote.css

@@ -54,6 +54,7 @@
 
 /* Text, author and link styles */
 .udex-quote__text-container {
+  quotes: "\201C""\201D";
   position: relative;
   margin: 0;
 }
@@ -180,12 +181,16 @@
 }
 
 @media (max-width: 639px) {
-  .udex-quote__container,
-  :host([image-placement='right']) .udex-quote__container {
+  .udex-quote__container {
     flex-direction: column;
     gap: var(--udexSpacer16);
   }
 
+  :host([image-placement='right']) .udex-quote__container {
+    flex-direction: column-reverse;
+    gap: var(--udexSpacer16);
+  }
+
   ::slotted([slot='image']) {
     margin: 0 auto;
   }