@sapudex/web-components 2.15.0 → 2.16.1

package/src/HeroBannerTemplate.tsx

@@ -0,0 +1,101 @@
+import type HeroBanner from "./HeroBanner.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function HeroBannerTemplate(this: HeroBanner) {
+  const rootClass = "udex-hero-banner";
+
+  return (
+    <div
+      className={this.heroBannerClasses}
+      part="wrapper"
+      style={{
+        backgroundColor: this.wrapperBackgroundColor,
+        ...(this.wrapperBackgroundImage ? { backgroundImage: this.wrapperBackgroundImage } : {})
+      }}>
+      {this.hasBackgroundVideo ? (
+        <div
+          className={`${rootClass}__background-video-wrapper`}
+          tabIndex={0}
+          onKeyDown={this._handleKeydown}>
+          <video
+            autoPlay={this.shouldVideoAutoplay}
+            muted
+            loop
+            playsInline
+            part="background-video"
+            className={`${rootClass}__background-video`}
+            aria-label={this.backgroundVideoLabel}>
+            <source src={this.backgroundVideo} type="video/mp4" />
+          </video>
+          <div className={`${rootClass}__background-video-overlay`}></div>
+          {this.hasBackgroundImage && (
+            <picture>
+              <img
+                loading={this.backgroundImageLoadingStrategy}
+                src={this.backgroundImage}
+                part="background-image"
+                className={`${rootClass}__background-image`}
+                alt={this.backgroundImageLabel}/>
+            </picture>
+          )}
+          <div className={`${rootClass}__content-container`}>
+            <slot
+              id={`${rootClass}__content`}
+              name="content"
+              part="content">
+            </slot>
+            <slot
+              id={`${rootClass}__additionalContent`}
+              name="additionalContent"
+              part="additionalContent">
+            </slot>
+          </div>
+          <button
+            className={`${rootClass}__media-button`}
+            aria-label="Play / Pause button"
+            role="button"
+            onClick={this._toggleMediaButton}>
+            <UI5Icon name={this.mediaButtonIconName}></UI5Icon>
+          </button>
+        </div>
+      ) : (
+        <div className={`${rootClass}__container`}>
+          {this.hasCustomBackgroundPicture ? (
+            <slot name="backgroundPicture"></slot>
+          ) : this.hasBackgroundImage ? (
+            <picture>
+              <img
+                loading={this.backgroundImageLoadingStrategy}
+                src={this.backgroundImage}
+                part="background-image"
+                className={`${rootClass}__background-image`}
+                alt={this.backgroundImageLabel}
+              />
+            </picture>
+          ) : null}
+          <div className={`${rootClass}__content-container`}>
+            <slot
+              id={`${rootClass}__content`}
+              name="content"
+              part="content">
+            </slot>
+            {this.hasAdditionalContent && (
+              <slot
+                id={`${rootClass}__additionalContent`}
+                name="additionalContent"
+                part="additionalContent">
+              </slot>
+            )}
+          </div>
+        </div>
+      )}
+      {this.hasMediaContent && (
+        <slot
+          id={`${rootClass}__mediaContent`}
+          name="mediaContent"
+          part="mediaContent">
+        </slot>
+      )}
+    </div>
+  );
+}

package/src/LinkListItemTemplate.tsx

@@ -30,7 +30,10 @@ export default function LinkListItemTemplate(this: LinkListItem) {
             onClick={this.fireItemClickEvent}>
             {this.label}
           </UDExLink>
-          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+          <UDExDivider
+            class={`${rootClass}__divider`}
+            accessibleRole="presentation">
+          </UDExDivider>
         </>
       )}
       {!this.isLink && (

package/src/List.ts

@@ -59,6 +59,11 @@ type UDExListSelectionChangeEventDetail = {
   dependencies: [],
 })
 
+/**
+   * Fired when selection is changed by user interaction
+   *
+   * @public
+   */
 @event("selection-change", { bubbles: true })
 
 class UDExList extends UI5Element {

package/src/ListGroupHeader.ts

@@ -44,6 +44,11 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
   dependencies: [Icon],
 })
 
+/**
+   * Fired when selectable group header is pressed
+   *
+   * @public
+   */
 @event("header-press", { bubbles: true })
 
 class UDExListGroupHeader extends UDExListGroupHeaderBase {

package/src/ListSelectAll.ts

@@ -45,7 +45,11 @@ type UDExListSelectAllSelectAllEventDetail = {
   template: ListSelectAllTemplate,
   dependencies: [UDExListItem],
 })
