@sapudex/web-components 2.17.1 → 2.18.0

package/src/MediaPlayerTemplate.tsx

@@ -0,0 +1,102 @@
+import type UDExMediaPlayer from "./MediaPlayer.js";
+import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
+import UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
+import "@ui5/webcomponents-icons/dist/play.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function MediaPlayerTemplate(this: UDExMediaPlayer) {
+  const rootClass = "udex-media-player__video video-js";
+
+  return (
+    <>
+      {this.audioOnly ? renderAudioOnlyTemplate.call(this, rootClass) :
+        this._iframeLoad ? renderEmbedTemplate.call(this) :
+          renderStandardTemplate.call(this, rootClass)
+      }
+    </>
+  );
+}
+
+function renderAudioOnlyTemplate(this: UDExMediaPlayer, rootClass: string) {
+  return (
+    <audio
+      id={this.playerElementId}
+      class={`${rootClass} ${this.aspectRatioClass}`}
+      preload="auto">
+      <source src={this.source} type={this.type}/>
+    </audio>
+  );
+}
+
+function renderStandardTemplate(this: UDExMediaPlayer, rootClass: string) {
+  return (
+    <video
+      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>
+  );
+}
+
+function renderEmbedTemplate(this: UDExMediaPlayer) {
+  if (this._iframePosterPreload) {
+    return (
+      <div class={`video-js udex-media-player__iframe-poster ${this.aspectRatioClass}`}>
+        <div class="udex-media-player__vjs-poster" aria-disabled="false">
+          <picture tabindex={-1}><img loading="lazy" alt="" src={this.poster} width={this.width} height={this.height} /></picture>
+          <button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" onClick={this.handleEmbedPlay}>
+            <Icon aria-label="Play Video" name="play"></Icon>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (this._youtubeSrc) {
+    return (
+      <UDExMediaPlayerYoutube
+        source={this.source}
+        width={this.width}
+        height={this.height}
+        class={`video-js ${this.aspectRatioClass}`}
+        {...this.embedVideoFluidClass ? { "fluid-mode": this.embedVideoFluidClass } : {}}
+        onPlaying={this.handleEmbedVideoPlaying}
+        onEnded={this.handleEmbedVideoEnded}
+        onReady={this.handleEmbedVideoReady}
+        onPause={this.handleEmbedVideoPause}>
+      </UDExMediaPlayerYoutube>
+    );
+  }
+
+  if (this._vimeoSrc) {
+    return (
+      <UDExMediaPlayerVimeo
+        source={this.source}
+        width={this.width}
+        height={this.height}
+        title={this.title}
+        aspect-ratio-class={this.aspectRatioClass}
+        {...this.embedVideoFluidClass ? { "fluid-mode": this.embedVideoFluidClass } : {}}
+        onPlaying={this.handleEmbedVideoPlaying}
+        onEnded={this.handleEmbedVideoEnded}
+        onReady={this.handleEmbedVideoReady}
+        onPause={this.handleEmbedVideoPause}>
+      </UDExMediaPlayerVimeo>);
+  }
+}

package/src/MediaPlayerVimeo.ts

@@ -2,9 +2,10 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Player from "@vimeo/player";
-import MediaPlayerVimeoTemplate from "./generated/templates/MediaPlayerVimeoTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+
+import MediaPlayerVimeoTemplate from "./MediaPlayerVimeoTemplate.js";
 
 // Styles
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
@@ -34,10 +35,9 @@ type UDExMediaPLayerViemeoPlayingEventDetail = {
  */
 @customElement({
   tag: "udex-media-player-vimeo",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [MediaPlayerCss],
   template: MediaPlayerVimeoTemplate,
-  dependencies: [],
 })
 /**
  * Fires when video is ready

package/src/MediaPlayerVimeoTemplate.tsx

@@ -0,0 +1,19 @@
+import type UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
+
+export default function MediaPlayerVimeoTemplate(this: UDExMediaPlayerVimeo) {
+  return (
+    <div
+      class={`${this.fluidModeClass} udex-media-player__video udex-media-player__video-embed ${this.aspectRatioClass}`}
+    >
+      <iframe
+        width={this.width}
+        height={this.height}
+        title={this.title}
+        src={this.source}
+        frameBorder={0}
+        allow="accelerometer; autoplay; encrypted-media; gyroscope;"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+}

package/src/MediaPlayerYoutube.ts

@@ -2,10 +2,10 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type { UDExAspectRatio } from "./MediaPlayer.js";
 
-import MediaPlayerYoutubeTemplate from "./generated/templates/MediaPlayerYoutubeTemplate.lit.js";
+import MediaPlayerYoutubeTemplate from "./MediaPlayerYoutubeTemplate.js";
 
 // Styles
 import MediaPlayerYoutubeCss from "./generated/themes/MediaPlayerYoutube.css.js";
@@ -57,7 +57,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  */
 @customElement({
   tag: "udex-media-player-youtube",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [MediaPlayerCss, MediaPlayerYoutubeCss],
   template: MediaPlayerYoutubeTemplate,
 })

package/src/MediaPlayerYoutubeTemplate.tsx

@@ -0,0 +1,7 @@
+import type UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
+
+export default function MediaPlayerYoutubeTemplate(this: UDExMediaPlayerYoutube) {
+  return (
+    <div id="player" class={`udex-media-player__video udex-media-player__video-embed ${this.fluidModeClass}`}></div>
+  );
+}

package/src/Pagination.ts

@@ -2,7 +2,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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -19,22 +19,19 @@ import {
   DISABLED,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
-import "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/nav-back.js";
-import "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
-import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
-import "@ui5/webcomponents-icons/dist/open-command-field.js";
-import "@ui5/webcomponents-icons/dist/close-command-field.js";
 
 // Template
-import PaginationTemplate from "./generated/templates/PaginationTemplate.lit.js";
+import PaginationTemplate from "./PaginationTemplate.js";
 
 // Styles
 import PaginationCss from "./generated/themes/Pagination.css.js";
 
 export interface Page {
+  index: number;
   value: number;
   active: boolean;
+  accessibleName: string;
+  ariaCurrent?: string
 }
 
 export enum UDExPaginationType {
@@ -65,7 +62,7 @@ type UDExPaginationChangeEventDetail = {
  */
 @customElement({
   tag: "udex-pagination",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: PaginationCss,
   template: PaginationTemplate,
   dependencies: [Button],
@@ -300,8 +297,8 @@ class UDExPagination extends UI5Element {
   }
 
   setActive(element: HTMLElement): void {
-    const pageIndex = element.getAttribute("index")
-      ? parseInt(element.getAttribute("index") || "")
+    const pageIndex = element.getAttribute("data-index")
+      ? parseInt(element.getAttribute("data-index") || "")
       : null;
     if (pageIndex === null) {
       return;

package/src/PaginationTemplate.tsx

@@ -0,0 +1,80 @@
+import type UDExPagination from "./Pagination.js";
+import navigationLeftArrow from "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
+import navigationRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import type { AriaCurrent } from "@ui5/webcomponents-base/dist/types.js";
+
+export default function PaginationTemplate(this: UDExPagination) {
+  // This can maybe be cleaned up nicer as we can't simply
+  // return empty("return;") as the renderer expects an element
+  if (!this.pages) { return (<></>); }
+
+  return (
+    <nav class={this.paginationClass} role="navigation" aria-label={this.paginationAccessibleName}>
+      <ul class="udex-pagination__list">
+        <li class="udex-pagination__item--prev udex-pagination__item">
+          <UDExButton
+            aria-disabled={this.effectivePrevButtonDisabled}
+            {...(this._prevButtonPseudoDisabled ? { "_aria-disabled": "" } : {})}
+            accessible-name={this.previousPageAccessibleName}
+            tooltip={this.previousBtnTooltip}
+            onFocusOut={this.handlePrevFocusOut}
+            icon={navigationLeftArrow}
+            onClick={this.setPrevPage}
+            design={UDExButtonDesign.Tertiary}
+            size={UDExButtonSize.Large}
+          ></UDExButton>
+        </li>
+
+        { this.typeFull ? renderFullPagination.call(this) : "" }
+        { this.typeShort ? renderShortPagination.call(this) : "" }
+
+        <li class="udex-pagination__item--next udex-pagination__item">
+          <UDExButton
+            aria-disabled={this.effectiveNextButtonDisabled}
+            {...(this._nextButtonPseudoDisabled ? { "_aria-disabled": "" } : {})}
+            accessible-name={this.nextPageAccessibleName}
+            tooltip={this.nextBtnTooltip}
+            onFocusOut={this.handleNextFocusOut}
+            icon={navigationRightArrow}
+            onClick={this.setNextPage}
+            design={UDExButtonDesign.Tertiary}
+            size={UDExButtonSize.Large}
+          ></UDExButton>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+function renderFullPagination(this: UDExPagination) {
+  return this.pagination.map((page, i) => {
+    return (
+      <li key={i} class="udex-pagination__item">
+        <a
+          class="udex-pagination__page"
+          href="#"
+          aria-label={page.accessibleName}
+          onClick={this.onPageClick}
+          {...(page.active ? { active: "" } : {})}
+          aria-current={page.ariaCurrent as AriaCurrent}
+          data-index={page.index}
+        >
+          <span class="udex-pagination__page--value">{page.value}</span>
+        </a>
+      </li>
+    );
+  });
+}
+
+function renderShortPagination(this: UDExPagination) {
+  return (
+    <li class="udex-pagination__item udex-pagination__item--short" tab-index="-1" aria-label={this.paginationShortAccessibleName}>
+      <span class="udex-pagination__item--short-value">{this.shortTextStart}</span>
+      <span class="udex-pagination__item--short-separator">{this.shortTextSeparator}</span>
+      <span class="udex-pagination__item--short-value">{this.shortTextEnd}</span>
+    </li>
+  );
+}

package/src/RatingIndicator.ts

@@ -2,10 +2,10 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 
 import RatingIndicator from "@ui5/webcomponents/dist/RatingIndicator.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 { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
-import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import RatingIndicatorTemplate from "./RatingIndicatorTemplate.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
@@ -34,7 +34,7 @@ export enum UDExDisplayType {
  */
 @customElement({
   tag: "udex-rating-indicator",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [RatingIndicator.styles, RatingIndicatorCss],
   template: RatingIndicatorTemplate,
   dependencies: [Icon],
@@ -61,10 +61,6 @@ class UDExRatingIndicator extends RatingIndicator {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  get classNames(): string {
-    return `udex-rating-indicator--${this.display.toLowerCase()}`;
-  }
-
   get _ariaLabel(): string {
     const ariaLabelText: string = getEffectiveAriaLabelText(this) || "";
     if (this.totalCount) {
@@ -72,6 +68,10 @@ class UDExRatingIndicator extends RatingIndicator {
     }
     return ariaLabelText;
   }
+
+  get hasTotalCount(): boolean {
+    return !!this.totalCount || this.totalCount === 0;
+  }
 }
 
 UDExRatingIndicator.define();

package/src/RatingIndicatorTemplate.tsx

@@ -0,0 +1,53 @@
+import type UDExRatingIndicator from "./RatingIndicator.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function RatingIndicatorTemplate(this: UDExRatingIndicator) {
+  const rootClass = "udex-rating-indicator";
+  const ui5Class = "ui5-rating-indicator";
+
+  return (
+    <div class={`${rootClass} ${rootClass}--${this.display.toLowerCase()} ${ui5Class}-root`}
+      role="slider"
+      aria-roledescription={this._ariaRoleDescription}
+      aria-valuemin={0}
+      aria-valuenow={this.value}
+      aria-valuemax={this.max}
+      aria-valuetext={`${this.value} of ${this.max}`}
+      aria-orientation="horizontal"
+      aria-disabled={this._ariaDisabled}
+      aria-readonly={this.ariaReadonly}
+      aria-description={this._ariaDescription}
+      tabindex={this.effectiveTabIndex}
+      onFocusIn={this._onfocusin}
+      onFocusOut={this._onfocusout}
+      onClick={this._onclick}
+      onKeyDown={this._onkeydown}
+      title={this.ratingTooltip}
+      aria-label={this._ariaLabel}>
+      <ul class={`${rootClass}__list ${ui5Class}-list`}
+        aria-hidden="true">
+        {this._stars.map(star => (
+          <li data-ui5-value={star.index}
+            class={{
+              "udex-rating-indicator__item ui5-rating-indicator-item": true,
+              "udex-rating-indicator__item-sel ui5-rating-indicator-item-sel": star.selected,
+              "udex-rating-indicator__item-unsel ui5-rating-indicator-item-unsel": !star.selected && !star.halfStar,
+              "udex-rating-indicator__item-half ui5-rating-indicator-item-half": star.halfStar && !star.selected,
+            }}>
+            <UI5Icon data-ui5-value={star.index} name={star.selected ? "favorite" : "unfavorite"}></UI5Icon>
+            {star.halfStar && (
+              <div class={`${rootClass}__half-icon-wrapper ${ui5Class}-half-icon-wrapper`}>
+                <UI5Icon data-ui5-value={star.index} name="favorite" class={`${rootClass}__half-icon ${ui5Class}-half-icon`}></UI5Icon>
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+      {this.hasTotalCount && (
+        <div class={`${rootClass}__total`}>
+          &#40;{this.totalCount}&#41;
+        </div>
+      )}
+    </div>
+  );
+}

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;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;--udex-accordion-item-button-icon-m-size: 16px;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(:dir(rtl)) .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)}:host([expanded]:dir(rtl)) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}.udex-accordion-item__icon{height:var(--udex-accordion-item-button-icon-m-size);width:var(--udex-accordion-item-button-icon-m-size);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/Badge.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-info-badge-text-radius: .375rem;--udex-info-badge-number-radius: 1rem;--udex-info-badge-text-border-width: 1px;--udex-info-badge-text-medium-font-size: .875rem;--udex-info-badge-text-medium-line-height: 1.313rem;--udex-info-badge-text-medium-height: 1.813rem;--udex-info-badge-text-medium-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-text-small-font-size: .75rem;--udex-info-badge-text-small-line-height: 1.125rem;--udex-info-badge-text-small-height: 1.625rem;--udex-info-badge-text-small-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-number-medium-font-size: .875rem;--udex-info-badge-number-medium-line-height: 1rem;--udex-info-badge-number-medium-height: 1rem;--udex-info-badge-number-medium-padding: 0 var(--udexSpacer4);--udex-info-badge-number-small-font-size: .75rem;--udex-info-badge-number-small-line-height: .875rem;--udex-info-badge-number-small-height: .875rem;--udex-info-badge-number-small-padding: 0 var(--udexSpacer4);--udex-badge-icon-color: inherit;--udex-badge-icon-size: var(--udexSpacer12, 12px);--udex-neutral-badge-color-neutral-border-color: var(--sapMessage_NeutralBorderColor, var(--udexColorGrey4, #a9b4be));--udex-neutral-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);--udex-neutral-badge-color-neutral-background: var(--sapNeutralBackground, var(--udexColorNeutralWhite, #ffffff));--udex-info-badge-color-information-border-color: var(--sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2));--udex-info-badge-color-information-text-color: var(--sapInformationColor, var(--udexColorBlue9, #0040b0));--udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff));--udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918));--udex-info-badge-color-positive-text-color: var(--sapSuccessColor, #1e592f);--udex-info-badge-color-positive-background: var(--sapSuccessBackground, var(--udexCoreSemanticSuccess1, #f5fae5));--udex-info-badge-color-warning-border-color: var(--sapWarningBorderColor, var(--udexCoreSemanticWarning7, #c35500));--udex-info-badge-color-warning-text-color: var(--sapWarningColor, #8d2a00);--udex-info-badge-color-warning-background: var(--sapWarningBackground, var(--udexCoreSemanticWarning1, #fff8d6));--udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a));--udex-info-badge-color-negative-text-color: var(--sapErrorColor, #840606);--udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexCoreSemanticError1, #ffeaf4));--udex-number-badge-color-blue-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-blue-background: var(--udexColorBlue7, #0070f2);--udex-number-badge-color-red-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-red-background: var(--sapNegativeBackgroundColor, #d20a0a);--udex-number-badge-color-neutral-background: var(--udexColorNeutralWhite, #ffffff);--udex-number-badge-color-neutral-text-color: var(--udexColorGrey9, #223548)}.udex-badge{box-sizing:border-box;font-family:var(--sapFontFamily, sans-serif);font-size:var(--udex-tags-font-size);display:inline-flex;align-items:center;gap:var(--udexSpacer4, 4px)}.udex-badge__icon{height:var(--udex-badge-icon-size);min-width:var(--udex-badge-icon-size);color:var(--udex-badge-icon-color)}.udex-badge--text.udex-badge--medium{line-height:var(--udex-info-badge-text-medium-line-height);height:var(--udex-info-badge-text-medium-height);font-size:var(--udex-info-badge-text-medium-font-size);padding:var(--udex-info-badge-text-medium-padding)}.udex-badge--text.udex-badge--small{line-height:var(--udex-info-badge-text-small-line-height);height:var(--udex-info-badge-text-small-height);font-size:var(--udex-info-badge-text-small-font-size);padding:var(--udex-info-badge-text-small-padding)}.udex-badge--text{border-radius:var(--udex-info-badge-text-radius)}.udex-badge--text.udex-badge--information{background:var(--udex-info-badge-color-information-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-information-border-color);color:var(--udex-info-badge-color-information-text-color)}.udex-badge--text.udex-badge--neutral{background:var(--udex-neutral-badge-color-neutral-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-neutral-badge-color-neutral-border-color);color:var(--udex-neutral-badge-color-neutral-text-color)}.udex-badge--text.udex-badge--positive{background:var(--udex-info-badge-color-positive-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-positive-border-color);color:var(--udex-info-badge-color-positive-text-color)}.udex-badge--text.udex-badge--negative{background:var(--udex-info-badge-color-negative-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-negative-border-color);color:var(--udex-info-badge-color-negative-text-color)}.udex-badge--text.udex-badge--warning{background:var(--udex-info-badge-color-warning-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-warning-border-color);color:var(--udex-info-badge-color-warning-text-color)}.udex-badge--number{border-radius:var(--udex-info-badge-number-radius)}.udex-badge--number.udex-badge--medium{padding:var(--udex-info-badge-number-medium-padding);height:var(--udex-info-badge-number-medium-height);line-height:var(--udex-info-badge-number-medium-line-height);font-size:var(--udex-info-badge-number-medium-font-size)}.udex-badge--number.udex-badge--small{padding:var(--udex-info-badge-number-small-padding);height:var(--udex-info-badge-number-small-height);font-size:var(--udex-info-badge-number-small-font-size);line-height:var(--udex-info-badge-number-small-line-height)}.udex-badge--number.udex-badge--blue{color:var(--udex-number-badge-color-blue-text-color);background:var(--udex-number-badge-color-blue-background)}.udex-badge--number.udex-badge--red{color:var(--udex-number-badge-color-red-text-color);background:var(--udex-number-badge-color-red-background)}.udex-badge--number.udex-badge--neutral{color:var(--udex-number-badge-color-neutral-text-color);background:var(--udex-number-badge-color-neutral-background)}
+export default `:host{--udex-info-badge-text-radius: .375rem;--udex-info-badge-number-radius: 1rem;--udex-info-badge-text-border-width: 1px;--udex-info-badge-text-medium-font-size: .875rem;--udex-info-badge-text-medium-line-height: 1.313rem;--udex-info-badge-text-medium-height: 1.813rem;--udex-info-badge-text-medium-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-text-small-font-size: .75rem;--udex-info-badge-text-small-line-height: 1.125rem;--udex-info-badge-text-small-height: 1.625rem;--udex-info-badge-text-small-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-number-medium-font-size: .875rem;--udex-info-badge-number-medium-line-height: 1rem;--udex-info-badge-number-medium-height: 1rem;--udex-info-badge-number-medium-padding: 0 var(--udexSpacer4);--udex-info-badge-number-small-font-size: .75rem;--udex-info-badge-number-small-line-height: .875rem;--udex-info-badge-number-small-height: .875rem;--udex-info-badge-number-small-padding: 0 var(--udexSpacer4);--udex-badge-icon-color: inherit;--udex-badge-icon-size: var(--udexSpacer12, 12px);--udex-neutral-badge-color-neutral-border-color: var(--udexColorBlue8, #0057D2);--udex-neutral-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);--udex-neutral-badge-color-neutral-background: var(--sapNeutralBackground, var(--udexColorNeutralWhite, #ffffff));--udex-info-badge-color-information-border-color: var(--sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2));--udex-info-badge-color-information-text-color: var(--sapInformationColor, var(--udexColorBlue9, #0040b0));--udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff));--udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918));--udex-info-badge-color-positive-text-color: var(--sapSuccessColor, #1e592f);--udex-info-badge-color-positive-background: var(--sapSuccessBackground, var(--udexCoreSemanticSuccess1, #f5fae5));--udex-info-badge-color-warning-border-color: var(--sapWarningBorderColor, var(--udexCoreSemanticWarning7, #c35500));--udex-info-badge-color-warning-text-color: var(--sapWarningColor, #8d2a00);--udex-info-badge-color-warning-background: var(--sapWarningBackground, var(--udexCoreSemanticWarning1, #fff8d6));--udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a));--udex-info-badge-color-negative-text-color: var(--sapErrorColor, #840606);--udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexCoreSemanticError1, #ffeaf4));--udex-number-badge-color-blue-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-blue-background: var(--udexColorBlue8, #0057D2);--udex-number-badge-color-red-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-red-background: var(--sapNegativeBackgroundColor, #d20a0a);--udex-number-badge-color-neutral-background: var(--udexColorNeutralWhite, #ffffff);--udex-number-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);--udex-text-badge-grey-light-border-color: var(--udexColorGrey3, #D5DADD);--udex-text-badge-grey-light-text-color: var(--udexColorGrey8, #354A5F);--udex-text-badge-grey-light-background: var(--udexColorGrey1, #F5F6F7);--udex-text-badge-grey-dark-border-color: var(--udexColorGrey9, #223548);--udex-text-badge-grey-dark-text-color: var(--udexColorGrey1, #F5F6F7);--udex-text-badge-grey-dark-background: var(--udexColorGrey8, #354A5F);--udex-text-badge-red-light-border-color: var(--udexColorRed3, #FFB2D2);--udex-text-badge-red-light-text-color: var(--udexColorRed8, #AA0808);--udex-text-badge-red-light-background: var(--udexColorRed1, #FFEAF4);--udex-text-badge-red-dark-border-color: var(--udexColorRed9, #840606);--udex-text-badge-red-dark-text-color: var(--udexColorRed1, #FFEAF4);--udex-text-badge-red-dark-background: var(--udexColorRed8, #AA0808);--udex-text-badge-mango-light-border-color: var(--udexColorMango3, #FFDF72);--udex-text-badge-mango-light-text-color: var(--udexColorMango8, #A93E00);--udex-text-badge-mango-light-background: var(--udexColorMango1, #FFF8D6);--udex-text-badge-mango-dark-border-color: var(--udexColorMango9, #8D2A00);--udex-text-badge-mango-dark-text-color: var(--udexColorMango1, #FFF8D6);--udex-text-badge-mango-dark-background: var(--udexColorMango8, #A93E00);--udex-text-badge-green-light-border-color: var(--udexColorGreen3, #BDE986);--udex-text-badge-green-light-text-color: var(--udexColorGreen8, #256F3A);--udex-text-badge-green-light-background: var(--udexColorGreen1, #F5FAE5);--udex-text-badge-green-dark-border-color: var(--udexColorGreen9, #1E592F);--udex-text-badge-green-dark-text-color: var(--udexColorGreen1, #F5FAE5);--udex-text-badge-green-dark-background: var(--udexColorGreen8, #256F3A);--udex-text-badge-teal-light-border-color: var(--udexColorTeal3, #64EDD2);--udex-text-badge-teal-light-text-color: var(--udexColorTeal8, #046C7A);--udex-text-badge-teal-light-background: var(--udexColorTeal1, #DAFDF5);--udex-text-badge-teal-dark-border-color: var(--udexColorTeal9, #035663);--udex-text-badge-teal-dark-text-color: var(--udexColorTeal1, #DAFDF5);--udex-text-badge-teal-dark-background: var(--udexColorTeal8, #046C7A);--udex-text-badge-blue-light-border-color: var(--udexColorBlue3, #A6E0FF);--udex-text-badge-blue-light-text-color: var(--udexColorBlue8, #0057D2);--udex-text-badge-blue-light-background: var(--udexColorBlue1, #EBF8FF);--udex-text-badge-blue-dark-border-color: var(--udexColorBlue9, #0040B0);--udex-text-badge-blue-dark-text-color: var(--udexColorBlue1, #EBF8FF);--udex-text-badge-blue-dark-background: var(--udexColorBlue8, #0057D2);--udex-text-badge-indigo-light-border-color: var(--udexColorIndigo3, #D3B6FF);--udex-text-badge-indigo-light-text-color: var(--udexColorIndigo8, #470CED);--udex-text-badge-indigo-light-background: var(--udexColorIndigo1, #F1ECFF);--udex-text-badge-indigo-dark-border-color: var(--udexColorIndigo9, #2C13AD);--udex-text-badge-indigo-dark-text-color: var(--udexColorIndigo1, #F1ECFF);--udex-text-badge-indigo-dark-background: var(--udexColorIndigo8, #470CED);--udex-text-badge-pink-light-border-color: var( --udexColorPink3, #FFAFED);--udex-text-badge-pink-light-text-color: var(--udexColorPink8, #A100C2);--udex-text-badge-pink-light-background: var(--udexColorPink1, #FFF0FA);--udex-text-badge-pink-dark-border-color: var(--udexColorPink9, #7800A4);--udex-text-badge-pink-dark-text-color: var(--udexColorPink1, #FFF0FA);--udex-text-badge-pink-dark-background: var(--udexColorPink8, #A100C2);--udex-text-badge-raspberry-light-border-color: var(--udexColorRaspberry3, #FECBDA);--udex-text-badge-raspberry-light-text-color: var(--udexColorRaspberry8, #BA066C);--udex-text-badge-raspberry-light-background: var(--udexColorRaspberry1, #FFF0F5);--udex-text-badge-raspberry-dark-border-color: var(--udexColorRaspberry9, #9B015D);--udex-text-badge-raspberry-dark-text-color: var(--udexColorRaspberry1, #FFF0F5);--udex-text-badge-raspberry-dark-background: var(--udexColorRaspberry8, #BA066C)}.udex-badge{box-sizing:border-box;font-family:var(--sapFontFamily, sans-serif);font-size:var(--udex-tags-font-size);display:inline-flex;align-items:center;gap:var(--udexSpacer4, 4px)}.udex-badge__icon{height:var(--udex-badge-icon-size);min-width:var(--udex-badge-icon-size);color:var(--udex-badge-icon-color)}.udex-badge--text.udex-badge--medium{line-height:var(--udex-info-badge-text-medium-line-height);height:var(--udex-info-badge-text-medium-height);font-size:var(--udex-info-badge-text-medium-font-size);padding:var(--udex-info-badge-text-medium-padding)}.udex-badge--text.udex-badge--small{line-height:var(--udex-info-badge-text-small-line-height);height:var(--udex-info-badge-text-small-height);font-size:var(--udex-info-badge-text-small-font-size);padding:var(--udex-info-badge-text-small-padding)}.udex-badge--text{border-radius:var(--udex-info-badge-text-radius)}.udex-badge--text.udex-badge--information{background:var(--udex-info-badge-color-information-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-information-border-color);color:var(--udex-info-badge-color-information-text-color)}.udex-badge--text.udex-badge--neutral{background:var(--udex-neutral-badge-color-neutral-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-neutral-badge-color-neutral-border-color);color:var(--udex-neutral-badge-color-neutral-text-color)}.udex-badge--text.udex-badge--neutral .udex-badge__icon{color:var(--udex-neutral-badge-color-neutral-border-color)}.udex-badge--text.udex-badge--positive{background:var(--udex-info-badge-color-positive-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-positive-border-color);color:var(--udex-info-badge-color-positive-text-color)}.udex-badge--text.udex-badge--negative{background:var(--udex-info-badge-color-negative-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-negative-border-color);color:var(--udex-info-badge-color-negative-text-color)}.udex-badge--text.udex-badge--warning{background:var(--udex-info-badge-color-warning-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-warning-border-color);color:var(--udex-info-badge-color-warning-text-color)}.udex-badge--text.udex-badge--grey-dark{background:var(--udex-text-badge-grey-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-grey-dark-border-color);color:var(--udex-text-badge-grey-dark-text-color)}.udex-badge--text.udex-badge--grey-light{background:var(--udex-text-badge-grey-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-grey-light-border-color);color:var(--udex-text-badge-grey-light-text-color)}.udex-badge--text.udex-badge--red-dark{background:var(--udex-text-badge-red-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-red-dark-border-color);color:var(--udex-text-badge-red-dark-text-color)}.udex-badge--text.udex-badge--red-light{background:var(--udex-text-badge-red-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-red-light-border-color);color:var(--udex-text-badge-red-light-text-color)}.udex-badge--text.udex-badge--mango-dark{background:var(--udex-text-badge-mango-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-mango-dark-border-color);color:var(--udex-text-badge-mango-dark-text-color)}.udex-badge--text.udex-badge--mango-light{background:var(--udex-text-badge-mango-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-mango-light-border-color);color:var(--udex-text-badge-mango-light-text-color)}.udex-badge--text.udex-badge--green-dark{background:var(--udex-text-badge-green-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-green-dark-border-color);color:var(--udex-text-badge-green-dark-text-color)}.udex-badge--text.udex-badge--green-light{background:var(--udex-text-badge-green-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-green-light-border-color);color:var(--udex-text-badge-green-light-text-color)}.udex-badge--text.udex-badge--teal-dark{background:var(--udex-text-badge-teal-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-teal-dark-border-color);color:var(--udex-text-badge-teal-dark-text-color)}.udex-badge--text.udex-badge--teal-light{background:var(--udex-text-badge-teal-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-teal-light-border-color);color:var(--udex-text-badge-teal-light-text-color)}.udex-badge--text.udex-badge--blue-dark{background:var(--udex-text-badge-blue-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-blue-dark-border-color);color:var(--udex-text-badge-blue-dark-text-color)}.udex-badge--text.udex-badge--blue-light{background:var(--udex-text-badge-blue-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-blue-light-border-color);color:var(--udex-text-badge-blue-light-text-color)}.udex-badge--text.udex-badge--indigo-dark{background:var(--udex-text-badge-indigo-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-indigo-dark-border-color);color:var(--udex-text-badge-indigo-dark-text-color)}.udex-badge--text.udex-badge--indigo-light{background:var(--udex-text-badge-indigo-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-indigo-light-border-color);color:var(--udex-text-badge-indigo-light-text-color)}.udex-badge--text.udex-badge--pink-dark{background:var(--udex-text-badge-pink-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-pink-dark-border-color);color:var(--udex-text-badge-pink-dark-text-color)}.udex-badge--text.udex-badge--pink-light{background:var(--udex-text-badge-pink-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-pink-light-border-color);color:var(--udex-text-badge-pink-light-text-color)}.udex-badge--text.udex-badge--raspberry-dark{background:var(--udex-text-badge-raspberry-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-raspberry-dark-border-color);color:var(--udex-text-badge-raspberry-dark-text-color)}.udex-badge--text.udex-badge--raspberry-light{background:var(--udex-text-badge-raspberry-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-raspberry-light-border-color);color:var(--udex-text-badge-raspberry-light-text-color)}.udex-badge--number{border-radius:var(--udex-info-badge-number-radius)}.udex-badge--number.udex-badge--medium{padding:var(--udex-info-badge-number-medium-padding);height:var(--udex-info-badge-number-medium-height);line-height:var(--udex-info-badge-number-medium-line-height);font-size:var(--udex-info-badge-number-medium-font-size)}.udex-badge--number.udex-badge--small{padding:var(--udex-info-badge-number-small-padding);height:var(--udex-info-badge-number-small-height);font-size:var(--udex-info-badge-number-small-font-size);line-height:var(--udex-info-badge-number-small-line-height)}.udex-badge--number.udex-badge--blue{color:var(--udex-number-badge-color-blue-text-color);background:var(--udex-number-badge-color-blue-background)}.udex-badge--number.udex-badge--red{color:var(--udex-number-badge-color-red-text-color);background:var(--udex-number-badge-color-red-background)}.udex-badge--number.udex-badge--neutral{color:var(--udex-number-badge-color-neutral-text-color);background:var(--udex-number-badge-color-neutral-background)}
 `