@genexus/genexus-ide-ui 0.0.22 → 0.0.24

package/dist/esm/ch-action-group_2.entry.js

@@ -0,0 +1,206 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
+
+const actionGroupCss = "*,::after,::before{box-sizing:border-box}:host{display:grid;position:relative;width:100%;grid-template:\"more-actions actions\" 1fr/min-content 1fr;overflow:hidden}.more-actions{grid-area:more-actions}.more-actions::part(expandable-button){width:1.375em;height:1.375em}.more-actions::part(expandable-button)::before{content:\"\";width:100%;height:100%;background-color:currentColor;-webkit-mask:url('data:image/svg+xml,<svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.26837 10.5625C4.16837 10.5625 3.26837 11.4625 3.26837 12.5625C3.26837 13.6625 4.16837 14.5625 5.26837 14.5625C6.36837 14.5625 7.26837 13.6625 7.26837 12.5625C7.26837 11.4625 6.36837 10.5625 5.26837 10.5625ZM19.2684 10.5625C18.1684 10.5625 17.2684 11.4625 17.2684 12.5625C17.2684 13.6625 18.1684 14.5625 19.2684 14.5625C20.3684 14.5625 21.2684 13.6625 21.2684 12.5625C21.2684 11.4625 20.3684 10.5625 19.2684 10.5625ZM12.2684 10.5625C11.1684 10.5625 10.2684 11.4625 10.2684 12.5625C10.2684 13.6625 11.1684 14.5625 12.2684 14.5625C13.3684 14.5625 14.2684 13.6625 14.2684 12.5625C14.2684 11.4625 13.3684 10.5625 12.2684 10.5625Z\"/></svg>') 50% 50%/1.25em 1.25em no-repeat}.actions{grid-area:actions;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;width:100%;max-width:100%}.actions--responsive{position:absolute;inset:0}.actions--scroll{overflow-x:auto}.actions--multiline{display:flex;flex-wrap:wrap}";
+
+const FLOATING_POINT_ERROR = 1;
+const ChActionGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.displayedItemsCountChange = createEvent(this, "displayedItemsCountChange", 7);
+    this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
+    this.totalItems = -1;
+    /**
+     * The visible actions when `itemsOverflowBehavior === "ResponsiveCollapse"`.
+     */
+    this.displayedItems = -1;
+    /**
+     * This attribute lets you specify the label for the more actions button.
+     * Important for accessibility.
+     */
+    this.buttonLabel = "More actions";
+    /**
+     * This attribute determines how items behave when the content of the ActionGroup overflows horizontal. This property is needed
+     * to make the control responsive to changes in the Width of the container of ActionGroup.
+     *
+     * | Value                 | Details                                                                                          |
+     * | --------------------- | ------------------------------------------------------------------------------------------------ |
+     * | `Add Scroll`          | The items of the ActionGroup that overflow horizontally are shown by means of a scroll.          |
+     * | `Multiline`           | The ActionGroup items that overflow horizontally are shown in a second line of the control.      |
+     * | `Responsive Collapse` | The Action Group items, when they start to overflow the control, are placed in the More Actions. |
+     */
+    this.itemsOverflowBehavior = "ResponsiveCollapse";
+    /**
+     * Determine which mouse actions on the expandable button display the dropdown
+     * section.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * @todo Check a better convention for this property, for example, "ActionsInlineAlignment"
+     * This attribute determines the position of the More Actions button in the Action Group.
+     *
+     * | Value   | Details                                                               |
+     * | --------| --------------------------------------------------------------------- |
+     * | `Start` | The More Actions Button is displayed to the left of the ActionGroup.  |
+     * | `End`   | The More Actions Button is displayed to the right of the ActionGroup. |
+     */
+    this.moreActionsButtonPosition = "Start";
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the more actions button.
+     */
+    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
+    /**
+     * Determine if the dropdowns should be opened when the action is focused.
+     */
+    this.openOnFocus = false;
+    /**
+     * Update the visibility of the actions.
+     * Only works if itemsOverflowBehavior === "ResponsiveCollapse"
+     */
+    this.updateDisplayedActions = () => {
+      const actionGroupItems = this.slotItems.assignedElements();
+      // The column-gap property must be taken into account
+      const columnGap = getComputedStyle(this.actionsContainer).columnGap;
+      const columnGapValue = columnGap != null && columnGap.endsWith("px")
+        ? Number(columnGap.replace("px", ""))
+        : 0;
+      // Since the last item does not add column-gap, we have to adjust the measurement
+      let availableWidth = this.actionsContainer.clientWidth + columnGapValue - FLOATING_POINT_ERROR;
+      let displayedItems = 0;
+      // Check which items are visible
+      actionGroupItems.forEach(action => {
+        const actionWidth = action.clientWidth;
+        availableWidth -= actionWidth + columnGapValue;
+        if (availableWidth >= 0) {
+          action.floating = false;
+          displayedItems++;
+        }
+        else {
+          action.floating = true;
+        }
+      });
+      this.totalItems = actionGroupItems.length;
+      this.displayedItems = displayedItems;
+      this.displayedItemsCountChange.emit(displayedItems);
+    };
+    this.updateDisplayedActionInFrame = () => {
+      if (!this.needForRAF) {
+        return;
+      }
+      this.needForRAF = false; // No need to call RAF up until next frame
+      requestAnimationFrame(() => {
+        this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
+        this.updateDisplayedActions();
+      });
+    };
+    this.updateActionsWatcher = () => {
+      if (this.itemsOverflowBehavior !== "ResponsiveCollapse") {
+        return;
+      }
+      // Avoid memory leaks by disconnecting and re-connecting the observer
+      this.disconnectActionsObserver();
+      this.connectActionsObserver();
+    };
+  }
+  handleOverflowBehaviorChange(newValue) {
+    if (newValue !== "ResponsiveCollapse") {
+      const actionGroupItems = this.slotItems.assignedElements();
+      // Reset floating
+      actionGroupItems.forEach(item => {
+        item.floating = false;
+      });
+    }
+    this.setResponsiveCollapse();
+  }
+  connectActionsObserver() {
+    this.actionsWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
+    // Observe the actions
+    const actionGroupItems = this.slotItems.assignedElements();
+    actionGroupItems.forEach(action => {
+      this.actionsWatcher.observe(action);
+    });
+  }
+  connectActionsContainerObserver() {
+    this.actionsContainerWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
+    this.actionsContainerWatcher.observe(this.el);
+  }
+  disconnectActionsObserver() {
+    if (this.actionsWatcher) {
+      this.actionsWatcher.disconnect();
+      this.actionsWatcher = null;
+    }
+  }
+  disconnectActionsContainerObserver() {
+    if (this.actionsContainerWatcher) {
+      this.actionsContainerWatcher.disconnect();
+      this.actionsContainerWatcher = null;
+    }
+  }
+  setResponsiveCollapse() {
+    this.disconnectActionsObserver();
+    this.disconnectActionsContainerObserver();
+    if (this.itemsOverflowBehavior !== "ResponsiveCollapse") {
+      return;
+    }
+    this.connectActionsObserver();
+    this.connectActionsContainerObserver();
+  }
+  componentDidLoad() {
+    this.setResponsiveCollapse();
+  }
+  disconnectedCallback() {
+    this.disconnectActionsObserver();
+    this.disconnectActionsContainerObserver();
+  }
+  render() {
+    // @todo TODO: Improve accessibility and keyboard navigation
+    return (h(Host, { role: "menubar", "aria-label": this.accessibleName }, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+      this.totalItems !== this.displayedItems && (h("ch-dropdown", { exportparts: "expandable-button:more-actions-button,separation:more-actions-separation,list:more-actions-list,section:more-actions-section,mask:more-actions-mask", buttonLabel: this.buttonLabel, class: "more-actions", part: "more-actions", expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.moreActionsDropdownPosition }, h("slot", { name: "more-items", slot: "items" }))), h("div", { class: {
+        actions: true,
+        "actions--scroll": this.itemsOverflowBehavior === "AddScroll",
+        "actions--multiline": this.itemsOverflowBehavior === "Multiline",
+        "actions--responsive": this.itemsOverflowBehavior === "ResponsiveCollapse"
+      }, part: "actions", ref: el => (this.actionsContainer = el) }, h("slot", { name: "items", onSlotchange: this.updateActionsWatcher, ref: el => (this.slotItems = el) }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "itemsOverflowBehavior": ["handleOverflowBehaviorChange"]
+  }; }
+};
+ChActionGroup.style = actionGroupCss;
+
+const actionGroupItemCss = "ch-action-group-item[floating]{position:absolute;visibility:hidden}";
+
+const ChActionGroupItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * `true` to ignore the floating property value.
+     */
+    this.avoidFloating = false;
+    /**
+     * `true` if the control is floating. Useful to implement the
+     * `"ResponsiveCollapse"` value for the `itemsOverflowBehavior` property of
+     * the ch-action-group control.
+     */
+    this.floating = false;
+  }
+  componentWillLoad() {
+    if (this.avoidFloating) {
+      return;
+    }
+    const parentAction = this.el.closest("ch-action-group");
+    // Hide items at the start to improve CLS
+    if (parentAction) {
+      this.floating =
+        parentAction.itemsOverflowBehavior === "ResponsiveCollapse";
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return getElement(this); }
+};
+ChActionGroupItem.style = actionGroupItemCss;
+
+export { ChActionGroup as ch_action_group, ChActionGroupItem as ch_action_group_item };

package/dist/esm/ch-dropdown-item.entry.js

@@ -1,17 +1,45 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 
-const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}@media (prefers-color-scheme: light){.action:focus,.action:hover{background-color:#ccc}.action:active{background-color:#e9e9e9}}@media (prefers-color-scheme: dark){.action:focus,.action:hover{background-color:#3e3e40}.action:active{background-color:#575965}}:host{display:flex;width:100%;height:100%}.action{display:flex;align-items:center;column-gap:8px;width:100%;height:100%;cursor:pointer;padding-block:8px;padding-inline:16px;font-size:0.875em;text-align:start;transition-property:background-color, border-color, box-shadow, color, filter, opacity;transition-duration:250ms}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}";
+const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}:host([force-containing-block]){transform:translateX(0);--ch-window-relative-position:true}.action{display:flex;align-items:center;width:100%;height:100%;cursor:pointer;text-align:start}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}.dummy-wrapper{display:contents}";
 
