@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.js","sourceRoot":"","sources":["../../../src/components/date-field/date-field.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { dropdownController } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\nimport {\n  ClassMutationObserver,\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n  createClassMutationObserver,\n} from '../utils/field';\nimport { PostfixSlot, PrefixSlot } from '../text-field/input.fc';\nimport { adjustPaddingForPrefixAndPostfix } from '../text-field/text-field.util';\nimport { iconCalendar } from '@siemens/ix-icons/icons';\n\nexport type DateFieldValidityState = {\n  patternMismatch: boolean;\n  invalidReason?: string;\n};\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n  tag: 'ix-date-field',\n  styleUrl: 'date-field.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DateField implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxDateFieldElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * value of the input element\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\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: string = 'yyyy/LL/dd';\n\n  /**\n   * required attribute\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * helper text below the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * label of the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * error text below the input field\n   */\n  @Prop({ reflect: true }) invalidText?: string;\n\n  /**\n   * readonly attribute\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * disabled attribute\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * info text below the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * warning text below the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * valid text below the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * show text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * i18n string for the error message when the date is not parsable\n   */\n  @Prop({ attribute: 'i18n-error-date-unparsable' }) i18nErrorDateUnparsable =\n    'Date is not valid';\n\n  /**\n   * Input change event.\n   */\n  @Event({ cancelable: false }) valueChange!: EventEmitter<string>;\n\n  /**\n   * Validation state change event.\n   */\n  @Event() validityStateChange!: EventEmitter<DateFieldValidityState>;\n\n  /** @internal */\n  @Event() ixFocus!: EventEmitter<void>;\n\n  /** @internal */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() show = false;\n  @State() from: string | null = null;\n  @State() isInputInvalid = false;\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() focus = false;\n\n  private prefixRef = makeRef<HTMLDivElement>();\n  private postfixRef = makeRef<HTMLDivElement>();\n\n  private datepickerRef = makeRef<HTMLIxDatePickerElement>();\n\n  private inputElementRef = makeRef<HTMLInputElement>();\n  private dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n  private classObserver?: ClassMutationObserver;\n  private invalidReason?: string;\n\n  updateFormInternalValue(value: string): void {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  connectedCallback(): void {\n    this.classObserver = createClassMutationObserver(this.hostElement, () =>\n      this.checkClassList()\n    );\n  }\n\n  componentWillLoad(): void {\n    this.onInput(this.value);\n    if (this.isInputInvalid) {\n      this.from = null;\n    } else {\n      this.watchValue();\n    }\n\n    this.checkClassList();\n    this.updateFormInternalValue(this.value);\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => this.updatePaddings());\n  }\n\n  private updatePaddings() {\n    adjustPaddingForPrefixAndPostfix(\n      this.prefixRef.current,\n      this.postfixRef.current,\n      this.inputElementRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.classObserver) {\n      this.classObserver.destroy();\n    }\n  }\n\n  @Watch('value')\n  watchValue() {\n    this.from = this.value;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  async onInput(value: string) {\n    this.value = value;\n    if (!value) {\n      this.valueChange.emit(value);\n      return;\n    }\n\n    if (!this.format) {\n      return;\n    }\n\n    const date = DateTime.fromFormat(value, this.format);\n    if (date.isValid) {\n      this.isInputInvalid = false;\n\n      this.updateFormInternalValue(value);\n      this.closeDropdown();\n    } else {\n      this.isInputInvalid = true;\n      this.invalidReason = date.invalidReason;\n    }\n\n    this.valueChange.emit(value);\n  }\n\n  async openDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    dropdownController.dismissAll();\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.present(dropdown);\n  }\n\n  async closeDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.dismiss(dropdown);\n  }\n\n  private checkClassList() {\n    this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n  }\n\n  private renderInput() {\n    return (\n      <div class=\"input-wrapper\">\n        <PrefixSlot\n          prefixRef={this.prefixRef}\n          onSlotChange={() => this.updatePaddings()}\n        ></PrefixSlot>\n        <input\n          autoComplete=\"off\"\n          class={{\n            'is-invalid': this.isInputInvalid,\n          }}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          readonly={this.readonly}\n          required={this.required}\n          ref={this.inputElementRef}\n          type=\"text\"\n          value={this.value}\n          onInput={(event) => {\n            const target = event.target as HTMLInputElement;\n            this.onInput(target.value);\n          }}\n          onClick={(event) => {\n            if (this.show) {\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onFocus={async () => {\n            this.openDropdown();\n            this.ixFocus.emit();\n          }}\n          onBlur={() => this.ixBlur.emit()}\n        ></input>\n        <PostfixSlot\n          postfixRef={this.postfixRef}\n          onSlotChange={() => this.updatePaddings()}\n        >\n          {this.disabled || this.readonly ? null : (\n            <ix-icon-button\n              data-testid=\"open-calendar\"\n              ghost\n              icon={iconCalendar}\n              onClick={(event) => {\n                if (!this.show) {\n                  event.stopPropagation();\n                  event.preventDefault();\n                  this.openDropdown();\n                  this.inputElementRef.current.focus();\n                }\n              }}\n            ></ix-icon-button>\n          )}\n        </PostfixSlot>\n      </div>\n    );\n  }\n\n  @HookValidationLifecycle()\n  hookValidationLifecycle({\n    isInfo,\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  @Watch('isInputInvalid')\n  async onInputValidationChange() {\n    const state = await this.getValidityState();\n    this.validityStateChange.emit({\n      patternMismatch: state.patternMismatch,\n      invalidReason: this.invalidReason,\n    });\n  }\n\n  /** @internal */\n  @Method()\n  getValidityState(): Promise<ValidityState> {\n    return Promise.resolve({\n      badInput: false,\n      customError: false,\n      patternMismatch: this.isInputInvalid,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !this.isInputInvalid,\n      valueMissing: !!this.required && !this.value,\n    });\n  }\n\n  /**\n   * Get the native input element\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputElementRef.waitForCurrent();\n  }\n\n  render() {\n    const invalidText = this.isInputInvalid\n      ? this.i18nErrorDateUnparsable\n      : this.invalidText;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          isInvalid={this.isInvalid}\n          invalidText={invalidText}\n          infoText={this.infoText}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          required={this.required}\n          controlRef={this.inputElementRef}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n\n          {this.renderInput()}\n        </ix-field-wrapper>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          trigger={this.inputElementRef.waitForCurrent()}\n          ref={this.dropdownElementRef}\n          closeBehavior=\"outside\"\n          show={this.show}\n          onShowChanged={(event) => {\n            this.show = event.detail;\n          }}\n        >\n          <ix-date-picker\n            ref={this.datepickerRef}\n            format={this.format}\n            range={false}\n            from={this.from ?? ''}\n            onDateChange={(event) => {\n              const { from } = event.detail;\n              this.onInput(from);\n            }}\n          ></ix-date-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-field/tests/date-field.ct.js

