@sapudex/web-components 2.2.0 → 2.4.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.2.0",
+  "version": "2.4.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -11,6 +11,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n---\n\n\n### **Events:**\n - **toggle-items** - Triggered when the user clicks on the Expand/Collapse All button..\n\n### **Slots:**\n - **default** - Slot for accordion items.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "hide-expand-button",
+              "description": "Defines if expandAll button should be displayed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "headline",
               "description": "Defines the headline text of the accordion component.",
@@ -28,6 +33,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "hide-expand-button",
+                "description": "Defines if expandAll button should be displayed.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "headline",
                 "description": "Defines the headline text of the accordion component.",
@@ -557,6 +567,166 @@
             "events": []
           }
         },
+        {
+          "name": "udex-contact",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-contact</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Contact.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "button-text",
+              "description": "Defines the <code>text</code> for the contact button.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "contact-numbers",
+              "description": "List of the contact numbers",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "local-country-numbers-link",
+              "description": "Defines the local country numbers link's href",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "prevent-initial-focus",
+              "description": "Defines if the initial focus should be prevented.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "prevent-focus-restore",
+              "description": "Defines if the focus should be returned to the previously focused element.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Defines the IDs of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "Slot for list items." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "button-text",
+                "description": "Defines the <code>text</code> for the contact button.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "contact-numbers",
+                "description": "List of the contact numbers",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "local-country-numbers-link",
+                "description": "Defines the local country numbers link's href",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "prevent-initial-focus",
+                "description": "Defines if the initial focus should be prevented.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "prevent-focus-restore",
+                "description": "Defines if the focus should be returned to the previously focused element.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Defines the IDs of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "udex-contact-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-contact-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ContactItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **default** - Slot for the item content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Defines the label for the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "href",
+              "description": "Defines the href for the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the icon name for the item.",
+              "value": {
+                "type": "\"Email\" | \"Headset\" | \"Discussion-2\" | undefined"
+              }
+            },
+            {
+              "name": "target",
+              "description": "Defines target for the item",
+              "value": {
+                "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+              }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "Slot for the item content." }
+          ],
+          "events": [
+            {
+              "name": "item-click",
+              "description": "Fires when item is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Defines the label for the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "href",
+                "description": "Defines the href for the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "icon",
+                "description": "Defines the icon name for the item.",
+                "value": {
+                  "type": "\"Email\" | \"Headset\" | \"Discussion-2\" | undefined"
+                }
+              },
+              {
+                "name": "target",
+                "description": "Defines target for the item",
+                "value": {
+                  "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "item-click",
+                "description": "Fires when item is clicked"
+              }
+            ]
+          }
+        },
         {
           "name": "udex-control-button",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-control-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ControlButton.js\";</code>\n---\n",
@@ -690,6 +860,11 @@
               "description": "Defines if the component would display a loading indicator.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "show-search-input",
+              "description": "Defines if the search input is visible.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy-delay",
               "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -838,6 +1013,11 @@
                 "description": "Defines if the component would display a loading indicator.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "show-search-input",
+                "description": "Defines if the search input is visible.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy-delay",
                 "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -1103,6 +1283,105 @@
             "events": []
           }
         },