-
+/**
+   * Fired when the user clicks on the Select All header.
+   *
+   * @public
+   */
 @event("select-all", { bubbles: true })
 
 class UDExListSelectAll extends UDExListGroupHeaderBase {

package/src/PasswordField.ts

@@ -1,19 +1,16 @@
 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
 import UDExValueState from "./types/common.js";
-import "@ui5/webcomponents-icons/dist/hide.js";
-import "@ui5/webcomponents-icons/dist/show.js";
-
-import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
+import PasswordFieldTemplate from "./PasswordFieldTemplate.js";
 
 export enum UDExInputType {
-  Password = "password",
-  Text = "text",
+  Password = "Password",
+  Text = "Text",
 }
 
 export enum UDExIconType {
@@ -46,7 +43,7 @@ export enum UDExPasswordFieldAutoComplete {
  */
 @customElement({
   tag: "udex-password-field",
-  renderer: litRender,
+  renderer: jsxRenderer,
   template: PasswordFieldTemplate,
   dependencies: [UDExTextField],
 })
@@ -224,8 +221,8 @@ class UDExPasswordField extends UI5Element {
     return !this.disabled && !this.readonly && !this.displayonly && this.showButtonEnabled;
   }
 
-  get iconButton(): UDExIconType | null {
-    return this.renderShowButton ? this.icon : null;
+  get iconButton(): string | undefined {
+    return this.renderShowButton ? this.icon : undefined;
   }
 }
 

package/src/PasswordFieldTemplate.tsx

@@ -0,0 +1,29 @@
+import type UDExPasswordField from "./PasswordField.js";
+import UDExTextField from "./TextField.js";
+import "@ui5/webcomponents-icons/dist/hide.js";
+import "@ui5/webcomponents-icons/dist/show.js";
+
+export default function PasswordFieldTemplate(this: UDExPasswordField) {
+  return (
+    <>
+      <UDExTextField
+        type={this.type}
+        value={this.value}
+        label={this.passwordLabel}
+        autocomplete={this.autocomplete}
+        disabled={this.disabled}
+        readonly={this.readonly}
+        displayonly={this.displayonly}
+        maxlength={this.maxlength}
+        value-state={this.valueState}
+        supporting-text={this.supportingText}
+        accessible-name={this.accessibleName}
+        accessible-name-ref={this.accessibleNameRef}
+        accessible-icon-name={this.showButtonTooltip}
+        show-button-tooltip={this.showButtonTooltip}
+        onui5-click-icon={this.handleShowPassword}
+        icon={this.iconButton}>
+      </UDExTextField>
+    </>
+  );
+}

package/src/RatingBar.ts

@@ -1,13 +1,13 @@
 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { STARS } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
-import RatingBarTemplate from "./generated/templates/RatingBarTemplate.lit.js";
+import RatingBarTemplate from "./RatingBarTemplate.js";
 
 // Styles
 import RatingBarCss from "./generated/themes/RatingBar.css.js";
@@ -31,7 +31,7 @@ import RatingBarCss from "./generated/themes/RatingBar.css.js";
  */
 @customElement({
   tag: "udex-rating-bar",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: RatingBarCss,
   template: RatingBarTemplate,
   dependencies: [Icon],

package/src/RatingBarTemplate.tsx

@@ -0,0 +1,38 @@
+import type RatingBar from "./RatingBar.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
+
+export default function RatingBarTemplate(this: RatingBar) {
+  const rootClass = "udex-rating-bar";
+
+  return (
+    <div className={`${rootClass}__container`}>
+      <div
+        aria-hidden="true"
+        className={`${rootClass}__rating`}>
+        {this.validatedRating}
+      </div>
+      <UI5Icon
+        aria-labelledby="ratingDescription"
+        name={favorite}
+        class={`${rootClass}__icon`}>
+      </UI5Icon>
+      <div className={`${rootClass}__track`}>
+        <div className={`${rootClass}__progress`}></div>
+      </div>
+      {this.showPercentage && (
+        <div
+          role="note"
+          className={`${rootClass}__percentage`}
+          aria-label={this.validatedPercentage}>
+          {this.validatedPercentage}
+        </div>
+      )}
+      <span
+        id="ratingDescription"
+        className="hidden-text">
+        {this._ratingDescription}
+      </span>
+    </div>
+  );
+}

package/src/StatusBadge.ts

@@ -1,7 +1,7 @@
 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 Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
@@ -20,7 +20,7 @@ import {
   STATUS_BADGE_WARNING_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
-import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.js";
+import StatusBadgeTemplate from "./StatusBadgeTemplate.js";
 
 // Styles
 import StatusBadgeCss from "./generated/themes/StatusBadge.css.js";
@@ -60,11 +60,12 @@ export enum BadgeSize {
  */
 @customElement({
   tag: "udex-status-badge",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: StatusBadgeCss,
   template: StatusBadgeTemplate,
   dependencies: [Icon],
 })
+
 class UDExStatusBadge extends UI5Element {
   /**
    * Defines the value state of the component.
@@ -107,7 +108,7 @@ class UDExStatusBadge extends UI5Element {
     return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;
   }
 
-  get ariaTitle() {
+  get ariaTitle(): string {
     switch (IconMapping[this.valueState]) {
     case IconMapping.Edit:
       return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);

package/src/StatusBadgeTemplate.tsx

@@ -0,0 +1,18 @@
+import type StatusBadge from "./StatusBadge.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function StatusBadgeTemplate(this: StatusBadge) {
+  const rootClass = "udex-status-badge";
+
+  return (
+    <div
+      className={rootClass}
+      title={this.ariaTitle}>
+      <UI5Icon
+        class={`${rootClass}__icon`}
+        name={this.iconFieldName}
+        accessibleName={this.badgeAccessibleName}>
+      </UI5Icon>
+    </div>
+  );
+}

package/src/StatusMessage.ts

@@ -1,14 +1,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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExValueState from "./types/common.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 
-import StatusMessageTemplate from "./generated/templates/StatusMessageTemplate.lit.js";
+import StatusMessageTemplate from "./StatusMessageTemplate.js";
 
 // Styles
 import StatusMessageCss from "./generated/themes/StatusMessage.css.js";
@@ -38,7 +38,7 @@ export enum IconMapping {
  */
 @customElement({
   tag: "udex-status-message",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: StatusMessageCss,
   template: StatusMessageTemplate,
   dependencies: [Icon],

package/src/StatusMessageTemplate.tsx

@@ -0,0 +1,20 @@
+import type StatusMessage from "./StatusMessage.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+
+export default function StatusMessageTemplate(this: StatusMessage) {
+  const rootClass = "udex-status-message";
+
+  return (
+    <div className={`${rootClass} ${rootClass}__supporting-text`}>
+      {this.iconFieldName && (
+        <UI5Icon
+          name={this.iconFieldName}
+          class={`${rootClass}__icon`}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+      )}
+      {this.supportingText}
+    </div>
+  );
+}

package/src/Switch.ts

@@ -1,18 +1,12 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents/dist/Switch.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-
+import SwitchTemplate from "./SwitchTemplate.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/accept.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/less.js";
-
-// Template
-import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 
 // Styles
 import SwitchCss from "./generated/themes/Switch.css.js";
@@ -43,7 +37,7 @@ export enum UDExSwitchColor {
  */
 @customElement({
   tag: "udex-switch",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: SwitchCss,
   template: SwitchTemplate,
   dependencies: [Icon],
@@ -134,8 +128,8 @@ class UDExSwitch extends UI5Element {
     }
   }
 
-  get switchTabIndex(): "0" | undefined {
-    return this.disabled ? undefined : "0";
+  get switchTabIndex(): 0 | undefined {
+    return this.disabled ? undefined : 0;
   }
 
   get isActiveTrackClass():

package/src/SwitchTemplate.tsx

@@ -0,0 +1,50 @@
+import type Switch from "./Switch.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import acceptIcon from "@ui5/webcomponents-icons/dist/accept.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+import lessIcon from "@ui5/webcomponents-icons/dist/less.js";
+
+export default function SwitchTemplate(this: Switch) {
+  const rootClass = "udex-switch";
+  const switchId = `${this._id}-switch`;
+
+  return (
+    <div class={`${rootClass}`}>
+      {this.label && (
+        <label
+          id={`${switchId}__label`}
+          for={`${switchId}__input`}
+          class={`${rootClass}__label`}
+          part="label">
+          {this.label}
+        </label>
+      )}
+      <div
+        class={`${rootClass}__container`}
+        role="switch"
+        aria-label={this.accessibleName}
+        aria-labelledby={this.ariaLabeledBy}
+        aria-checked={this.checked}
+        aria-disabled={this.disabled}
+        tabindex={this.switchTabIndex}
+        title={this.tooltip}
+        onClick={this.handleSwitchClick}>
+        <div class={`${rootClass}__track ${this.isActiveTrackClass}`}>
+          <div class={`${rootClass}__handle`}>
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.checked ? acceptIcon : this.isSemanticColor ? declineIcon : lessIcon}
+              mode={IconMode.Decorative}>
+            </UI5Icon>
+          </div>
+        </div>
+        <input
+          id={`${switchId}__input`}
+          class={`${rootClass}__input`}
+          type="checkbox"
+          checked={this.checked}/>
+      </div>
+    </div>
+  );
+}

package/src/TagGroup.ts

@@ -217,20 +217,30 @@ class UDExTagGroup extends UI5Element {
 
   handleTagKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
+
+    if (isEscape(e)) {
+      this.tooltip.open = false;
+      this._nMoreBtn?.focus();
+      return;
+    }
+
     this.fireDecoratorEvent("tag-keydown", { originalEvent: e });
   }
 
   showMoreItems(): void {
     if (this.fireDecoratorEvent("show-more-tags")) {
-      const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
       const moreBtn = this._tokenizer.moreLink;
       if (moreBtn) {
         this._tokenizer.expanded = false;
-        tooltip.opener = moreBtn;
-        tooltip.open = true;
+        this.tooltip.opener = moreBtn;
+        this.tooltip.open = true;
       }
     }
   }
+
+  get tooltip(): UDExTooltip {
+    return this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
+  }
 }
 
 UDExTagGroup.define();

package/src/TextField.ts

@@ -280,10 +280,12 @@ class UDExTextField extends UI5Element {
     labelClasses: string = "";
 
   /**
-   * Defines the inner stored value of the classes of the label.
+   * Defines the type of inner input field.
+   * Note: Only URL and Email types can be used within this property. For other types, user should use dedicated UDEx component.
+   * There is no custom logic on UDEx component side. Property is used only to pass it directly to html input element.
    *
-   * @default "text"
-   * @private
+   * @default "Text"
+   * @public
    */
   @property({ type: String })
     type: "Text" | "Email" | "Number" | "Password" | "Tel" | "URL" | "Search" = "Text";

package/src/Tooltip.ts

@@ -125,6 +125,11 @@ class UDExTooltip extends UI5Element {
   @property()
     verticalAlign: `${VerticalAlign}` = VerticalAlign.Center;
 
+  /**
+   * Defines the ID or DOM Reference of the element at which the popover is shown.
+   * @default undefined
+   * @public
+   */
   @property()
     opener!: HTMLElement | string;
 

package/src/generated/themes/AccordionItem.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-accordion-item-icon-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexCoreHeadingDark));--udex-accordion-item-headline-hover-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px));--udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-item-border-color: var(--sapShell_BorderColor, var(--udexColorGrey3));--udex-accordion-item-border-width: 1px;--udex-accordion-item-background-color: transparent;--udex-accordion-item-hover-background-color: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-accordion-item-header-padding: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-icon-width: 16px;--udex-accordion-item-icon-height: 16px;--udex-accordion-item-label-icon-width: 24px;--udex-accordion-item-label-icon-height: 24px;--udex-accordion-item-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-with-icon-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) calc(var(--udexSpacer16, 16px) + var(--udex-accordion-item-label-icon-width, 24px) + var(--udexSpacer12, 12px));--udex-accordion-item-content-max-height: 1000px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}:host{display:block}[udex-divider]{--udex-divider-padding: 0;--udex-divider-color: var(--udex-accordion-item-border-color)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{display:flex;align-items:center;cursor:pointer;border:none;background:var(--udex-accordion-item-background-color);width:100%;font-family:inherit;color:var(--udex-accordion-item-headline-color);font-size:var(--udex-accordion-item-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1)}.udex-accordion-item__header--large{font-size:var(--udex-accordion-item-headline-large-font-size)}.udex-accordion-item__header:hover{color:var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover~[udex-divider]{--udex-divider-color: var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover{background-color:var(--udex-accordion-item-hover-background-color)}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusM, 8px)}.udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}:host([expanded]) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}.udex-accordion-item__icon{height:var(--udex-button-icon-m-size, 16px);width:var(--udex-button-icon-m-size, 16px);color:var(--udex-accordion-item-icon-color)}.udex-accordion-item__icon-wrapper{min-width:var(--udex-accordion-item-icon-width);height:var(--udex-accordion-item-icon-height);display:inline-flex;align-items:center;justify-content:center}.udex-accordion-item__label-icon-wrapper{min-width:var(--udex-accordion-item-label-icon-width);height:var(--udex-accordion-item-label-icon-height)}.udex-accordion-item__icon-wrapper:not(.udex-accordion-item__label-icon-wrapper){margin-inline-start:auto}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;text-align:left;display:flex;text-align:start;min-height:18px}.udex-accordion-item__content{max-height:0;overflow:hidden;transition:max-height .2s ease-in}.udex-accordion-item__content-inner{padding:var(--udex-accordion-item-content-margin)}.udex-accordion-item--with-title .udex-accordion-item__content-inner{padding:var(--udex-accordion-item-with-icon-content-margin)}:host([expanded]) .udex-accordion-item__content{max-height:var(--udex-accordion-item-content-max-height)}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
+export default `:host{--udex-accordion-item-icon-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexCoreHeadingDark));--udex-accordion-item-headline-hover-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px));--udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-item-border-color: var(--sapShell_BorderColor, var(--udexColorGrey3));--udex-accordion-item-border-width: 1px;--udex-accordion-item-background-color: transparent;--udex-accordion-item-hover-background-color: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-accordion-item-header-padding: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-icon-width: 16px;--udex-accordion-item-icon-height: 16px;--udex-accordion-item-label-icon-width: 24px;--udex-accordion-item-label-icon-height: 24px;--udex-accordion-item-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-with-icon-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) calc(var(--udexSpacer16, 16px) + var(--udex-accordion-item-label-icon-width, 24px) + var(--udexSpacer12, 12px));--udex-accordion-item-content-max-height: 1000px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}:host{display:block}[udex-divider]{--udex-divider-padding: 0;--udex-divider-color: var(--udex-accordion-item-border-color)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{display:flex;align-items:center;cursor:pointer;border:none;background:var(--udex-accordion-item-background-color);width:100%;font-family:inherit;color:var(--udex-accordion-item-headline-color);font-size:var(--udex-accordion-item-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1)}.udex-accordion-item__header--large{font-size:var(--udex-accordion-item-headline-large-font-size)}.udex-accordion-item__header:hover{color:var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover~[udex-divider]{--udex-divider-color: var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover{background-color:var(--udex-accordion-item-hover-background-color)}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusM, 8px)}.udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}:host([expanded]) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}.udex-accordion-item__icon{height:var(--udex-button-icon-m-size, 16px);width:var(--udex-button-icon-m-size, 16px);color:var(--udex-accordion-item-icon-color)}.udex-accordion-item__icon-wrapper{min-width:var(--udex-accordion-item-icon-width);height:var(--udex-accordion-item-icon-height);display:inline-flex;align-items:center;justify-content:center}.udex-accordion-item__label-icon-wrapper{min-width:var(--udex-accordion-item-label-icon-width);height:var(--udex-accordion-item-label-icon-height)}.udex-accordion-item__icon-wrapper:not(.udex-accordion-item__label-icon-wrapper){margin-inline-start:auto}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;display:flex;text-align:start;min-height:18px}.udex-accordion-item__content{max-height:0;overflow:hidden;transition:max-height .2s ease-in}.udex-accordion-item__content-inner{padding:var(--udex-accordion-item-content-margin)}.udex-accordion-item--with-title .udex-accordion-item__content-inner{padding:var(--udex-accordion-item-with-icon-content-margin)}:host([expanded]) .udex-accordion-item__content{max-height:var(--udex-accordion-item-content-max-height)}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
 `

package/src/generated/themes/CountrySelector.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-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-popover-min-width: 0px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4);--udex-country-selector-max-width: 100%;--udex-country-selector-text-offset-left: 50px;--udex-country-selector-text-offset-right: 36px}:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger{cursor:pointer}:host([displayonly])::part(textfield-input),:host([readonly])::part(textfield-input),:host([disabled])::part(textfield-input){cursor:default}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label){transform:translate(var(--udex-country-selector-text-offset-right))}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label):dir(rtl){transform:translate(calc(var(--udex-country-selector-text-offset-right)* -1))}:host([displayonly])::part(textfield-control-btn),.hidden-text{display:none}.udex-country-selector__text{width:100%}:host([hide-flag-images])::part(textfield-input),.udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}:host([hide-flag-images]) [udex-text-field]::part(textfield-input){padding-inline-start:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;max-width:var(--udex-country-selector-max-width);width:100%}.udex-country-selector__trigger--disabled{opacity:var(--udex-country-selector-input-disabled-opacity)}.udex-list::part(content){padding:0}.udex-country-selector__trigger:after{content:attr(value);position:absolute;left:calc(24px + var(--udex-country-selector-flag-width));right:40px;font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}:dir(rtl) .udex-country-selector__trigger:after{right:calc(24px + var(--udex-country-selector-flag-width));left:40px}.udex-text-field__input{inset-inline-start:var(--udexSpacer12)}[udex-text-field][aria-expanded=true]::part(label){line-height:18px;transform:translateY(-110%);padding:0 4px;font-size:12px;background:linear-gradient(transparent 55%,var(--sapField_Background) 45%)}[udex-text-field]::part(label){background:linear-gradient(transparent 55%,var(--sapField_Background) 45%);padding:0 var(--udexSpacer4, 4px);max-width:calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)}[udex-text-field][active]::part(label){padding:6px var(--udexSpacer4, 4px) 0}.udex-country-selector-item__image,.udex-country-selector__image{background-color:var(--udexColorGrey4, #A9B4BE);background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);background-repeat:no-repeat;background-position:1000px 0;position:absolute;top:0;transform:translateY(50%);z-index:1;width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}[udex-list-item]::part(item){position:relative;padding-inline-start:calc(24px + var(--udex-country-selector-flag-width));padding-inline-end:var(--udexSpacer12, 12px)}[udex-text-field][readonly]::part(label){background:var(--sapField_ReadOnly_Background)}[udex-dropdown]{--udex-dropdown-pane-max-width: 100%}[udex-text-field]{--udex-input-padding: 0 var(--udex-country-selector-text-offset-right) 0 var(--udex-country-selector-text-offset-left)}[udex-text-field]:dir(rtl){--udex-input-padding: 0 var(--udex-country-selector-text-offset-left) 0 var(--udex-country-selector-text-offset-right)}[udex-text-field]::part(textfield-input){cursor:pointer}[udex-dropdown]{--udex-dropdown-pane-min-width: var(--udex-country-selector-popover-min-width)}.hidden{position:absolute;width:0px;height:0px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}@media (width < 640px){[udex-dropdown]{--udex-dropdown-pane-min-width-xs: var(--udex-country-selector-popover-min-width)}}
+export default `:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-popover-min-width: 0px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4);--udex-country-selector-max-width: 100%;--udex-country-selector-text-offset-left: 50px;--udex-country-selector-text-offset-right: 36px}:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger{cursor:pointer}:host([displayonly])::part(textfield-input),:host([readonly])::part(textfield-input),:host([disabled])::part(textfield-input){cursor:default}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label){transform:translate(var(--udex-country-selector-text-offset-right))}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label):dir(rtl){transform:translate(calc(var(--udex-country-selector-text-offset-right)* -1))}:host([displayonly])::part(textfield-control-btn),.hidden-text{display:none}.udex-country-selector__text{width:100%}:host([hide-flag-images])::part(textfield-input),.udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}:host([hide-flag-images]) [udex-text-field]::part(textfield-input){padding-inline-start:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;max-width:var(--udex-country-selector-max-width);width:100%}.udex-country-selector__trigger--disabled{opacity:var(--udex-country-selector-input-disabled-opacity)}.udex-list::part(content){padding:0}.udex-country-selector__trigger:after{content:attr(value);position:absolute;left:calc(24px + var(--udex-country-selector-flag-width));right:40px;font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}:dir(rtl) .udex-country-selector__trigger:after{right:calc(24px + var(--udex-country-selector-flag-width));left:40px}.udex-text-field__input{inset-inline-start:var(--udexSpacer12)}[udex-text-field]::part(label){max-width:calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)}[udex-text-field][active]::part(label){padding:6px var(--udexSpacer4, 4px) 0}.udex-country-selector-item__image,.udex-country-selector__image{background-color:var(--udexColorGrey4, #A9B4BE);background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);background-repeat:no-repeat;background-position:1000px 0;position:absolute;top:0;transform:translateY(50%);z-index:1;width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}[udex-list-item]::part(item){position:relative;padding-inline-start:calc(24px + var(--udex-country-selector-flag-width));padding-inline-end:var(--udexSpacer12, 12px)}[udex-dropdown]{--udex-dropdown-pane-max-width: 100%}[udex-text-field]{--udex-input-padding: 0 var(--udex-country-selector-text-offset-right) 0 var(--udex-country-selector-text-offset-left)}[udex-text-field]:dir(rtl){--udex-input-padding: 0 var(--udex-country-selector-text-offset-left) 0 var(--udex-country-selector-text-offset-right)}[udex-text-field]::part(textfield-input){cursor:pointer}[udex-dropdown]{--udex-dropdown-pane-min-width: var(--udex-country-selector-popover-min-width)}.hidden{position:absolute;width:0px;height:0px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}@media (width < 640px){[udex-dropdown]{--udex-dropdown-pane-min-width-xs: var(--udex-country-selector-popover-min-width)}}
 `

package/src/generated/themes/Link.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-link-text-decoration: underline;--udex-link-hover-text-decoration: underline;--udex-link-focused-hover-text-decoration: underline;--udex-link-focus-text-decoration: underline;--udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);--udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);--udex-link-emphasized-text-decoration: none;--udex-link-icon-height: 16px;--udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-link-color: var(--udexColorBlue8);--udex-link-hover-color: var(--udexColorBlue10);--udex-link-active-color: var(--udexColorBlue11);--udex-link-icon-width: 16px;--udex-link-white-space: break-spaces;--udex-link-subtle-color: var(--udexColorGrey8, #354A5F);--udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);--udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);--udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);--udex-link-focus-background-color: transparent;--udex-link-focus-color: inherit;white-space:normal}:host([desktop]:hover:not(:active):focus-within),:host([design="Subtle"][desktop]:hover:not(:active):focus-within),:host([desktop]:focus-within),:host(:focus-visible),:host(:hover){color:var(--udex-link-hover-color)}:host(:active){color:var(--udex-link-active-color)}:host,:host(:visited){color:var(--udex-link-color)}:host([end-icon]) .ui5-link-text{white-space:var(--udex-link-white-space);margin-inline-end:20px}:host([design="Emphasized"]){font-weight:var(--udexTypographyFontWeightBold)}:host([design="Subtle"]){color:var(--udex-link-subtle-color)}:host([design="Subtle"][focused]),:host([design="Subtle"]:hover:not(:active)){color:var(--udex-link-subtle-hover-color)}:host([design="Subtle"]:active){color:var(--udex-link-subtle-active-color)}:host([design="Subtle"]:visited){color:var(--udex-link-subtle-visited-color)}:host([design="Subtle"]) .ui5-link-root:hover{text-decoration:var(--udex-link-hover-text-decoration)}.ui5-link-root{display:inline-flex;align-items:center;overflow:visible;line-height:var(--udex-link-line-height)}[ui5-link][disabled] .linkIcon{opacity:inherit}.ui5-link-root slot{text-decoration:var(--udex-link-text-decoration);display:inline}.ui5-link-root:hover slot{text-decoration:var(--udex-link-hover-text-decoration)}:host(:not([desktop])) .ui5-link-root:focus-visible,:host([design="Emphasized"][desktop]:focus-within),:host([design="Emphasized"][desktop]:hover:not(:active):focus-within),:host([design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active:hover),:host([design="Emphasized"]) slot,:host([design="Emphasized"]:hover) slot,:host([design="Emphasized"][desktop]:hover) slot,:host([end-icon]) slot,:host([icon]) slot{text-decoration:var(--udex-link-emphasized-text-decoration)}:host(:hover) slot{text-decoration:var(--udex-link-hover-text-decoration)}[ui5-icon]{width:var(--udex-link-icon-width);height:var(--udex-link-icon-height)}:host([desktop]:hover:active),:host([desktop]:active){text-decoration:var(--udex-link-focus-text-decoration)}:host .ui5-link-root{outline-offset:var(--udex-link-focus-outline-offset)}:host([design="Subtle"][desktop]) .ui5-link-root:focus-within,:host([desktop]) .ui5-link-root:focus-within,:host .ui5-link-root:focus-visible{outline:var(--sapContent_FocusColor, #002A86) var(--sapContent_FocusStyle, "solid") var(--sapContent_FocusWidth, .125rem);border-radius:var(--udex-link-focus-border-radius)}.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{background-color:var(--udex-link-focus-background-color)}[ui5-link],.ui5-link-icon,.ui5-link-root:active .ui5-link-icon,.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{color:var(--udex-link-focus-color)}.ui5-link-icon{margin-inline-end:0;padding-inline-end:var(--udexSpacer4, 4px)}.ui5-link-end-icon{margin-inline-start:-20px;padding-inline-start:var(--udexSpacer4, 4px)}
+export default `:host{--udex-link-text-decoration: underline;--udex-link-hover-text-decoration: underline;--udex-link-focused-hover-text-decoration: underline;--udex-link-focus-text-decoration: underline;--udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);--udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);--udex-link-emphasized-text-decoration: none;--udex-link-icon-height: 16px;--udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-link-color: var(--udexColorBlue8);--udex-link-hover-color: var(--udexColorBlue10);--udex-link-active-color: var(--udexColorBlue11);--udex-link-icon-width: 16px;--udex-link-white-space: break-spaces;--udex-link-subtle-color: var(--udexColorGrey8, #354A5F);--udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);--udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);--udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);--udex-link-focus-background-color: transparent;--udex-link-focus-color: inherit;white-space:normal}:host([desktop]:hover:not(:active):focus-within),:host([design="Subtle"][desktop]:hover:not(:active):focus-within),:host([desktop]:focus-within),:host(:focus-visible),:host(:hover){color:var(--udex-link-hover-color)}:host(:hover){text-decoration:none}:host(:active){color:var(--udex-link-active-color)}:host,:host(:visited){color:var(--udex-link-color)}:host([end-icon]) .ui5-link-text{white-space:var(--udex-link-white-space);margin-inline-end:var(--udexSpacer20);vertical-align:middle}:host([design="Emphasized"]){font-weight:var(--udexTypographyFontWeightBold)}:host([design="Subtle"]){color:var(--udex-link-subtle-color)}:host([design="Subtle"][focused]),:host([design="Subtle"]:hover:not(:active)){color:var(--udex-link-subtle-hover-color)}:host([design="Subtle"]:active){color:var(--udex-link-subtle-active-color)}:host([design="Subtle"]:visited){color:var(--udex-link-subtle-visited-color)}:host([design="Subtle"]) .ui5-link-root:hover{text-decoration:var(--udex-link-hover-text-decoration)}.ui5-link-root{display:inline-block;overflow:visible;line-height:var(--udex-link-line-height)}[ui5-link][disabled] .linkIcon{opacity:inherit}.ui5-link-root slot{text-decoration:var(--udex-link-text-decoration);display:inline}.ui5-link-root:hover slot{text-decoration:var(--udex-link-hover-text-decoration)}:host(:not([desktop])) .ui5-link-root:focus-visible,:host([design="Emphasized"][desktop]:focus-within),:host([design="Emphasized"][desktop]:hover:not(:active):focus-within),:host([design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active:hover),:host([design="Emphasized"]) slot,:host([design="Emphasized"]:hover) slot,:host([design="Emphasized"][desktop]:hover) slot,:host([end-icon]) slot,:host([icon]) slot{text-decoration:var(--udex-link-emphasized-text-decoration)}:host(:hover) slot{text-decoration:var(--udex-link-hover-text-decoration)}[ui5-icon]{width:var(--udex-link-icon-width);height:var(--udex-link-icon-height)}:host([desktop]:hover:active),:host([desktop]:active){text-decoration:var(--udex-link-focus-text-decoration)}:host .ui5-link-root{outline-offset:var(--udex-link-focus-outline-offset)}:host([design="Subtle"][desktop]) .ui5-link-root:focus-within,:host([desktop]) .ui5-link-root:focus-within,:host .ui5-link-root:focus-visible{outline:var(--sapContent_FocusColor, #002A86) var(--sapContent_FocusStyle, "solid") var(--sapContent_FocusWidth, .125rem);border-radius:var(--udex-link-focus-border-radius)}.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{background-color:var(--udex-link-focus-background-color)}[ui5-link],.ui5-link-icon,.ui5-link-root:active .ui5-link-icon,.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{color:var(--udex-link-focus-color)}.ui5-link-icon{margin-inline-end:0;padding-inline-end:var(--udexSpacer4, 4px);vertical-align:middle;float:none}.ui5-link-end-icon{margin-inline-start:calc(var(--udexSpacer20)* -1);padding-inline-start:var(--udexSpacer4, 4px);vertical-align:middle}
 `