+const DROPDOWN_ITEM = "ch-dropdown-item";
 const ChDropDownItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.actionClick = createEvent(this, "actionClick", 7);
     this.focusChange = createEvent(this, "focusChange", 7);
+    this.hasItems = false;
+    /**
+     * Determine which actions on the expandable button display the dropdown
+     * section.
+     * Only works if the control has subitems.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * `true` to force the control to make its own containing block.
+     */
+    this.forceContainingBlock = true;
+    /**
+     * Determine if the dropdown section should be opened when the expandable
+     * button of the control is focused.
+     * Only works if the control has subitems.
+     */
+    this.openOnFocus = false;
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the expandable button.
+     */
+    this.position = "Center_OutsideEnd";
     this.dropDownItemContent = () => [
-      !!this.leftImgSrc && (h("img", { "aria-hidden": "true", class: "left-img", part: "dropdown-item__left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
-      h("span", { class: "content", part: "dropdown-item__content" }, h("slot", null)),
-      !!this.rightImgSrc && (h("img", { "aria-hidden": "true", class: "right-img", part: "dropdown-item__right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
+      !!this.leftImgSrc && (h("img", { "aria-hidden": "true", class: "left-img", part: "left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
+      h("span", { class: "content", part: "content" }, h("slot", null)),
+      !!this.rightImgSrc && (h("img", { "aria-hidden": "true", class: "right-img", part: "right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
     ];
+    this.checkItems = () => {
+      this.hasItems = !!this.element.querySelector(`:scope>${DROPDOWN_ITEM}`);
+    };
+    this.noItemsRender = () => this.href ? (h("a", { class: "action", part: "action target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems }))) : (h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems })));
+    this.itemsRender = () => (h("ch-dropdown", { class: "action", exportparts: "expandable-button:action,expandable-button:button,expandable-button:expandable-action,separation,list,section,mask,header,footer,window", expandBehavior: this.expandBehavior, nestedDropdown: true, openOnFocus: this.openOnFocus, position: this.position }, h("div", { class: "dummy-wrapper", slot: "action" }, this.dropDownItemContent()), h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
     this.handleActionClick = () => {
       this.actionClick.emit(this.element.id);
     };
@@ -25,8 +53,11 @@ const ChDropDownItem = class {
   async handleFocusElement() {
     this.mainElement.focus();
   }
+  componentWillLoad() {
+    this.checkItems();
+  }
   render() {
-    return (h(Host, { role: "listitem" }, this.href ? (h("a", { class: "action", part: "dropdown-item__target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent())) : (h("button", { class: "action", part: "dropdown-item__button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent()))));
+    return (h(Host, { role: "listitem" }, this.hasItems ? this.itemsRender() : this.noItemsRender()));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/ch-dropdown.entry.js

@@ -1,7 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 
-const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}@media (prefers-color-scheme: light){.section{background-color:#fbfbfb;color:#000}}@media (prefers-color-scheme: dark){.section{background-color:#242426;color:#e9e9e9}}:host{--ch-dropdown-rtl-initial-X:1;--ch-dropdown-translateX:0;--ch-dropdown-translateY:0;display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{box-shadow:0px 0px 0 1px currentColor;transition:box-shadow 250ms}.dummy-separation{display:flex;position:absolute;z-index:107}.dummy-separation--vertical{width:100%;height:var(--separation-between-button-size)}.dummy-separation--top{inset-block-start:var(--separation-between-button)}.dummy-separation--bottom{inset-block-end:var(--separation-between-button)}.dummy-separation--horizontal{width:var(--separation-between-button-size);height:100%}.dummy-separation--left{inset-inline-start:var(--separation-between-button)}.dummy-separation--right{inset-inline-end:var(--separation-between-button)}.section{position:absolute;border-radius:5px;box-shadow:0 3px 4px #80808024, 0 3px 3px -2px #8080801f, 0 1px 8px #80808030;width:max-content;max-width:350px;z-index:107}.header+.list,.list+.footer{margin-block-start:8px}.list{display:flex;flex-direction:column;gap:4px}.position--top{inset-block-start:var(--separation-between-button);transform:translate(var(--ch-dropdown-translateX), -100%)}.position--right{inset-inline-end:var(--separation-between-button);transform:translate(calc(100% * var(--ch-dropdown-rtl-initial-X)), var(--ch-dropdown-translateY))}.position--bottom{inset-block-end:var(--separation-between-button);transform:translate(var(--ch-dropdown-translateX), 100%)}.position--left{inset-inline-start:var(--separation-between-button);transform:translate(calc(-100% * var(--ch-dropdown-rtl-initial-X)), var(--ch-dropdown-translateY))}.align--left{inset-inline-start:0}.align--center{inset-inline-start:50%;--ch-dropdown-translateX:calc(-50% * var(--ch-dropdown-rtl-initial-X))}.align--right{inset-inline-end:0}.valign--top{inset-block-start:0}.valign--middle{inset-block-start:50%;--ch-dropdown-translateY:calc(-50% * var(--ch-dropdown-rtl-initial-X))}.valign--bottom{inset-block-end:0}";
+const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{transition:box-shadow 250ms}::slotted([slot=action]){pointer-events:none}.separation{display:flex;position:absolute;z-index:107}.separation--y{width:100%;height:var(--separation-y)}.separation--y-outside-start{inset-block-start:calc(var(--separation-y) * -1)}.separation--y-outside-start+ch-window{--ch-window-offset-y:calc(var(--separation-y) * -1)}.separation--y-outside-end{inset-block-end:calc(var(--separation-y) * -1)}.separation--y-outside-end+ch-window{--ch-window-offset-y:var(--separation-y)}.separation--x{width:var(--separation-x);height:100%}.separation--x-outside-start{inset-inline-start:calc(var(--separation-x) * -1)}.separation--x-outside-start+ch-window{--ch-window-offset-x:calc(var(--separation-x) * -1)}.separation--x-outside-end{inset-inline-end:calc(var(--separation-x) * -1)}.separation--x-outside-end+ch-window{--ch-window-offset-x:var(--separation-x)}.list{display:flex;flex-direction:column}";
 
+const mapDropdownAlignToChWindowAlign = {
+  OutsideStart: "outside-start",
+  InsideStart: "inside-start",
+  Center: "center",
+  InsideEnd: "inside-end",
+  OutsideEnd: "outside-end"
+};
 const EXPANDABLE_BUTTON_ID = "expandable-button";
 const SECTION_ID = "section";
 const DROPDOWN_ITEM_TAG_NAME = "ch-dropdown-item";
@@ -46,11 +53,6 @@ const ChDropDown = class {
     this.showFooter = false;
     this.expanded = false;
     this.expandedWithHover = false;
-    /**
-     * Specifies the horizontal alignment the dropdown section has when using
-     * `position === "Top"` or `position === "Bottom"`.
-     */
-    this.align = "Center";
     /**
      * This attribute lets you specify the label for the expandable button.
      * Important for accessibility.
@@ -60,7 +62,12 @@ const ChDropDown = class {
      * Determine which actions on the expandable button display the dropdown
      * section.
      */
-    this.expandBehavior = "Click or Hover";
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * This attribute lets you specify if the control is nested in another
+     * dropdown. Useful to manage keyboard interaction.
+     */
+    this.nestedDropdown = false;
     /**
      * Determine if the dropdown section should be opened when the expandable
      * button of the control is focused.
@@ -70,17 +77,7 @@ const ChDropDown = class {
      * Specifies the position of the dropdown section that is placed relative to
      * the expandable button.
      */
-    this.position = "Bottom";
-    /**
-     * Specifies the separation (in pixels) between the expandable button and the
-     * dropdown section of the control.
-     */
-    this.dropdownSeparation = 12;
-    /**
-     * Specifies the vertical alignment the dropdown section has when using
-     * `position === "Right"` or `position === "Left"`.
-     */
-    this.valign = "Middle";
+    this.position = "Center_OutsideEnd";
     this.closeDropdown = () => {
       this.closeDropdownWithHover();
       this.expanded = false;
@@ -94,7 +91,7 @@ const ChDropDown = class {
       }
     };
     this.closeDropdownWhenClickingOutside = (event) => {
-      if (event.composedPath().find(el => el === this.element) === undefined) {
+      if (event.composedPath().find(el => el === this.el) === undefined) {
         this.closeDropdown();
       }
     };
@@ -112,15 +109,14 @@ const ChDropDown = class {
       if (event.code !== TAB_KEY) {
         return;
       }
-      const nextFocusedElement = event.target;
-      const isChildElement = nextFocusedElement.closest("ch-dropdown") === this.element;
+      const isChildElement = event.composedPath().includes(this.el);
       if (isChildElement) {
         return;
       }
       this.closeDropdown();
     };
     this.handleMouseLeave = () => {
-      const focusedElementIsInsideDropDown = document.activeElement.closest("ch-dropdown") === this.element;
+      const focusedElementIsInsideDropDown = document.activeElement.closest("ch-dropdown") === this.el;
       if (focusedElementIsInsideDropDown) {
         this.expanded = true;
       }
@@ -136,11 +132,13 @@ const ChDropDown = class {
         this.expandedChange.emit(true);
       }
     };
-    this.handleButtonClick = () => {
+    this.handleButtonClick = (event) => {
+      event.stopPropagation();
       this.expandedChange.emit(!this.expanded);
       this.expanded = !this.expanded;
     };
-    this.handleButtonFocus = () => {
+    this.handleButtonFocus = (event) => {
+      event.stopPropagation();
       if (this.expanded) {
         return;
       }
@@ -159,9 +157,11 @@ const ChDropDown = class {
         capture: true
       });
       // Keyboard events
-      document.body.addEventListener("keydown", this.handleKeyDownEvents, {
-        capture: true
-      });
+      if (!this.nestedDropdown) {
+        document.body.addEventListener("keydown", this.handleKeyDownEvents, {
+          capture: true
+        });
+      }
       document.body.addEventListener("keyup", this.handleKeyUpEvents, {
         capture: true
       });
@@ -172,9 +172,11 @@ const ChDropDown = class {
         capture: true
       });
       // Keyboard events
-      document.body.removeEventListener("keydown", this.handleKeyDownEvents, {
-        capture: true
-      });
+      if (!this.nestedDropdown) {
+        document.body.removeEventListener("keydown", this.handleKeyDownEvents, {
+          capture: true
+        });
+      }
       document.body.removeEventListener("keyup", this.handleKeyUpEvents, {
         capture: true
       });
@@ -189,7 +191,7 @@ const ChDropDown = class {
     this.currentFocusedItem = event.target;
   }
   focusFirstDropDownItem() {
-    this.currentFocusedItem = this.element.querySelector(DROPDOWN_ITEM_SELECTOR);
+    this.currentFocusedItem = this.el.querySelector(DROPDOWN_ITEM_SELECTOR);
     if (this.currentFocusedItem) {
       this.currentFocusedItem.handleFocusElement();
     }
@@ -218,40 +220,36 @@ const ChDropDown = class {
    * works if `openOnFocus = "false"`
    */
   returnFocusToButton() {
-    if (!this.openOnFocus) {
+    if (!this.openOnFocus && !this.nestedDropdown) {
       this.expandableButton.focus();
     }
   }
   componentWillLoad() {
-    this.showHeader = !!this.element.querySelector(':scope > [slot="header"]');
-    this.showFooter = !!this.element.querySelector(':scope > [slot="footer"]');
+    this.showHeader = !!this.el.querySelector(':scope > [slot="header"]');
+    this.showFooter = !!this.el.querySelector(':scope > [slot="footer"]');
   }
   render() {
-    const hasVerticalPosition = this.position === "Bottom" || this.position === "Top";
+    const aligns = this.position.split("_");
+    const alignX = aligns[0];
+    const alignY = aligns[1];
+    const hasVerticalPosition = alignY === "OutsideStart" || alignY === "OutsideEnd";
+    const xAlignMapping = mapDropdownAlignToChWindowAlign[alignX];
+    const yAlignMapping = mapDropdownAlignToChWindowAlign[alignY];
     const isExpanded = this.expanded || this.expandedWithHover;
-    return (h(Host, { onMouseLeave: this.expandBehavior === "Click or Hover"
+    return (h(Host, { onMouseLeave: this.expandBehavior === "ClickOrHover"
         ? this.handleMouseLeave
-        : undefined, style: {
-        "--separation-between-button": `-${this.dropdownSeparation}px`,
-        "--separation-between-button-size": `${this.dropdownSeparation}px`
-      } }, h("button", { id: EXPANDABLE_BUTTON_ID, "aria-controls": SECTION_ID, "aria-expanded": this.expanded.toString(), "aria-haspopup": "true", "aria-label": this.buttonLabel, class: "expandable-button", part: "dropdown__expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "Click or Hover"
+        : undefined }, h("button", { id: EXPANDABLE_BUTTON_ID, "aria-controls": SECTION_ID, "aria-expanded": this.expanded.toString(), "aria-haspopup": "true", "aria-label": this.buttonLabel, class: "expandable-button", part: "expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "ClickOrHover"
         ? this.handleMouseEnter
-        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "Click or Hover" && this.expandedWithHover && (
+        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "ClickOrHover" && (
     // Necessary since the separation between the button and the section
     // triggers the onMouseLeave event
     h("div", { "aria-hidden": "true", class: {
-        "dummy-separation": true,
-        [`dummy-separation--${this.position.toLowerCase()}`]: true,
-        "dummy-separation--vertical": hasVerticalPosition,
-        "dummy-separation--horizontal": !hasVerticalPosition
-      }, part: "dropdown__separation" })), h("section", { id: SECTION_ID, "aria-labelledby": EXPANDABLE_BUTTON_ID, class: {
-        section: true,
-        [`position--${this.position.toLowerCase()}`]: true,
-        [`align--${this.align.toLowerCase()}`]: hasVerticalPosition,
-        [`valign--${this.valign.toLowerCase()}`]: !hasVerticalPosition
-      }, part: "dropdown__section", hidden: !isExpanded }, this.showHeader && (h("header", { class: "header", part: "dropdown__header" }, h("slot", { name: "header" }))), h("div", { role: "list", class: "list", part: "dropdown__list" }, h("slot", { name: "items" })), this.showFooter && (h("footer", { class: "footer", part: "dropdown__footer" }, h("slot", { name: "footer" }))))));
+        separation: true,
+        [`separation--y separation--y-${yAlignMapping}`]: hasVerticalPosition,
+        [`separation--x separation--x-${xAlignMapping}`]: !hasVerticalPosition
+      }, part: "separation" })), h("ch-window", { part: "window", exportparts: "window:section,mask,header,footer", container: this.el, closeOnEscape: true, hidden: !isExpanded, modal: false, showFooter: this.showFooter, showHeader: this.showHeader, xAlign: xAlignMapping, yAlign: yAlignMapping }, this.showHeader && h("slot", { name: "header", slot: "header" }), h("div", { role: "list", class: "list", part: "list" }, h("slot", { name: "items" })), this.showFooter && h("slot", { name: "footer", slot: "footer" }))));
   }
-  get element() { return getElement(this); }
+  get el() { return getElement(this); }
   static get watchers() { return {
     "expanded": ["handleExpandedChange"]
   }; }