@sapudex/web-components 2.5.0 → 2.7.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -54,7 +54,7 @@
         },
         {
           "name": "udex-accordion-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n---\n\n\n### **Events:**\n - **accordion-item-focus** - Triggered when the user focuses on an accordion item.\n\n### **Slots:**\n - **default** - Slot for accordion item content.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n---\n\n\n### **Events:**\n - **accordion-item-focus** - Triggered when the user focuses on an accordion item.\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n\n### **Slots:**\n - **default** - Slot for accordion item content.",
           "doc-url": "",
           "attributes": [
             {
@@ -88,6 +88,10 @@
             {
               "name": "accordion-item-focus",
               "description": "Triggered when the user focuses on an accordion item."
+            },
+            {
+              "name": "accordion-item-click",
+              "description": "Triggered when the user clicks on an accordion item."
             }
           ],
           "js": {
@@ -117,6 +121,10 @@
               {
                 "name": "accordion-item-focus",
                 "description": "Triggered when the user focuses on an accordion item."
+              },
+              {
+                "name": "accordion-item-click",
+                "description": "Triggered when the user clicks on an accordion item."
               }
             ]
           }
@@ -275,7 +283,7 @@
         },
         {
           "name": "udex-badge",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-badge</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-badge</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -299,7 +307,7 @@
               "description": "Defines the design of text type component.",
               "value": {
                 "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\"",
-                "default": "\"Info\""
+                "default": "\"Information\""
               }
             },
             {
@@ -491,7 +499,7 @@
         },
         {
           "name": "udex-carousel",
-          "description": "\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -855,6 +863,11 @@
               "name": "hide-flag-images",
               "value": { "type": "boolean | undefined" }
             },
+            {
+              "name": "prevent-page-scroll",
+              "description": "Defines if page scrolling should be prevented within the list of items.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy",
               "description": "Defines if the component would display a loading indicator.",
@@ -1008,6 +1021,11 @@
                 "name": "hide-flag-images",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "prevent-page-scroll",
+                "description": "Defines if page scrolling should be prevented within the list of items.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy",
                 "description": "Defines if the component would display a loading indicator.",
@@ -1239,7 +1257,7 @@
         },
         {
           "name": "udex-divider",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>udex-divider</code> component is a divider component used to separate content in a page.\n---\n",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-divider</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Divider.js\";</code>\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1395,11 +1413,6 @@
               "description": "Determines if there is no enough space, the component can be placed\nover the target.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
-            {
-              "name": "height",
-              "description": "Allows control over the height.",
-              "value": { "type": "string | undefined" }
-            },
             {
               "name": "placement",
               "description": "Determines on which side the component is placed at.",
@@ -1485,6 +1498,16 @@
               "description": "Allows setting a custom role for dropdown trigger.",
               "value": { "type": "string", "default": "\"combobox\"" }
             },
+            {
+              "name": "height",
+              "description": "Allows control over the height.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "prevent-page-scroll",
+              "description": "Defines if page scrolling should be prevented within the list of items.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy",
               "description": "Defines if the component would display a loading indicator.",
@@ -1582,11 +1605,6 @@
                 "description": "Determines if there is no enough space, the component can be placed\nover the target.",
                 "value": { "type": "boolean | undefined" }
               },
-              {
-                "name": "height",
-                "description": "Allows control over the height.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "placement",
                 "description": "Determines on which side the component is placed at.",
@@ -1663,6 +1681,16 @@
                 "description": "Allows setting a custom role for dropdown trigger.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "height",
+                "description": "Allows control over the height.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "prevent-page-scroll",
+                "description": "Defines if page scrolling should be prevented within the list of items.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy",
                 "description": "Defines if the component would display a loading indicator.",
@@ -5689,11 +5717,6 @@
               "description": "Defines whether the component is in disabled state.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "height",
-              "description": "Allows control over the height.",
-              "value": { "type": "string | undefined" }
-            },
             {
               "name": "label",
               "description": "Defines label text for field container.",
@@ -5740,6 +5763,16 @@
                 "default": "\"Bottom\""
               }
             },
