@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport { ArrowFocusController } from '../utils/focus';\nimport {\n  CloseBehavior,\n  dropdownController,\n  DropdownInterface,\n  hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\nimport { findElement } from '../utils/find-element';\nimport {\n  addDisposableEventListener,\n  DisposableEventListener,\n} from '../utils/disposable-event-listener';\nimport { ElementReference } from '../utils/element-reference';\n\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger?: ElementReference;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor?: ElementReference;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset?: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle?: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * @internal\n   * If initialization of this dropdown is expected to be deferred submenu discovery will have to be re-run globally by the controller.\n   * This property indicates the need for that to the controller.\n   */\n  @Prop() discoverAllSubmenus = false;\n\n  /** @internal */\n  @Prop() ignoreRelatedSubmenu = false;\n\n  /** @internal */\n  @Prop() suppressOverflowBehavior = false;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged!: EventEmitter<boolean>;\n\n  private autoUpdateCleanup?: () => void;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n  private arrowFocusController?: ArrowFocusController;\n\n  private localUId = `dropdown-${sequenceId++}`;\n  private assignedSubmenu: string[] = [];\n\n  private itemObserver? = new MutationObserver(() => {\n    if (this.arrowFocusController) {\n      this.arrowFocusController.items = this.dropdownItems;\n    }\n  });\n\n  connectedCallback(): void {\n    dropdownController.connected(this);\n\n    if (this.trigger != undefined) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  @Listen('ix-assign-sub-menu')\n  cacheSubmenuId(event: CustomEvent<string>) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n\n    const { detail } = event;\n\n    if (this.assignedSubmenu.indexOf(detail) === -1) {\n      this.assignedSubmenu.push(detail);\n    }\n  }\n\n  disconnectedCallback() {\n    dropdownController.dismiss(this);\n    dropdownController.disconnected(this);\n\n    if (this.arrowFocusController) {\n      this.arrowFocusController?.disconnect();\n      this.arrowFocusController = undefined;\n    }\n\n    if (this.itemObserver) {\n      this.itemObserver.disconnect();\n      this.itemObserver = undefined;\n    }\n\n    if (this.disposeClickListener) {\n      this.disposeClickListener();\n      this.disposeClickListener = undefined;\n    }\n\n    if (this.disposeKeyListener) {\n      this.disposeKeyListener();\n      this.disposeKeyListener = undefined;\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = undefined;\n    }\n  }\n\n  getAssignedSubmenuIds() {\n    return this.assignedSubmenu;\n  }\n\n  isPresent() {\n    return this.show;\n  }\n\n  present() {\n    this.show = true;\n  }\n\n  dismiss() {\n    this.show = false;\n  }\n\n  getId() {\n    return this.localUId;\n  }\n\n  willDismiss() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n    return !defaultPrevented;\n  }\n\n  willPresent() {\n    const { defaultPrevented } = this.showChanged.emit(true);\n    return !defaultPrevented;\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot!.querySelector('slot');\n  }\n\n  private disposeClickListener?: DisposableEventListener;\n  private disposeKeyListener?: DisposableEventListener;\n\n  private addEventListenersFor() {\n    this.disposeClickListener?.();\n    this.disposeKeyListener?.();\n\n    const toggleController = () => {\n      if (!this.isPresent()) {\n        dropdownController.present(this);\n      } else {\n        dropdownController.dismiss(this);\n      }\n\n      dropdownController.dismissOthers(this.getId());\n    };\n\n    if (!this.triggerElement) {\n      return;\n    }\n\n    this.disposeClickListener = addDisposableEventListener(\n      this.triggerElement,\n      'click',\n      (event: Event) => {\n        if (!event.defaultPrevented) {\n          toggleController();\n        }\n      }\n    );\n\n    this.triggerElement?.setAttribute(\n      'data-ix-dropdown-trigger',\n      this.localUId\n    );\n  }\n\n  /** @internal */\n  @Method()\n  async discoverSubmenu() {\n    this.triggerElement?.dispatchEvent(\n      new CustomEvent('ix-assign-sub-menu', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n        detail: this.localUId,\n      })\n    );\n  }\n\n  private registerKeyListener() {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    this.disposeKeyListener = addDisposableEventListener(\n      this.triggerElement,\n      'keydown',\n      ((event: KeyboardEvent) => {\n        if (event.key !== 'ArrowDown') {\n          return;\n        }\n\n        if (document.activeElement !== this.triggerElement) {\n          return;\n        }\n\n        dropdownController.present(this);\n\n        setTimeout(() => {\n          this.focusDropdownItem(0);\n        });\n      }) as EventListener\n    );\n  }\n\n  private async registerListener(element: ElementReference) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      this.addEventListenersFor();\n      this.discoverSubmenu();\n    }\n  }\n\n  private async resolveElement(element: ElementReference) {\n    const el = await findElement(element);\n\n    return this.checkForSubmenuAnchor(el);\n  }\n\n  private async checkForSubmenuAnchor(element?: Element) {\n    if (!element) {\n      return undefined;\n    }\n\n    if (hasDropdownItemWrapperImplemented(element)) {\n      const dropdownItem = await element.getDropdownItemElement();\n      dropdownItem.isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    if (element.tagName === 'IX-DROPDOWN-ITEM') {\n      (element as HTMLIxDropdownItemElement).isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    return element;\n  }\n\n  private async resolveAnchorElement() {\n    if (this.anchor) {\n      this.anchorElement = await this.resolveElement(this.anchor);\n    } else if (this.trigger) {\n      this.anchorElement = await this.resolveElement(this.trigger);\n    }\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      await this.resolveAnchorElement();\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n\n      this.arrowFocusController = new ArrowFocusController(\n        this.dropdownItems,\n        this.hostElement,\n        (index) => this.focusDropdownItem(index)\n      );\n\n      this.itemObserver?.observe(this.hostElement, {\n        childList: true,\n        subtree: true,\n      });\n\n      this.registerKeyListener();\n    } else {\n      this.destroyAutoUpdate();\n      this.arrowFocusController?.disconnect();\n      this.itemObserver?.disconnect();\n      this.disposeKeyListener?.();\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(newTriggerValue: ElementReference) {\n    this.registerListener(newTriggerValue);\n  }\n\n  private destroyAutoUpdate() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = undefined;\n    }\n  }\n\n  private isAnchorSubmenu(): boolean {\n    if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n      // Is no official dropdown-item, but check if any dropdown-item\n      // is placed somewhere up the DOM\n      return !!this.anchorElement?.closest('ix-dropdown-item');\n    }\n\n    return true;\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.show) {\n      return;\n    }\n    if (!this.anchorElement) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware?.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...(positionConfig.middleware?.filter(Boolean) || []),\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    this.destroyAutoUpdate();\n\n    if (!this.anchorElement) {\n      return;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.hostElement,\n      async () => {\n        if (this.anchorElement) {\n          const computeResponse = await computePosition(\n            this.anchorElement,\n            this.hostElement,\n            positionConfig\n          );\n          Object.assign(this.hostElement.style, {\n            top: '0',\n            left: '0',\n            transform: `translate(${Math.round(\n              computeResponse.x\n            )}px,${Math.round(computeResponse.y)}px)`,\n          });\n        }\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.hostElement,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.hostElement.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private focusDropdownItem(index: number) {\n    requestAnimationFrame(() => {\n      const button =\n        this.dropdownItems[index]?.shadowRoot?.querySelector('button');\n\n      if (button) {\n        button.focus();\n      }\n    });\n  }\n\n  async componentDidLoad() {\n    if (!this.trigger) {\n      return;\n    }\n\n    this.changedTrigger(this.trigger);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    await this.resolveAnchorElement();\n  }\n\n  private isTriggerElement(element: HTMLElement) {\n    const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n    return trigger;\n  }\n\n  private onDropdownClick(event: PointerEvent) {\n    const target = dropdownController.pathIncludesTrigger(event.composedPath());\n    if (target) {\n      if (target !== this.triggerElement) {\n        event.preventDefault();\n      }\n\n      if (this.isTriggerElement(target)) {\n        if (this.closeBehavior === 'outside') {\n          event.preventDefault();\n        }\n        return;\n      }\n    }\n\n    if (\n      !event.defaultPrevented &&\n      (this.closeBehavior === 'inside' || this.closeBehavior === 'both')\n    ) {\n      dropdownController.dismissAll([this.getId()], this.ignoreRelatedSubmenu);\n      return;\n    }\n\n    dropdownController.dismissOthers(this.getId());\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        data-ix-dropdown={this.localUId}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: !this.suppressOverflowBehavior,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n        onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n          {this.show && <slot></slot>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=placement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"placement.js","sourceRoot":"","sources":["../../../src/components/dropdown/placement.ts"],"names":[],"mappings":"","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 */\nexport declare const top: 'top';\nexport declare const bottom: 'bottom';\nexport declare const right: 'right';\nexport declare const left: 'left';\n\nexport type Alignment = 'start' | 'end';\nexport type Side = 'top' | 'right' | 'bottom' | 'left';\nexport type AlignedPlacement = `${Side}-${Alignment}`;\n"]}

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

@@ -0,0 +1,593 @@
+/*
+ * 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 { expect } from "@playwright/test";
+import { iconCogwheel, iconHeart, iconPin, iconPrint, iconStar, } from "@siemens/ix-icons/icons";
+import { regressionTest, viewPorts } from "../../../tests/utils/test/index";
+const html = String.raw;
+regressionTest('renders', async ({ mount, page }) => {
+    await mount(`
+  <ix-split-button label="Test 1">
+    <ix-dropdown-item>Test 1</ix-dropdown-item>
+  </ix-split-button>
+
+  <ix-split-button label="Test 2">
+    <ix-dropdown-item>Test 1</ix-dropdown-item>
+  </ix-split-button>
+
+  <ix-group header="Title" sub-header="Subtitle">
+    <ix-dropdown slot="dropdown">
+      <ix-dropdown-item label="Item 1" icon="pin" />
+      <ix-dropdown-item label="Item 2" icon="star" />
+      <ix-dropdown-item label="Item 3" icon="heart" />
+      <ix-dropdown-item label="Item 4" icon="cogwheel" />
+    </ix-dropdown>
+  </ix-group>
+
+  <ix-group header="Title" sub-header="Subtitle">
+    <ix-dropdown slot="dropdown">
+      <ix-dropdown-item label="Item 1" icon="pin" />
+      <ix-dropdown-item label="Item 2" icon="star" />
+      <ix-dropdown-item label="Item 3" icon="heart" />
+      <ix-dropdown-item label="Item 4" icon="cogwheel" />
+    </ix-dropdown>
+  </ix-group>
+  `, {
+        icons: { iconPin, iconStar, iconHeart, iconCogwheel },
+    });
+    const sb1 = page.locator('ix-split-button').nth(0);
+    const sb2 = page.locator('ix-split-button').nth(1);
+    const g1 = page.locator('ix-group').nth(0);
+    const g2 = page.locator('ix-group').nth(1);
+    const sb1Dropdown = sb1.locator('ix-dropdown');
+    const sb2Dropdown = sb2.locator('ix-dropdown');
+    const g1Dropdown = g1.locator('ix-dropdown');
+    const g2Dropdown = g2.locator('ix-dropdown');
+    await sb1.locator('ix-icon-button').first().click();
+    await expectToBeVisible([sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown], 0);
+    await sb2.locator('ix-icon-button').first().click();
+    await expectToBeVisible([sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown], 1);
+    await g2.locator('ix-icon-button').click();
+    await expectToBeVisible([sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown], 3);
+});
+function expectToBeVisible(elements, index) {
+    return Promise.all(elements.map(async (element, i) => {
+        let ef = expect(element);
+        if (i !== index) {
+            ef = ef.not;
+        }
+        await ef.toBeVisible();
+    }));
+}
+regressionTest('trigger toggles', async ({ mount, page }) => {
+    await mount(`<ix-button id="trigger">Open</ix-button>
+    <ix-dropdown trigger="trigger" trigger-toggles="true">
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-dropdown>
+  `);
+    await page.locator('ix-button').click();
+    const dropdown = page.locator('.dropdown-menu');
+    await expect(dropdown).toHaveClass(/show/);
+    await expect(dropdown).toBeVisible();
+    await page.locator('ix-button').click();
+    const after = page.locator('.dropdown-menu');
+    await expect(after).not.toHaveClass(/show/);
+    await expect(dropdown).not.toBeVisible();
+});
+regressionTest.describe('Close behavior', () => {
+    function mountDropdown(mount, config) {
+        const closeBehavior = config.closeBehavior
+            ? `close-behavior="${config.closeBehavior}"`
+            : '';
+        return mount(`
+      <ix-button id="level-1">Trigger</ix-button>
+      <ix-dropdown id="dropdown-level-1" trigger="level-1" ${closeBehavior}>
+        <ix-dropdown-item>Item 1</ix-dropdown-item>
+        <ix-dropdown-item>Item 2</ix-dropdown-item>
+        <ix-dropdown-item>Item 3</ix-dropdown-item>
+      </ix-dropdown>
+  `);
+    }
+    let triggerButton;
+    let dropdownLevel1;
+    let dropdownLevel1_Item1;
+    function setupTest(page) {
+        triggerButton = page.locator('#level-1');
+        dropdownLevel1 = page.locator('#dropdown-level-1');
+        dropdownLevel1_Item1 = dropdownLevel1
+            .locator('ix-dropdown-item')
+            .getByText('Item 1');
+    }
+    regressionTest(' = both', async ({ mount, page }) => {
+        await mountDropdown(mount, {
+            closeBehavior: 'both',
+        });
+        setupTest(page);
+        await triggerButton.click();
+        await expect(dropdownLevel1).toBeVisible();
+        await page.mouse.click(400, 200);
+        await expect(dropdownLevel1).not.toBeVisible();
+        await triggerButton.click();
+        await expect(dropdownLevel1).toBeVisible();
+        await dropdownLevel1_Item1.click();
+        await expect(dropdownLevel1).not.toBeVisible();
+    });
+    regressionTest(' = inside', async ({ mount, page }) => {
+        await mountDropdown(mount, {
+            closeBehavior: 'inside',
+        });
+        setupTest(page);
+        await triggerButton.click();
+        await expect(dropdownLevel1).toBeVisible();
+        await page.mouse.click(400, 200);
+        await expect(dropdownLevel1).toBeVisible();
+        await dropdownLevel1_Item1.click();
+        await expect(dropdownLevel1).not.toBeVisible();
+    });
+    regressionTest(' = outside', async ({ mount, page }) => {
+        await mountDropdown(mount, {
+            closeBehavior: 'outside',
+        });
+        setupTest(page);
+        await triggerButton.click();
+        await expect(dropdownLevel1).toBeVisible();
+        await page.mouse.click(400, 200);
+        await expect(dropdownLevel1).not.toBeVisible();
+        await triggerButton.click();
+        await expect(dropdownLevel1).toBeVisible();
+        await dropdownLevel1_Item1.click();
+        await expect(dropdownLevel1).toBeVisible();
+    });
+    regressionTest(' = false', async ({ mount, page }) => {
+        await mountDropdown(mount, {
+            // Disable close behavior
+            closeBehavior: false,
+        });
+        // Have to be provided via javascript, otherwise the component parse the value as a string.
+        await page
+            .locator('ix-dropdown')
+            .evaluate((dropdown) => (dropdown.closeBehavior = false));
+        setupTest(page);
+        await triggerButton.click();
+        await expect(dropdownLevel1).toBeVisible();
+        await page.mouse.click(400, 200);
+        await expect(dropdownLevel1).toBeVisible();
+        await triggerButton.click();
+        await expect(dropdownLevel1).not.toBeVisible();
+        await triggerButton.click();
+        await expect(dropdownLevel1).toBeVisible();
+        await dropdownLevel1_Item1.click({
+            force: true,
+        });
+        await expect(dropdownLevel1).toBeVisible();
+    });
+});
+regressionTest('Prevent closing', async ({ page, mount }) => {
+    await mount(`
+    <ix-button id="trigger">Open</ix-button>
+    <ix-dropdown trigger="trigger">
+      <ix-dropdown-header id="header">Header</ix-dropdown-header>
+      <ix-dropdown-item id="item-1">Item 1</ix-dropdown-item>
+    </ix-dropdown>`);
+    const header = await page.locator('ix-dropdown-header');
+    header.evaluate((h) => h.addEventListener('click', (event) => {
+        event.preventDefault();
+    }));
+    await page.locator('#trigger').click();
+    await expect(header).toBeVisible();
+    await header.click();
+    await expect(header).toBeVisible();
+    await page.locator('#item-1').click();
+    await expect(header).not.toBeVisible();
+});
+regressionTest.describe('Nested dropdowns 1/3', () => {
+    function mountDropdown(mount, config) {
+        var _a;
+        return mount(html `
+      <ix-button id="trigger-dropdown-1">Trigger 1</ix-button>
+      <ix-dropdown
+        close-behavior="${(_a = config === null || config === void 0 ? void 0 : config.closeBehavior) !== null && _a !== void 0 ? _a : 'both'}"
+        id="dropdown-1"
+        trigger="trigger-dropdown-1"
+      >
+        <ix-dropdown-item id="trigger-dropdown-2">Item 1</ix-dropdown-item>
+        <ix-dropdown-item>Item 2</ix-dropdown-item>
+        <ix-dropdown-item id="trigger-dropdown-3">Item 3</ix-dropdown-item>
+      </ix-dropdown>
+
+      <ix-dropdown trigger="trigger-dropdown-2" id="dropdown-2">
+        <ix-dropdown-item>Item 1.1</ix-dropdown-item>
+        <ix-dropdown-item>Item 1.2</ix-dropdown-item>
+        <ix-dropdown-item>Item 1.3</ix-dropdown-item>
+      </ix-dropdown>
+
+      <ix-dropdown trigger="trigger-dropdown-3" id="dropdown-3">
+        <ix-dropdown-item>Item 3.1</ix-dropdown-item>
+        <ix-dropdown-item>Item 3.2</ix-dropdown-item>
+        <ix-dropdown-item id="trigger-dropdown-4">Item 3.3</ix-dropdown-item>
+      </ix-dropdown>
+
+      <ix-dropdown trigger="trigger-dropdown-4" id="dropdown-4">
+        <ix-dropdown-item>Item 3.3.1</ix-dropdown-item>
+        <ix-dropdown-item>Item 3.3.2</ix-dropdown-item>
+        <ix-dropdown-item>Item 3.3.3</ix-dropdown-item>
+      </ix-dropdown>
+
+      <ix-button id="trigger-dropdown-5">Trigger 5</ix-button>
+      <ix-dropdown id="dropdown-5" trigger="trigger-dropdown-5">
+        <ix-dropdown-item>Item 1</ix-dropdown-item>
+        <ix-dropdown-item>Item 2</ix-dropdown-item>
+        <ix-dropdown-item id="trigger-dropdown-6">Item 3</ix-dropdown-item>
+      </ix-dropdown>
+
+      <ix-dropdown id="dropdown-6" trigger="trigger-dropdown-6">
+        <ix-dropdown-item>Item 1</ix-dropdown-item>
+        <ix-dropdown-item>Item 2</ix-dropdown-item>
+        <ix-dropdown-item>Item 3</ix-dropdown-item>
+      </ix-dropdown>
+    `);
+    }
+    let triggerDropdown1;
+    let triggerDropdown2;
+    let triggerDropdown3;
+    let triggerDropdown4;
+    let triggerDropdown5;
+    let dropdown1;
+    let dropdown2;
+    let dropdown3;
+    let dropdown4;
+    let dropdown5;
+    function setupTest(page) {
+        triggerDropdown1 = page.locator('#trigger-dropdown-1');
+        triggerDropdown2 = page.locator('#trigger-dropdown-2');
+        triggerDropdown3 = page.locator('#trigger-dropdown-3');
+        triggerDropdown4 = page.locator('#trigger-dropdown-4');
+        triggerDropdown5 = page.locator('#trigger-dropdown-5');
+        dropdown1 = page.locator('#dropdown-1');
+        dropdown2 = page.locator('#dropdown-2');
+        dropdown3 = page.locator('#dropdown-3');
+        dropdown4 = page.locator('#dropdown-4');
+        dropdown5 = page.locator('#dropdown-5');
+    }
+    regressionTest('close neighbor sub menu', async ({ mount, page }) => {
+        await mountDropdown(mount);
+        setupTest(page);
+        await triggerDropdown1.click();
+        await expect(dropdown1).toBeVisible();
+        await triggerDropdown3.click();
+        await expect(dropdown3).toBeVisible();
+        await triggerDropdown5.click();
+        await expect(dropdown5).toBeVisible();
+        await expect(dropdown1).not.toBeVisible();
+        await expect(dropdown3).not.toBeVisible();
+    });
+    regressionTest('close assigned submenu', async ({ mount, page }) => {
+        await mountDropdown(mount);
+        setupTest(page);
+        await triggerDropdown1.click();
+        await expect(dropdown1).toBeVisible();
+        await triggerDropdown2.click();
+        await expect(dropdown2).toBeVisible();
+        await triggerDropdown3.click();
+        await expect(dropdown2).not.toBeVisible();
+        await expect(dropdown3).toBeVisible();
+        await triggerDropdown4.click();
+        await expect(dropdown4).toBeVisible();
+        await triggerDropdown3.click();
+        await expect(dropdown3).not.toBeVisible();
+        await expect(dropdown4).not.toBeVisible();
+    });
+    regressionTest.describe('close by Escape with close behavior', () => {
+        regressionTest(' = both', async ({ mount, page }) => {
+            await mountDropdown(mount);
+            setupTest(page);
+            await triggerDropdown1.click();
+            await expect(dropdown1).toBeVisible();
+            await triggerDropdown2.click();
+            await expect(dropdown2).toBeVisible();
+            await triggerDropdown3.click();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).toBeVisible();
+            await triggerDropdown4.click();
+            await expect(dropdown4).toBeVisible();
+            await page.keyboard.press('Escape');
+            await expect(dropdown1).not.toBeVisible();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).not.toBeVisible();
+            await expect(dropdown4).not.toBeVisible();
+        });
+        regressionTest(' = inside', async ({ mount, page }) => {
+            await mountDropdown(mount, {
+                closeBehavior: 'inside',
+            });
+            setupTest(page);
+            await triggerDropdown1.click();
+            await expect(dropdown1).toBeVisible();
+            await triggerDropdown2.click();
+            await expect(dropdown2).toBeVisible();
+            await triggerDropdown3.click();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).toBeVisible();
+            await triggerDropdown4.click();
+            await expect(dropdown4).toBeVisible();
+            await page.keyboard.press('Escape');
+            await expect(dropdown1).not.toBeVisible();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).not.toBeVisible();
+            await expect(dropdown4).not.toBeVisible();
+        });
+        regressionTest(' = outside', async ({ mount, page }) => {
+            await mountDropdown(mount, { closeBehavior: 'outside' });
+            setupTest(page);
+            await triggerDropdown1.click();
+            await expect(dropdown1).toBeVisible();
+            await triggerDropdown2.click();
+            await expect(dropdown2).toBeVisible();
+            await triggerDropdown3.click();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).toBeVisible();
+            await triggerDropdown4.click();
+            await expect(dropdown4).toBeVisible();
+            await page.keyboard.press('Escape');
+            await expect(dropdown1).not.toBeVisible();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).not.toBeVisible();
+            await expect(dropdown4).not.toBeVisible();
+        });
+        regressionTest(' = false', async ({ mount, page }) => {
+            await mountDropdown(mount, { closeBehavior: false });
+            setupTest(page);
+            await triggerDropdown1.click();
+            await expect(dropdown1).toBeVisible();
+            await triggerDropdown2.click();
+            await expect(dropdown2).toBeVisible();
+            await triggerDropdown3.click();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).toBeVisible();
+            await triggerDropdown4.click();
+            await expect(dropdown4).toBeVisible();
+            await page.keyboard.press('Escape');
+            await expect(dropdown1).not.toBeVisible();
+            await expect(dropdown2).not.toBeVisible();
+            await expect(dropdown3).not.toBeVisible();
+            await expect(dropdown4).not.toBeVisible();
+        });
+    });
+});
+regressionTest.describe('nested dropdown 2/3', () => {
+    const button1Text = 'Triggerbutton1';
+    const button2Text = 'Triggerbutton2';
+    regressionTest.beforeEach(async ({ mount }) => {
+        await mount(`
+      <button id="trigger1">${button1Text}</button>
+      <ix-dropdown trigger="trigger1">
+        <button id="trigger2">${button2Text}</button>
+        <ix-dropdown trigger="trigger2">
+          <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        </ix-dropdown>
+      </ix-dropdown>
+    `);
+    });
+    regressionTest('can open nested dropdown', async ({ page }) => {
+        await page.getByText(button1Text).click();
+        await page.getByText(button2Text).click();
+        const nestedDropdownItem = page.locator('ix-dropdown-item');
+        await expect(nestedDropdownItem).toHaveClass(/hydrated/);
+    });
+});
+regressionTest.describe('nested dropdown 3/3', () => {
+    regressionTest.beforeEach(async ({ mount }) => {
+        await mount(`
+      <ix-button id="trigger-dropdown-1">Trigger 1</ix-button>
+      <ix-dropdown id="dropdown-1" close-behavior="outside" trigger="trigger-dropdown-1">
+        <ix-dropdown-item id="trigger-dropdown-2">Item 1</ix-dropdown-item>
+        <ix-dropdown-item>Item 2</ix-dropdown-item>
+      </ix-dropdown>
+
+      <ix-dropdown trigger="trigger-dropdown-2" id="dropdown-2" close-behavior="inside">
+        <ix-dropdown-item>Item 1.1</ix-dropdown-item>
+        <ix-dropdown-item>Item 1.2</ix-dropdown-item>
+        <ix-dropdown-item>Item 1.3</ix-dropdown-item>
+      </ix-dropdown>
+    `);
+    });
+    regressionTest('close child on parent dismiss', async ({ page }) => {
+        const triggerDropdown1 = page.locator('#trigger-dropdown-1');
+        const triggerDropdown2 = page.locator('#trigger-dropdown-2');
+        const dropdown1 = page.locator('#dropdown-1');
+        const dropdown2 = page.locator('#dropdown-2');
+        await triggerDropdown1.click();
+        await triggerDropdown2.click();
+        await triggerDropdown1.click();
+        await expect(dropdown1).not.toBeVisible();
+        await expect(dropdown2).not.toBeVisible();
+    });
+});
+regressionTest('Nested dropdowns within application-header', async ({ mount, page }) => {
+    await mount(html `
+      <ix-application-header>
+        <ix-dropdown-button label="Trigger">
+          <ix-dropdown-item label="MainItem 1"></ix-dropdown-item>
+          <ix-dropdown-item label="MainItem 2"></ix-dropdown-item>
+          <ix-dropdown-item
+            label="MainItem 3"
+            id="submenu-01"
+          ></ix-dropdown-item>
+        </ix-dropdown-button>
+      </ix-application-header>
+      <ix-dropdown id="submenu" trigger="submenu-01">
+        <ix-dropdown-item>SubMenuItem 1</ix-dropdown-item>
+        <ix-dropdown-item>SubMenuItem 2</ix-dropdown-item>
+        <ix-dropdown-item>SubMenuItem 3</ix-dropdown-item>
+        <ix-dropdown-item>SubMenuItem 4</ix-dropdown-item>
+      </ix-dropdown>
+    `);
+    await page.setViewportSize(viewPorts.sm);
+    await page.waitForTimeout(500);
+    const header = page.locator('ix-application-header');
+    await expect(header).toBeVisible();
+    const overflowTrigger = header.locator('ix-icon-button');
+    await overflowTrigger.click();
+    const dropdownButton = header.locator('ix-dropdown-button');
+    await dropdownButton.locator('ix-button').click();
+    const dropdownOfDropdownButton = dropdownButton.locator('ix-dropdown');
+    await expect(dropdownOfDropdownButton).toBeVisible();
+    const submenuTrigger = page
+        .locator('ix-dropdown-item')
+        .getByText('MainItem 3');
+    await expect(submenuTrigger).toBeVisible();
+    await submenuTrigger.click();
+    const submenuDropdown = page.locator('#submenu');
+    await expect(submenuDropdown).toBeVisible();
+    const subMenuItem = submenuDropdown
+        .locator('ix-dropdown-item')
+        .getByText('SubMenuItem 3');
+    await subMenuItem.click();
+    await expect(submenuDropdown).not.toBeVisible();
+    await expect(dropdownOfDropdownButton).not.toBeVisible();
+});
+regressionTest.describe('resolve during element connect', () => {
+    regressionTest.beforeEach(async ({ mount }) => {
+        await mount(`
+    <ix-button id="trigger">Open</ix-button>
+    <ix-dropdown trigger="trigger">
+      <ix-dropdown-item label="Item 1" icon="print"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item>Custom</ix-dropdown-item>
+    </ix-dropdown>
+    `, {
+            icons: { iconPrint },
+        });
+    });
+    regressionTest('attach and detach from dom', async ({ page }) => {
+        await page.evaluate(() => {
+            const dropdown = document.querySelector('ix-dropdown');
+            const mount = document.querySelector('#mount');
+            mount.removeChild(dropdown);
+            mount.append(dropdown);
+        });
+        const dropdown = page.locator('ix-dropdown');
+        await page.locator('ix-button').first().click();
+        await expect(dropdown).toBeVisible();
+    });
+    regressionTest('add element within runtime', async ({ page }) => {
+        await page.evaluate(async () => {
+            const divElement = document.createElement('div');
+            const mount = document.querySelector('#mount');
+            mount.appendChild(divElement);
+        });
+        const dropdown = page.locator('ix-dropdown');
+        await page.locator('ix-button').first().click();
+        await expect(dropdown).toBeVisible();
+    });
+});
+regressionTest('Child dropdown disconnects', async ({ mount, page }) => {
+    await mount(`<ix-button id="trigger">Open</ix-button>
+        <ix-dropdown closeBehavior="outside" trigger="trigger">
+          <ix-dropdown-item id="item-1">Item level 1</ix-dropdown-item>
+          <ix-dropdown-button label="Nested">
+            <ix-dropdown-item id="item-1">Item level 2</ix-dropdown-item>
+          </ix-dropdown-button>
+        </ix-dropdown>`);
+    const trigger = page.locator('ix-button').first();
+    await trigger.click();
+    const dropdown = page.locator('ix-dropdown').first();
+    await expect(dropdown).toBeVisible();
+    await dropdown.evaluate((dd) => {
+        dd.removeChild(dd.querySelector('ix-dropdown-button'));
+    });
+    await trigger.click();
+    await trigger.click();
+    await expect(dropdown).toBeVisible();
+});
+regressionTest.describe('A11y', () => {
+    regressionTest.describe('Keyboard navigation', () => {
+        regressionTest.beforeEach(async ({ page, mount }) => {
+            await mount(`
+      <ix-button id="trigger">Open</ix-button>
+      <ix-dropdown trigger="trigger">
+        <ix-dropdown-item label="Item 1" icon="print"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+        <ix-dropdown-item>Custom</ix-dropdown-item>
+      </ix-dropdown>
+      `, {
+                icons: { iconPrint },
+            });
+            await page.locator('#trigger').click();
+        });
+        regressionTest.describe('ArrowDown', () => {
+            regressionTest('trigger -> first item', async ({ page }) => {
+                await page.keyboard.press('ArrowDown');
+                await page.waitForTimeout(100);
+                const item = await page.locator('ix-dropdown-item').first();
+                await expect(item).toBeFocused();
+            });
+            regressionTest('first item -> second item', async ({ page }) => {
+                await page.keyboard.press('ArrowDown');
+                await page.waitForTimeout(100);
+                await page.keyboard.press('ArrowDown');
+                await page.waitForTimeout(100);
+                const item = await page.locator('ix-dropdown-item').nth(1);
+                await expect(item).toBeFocused();
+            });
+        });
+        regressionTest.describe('ArrowUp', () => {
+            regressionTest('second item -> fist item', async ({ page }) => {
+                await page.keyboard.press('ArrowDown');
+                await page.waitForTimeout(100);
+                await page.keyboard.press('ArrowDown');
+                await page.waitForTimeout(100);
+                await page.keyboard.press('ArrowUp');
+                const item = page.locator('ix-dropdown-item').first();
+                await expect(item).toBeFocused();
+            });
+        });
+    });
+});
+regressionTest('Dropdown works in floating-ui', async ({ mount, page }) => {
+    await mount(`
+    <style>
+      .dialog {
+        animation: fade-in 0.2s forwards;
+        overflow: visible;
+      }
+
+      @keyframes fade-in {
+        0% {
+          opacity: 0;
+          transform: translate(0, -50px);
+        }
+        100% {
+          opacity: 1;
+          transform: translate(0, 0);
+        }
+      }
+    </style>
+
+    <dialog id="dialog" class="dialog">
+      <ix-button id="trigger">Open</ix-button>
+      <ix-dropdown id="dropdown" trigger="trigger">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown>
+    </dialog>
+  `);
+    await page.evaluate(() => {
+        const dialog = document.getElementById('dialog');
+        dialog.showModal();
+    });
+    const trigger = page.locator('#trigger');
+    await trigger.click();
+    const dropdown = page.locator('#dropdown');
+    const dropdownRect = (await dropdown.boundingBox());
+    const triggerRect = (await trigger.boundingBox());
+    expect(Math.round(dropdownRect.x)).toBe(Math.round(triggerRect.x));
+    expect(Math.round(dropdownRect.y)).toBe(Math.round(triggerRect.y + triggerRect.height));
+});
+//# sourceMappingURL=dropdown.ct.js.map