@@ -0,0 +1,114 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 { expect } from "@playwright/test";
+import { getFormValue, preventFormSubmission, test } from "../../../tests/utils/test/index";
+const createDateFieldAccessor = async (dateField) => {
+    const handle = {
+        openByCalender: async () => {
+            const trigger = dateField.getByTestId('open-calendar');
+            await trigger.click();
+        },
+        selectDay: async (day) => {
+            const dayButton = dateField
+                .locator('ix-dropdown')
+                .filter({ hasText: day.toString() })
+                .getByText(day.toString());
+            await dayButton.click();
+        },
+    };
+    return handle;
+};
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-date-field value="2024/05/05"></ix-date-field>`);
+    const dateFieldElement = page.locator('ix-date-field');
+    await expect(dateFieldElement).toHaveClass(/hydrated/);
+});
+test('select date by open calendar trigger', async ({ mount, page }) => {
+    await mount(`<ix-date-field value="2024/05/05"></ix-date-field>`);
+    const dateFieldElement = page.locator('ix-date-field');
+    await expect(dateFieldElement).toHaveClass(/hydrated/);
+    const dateField = await createDateFieldAccessor(dateFieldElement);
+    await dateField.openByCalender();
+    await dateField.selectDay(10);
+    await expect(dateFieldElement).toHaveAttribute('value', '2024/05/10');
+});
+test('select date by focus', async ({ mount, page }) => {
+    await mount(`<ix-date-field value="2024/05/05"></ix-date-field>`);
+    const dateFieldElement = page.locator('ix-date-field');
+    await expect(dateFieldElement).toHaveClass(/hydrated/);
+    const dateField = await createDateFieldAccessor(dateFieldElement);
+    await dateFieldElement.locator('input').focus();
+    await dateField.selectDay(10);
+    await expect(dateFieldElement).toHaveAttribute('value', '2024/05/10');
+    await expect(dateFieldElement.getByTestId('date-dropdown')).not.toHaveClass(/show/);
+});
+test('select date by input', async ({ mount, page }) => {
+    await mount(`<ix-date-field value="2024/05/05"></ix-date-field>`);
+    const dateFieldElement = page.locator('ix-date-field');
+    await expect(dateFieldElement).toHaveClass(/hydrated/);
+    const dateField = await createDateFieldAccessor(dateFieldElement);
+    await dateFieldElement.locator('input').focus();
+    await expect(dateFieldElement.getByTestId('date-dropdown')).toHaveClass(/show/);
+    await dateFieldElement.locator('input').fill('2025/10/10');
+    await expect(dateFieldElement.getByTestId('date-dropdown')).not.toHaveClass(/show/);
+    await expect(dateFieldElement).toHaveAttribute('value', '2025/10/10');
+    await dateField.openByCalender();
+    await expect(dateFieldElement.locator('.calendar-item.selected')).toHaveText('10');
+});
+test('select date by input with invalid date', async ({ mount, page }) => {
+    await mount(`<ix-date-field value="2024/05/05"></ix-date-field>`);
+    const dateFieldElement = page.locator('ix-date-field');
+    await expect(dateFieldElement).toHaveClass(/hydrated/);
+    const dateField = await createDateFieldAccessor(dateFieldElement);
+    await dateFieldElement.locator('input').fill('2025/10/10/10');
+    await dateField.openByCalender();
+    await expect(dateFieldElement).toHaveAttribute('value', '2025/10/10/10');
+    await expect(dateFieldElement
+        .locator('ix-field-wrapper')
+        .locator('ix-typography')
+        .filter({ hasText: 'Date is not valid' })).toHaveText('Date is not valid');
+});
+test('select date by input with invalid date - i18n', async ({ mount, page, }) => {
+    await mount(`<ix-date-field value="2024/05/05" i18n-error-date-unparsable="Datum nicht korrekt!"></ix-date-field>`);
+    const dateFieldElement = page.locator('ix-date-field');
+    await expect(dateFieldElement).toHaveClass(/hydrated/);
+    const dateField = await createDateFieldAccessor(dateFieldElement);
+    await dateFieldElement.locator('input').fill('2025/10/10/10');
+    await dateField.openByCalender();
+    await expect(dateFieldElement).toHaveAttribute('value', '2025/10/10/10');
+    await expect(dateFieldElement
+        .locator('ix-field-wrapper')
+        .locator('ix-typography')
+        .filter({ hasText: 'Datum nicht korrekt!' })).toHaveText('Datum nicht korrekt!');
+});
+test('required', async ({ mount, page }) => {
+    await mount(`<ix-date-field required label="MyLabel"></ix-date-field>`);
+    const dateFieldElement = page.locator('ix-date-field');
+    await expect(dateFieldElement).toHaveAttribute('required');
+    await expect(dateFieldElement.locator('ix-field-label')).toHaveText('MyLabel *');
+    await expect(dateFieldElement).toHaveClass(/ix-invalid--required/);
+});
+test(`form-ready - ix-date-field`, async ({ mount, page }) => {
+    await mount(`<form><ix-date-field name="my-field-name"></ix-date-field></form>`);
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    const input = page.locator('ix-date-field').locator('input');
+    await input.fill('2024/05/05');
+    await input.blur();
+    const formData = await getFormValue(formElement, 'my-field-name');
+    expect(formData).toBe('2024/05/05');
+});
+test(`form-ready - ix-date-field initial value`, async ({ mount, page }) => {
+    await mount(`<form><ix-date-field name="my-field-name" value="2024/12/12"></ix-date-field></form>`);
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    const formData = await getFormValue(formElement, 'my-field-name');
+    expect(formData).toBe('2024/12/12');
+});
+//# sourceMappingURL=date-field.ct.js.map

package/dist/collection/components/date-field/tests/date-field.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.ct.js","sourceRoot":"","sources":["../../../../src/components/date-field/tests/date-field.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { Locator, expect } from '@playwright/test';\nimport { getFormValue, preventFormSubmission, test } from '@utils/test';\n\nconst createDateFieldAccessor = async (dateField: Locator) => {\n  const handle = {\n    openByCalender: async () => {\n      const trigger = dateField.getByTestId('open-calendar');\n      await trigger.click();\n    },\n    selectDay: async (day: number) => {\n      const dayButton = dateField\n        .locator('ix-dropdown')\n        .filter({ hasText: day.toString() })\n        .getByText(day.toString());\n      await dayButton.click();\n    },\n  };\n\n  return handle;\n};\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-date-field value=\"2024/05/05\"></ix-date-field>`);\n  const dateFieldElement = page.locator('ix-date-field');\n  await expect(dateFieldElement).toHaveClass(/hydrated/);\n});\n\ntest('select date by open calendar trigger', async ({ mount, page }) => {\n  await mount(`<ix-date-field value=\"2024/05/05\"></ix-date-field>`);\n  const dateFieldElement = page.locator('ix-date-field');\n  await expect(dateFieldElement).toHaveClass(/hydrated/);\n\n  const dateField = await createDateFieldAccessor(dateFieldElement);\n  await dateField.openByCalender();\n\n  await dateField.selectDay(10);\n  await expect(dateFieldElement).toHaveAttribute('value', '2024/05/10');\n});\n\ntest('select date by focus', async ({ mount, page }) => {\n  await mount(`<ix-date-field value=\"2024/05/05\"></ix-date-field>`);\n  const dateFieldElement = page.locator('ix-date-field');\n  await expect(dateFieldElement).toHaveClass(/hydrated/);\n\n  const dateField = await createDateFieldAccessor(dateFieldElement);\n  await dateFieldElement.locator('input').focus();\n\n  await dateField.selectDay(10);\n  await expect(dateFieldElement).toHaveAttribute('value', '2024/05/10');\n  await expect(dateFieldElement.getByTestId('date-dropdown')).not.toHaveClass(\n    /show/\n  );\n});\n\ntest('select date by input', async ({ mount, page }) => {\n  await mount(`<ix-date-field value=\"2024/05/05\"></ix-date-field>`);\n  const dateFieldElement = page.locator('ix-date-field');\n  await expect(dateFieldElement).toHaveClass(/hydrated/);\n\n  const dateField = await createDateFieldAccessor(dateFieldElement);\n  await dateFieldElement.locator('input').focus();\n  await expect(dateFieldElement.getByTestId('date-dropdown')).toHaveClass(\n    /show/\n  );\n  await dateFieldElement.locator('input').fill('2025/10/10');\n\n  await expect(dateFieldElement.getByTestId('date-dropdown')).not.toHaveClass(\n    /show/\n  );\n  await expect(dateFieldElement).toHaveAttribute('value', '2025/10/10');\n\n  await dateField.openByCalender();\n\n  await expect(dateFieldElement.locator('.calendar-item.selected')).toHaveText(\n    '10'\n  );\n});\n\ntest('select date by input with invalid date', async ({ mount, page }) => {\n  await mount(`<ix-date-field value=\"2024/05/05\"></ix-date-field>`);\n  const dateFieldElement = page.locator('ix-date-field');\n  await expect(dateFieldElement).toHaveClass(/hydrated/);\n\n  const dateField = await createDateFieldAccessor(dateFieldElement);\n  await dateFieldElement.locator('input').fill('2025/10/10/10');\n  await dateField.openByCalender();\n  await expect(dateFieldElement).toHaveAttribute('value', '2025/10/10/10');\n\n  await expect(\n    dateFieldElement\n      .locator('ix-field-wrapper')\n      .locator('ix-typography')\n      .filter({ hasText: 'Date is not valid' })\n  ).toHaveText('Date is not valid');\n});\n\ntest('select date by input with invalid date - i18n', async ({\n  mount,\n  page,\n}) => {\n  await mount(\n    `<ix-date-field value=\"2024/05/05\" i18n-error-date-unparsable=\"Datum nicht korrekt!\"></ix-date-field>`\n  );\n  const dateFieldElement = page.locator('ix-date-field');\n  await expect(dateFieldElement).toHaveClass(/hydrated/);\n\n  const dateField = await createDateFieldAccessor(dateFieldElement);\n  await dateFieldElement.locator('input').fill('2025/10/10/10');\n  await dateField.openByCalender();\n  await expect(dateFieldElement).toHaveAttribute('value', '2025/10/10/10');\n\n  await expect(\n    dateFieldElement\n      .locator('ix-field-wrapper')\n      .locator('ix-typography')\n      .filter({ hasText: 'Datum nicht korrekt!' })\n  ).toHaveText('Datum nicht korrekt!');\n});\n\ntest('required', async ({ mount, page }) => {\n  await mount(`<ix-date-field required label=\"MyLabel\"></ix-date-field>`);\n  const dateFieldElement = page.locator('ix-date-field');\n  await expect(dateFieldElement).toHaveAttribute('required');\n\n  await expect(dateFieldElement.locator('ix-field-label')).toHaveText(\n    'MyLabel *'\n  );\n\n  await expect(dateFieldElement).toHaveClass(/ix-invalid--required/);\n});\n\ntest(`form-ready - ix-date-field`, async ({ mount, page }) => {\n  await mount(\n    `<form><ix-date-field name=\"my-field-name\"></ix-date-field></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const input = page.locator('ix-date-field').locator('input');\n  await input.fill('2024/05/05');\n  await input.blur();\n\n  const formData = await getFormValue(formElement, 'my-field-name');\n  expect(formData).toBe('2024/05/05');\n});\n\ntest(`form-ready - ix-date-field initial value`, async ({ mount, page }) => {\n  await mount(\n    `<form><ix-date-field name=\"my-field-name\" value=\"2024/12/12\"></ix-date-field></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const formData = await getFormValue(formElement, 'my-field-name');\n  expect(formData).toBe('2024/12/12');\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: 'c1c73273107f212831840ddb94235c9d3282c675' }, h("ix-date-time-card", { key: '5710238de0deaca8ecdc8eaeb83597ae8ad3699f', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: '4db778442b74920ba9f80d24d178ea56e8cf82e1', class: "header", slot: "header" }, h("ix-icon-button", { key: 'b142148db83890499f7d34e6d354925959d461ae', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c91debc3326cecfca594d9a716d4c9bc234dd4a6', class: "selector" }, h("ix-button", { key: '94511292c5c14747310415a0e16bda25e8aeb939', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '0507d315a40f8c33495e27cf8962a176fcf99ddd', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'dde02196313adc619f8dc5073d168ad041a20e48', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '957ebddc08f671f0d51e6cc22c45544b323d03f0', class: "wrapper" }, h("div", { key: '94a9246c658279736356b065791c1c14c0876d47', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '8af75c66d9a0c1d8c67ad21d70f99a0e76ebbc4e', 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: '8dc9183422555c9891aceb3318e1507ffa2f1fbe', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: '3999bfcc5b2477ddca4b0488dce80eb9261ffc42', class: "grid" }, h("div", { key: '244bc39cad1ed81f0820c4907c773cbfaab8726d', 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: '26d3b5e759582cbd10860fe9acdb675e9d97f1eb', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, h("ix-button", { key: '8aef28eca063bcda077e0590758c0bd17d16428f', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
+            } }, h("ix-button", { key: 'b3109bb9dfd3dcf518b58f6bc3a888632ca9469b', 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: 'fa0c2f27c199b297d27b9731d63fdfb2aa7e61c9' }, h("div", { key: '4332722d538fc8d791a97d2803cfda2c1bf4c1cd', class: this.cardClasses() }, h("div", { key: 'e611c5e65a9074a12569be57b1f867885e38782d', class: "header" }, h("slot", { key: 'fd04904836f2130af3e6e3f28b8a83374b4b529f', name: "header" })), h("div", { key: 'a25f03d3c152c3e537ea694a665f7d7c2a900e0a', class: "separator" }), h("div", { key: '2b927b2f93d741d8e79adef986887f30507bcc27', class: "content" }, h("slot", { key: '7edd1e2f07fa885302f9a3859830a5dab9ccb7e1' })))));
     }
     static get is() { return "ix-date-time-card"; }
     static get encapsulation() { return "shadow"; }