+        {
+          "name": "udex-event-ribbon",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-event-ribbon</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/EventRibbon.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "event-logo",
+              "description": "Defines the text of the event logo.",
+              "value": {
+                "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\"",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "event-link",
+              "description": "Defines the link details of the event ribbon.",
+              "value": { "type": "string", "default": "\"{}\"" }
+            },
+            {
+              "name": "event-link-icon",
+              "description": "Defines the icon displayed next to the link.",
+              "value": {
+                "type": "\"add-calendar\" | \"media-play\"",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "event-text",
+              "description": "Defines the text displayed in event ribbon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "mode",
+              "description": "Defines whether event-ribbon uses dark or light theme.",
+              "value": {
+                "type": "\"dark\" | \"light\"",
+                "default": "\"light\""
+              }
+            },
+            {
+              "name": "background-color-scheme",
+              "description": "Defines the solid background color.",
+              "value": {
+                "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\"",
+                "default": "\"Blue\""
+              }
+            },
+            {
+              "name": "background-image",
+              "description": "Allows control over the background image source.",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "event-logo",
+                "description": "Defines the text of the event logo.",
+                "value": {
+                  "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\""
+                }
+              },
+              {
+                "name": "event-link",
+                "description": "Defines the link details of the event ribbon.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "event-link-icon",
+                "description": "Defines the icon displayed next to the link.",
+                "value": { "type": "\"add-calendar\" | \"media-play\"" }
+              },
+              {
+                "name": "event-text",
+                "description": "Defines the text displayed in event ribbon.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "mode",
+                "description": "Defines whether event-ribbon uses dark or light theme.",
+                "value": { "type": "\"dark\" | \"light\"" }
+              },
+              {
+                "name": "background-color-scheme",
+                "description": "Defines the solid background color.",
+                "value": {
+                  "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\""
+                }
+              },
+              {
+                "name": "background-image",
+                "description": "Allows control over the background image source.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "udex-filter-menu",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n---\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n\n### **Methods:**\n - **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
@@ -1213,6 +1492,11 @@
               "description": "Defines if the component would display a loading indicator.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "show-search-input",
+              "description": "Defines if the search input is visible.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy-delay",
               "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -1386,6 +1670,11 @@
                 "description": "Defines if the component would display a loading indicator.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "show-search-input",
+                "description": "Defines if the search input is visible.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy-delay",
                 "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -2339,7 +2628,7 @@
         },
         {
           "name": "udex-list",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\\e\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
           "doc-url": "",
           "attributes": [
             {
@@ -5390,6 +5679,11 @@
               "description": "Defines if the component would display a loading indicator.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "show-search-input",
+              "description": "Defines if the search input is visible.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy-delay",
               "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -5528,6 +5822,11 @@
                 "description": "Defines if the component would display a loading indicator.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "show-search-input",
+                "description": "Defines if the search input is visible.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy-delay",
                 "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -7436,6 +7735,11 @@
               "description": "Defines if the text-field is active",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "icon-active",
+              "description": "Defines if dropdown associated with text-field trigger has opened dropdown. It indicates active state of control button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "autocomplete",
               "description": "Defines the behaviour of autocomplete.",
@@ -7536,6 +7840,11 @@
                 "description": "Defines if the text-field is active",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "icon-active",
+                "description": "Defines if dropdown associated with text-field trigger has opened dropdown. It indicates active state of control button.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "autocomplete",
                 "description": "Defines the behaviour of autocomplete.",
@@ -8110,6 +8419,11 @@
               "name": "indeterminate",
               "description": "Defines whether the component has unknown number of steps.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines aria-label of the wizard, read by screen readers with the first step.",
+              "value": { "type": "string" }
             }
           ],
           "events": [],
@@ -8119,6 +8433,11 @@
                 "name": "indeterminate",
                 "description": "Defines whether the component has unknown number of steps.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines aria-label of the wizard, read by screen readers with the first step.",
+                "value": { "type": "string" }
               }
             ],
             "events": []

package/filter-coverage.js

@@ -0,0 +1,58 @@
+import fs from "fs";
+import path from "path";
+
+const coveragePath = path.resolve("coverage/coverage-summary.json");
+const outputPath = path.resolve("coverage/filtered-coverage-summary.json");
+
+const raw = JSON.parse(fs.readFileSync(coveragePath, "utf-8"));
+
+const excludedDirs = [
+  "/generated/",
+  "/types/",
+  "/data/",
+  "/utils/",
+];
+
+const filtered = {};
+Object.entries(raw).forEach(([file, stats]) => {
+  const normalizedPath = file.replace(/\\/g, "/");
+  const isExcluded = excludedDirs.some(dir => normalizedPath.includes(dir));
+
+  if (!isExcluded) {
+    filtered[file] = stats;
+  }
+});
+
+const metrics = ["lines", "statements", "functions", "branches"];
+
+const total = {
+  lines: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+  statements: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+  functions: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+  branches: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+};
+
+Object.values(filtered).forEach(file => {
+  metrics.forEach(metric => {
+    total[metric].total += file[metric].total;
+    total[metric].covered += file[metric].covered;
+    total[metric].skipped += file[metric].skipped;
+  });
+});
+
+metrics.forEach(metric => {
+  const { total: t, covered: c } = total[metric];
+  total[metric].pct = t === 0 ? 100 : +((100 * c) / t).toFixed(2);
+});
+
+filtered.total = total;
+
+fs.writeFileSync(outputPath, JSON.stringify(filtered, null, 2));

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -17,9 +17,13 @@
     "start": "wc-dev watch",
     "start:devserver": "wc-dev start",
     "build": "wc-dev build",
+    "swap-imports": "node swap-component-imports.js",
     "test": "wc-dev test",
-    "test:cypress": "node run-cypress.js",
+    "test:cypress": "yarn swap-imports && node run-cypress.js",
+    "test:coverage": "yarn instrument && USE_INSTRUMENTED=1 yarn test:cypress",
+    "filter:coverage": "node filter-coverage.js",
     "test:cypress-open": "cypress open --component --browser chrome",
+    "instrument": "npx nyc instrument ./dist ./instrumented",
     "create-ui5-element": "wc-create-ui5-element",
     "prepack": "npm run build"
   },
