@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533

package/dist/collection/components/chip/chip.css

@@ -50,8 +50,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host {
-  /* width */
+:host { /* width */
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -69,6 +68,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
@@ -112,8 +117,8 @@
 }
 .container .hidden {
   display: none;
-  width: 0px;
-  margin-right: 0px;
+  width: 0;
+  margin-right: 0;
 }
 .container .close-button-container {
   display: inline-flex;
@@ -126,14 +131,39 @@
   white-space: nowrap;
 }
 
-.container.icon {
+.container.outline.icon {
+  padding-left: calc(0.75rem - 1px);
+}
+.container.outline:not(.icon) {
+  padding-left: calc(0.5rem - 1px);
+}
+.container.outline.closable:not(.inactive) {
+  padding-right: calc(0.25rem - 1px);
+}
+.container.outline.closable.inactive, .container.outline:not(.closable) {
+  padding-right: calc(0.5rem - 1px);
+}
+.container.outline.icon:not(.closable) {
+  padding-right: calc(0.75rem - 1px);
+}
+.container:not(.outline).icon {
   padding-left: 0.75rem;
-  padding-right: 0.75rem;
 }
-
-.container.closable {
+.container:not(.outline):not(.icon) {
+  padding-left: 0.5rem;
+}
+.container:not(.outline).closable:not(.inactive) {
   padding-right: 0.25rem;
 }
+.container:not(.outline).closable.inactive {
+  padding-right: 0.5rem;
+}
+.container:not(.outline):not(.closable).icon {
+  padding-right: 0.75rem;
+}
+.container:not(.outline):not(.closable):not(.icon) {
+  padding-right: 0.5rem;
+}
 
 .container.primary {
   background-color: var(--theme-color-primary);

package/dist/collection/components/chip/chip.js

@@ -37,11 +37,11 @@ export class Chip {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: 'bc9150f9d71eb0d048c778e21ea5afb39a1dc3f9', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        return (h(Host, { key: '8ede968301d60515bc378c80141926ad75fab0cd', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.chipColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {} }, h("div", { key: '82c39bab0cff12de6c830360ad06281993e4dac6', style: Object.assign({}, customStyle), class: {
+                : {} }, h("div", { key: 'ff82604fbd0ed7d74cdd753e1f1690f4bf67959f', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -55,10 +55,10 @@ export class Chip {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '359b67a50b9c3b438fc7884b7b6dab7027a284c4', class: {
+            } }, h("ix-icon", { key: '7e033b4f17e195a9ce75e3fbea992290180feb1f', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: '800965a9f8c4013009ab1345eed7fea6cb6ae1f2', class: "slot-container" }, h("slot", { key: 'a03c010efbb304e6e70ddb990fb1e91ffa667e0b' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
+            }, name: this.icon, size: '24' }), h("span", { key: '0d0bafd87e80596388ff1b74bcb9fa6024f6fe03', class: "slot-container" }, h("slot", { key: '057958812ca98820f4e039b7c5e2f016d27854c6' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/test/chip.ct.js

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { test } from "../../../tests/utils/test/index";
+import { expect } from "@playwright/test";
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-chip></ix-chip>`);
+    const datePicker = page.locator('ix-chip');
+    await expect(datePicker).toHaveClass(/hydrated/);
+});
+test.describe('chip test', () => {
+    test.beforeEach(async ({ mount }) => {
+        await mount(`
+      <ix-chip>Label</ix-chip>
+      <ix-chip outline>Label</ix-chip>
+      `);
+    });
+    test('outline and normal variant should have the same width', async ({ page, }) => {
+        await page.waitForSelector('ix-chip');
+        const normalChipElement = page.locator('ix-chip').first();
+        const outlineChipElement = page.locator('ix-chip').last();
+        const normalChipSize = await normalChipElement.boundingBox();
+        const outlineChipSize = await outlineChipElement.boundingBox();
+        expect(normalChipSize.width).toEqual(outlineChipSize.width);
+    });
+});
+//# sourceMappingURL=chip.ct.js.map

package/dist/collection/components/chip/test/chip.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.ct.js","sourceRoot":"","sources":["../../../../src/components/chip/test/chip.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACnD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IAC9B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QAClC,MAAM,KAAK,CACT;;;OAGC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uDAAuD,EAAE,KAAK,EAAE,EACnE,IAAI,GACL,EAAE,EAAE;QACH,MAAM,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAEtC,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;QAC1D,MAAM,kBAAkB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC;QAE1D,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC;QAC7D,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC,WAAW,EAAE,CAAC;QAE/D,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { test } from '@utils/test';\nimport { expect } from '@playwright/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-chip></ix-chip>`);\n  const datePicker = page.locator('ix-chip');\n  await expect(datePicker).toHaveClass(/hydrated/);\n});\n\ntest.describe('chip test', () => {\n  test.beforeEach(async ({ mount }) => {\n    await mount(\n      `\n      <ix-chip>Label</ix-chip>\n      <ix-chip outline>Label</ix-chip>\n      `\n    );\n  });\n\n  test('outline and normal variant should have the same width', async ({\n    page,\n  }) => {\n    await page.waitForSelector('ix-chip');\n\n    const normalChipElement = page.locator('ix-chip').first();\n    const outlineChipElement = page.locator('ix-chip').last();\n\n    const normalChipSize = await normalChipElement.boundingBox();\n    const outlineChipSize = await outlineChipElement.boundingBox();\n\n    expect(normalChipSize.width).toEqual(outlineChipSize.width);\n  });\n});\n"]}

package/dist/collection/components/col/col.css

@@ -22,8 +22,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host {
-  /* width */
+:host { /* width */
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -43,6 +42,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

package/dist/collection/components/col/col.js

@@ -94,7 +94,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }
@@ -117,7 +117,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }
@@ -140,7 +140,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }
@@ -163,7 +163,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }

package/dist/collection/components/content/content.css

@@ -43,6 +43,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

package/dist/collection/components/content/content.js

@@ -20,12 +20,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '7298c4abd09355a3ee73d4a236e7025a72720cf7' }, h("div", { key: 'd7ba3fbc44d66ba0ae4e747a5cc5d77c7388b138', class: {
+        return (h(Host, { key: '61f9325ce908e838c83a286da21471c8f081cf7e' }, h("div", { key: '66adfdde8a6f7e4cec46bc8ac3111f9fd344462c', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '233200870318a9276d3e0d5c5d5d03980fbe1793', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '00a1dffb70b39ae24c7ffc7a02649f5c870e95e9', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: 'ee7f8ceb237b4c33d578262c74d4eca9bdf36070', class: "content" }, h("slot", { key: 'fbbf86e9c454f04dbe33a9b0456f1cd02ec72c02' }))));
+            } })), h("div", { key: 'd27dfeb1305abb6cacdf16a5476e5d7b32d6f3ba', class: "content" }, h("slot", { key: '054a581bc21257f46c3377c53c0e8dbacc4321b5' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content-header/content-header.js

@@ -40,7 +40,7 @@ export class ContentHeader {
                     "references": {
                         "ContentHeaderVariant": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/content-header/content-header.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/content-header/content-header.tsx",
                             "id": "src/components/content-header/content-header.tsx::ContentHeaderVariant"
                         }
                     }

package/dist/collection/components/css-grid/css-grid-item.js

@@ -17,7 +17,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '7eb12cf19328a03e78db24d81bc88158b37e7e4c', style: style }, h("slot", { key: '123dfc3d9459ae11ed038f5c20db4597f6fb6c42' })));
+        return (h(Host, { key: '5e5e54a887244e85620d34eb2759fadf20883dbd', style: style }, h("slot", { key: '14c51da716e0715e205f28181a3d51813ad88027' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid.js

@@ -103,7 +103,7 @@ export class CssGrid {
                         },
                         "CssGridTemplateType": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/css-grid/css-grid.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/css-grid/css-grid.tsx",
                             "id": "src/components/css-grid/css-grid.tsx::CssGridTemplateType"
                         }
                     }

package/dist/collection/components/date-dropdown/date-dropdown.css

@@ -50,6 +50,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

package/dist/collection/components/date-dropdown/date-dropdown.js

@@ -138,14 +138,14 @@ export class DateDropdown {
                     this.datePickerTouched) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, h("ix-layout-grid", { key: 'b8d09d4ddac4960ee2ea23ed9ec6bf5ecb59c5ae', "no-margin": "true" }, h("ix-row", { key: 'fa9099679383056a268265eec7316ced4cd0085a' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { class: {
+            } }, h("ix-layout-grid", { key: 'b8d09d4ddac4960ee2ea23ed9ec6bf5ecb59c5ae', "no-margin": "true" }, h("ix-row", { key: 'fa9099679383056a268265eec7316ced4cd0085a' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { key: '9107d5b1053c93d662568b0efa7bb89d60b80ed6', class: {
                 'no-margin': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: '614659cb9511b4bf5267e9ecb3c5a122d91e103a', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, null, h("ix-date-picker", { standaloneAppearance: false, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: '0a2993cbe4d995e4dd6345e8f1b4e32cb39997d8', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: '7bddded3f580f85c9222e563df5ef80a6a5470ed', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: 'fe530809dc0eff3d95e4305ef48d8f46ebaf2a20', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, { key: '6fb55cd06c7467fa1277476177b8db788fc6e614' }, h("ix-date-picker", { key: 'dac5bfab1baa592aaf0db6aaec80b44592c048f9', standaloneAppearance: false, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
                 this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today }), h("div", { class: "pull-right" }, h("ix-button", { onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today }), h("div", { key: '613a674664d2b55a8012fc2b869021e8dfeb10b3', class: "pull-right" }, h("ix-button", { key: '9d5470cfb8ddb6e086bb821baaefb25723777337', onClick: () => {
                 this.onDateSelect(this.currentRangeValue);
             } }, this.i18nDone))))))))));
     }
@@ -336,7 +336,7 @@ export class DateDropdown {
                     "references": {
                         "DateDropdownOption": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/date-dropdown/date-dropdown.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-dropdown/date-dropdown.tsx",
                             "id": "src/components/date-dropdown/date-dropdown.tsx::DateDropdownOption"
                         }
                     }
@@ -450,7 +450,7 @@ export class DateDropdown {
                     "references": {
                         "DateRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/date-dropdown/date-dropdown.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-dropdown/date-dropdown.tsx",
                             "id": "src/components/date-dropdown/date-dropdown.tsx::DateRangeChangeEvent"
                         }
                     }
@@ -470,7 +470,7 @@ export class DateDropdown {
                         },
                         "DateRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/date-dropdown/date-dropdown.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-dropdown/date-dropdown.tsx",
                             "id": "src/components/date-dropdown/date-dropdown.tsx::DateRangeChangeEvent"
                         }
                     },

package/dist/collection/components/date-dropdown/date-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-dropdown.js","sourceRoot":"","sources":["../../../src/components/date-dropdown/date-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown {\n  @Element() hostElement: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to: string;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: 'custom' | (string & {});\n  @State() private currentRangeValue: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  @State() private triggerRef: HTMLElement;\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue;\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id)) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant=\"primary\"\n          icon=\"history\"\n          ref={(ref) => (this.triggerRef = ref)}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          this.onDateSelect(this.currentRangeValue);\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"date-dropdown.js","sourceRoot":"","sources":["../../../src/components/date-dropdown/date-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown {\n  @Element() hostElement: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to: string;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: 'custom' | (string & {});\n  @State() private currentRangeValue: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  @State() private triggerRef: HTMLElement;\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue;\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id)) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant=\"primary\"\n          icon=\"history\"\n          ref={(ref) => (this.triggerRef = ref)}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          this.onDateSelect(this.currentRangeValue);\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-picker/date-picker.css

@@ -51,6 +51,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

package/dist/collection/components/date-picker/date-picker.js

@@ -427,7 +427,7 @@ export class DatePicker {
         return rows;
     }
     render() {
-        return (h(Host, { key: 'e0df5b93b72e32d28ca514b5476f9846b22677c6' }, h("ix-date-time-card", { key: '774585ed8c03e12463112ca9e9e44bc30975e8fc', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'c3710f386338c7410ecb72b42e1a9d4e1d35a3f1', class: "header", slot: "header" }, h("ix-icon-button", { key: '70f05d88185459dae9b43e07cc353e61744958b5', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'a2237156758b789edd16a2328d12240a74a36d58', class: "selector" }, h("ix-button", { key: 'c6457d065b4847de944ca1e32d72591fc1531c15', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '7ac517ad997291ce595e65a926223a2448c17e89', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: '476fef76809be47bceefe2c37c355aebd32eaafe', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: 'a3a8f2eb8154f7a88ceac13e86406df70d70d3c6', class: "wrapper" }, h("div", { key: 'ee6e1d288d11d95c953ff0e7c81a247939b2aa9d', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '7d1630d48c7934698cf4dbaa3fcd90c9873e6dff', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
+        return (h(Host, { key: '559881c8673da97e842398f4bcfe67ef5ff27794' }, h("ix-date-time-card", { key: '4550d5f5a242be0ff07110cc400ef12795475c5c', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'f10ccab02142ae7461ac4b4ba4e8a8eb57123438', class: "header", slot: "header" }, h("ix-icon-button", { key: '52b171c5e04a5bbcb0832f0e6033947735521601', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c48d51b3f22c9862c8006520530559ed44d16372', class: "selector" }, h("ix-button", { key: '8c155fcbafb7c3f32dab3c9ebc912153813ce207', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '74c9634e13886d26238b4ee2262314914b1e8cf8', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'ba249019d78a59e65f3a479a3ea8315b5990bcac', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '39365087bbb4c4dd4e0329828f61a90a1247b744', class: "wrapper" }, h("div", { key: '017d16a032a473b0e791c8dc342b5e62481212e3', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '1bef58292da8545924f53fdbeddbc864936a56ef', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
                     this.firstMonthRef = ref;
                 }
@@ -441,12 +441,12 @@ export class DatePicker {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: '8526edfce43dd656bc563143497be067752f1072', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: '42a4cd7d42d633f3e1fb44a0d6630744a24ff6b2', class: "grid" }, h("div", { key: 'bf5925eb777f1f751b26044811bb9cff880811bf', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'f414faea937a05dd2690e82d01daf1f444fbce25', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: 'b79a961fbfc8c8dd821a83ab172dd7146acc5ade', class: "grid" }, h("div", { key: '7651643c6320b8598b52ffaa45dc70498854d1ad', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
             return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: () => this.selectDay(day), onKeyUp: (e) => e.key === 'Enter' && this.selectDay(day), tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)))));
-        })), h("div", { key: '2d8f75a01a7d2f9b02293bf7fa1402bec6ee4420', class: {
+        })), h("div", { key: '0e6b9845bfdb760777cbd0f2f8419aeb5b667799', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, h("ix-button", { key: '8aef28eca063bcda077e0590758c0bd17d16428f', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
+            } }, h("ix-button", { key: 'bb02236b3e41f3168aa2d5aad2c8e4aa9af90a49', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
     }
     static get is() { return "ix-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -816,7 +816,7 @@ export class DatePicker {
                     "references": {
                         "DateChangeEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/date-picker/date-picker.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-picker/date-picker.tsx",
                             "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent"
                         }
                     }
@@ -840,7 +840,7 @@ export class DatePicker {
                     "references": {
                         "DateChangeEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/date-picker/date-picker.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-picker/date-picker.tsx",
                             "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent"
                         }
                     }
@@ -864,7 +864,7 @@ export class DatePicker {
                     "references": {
                         "DateChangeEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/date-picker/date-picker.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-picker/date-picker.tsx",
                             "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent"
                         }
                     }

package/dist/collection/components/date-time-card/date-time-card.css

@@ -48,6 +48,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

package/dist/collection/components/date-time-card/date-time-card.js

@@ -28,7 +28,7 @@ export class DateTimeCard {
         };
     }
     render() {
-        return (h(Host, { key: '40541d8514911fcfec7620c3542774eb189d1687' }, h("div", { key: 'd07d67a70360f31c67e3f220446e92f0266a5fbe', class: this.cardClasses() }, h("div", { key: '60681672b69bf55d3106eec4cf2a1d811c0cf637', class: "header" }, h("slot", { key: '5042ffc5ea4e264baa793dddd8fc071800f3eeaa', name: "header" })), h("div", { key: '68371c4b3fb5f66f291482dd44e738ba64813fb4', class: "separator" }), h("div", { key: 'a6dbde0e6f11d298bd78dfbaec884b1272e564c4', class: "content" }, h("slot", { key: '5537b6cca4feb31830e9d654785bc9c8258455ba' })))));
+        return (h(Host, { key: 'b699133fd52ef092307f90f515aa7046a99cd21f' }, h("div", { key: '938a7c031dae445fee084ea8c1390627b1743bfb', class: this.cardClasses() }, h("div", { key: '1d20df2d528d8219a7fcea504f63da8a07a4fe74', class: "header" }, h("slot", { key: '0dadc7cb6813210aa9de4299f86a2e1b8ed01764', name: "header" })), h("div", { key: '79a1560d676b4d7583edf9c2fc14be75d4a35514', class: "separator" }), h("div", { key: 'e0f633c51c1167383fc9f75d153cfb20ee77bc39', class: "content" }, h("slot", { key: 'eb8a5596284dd1a461d7f83abe3ec94ac0ebe76c' })))));
     }
     static get is() { return "ix-date-time-card"; }
     static get encapsulation() { return "shadow"; }
@@ -92,7 +92,7 @@ export class DateTimeCard {
                     "references": {
                         "DateTimeCardCorners": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/date-time-card/date-time-card.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-time-card/date-time-card.tsx",
                             "id": "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners"
                         }
                     }

package/dist/collection/components/datetime-picker/datetime-picker.css

@@ -54,6 +54,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

package/dist/collection/components/datetime-picker/datetime-picker.js

@@ -52,7 +52,7 @@ export class DatetimePicker {
         this.timeChange.emit(time);
     }
     render() {
-        return (h(Host, { key: 'ced15d6ebee8f55870b7fc36283556fae3cf72fd' }, h("ix-layout-grid", { key: '58e9916ce84c7ee9a3f7b930718a396cb76106f2', class: "no-padding" }, h("ix-row", { key: '593109d02398fd179303b7bc3030b13b5701f769' }, h("ix-col", { key: '4b6a39a1ba04096d522fc7943f72b14901e71006', class: "no-padding" }, h("ix-date-picker", { key: '5ee0c7a5a45749104a23e5f3eeea44e33bd7a815', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '6cbefe036d4a48efaca5a9b1a67ef801feab449f', class: "no-padding" }, h("ix-time-picker", { key: '285d034e938063753075f7f55d4f63a211483f18', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: '24ab1e4d0cf246456d34744d14404c6bbb629d06' }, h("ix-col", { key: '26daaa468b4d80e1c124f1776b7b773df4dd9b97' }, h("ix-button", { key: '38f073daffa3f337e26a319d1721f67ee28db729', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+        return (h(Host, { key: '245fa3202c8983bc8eff53d4078c2a6a8daa0810' }, h("ix-layout-grid", { key: '1bc34611a653f3dea08ee0be6a336766da38b914', class: "no-padding" }, h("ix-row", { key: '26eef283266f46fb5a19fcaf1d78f985119cec3a' }, h("ix-col", { key: 'd4ac83db8977067d5c178fb48eac1acc1adca898', class: "no-padding" }, h("ix-date-picker", { key: '967af43189787bc677ff273de023b43d9e3b0019', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '53bbc9d021687f71f211b6d4091e421b7374ae56', class: "no-padding" }, h("ix-time-picker", { key: 'da5a855b94d37b1424de7f10804e707e9d082139', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'aa564cb9741fda50e046a508cb9e2ad985ed11d7' }, h("ix-col", { key: 'a13d931565a1165e262070e6e3d637fce6da38c6' }, h("ix-button", { key: '6769327a6e405d2b2705c3a64b4b2031e8f80de4', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -491,7 +491,7 @@ export class DatetimePicker {
                     "references": {
                         "DateTimeDateChangeEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/datetime-picker/datetime-picker.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/datetime-picker/datetime-picker.tsx",
                             "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeDateChangeEvent"
                         }
                     }
@@ -515,7 +515,7 @@ export class DatetimePicker {
                     "references": {
                         "DateTimeSelectEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/datetime-picker/datetime-picker.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/datetime-picker/datetime-picker.tsx",
                             "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeSelectEvent"
                         }
                     }

package/dist/collection/components/divider/divider.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Divider {
     render() {
-        return h(Host, { key: 'c4ded9a12469394b7f35bebee62799640ccb905f' });
+        return h(Host, { key: 'b940598630bbccaae3d37bfb9fef71c35e777a14' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.css

@@ -70,6 +70,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;