@@ -45,15 +45,15 @@ export class DateTimeCard {
     static get properties() {
         return {
             "standaloneAppearance": {
-                "type": "any",
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -62,8 +62,7 @@ export class DateTimeCard {
                     "text": ""
                 },
                 "attribute": "standalone-appearance",
-                "reflect": false,
-                "defaultValue": "undefined"
+                "reflect": false
             },
             "individual": {
                 "type": "boolean",
@@ -92,7 +91,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/date-time-card/date-time-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-card.js","sourceRoot":"","sources":["../../../src/components/date-time-card/date-time-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;oCAEQ,SAAS;0BAKV,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;gBACrC,CAAC,CAAC,IAAI,CAAC,oBAAoB;gBAC3B,CAAC,CAAC,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;gBAC5B,4DAAK,KAAK,EAAC,QAAQ;oBACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBAEN,4DAAK,KAAK,EAAC,WAAW,GAAO;gBAE7B,4DAAK,KAAK,EAAC,SAAS;oBAClB,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance = undefined;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance:\n        this.standaloneAppearance !== undefined\n          ? this.standaloneAppearance\n          : this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"date-time-card.js","sourceRoot":"","sources":["../../../src/components/date-time-card/date-time-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;;0BAOO,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;gBACrC,CAAC,CAAC,IAAI,CAAC,oBAAoB;gBAC3B,CAAC,CAAC,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;gBAC5B,4DAAK,KAAK,EAAC,QAAQ;oBACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBAEN,4DAAK,KAAK,EAAC,WAAW,GAAO;gBAE7B,4DAAK,KAAK,EAAC,SAAS;oBAClB,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance:\n        this.standaloneAppearance !== undefined\n          ? this.standaloneAppearance\n          : this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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: '94d1ca87f91601415fe5a21075f84cd7da6acb28' }, h("ix-layout-grid", { key: '62717105d6b7d0891e5639c3077aa8a863b792ac', class: "no-padding" }, h("ix-row", { key: 'f689afd3bca916309313a5a84871279855af089d' }, h("ix-col", { key: '0f460e11dd5a31d6792b10375e3920030a84618a', class: "no-padding" }, h("ix-date-picker", { key: 'fa18dbf1eba23b4866b7546dfce20a8cb36a9bbb', 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: '5abb9b2b267a76af3f12f64b45023f9ac2425544', class: "no-padding" }, h("ix-time-picker", { key: '7dfd2a2dbcf5cc8a5d579cacdc72b8ff8a4e4b80', 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: '8431567e445a1971c6199a7acd82407ac4ac744d' }, h("ix-col", { key: 'f23276218e9e2b8f81b9b552cd415a3723c13f50' }, h("ix-button", { key: '879c7d43ab47c4345dc5fe11dabb9eb7fb6ebe4b', 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: '6e1de6d2dee4f1184fa5e7791dd3032a1ed93fa5' });
     }
     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;

package/dist/collection/components/drawer/drawer.js

@@ -86,7 +86,7 @@ export class Drawer {
         this.onShowChanged(this.show);
     }
     render() {
-        return (h(Host, { key: '48546d54d8c859e184c75935f0729826247e36d5', class: {
+        return (h(Host, { key: 'be37a222f4696bcd58f5e82bca62d885192c2678', class: {
                 'drawer-container': true,
                 toggle: this.show,
                 'full-height': this.fullHeight,
@@ -95,7 +95,7 @@ export class Drawer {
                 width: this.width === 'auto' ? this.width : `${this.width}rem`,
                 'min-width': `${this.minWidth}rem`,
                 'max-width': `${this.maxWidth}rem`,
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: 'a574087e718559ca1562a41617c457f24dd9fd33', class: "header" }, h("div", { key: '126ab85b1452d7338043cc5457db98b047185d1a', class: "header-content" }, h("slot", { key: '0f62e3434f942f72c268359aacdf11a881553104', name: "header" })), h("ix-icon-button", { key: '42c763a72136811a6e0c5999cd0b7689ef7c9035', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: 'f7e7536dde130c707bf7584a64fae3002ddf3035', class: "content" }, h("slot", { key: '50c5e7afd95802fb9ceb537b788b826a888254df' }))));
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: '6d390a6aac80cc0685cea9d168e73a7bf89e00f0', class: "header" }, h("div", { key: 'd2f34f7ba0e6f180bbdd025d667552f6d88cc2fa', class: "header-content" }, h("slot", { key: '492ed29a5a68c05576eba61a379462353c9bfcdb', name: "header" })), h("ix-icon-button", { key: '21d7593f713e459e29ad60ffcf23c9d6b8189a21', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '388aed555e98aafa96710e3e66e736ebb5e571e3', class: "content" }, h("slot", { key: '4d5a255950b41d2943f1978379fea38637807bc8' }))));
     }
     static get is() { return "ix-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,6 +29,9 @@ class DropdownController {
     disconnected(dropdown) {
         this.dropdowns.delete(dropdown.getId());
     }
+    getDropdownById(id) {
+        return this.dropdowns.get(id);
+    }
     discoverSubmenus() {
         this.dropdowns.forEach((dropdown) => {
             dropdown.discoverSubmenu();
@@ -78,6 +81,7 @@ class DropdownController {
     }
     dismissOthers(uid) {
         let path = this.buildComposedPath(uid, new Set());
+        path.add(uid);
         this.dropdowns.forEach((dropdown) => {
             if (dropdown.closeBehavior !== 'inside' &&
                 dropdown.closeBehavior !== false &&

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-controller.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-controller.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAuBH,MAAM,UAAU,iCAAiC,CAC/C,IAAa;IAEb,OAAO,CACL,IAAI;QACH,IAA4B,CAAC,sBAAsB,KAAK,SAAS;QAClE,OAAQ,IAA4B,CAAC,sBAAsB,KAAK,UAAU,CAC3E,CAAC;AACJ,CAAC;AAQD,MAAM,kBAAkB;IAAxB;QACU,cAAS,GAAmC,IAAI,GAAG,EAGxD,CAAC;QACI,eAAU,GAAe,EAAE,CAAC;QAE5B,2BAAsB,GAAG,KAAK,CAAC;IA+IzC,CAAC;IA7IC,SAAS,CAAC,QAA2B;QACnC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACjC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;QAE/C,IAAI,QAAQ,CAAC,mBAAmB,EAAE,CAAC;YACjC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,YAAY,CAAC,QAA2B;QACtC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAClC,QAAQ,CAAC,eAAe,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,QAA2B;QACjC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,QAAQ,CAAC,WAAW,EAAE,EAAE,CAAC;YACpD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YACrE,QAAQ,CAAC,OAAO,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,GAAW;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAC5C,KAAK,MAAM,EAAE,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAED,OAAO,CAAC,QAA2B;QACjC,IAAI,QAAQ,CAAC,SAAS,EAAE,IAAI,QAAQ,CAAC,WAAW,EAAE,EAAE,CAAC;YACnD,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;YACvC,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,UAAU,CACR,uBAAiC,EAAE,EACnC,sBAAsB,GAAG,KAAK;QAE9B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAClC,MAAM,cAAc,GAClB,QAAQ,CAAC,aAAa,KAAK,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,KAAK,CAAC;YAE1E,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;YACrE,MAAM,IAAI,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,GAAG,EAAU,CAAC,CAAC;YAEzE,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,sBAAsB,EAAE,CAAC;gBAC9D,IAAI,mBAAmB,GAAG,KAAK,CAAC;gBAEhC,oBAAoB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;oBAClC,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;wBACjB,mBAAmB,GAAG,IAAI,CAAC;wBAC3B,OAAO;oBACT,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBACzB,OAAO;gBACT,CAAC;YACH,CAAC;YAED,IAAI,CAAC,YAAY,IAAI,cAAc,EAAE,CAAC;gBACpC,OAAO;YACT,CAAC;YAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,aAAa,CAAC,GAAW;QACvB,IAAI,IAAI,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,IAAI,GAAG,EAAU,CAAC,CAAC;QAE1D,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAClC,IACE,QAAQ,CAAC,aAAa,KAAK,QAAQ;gBACnC,QAAQ,CAAC,aAAa,KAAK,KAAK;gBAChC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,EAC3B,CAAC;gBACD,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB,CAAC,YAA2B;QAC7C,KAAK,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC;YACrC,IAAI,WAAW,YAAY,WAAW,EAAE,CAAC;gBACvC,IAAI,WAAW,CAAC,YAAY,CAAC,0BAA0B,CAAC,EAAE,CAAC;oBACzD,OAAO,WAAW,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO;IACT,CAAC;IAEO,oBAAoB,CAAC,YAA2B;QACtD,OAAO,CAAC,CAAC,YAAY,CAAC,IAAI,CACxB,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,KAAK,aAAa,CAC5D,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,EAAU,EAAE,IAAiB;QACrD,IAAI,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACf,CAAC;QAED,KAAK,MAAM,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACnD,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YACxE,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QAEnC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAmB,EAAE,EAAE;YACvD,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC;YAClE,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC;YAEpE,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE,CAAC;gBAChC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE;YAC1D,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,OAAoC,EACpC,SAAiB,EACjB,QAA4C,EAC5C,EAAE;IACF,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE9C,OAAO,GAAG,EAAE;QACV,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAC/C,QAIG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CACpE,0BAA0B,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC,CACzD,CAAC;IAEF,OAAO,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,kBAAkB,EAAE,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    item &&\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    this.dropdowns.delete(dropdown.getId());\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      this.dismiss(this.dropdowns.get(id));\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(\n    ignoreBehaviorForIds: string[] = [],\n    ignoreRelatedDropdowns = false\n  ) {\n    this.dropdowns.forEach((dropdown) => {\n      const preventClosing =\n        dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;\n\n      const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());\n      const path = this.buildComposedPath(dropdown.getId(), new Set<string>());\n\n      if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {\n        let skipRelatedDropdown = false;\n\n        ignoreBehaviorForIds.forEach((id) => {\n          if (path.has(id)) {\n            skipRelatedDropdown = true;\n            return;\n          }\n        });\n\n        if (!skipRelatedDropdown) {\n          return;\n        }\n      }\n\n      if (!shouldIgnore && preventClosing) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    for (let eventTarget of eventTargets) {\n      if (eventTarget instanceof HTMLElement) {\n        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {\n          return eventTarget;\n        }\n      }\n    }\n\n    return;\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: PointerEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const addDisposableEventListener = (\n  element: Element | Window | Document,\n  eventType: string,\n  callback: EventListenerOrEventListenerObject\n) => {\n  element.addEventListener(eventType, callback);\n\n  return () => {\n    element.removeEventListener(eventType, callback);\n  };\n};\n\nexport const addDisposableEventListenerAsArray = (\n  listener: {\n    element: Element | Window | Document;\n    eventType: string;\n    callback: EventListenerOrEventListenerObject;\n  }[]\n) => {\n  const disposables = listener.map(({ callback, element, eventType }) =>\n    addDisposableEventListener(element, eventType, callback)\n  );\n\n  return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n"]}
+{"version":3,"file":"dropdown-controller.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    item &&\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    this.dropdowns.delete(dropdown.getId());\n  }\n\n  getDropdownById(id: string) {\n    return this.dropdowns.get(id);\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      this.dismiss(this.dropdowns.get(id));\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(\n    ignoreBehaviorForIds: string[] = [],\n    ignoreRelatedDropdowns = false\n  ) {\n    this.dropdowns.forEach((dropdown) => {\n      const preventClosing =\n        dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;\n\n      const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());\n      const path = this.buildComposedPath(dropdown.getId(), new Set<string>());\n\n      if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {\n        let skipRelatedDropdown = false;\n\n        ignoreBehaviorForIds.forEach((id) => {\n          if (path.has(id)) {\n            skipRelatedDropdown = true;\n            return;\n          }\n        });\n\n        if (!skipRelatedDropdown) {\n          return;\n        }\n      }\n\n      if (!shouldIgnore && preventClosing) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n    path.add(uid);\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    for (let eventTarget of eventTargets) {\n      if (eventTarget instanceof HTMLElement) {\n        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {\n          return eventTarget;\n        }\n      }\n    }\n\n    return;\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: PointerEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const addDisposableEventListener = (\n  element: Element | Window | Document,\n  eventType: string,\n  callback: EventListenerOrEventListenerObject\n) => {\n  element.addEventListener(eventType, callback);\n\n  return () => {\n    element.removeEventListener(eventType, callback);\n  };\n};\n\nexport const addDisposableEventListenerAsArray = (\n  listener: {\n    element: Element | Window | Document;\n    eventType: string;\n    callback: EventListenerOrEventListenerObject;\n  }[]\n) => {\n  const disposables = listener.map(({ callback, element, eventType }) =>\n    addDisposableEventListener(element, eventType, callback)\n  );\n\n  return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n"]}

package/dist/collection/components/dropdown/dropdown.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;

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

@@ -190,7 +190,7 @@ export class Dropdown {
         });
     }
     async changedShow(newShow) {
-        var _a;
+        var _a, _b, _c;
         if (newShow) {
             this.anchorElement = await (this.anchor
                 ? this.resolveElement(this.anchor)
@@ -206,9 +206,9 @@ export class Dropdown {
             this.registerKeyListener();
         }
         else {
-            this.arrowFocusController.disconnect();
-            this.itemObserver.disconnect();
-            (_a = this.disposeKeyListener) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+            (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            (_c = this.disposeKeyListener) === null || _c === void 0 ? void 0 : _c.call(this);
         }
     }
     changedTrigger(newTriggerValue) {
@@ -296,12 +296,15 @@ export class Dropdown {
     onDropdownClick(event) {
         const target = dropdownController.pathIncludesTrigger(event.composedPath());
         if (target) {
-            event.preventDefault();
+            if (target !== this.triggerElement) {
+                event.preventDefault();
+            }
             if (this.isTriggerElement(target)) {
                 return;
             }
         }
-        if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {
+        if (!event.defaultPrevented &&
+            (this.closeBehavior === 'inside' || this.closeBehavior === 'both')) {
             dropdownController.dismissAll([this.getId()], this.ignoreRelatedSubmenu);
             return;
         }
@@ -314,7 +317,7 @@ export class Dropdown {
         this.applyDropdownPosition();
     }
     render() {
-        return (h(Host, { key: 'd235024aac5f2ef9d849b6ec73b2cfe69d4bf902', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (h(Host, { key: 'c5fa949b336dfa2d85453647ec285661866b4c05', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: true,
@@ -322,7 +325,7 @@ export class Dropdown {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '9502d259b770f3badcc56d3132d8c02b00cca30a', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: '73be2831a06b820a4284a44ed0d128ddffca38a2' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'bd0b94a0f4f12fe426ea040eba252e2b571f10a2', style: { display: 'contents' } }, this.header && h("div", { key: '353ea10f7608c8a822058eb869345ca0178f4c91', class: "dropdown-header" }, this.header), h("slot", { key: 'b573d70610827470688dc4369d152fcdf55bdd3d' }))));
     }
     static get is() { return "ix-dropdown"; }
     static get encapsulation() { return "shadow"; }