@@ -39,15 +43,16 @@
     "@ui5/webcomponents-icons": "2.12.0",
     "@ui5/webcomponents-theming": "2.12.0",
     "@vimeo/player": "^2.24.0",
-    "cypress-real-events": "^1.14.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",
     "chromedriver": "138.0.1",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",
+    "cypress-real-events": "^1.14.0",
     "typescript": "^5.6.2",
     "wdio-chromedriver-service": "^8.1.1",
     "webdriverio": "^8.16.12"

package/src/Accordion.hbs

@@ -3,15 +3,19 @@
     @keydown="{{keydownHandler}}"
     @ui5-accordion-item-focus="{{itemFocusHandler}}">
     <div class="udex-accordion__head" part="head">
-        <h3 class="udex-accordion__headline">{{headlineText}}</h3>
-        <udex-button class="udex-accordion__btn"
-            size="Large"
-            design="Tertiary"
-            @click="{{toggleAllHandler}}"
-            @keydown="{{toggleKeyAllHandler}}"
-            accessible-name="{{toggleAllText}}">
-            {{toggleAllText}}
-        </udex-button>
+        {{#if headline}}
+          <h3 class="udex-accordion__headline">{{headline}}</h3>
+        {{/if}}
+        {{#unless hideExpandButton}}
+          <udex-button class="udex-accordion__btn"
+              size="Large"
+              design="Tertiary"
+              @click="{{toggleAllHandler}}"
+              @keydown="{{toggleKeyAllHandler}}"
+              accessible-name="{{toggleAllText}}">
+              {{toggleAllText}}
+          </udex-button>
+        {{/unless}}
     </div>
     <div class="udex-accordion__content">
         {{#each items}}

package/src/Accordion.ts

@@ -65,6 +65,13 @@ class UDExAccordion extends UI5Element {
    * @private
    */
   @property({ type: Boolean, noAttribute: true }) _allExpanded!: boolean;
+  /**
+   * Defines if expandAll button should be displayed.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean }) hideExpandButton!: boolean;
 
   /**
    * Defines direction of the accordion component.
@@ -118,10 +125,6 @@ class UDExAccordion extends UI5Element {
     });
   }
 
-  get headlineText(): string {
-    return this.headline ? this.headline : "Default headline";
-  }
-
   toggleAllHandler(e: Event) {
     e.preventDefault();
     this._allExpanded = !this._allExpanded;

package/src/Assets.ts

@@ -10,3 +10,32 @@ import variablesOverwrite from "./AssetsVariables.js";
 const customThemeLoader = () => Promise.resolve(variablesOverwrite);
 
 registerCustomThemePropertiesLoader("@ui5/webcomponents", "sap_glow", customThemeLoader);
+
+(function checkThemeCSSLink() {
+  if (typeof document === "undefined") { return; }
+
+  const runCheck = () => {
+    const cssLoaded = Array.from(document.styleSheets).some(sheet => {
+      try {
+        if (sheet.href && sheet.href.includes("css_variables.css")) { return true; }
+        return Array.from(sheet.cssRules || []).some(rule => rule.cssText.includes(".sapThemeMetaData-Base-baseLib"));
+      } catch {
+        return false;
+      }
+    });
+
+    if (!cssLoaded) {
+      const msg = `Required theme CSS not found.
+Please add:
+<link rel="stylesheet" href="path/to/@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css">
+or import '@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css'`;
+      console.warn(msg);
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", runCheck);
+  } else {
+    runCheck();
+  }
+})();

package/src/AssetsVariables.ts

@@ -23,6 +23,8 @@ const variablesOverwrite = `:root {
   ${getScopedVarName("--_ui5_calendar_header_middle_button_focus_outline")}: 1px solid var(--udexColorBlue9, #0040B0);
   ${getScopedVarName("--_ui5_calendar_header_arrow_button_box_shadow")}: none;
   ${getScopedVarName("--_ui5_calendar_header_padding")}: 0;
+  ${getScopedVarName("--_ui5_calendar_left_right_padding")}: 0;
+  ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: 0;
 
   udex-search {
     ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
@@ -46,6 +48,8 @@ const variablesOverwrite = `:root {
     ${getScopedVarName("--_ui5_monthpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
     ${getScopedVarName("--_ui5_year_picker_item_height")}: 36px;
     ${getScopedVarName("--_ui5_yearpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
+    ${getScopedVarName("--_ui5_calendar_left_right_padding")}: 0;
+    ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: 0;
   }
 `;
 

package/src/Button.ts

@@ -68,6 +68,15 @@ class UDExButton extends Button {
   /** @ts-expect-error */
     design: `${UDExButtonDesign}` = UDExButtonDesign.Primary;
 
+  /**
+   * Defines if button is in pseudo-disabled state.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _ariaDisabled!: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;