@sapudex/web-components 0.225.0 → 2.0.0

package/src/Breadcrumbs.hbs

@@ -4,15 +4,17 @@
 	<ol @focusin="{{_onfocusin}}">
 		<li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper">
 			<button
+                id="udex-{{this._id}}-breadcrumbs__opener"
                 @click="{{_toggleDropdown}}"
                 class="udex-breadcrumbs__trigger {{_triggerClass}}"
 				accessible-role="button"
 				aria-label="{{_dropdownArrowAccessibleNameText}}"
 				aria-haspopup="true">
-				<ui5-icon
-            name="slim-arrow-down"
-            title="{{_dropdownArrowAccessibleNameText}}">
-        </ui5-icon>
+                <ui5-icon
+                    name="slim-arrow-down"
+                    mode="Decorative"
+                    title="{{_dropdownArrowAccessibleNameText}}">
+                </ui5-icon>
 			</button>
 		</li>
 		{{#each _linksData}}
@@ -22,7 +24,7 @@
                 {{#unless this._isCurrentPageItem}}
                     <span class="udex-breadcrumbs__separator" aria-hidden="true"></span>
                     <udex-link @ui5-click="{{../_onLinkPress}}"
-                        class="udex-breadcrumbs__item"
+                        class="udex-breadcrumbs__item udex-breadcrumbs__item--visible"
                         href="{{this.href}}"
                         target="{{this.target}}"
                         id="{{this._id}}-link"
@@ -35,3 +37,5 @@
 		{{/each}}
 	</ol>
 </nav>
+
+{{>include "./BreadcrumbsPopover.hbs"}}

package/src/Breadcrumbs.ts

@@ -3,21 +3,22 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import {
   isTabNext,
   isTabPrevious,
+  isEscape,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import breadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
+import UI5BreadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/home.js";
 import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
-import BreadcrumbsPopover from "./generated/templates/BreadcrumbsPopoverTemplate.lit.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
@@ -25,8 +26,6 @@ import {
   BREADCRUMBS_ARIA_LABEL,
   BREADCRUMBS_OVERFLOW_ARIA_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-import "@ui5/webcomponents-icons/dist/home.js";
 
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -36,10 +35,10 @@ const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
 
 export type UDExBreadcrumbsItemClickEventDetail = {
   item: UDExBreadcrumbsItem;
-  altKey: boolean;
-  ctrlKey: boolean;
-  metaKey: boolean;
-  shiftKey: boolean;
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  shiftKey?: boolean;
 }
 
 /**
@@ -62,63 +61,44 @@ export type UDExBreadcrumbsItemClickEventDetail = {
 @customElement({
   tag: "udex-breadcrumbs",
   renderer: litRender,
-  styles: [breadcrumbsCss, BreadcrumbsCss],
+  styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],
   template: BreadcrumbsTemplate,
-  staticAreaTemplate: BreadcrumbsPopover,
-  staticAreaStyles: [BreadcrumbsPopoverCss],
-  dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, Icon],
+  dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],
 })
 /**
- * Fires when a `BreadcrumbsItem` is clicked.
- *
- * **Note:** You can prevent browser location change by calling `event.preventDefault()`.
- * @allowPreventDefault
- * @param {HTMLElement} item The clicked item.
- * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
- * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
- * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
- * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
  * @public
  */
-@event<UDExBreadcrumbsItemClickEventDetail>("item-click", {
-  detail: {
-    /**
-     * @public
-     */
-    item: { type: HTMLElement },
-    /**
-     * @public
-     */
-    altKey: { type: Boolean },
-    /**
-     * @public
-     */
-    ctrlKey: { type: Boolean },
-    /**
-     * @public
-     */
-    metaKey: { type: Boolean },
-    /**
-     * @public
-     */
-    shiftKey: { type: Boolean },
-  },
-})
+@event("item-click", { cancelable: true, bubbles: true })
+
 /**
  * Fired after the dropdown is opened.
  *
  * @public
  */
-@event("open")
+@event("open", { bubbles: true })
 
 /**
  * Fired after the dropdown is closed.
  *
  * @public
  */
-@event("close")
+@event("close", { bubbles: true })
 
 class UDExBreadcrumbs extends UI5Element {
+  eventDetails!: {
+    "item-click": UDExBreadcrumbsItemClickEventDetail,
+    "open": void,
+    "close": void,
+  };
+  /**
+   * Defines how many breadcrumb items should be visible
+   *
+   * @default 3
+   * @public
+   */
+  @property({ type: Number })
+    showItems: number = 3;
+
   /**
    * Indicates if dropdown is opened
    *
@@ -128,15 +108,6 @@ class UDExBreadcrumbs extends UI5Element {
   @property({ noAttribute: true, type: Boolean })
     _dropdownOpened!: boolean;
 
-  /**
-   * Defines how many breadcrumb items should be visible
-   *
-   * @default 3
-   * @public
-   */
-  @property({ type: Number, defaultValue: 3, validator: Integer })
-    showItems?: number;
-
   /**
    * Defines the component items.
    *
@@ -146,22 +117,20 @@ class UDExBreadcrumbs extends UI5Element {
   @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
     items!: Array<UDExBreadcrumbsItem>;
 
-  responsivePopover?: UDExDropdown;
-  _itemNavigation?: ItemNavigation;
-  _shouldFocusFirstVisibleItem!: boolean;
-
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine(): Promise<void> {
-    UDExBreadcrumbs.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
+  _responsivePopover?: UDExDropdown;
+  _itemNavigation?: ItemNavigation;
 
   onBeforeRendering(): void {
     this._preprocessItems();
   }
 
   onAfterRendering(): void {
+    this._responsivePopover = this._getResponsePopover();
     this._initItemNavigation();
+    this._handleOutsideClick();
   }
 
   _preprocessItems(): void {
@@ -170,9 +139,8 @@ class UDExBreadcrumbs extends UI5Element {
     });
   }
 
-  async _getResponsePopover(): Promise<UDExDropdown> {
-    const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;
+  _getResponsePopover(): UDExDropdown {
+    return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;
   }
 
   _getFocusableItems(): Array<UDExLink> {
@@ -195,15 +163,6 @@ class UDExBreadcrumbs extends UI5Element {
     return this.getSlottedNodes<UDExBreadcrumbsItem>("items");
   }
 
-  _closeRespPopover(): void {
-    this.responsivePopover && this.responsivePopover.onClose();
-  }
-
-  async _openRespPopover(): Promise<void> {
-    this.responsivePopover = await this._getResponsePopover();
-    this.responsivePopover.onOpen(this._dropdownArrowLink);
-  }
-
   _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void {
     const listItem = e.target as HTMLElement,
       items = this._getItems(),
@@ -213,10 +172,12 @@ class UDExBreadcrumbs extends UI5Element {
       return;
     }
 
-    if (this.fireEvent("item-click", { item }, true)) {
+    if (this.fireDecoratorEvent("item-click", { item })) {
       window.open(item.href, item.target || "_self", "noopener,noreferrer");
-      this.responsivePopover!.onClose();
+      this._toggleDropdown();
     }
+
+    this.setDropdownCloseState();
   }
 
   _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {
@@ -230,15 +191,17 @@ class UDExBreadcrumbs extends UI5Element {
         shiftKey,
       } = e.detail;
 
-    if (!this.fireEvent<UDExBreadcrumbsItemClickEventDetail>("item-click", {
+    if (!this.fireDecoratorEvent("item-click", {
       item,
       altKey,
       ctrlKey,
       metaKey,
       shiftKey,
-    }, true)) {
+    })) {
       e.preventDefault();
     }
+
+    this.setDropdownCloseState();
   }
 
   _isItemVisible(item: UDExBreadcrumbsItem): boolean {
@@ -247,23 +210,18 @@ class UDExBreadcrumbs extends UI5Element {
 
   _afterDropdownOpen(): void {
     this._dropdownOpened = true;
-    this.fireEvent("open");
+    this.fireDecoratorEvent("open");
   }
 
   _afterDropdownClose(): void {
     this._dropdownOpened = false;
-    if (this._shouldFocusFirstVisibleItem) {
-      this._focusFirstVisibleItem();
-    }
-
-    this.fireEvent("close");
+    this.fireDecoratorEvent("close");
   }
 
   _toggleDropdown(): void {
-    if (this._dropdownOpened) {
-      this._closeRespPopover();
-    } else {
-      this._openRespPopover();
+    if (this._responsivePopover) {
+      this._responsivePopover.open = !this._responsivePopover.open;
+      this._dropdownOpened = !this._dropdownOpened;
     }
   }
 
@@ -278,19 +236,23 @@ class UDExBreadcrumbs extends UI5Element {
     const isLastItem = itemIndex === (this.items.length - 2).toString();
     const isFirstItem = itemIndex === "0";
 
-    if (isTabNext(e) && isLastItem) {
-      this._closeRespPopover();
-      this._shouldFocusFirstVisibleItem = true;
+    if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {
+      this._toggleDropdown();
     }
+  }
 
-    if (isTabPrevious(e) && isFirstItem) {
-      this._closeRespPopover();
-    }
+  _handleOutsideClick(): void {
+    document.addEventListener("mousedown", (e: Event) => {
+      if (e.target !== this) {
+        this.setDropdownCloseState();
+      }
+    });
   }
 
-  _focusFirstVisibleItem(): void {
-    Array.from(this.shadowRoot!.querySelectorAll<UDExLink>("[udex-link]"))[0].focus();
-    this._shouldFocusFirstVisibleItem = false;
+  setDropdownCloseState(): void {
+    if (this._responsivePopover) {
+      this._dropdownOpened = false;
+    }
   }
 
   /**

package/src/BreadcrumbsItem.ts

@@ -1,6 +1,6 @@
 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/dist/renderer/JsxRenderer.js";
 import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
 
 /**
@@ -22,7 +22,7 @@ import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
  */
 @customElement({
   tag: "udex-breadcrumbs-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
 })
 class UDExBreadcrumbsItem extends BreadcrumbsItem {
   /**

package/src/BreadcrumbsPopover.hbs

@@ -1,10 +1,9 @@
 <udex-dropdown
   id="udex-{{this._id}}-breadcrumbs__popover"
+  opener="udex-{{this._id}}-breadcrumbs__opener"
   class="udex-breadcrumbs__popover ui5-breadcrumbs-popover"
-  placement-type="Bottom"
-  horizontal-align="Left"
-  @after-open="{{_afterDropdownOpen}}"
-  @after-close="{{_afterDropdownClose}}"
+  placement="Bottom"
+  horizontal-align="Start"
   @keydown="{{_handleKeydown}}">
   <div class="udex-breadcrumbs__popover-content">
     {{#each _dropdownItems}}
@@ -15,9 +14,8 @@
           @ui5-click="{{../_onDropdownLinkPress}}"
           href="{{this.href}}"
           target="{{this.target}}"
-          class="udex-breadcrumbs__item udex-breadcrumbs__item--{{@index}} udex-breadcrumbs__item--with-icon" 
+          class="udex-breadcrumbs__item udex-breadcrumbs__item--with-icon udex-breadcrumbs__item--hidden udex-breadcrumbs__item--{{@index}}"
           icon="{{this.icon}}"
-          icon-placement="Start" 
           accessible-name="{{this.textContent}}"
           data-ui5-stable="{{this.stableDomRef}}">
           {{this.textContent}}
@@ -25,7 +23,7 @@
       {{else if this._isCurrentPageItem}}
         <span
           id="{{this._id}}-li"
-          class="udex-breadcrumbs__item udex-breadcrumb__item--current udex-breadcrumbs__item--{{@index}}" 
+          class="udex-breadcrumbs__item udex-breadcrumb__item--current udex-breadcrumbs__item--hidden udex-breadcrumbs__item--{{@index}}"
           accessible-name="{{this.accessibleName}}"
           data-ui5-stable="{{this.stableDomRef}}">
           {{this.textContent}}
@@ -37,7 +35,7 @@
           @ui5-click="{{../_onDropdownLinkPress}}"
           href="{{this.href}}"
           target="{{this.target}}"
-          class="udex-breadcrumbs__item udex-breadcrumbs__item--{{@index}}" 
+          class="udex-breadcrumbs__item udex-breadcrumbs__item--hidden udex-breadcrumbs__item--{{@index}}"
           accessible-name="{{this.accessibleName}}"
           data-ui5-stable="{{this.stableDomRef}}">
           {{this.textContent}}

package/src/Button.ts

@@ -1,30 +1,17 @@
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents-icons/dist/AllIcons.js";
-import I18nBundle, { I18nText, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,
 } from "./generated/i18n/i18n-defaults.js";
+import { UDExButtonDesign, UDExButtonSize } from "./types/Button.js";
 
 // Styles
-import ButtonCss from "./generated/themes/Button.css";
-import UDExButtonSize from "./types/ButtonSize.js";
-
-export enum UDExButtonDesign {
-  Primary = "Primary",
-  Emphasized = "Emphasized",
-  Secondary = "Secondary",
-  Default = "Default",
-  Tertiary = "Tertiary",
-  Transparent = "Transparent",
-  Invisible = "Invisible",
-  Warning = "Warning",
-  Attention = "Attention",
-  Positive = "Positive",
-  Negative = "Negative",
-}
+import ButtonCss from "./generated/themes/Button.css.js";
 
 /**
  * @class
@@ -36,9 +23,10 @@ export enum UDExButtonDesign {
  */
 @customElement({
   tag: "udex-button",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [Button.styles, ButtonCss],
 })
+
 class UDExButton extends Button {
   /**
    * Defines the size of the component.
@@ -48,8 +36,8 @@ class UDExButton extends Button {
    * @default "Medium"
    * @public
    */
-  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
-    size!: `${UDExButtonSize}`;
+  @property({ type: String })
+    size: `${UDExButtonSize}` = UDExButtonSize.Medium;
 
   /**
    * Defines if button is in toggled state
@@ -65,37 +53,34 @@ class UDExButton extends Button {
    * @default "Primary"
    * @public
    */
-  @property({ type: UDExButtonDesign, defaultValue: UDExButtonDesign.Primary })
+  @property({ type: String })
   /** @ts-expect-error */
-    design!: `${UDExButtonDesign}`;
+    design: `${UDExButtonDesign}` = UDExButtonDesign.Primary;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
-    UDExButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-  }
-
   static typeTextMappings(): Record<string, I18nText> {
     return {
-      "Primary": BUTTON_ARIA_TYPE_PRIMARY,
-      "Secondary": BUTTON_ARIA_TYPE_SECONDARY,
-      "Tertiary": BUTTON_ARIA_TYPE_TERTIARY,
-      "Positive": BUTTON_ARIA_TYPE_POSITIVE,
-      "Warning": BUTTON_ARIA_TYPE_WARNING,
-      "Negative": BUTTON_ARIA_TYPE_NEGATIVE,
-      "Emphasized": BUTTON_ARIA_EMPHASIZED,
-      "Default": BUTTON_ARIA_DEFAULT,
-      "Transparent": BUTTON_ARIA_TRANSPARENT,
-      "Attention": BUTTON_ARIA_ATTENTION,
+      [UDExButtonDesign.Primary]: BUTTON_ARIA_TYPE_PRIMARY,
+      [UDExButtonDesign.Secondary]: BUTTON_ARIA_TYPE_SECONDARY,
+      [UDExButtonDesign.Tertiary]: BUTTON_ARIA_TYPE_TERTIARY,
+      [UDExButtonDesign.Positive]: BUTTON_ARIA_TYPE_POSITIVE,
+      [UDExButtonDesign.Warning]: BUTTON_ARIA_TYPE_WARNING,
+      [UDExButtonDesign.Negative]: BUTTON_ARIA_TYPE_NEGATIVE,
+      [UDExButtonDesign.Emphasized]: BUTTON_ARIA_EMPHASIZED,
+      [UDExButtonDesign.Default]: BUTTON_ARIA_DEFAULT,
+      [UDExButtonDesign.Transparent]: BUTTON_ARIA_TRANSPARENT,
+      [UDExButtonDesign.Attention]: BUTTON_ARIA_ATTENTION,
     };
   }
 
-  get hasButtonType() {
-    return !!this.getAttribute("design") || this.toggled;
+  get hasButtonType(): boolean {
+    return !!this.designValue || this.toggled;
   }
 
-  get buttonTypeText() {
-    const designValue = this.getAttribute("design");
+  get buttonTypeText(): string {
+    const { designValue } = this;
     const shouldReadDesign = designValue === UDExButtonDesign.Positive || designValue === UDExButtonDesign.Negative
     || designValue === UDExButtonDesign.Warning || designValue === UDExButtonDesign.Attention;
 
@@ -105,6 +90,10 @@ class UDExButton extends Button {
     }
     return `${typeText} ${this.toggled ? UDExButton.i18nBundle.getText(TOGGLED) : ""}`.trim();
   }
+
+  get designValue(): string | null {
+    return this.getAttribute("design");
+  }
 }
 
 UDExButton.define();

package/src/Carousel.ts

@@ -3,7 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   isUp,
@@ -16,7 +16,8 @@ import {
   CAROUSEL_NEXT_ARROW_TEXT,
   CAROUSEL_PREVIOUS_ARROW_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
-
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
 
 import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
@@ -25,7 +26,7 @@ import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
 import CarouselCss from "./generated/themes/Carousel.css.js";
 import UDExButton from "./Button.js";
 
-export enum CarouselNavigationPosition {
+export enum UDExCarouselNavigationPosition {
   top = "top",
   bottom = "bottom",
 }
@@ -57,11 +58,8 @@ class UDExCarousel extends UI5Element {
    *
    * @public
    */
-  @property({
-    type: CarouselNavigationPosition,
-    defaultValue: CarouselNavigationPosition.top,
-  })
-    navigationPlacement!: `${CarouselNavigationPosition}`;
+  @property()
+    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;
 
   /**
    * Defines the content of the component.
@@ -96,15 +94,12 @@ class UDExCarousel extends UI5Element {
    * @default ''
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    accessibleName!: string;
+  @property({ type: String })
+    accessibleName: string = "";
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
-    UDExCarousel.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   get nextPageText() {
     return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
   }
@@ -120,20 +115,20 @@ class UDExCarousel extends UI5Element {
   }
 
   get buttonDesign() {
-    return this.navigationPlacement === CarouselNavigationPosition.top
+    return this.navigationPlacement === UDExCarouselNavigationPosition.top
       ? "Secondary"
       : "Tertiary";
   }
 
   get showNavigationButtons() {
     return {
-      top: this.navigationPlacement === CarouselNavigationPosition.top,
-      bottom: this.navigationPlacement === CarouselNavigationPosition.bottom,
+      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,
+      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,
     };
   }
 
   get _hidePageIndicator() {
-    return this.navigationPlacement === CarouselNavigationPosition.top;
+    return this.navigationPlacement === UDExCarouselNavigationPosition.top;
   }
 
   get _carousel() {

package/src/Checkbox.ts

@@ -1,9 +1,13 @@
 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/dist/renderer/JsxRenderer.js";
 import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from "./generated/i18n/i18n-defaults.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExCheckboxValueState from "./types/Checkbox.js";
 
 // Styles
-import checkboxCss from "@ui5/webcomponents/dist/generated/themes/CheckBox.css.js";
 import CheckboxCss from "./generated/themes/Checkbox.css.js";
 
 /**
@@ -27,10 +31,36 @@ import CheckboxCss from "./generated/themes/Checkbox.css.js";
  */
 @customElement({
   tag: "udex-checkbox",
-  renderer: litRender,
-  styles: [checkboxCss, CheckboxCss],
+  renderer: jsxRenderer,
+  styles: [CheckBox.styles, CheckboxCss],
 })
+
 class UDExCheckbox extends CheckBox {
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+  /** @ts-expect-error */
+    valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  valueStateMappings(): Record<string, string> {
+    return {
+      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),
+      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),
+    };
+  }
+
+  get valueStateText(): string | undefined {
+    if (this.valueState !== UDExCheckboxValueState.None) {
+      return this.valueStateMappings()[this.valueState];
+    }
+  }
 }
 
 UDExCheckbox.define();