+            {
+              "name": "height",
+              "description": "Allows control over the height.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "prevent-page-scroll",
+              "description": "Defines if page scrolling should be prevented within the list of items.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy",
               "description": "Defines if the component would display a loading indicator.",
@@ -5834,11 +5867,6 @@
                 "description": "Defines whether the component is in disabled state.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "height",
-                "description": "Allows control over the height.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "label",
                 "description": "Defines label text for field container.",
@@ -5883,6 +5911,16 @@
                   "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
                 }
               },
+              {
+                "name": "height",
+                "description": "Allows control over the height.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "prevent-page-scroll",
+                "description": "Defines if page scrolling should be prevented within the list of items.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy",
                 "description": "Defines if the component would display a loading indicator.",
@@ -6932,7 +6970,7 @@
         },
         {
           "name": "udex-tab-navigation",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n\n### **Slots:**\n - **default** - Defines the tabs and content.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.",
           "doc-url": "",
           "attributes": [
             {
@@ -6967,6 +7005,10 @@
             {
               "name": "click",
               "description": "Fires when the tab was clicked."
+            },
+            {
+              "name": "tab-select",
+              "description": "Fired when a tab is selected."
             }
           ],
           "js": {
@@ -6991,6 +7033,10 @@
               {
                 "name": "click",
                 "description": "Fires when the tab was clicked."
+              },
+              {
+                "name": "tab-select",
+                "description": "Fired when a tab is selected."
               }
             ]
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,18 +37,18 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.12.0",
-    "@ui5/webcomponents-base": "2.12.0",
-    "@ui5/webcomponents-fiori": "2.12.0",
-    "@ui5/webcomponents-icons": "2.12.0",
-    "@ui5/webcomponents-theming": "2.12.0",
+    "@ui5/webcomponents": "2.14.0",
+    "@ui5/webcomponents-base": "2.14.0",
+    "@ui5/webcomponents-fiori": "2.14.0",
+    "@ui5/webcomponents-icons": "2.14.0",
+    "@ui5/webcomponents-theming": "2.14.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "8.22.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.12.0",
+    "@ui5/webcomponents-tools": "2.14.0",
     "chromedriver": "138.0.1",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/Accordion.ts

@@ -5,19 +5,15 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
-import {
-  isEnter,
-  isSpace,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import AccordionTemplate from "./generated/templates/AccordionTemplate.lit.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import AccordionTemplate from "./AccordionTemplate.js";
+import type UDExAccordionItem from "./AccordionItem.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
-import UDExButton from "./Button.js";
 
 // Styles
 import AccordionCss from "./generated/themes/Accordion.css.js";
-import type UDExAccordionItem from "./AccordionItem.js";
 
 type UDExAccordionToggleItemsEventDetail = {
   isOpen: boolean
@@ -43,10 +39,9 @@ type UDExAccordionToggleItemsEventDetail = {
  */
 @customElement({
   tag: "udex-accordion",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: AccordionCss,
   template: AccordionTemplate,
-  dependencies: [UDExButton],
 })
 
 /**
@@ -55,30 +50,36 @@ type UDExAccordionToggleItemsEventDetail = {
  * @public
  */
 @event("toggle-items", { bubbles: true })
+
 class UDExAccordion extends UI5Element {
   eventDetails!: {
     "toggle-items": UDExAccordionToggleItemsEventDetail,
   };
+
   /**
    * Used internally to store expand/collapse button state.
    *
    * @private
    */
-  @property({ type: Boolean, noAttribute: true }) _allExpanded!: boolean;
+  @property({ type: Boolean, noAttribute: true })
+    _allExpanded!: boolean;
+
   /**
    * Defines if expandAll button should be displayed.
    *
    * @default false
    * @public
    */
-  @property({ type: Boolean }) hideExpandButton!: boolean;
+  @property({ type: Boolean })
+    hideExpandButton!: boolean;
 
   /**
    * Defines direction of the accordion component.
    *
    * @private
    */
-  @property({ type: String }) _direction?: string;
+  @property({ type: String })
+    _direction?: string;
 
   /**
    * Defines the headline text of the accordion component.
@@ -86,7 +87,8 @@ class UDExAccordion extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String }) headline!: string;
+  @property({ type: String })
+    headline!: string;
 
   /**
    * Slot for accordion items.
@@ -94,7 +96,8 @@ class UDExAccordion extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: HTMLElement, "default": true, individualSlots: true }) _items!: Array<UDExAccordionItem>;
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    _items!: Array<UDExAccordionItem>;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -107,22 +110,8 @@ class UDExAccordion extends UI5Element {
     this._activeItemIndex = -1;
   }
 
-  get toggleAllText(): string {
-    return this._allExpanded
-      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
-      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
-  }
-
-  get isExpanded(): boolean {
-    return this._allExpanded;
-  }
-
-  get items(): {item: HTMLElement}[] {
-    return this._items.map(el => {
-      return {
-        item: el,
-      };
-    });
+  onEnterDOM() {
+    this.updateAllExpandedStatus();
   }
 
   toggleAllHandler(e: Event) {
@@ -187,6 +176,24 @@ class UDExAccordion extends UI5Element {
       this._activeItemIndex = this._items?.indexOf(target) ?? -1;
     }
   }
+
+  updateAllExpandedStatus() {
+    this._allExpanded = this._items.every(item => item.expanded);
+  }
+
+  get toggleAllText(): string {
+    return this._allExpanded
+      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
+      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
+  }
+
+  get items(): {item: UDExAccordionItem}[] {
+    return this._items.map(el => {
+      return {
+        item: el,
+      };
+    });
+  }
 }
 
 UDExAccordion.define();

package/src/AccordionItem.ts

@@ -3,14 +3,10 @@ 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 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 { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import UDExBadge from "./Badge.js";
-
-import AccordionItemTemplate from "./generated/templates/AccordionItemTemplate.lit.js";
+import AccordionItemTemplate from "./AccordionItemTemplate.js";
 
 // Styles
 import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
@@ -36,10 +32,9 @@ import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
  */
 @customElement({
   tag: "udex-accordion-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: AccordionItemCss,
   template: AccordionItemTemplate,
-  dependencies: [UDExBadge, Icon],
 })
 
 /**
@@ -48,9 +43,16 @@ import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
  */
 @event("accordion-item-focus", { bubbles: true })
 
+/**
+ * Triggered when the user clicks on an accordion item.
+ * @public
+ */
+@event("accordion-item-click", { bubbles: true })
+
 class UDExAccordionItem extends UI5Element {
   eventDetails!: {
     "accordion-item-focus": void,
+    "accordion-item-click": void,
   };
   /**
    * Defines the Badge at the end of the label item.
@@ -58,7 +60,8 @@ class UDExAccordionItem extends UI5Element {
    * @default ""
    * @public
    */
-  @property() numberBadge!: string;
+  @property()
+    numberBadge!: string;
 
   /**
    * Defines the label of the accordion item component.
@@ -66,7 +69,8 @@ class UDExAccordionItem extends UI5Element {
    * @default ""
    * @public
    */
-  @property() label!: string;
+  @property()
+    label!: string;
 
   /**
    * Defines if the accordion item is expanded by default
@@ -74,7 +78,8 @@ class UDExAccordionItem extends UI5Element {
    * @default false
    * @public
    */
-  @property({ type: Boolean }) expanded!: boolean;
+  @property({ type: Boolean })
+    expanded = false;
 
   /**
    * Used internally to understand the component's open or closed state.
@@ -82,14 +87,16 @@ class UDExAccordionItem extends UI5Element {
    * @default false
    * @private
    */
-  @property({ type: Boolean, noAttribute: true }) isOpen = false;
+  @property({ type: Boolean, noAttribute: true })
+    isOpen = false;
 
   /**
    * Defines direction of the accordion item.
    *
    * @public
    */
-  @property({ type: String }) _direction?: string;
+  @property({ type: String })
+    _direction?: string;
 
   /**
    * Slot for accordion item content.
@@ -97,7 +104,8 @@ class UDExAccordionItem extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: Node, "default": true }) content!: Array<Node>;
+  @slot({ type: Node, "default": true })
+    content!: Array<Node>;
 
   constructor() {
     super();
@@ -119,20 +127,8 @@ class UDExAccordionItem extends UI5Element {
 
   itemClickHandler(e: Event) {
     e.preventDefault();
-    this.toggleItemState(e.currentTarget as HTMLElement, this.expanded);
-    this.toggleExpanded();
-  }
-
-  toggleItemState(el: HTMLElement, isActive: boolean) {
-    if (isActive) {
-      el.setAttribute("aria-expanded", "false");
-    } else {
-      el.setAttribute("aria-expanded", "true");
-    }
-  }
-
-  toggleExpanded(): void {
     this.expanded = !this.expanded;
+    this.fireDecoratorEvent("accordion-item-click");
   }
 
   focusHandler() {

package/src/AccordionItemTemplate.tsx

@@ -0,0 +1,54 @@
+import type AccordionItem from "./AccordionItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+import UDExBadge from "./Badge.js";
+
+export default function AccordionItemTemplate(this: AccordionItem) {
+  const ariaControlsId = `udex-accordion-item__${this._id}-content`;
+  const ariaLabelledbyId = `udex-accordion-item__${this._id}`;
+  const rootClass = "udex-accordion-item";
+
+  return (
+    <>
+      <button
+        id={ariaLabelledbyId}
+        aria-controls={ariaControlsId}
+        className={`${rootClass}__header`}
+        onFocusIn={this.focusHandler}
+        onClick={this.itemClickHandler}
+        onKeyDown={this.keydownHandler}
+        aria-expanded={this.expanded}
+        type="button">
+        <div className={`${rootClass}__icon-wrapper`}>
+          <UI5Icon
+            class={`${rootClass}__icon`}
+            mode={IconMode.Decorative}
+            name={slimArrowRight}>
+          </UI5Icon>
+        </div>
+        <span className={`${rootClass}__title`}>
+          {this.label}
+          {this.numberBadge &&
+            <UDExBadge
+              class={`${rootClass}__badge`}
+              number-design={UDExNumberBadgeDesign.Blue}
+              type={UDExTypeBadgeDesign.Number}
+              size={UDExSizeBadgeDesign.Medium}>
+              {this.numberBadge}
+            </UDExBadge>
+          }
+        </span>
+      </button>
+      <div
+        id={ariaControlsId}
+        aria-labelledby={ariaLabelledbyId}
+        className={`${rootClass}__content`}
+        onKeyDown={this.contentKeydown}
+        role="region">
+        <slot></slot>
+      </div>
+    </>
+  );
+}

package/src/AccordionTemplate.tsx

@@ -0,0 +1,37 @@
+import type Accordion from "./Accordion.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+
+export default function AccordionTemplate(this: Accordion) {
+  const rootClass = "udex-accordion";
+
+  return (
+    <div
+      className={rootClass}
+      onKeyDown={this.keydownHandler}
+      onui5-accordion-item-click={this.updateAllExpandedStatus}
+      onui5-accordion-item-focus={this.itemFocusHandler}>
+      <div className={`${rootClass}__head`} part="head">
+        {this.headline &&
+          <h3 className={`${rootClass}__headline`}>{this.headline}</h3>
+        }
+        {!this.hideExpandButton &&
+          <UDExButton class={`${rootClass}__btn`}
+            size={UDExButtonSize.Large}
+            design={UDExButtonDesign.Tertiary}
+            onClick={this.toggleAllHandler}
+            onKeyDown={this.toggleKeyAllHandler}
+            accessibleName={this.toggleAllText}>
+            {this.toggleAllText}
+          </UDExButton>
+        }
+      </div>
+      <div className={`${rootClass}__content`}>
+        {this.items.map(itemInfo =>
+          <slot name={itemInfo.item._individualSlot}></slot>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/AssetsVariables.ts

@@ -1,6 +1,10 @@
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
-const variablesOverwrite = `:root {
+const variablesOverwrite = `
+  ${getEffectiveScrollbarStyle()}
+  
+  :root {
   /* Browser Scrollbar */
   ${getScopedVarName("--browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);